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