@progress/kendo-pdfviewer-common 0.4.0-develop.1 → 0.4.1-develop.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.
@@ -43,25 +43,26 @@ class AnnotationElementFactory {
43
43
  return new LinkAnnotationElement(parameters);
44
44
  // case AnnotationType.TEXT:
45
45
  // return new TextAnnotationElement(parameters);
46
- // case AnnotationType.WIDGET:
47
- // const fieldType = parameters.data.fieldType;
48
- // switch (fieldType) {
49
- // case "Tx":
50
- // return new TextWidgetAnnotationElement(parameters);
51
- // case "Btn":
52
- // if (parameters.data.radioButton) {
53
- // return new RadioButtonWidgetAnnotationElement(parameters);
54
- // } else if (parameters.data.checkBox) {
55
- // return new CheckboxWidgetAnnotationElement(parameters);
56
- // }
57
- // return new PushButtonWidgetAnnotationElement(parameters);
58
- // case "Ch":
59
- // return new ChoiceWidgetAnnotationElement(parameters);
60
- // case "Sig":
61
- // return new SignatureWidgetAnnotationElement(parameters);
62
- // default: break;
63
- // }
64
- // return new WidgetAnnotationElement(parameters);
46
+ case AnnotationType.WIDGET:
47
+ const fieldType = parameters.data.fieldType;
48
+ switch (fieldType) {
49
+ case "Tx":
50
+ return new TextWidgetAnnotationElement(parameters);
51
+ // case "Btn":
52
+ // if (parameters.data.radioButton) {
53
+ // return new RadioButtonWidgetAnnotationElement(parameters);
54
+ // } else if (parameters.data.checkBox) {
55
+ // return new CheckboxWidgetAnnotationElement(parameters);
56
+ // }
57
+ // return new PushButtonWidgetAnnotationElement(parameters);
58
+ // case "Ch":
59
+ // return new ChoiceWidgetAnnotationElement(parameters);
60
+ // case "Sig":
61
+ // return new SignatureWidgetAnnotationElement(parameters);
62
+ default:
63
+ break;
64
+ }
65
+ // return new WidgetAnnotationElement(parameters);
65
66
  // case AnnotationType.POPUP:
66
67
  // return new PopupAnnotationElement(parameters);
67
68
  case AnnotationType.FREETEXT:
@@ -1047,339 +1048,335 @@ class WidgetAnnotationElement extends AnnotationElement {
1047
1048
  element.setAttribute("aria-required", isRequired);
1048
1049
  }
1049
1050
  }
