@luftborn/custom-elements 2.7.0 → 2.8.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/demo/index.js +2822 -123
- package/demo/index.min.js +2821 -122
- package/demo/index.min.js.map +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.d.ts +4 -4
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js +29 -51
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js.map +1 -1
- package/package.json +6 -2
- package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts +43 -67
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { CustomInputElement } from '../../framework/CustomInputElement';
|
|
2
2
|
export declare class CustomFormatDateFieldElement extends CustomInputElement {
|
|
3
|
-
date:
|
|
4
|
-
|
|
3
|
+
date: HTMLInputElement;
|
|
4
|
+
dateWrapper: HTMLElement;
|
|
5
5
|
datepicker: any;
|
|
6
6
|
private readonly defaultDateFormat;
|
|
7
7
|
private readonly supportedDateFormats;
|
|
@@ -13,7 +13,7 @@ export declare class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
13
13
|
initChildInputs(): void;
|
|
14
14
|
change($event: any): void;
|
|
15
15
|
validate(): void;
|
|
16
|
+
initFlatpickr(): void;
|
|
16
17
|
private formatDate;
|
|
17
|
-
private
|
|
18
|
-
private closeDatePicker;
|
|
18
|
+
private validateDateFormats;
|
|
19
19
|
}
|
|
@@ -25,6 +25,7 @@ exports.CustomFormatDateFieldElement = void 0;
|
|
|
25
25
|
var custom_element_decorator_1 = require("../../framework/custom-element.decorator");
|
|
26
26
|
var CustomInputElement_1 = require("../../framework/CustomInputElement");
|
|
27
27
|
var CustomEvents_1 = require("../../framework/CustomEvents");
|
|
28
|
+
var flatpickr = require('flatpickr');
|
|
28
29
|
var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
29
30
|
__extends(CustomFormatDateFieldElement, _super);
|
|
30
31
|
function CustomFormatDateFieldElement() {
|
|
@@ -47,11 +48,10 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
47
48
|
}
|
|
48
49
|
Object.defineProperty(CustomFormatDateFieldElement.prototype, "value", {
|
|
49
50
|
get: function () {
|
|
50
|
-
return this.
|
|
51
|
+
return this.date.value;
|
|
51
52
|
},
|
|
52
53
|
set: function (value) {
|
|
53
54
|
this.date.value = value;
|
|
54
|
-
this.display.value = value;
|
|
55
55
|
},
|
|
56
56
|
enumerable: false,
|
|
57
57
|
configurable: true
|
|
@@ -67,26 +67,11 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
67
67
|
_super.prototype.connectedCallback.call(this);
|
|
68
68
|
};
|
|
69
69
|
CustomFormatDateFieldElement.prototype.initChildInputs = function () {
|
|
70
|
-
var _this = this;
|
|
71
70
|
this.date = _super.prototype.getChildInput.call(this, '#date-field');
|
|
72
|
-
this.
|
|
73
|
-
this.
|
|
74
|
-
this.date.
|
|
75
|
-
|
|
76
|
-
_this.change(null);
|
|
77
|
-
_this.closeDatePicker();
|
|
78
|
-
});
|
|
79
|
-
this.datepicker.addEventListener('click', function () {
|
|
80
|
-
_this.showDatePicker();
|
|
81
|
-
});
|
|
82
|
-
this.display.addEventListener('click', function () {
|
|
83
|
-
_this.showDatePicker();
|
|
84
|
-
});
|
|
85
|
-
document.addEventListener('click', function (event) {
|
|
86
|
-
if (!_this.contains(event.target)) {
|
|
87
|
-
_this.closeDatePicker();
|
|
88
|
-
}
|
|
89
|
-
});
|
|
71
|
+
this.dateWrapper = _super.prototype.getChildInput.call(this, '.flatpickr');
|
|
72
|
+
this.validateDateFormats();
|
|
73
|
+
this.date.placeholder = this.dateFormat;
|
|
74
|
+
this.date.addEventListener('change', this.change.bind(this));
|
|
90
75
|
if (this.required) {
|
|
91
76
|
this.date.setAttribute('required', '');
|
|
92
77
|
}
|
|
@@ -96,28 +81,33 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
96
81
|
if (this.min) {
|
|
97
82
|
this.date.setAttribute('min', this.min);
|
|
98
83
|
}
|
|
99
|
-
|
|
100
|
-
this.display.placeholder = this.dateFormat;
|
|
101
|
-
}
|
|
102
|
-
else {
|
|
103
|
-
this.display.placeholder = this.defaultDateFormat;
|
|
104
|
-
this.dateFormat = this.defaultDateFormat;
|
|
105
|
-
}
|
|
84
|
+
this.initFlatpickr();
|
|
106
85
|
};
|
|
86
|
+
// events
|
|
107
87
|
CustomFormatDateFieldElement.prototype.change = function ($event) {
|
|
108
|
-
var _a;
|
|
109
88
|
this.touched = true;
|
|
110
|
-
var formattedDate = (_a = this.formatDate()) !== null && _a !== void 0 ? _a : this.date.valueAsDate.toLocaleDateString();
|
|
111
|
-
this.display.value = formattedDate;
|
|
112
|
-
this.date.setAttribute('value', formattedDate);
|
|
113
89
|
this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
|
|
114
90
|
};
|
|
115
91
|
CustomFormatDateFieldElement.prototype.validate = function () {
|
|
116
92
|
this.valid;
|
|
117
93
|
this.onValidate.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'validate'));
|
|
118
94
|
};
|
|
119
|
-
CustomFormatDateFieldElement.prototype.
|
|
120
|
-
var
|
|
95
|
+
CustomFormatDateFieldElement.prototype.initFlatpickr = function () {
|
|
96
|
+
var _this = this;
|
|
97
|
+
flatpickr(this.dateWrapper, {
|
|
98
|
+
wrap: true,
|
|
99
|
+
altInput: true,
|
|
100
|
+
appendTo: this.shadowRoot.querySelector('.wrapper'),
|
|
101
|
+
disableMobile: true,
|
|
102
|
+
parseDate: function (datestr) {
|
|
103
|
+
return new Date(datestr);
|
|
104
|
+
},
|
|
105
|
+
formatDate: function (date, format) {
|
|
106
|
+
return _this.formatDate(date);
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
};
|
|
110
|
+
CustomFormatDateFieldElement.prototype.formatDate = function (date) {
|
|
121
111
|
var year = date.getFullYear();
|
|
122
112
|
var month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
123
113
|
var day = date.getDate().toString().padStart(2, '0');
|
|
@@ -137,28 +127,16 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
137
127
|
};
|
|
138
128
|
return dateFormats[this.dateFormat];
|
|
139
129
|
};
|
|
140
|
-
CustomFormatDateFieldElement.prototype.
|
|
141
|
-
if ((
|
|
142
|
-
this.
|
|
143
|
-
}
|
|
144
|
-
else {
|
|
145
|
-
if (this.date.showPicker) {
|
|
146
|
-
this.date.showPicker();
|
|
147
|
-
}
|
|
130
|
+
CustomFormatDateFieldElement.prototype.validateDateFormats = function () {
|
|
131
|
+
if (!this.supportedDateFormats.includes(this.dateFormat)) {
|
|
132
|
+
this.dateFormat = this.defaultDateFormat;
|
|
148
133
|
}
|
|
149
134
|
};
|
|
150
|
-
CustomFormatDateFieldElement.prototype.closeDatePicker = function () {
|
|
151
|
-
var _this = this;
|
|
152
|
-
this.date.hidden = true;
|
|
153
|
-
setTimeout(function () {
|
|
154
|
-
_this.date.hidden = false;
|
|
155
|
-
}, 0);
|
|
156
|
-
};
|
|
157
135
|
CustomFormatDateFieldElement = __decorate([
|
|
158
136
|
(0, custom_element_decorator_1.default)({
|
|
159
137
|
selector: 'custom-format-date-element',
|
|
160
|
-
template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"
|
|
161
|
-
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\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: 2px;\n\t\t\tresize: none;\n\t\t}\n\t\t#date-field
|
|
138
|
+
template: "\n\t\t<div class=\"wrapper flatpickr\">\n\t\t\t<input type=\"text\" id=\"date-field\" data-input />\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>",
|
|
139
|
+
style: "\n\t\t@import '../../../node_modules/flatpickr/dist/flatpickr.min.css';\n\t\t:host{\n\t\t\twidth:100%;\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: 2px;\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: 10px;\n\t\t}\n\t\t#picker-trigger {\n\t\t\tcursor: pointer;\n\t\t\twidth: 15px;\n\t\t\theight: 15px;\n\t\t\tposition:absolute;\n\t\t\tright: 2px;\n\t\t\ttop: 15%;\n\t\t}\n\t\t.flatpickr-calendar {\n\t\t\tposition: fixed !important; /* Use fixed positioning */\n\t\t\ttop: 50% !important; /* Center vertically */\n\t\t\tleft: 50% !important; /* Center horizontally */\n\t\t\tz-index: 1000 !important; /* Ensure it's above other content */\n\t\t}\n\t",
|
|
162
140
|
useShadow: true,
|
|
163
141
|
})
|
|
164
142
|
], CustomFormatDateFieldElement);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CustomFormatDateFieldElement.js","sourceRoot":"","sources":["../../../src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA,qFAAqE;AACrE,yEAAwE;AACxE,6DAAsE;
|
|
1
|
+
{"version":3,"file":"CustomFormatDateFieldElement.js","sourceRoot":"","sources":["../../../src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@luftborn/custom-elements",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.8.1",
|
|
4
4
|
"description": "custom HTML elements for the form builder application (node version: 18)",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"@types/googlemaps": "^3.39.6",
|
|
18
18
|
"@webcomponents/custom-elements": "1.4.1",
|
|
19
19
|
"@webcomponents/webcomponentsjs": "2.6.0",
|
|
20
|
+
"flatpickr": "^4.6.13",
|
|
20
21
|
"intl-tel-input": "^16.0.8",
|
|
21
22
|
"restore": "^0.3.0"
|
|
22
23
|
},
|
|
@@ -34,5 +35,8 @@
|
|
|
34
35
|
"typescript": "4.4.3",
|
|
35
36
|
"vinyl-buffer": "~1.0.1",
|
|
36
37
|
"vinyl-source-stream": "~2.0.0"
|
|
37
|
-
}
|
|
38
|
+
},
|
|
39
|
+
"bundleDependencies": [
|
|
40
|
+
"@webcomponents/webcomponentsjs"
|
|
41
|
+
]
|
|
38
42
|
}
|
|
@@ -1,21 +1,17 @@
|
|
|
1
1
|
import CustomElement from '../../framework/custom-element.decorator';
|
|
2
2
|
import { CustomInputElement } from '../../framework/CustomInputElement';
|
|
3
3
|
import { CustomElementEventArgs } from '../../framework/CustomEvents';
|
|
4
|
-
|
|
5
|
-
declare const window: {
|
|
6
|
-
ApplePaySetupFeature: any;
|
|
7
|
-
safari: any;
|
|
8
|
-
};
|
|
4
|
+
const flatpickr = require('flatpickr');
|
|
9
5
|
|
|
10
6
|
@CustomElement({
|
|
11
7
|
selector: 'custom-format-date-element',
|
|
12
8
|
template: `
|
|
13
|
-
<div class="wrapper">
|
|
14
|
-
<input type="text" id="
|
|
15
|
-
<svg id="picker-trigger" 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>
|
|
16
|
-
<input type="date" id="date-field" />
|
|
9
|
+
<div class="wrapper flatpickr">
|
|
10
|
+
<input type="text" id="date-field" data-input />
|
|
11
|
+
<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>
|
|
17
12
|
</div>`,
|
|
18
13
|
style: `
|
|
14
|
+
@import '../../../node_modules/flatpickr/dist/flatpickr.min.css';
|
|
19
15
|
:host{
|
|
20
16
|
width:100%;
|
|
21
17
|
}
|
|
@@ -31,13 +27,7 @@ declare const window: {
|
|
|
31
27
|
margin: 2px;
|
|
32
28
|
resize: none;
|
|
33
29
|
}
|
|
34
|
-
#date-field {
|
|
35
|
-
opacity: 0;
|
|
36
|
-
position: absolute;
|
|
37
|
-
z-index: -1;
|
|
38
|
-
pointer-events: none;
|
|
39
|
-
}
|
|
40
|
-
#display-field::after {
|
|
30
|
+
#date-field::after {
|
|
41
31
|
content: url('path/to/datepicker-icon.png'); /* Path to your datepicker icon */
|
|
42
32
|
cursor: pointer;
|
|
43
33
|
right: 10px;
|
|
@@ -50,13 +40,20 @@ declare const window: {
|
|
|
50
40
|
right: 2px;
|
|
51
41
|
top: 15%;
|
|
52
42
|
}
|
|
43
|
+
.flatpickr-calendar {
|
|
44
|
+
position: fixed !important; /* Use fixed positioning */
|
|
45
|
+
top: 50% !important; /* Center vertically */
|
|
46
|
+
left: 50% !important; /* Center horizontally */
|
|
47
|
+
z-index: 1000 !important; /* Ensure it's above other content */
|
|
48
|
+
}
|
|
53
49
|
`,
|
|
54
50
|
useShadow: true,
|
|
55
51
|
})
|
|
56
52
|
export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
57
|
-
date:
|
|
58
|
-
|
|
53
|
+
date: HTMLInputElement;
|
|
54
|
+
dateWrapper: HTMLElement;
|
|
59
55
|
datepicker: any;
|
|
56
|
+
|
|
60
57
|
private readonly defaultDateFormat = 'yyyy-mm-dd';
|
|
61
58
|
private readonly supportedDateFormats = [
|
|
62
59
|
'ddmmyyyy',
|
|
@@ -77,12 +74,11 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
77
74
|
}
|
|
78
75
|
|
|
79
76
|
get value(): string {
|
|
80
|
-
return this.
|
|
77
|
+
return this.date.value;
|
|
81
78
|
}
|
|
82
79
|
|
|
83
80
|
set value(value: string) {
|
|
84
81
|
this.date.value = value;
|
|
85
|
-
this.display.value = value;
|
|
86
82
|
}
|
|
87
83
|
|
|
88
84
|
get valid(): boolean {
|
|
@@ -95,29 +91,12 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
95
91
|
|
|
96
92
|
initChildInputs() {
|
|
97
93
|
this.date = super.getChildInput('#date-field');
|
|
98
|
-
this.
|
|
99
|
-
this.
|
|
100
|
-
|
|
101
|
-
this.date.addEventListener('change', () => {
|
|
102
|
-
this.display.value = this.formatDate();
|
|
103
|
-
this.change(null);
|
|
104
|
-
this.closeDatePicker();
|
|
105
|
-
});
|
|
94
|
+
this.dateWrapper = super.getChildInput('.flatpickr');
|
|
95
|
+
this.validateDateFormats();
|
|
106
96
|
|
|
107
|
-
this.
|
|
108
|
-
this.showDatePicker();
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
this.display.addEventListener('click', () => {
|
|
112
|
-
this.showDatePicker();
|
|
113
|
-
});
|
|
114
|
-
|
|
115
|
-
document.addEventListener('click', (event) => {
|
|
116
|
-
if (!this.contains(event.target as Node)) {
|
|
117
|
-
this.closeDatePicker();
|
|
118
|
-
}
|
|
119
|
-
});
|
|
97
|
+
this.date.placeholder = this.dateFormat;
|
|
120
98
|
|
|
99
|
+
this.date.addEventListener('change', this.change.bind(this));
|
|
121
100
|
if (this.required) {
|
|
122
101
|
this.date.setAttribute('required', '');
|
|
123
102
|
}
|
|
@@ -127,19 +106,13 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
127
106
|
if (this.min) {
|
|
128
107
|
this.date.setAttribute('min', this.min);
|
|
129
108
|
}
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
} else {
|
|
133
|
-
this.display.placeholder = this.defaultDateFormat;
|
|
134
|
-
this.dateFormat = this.defaultDateFormat;
|
|
135
|
-
}
|
|
109
|
+
|
|
110
|
+
this.initFlatpickr();
|
|
136
111
|
}
|
|
137
112
|
|
|
113
|
+
// events
|
|
138
114
|
public change($event): void {
|
|
139
115
|
this.touched = true;
|
|
140
|
-
const formattedDate = this.formatDate() ?? this.date.valueAsDate.toLocaleDateString();
|
|
141
|
-
this.display.value = formattedDate;
|
|
142
|
-
this.date.setAttribute('value', formattedDate);
|
|
143
116
|
this.onChange.emit(new CustomElementEventArgs(this.value, 'change'));
|
|
144
117
|
}
|
|
145
118
|
|
|
@@ -150,14 +123,28 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
150
123
|
);
|
|
151
124
|
}
|
|
152
125
|
|
|
153
|
-
|
|
154
|
-
|
|
126
|
+
initFlatpickr() {
|
|
127
|
+
flatpickr(this.dateWrapper, {
|
|
128
|
+
wrap: true,
|
|
129
|
+
altInput: true,
|
|
130
|
+
appendTo: this.shadowRoot.querySelector('.wrapper'),
|
|
131
|
+
disableMobile: true,
|
|
132
|
+
parseDate: (datestr) => {
|
|
133
|
+
return new Date(datestr);
|
|
134
|
+
},
|
|
135
|
+
formatDate: (date, format) => {
|
|
136
|
+
return this.formatDate(date);
|
|
137
|
+
}
|
|
138
|
+
});
|
|
139
|
+
}
|
|
155
140
|
|
|
141
|
+
private formatDate(date: Date): string {
|
|
142
|
+
|
|
156
143
|
const year = date.getFullYear();
|
|
157
144
|
const month = (date.getMonth() + 1).toString().padStart(2, '0');
|
|
158
145
|
const day = date.getDate().toString().padStart(2, '0');
|
|
159
146
|
const monthName = date.toLocaleString('default', { month: 'long' });
|
|
160
|
-
|
|
147
|
+
|
|
161
148
|
const dateFormats = {
|
|
162
149
|
'ddmmyyyy': `${day}${month}${year}`,
|
|
163
150
|
'mmddyyyy': `${month}${day}${year}`,
|
|
@@ -175,20 +162,9 @@ export class CustomFormatDateFieldElement extends CustomInputElement {
|
|
|
175
162
|
return dateFormats[this.dateFormat];
|
|
176
163
|
}
|
|
177
164
|
|
|
178
|
-
private
|
|
179
|
-
if ((
|
|
180
|
-
this.
|
|
181
|
-
} else {
|
|
182
|
-
if (this.date.showPicker){
|
|
183
|
-
this.date.showPicker();
|
|
184
|
-
}
|
|
165
|
+
private validateDateFormats() {
|
|
166
|
+
if (!this.supportedDateFormats.includes(this.dateFormat)) {
|
|
167
|
+
this.dateFormat = this.defaultDateFormat;
|
|
185
168
|
}
|
|
186
169
|
}
|
|
187
|
-
|
|
188
|
-
private closeDatePicker(): void {
|
|
189
|
-
this.date.hidden = true;
|
|
190
|
-
setTimeout(() => {
|
|
191
|
-
this.date.hidden = false;
|
|
192
|
-
}, 0);
|
|
193
|
-
}
|
|
194
170
|
}
|