@taiga-ui/cdk
Version:
Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance
178 lines • 9.59 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.migrateInputSlider = migrateInputSlider;
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");
// Attrs that move to <input tuiInputSlider>
const INPUT_ATTRS = new Set([
'[quantum]'.toLowerCase(),
'[max]',
'[min]',
'max',
'min',
'quantum',
]);
// Attrs that move to <input tuiSlider type="range">
const SLIDER_ATTRS = new Set([
'[keySteps]'.toLowerCase(),
'[segments]'.toLowerCase(),
'keySteps'.toLowerCase(),
'segments',
]);
// Attrs with no direct equivalent — leave a TODO comment
const TODO_ATTRS = new Set([
'[valueContent]'.toLowerCase(),
'valueContent'.toLowerCase(),
'[steps]',
'steps',
]);
const TODO_STEPS_MESSAGE = '[steps] has been removed. Use [step] on <input tuiSlider type="range"> instead, where step = (max - min) / steps. See https://taiga-ui.dev/components/input-slider';
const TODO_VALUE_CONTENT_MESSAGE = '[valueContent] has been removed. PolymorpheusContent is no longer supported for this input. See https://taiga-ui.dev/components/input-slider for alternatives.';
function migrateInputSlider({ 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-slider');
elements.forEach((element) => {
var _a, _b, _c, _d, _e;
const sourceCodeLocation = element.sourceCodeLocation;
(0, replace_tag_1.replaceTag)(recorder, sourceCodeLocation, 'tui-input-slider', '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 sliderAttrs = [...element.attrs].filter((attr) => SLIDER_ATTRS.has(attr.name.toLowerCase()));
const todoAttrs = [...element.attrs].filter((attr) => TODO_ATTRS.has(attr.name.toLowerCase()));
const controlStateAttrs = (0, control_state_attrs_1.getControlStateAttrs)(element);
for (const attr of [
...controlAttrs,
...inputAttrs,
...sliderAttrs,
...todoAttrs,
]) {
const attributeLocation = (_b = (_a = element.sourceCodeLocation) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[attr.name];
if (attributeLocation) {
recorder.remove(templateOffset + attributeLocation.startOffset, attributeLocation.endOffset - attributeLocation.startOffset);
}
}
(0, control_state_attrs_1.removeControlStateAttrs)(recorder, templateOffset, element, template, controlStateAttrs);
// Insert TODO comments for attrs with no direct equivalent
if (todoAttrs.length > 0) {
const insertAt = ((_c = sourceCodeLocation === null || sourceCodeLocation === void 0 ? void 0 : sourceCodeLocation.startOffset) !== null && _c !== void 0 ? _c : 0) + templateOffset;
const messages = todoAttrs
.map((attr) => {
const name = attr.name.toLowerCase();
return name === '[steps]' || name === 'steps'
? `<!-- ${insert_todo_1.TODO_MARK} ${TODO_STEPS_MESSAGE} -->`
: `<!-- ${insert_todo_1.TODO_MARK} ${TODO_VALUE_CONTENT_MESSAGE} -->`;
})
.join('\n');
recorder.insertLeft(insertAt, `${messages}\n`);
}
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];
if (labelNode === null || labelNode === void 0 ? void 0 : labelNode.sourceCodeLocation) {
const labelText = labelNode.value.trim();
const labelTextStart = labelNode.sourceCodeLocation.startOffset + templateOffset;
const labelTextEnd = labelNode.sourceCodeLocation.endOffset + 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 = ((_d = sourceCodeLocation === null || sourceCodeLocation === void 0 ? void 0 : sourceCodeLocation.startOffset) !== null && _d !== void 0 ? _d : 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 endTagStartOffset = (_e = sourceCodeLocation === null || sourceCodeLocation === void 0 ? void 0 : sourceCodeLocation.endTag) === null || _e === void 0 ? void 0 : _e.startOffset;
if (endTagStartOffset === undefined) {
return;
}
const insertOffset = endTagStartOffset + 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)}`;
const sliderAttrStr = sliderAttrs.reduce((result, attr) => {
const name = normalizeSliderAttrName(attr.name);
return attr.value ? `${result} ${name}="${attr.value}"` : `${result} ${name}`;
}, '');
if (inputs.length) {
recorder.insertRight(insertOffset, `\n<input tuiSlider type="range"${sliderAttrStr} />\n`);
}
else {
recorder.insertRight(insertOffset, `\n<input tuiInputSlider${migrationAttrs}${placeholderAttr} />\n<input tuiSlider type="range"${sliderAttrStr} />\n`);
}
for (const input of inputs) {
input.attrs.forEach((attr) => {
var _a, _b;
if (/^tuiTextfield$|^tuiTextfieldLegacy$/i.exec(attr.name)) {
const attributeLocation = (_b = (_a = input.sourceCodeLocation) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b[attr.name];
if (attributeLocation) {
const { startOffset, endOffset } = attributeLocation;
recorder.remove(templateOffset + startOffset, endOffset - startOffset);
recorder.insertRight(templateOffset + startOffset, `tuiInputSlider${migrationAttrs}${placeholderAttr}`);
}
}
});
}
});
}
function normalizeAttrName(name) {
switch (name.toLowerCase()) {
case '(ngModelChange)'.toLowerCase():
return '(ngModelChange)';
case '[(ngModel)]'.toLowerCase():
return '[(ngModel)]';
case '[formControl]'.toLowerCase():
return '[formControl]';
case '[formControlName]'.toLowerCase():
return '[formControlName]';
case '[ngModel]'.toLowerCase():
return '[ngModel]';
case '[quantum]'.toLowerCase():
return '[quantum]';
case 'formControl'.toLowerCase():
return 'formControl';
case 'formControlName'.toLowerCase():
return 'formControlName';
case 'ngModel'.toLowerCase():
return 'ngModel';
case '[max]':
return '[max]';
case '[min]':
return '[min]';
case 'quantum':
return 'quantum';
default:
return name;
}
}
function normalizeSliderAttrName(name) {
switch (name.toLowerCase()) {
case '[keySteps]'.toLowerCase():
return '[keySteps]';
case '[segments]'.toLowerCase():
return '[segments]';
case 'keySteps'.toLowerCase():
return 'keySteps';
case 'segments':
return 'segments';
default:
return name;
}
}
//# sourceMappingURL=migrate-input-slider.js.map