all files / document-editor/implementation/dialogs/ form-field-text-dialog.js

87.92% Statements 233/265
69.72% Branches 76/109
77.27% Functions 17/22
87.92% Lines 233/265
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418   507× 507×   507×   507×                                                             507×   507×     75×         14461×                                                                                                                                                                                                                                               755× 755×     755×   755×   755×   755×   755× 755× 755× 755× 755× 755× 755× 755×   755×   755×   755×   755×   755×   755×   755×   755×   755×   755×   755×   755×   755×   755×   755×          
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-buttons", "../viewer/page", "@syncfusion/ej2-inputs", "@syncfusion/ej2-dropdowns", "@syncfusion/ej2-popups", "../editor/editor-helper", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1, ej2_buttons_1, page_1, ej2_inputs_1, ej2_dropdowns_1, ej2_popups_1, editor_helper_1, ej2_base_2) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var TextFormFieldDialog = (function () {
        function TextFormFieldDialog(owner) {
            var _this = this;
            this.updateTextFormtas = function () {
                var defautText = _this.updateFormats(_this.defaultTextInput.value);
                _this.defaultTextInput.value = !ej2_base_1.isNullOrUndefined(defautText) ? defautText : '';
            };
            this.onCancelButtonClick = function () {
                _this.documentHelper.dialog.hide();
            };
            this.insertTextField = function () {
                var valid = true;
                Iif (_this.typeDropDown.value === 'Date') {
                    valid = _this.isValidDateFormat();
                }
                Eif (valid) {
                    _this.updateTextFormtas();
                    Iif (_this.defaultTextInput.value.length > _this.maxLengthNumber.value && !ej2_base_1.isNullOrUndefined(_this.maxLengthNumber.value) &&
                        _this.maxLengthNumber.value !== 0) {
                        ej2_popups_1.DialogUtility.alert({
                            content: 'The maximum length value must be equal or greater than the length of the default text.',
                            showCloseIcon: true,
                            closeOnEscape: true,
                            position: { X: 'center', Y: 'center' },
                            animationSettings: { effect: 'Zoom' }
                        }).enableRtl = _this.owner.enableRtl;
                    }
                    else {
                        var type = void 0;
                        Iif (_this.typeDropDown.value === 'Date') {
                            type = 'Date';
                        }
                        else Iif (_this.typeDropDown.value === 'Number') {
                            type = 'Number';
                        }
                        else {
                            type = 'Text';
                        }
                        var format = ej2_base_2.SanitizeHtmlHelper.sanitize(_this.textFormatDropDown.value);
                        var formField = new page_1.TextFormField();
                        formField.type = type;
                        formField.defaultValue = _this.defaultTextInput.value;
                        formField.maxLength = _this.maxLengthNumber.value;
                        formField.format = !ej2_base_1.isNullOrUndefined(format) ? format : '';
                        formField.name = _this.bookmarkTextInput.value;
                        formField.helpText = _this.tooltipTextInput.value;
                        formField.enabled = _this.fillInEnable.checked;
                        _this.owner.editorModule.editFormField('Text', formField);
                        _this.closeTextField();
                    }
                }
                else {
                    ej2_popups_1.DialogUtility.alert({
                        content: 'A valid date or time is required',
                        showCloseIcon: true,
                        closeOnEscape: true,
                        position: { X: 'center', Y: 'center' },
                        animationSettings: { effect: 'Zoom' }
                    }).enableRtl = _this.owner.enableRtl;
                }
            };
            this.closeTextField = function () {
                _this.documentHelper.dialog.hide();
                _this.documentHelper.dialog.element.style.pointerEvents = '';
            };
            this.owner = owner;
        }
        Object.defineProperty(TextFormFieldDialog.prototype, "documentHelper", {
            get: function () {
                return this.owner.documentHelper;
            },
            enumerable: true,
            configurable: true
        });
        TextFormFieldDialog.prototype.getModuleName = function () {
            return 'TextFormFieldDialog';
        };
        TextFormFieldDialog.prototype.initTextDialog = function (localValue, isRtl) {
            var _this = this;
            this.target = ej2_base_1.createElement('div');
            this.dialogDiv = ej2_base_1.createElement('div');
            this.firstDiv = ej2_base_1.createElement('div', { className: 'e-de-container-row' });
            this.typeDiv = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
            this.defaultTextDiv = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-right' });
            var typeDropDownitems = [
                { Value: 'Regular text', Name: localValue.getConstant('Regular text') },
                { Value: 'Number', Name: localValue.getConstant('Number') },
                { Value: 'Date', Name: localValue.getConstant('Date') }
            ];
            this.typeDropDownList = ej2_base_1.createElement('input');
            this.typeDropDown = new ej2_dropdowns_1.DropDownList({
                dataSource: typeDropDownitems,
                popupHeight: '150px',
                value: 'Regular text',
                change: this.changeTypeDropDown.bind(this),
                floatLabelType: 'Always',
                placeholder: localValue.getConstant('Type'),
                fields: { text: 'Name', value: 'Value' },
                htmlAttributes: { 'aria-labelledby': localValue.getConstant('Type') }
            });
            this.defaultTextInput = ej2_base_1.createElement('input', { className: 'e-input e-bookmark-textbox-input' });
            this.secondDiv = ej2_base_1.createElement('div', { className: 'e-de-container-row' });
            this.maxLengthDiv = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
            this.maxLength = ej2_base_1.createElement('input', { attrs: { 'aria-labelledby': localValue.getConstant('Maximum length') } });
            this.maxLengthNumber = new ej2_inputs_1.NumericTextBox({
                format: 'n', value: 0, min: 0, max: 32767, width: '100%', enablePersistence: false,
                placeholder: localValue.getConstant('Maximum length'), floatLabelType: 'Always',
                change: function (args) {
                    if (!args.value) {
                        this.element.value = localValue.getConstant('Unlimited');
                    }
                },
                focus: function (args) {
                    if (!args.value) {
                        this.element.value = localValue.getConstant('Unlimited');
                    }
                },
                blur: function (args) {
                    if (!args.value) {
                        var proxy_1 = this;
                        setTimeout(function () {
                            proxy_1.element.value = localValue.getConstant('Unlimited');
                        }, 0);
                    }
                },
            });
            this.textFromatDiv = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-right' });
            this.textFormatList = ej2_base_1.createElement('input');
            var formatDropDownitems = [
                { Value: "Uppercase", Name: localValue.getConstant("Uppercase") },
                { Value: "Lowercase", Name: localValue.getConstant("Lowercase") },
                { Value: "FirstCapital", Name: localValue.getConstant("FirstCapital") },
                { Value: "Titlecase", Name: localValue.getConstant("TitleCase") }
            ];
            this.textFormatDropDown = new ej2_dropdowns_1.ComboBox({
                dataSource: formatDropDownitems,
                popupHeight: '150px',
                allowCustom: true,
                showClearButton: false,
                change: this.updateTextFormtas.bind(this),
                placeholder: localValue.getConstant('Text format'),
                floatLabelType: 'Always',
                fields: { text: 'Name', value: 'Value' }
            });
            this.textFormatDropDown.focus = function () {
                _this.textFormatDropDown.element.select();
            };
            this.fileSettingsLabel = ej2_base_1.createElement('div', {
                className: 'e-de-ff-dlg-heading',
                innerHTML: localValue.getConstant('Field settings')
            });
            this.thirdDiv = ej2_base_1.createElement('div', { className: 'e-de-container-row' });
            this.toolTipTotalDiv = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-left' });
            this.bookmarkTotalDiv = ej2_base_1.createElement('div', { className: 'e-de-subcontainer-right' });
            this.tooltipTextInput = ej2_base_1.createElement('input', { className: 'e-input e-bookmark-textbox-input' });
            this.bookmarkTextInput = ej2_base_1.createElement('input', { className: 'e-input e-bookmark-textbox-input' });
            this.fillInEnableDiv = ej2_base_1.createElement('div');
            this.fillInEnableEle = ej2_base_1.createElement('input', { attrs: { type: 'checkbox' } });
            this.fillInEnableEle.setAttribute('aria-label', localValue.getConstant('Fillin enabled'));
            this.fillInEnable = new ej2_buttons_1.CheckBox({
                cssClass: 'e-de-ff-dlg-check',
                label: localValue.getConstant('Fillin enabled'),
                enableRtl: isRtl
            });
            Iif (isRtl) {
                this.typeDiv.classList.add('e-de-rtl');
                this.maxLengthDiv.classList.add('e-de-rtl');
                this.toolTipTotalDiv.classList.add('e-de-rtl');
                this.bookmarkTotalDiv.classList.add('e-de-rtl');
            }
            this.target.appendChild(this.dialogDiv);
            this.dialogDiv.appendChild(this.firstDiv);
            this.firstDiv.appendChild(this.typeDiv);
            this.typeDiv.appendChild(this.typeDropDownList);
            this.typeDropDown.appendTo(this.typeDropDownList);
            this.firstDiv.appendChild(this.defaultTextDiv);
            this.defaultTextDiv.appendChild(this.defaultTextInput);
            this.dialogDiv.appendChild(this.secondDiv);
            this.secondDiv.appendChild(this.maxLengthDiv);
            this.maxLengthDiv.appendChild(this.maxLength);
            this.maxLengthNumber.appendTo(this.maxLength);
            this.secondDiv.appendChild(this.textFromatDiv);
            this.textFromatDiv.appendChild(this.textFormatList);
            this.textFormatDropDown.appendTo(this.textFormatList);
            this.dialogDiv.appendChild(this.fileSettingsLabel);
            this.dialogDiv.appendChild(this.thirdDiv);
            this.thirdDiv.appendChild(this.toolTipTotalDiv);
            this.toolTipTotalDiv.appendChild(this.tooltipTextInput);
            this.thirdDiv.appendChild(this.bookmarkTotalDiv);
            this.bookmarkTotalDiv.appendChild(this.bookmarkTextInput);
            this.dialogDiv.appendChild(this.fillInEnableDiv);
            this.fillInEnableDiv.appendChild(this.fillInEnableEle);
            this.fillInEnable.appendTo(this.fillInEnableEle);
            this.defaultTextLabel = new ej2_inputs_1.TextBox({ placeholder: localValue.getConstant('Default text'), floatLabelType: 'Always' }, this.defaultTextInput);
            new ej2_inputs_1.TextBox({ placeholder: localValue.getConstant('Tooltip'), floatLabelType: 'Always' }, this.tooltipTextInput);
            new ej2_inputs_1.TextBox({ placeholder: localValue.getConstant('Name'), floatLabelType: 'Always', htmlAttributes: { 'aria-labelledby': localValue.getConstant('Name') } }, this.bookmarkTextInput);
            this.defaultTextInput.setAttribute('aria-labelledby', localValue.getConstant('Default text'));
            this.tooltipTextInput.setAttribute('aria-labelledby', localValue.getConstant('Tooltip'));
            this.bookmarkTextInput.setAttribute('aria-labelledby', localValue.getConstant('Name'));
        };
        TextFormFieldDialog.prototype.show = function () {
            this.localObj = new ej2_base_1.L10n('documenteditor', this.documentHelper.owner.defaultLocale);
            this.localObj.setLocale(this.documentHelper.owner.locale);
            if (ej2_base_1.isNullOrUndefined(this.target)) {
                this.initTextDialog(this.localObj, this.documentHelper.owner.enableRtl);
            }
            this.loadTextDialog(this.localObj);
            this.documentHelper.dialog.header = this.localObj.getConstant('Text Form Field');
            this.documentHelper.dialog.position = { X: 'center', Y: 'center' };
            this.documentHelper.dialog.height = 'auto';
            this.documentHelper.dialog.width = '448px';
            this.documentHelper.dialog.content = this.target;
            this.documentHelper.dialog.buttons = [{
                    click: this.insertTextField,
                    buttonModel: { content: this.localObj.getConstant('Ok'), cssClass: 'e-flat e-table-cell-margin-okay', isPrimary: true }
                },
                {
                    click: this.onCancelButtonClick,
                    buttonModel: { content: this.localObj.getConstant('Cancel'), cssClass: 'e-flat e-table-cell-margin-cancel' }
                }];
            this.documentHelper.dialog.show();
        };
        TextFormFieldDialog.prototype.changeTypeDropDown = function (args) {
            Iif (args.isInteracted) {
                this.defaultTextInput.value = '';
                this.textFormatDropDown.value = '';
            }
            if (args.value === 'Regular text') {
                this.textFormatDropDown.fields = { text: 'Name', value: 'Value' };
                this.defaultTextLabel.placeholder = this.localObj.getConstant('Default text');
                this.textFormatDropDown.placeholder = this.localObj.getConstant('Text format');
                this.textFormatDropDown.dataSource = [
                    { Value: "Uppercase", Name: this.localObj.getConstant("Uppercase") },
                    { Value: "Lowercase", Name: this.localObj.getConstant("Lowercase") },
                    { Value: "FirstCapital", Name: this.localObj.getConstant("FirstCapital") },
                    { Value: "Titlecase", Name: this.localObj.getConstant("TitleCase") }
                ];
            }
            else if (args.value === 'Number') {
                this.textFormatDropDown.fields = { text: null, value: null };
                this.defaultTextLabel.placeholder = this.localObj.getConstant('Default number');
                this.textFormatDropDown.placeholder = this.localObj.getConstant('Number format');
                this.textFormatDropDown.dataSource = ['0', '0.00', '#,##0', '#,##0.00', '$#,##0.00;($#,##0.00)', '0%'];
            }
            else Eif (args.value === 'Date') {
                this.textFormatDropDown.fields = { text: null, value: null };
                this.defaultTextLabel.placeholder = this.localObj.getConstant('Default date');
                this.textFormatDropDown.placeholder = this.localObj.getConstant('Date format');
                this.textFormatDropDown.dataSource = ['M/d/yyyy', 'dddd, MMMM d, yyyy', 'MMMM d, yyyy', 'M/d/yy', 'yyyy-MM-dd', 'd-MMM-yy',
                    'M.d.yyyy', 'MMM. d, yy', 'd MMMM yyyy', 'MMMM yy', 'MMM-yy', 'M/d/yyyy h:mm am/pm', 'M/d/yyyy h:mm:ss am/pm', 'h:mm am/pm', 'h:mm:ss am/pm',
                    'HH:mm', 'HH:mm:ss'];
            }
            this.defaultTextLabel.dataBind();
            this.textFormatDropDown.dataBind();
        };
        TextFormFieldDialog.prototype.loadTextDialog = function (local) {
            var inline = this.owner.selectionModule.getCurrentFormField();
            Eif (inline instanceof page_1.FieldElementBox) {
                this.fieldBegin = inline;
                var data = inline.formFieldData;
                Iif (data.maxLength > 0) {
                    this.maxLengthNumber.value = data.maxLength;
                }
                else {
                    this.maxLengthNumber.value = 0;
                    this.maxLengthNumber.element.value = local ? local.getConstant('Unlimited') : 'Unlimited';
                }
                Iif (data.type === 'Date') {
                    this.typeDropDown.value = 'Date';
                }
                else Iif (data.type === 'Number') {
                    this.typeDropDown.value = 'Number';
                }
                else {
                    this.typeDropDown.value = 'Regular text';
                }
                Iif (data.format) {
                    this.textFormatDropDown.value = data.format;
                }
                else {
                    this.textFormatDropDown.value = '';
                }
                this.defaultTextInput.value = !ej2_base_1.isNullOrUndefined(data.defaultValue) ? data.defaultValue : '';
                this.fillInEnable.checked = data.enabled;
                this.tooltipTextInput.value = !ej2_base_1.isNullOrUndefined(data.helpText) ? data.helpText : '';
                this.bookmarkTextInput.value = !ej2_base_1.isNullOrUndefined(data.name) ? data.name : '';
            }
        };
        TextFormFieldDialog.prototype.updateFormats = function (value) {
            var format = ej2_base_1.isNullOrUndefined(this.textFormatDropDown.value) ? '' : this.textFormatDropDown.value.toString();
            Eif (this.typeDropDown.value === 'Regular text') {
                return editor_helper_1.HelperMethods.formatText(format, value);
            }
            if (this.typeDropDown.value === 'Number') {
                var data = editor_helper_1.HelperMethods.formatNumber(format, value);
                if (!(data.toString() === 'NaN')) {
                    return data;
                }
                return '';
            }
            if (this.typeDropDown.value === 'Date') {
                return editor_helper_1.HelperMethods.formatDate(format, value);
            }
            return '';
        };
        TextFormFieldDialog.prototype.isValidDateFormat = function () {
            var value = this.defaultTextInput.value;
            Eif (value !== '') {
                var date = new Date(value);
                if (isNaN(date.getDate())) {
                    return false;
                }
            }
            return true;
        };
        TextFormFieldDialog.prototype.destroy = function () {
            var textDialogTarget = this.target;
            if (textDialogTarget) {
                if (textDialogTarget.parentElement) {
                    textDialogTarget.parentElement.removeChild(textDialogTarget);
                }
                this.target = undefined;
            }
            if (this.maxLengthNumber) {
                this.maxLengthNumber.destroy();
                this.maxLengthNumber = undefined;
            }
            if (this.fillInEnable) {
                this.fillInEnable.destroy();
                this.fillInEnable = undefined;
            }
            if (this.typeDropDown) {
                this.typeDropDown.destroy();
                this.typeDropDown = undefined;
            }
            if (this.textFormatDropDown) {
                this.textFormatDropDown.destroy();
                this.textFormatDropDown = undefined;
            }
            this.owner = undefined;
            this.defaultTextInput = undefined;
            this.tooltipTextInput = undefined;
            this.bookmarkTextInput = undefined;
            this.defaultTextLabel = undefined;
            this.defaultTextDiv = undefined;
            this.textFormatLabel = undefined;
            this.removeElements();
        };
        TextFormFieldDialog.prototype.removeElements = function () {
            if (this.dialogDiv) {
                this.dialogDiv.remove();
                this.dialogDiv = undefined;
            }
            if (this.firstDiv) {
                this.firstDiv.remove();
                this.firstDiv = undefined;
            }
            if (this.typeDiv) {
                this.typeDiv.remove();
                this.typeDiv = undefined;
            }
            if (this.typeDropDownList) {
                this.typeDropDownList.remove();
                this.typeDropDownList = undefined;
            }
            if (this.secondDiv) {
                this.secondDiv.remove();
                this.secondDiv = undefined;
            }
            if (this.maxLengthDiv) {
                this.maxLengthDiv.remove();
                this.maxLengthDiv = undefined;
            }
            if (this.maxLength) {
                this.maxLength.remove();
                this.maxLength = undefined;
            }
            if (this.textFromatDiv) {
                this.textFromatDiv.remove();
                this.textFromatDiv = undefined;
            }
            if (this.textFormatList) {
                this.textFormatList.remove();
                this.textFormatList = undefined;
            }
            if (this.fileSettingsLabel) {
                this.fileSettingsLabel.remove();
                this.fileSettingsLabel = undefined;
            }
            if (this.thirdDiv) {
                this.thirdDiv.remove();
                this.thirdDiv = undefined;
            }
            if (this.toolTipTotalDiv) {
                this.toolTipTotalDiv.remove();
                this.toolTipTotalDiv = undefined;
            }
            if (this.bookmarkTotalDiv) {
                this.bookmarkTotalDiv.remove();
                this.bookmarkTotalDiv = undefined;
            }
            if (this.fillInEnableDiv) {
                this.fillInEnableDiv.remove();
                this.fillInEnableDiv = undefined;
            }
            if (this.fillInEnableEle) {
                this.fillInEnableEle.remove();
                this.fillInEnableEle = undefined;
            }
        };
        return TextFormFieldDialog;
    }());
    exports.TextFormFieldDialog = TextFormFieldDialog;
});