@luftborn/custom-elements 2.13.0 → 2.13.1
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/assets/style.css +10 -10
- package/demo/index.js +35 -35
- package/demo/index.min.js +34 -34
- 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 +1 -1
- package/dist/elements/CheckBoxElement/CheckBoxElement.js.map +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepicker.js +13 -13
- package/dist/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepicker.js.map +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepickerStyles.d.ts +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepickerStyles.js +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepickerStyles.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/IdentificationElement/IdentificationElement.js +1 -1
- package/dist/elements/IdentificationElement/IdentificationElement.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 +1 -1
- package/dist/elements/RadioButtonGroup/RadioButtonGroupElement.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 +1 -1
- package/src/elements/BankField/BankFieldElement.ts +1 -1
- package/src/elements/CPRElement/CPRElement.ts +1 -1
- package/src/elements/CVRElement/CVRElement.ts +1 -1
- package/src/elements/CheckBoxElement/CheckBoxElement.ts +13 -5
- package/src/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepicker.ts +13 -13
- package/src/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepickerStyles.ts +16 -16
- package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts +5 -5
- package/src/elements/CustomRegularExpression/CustomRegularExpressionElement.ts +1 -1
- package/src/elements/DateField/DateFieldElement.ts +1 -1
- package/src/elements/DropDownList/DropDownListElement.ts +2 -2
- 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 +10 -5
- 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 +8 -8
package/demo/index.min.js
CHANGED
|
@@ -3649,7 +3649,7 @@ var AddressElement = /** @class */ (function (_super) {
|
|
|
3649
3649
|
(0, custom_element_decorator_1.default)({
|
|
3650
3650
|
selector: 'address-element',
|
|
3651
3651
|
template: "\n\t\t\t<div class=\"address-wrapper\">\n\t\t\t\t<input class='address-part' id='address' type=\"text\" placeholder='Address'/>\n\t\t\t\t<input class='address-part' id='zip' type=\"text\" placeholder='Zip'/>\n\t\t\t\t<input class='address-part' id='city' type=\"text\" placeholder='City'/>\n\t\t\t\t<input class='address-part' id='country' type=\"text\" placeholder='Country'/>\n\t\t\t</div>",
|
|
3652
|
-
style: ".address-wrapper{\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: nowrap;\n\t\t\t}\n\t\t\tinput.address-part{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin:
|
|
3652
|
+
style: ".address-wrapper{\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-wrap: nowrap;\n\t\t\t}\n\t\t\tinput.address-part{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 0.125rem;\n\t\t\t\tresize: none;\n\t\t\t\twidth:33% !important;\n\t\t\t}\n\t\t",
|
|
3653
3653
|
templatePath: './html.html',
|
|
3654
3654
|
useShadow: true,
|
|
3655
3655
|
})
|
|
@@ -3782,7 +3782,7 @@ var BankFieldElement = /** @class */ (function (_super) {
|
|
|
3782
3782
|
(0, custom_element_decorator_1.default)({
|
|
3783
3783
|
selector: 'bank-element',
|
|
3784
3784
|
template: "\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>",
|
|
3785
|
-
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: none;\n background-color: #f1f4ff;\n margin:
|
|
3785
|
+
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: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }\n ",
|
|
3786
3786
|
useShadow: true,
|
|
3787
3787
|
})
|
|
3788
3788
|
], BankFieldElement);
|
|
@@ -3872,7 +3872,7 @@ var CPRElement = /** @class */ (function (_super) {
|
|
|
3872
3872
|
(0, custom_element_decorator_1.default)({
|
|
3873
3873
|
selector: 'cpr-element',
|
|
3874
3874
|
template: "\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>",
|
|
3875
|
-
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: none;\n background-color: #f1f4ff;\n margin:
|
|
3875
|
+
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: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }\n ",
|
|
3876
3876
|
useShadow: true,
|
|
3877
3877
|
})
|
|
3878
3878
|
], CPRElement);
|
|
@@ -3962,7 +3962,7 @@ var CVRElement = /** @class */ (function (_super) {
|
|
|
3962
3962
|
(0, custom_element_decorator_1.default)({
|
|
3963
3963
|
selector: 'cvr-element',
|
|
3964
3964
|
template: "\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>",
|
|
3965
|
-
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: none;\n background-color: #f1f4ff;\n margin:
|
|
3965
|
+
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: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }\n ",
|
|
3966
3966
|
useShadow: true,
|
|
3967
3967
|
})
|
|
3968
3968
|
], CVRElement);
|
|
@@ -4064,7 +4064,7 @@ var CheckBoxElement = /** @class */ (function (_super) {
|
|
|
4064
4064
|
(0, custom_element_decorator_1.default)({
|
|
4065
4065
|
selector: 'checkbox-element',
|
|
4066
4066
|
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<fieldset></fieldset>\n\t\t\t</div>",
|
|
4067
|
-
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
|
|
4067
|
+
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: rgba(72, 72, 72, 0.75);\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: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 0.125rem;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\t.sr-only:not(:focus):not(:active) {\n\t\t\t\tclip: rect(0 0 0 0); \n\t\t\t\tclip-path: inset(50%);\n\t\t\t\theight: 0.063rem;\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: absolute;\n\t\t\t\twhite-space: nowrap; \n\t\t\t\twidth: 0.063rem;\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",
|
|
4068
4068
|
useShadow: true,
|
|
4069
4069
|
})
|
|
4070
4070
|
], CheckBoxElement);
|
|
@@ -4258,9 +4258,9 @@ var CustomDatepicker = /** @class */ (function () {
|
|
|
4258
4258
|
var _this = this;
|
|
4259
4259
|
var tempCurrentYear = this.currentYear;
|
|
4260
4260
|
this.selectMonthYear.style.display = 'none';
|
|
4261
|
-
this.selectMonthYear.style.height = '
|
|
4261
|
+
this.selectMonthYear.style.height = '12.5rem';
|
|
4262
4262
|
if ((0, CustomDatepickerUtils_1.isMobileDevice)()) {
|
|
4263
|
-
this.selectMonthYear.style.height = '
|
|
4263
|
+
this.selectMonthYear.style.height = '18.75rem';
|
|
4264
4264
|
}
|
|
4265
4265
|
this.selectMonthYear.innerHTML = '';
|
|
4266
4266
|
var monthsContainer = document.createElement('div');
|
|
@@ -4370,33 +4370,33 @@ var CustomDatepicker = /** @class */ (function () {
|
|
|
4370
4370
|
this.datepicker.style.position = 'fixed';
|
|
4371
4371
|
var datepickerHeight = 250;
|
|
4372
4372
|
if ((0, CustomDatepickerUtils_1.isMobileDevice)()) {
|
|
4373
|
-
this.datepicker.style.height = '
|
|
4373
|
+
this.datepicker.style.height = '25rem';
|
|
4374
4374
|
this.datepicker.style.top = '50%';
|
|
4375
4375
|
this.datepicker.style.left = '50%';
|
|
4376
4376
|
this.datepicker.style.transform = 'translate(-50%, -50%)';
|
|
4377
4377
|
this.datepicker.style.width = '90%';
|
|
4378
|
-
this.datepicker.style.maxWidth = '
|
|
4379
|
-
this.datepicker.style.fontSize = '
|
|
4380
|
-
this.datepicker.style.padding = '
|
|
4381
|
-
this.header.style.marginBottom = '
|
|
4378
|
+
this.datepicker.style.maxWidth = '18.75rem';
|
|
4379
|
+
this.datepicker.style.fontSize = '1rem';
|
|
4380
|
+
this.datepicker.style.padding = '1.875rem';
|
|
4381
|
+
this.header.style.marginBottom = '1.25rem';
|
|
4382
4382
|
var weekdaysSpans = this.weekdays.querySelectorAll('span');
|
|
4383
4383
|
var daysSpans = this.days.querySelectorAll('span');
|
|
4384
|
-
weekdaysSpans.forEach(function (span) { return span.style.marginBottom = '
|
|
4385
|
-
daysSpans.forEach(function (span) { return span.style.marginBottom = '
|
|
4384
|
+
weekdaysSpans.forEach(function (span) { return span.style.marginBottom = '0.625rem'; });
|
|
4385
|
+
daysSpans.forEach(function (span) { return span.style.marginBottom = '0.625rem'; });
|
|
4386
4386
|
}
|
|
4387
4387
|
else {
|
|
4388
|
-
this.datepicker.style.height = datepickerHeight + '
|
|
4388
|
+
this.datepicker.style.height = datepickerHeight / 16.0 + 'rem';
|
|
4389
4389
|
var dateInputRect = this.input.getBoundingClientRect();
|
|
4390
4390
|
datepickerHeight += 20;
|
|
4391
4391
|
if (window.innerHeight - dateInputRect.bottom < datepickerHeight) {
|
|
4392
4392
|
this.datepicker.style.top = 'auto';
|
|
4393
|
-
this.datepicker.style.bottom = window.innerHeight - dateInputRect.top + '
|
|
4393
|
+
this.datepicker.style.bottom = (window.innerHeight - dateInputRect.top) / 16.0 + 'rem';
|
|
4394
4394
|
}
|
|
4395
4395
|
else {
|
|
4396
4396
|
this.datepicker.style.bottom = 'auto';
|
|
4397
|
-
this.datepicker.style.top = dateInputRect.bottom + '
|
|
4397
|
+
this.datepicker.style.top = dateInputRect.bottom / 16.0 + 'rem';
|
|
4398
4398
|
}
|
|
4399
|
-
this.datepicker.style.left = dateInputRect.left + '
|
|
4399
|
+
this.datepicker.style.left = dateInputRect.left / 16.0 + 'rem';
|
|
4400
4400
|
}
|
|
4401
4401
|
};
|
|
4402
4402
|
CustomDatepicker.prototype.setDateForToday = function () {
|
|
@@ -4468,7 +4468,7 @@ exports.default = CustomDatepicker;
|
|
|
4468
4468
|
"use strict";
|
|
4469
4469
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4470
4470
|
exports.CustomDatepickerStyles = void 0;
|
|
4471
|
-
exports.CustomDatepickerStyles = "\n .custom-datepicker {\n position: fixed;\n background-color: #fff;\n display: none;\n width:
|
|
4471
|
+
exports.CustomDatepickerStyles = "\n .custom-datepicker {\n position: fixed;\n background-color: #fff;\n display: none;\n width: 12.5rem;\n border: 0.063rem solid #ccc;\n border-radius: 0.313rem;\n padding: 0.625rem;\n margin: 0 auto;\n box-shadow: 0 0 0.625rem 0 #ccc;\n font: 0.75rem Arial, sans-serif;\n }\n\n .custom-datepicker .custom-datepicer-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.625rem;\n }\n .custom-datepicker .weekdays {\n display: flex;\n justify-content: space-between;\n }\n .custom-datepicker .weekdays span {\n width: 14.28%;\n text-align: center;\n padding: 0.313rem 0;\n }\n .custom-datepicker .days {\n display: flex;\n flex-wrap: wrap;\n }\n .custom-datepicker .days span {\n width: 14.28%;\n text-align: center;\n padding: 0.313rem 0;\n }\n .custom-datepicker .days span:hover {\n background-color: #B2d5ff;\n cursor: pointer;\n }\n .custom-datepicker .days span.today {\n border: 0.063rem solid #000;\n }\n .custom-datepicker .days span.selected-day {\n background-color: #0075ff;\n color: #fff;\n }\n .custom-datepicker .prev-month, .next-month {\n cursor: pointer;\n }\n .custom-datepicker .month-year {\n font-weight: bold;\n }\n .custom-datepicker .month-year:hover {\n cursor: pointer;\n }\n .custom-datepicker .select-month-year {\n display: none;\n width: 100%;\n overflow-y: auto;\n }\n .custom-datepicker .select-month-year .year {\n text-align: center;\n background-color: #f0f0f0;\n border-bottom: 0.063rem solid #3f3d3d;\n padding: 0.313rem 0;\n cursor: pointer;\n }\n .custom-datepicker .select-month-year .year .months {\n display: flex;\n flex-wrap: wrap;\n }\n .custom-datepicker .select-month-year .year .months span {\n width: 25%;\n text-align: center;\n padding: 0.625rem 0;\n background-color: #fff;\n }\n .custom-datepicker .select-month-year .year .months span:hover {\n background-color: #B2d5ff;\n cursor: pointer;\n }\n .custom-datepicker .actions {\n display: flex;\n justify-content: space-between;\n margin-top: 0.625rem;\n }\n .custom-datepicker .actions input {\n color: #0075ff;\n border: none;\n background-color: transparent;\n padding: 0.313rem;\n border: 0.063rem solid transparent;\n }\n .custom-datepicker .actions input:hover {\n background-color: #B2d5ff;\n border-color: #000;\n }\n";
|
|
4472
4472
|
|
|
4473
4473
|
},{}],18:[function(require,module,exports){
|
|
4474
4474
|
"use strict";
|
|
@@ -5018,7 +5018,7 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
5018
5018
|
(0, custom_element_decorator_1.default)({
|
|
5019
5019
|
selector: 'custom-format-date-element',
|
|
5020
5020
|
template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"date-field\" />\n\t\t\t<svg id=\"picker-trigger\" 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</div>",
|
|
5021
|
-
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: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin:
|
|
5021
|
+
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: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\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#picker-trigger {\n\t\t\tcursor: pointer;\n\t\t\twidth: 0.938rem;\n\t\t\theight: 0.938rem;\n\t\t\tposition:absolute;\n\t\t\tright: 0.125rem;\n\t\t\ttop: 15%;\n\t\t}\n\t",
|
|
5022
5022
|
useShadow: true,
|
|
5023
5023
|
})
|
|
5024
5024
|
], CustomFormatDateFieldElement);
|
|
@@ -5114,7 +5114,7 @@ var CustomRegularExpressionElement = /** @class */ (function (_super) {
|
|
|
5114
5114
|
(0, custom_element_decorator_1.default)({
|
|
5115
5115
|
selector: 'regex-element',
|
|
5116
5116
|
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='regex-field'/>\n\t\t\t</div>",
|
|
5117
|
-
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: none;\n background-color: #f1f4ff;\n margin:
|
|
5117
|
+
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: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }\n ",
|
|
5118
5118
|
useShadow: true,
|
|
5119
5119
|
})
|
|
5120
5120
|
], CustomRegularExpressionElement);
|
|
@@ -5207,7 +5207,7 @@ var DateFieldElement = /** @class */ (function (_super) {
|
|
|
5207
5207
|
(0, custom_element_decorator_1.default)({
|
|
5208
5208
|
selector: 'date-element',
|
|
5209
5209
|
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"date\" id='date-field'/>\n\t\t\t</div>",
|
|
5210
|
-
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: none;\n background-color: #f1f4ff;\n margin:
|
|
5210
|
+
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: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }\n ",
|
|
5211
5211
|
useShadow: true,
|
|
5212
5212
|
})
|
|
5213
5213
|
], DateFieldElement);
|
|
@@ -5317,7 +5317,7 @@ var DropDownListElement = /** @class */ (function (_super) {
|
|
|
5317
5317
|
(0, custom_element_decorator_1.default)({
|
|
5318
5318
|
selector: 'drop-down-element',
|
|
5319
5319
|
template: "\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>",
|
|
5320
|
-
style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n justify-content: center;\n }\n .radio-button {\n width: auto;\n margin: auto
|
|
5320
|
+
style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n justify-content: center;\n }\n .radio-button {\n width: auto;\n margin: auto 0.188rem;\n display: flex;\n flex-grow: 0.1;\n justify-content: space-around;\n }\n select{\n box-sizing: border-box;\n width: 100% !important;\n border: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }\n ",
|
|
5321
5321
|
useShadow: true,
|
|
5322
5322
|
})
|
|
5323
5323
|
], DropDownListElement);
|
|
@@ -5456,7 +5456,7 @@ var EmailFieldElement = /** @class */ (function (_super) {
|
|
|
5456
5456
|
(0, custom_element_decorator_1.default)({
|
|
5457
5457
|
selector: 'email-element',
|
|
5458
5458
|
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='email-field'/>\n\t\t\t</div>",
|
|
5459
|
-
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: none;\n background-color: #f1f4ff;\n margin:
|
|
5459
|
+
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: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }\n ",
|
|
5460
5460
|
useShadow: true,
|
|
5461
5461
|
})
|
|
5462
5462
|
], EmailFieldElement);
|
|
@@ -5788,7 +5788,7 @@ var FileFieldElement = /** @class */ (function (_super) {
|
|
|
5788
5788
|
(0, custom_element_decorator_1.default)({
|
|
5789
5789
|
selector: 'file-element',
|
|
5790
5790
|
template: "\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>",
|
|
5791
|
-
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: none;\n background-color: #f1f4ff;\n margin:
|
|
5791
|
+
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: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }\n ",
|
|
5792
5792
|
useShadow: true,
|
|
5793
5793
|
})
|
|
5794
5794
|
], FileFieldElement);
|
|
@@ -5887,7 +5887,7 @@ var IdentificationElement = /** @class */ (function (_super) {
|
|
|
5887
5887
|
(0, custom_element_decorator_1.default)({
|
|
5888
5888
|
selector: 'id-element',
|
|
5889
5889
|
template: "\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>",
|
|
5890
|
-
style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n }\n input, select{\n box-sizing: border-box;\n border: none;\n background-color: #f1f4ff;\n margin:
|
|
5890
|
+
style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n }\n input, select{\n box-sizing: border-box;\n border: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }\n input{\n width: 75% !important;\n }\n select{\n width: 25% !important;\n }\n ",
|
|
5891
5891
|
useShadow: true,
|
|
5892
5892
|
})
|
|
5893
5893
|
], IdentificationElement);
|
|
@@ -6038,7 +6038,7 @@ var IntPhoneFieldElement = /** @class */ (function (_super) {
|
|
|
6038
6038
|
(0, custom_element_decorator_1.default)({
|
|
6039
6039
|
selector: 'int-phone-element',
|
|
6040
6040
|
template: "\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>",
|
|
6041
|
-
style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n }\n .iti {\n width: 100% !important;\n }\n input{\n box-sizing: border-box;\n width: 100% !important;\n border: none;\n background-color: #f1f4ff;\n margin:
|
|
6041
|
+
style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n }\n .iti {\n width: 100% !important;\n }\n input{\n box-sizing: border-box;\n width: 100% !important;\n border: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }\n\n @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {\n\t.iti__flag {\n\t background-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}\n }\n ",
|
|
6042
6042
|
useShadow: true,
|
|
6043
6043
|
})
|
|
6044
6044
|
], IntPhoneFieldElement);
|
|
@@ -6140,7 +6140,7 @@ var NumericFieldElement = /** @class */ (function (_super) {
|
|
|
6140
6140
|
(0, custom_element_decorator_1.default)({
|
|
6141
6141
|
selector: 'numeric-element',
|
|
6142
6142
|
template: "\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>",
|
|
6143
|
-
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: none;\n background-color: #f1f4ff;\n margin:
|
|
6143
|
+
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: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }\n ",
|
|
6144
6144
|
useShadow: true,
|
|
6145
6145
|
})
|
|
6146
6146
|
], NumericFieldElement);
|
|
@@ -6247,7 +6247,7 @@ var RadioButtonGroupElement = /** @class */ (function (_super) {
|
|
|
6247
6247
|
(0, custom_element_decorator_1.default)({
|
|
6248
6248
|
selector: 'radio-group-element',
|
|
6249
6249
|
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<fieldset></fieldset>\n\t\t\t</div>",
|
|
6250
|
-
style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.radio-button {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto
|
|
6250
|
+
style: "\n\t\t\t:host{\n\t\t\t\twidth:100%;\n\t\t\t}\n\t\t\t.radio-button {\n\t\t\t\twidth: auto;\n\t\t\t\tmargin: auto 0.188rem;\n\t\t\t\tcolor: rgba(72, 72, 72, 0.75);\n\t\t\t\tfont-size: 0.813rem;\n\t\t\t\tmargin-top: 0.25rem;\n\t\t\t}\n\t\t\t.radio-button:first-of-type {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t\tinput{\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\twidth: auto !important;\n\t\t\t\tborder: none;\n\t\t\t\tbackground-color: #f1f4ff;\n\t\t\t\tmargin: 0.125rem;\n\t\t\t\tresize: none;\n\t\t\t}\n\t\t\t.sr-only:not(:focus):not(:active) {\n\t\t\t\tclip: rect(0 0 0 0); \n\t\t\t\tclip-path: inset(50%);\n\t\t\t\theight: 0.063rem;\n\t\t\t\toverflow: hidden;\n\t\t\t\tposition: absolute;\n\t\t\t\twhite-space: nowrap; \n\t\t\t\twidth: 0.063rem;\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",
|
|
6251
6251
|
useShadow: true,
|
|
6252
6252
|
})
|
|
6253
6253
|
], RadioButtonGroupElement);
|
|
@@ -6337,7 +6337,7 @@ var SECompanyRegistrationElement = /** @class */ (function (_super) {
|
|
|
6337
6337
|
(0, custom_element_decorator_1.default)({
|
|
6338
6338
|
selector: 'se-company-registration-element',
|
|
6339
6339
|
template: "\n <div class=\"wrapper\">\n <input type=\"text\" id='se-company-registration-field' placeholder='SSSSSSSSSS'/>\n </div>",
|
|
6340
|
-
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: none;\n background-color: #f1f4ff;\n margin:
|
|
6340
|
+
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: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }",
|
|
6341
6341
|
useShadow: true,
|
|
6342
6342
|
})
|
|
6343
6343
|
], SECompanyRegistrationElement);
|
|
@@ -6427,7 +6427,7 @@ var SEPersonalNumberElement = /** @class */ (function (_super) {
|
|
|
6427
6427
|
(0, custom_element_decorator_1.default)({
|
|
6428
6428
|
selector: 'se-personal-number-element',
|
|
6429
6429
|
template: "\n <div class=\"wrapper\">\n <input type=\"text\" id='se-personal-number-field' placeholder='(YY)YYMMDD-SSSS'/>\n </div>",
|
|
6430
|
-
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: none;\n background-color: #f1f4ff;\n margin:
|
|
6430
|
+
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: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }",
|
|
6431
6431
|
useShadow: true,
|
|
6432
6432
|
})
|
|
6433
6433
|
], SEPersonalNumberElement);
|
|
@@ -6517,7 +6517,7 @@ var TextAreaElement = /** @class */ (function (_super) {
|
|
|
6517
6517
|
(0, custom_element_decorator_1.default)({
|
|
6518
6518
|
selector: 'text-area-element',
|
|
6519
6519
|
template: "\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>",
|
|
6520
|
-
style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n }\n textarea{\n box-sizing: border-box;\n width: 100% !important;\n border: none;\n background-color: #f1f4ff;\n margin:
|
|
6520
|
+
style: "\n :host{\n width:100%;\n }\n .wrapper{\n display:flex;\n }\n textarea{\n box-sizing: border-box;\n width: 100% !important;\n border: none;\n background-color: #f1f4ff;\n margin: 0.125rem;\n resize: none;\n }\n ",
|
|
6521
6521
|
useShadow: true,
|
|
6522
6522
|
})
|
|
6523
6523
|
], TextAreaElement);
|
|
@@ -6607,7 +6607,7 @@ var TextFieldElement = /** @class */ (function (_super) {
|
|
|
6607
6607
|
(0, custom_element_decorator_1.default)({
|
|
6608
6608
|
selector: 'text-element',
|
|
6609
6609
|
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t\t<input type=\"text\" id='text-field' />\n\t\t\t</div>",
|
|
6610
|
-
style: "\n\t:host{\n\t\t\twidth:100%;\n\t}\n\t.wrapper{\n\t\t\tdisplay:flex;\n\t}\n\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin:
|
|
6610
|
+
style: "\n\t:host{\n\t\t\twidth:100%;\n\t}\n\t.wrapper{\n\t\t\tdisplay:flex;\n\t}\n\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t}\n\t\t",
|
|
6611
6611
|
useShadow: true,
|
|
6612
6612
|
})
|
|
6613
6613
|
], TextFieldElement);
|
|
@@ -6827,7 +6827,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
6827
6827
|
(0, custom_element_decorator_1.default)({
|
|
6828
6828
|
selector: 'type-ahead-element',
|
|
6829
6829
|
template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"text-input\">\n\t\t\t<div id=\"description\"></div>\n\t\t</div>",
|
|
6830
|
-
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: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin:
|
|
6830
|
+
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: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\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\t/*when navigating through the items using the arrow keys:*/\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",
|
|
6831
6831
|
useShadow: true,
|
|
6832
6832
|
})
|
|
6833
6833
|
], TypeAheadElement);
|