1050
- // class TextWidgetAnnotationElement extends WidgetAnnotationElement {
1051
- // constructor(parameters) {
1052
- // const isRenderable =
1053
- // parameters.renderForms ||
1054
- // parameters.data.hasOwnCanvas ||
1055
- // (!parameters.data.hasAppearance && !!parameters.data.fieldValue);
1056
- // super(parameters, { isRenderable });
1057
- // }
1058
- // setPropertyOnSiblings(base, key, value, keyInStorage) {
1059
- // const storage = this.annotationStorage;
1060
- // for (const element of this._getElementsByName(
1061
- // base.name,
1062
- // /* skipId = */ base.id
1063
- // )) {
1064
- // if (element.domElement) {
1065
- // element.domElement[key] = value;
1066
- // }
1067
- // storage.setValue(element.id, { [keyInStorage]: value });
1068
- // }
1069
- // }
1070
- // render() {
1071
- // const storage = this.annotationStorage;
1072
- // const id = this.data.id;
1073
- // this.container.classList.add("textWidgetAnnotation");
1074
- // let element = null;
1075
- // if (this.renderForms) {
1076
- // // NOTE: We cannot set the values using `element.value` below, since it
1077
- // // prevents the AnnotationLayer rasterizer in `test/driver.js`
1078
- // // from parsing the elements correctly for the reference tests.
1079
- // const storedData = storage.getValue(id, {
1080
- // value: this.data.fieldValue,
1081
- // });
1082
- // let textContent = storedData.value || "";
1083
- // const maxLen = storage.getValue(id, {
1084
- // charLimit: this.data.maxLen,
1085
- // }).charLimit;
1086
- // if (maxLen && textContent.length > maxLen) {
1087
- // textContent = textContent.slice(0, maxLen);
1088
- // }
1089
- // let fieldFormattedValues =
1090
- // storedData.formattedValue || this.data.textContent?.join("\n") || null;
1091
- // if (fieldFormattedValues && this.data.comb) {
1092
- // fieldFormattedValues = fieldFormattedValues.replaceAll(/\s+/g, "");
1093
- // }
1094
- // const elementData = {
1095
- // userValue: textContent,
1096
- // formattedValue: fieldFormattedValues,
1097
- // lastCommittedValue: null,
1098
- // commitKey: 1,
1099
- // focused: false,
1100
- // };
1101
- // if (this.data.multiLine) {
1102
- // element = document.createElement("textarea");
1103
- // element.textContent = fieldFormattedValues ?? textContent;
1104
- // if (this.data.doNotScroll) {
1105
- // element.style.overflowY = "hidden";
1106
- // }
1107
- // } else {
1108
- // element = document.createElement("input");
1109
- // element.type = "text";
1110
- // element.setAttribute("value", fieldFormattedValues ?? textContent);
1111
- // if (this.data.doNotScroll) {
1112
- // element.style.overflowX = "hidden";
1113
- // }
1114
- // }
1115
- // if (this.data.hasOwnCanvas) {
1116
- // element.hidden = true;
1117
- // }
1118
- // GetElementsByNameSet.add(element);
1119
- // element.setAttribute("data-element-id", id);
1120
- // element.disabled = this.data.readOnly;
1121
- // element.name = this.data.fieldName;
1122
- // element.tabIndex = DEFAULT_TAB_INDEX;
1123
- // this._setRequired(element, this.data.required);
1124
- // if (maxLen) {
1125
- // element.maxLength = maxLen;
1126
- // }
1127
- // element.addEventListener("input", event => {
1128
- // storage.setValue(id, { value: event.target.value });
1129
- // this.setPropertyOnSiblings(
1130
- // element,
1131
- // "value",
1132
- // event.target.value,
1133
- // "value"
1134
- // );
1135
- // elementData.formattedValue = null;
1136
- // });
1137
- // element.addEventListener("resetform", () => {
1138
- // const defaultValue = this.data.defaultFieldValue ?? "";
1139
- // element.value = elementData.userValue = defaultValue;
1140
- // elementData.formattedValue = null;
1141
- // });
1142
- // let blurListener = event => {
1143
- // const { formattedValue } = elementData;
1144
- // if (formattedValue !== null && formattedValue !== undefined) {
1145
- // event.target.value = formattedValue;
1146
- // }
1147
- // // Reset the cursor position to the start of the field (issue 12359).
1148
- // event.target.scrollLeft = 0;
1149
- // };
1150
- // if (this.enableScripting && this.hasJSActions) {
1151
- // element.addEventListener("focus", event => {
1152
- // if (elementData.focused) {
1153
- // return;
1154
- // }
1155
- // const { target } = event;
1156
- // if (elementData.userValue) {
1157
- // target.value = elementData.userValue;
1158
- // }
1159
- // elementData.lastCommittedValue = target.value;
1160
- // elementData.commitKey = 1;
1161
- // if (!this.data.actions?.Focus) {
1162
- // elementData.focused = true;
1163
- // }
1164
- // });
1165
- // element.addEventListener("updatefromsandbox", jsEvent => {
1166
- // this.showElementAndHideCanvas(jsEvent.target);
1167
- // const actions = {
1168
- // value(event) {
1169
- // elementData.userValue = event.detail.value ?? "";
1170
- // storage.setValue(id, { value: elementData.userValue.toString() });
1171
- // event.target.value = elementData.userValue;
1172
- // },
1173
- // formattedValue(event) {
1174
- // const { formattedValue } = event.detail;
1175
- // elementData.formattedValue = formattedValue;
1176
- // if (
1177
- // formattedValue !== null &&
1178
- // formattedValue !== undefined &&
1179
- // event.target !== document.activeElement
1180
- // ) {
1181
- // // Input hasn't the focus so display formatted string
1182
- // event.target.value = formattedValue;
1183
- // }
1184
- // storage.setValue(id, {
1185
- // formattedValue,
1186
- // });
1187
- // },
1188
- // selRange(event) {
1189
- // event.target.setSelectionRange(...event.detail.selRange);
1190
- // },
1191
- // charLimit: event => {
1192
- // const { charLimit } = event.detail;
1193
- // const { target } = event;
1194
- // if (charLimit === 0) {
1195
- // target.removeAttribute("maxLength");
1196
- // return;
1197
- // }
1198
- // target.setAttribute("maxLength", charLimit);
1199
- // let value = elementData.userValue;
1200
- // if (!value || value.length <= charLimit) {
1201
- // return;
1202
- // }
1203
- // value = value.slice(0, charLimit);
1204
- // target.value = elementData.userValue = value;
1205
- // storage.setValue(id, { value });
1206
- // this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
1207
- // source: this,
1208
- // detail: {
1209
- // id,
1210
- // name: "Keystroke",
1211
- // value,
1212
- // willCommit: true,
1213
- // commitKey: 1,
1214
- // selStart: target.selectionStart,
1215
- // selEnd: target.selectionEnd,
1216
- // },
1217
- // });
1218
- // },
1219
- // };
1220
- // this._dispatchEventFromSandbox(actions, jsEvent);
1221
- // });
1222
- // // Even if the field hasn't any actions
1223
- // // leaving it can still trigger some actions with Calculate
1224
- // element.addEventListener("keydown", event => {
1225
- // elementData.commitKey = 1;
1226
- // // If the key is one of Escape, Enter then the data are committed.
1227
- // // If we've a Tab then data will be committed on blur.
1228
- // let commitKey = -1;
1229
- // if (event.key === "Escape") {
1230
- // commitKey = 0;
1231
- // } else if (event.key === "Enter" && !this.data.multiLine) {
1232
- // // When we've a multiline field, "Enter" key is a key as the other
1233
- // // hence we don't commit the data (Acrobat behaves the same way)
1234
- // // (see issue #15627).
1235
- // commitKey = 2;
1236
- // } else if (event.key === "Tab") {
1237
- // elementData.commitKey = 3;
1238
- // }
1239
- // if (commitKey === -1) {
1240
- // return;
1241
- // }
1242
- // const { value } = event.target;
1243
- // if (elementData.lastCommittedValue === value) {
1244
- // return;
1245
- // }
1246
- // elementData.lastCommittedValue = value;
1247
- // // Save the entered value
1248
- // elementData.userValue = value;
1249
- // this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
1250
- // source: this,
1251
- // detail: {
1252
- // id,
1253
- // name: "Keystroke",
1254
- // value,
1255
- // willCommit: true,
1256
- // commitKey,
1257
- // selStart: event.target.selectionStart,
1258
- // selEnd: event.target.selectionEnd,
1259
- // },
1260
- // });
1261
- // });
1262
- // const _blurListener = blurListener;
1263
- // blurListener = null;
1264
- // element.addEventListener("blur", event => {
1265
- // if (!elementData.focused || !event.relatedTarget) {
1266
- // return;
1267
- // }
1268
- // if (!this.data.actions?.Blur) {
1269
- // elementData.focused = false;
1270
- // }
1271
- // const { value } = event.target;
1272
- // elementData.userValue = value;
1273
- // if (elementData.lastCommittedValue !== value) {
1274
- // this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
1275
- // source: this,
1276
- // detail: {
1277
- // id,
1278
- // name: "Keystroke",
1279
- // value,
1280
- // willCommit: true,
1281
- // commitKey: elementData.commitKey,
1282
- // selStart: event.target.selectionStart,
1283
- // selEnd: event.target.selectionEnd,
1284
- // },
1285
- // });
1286
- // }
1287
- // _blurListener(event);
1288
- // });
1289
- // if (this.data.actions?.Keystroke) {
1290
- // element.addEventListener("beforeinput", event => {
1291
- // elementData.lastCommittedValue = null;
1292
- // const { data, target } = event;
1293
- // const { value, selectionStart, selectionEnd } = target;
1294
- // let selStart = selectionStart,
1295
- // selEnd = selectionEnd;
1296
- // switch (event.inputType) {
1297
- // // https://rawgit.com/w3c/input-events/v1/index.html#interface-InputEvent-Attributes
1298
- // case "deleteWordBackward": {
1299
- // const match = value
1300
- // .substring(0, selectionStart)
1301
- // .match(/\w*[^\w]*$/);
1302
- // if (match) {
1303
- // selStart -= match[0].length;
1304
- // }
1305
- // break;
1306
- // }
1307
- // case "deleteWordForward": {
1308
- // const match = value
1309
- // .substring(selectionStart)
1310
- // .match(/^[^\w]*\w*/);
1311
- // if (match) {
1312
- // selEnd += match[0].length;
1313
- // }
1314
- // break;
1315
- // }
1316
- // case "deleteContentBackward":
1317
- // if (selectionStart === selectionEnd) {
1318
- // selStart -= 1;
1319
- // }
1320
- // break;
1321
- // case "deleteContentForward":
1322
- // if (selectionStart === selectionEnd) {
1323
- // selEnd += 1;
1324
- // }
1325
- // break;
1326
- // default: break;
1327
- // }
1328
- // // We handle the event ourselves.
1329
- // event.preventDefault();
1330
- // this.linkService.eventBus?.dispatch("dispatcheventinsandbox", {
1331
- // source: this,
1332
- // detail: {
1333
- // id,
1334
- // name: "Keystroke",
1335
- // value,
1336
- // change: data || "",
1337
- // willCommit: false,
1338
- // selStart,
1339
- // selEnd,
1340
- // },
1341
- // });
1342
- // });
1343
- // }
1344
- // this._setEventListeners(
1345
- // element,
1346
- // elementData,
1347
- // [
1348
- // ["focus", "Focus"],
1349
- // ["blur", "Blur"],
1350
- // ["mousedown", "Mouse Down"],
1351
- // ["mouseenter", "Mouse Enter"],
1352
- // ["mouseleave", "Mouse Exit"],
1353
- // ["mouseup", "Mouse Up"],
1354
- // ],
1355
- // event => event.target.value
1356
- // );
1357
- // }
1358
- // if (blurListener) {
1359
- // element.addEventListener("blur", blurListener);
1360
- // }
1361
- // if (this.data.comb) {
1362
- // const fieldWidth = this.data.rect[2] - this.data.rect[0];
1363
- // const combWidth = fieldWidth / maxLen;
1364
- // element.classList.add("comb");
1365
- // element.style.letterSpacing = `calc(${combWidth}px * var(--scale-factor) - 1ch)`;
1366
- // }
1367
- // } else {
1368
- // element = document.createElement("div");
1369
- // element.textContent = this.data.fieldValue;
1370
- // element.style.verticalAlign = "middle";
1371
- // element.style.display = "table-cell";
1372
- // if (this.data.hasOwnCanvas) {
1373
- // element.hidden = true;
1374
- // }
1375
- // }
1376
- // this._setTextStyle(element);
1377
- // this._setBackgroundColor(element);
1378
- // this._setDefaultPropertiesFromJS(element);
1379
- // this.container.append(element);
1380
- // return this.container;
1381
- // }
1382
- // }
1051
+ class TextWidgetAnnotationElement extends WidgetAnnotationElement {
1052
+ constructor(parameters) {
1053
+ const isRenderable = parameters.renderForms ||
1054
+ parameters.data.hasOwnCanvas ||
1055
+ (!parameters.data.hasAppearance && !!parameters.data.fieldValue);
1056
+ super(parameters, { isRenderable });
1057
+ }
1058
+ setPropertyOnSiblings(base, key, value, keyInStorage) {
1059
+ const storage = this.annotationStorage;
1060
+ for (const element of this._getElementsByName(base.name,
1061
+ /* skipId = */ base.id)) {
1062
+ if (element.domElement) {
1063
+ element.domElement[key] = value;
1064
+ }
1065
+ storage.setValue(element.id, { [keyInStorage]: value });
1066
+ }
1067
+ }
1068
+ render() {
1069
+ var _a, _b;
1070
+ const storage = this.annotationStorage;
1071
+ const id = this.data.id;
1072
+ // this.container.classList.add("textWidgetAnnotation");
1073
+ this.container.classList.add("k-text-widget-annotation");
1074
+ let element = null;
1075
+ if (this.renderForms) {
1076
+ // NOTE: We cannot set the values using `element.value` below, since it
1077
+ // prevents the AnnotationLayer rasterizer in `test/driver.js`
1078
+ // from parsing the elements correctly for the reference tests.
1079
+ const storedData = storage.getValue(id, {
1080
+ value: this.data.fieldValue
1081
+ });
1082
+ let textContent = storedData.value || "";
1083
+ const maxLen = storage.getValue(id, {
1084
+ charLimit: this.data.maxLen
1085
+ }).charLimit;
1086
+ if (maxLen && textContent.length > maxLen) {
1087
+ textContent = textContent.slice(0, maxLen);
1088
+ }
1089
+ let fieldFormattedValues = storedData.formattedValue || ((_a = this.data.textContent) === null || _a === void 0 ? void 0 : _a.join("\n")) || null;
1090
+ if (fieldFormattedValues && this.data.comb) {
1091
+ fieldFormattedValues = fieldFormattedValues.replaceAll(/\s+/g, "");
1092
+ }
1093
+ const elementData = {
1094
+ userValue: textContent,
1095
+ formattedValue: fieldFormattedValues,
1096
+ lastCommittedValue: null,
1097
+ commitKey: 1,
1098
+ focused: false
1099
+ };
1100
+ if (this.data.multiLine) {
1101
+ element = document.createElement("textarea");
1102
+ element.textContent = fieldFormattedValues !== null && fieldFormattedValues !== void 0 ? fieldFormattedValues : textContent;
1103
+ if (this.data.doNotScroll) {
1104
+ element.style.overflowY = "hidden";
1105
+ }
1106
+ }
1107
+ else {
1108
+ element = document.createElement("input");
1109
+ element.type = "text";
1110
+ element.setAttribute("value", fieldFormattedValues !== null && fieldFormattedValues !== void 0 ? fieldFormattedValues : textContent);
1111
+ if (this.data.doNotScroll) {
1112
+ element.style.overflowX = "hidden";
1113
+ }
1114
+ }
1115
+ if (this.data.hasOwnCanvas) {
1116
+ element.hidden = true;
1117
+ }
1118
+ GetElementsByNameSet.add(element);
1119
+ element.setAttribute("data-element-id", id);
1120
+ element.disabled = this.data.readOnly;
1121
+ element.name = this.data.fieldName;
1122
+ element.tabIndex = DEFAULT_TAB_INDEX;
1123
+ this._setRequired(element, this.data.required);
1124
+ if (maxLen) {
1125
+ element.maxLength = maxLen;
1126
+ }
1127
+ element.addEventListener("input", event => {
1128
+ storage.setValue(id, { value: event.target.value });
1129
+ this.setPropertyOnSiblings(element, "value", event.target.value, "value");
1130
+ elementData.formattedValue = null;
1131
+ });
1132
+ element.addEventListener("resetform", () => {
1133
+ var _a;
1134
+ const defaultValue = (_a = this.data.defaultFieldValue) !== null && _a !== void 0 ? _a : "";
1135
+ element.value = elementData.userValue = defaultValue;
1136
+ elementData.formattedValue = null;
1137
+ });
1138
+ let blurListener = event => {
1139
+ const { formattedValue } = elementData;
1140
+ if (formattedValue !== null && formattedValue !== undefined) {
1141
+ event.target.value = formattedValue;
1142
+ }
1143
+ // Reset the cursor position to the start of the field (issue 12359).
1144
+ event.target.scrollLeft = 0;
1145
+ };
1146
+ if (this.enableScripting && this.hasJSActions) {
1147
+ element.addEventListener("focus", event => {
1148
+ var _a;
1149
+ if (elementData.focused) {
1150
+ return;
1151
+ }
1152
+ const { target } = event;
1153
+ if (elementData.userValue) {
1154
+ target.value = elementData.userValue;
1155
+ }
1156
+ elementData.lastCommittedValue = target.value;
1157
+ elementData.commitKey = 1;
1158
+ if (!((_a = this.data.actions) === null || _a === void 0 ? void 0 : _a.Focus)) {
1159
+ elementData.focused = true;
1160
+ }
1161
+ });
1162
+ element.addEventListener("updatefromsandbox", jsEvent => {
1163
+ this.showElementAndHideCanvas(jsEvent.target);
1164
+ const actions = {
1165
+ value(event) {
1166
+ var _a;
1167
+ elementData.userValue = (_a = event.detail.value) !== null && _a !== void 0 ? _a : "";
1168
+ storage.setValue(id, { value: elementData.userValue.toString() });
1169
+ event.target.value = elementData.userValue;
1170
+ },
1171
+ formattedValue(event) {
1172
+ const { formattedValue } = event.detail;
1173
+ elementData.formattedValue = formattedValue;
1174
+ if (formattedValue !== null &&
1175
+ formattedValue !== undefined &&
1176
+ event.target !== document.activeElement) {
1177
+ // Input hasn't the focus so display formatted string
1178
+ event.target.value = formattedValue;
1179
+ }
1180
+ storage.setValue(id, {
1181
+ formattedValue
1182
+ });
1183
+ },
1184
+ selRange(event) {
1185
+ event.target.setSelectionRange(...event.detail.selRange);
1186
+ },
1187
+ charLimit: event => {
1188
+ var _a;
1189
+ const { charLimit } = event.detail;
1190
+ const { target } = event;
1191
+ if (charLimit === 0) {
1192
+ target.removeAttribute("maxLength");
1193
+ return;
1194
+ }
1195
+ target.setAttribute("maxLength", charLimit);
1196
+ let value = elementData.userValue;
1197
+ if (!value || value.length <= charLimit) {
1198
+ return;
1199
+ }
1200
+ value = value.slice(0, charLimit);
1201
+ target.value = elementData.userValue = value;
1202
+ storage.setValue(id, { value });
1203
+ (_a = this.linkService.eventBus) === null || _a === void 0 ? void 0 : _a.dispatch("dispatcheventinsandbox", {
1204
+ source: this,
1205
+ detail: {
1206
+ id,
1207
+ name: "Keystroke",
1208
+ value,
1209
+ willCommit: true,
1210
+ commitKey: 1,
1211
+ selStart: target.selectionStart,
1212
+ selEnd: target.selectionEnd
1213
+ }
1214
+ });
1215
+ }
1216
+ };
1217
+ this._dispatchEventFromSandbox(actions, jsEvent);
1218
+ });
1219
+ // Even if the field hasn't any actions
1220
+ // leaving it can still trigger some actions with Calculate
1221
+ element.addEventListener("keydown", event => {
1222
+ var _a;
1223
+ elementData.commitKey = 1;
1224
+ // If the key is one of Escape, Enter then the data are committed.
1225
+ // If we've a Tab then data will be committed on blur.
1226
+ let commitKey = -1;
1227
+ if (event.key === "Escape") {
1228
+ commitKey = 0;
1229
+ }
1230
+ else if (event.key === "Enter" && !this.data.multiLine) {
1231
+ // When we've a multiline field, "Enter" key is a key as the other
1232
+ // hence we don't commit the data (Acrobat behaves the same way)
1233
+ // (see issue #15627).
1234
+ commitKey = 2;
1235
+ }
1236
+ else if (event.key === "Tab") {
1237
+ elementData.commitKey = 3;
1238
+ }
1239
+ if (commitKey === -1) {
1240
+ return;
1241
+ }
1242
+ const { value } = event.target;
1243
+ if (elementData.lastCommittedValue === value) {
1244
+ return;
1245
+ }
1246
+ elementData.lastCommittedValue = value;
1247
+ // Save the entered value
1248
+ elementData.userValue = value;
1249
+ (_a = this.linkService.eventBus) === null || _a === void 0 ? void 0 : _a.dispatch("dispatcheventinsandbox", {
1250
+ source: this,
1251
+ detail: {
1252
+ id,
1253
+ name: "Keystroke",
1254
+ value,
1255
+ willCommit: true,
1256
+ commitKey,
1257
+ selStart: event.target.selectionStart,
1258
+ selEnd: event.target.selectionEnd
1259
+ }
1260
+ });
1261
+ });
1262
+ const _blurListener = blurListener;
1263
+ blurListener = null;
1264
+ element.addEventListener("blur", event => {
1265
+ var _a, _b;
1266
+ if (!elementData.focused || !event.relatedTarget) {
1267
+ return;
1268
+ }
1269
+ if (!((_a = this.data.actions) === null || _a === void 0 ? void 0 : _a.Blur)) {
1270
+ elementData.focused = false;
1271
+ }
1272
+ const { value } = event.target;
1273
+ elementData.userValue = value;
1274
+ if (elementData.lastCommittedValue !== value) {
1275
+ (_b = this.linkService.eventBus) === null || _b === void 0 ? void 0 : _b.dispatch("dispatcheventinsandbox", {
1276
+ source: this,
1277
+ detail: {
1278
+ id,
1279
+ name: "Keystroke",
1280
+ value,
1281
+ willCommit: true,
1282
+ commitKey: elementData.commitKey,
1283
+ selStart: event.target.selectionStart,
1284
+ selEnd: event.target.selectionEnd
1285
+ }
1286
+ });
1287
+ }
1288
+ _blurListener(event);
1289
+ });
1290
+ if ((_b = this.data.actions) === null || _b === void 0 ? void 0 : _b.Keystroke) {
1291
+ element.addEventListener("beforeinput", event => {
1292
+ var _a;
1293
+ elementData.lastCommittedValue = null;
1294
+ const { data, target } = event;
1295
+ const { value, selectionStart, selectionEnd } = target;
1296
+ let selStart = selectionStart, selEnd = selectionEnd;
1297
+ switch (event.inputType) {
1298
+ // https://rawgit.com/w3c/input-events/v1/index.html#interface-InputEvent-Attributes
1299
+ case "deleteWordBackward": {
1300
+ const match = value
1301
+ .substring(0, selectionStart)
1302
+ .match(/\w*[^\w]*$/);
1303
+ if (match) {
1304
+ selStart -= match[0].length;
1305
+ }
1306
+ break;
1307
+ }
1308
+ case "deleteWordForward": {
1309
+ const match = value
1310
+ .substring(selectionStart)
1311
+ .match(/^[^\w]*\w*/);
1312
+ if (match) {
1313
+ selEnd += match[0].length;
1314
+ }
1315
+ break;
1316
+ }
1317
+ case "deleteContentBackward":
1318
+ if (selectionStart === selectionEnd) {
1319
+ selStart -= 1;
1320
+ }
1321
+ break;
1322
+ case "deleteContentForward":
1323
+ if (selectionStart === selectionEnd) {
1324
+ selEnd += 1;
1325
+ }
1326
+ break;
1327
+ default: break;
1328
+ }
1329
+ // We handle the event ourselves.
1330
+ event.preventDefault();
1331
+ (_a = this.linkService.eventBus) === null || _a === void 0 ? void 0 : _a.dispatch("dispatcheventinsandbox", {
1332
+ source: this,
1333
+ detail: {
1334
+ id,
1335
+ name: "Keystroke",
1336
+ value,
1337
+ change: data || "",
1338
+ willCommit: false,
1339
+ selStart,
1340
+ selEnd
1341
+ }
1342
+ });
1343
+ });
1344
+ }
1345
+ this._setEventListeners(element, elementData, [
1346
+ ["focus", "Focus"],
1347
+ ["blur", "Blur"],
1348
+ ["mousedown", "Mouse Down"],
1349
+ ["mouseenter", "Mouse Enter"],
1350
+ ["mouseleave", "Mouse Exit"],
1351
+ ["mouseup", "Mouse Up"]
1352
+ ], event => event.target.value);
1353
+ }
1354
+ if (blurListener) {
1355
+ element.addEventListener("blur", blurListener);
1356
+ }
1357
+ if (this.data.comb) {
1358
+ const fieldWidth = this.data.rect[2] - this.data.rect[0];
1359
+ const combWidth = fieldWidth / maxLen;
1360
+ element.classList.add("comb");
1361
+ element.style.letterSpacing = `calc(${combWidth}px * var(--scale-factor) - 1ch)`;
1362
+ }
1363
+ }
1364
+ else {
1365
+ element = document.createElement("div");
1366
+ element.textContent = this.data.fieldValue;
1367
+ element.style.verticalAlign = "middle";
1368
+ element.style.display = "table-cell";
1369
+ if (this.data.hasOwnCanvas) {
1370
+ element.hidden = true;
1371
+ }
1372
+ }
1373
+ this._setTextStyle(element);
1374
+ this._setBackgroundColor(element);
1375
+ this._setDefaultPropertiesFromJS(element);
1376
+ this.container.append(element);
1377
+ return this.container;
1378
+ }
1379
+ }
1383
1380
  // class SignatureWidgetAnnotationElement extends WidgetAnnotationElement {
1384
1381
  // constructor(parameters) {
1385
1382
  // super(parameters, { isRenderable: !!parameters.data.hasOwnCanvas });
@@ -2781,7 +2778,7 @@ _AnnotationLayer_accessibilityManager = new WeakMap(), _AnnotationLayer_annotati
2781
2778
  firstChild.replaceWith(canvas);
2782
2779
  }
2783
2780
  else if (!firstChild.classList.contains("annotationContent") ||
2784
- !firstChild.classList.contains("k-annotation-content ")) {
2781
+ !firstChild.classList.contains("k-annotation-content")) {
2785
2782
  firstChild.before(canvas);
2786
2783
  }
2787
2784
  else {