@taiga-ui/cdk/schematics/ng-update/v5/steps/templates/migrate-sidebar.js

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

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.migrateSidebar = migrateSidebar;
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 SIDEBAR_ATTR = `*${'tuiSidebar'.toLowerCase()}`;
const SIDEBAR_DIRECTION_ATTRS = new Set([
    'tuiSidebarDirection'.toLowerCase(),
    `[${'tuiSidebarDirection'.toLowerCase()}]`,
]);
const SIDEBAR_AUTO_WIDTH_ATTRS = new Set([
    'tuiSidebarAutoWidth'.toLowerCase(),
    `[${'tuiSidebarAutoWidth'.toLowerCase()}]`,
]);
const AUTO_WIDTH_MIGRATION_COMMENT = `<!-- ${insert_todo_1.TODO_MARK} tuiSidebarAutoWidth has no equivalent in TuiDrawer, adjust layout manually -->\n`;
const DYNAMIC_DIRECTION_MIGRATION_COMMENT = `<!-- ${insert_todo_1.TODO_MARK} Update direction variable values: left->start, right->end -->\n`;
function migrateSidebar({ 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) => { var _a; return (_a = el.attrs) === null || _a === void 0 ? void 0 : _a.some((attr) => attr.name === SIDEBAR_ATTR); });
    const replacements = elements
        .map((element) => buildReplacement(template, element))
        .filter((x) => Boolean(x))
        .sort((a, b) => b.startOffset - a.startOffset);
    replacements.forEach(({ startOffset, endOffset, replacement }) => {
        recorder.remove(templateOffset + startOffset, endOffset - startOffset);
        recorder.insertRight(templateOffset + startOffset, replacement);
    });
}
function buildReplacement(template, element) {
    const loc = element.sourceCodeLocation;
    const startTag = loc === null || loc === void 0 ? void 0 : loc.startTag;
    if (!startTag) {
        return null;
    }
    const sidebarAttr = element.attrs.find((attr) => attr.name === SIDEBAR_ATTR);
    if (!sidebarAttr) {
        return null;
    }
    const parsed = parseBinding(sidebarAttr.value);
    const mappedDirection = mapDirection(parsed.direction);
    const hasAutoWidth = parsed.autoWidth !== null;
    const otherAttrs = element.attrs
        .filter(({ name }) => name !== SIDEBAR_ATTR &&
        !SIDEBAR_DIRECTION_ATTRS.has(name) &&
        !SIDEBAR_AUTO_WIDTH_ATTRS.has(name))
        .map(({ name, value }) => (value ? `${name}="${value}"` : name));
    const tuiPopupAttr = `*tuiPopup="${parsed.binding}"`;
    const newAttrs = [
        tuiPopupAttr,
        ...otherAttrs,
        ...(mappedDirection ? [mappedDirection.attr] : []),
    ];
    const attrsStr = newAttrs.length > 0 ? ` ${newAttrs.join(' ')}` : '';
    const comments = `${hasAutoWidth ? AUTO_WIDTH_MIGRATION_COMMENT : ''}${(mappedDirection === null || mappedDirection === void 0 ? void 0 : mappedDirection.isDynamic) ? DYNAMIC_DIRECTION_MIGRATION_COMMENT : ''}`;
    const endTag = loc === null || loc === void 0 ? void 0 : loc.endTag;
    if (!endTag) {
        return {
            startOffset: startTag.startOffset,
            endOffset: startTag.endOffset,
            replacement: `${comments}<tui-drawer${attrsStr}></tui-drawer>`,
        };
    }
    const innerContent = template.slice(startTag.endOffset, endTag.startOffset);
    return {
        startOffset: startTag.startOffset,
        endOffset: endTag.endOffset,
        replacement: `${comments}<tui-drawer${attrsStr}>${innerContent}</tui-drawer>`,
    };
}
function parseBinding(value) {
    var _a, _b;
    const parts = value.split(';').map((s) => s.trim());
    const binding = (_b = (_a = parts[0]) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
    let direction = null;
    let autoWidth = null;
    for (const part of parts.slice(1)) {
        const colonIdx = part.indexOf(':');
        if (colonIdx === -1) {
            continue;
        }
        const key = part.slice(0, colonIdx).trim().toLowerCase();
        const val = part.slice(colonIdx + 1).trim();
        if (key === 'direction') {
            direction = val;
        }
        else if (key === 'autoWidth'.toLowerCase()) {
            autoWidth = val;
        }
    }
    return { binding, direction, autoWidth };
}
function mapDirection(direction) {
    if (!direction) {
        return null;
    }
    if (direction === "'left'" || direction === '"left"') {
        return { attr: 'direction="start"', isDynamic: false };
    }
    return direction === "'right'" || direction === '"right"'
        ? { attr: 'direction="end"', isDynamic: false }
        : { attr: `[direction]="${direction}"`, isDynamic: true };
}
//# sourceMappingURL=migrate-sidebar.js.map