@taiga-ui/cdk
Version:
Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance
192 lines • 9.29 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.buildTuiIconStr = buildTuiIconStr;
exports.extractHintToTooltipIcon = extractHintToTooltipIcon;
exports.migrateHintOnLegacyControls = migrateHintOnLegacyControls;
const add_import_to_closest_module_1 = require("../../../../utils/add-import-to-closest-module");
const elements_1 = require("../../../../utils/templates/elements");
const migrate_attr_value_1 = require("../../../../utils/templates/migrate-attr-value");
const template_resource_1 = require("../../../../utils/templates/template-resource");
const migrate_input_1 = require("./migrate-input");
const migrate_legacy_custom_content_1 = require("./migrate-legacy-custom-content");
const migrate_textarea_1 = require("./migrate-textarea");
/** Legacy controls that contain tuiHintContent and need migration. */
const LEGACY_CONTROLS = new Set([
'tui-combo-box',
'tui-input',
'tui-input-date',
'tui-input-date-range',
'tui-input-number',
'tui-input-phone',
'tui-input-tag',
'tui-input-time',
'tui-multi-select',
'tui-select',
'tui-textarea',
]);
const HINT_ATTR_NAMES = [
'[tuiHintAppearance]',
'[tuiHintContent]',
'[tuiHintDirection]',
'tuiHintAppearance',
'tuiHintContent',
'tuiHintDirection',
];
function hasHintContent(element) {
return element.attrs.some((attr) => {
const lower = attr.name.toLowerCase();
return (lower === 'tuiHintContent'.toLowerCase() ||
lower === '[tuiHintContent]'.toLowerCase());
});
}
function getOriginalAttrText(template, element, attrNameLower) {
var _a, _b;
const attrLoc = (_b = (_a = element.sourceCodeLocation) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[attrNameLower];
return attrLoc ? template.slice(attrLoc.startOffset, attrLoc.endOffset) : null;
}
function buildTuiIconStr(element, template) {
const contentAttr = element.attrs.find((a) => {
const lower = a.name.toLowerCase();
return (lower === '[tuiHintContent]'.toLowerCase() ||
lower === 'tuiHintContent'.toLowerCase());
});
if (!contentAttr) {
return '';
}
const isBinding = contentAttr.name.toLowerCase() === '[tuiHintContent]'.toLowerCase();
const tooltipAttr = isBinding
? `[tuiTooltip]="${contentAttr.value}"`
: `tuiTooltip="${contentAttr.value}"`;
const appearanceAttr = element.attrs.find((a) => {
const lower = a.name.toLowerCase();
return (lower === '[tuiHintAppearance]'.toLowerCase() ||
lower === 'tuiHintAppearance'.toLowerCase());
});
const directionAttr = element.attrs.find((a) => {
const lower = a.name.toLowerCase();
return (lower === '[tuiHintDirection]'.toLowerCase() ||
lower === 'tuiHintDirection'.toLowerCase());
});
const extraAttrs = [];
if (appearanceAttr) {
const original = getOriginalAttrText(template, element, appearanceAttr.name.toLowerCase());
extraAttrs.push(original !== null && original !== void 0 ? original : (appearanceAttr.value
? `${appearanceAttr.name}="${appearanceAttr.value}"`
: appearanceAttr.name));
}
if (directionAttr) {
const nameLower = directionAttr.name.toLowerCase();
const migratedValue = (0, migrate_attr_value_1.migrateAttrValue)(nameLower, directionAttr.value);
const original = getOriginalAttrText(template, element, nameLower);
let attrText;
if (original && directionAttr.value !== migratedValue) {
attrText = original.replace(`="${directionAttr.value}"`, `="${migratedValue}"`);
}
else {
attrText =
original !== null && original !== void 0 ? original : (directionAttr.value
? `${directionAttr.name}="${migratedValue}"`
: directionAttr.name);
}
extraAttrs.push(attrText);
}
const allAttrs = [tooltipAttr, ...extraAttrs];
return `<tui-icon ${allAttrs.join(' ')} />`;
}
function removeAttr(recorder, templateOffset, element, name, template) {
var _a, _b;
const attrLocation = (_b = (_a = element.sourceCodeLocation) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[name.toLowerCase()];
if (!attrLocation) {
return;
}
const lineStart = template.lastIndexOf('\n', attrLocation.startOffset) + 1;
const lineEnd = template.indexOf('\n', attrLocation.endOffset);
const attrText = template.slice(attrLocation.startOffset, attrLocation.endOffset);
const lineText = lineEnd === -1 ? '' : template.slice(lineStart, lineEnd);
if (lineText.trim() === attrText.trim() && lineEnd !== -1) {
recorder.remove(templateOffset + lineStart, lineEnd - lineStart + 1);
return;
}
recorder.remove(templateOffset + attrLocation.startOffset - 1, attrLocation.endOffset - attrLocation.startOffset + 1);
}
function extractHintToTooltipIcon({ element, template, recorder, templateOffset, resource, }) {
const tuiIconStr = buildTuiIconStr(element, template);
if (!tuiIconStr) {
return '';
}
(0, add_import_to_closest_module_1.addImportToClosestModule)(resource.componentPath, 'TuiIcon', '@taiga-ui/core');
(0, add_import_to_closest_module_1.addImportToClosestModule)(resource.componentPath, 'TuiTooltip', '@taiga-ui/kit');
for (const attrName of HINT_ATTR_NAMES) {
removeAttr(recorder, templateOffset, element, attrName, template);
}
return tuiIconStr;
}
function migrateHintOnLegacyControls({ 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.findElementsInTemplateByFn)(template, (el) => LEGACY_CONTROLS.has(el.tagName) && hasHintContent(el));
if (elements.length === 0) {
return;
}
(0, add_import_to_closest_module_1.addImportToClosestModule)(resource.componentPath, 'TuiIcon', '@taiga-ui/core');
(0, add_import_to_closest_module_1.addImportToClosestModule)(resource.componentPath, 'TuiTooltip', '@taiga-ui/kit');
(0, migrate_legacy_custom_content_1.registerCustomContentImports)(resource, elements.filter((el) => el.tagName === 'tui-input' || el.tagName === 'tui-textarea'));
elements.forEach((element) => {
var _a, _b, _c;
const loc = element.sourceCodeLocation;
if (!loc) {
return;
}
const isSelfClosing = !loc.endTag;
const tagName = element.tagName;
const tuiIconStr = buildTuiIconStr(element, template);
if (!tuiIconStr) {
return;
}
if (!isSelfClosing && tagName === 'tui-input') {
const result = (0, migrate_input_1.buildTuiInputReplacement)(template, element, tuiIconStr);
if (result) {
recorder.remove(templateOffset + result.startOffset, result.endOffset - result.startOffset);
recorder.insertRight(templateOffset + result.startOffset, result.replacement);
}
return;
}
if (!isSelfClosing && tagName === 'tui-textarea') {
const result = (0, migrate_textarea_1.buildTuiTextareaReplacement)(template, element, tuiIconStr);
if (result) {
recorder.remove(templateOffset + result.startOffset, result.endOffset - result.startOffset);
recorder.insertRight(templateOffset + result.startOffset, result.replacement);
}
return;
}
if (isSelfClosing && tagName === 'tui-input-tag') {
return;
}
if (isSelfClosing) {
const nonHintAttrs = element.attrs
.filter((attr) => !HINT_ATTR_NAMES.some((n) => n.toLowerCase() === attr.name.toLowerCase()))
.map((attr) => {
const original = getOriginalAttrText(template, element, attr.name.toLowerCase());
return (original !== null && original !== void 0 ? original : (attr.value ? `${attr.name}="${attr.value}"` : attr.name));
});
const attrsStr = nonHintAttrs.length > 0 ? ` ${nonHintAttrs.join(' ')}` : '';
const replacement = `<${tagName}${attrsStr}>${tuiIconStr}</${tagName}>`;
const selfClosingEnd = (_b = (_a = loc.startTag) === null || _a === void 0 ? void 0 : _a.endOffset) !== null && _b !== void 0 ? _b : loc.endOffset;
recorder.remove(templateOffset + loc.startOffset, selfClosingEnd - loc.startOffset);
recorder.insertRight(templateOffset + loc.startOffset, replacement);
}
else {
extractHintToTooltipIcon({
element,
template,
recorder,
templateOffset,
resource,
});
const insertOffset = (_c = loc.endTag) === null || _c === void 0 ? void 0 : _c.startOffset;
insertOffset &&
recorder.insertRight(templateOffset + insertOffset, `${tuiIconStr}\n`);
}
});
}
//# sourceMappingURL=migrate-hint-on-legacy-controls.js.map