UNPKG

@taiga-ui/cdk

Version:

Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance

112 lines 7.75 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.migrateInputPhone = migrateInputPhone; const insert_todo_1 = require("../../../../utils/insert-todo"); const elements_1 = require("../../../../utils/templates/elements"); const template_resource_1 = require("../../../../utils/templates/template-resource"); const control_state_attrs_1 = require("../../../utils/templates/control-state-attrs"); const remove_attr_1 = require("../../../utils/templates/remove-attr"); const replace_tag_1 = require("../../../utils/templates/replace-tag"); const DOCS_LINK = 'https://taiga-ui.dev/components/input-phone'; const INPUT_ATTRS = new Set(['[allowText]'.toLowerCase(), 'allowText'.toLowerCase()]); const NO_EQUIVALENT_ATTRS = new Set([ 'countryCode'.toLowerCase(), 'phoneMaskAfterCountryCode'.toLowerCase(), ]); function migrateInputPhone({ resource, recorder, fileSystem, }) { const template = (0, template_resource_1.getTemplateFromTemplateResource)(resource, fileSystem); const templateOffset = (0, template_resource_1.getTemplateOffset)(resource); const elements = (0, elements_1.findElementsByTagName)(template, 'tui-input-phone'); elements.forEach((element) => { var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l; const sourceCodeLocation = element.sourceCodeLocation; (0, replace_tag_1.replaceTag)(recorder, sourceCodeLocation, 'tui-input-phone', 'tui-textfield', template, templateOffset); const { value: labelOutside, isBinding: labelOutsideIsBinding } = (0, remove_attr_1.removeAttr)(element, 'tuiTextfieldLabelOutside', recorder, templateOffset); const isLabelOutsideTrue = labelOutside === 'true' || (!labelOutsideIsBinding && labelOutside === ''); const isDynamic = labelOutside !== null && !isLabelOutsideTrue && labelOutside !== 'false'; const controlAttrs = [...element.attrs].filter((attr) => /formcontrol|ngmodel/.exec(attr.name.toLocaleLowerCase())); const inputAttrs = [...element.attrs].filter((attr) => INPUT_ATTRS.has(attr.name.toLowerCase())); const noEquivalentAttrs = [...element.attrs].filter((attr) => NO_EQUIVALENT_ATTRS.has(attr.name.toLowerCase())); const controlStateAttrs = (0, control_state_attrs_1.getControlStateAttrs)(element); for (const attr of [...controlAttrs, ...inputAttrs, ...noEquivalentAttrs]) { const { startOffset = 0, endOffset = 0 } = (_c = (_b = (_a = element.sourceCodeLocation) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[attr.name]) !== null && _c !== void 0 ? _c : {}; recorder.remove(templateOffset + startOffset, endOffset - startOffset); } (0, control_state_attrs_1.removeControlStateAttrs)(recorder, templateOffset, element, template, controlStateAttrs); const labelIndex = element.childNodes.findIndex((node) => node.nodeName === '#text' && (node === null || node === void 0 ? void 0 : node.value.trim())); let placeholderAttr = ''; if (labelIndex !== -1) { const labelNode = element.childNodes[labelIndex]; const labelText = labelNode.value.trim(); const labelTextStart = ((_e = (_d = labelNode === null || labelNode === void 0 ? void 0 : labelNode.sourceCodeLocation) === null || _d === void 0 ? void 0 : _d.startOffset) !== null && _e !== void 0 ? _e : 0) + templateOffset; const labelTextEnd = ((_g = (_f = labelNode === null || labelNode === void 0 ? void 0 : labelNode.sourceCodeLocation) === null || _f === void 0 ? void 0 : _f.endOffset) !== null && _g !== void 0 ? _g : 0) + templateOffset; if (isLabelOutsideTrue) { recorder.remove(labelTextStart, labelTextEnd - labelTextStart); placeholderAttr = ` placeholder="${labelText}"`; } else if (!isDynamic) { recorder.insertRight(labelTextStart, '\n<label tuiLabel>'); recorder.insertRight(labelTextEnd, '</label>\n'); } } if (isDynamic) { const insertAt = ((_h = sourceCodeLocation === null || sourceCodeLocation === void 0 ? void 0 : sourceCodeLocation.startOffset) !== null && _h !== void 0 ? _h : 0) + templateOffset; recorder.insertLeft(insertAt, `<!-- ${insert_todo_1.TODO_MARK} [tuiTextfieldLabelOutside] is dynamic — cannot be migrated automatically. Use <label tuiLabel> inside <tui-textfield> for label-outside pattern.\n-->\n`); } const inputInsertOffset = ((_k = (_j = sourceCodeLocation === null || sourceCodeLocation === void 0 ? void 0 : sourceCodeLocation.endTag) === null || _j === void 0 ? void 0 : _j.startOffset) !== null && _k !== void 0 ? _k : 0) + templateOffset; const inputs = element.childNodes.filter((node) => node.nodeName === 'input'); const baseAttrs = [...controlAttrs, ...inputAttrs].reduce((result, attr) => { const name = normalizeAttrName(attr.name); return attr.value ? `${result} ${name}="${attr.value}"` : `${result} ${name}`; }, ''); const migrationAttrs = `${baseAttrs}${(0, control_state_attrs_1.stringifyControlStateAttrs)(controlStateAttrs)}`; if (noEquivalentAttrs.length > 0) { const names = noEquivalentAttrs.map((a) => a.name).join(', '); const todoComment = [ `<!-- ${insert_todo_1.TODO_MARK} tui-input-phone migration (see ${DOCS_LINK}):`, ` - ${names} have no direct v5 equivalent.`, ' In v5 both are replaced by a single [mask] input of type MaskitoOptions.', ' Replace with: <input tuiInputPhone [mask]="phoneOptions" /> where', " phoneOptions = maskitoPhone({countryIsoCode: 'RU', metadata}) from @maskito/phone. -->", ].join('\n'); const insertAt = ((_l = sourceCodeLocation === null || sourceCodeLocation === void 0 ? void 0 : sourceCodeLocation.startOffset) !== null && _l !== void 0 ? _l : 0) + templateOffset; recorder.insertLeft(insertAt, `${todoComment}\n`); } recorder.insertRight(inputInsertOffset, inputs.length ? '' : `\n<input tuiInputPhone${migrationAttrs}${placeholderAttr} />\n`); for (const input of inputs) { input.attrs.forEach((attr) => { var _a, _b, _c; if (/^tuiTextfield$|^tuiTextfieldLegacy$/i.exec(attr.name)) { const { startOffset = 0, endOffset = 0 } = (_c = (_b = (_a = input.sourceCodeLocation) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[attr.name]) !== null && _c !== void 0 ? _c : {}; recorder.remove(templateOffset + startOffset, endOffset - startOffset); recorder.insertRight(templateOffset + startOffset, `tuiInputPhone${migrationAttrs}${placeholderAttr}`); } }); } }); } function normalizeAttrName(name) { switch (name.toLowerCase()) { case '[allowText]'.toLowerCase(): return '[allowText]'; case '[formControl]'.toLowerCase(): return '[formControl]'; case '[ngModel]'.toLowerCase(): return '[ngModel]'; case 'allowText'.toLowerCase(): return 'allowText'; case 'formControl'.toLowerCase(): return 'formControl'; case 'formControlName'.toLowerCase(): return 'formControlName'; case 'ngModel'.toLowerCase(): return 'ngModel'; case '[(ngmodel)]': return '[(ngModel)]'; default: return name; } } //# sourceMappingURL=migrate-input-phone.js.map