@luftborn/custom-elements 2.13.5 → 2.13.6
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 +12 -9
- package/demo/index.min.js +11 -8
- package/demo/index.min.js.map +1 -1
- package/dist/elements/CheckBoxElement/CheckBoxElement.js +11 -8
- package/dist/elements/CheckBoxElement/CheckBoxElement.js.map +1 -1
- package/package.json +1 -1
- package/src/elements/CheckBoxElement/CheckBoxElement.ts +22 -20
|
@@ -70,13 +70,16 @@ var CheckBoxElement = /** @class */ (function (_super) {
|
|
|
70
70
|
var _this = this;
|
|
71
71
|
var wrapper = _super.prototype.getChildElement.call(this, '.wrapper');
|
|
72
72
|
var fieldset = wrapper.querySelector('fieldset');
|
|
73
|
-
if (
|
|
74
|
-
|
|
75
|
-
|
|
73
|
+
if (!fieldset) {
|
|
74
|
+
fieldset = document.createElement('fieldset');
|
|
75
|
+
wrapper.appendChild(fieldset);
|
|
76
|
+
if (this.label) {
|
|
77
|
+
fieldset.insertAdjacentHTML('beforeend', "<legend class=\"sr-only\">" + this.label + "</legend>");
|
|
78
|
+
}
|
|
79
|
+
this.options.forEach(function (element, index) {
|
|
80
|
+
fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
|
|
81
|
+
});
|
|
76
82
|
}
|
|
77
|
-
this.options.forEach(function (element, index) {
|
|
78
|
-
fieldset.insertAdjacentHTML('beforeend', StringUtil_1.StringUtil.StringFormat(_this.checkboxTemplate, _this.name, element, _this.name + "-" + index));
|
|
79
|
-
});
|
|
80
83
|
};
|
|
81
84
|
// events
|
|
82
85
|
CheckBoxElement.prototype.change = function ($event) {
|
|
@@ -97,8 +100,8 @@ var CheckBoxElement = /** @class */ (function (_super) {
|
|
|
97
100
|
CheckBoxElement = __decorate([
|
|
98
101
|
(0, custom_element_decorator_1.default)({
|
|
99
102
|
selector: 'checkbox-element',
|
|
100
|
-
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t
|
|
101
|
-
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.
|
|
103
|
+
template: "\n\t\t\t<div class=\"wrapper\">\n\t\t\t</div>",
|
|
104
|
+
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",
|
|
102
105
|
useShadow: true,
|
|
103
106
|
})
|
|
104
107
|
], CheckBoxElement);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckBoxElement.js","sourceRoot":"","sources":["../../../src/elements/CheckBoxElement/CheckBoxElement.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAqE;AACrE,yEAAwE;AACxE,6DAAsE;AACtE,mEAAkE;
|
|
1
|
+
{"version":3,"file":"CheckBoxElement.js","sourceRoot":"","sources":["../../../src/elements/CheckBoxElement/CheckBoxElement.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -7,7 +7,6 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
|
|
|
7
7
|
selector: 'checkbox-element',
|
|
8
8
|
template: `
|
|
9
9
|
<div class="wrapper">
|
|
10
|
-
<fieldset></fieldset>
|
|
11
10
|
</div>`,
|
|
12
11
|
style: `
|
|
13
12
|
:host{
|
|
@@ -28,7 +27,7 @@ import { StringUtil } from '../../framework/Utilities/StringUtil';
|
|
|
28
27
|
width: auto !important;
|
|
29
28
|
border: none;
|
|
30
29
|
background-color: #f1f4ff;
|
|
31
|
-
margin: 0.
|
|
30
|
+
margin: 0.125rem;
|
|
32
31
|
resize: none;
|
|
33
32
|
}
|
|
34
33
|
.sr-only:not(:focus):not(:active) {
|
|
@@ -89,25 +88,28 @@ export class CheckBoxElement extends CustomInputElement {
|
|
|
89
88
|
|
|
90
89
|
private addCheckBoxes() {
|
|
91
90
|
const wrapper = super.getChildElement('.wrapper');
|
|
92
|
-
|
|
93
|
-
if (
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
91
|
+
let fieldset = wrapper.querySelector('fieldset');
|
|
92
|
+
if (!fieldset) {
|
|
93
|
+
fieldset = document.createElement('fieldset');
|
|
94
|
+
wrapper.appendChild(fieldset);
|
|
95
|
+
if (this.label) {
|
|
96
|
+
fieldset.insertAdjacentHTML(
|
|
97
|
+
'beforeend',
|
|
98
|
+
`<legend class="sr-only">${this.label}</legend>`,
|
|
99
|
+
);
|
|
100
|
+
}
|
|
101
|
+
this.options.forEach((element, index) => {
|
|
102
|
+
fieldset.insertAdjacentHTML(
|
|
103
|
+
'beforeend',
|
|
104
|
+
StringUtil.StringFormat(
|
|
105
|
+
this.checkboxTemplate,
|
|
106
|
+
this.name,
|
|
107
|
+
element,
|
|
108
|
+
`${this.name}-${index}`,
|
|
109
|
+
),
|
|
110
|
+
);
|
|
111
|
+
});
|
|
99
112
|
}
|
|
100
|
-
this.options.forEach((element, index) => {
|
|
101
|
-
fieldset.insertAdjacentHTML(
|
|
102
|
-
'beforeend',
|
|
103
|
-
StringUtil.StringFormat(
|
|
104
|
-
this.checkboxTemplate,
|
|
105
|
-
this.name,
|
|
106
|
-
element,
|
|
107
|
-
`${this.name}-${index}`,
|
|
108
|
-
),
|
|
109
|
-
);
|
|
110
|
-
});
|
|
111
113
|
}
|
|
112
114
|
// events
|
|
113
115
|
public change($event): void {
|