@taiga-ui/cdk
Version:
Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance
193 lines • 11.3 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.migrateInputDateMulti = migrateInputDateMulti;
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 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-date';
const INPUT_ATTRS = new Set([
'[max]'.toLowerCase(),
'[min]'.toLowerCase(),
'max'.toLowerCase(),
'min'.toLowerCase(),
]);
const CALENDAR_ATTRS = new Set([
'[defaultActiveYearMonth]'.toLowerCase(),
'[disabledItemHandler]'.toLowerCase(),
'[markerHandler]'.toLowerCase(),
'defaultActiveYearMonth'.toLowerCase(),
]);
const CALENDAR_ATTR_NAMES = new Map([
['[defaultActiveYearMonth]'.toLowerCase(), '[month]'],
['[disabledItemHandler]'.toLowerCase(), '[disabledItemHandler]'],
['[markerHandler]'.toLowerCase(), '[markerHandler]'],
['defaultActiveYearMonth'.toLowerCase(), 'month'],
]);
const TEXTFIELD_ATTRS = new Set(['[rows]'.toLowerCase(), 'rows'.toLowerCase()]);
const PLACEHOLDER_ATTRS = new Set([
'[placeholder]'.toLowerCase(),
'placeholder'.toLowerCase(),
]);
const TODO_ATTRS = new Set([
'(searchChange)'.toLowerCase(),
'[(search)]'.toLowerCase(),
'[search]'.toLowerCase(),
'[tagValidator]'.toLowerCase(),
]);
const TODO_ATTR_NAMES = new Map([
['(searchChange)'.toLowerCase(), '(searchChange)'],
['[(search)]', '[(search)]'],
['[search]', '[search]'],
['[tagValidator]'.toLowerCase(), '[tagValidator]'],
]);
const DROPPED_ATTRS = new Set([
'[editable]'.toLowerCase(),
'[inputHidden]'.toLowerCase(),
'editable'.toLowerCase(),
'inputHidden'.toLowerCase(),
]);
function migrateInputDateMulti({ 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-date');
elements.forEach((element) => {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
// Only process elements with `multiple` attribute
if (!element.attrs.some((attr) => attr.name === 'multiple')) {
return;
}
const sourceCodeLocation = element.sourceCodeLocation;
(0, replace_tag_1.replaceTag)(recorder, sourceCodeLocation, 'tui-input-date', '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 allAttrs = [...element.attrs];
// Remove `multiple` attribute
const multipleAttr = allAttrs.find((attr) => attr.name === 'multiple');
if (multipleAttr) {
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['multiple']) !== null && _c !== void 0 ? _c : {};
recorder.remove(templateOffset + startOffset, endOffset - startOffset);
}
const controlAttrs = allAttrs.filter((attr) => /formcontrol|ngmodel/.exec(attr.name.toLocaleLowerCase()));
const inputAttrs = allAttrs.filter((attr) => INPUT_ATTRS.has(attr.name.toLowerCase()));
const calendarAttrs = allAttrs.filter((attr) => CALENDAR_ATTRS.has(attr.name.toLowerCase()));
const textfieldAttrs = allAttrs.filter((attr) => TEXTFIELD_ATTRS.has(attr.name.toLowerCase()));
// Add `multi` (and textfield-level attrs) to the new tui-textfield opening tag
const openTagEnd = (_e = (_d = sourceCodeLocation === null || sourceCodeLocation === void 0 ? void 0 : sourceCodeLocation.startTag) === null || _d === void 0 ? void 0 : _d.endOffset) !== null && _e !== void 0 ? _e : 0;
const textfieldAttrStr = textfieldAttrs.reduce((result, attr) => attr.value
? `${result} ${attr.name}="${attr.value}"`
: `${result} ${attr.name}`, '');
recorder.insertRight(templateOffset + openTagEnd - 1, ` multi${textfieldAttrStr}`);
const placeholderAttrs = allAttrs.filter((attr) => PLACEHOLDER_ATTRS.has(attr.name.toLowerCase()));
const todoAttrs = allAttrs.filter((attr) => TODO_ATTRS.has(attr.name.toLowerCase()));
const droppedAttrs = allAttrs.filter((attr) => DROPPED_ATTRS.has(attr.name.toLowerCase()));
for (const attr of [
...controlAttrs,
...inputAttrs,
...calendarAttrs,
...textfieldAttrs,
...placeholderAttrs,
...todoAttrs,
...droppedAttrs,
]) {
const { startOffset = 0, endOffset = 0 } = (_h = (_g = (_f = element.sourceCodeLocation) === null || _f === void 0 ? void 0 : _f.attrs) === null || _g === void 0 ? void 0 : _g[attr.name]) !== null && _h !== void 0 ? _h : {};
recorder.remove(templateOffset + startOffset, endOffset - startOffset);
}
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 = ((_k = (_j = labelNode === null || labelNode === void 0 ? void 0 : labelNode.sourceCodeLocation) === null || _j === void 0 ? void 0 : _j.startOffset) !== null && _k !== void 0 ? _k : 0) + templateOffset;
const labelTextEnd = ((_m = (_l = labelNode === null || labelNode === void 0 ? void 0 : labelNode.sourceCodeLocation) === null || _l === void 0 ? void 0 : _l.endOffset) !== null && _m !== void 0 ? _m : 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 = ((_o = sourceCodeLocation === null || sourceCodeLocation === void 0 ? void 0 : sourceCodeLocation.startOffset) !== null && _o !== void 0 ? _o : 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`);
}
if (todoAttrs.length > 0) {
const attrLines = todoAttrs.map((attr, index, arr) => {
var _a;
const isLast = index === arr.length - 1;
const name = (_a = TODO_ATTR_NAMES.get(attr.name.toLowerCase())) !== null && _a !== void 0 ? _a : attr.name;
const hint = getHint(attr.name);
return ` - ${name}: ${hint}${isLast ? ' -->' : ''}`;
});
const todoComment = [
`<!-- ${insert_todo_1.TODO_MARK} tui-input-date multiple migration (see ${DOCS_LINK}):`,
...attrLines,
].join('\n');
const insertAt = ((_p = sourceCodeLocation === null || sourceCodeLocation === void 0 ? void 0 : sourceCodeLocation.startOffset) !== null && _p !== void 0 ? _p : 0) + templateOffset;
recorder.insertLeft(insertAt, `${todoComment}\n`);
}
const insertOffset = ((_r = (_q = sourceCodeLocation === null || sourceCodeLocation === void 0 ? void 0 : sourceCodeLocation.endTag) === null || _q === void 0 ? void 0 : _q.startOffset) !== null && _r !== void 0 ? _r : 0) + templateOffset;
const inputs = element.childNodes.filter((node) => node.nodeName === 'input');
const migrationAttrs = [
...controlAttrs,
...inputAttrs,
...placeholderAttrs,
].reduce((result, attr) => {
const name = normalizeAttrName(attr.name);
return attr.value ? `${result} ${name}="${attr.value}"` : `${result} ${name}`;
}, '');
const calendarAttrStr = calendarAttrs.reduce((result, attr) => {
var _a;
const name = (_a = CALENDAR_ATTR_NAMES.get(attr.name.toLowerCase())) !== null && _a !== void 0 ? _a : attr.name;
return attr.value ? `${result} ${name}="${attr.value}"` : `${result} ${name}`;
}, '');
if (inputs.length) {
recorder.insertRight(insertOffset, `\n<tui-calendar *tuiDropdown${calendarAttrStr} />\n`);
}
else {
recorder.insertRight(insertOffset, `\n<input tuiInputDateMulti${migrationAttrs}${placeholderAttr} />\n<tui-calendar *tuiDropdown${calendarAttrStr} />\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, `tuiInputDateMulti${migrationAttrs}${placeholderAttr}`);
}
});
}
});
}
function getHint(attrName) {
const lower = attrName.toLowerCase();
if (lower.includes('tagValidator'.toLowerCase())) {
return 'use <tui-input-chip *tuiItem="let ctx" [appearance]="myValidator(ctx.item) ? \'\' : \'negative\'"> inside <tui-textfield multi>. See https://taiga-ui.dev/components/input-chip#customization';
}
return lower.includes('search')
? 'use native (input) event on <input tuiInputDateMulti (input)="onSearch($any($event).target.value)"> instead.'
: 'no direct equivalent in v5. Update component logic manually.';
}
function normalizeAttrName(name) {
switch (name.toLowerCase()) {
case '[formControl]'.toLowerCase():
return '[formControl]';
case '[ngModel]'.toLowerCase():
return '[ngModel]';
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-date-multi.js.map