@taiga-ui/cdk
Version:
Base library for creating Angular components and applications using Taiga UI principles regarding of actual visual appearance
215 lines • 7.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.ATTR_WITH_VALUES_TO_REPLACE = void 0;
const elements_1 = require("../../../../utils/templates/elements");
function hasNoHintContent(el) {
return !(0, elements_1.hasElementAttribute)(el, 'tuiHintContent');
}
exports.ATTR_WITH_VALUES_TO_REPLACE = [
{
attrNames: ['[pseudo]'],
newAttrName: '[style.text-decoration-style]',
valueReplacer: (value) => value === 'true' ? "'dashed'" : `${value} ? 'dashed' : null`,
withTagNames: ['a', 'button'],
filterFn: (el) => {
var _a;
return (0, elements_1.hasElementAttribute)(el, 'tuiLink') &&
((_a = el.attrs.find((attr) => attr.name === '[pseudo]')) === null || _a === void 0 ? void 0 : _a.value) !== 'false' &&
(0, elements_1.hasElementAttributeWithValue)(el, 'appearance', '');
},
},
{
attrNames: ['[pseudo]'],
newAttrName: '[style.text-decoration-line]',
valueReplacer: (value) => value === 'true' ? "'underline'" : `${value} ? 'underline' : null`,
withTagNames: ['a', 'button'],
filterFn: (el) => {
var _a;
return (0, elements_1.hasElementAttribute)(el, 'tuiLink') &&
((_a = el.attrs.find((attr) => attr.name === '[pseudo]')) === null || _a === void 0 ? void 0 : _a.value) !== 'false' &&
!(0, elements_1.hasElementAttributeWithValue)(el, 'appearance', '');
},
},
{
attrNames: ['size', '[size]'],
newAttrName: '[style.--tui-thumb-size.rem]',
valueReplacer: (condition) => condition === 's' || condition === "'s'" ? '0.5' : '0.75',
withTagNames: ['tui-range', 'input'],
filterFn: (el) => el.tagName !== 'input' || (0, elements_1.hasElementAttribute)(el, 'tuiSlider'),
},
{
attrNames: ['tuiHintDirection'],
filterFn: hasNoHintContent,
valueReplacer: [
{ from: 'bottom-left', to: 'bottom-start' },
{ from: 'bottom-right', to: 'bottom-end' },
{ from: 'top-left', to: 'top-start' },
{ from: 'top-right', to: 'top-end' },
{ from: 'left-bottom', to: 'start-bottom' },
{ from: 'left-top', to: 'start-top' },
{ from: 'left', to: 'start' },
{ from: 'right-bottom', to: 'end-bottom' },
{ from: 'right-top', to: 'end-top' },
{ from: 'right', to: 'end' },
],
},
{
attrNames: ['[tuiHintDirection]'],
filterFn: hasNoHintContent,
valueReplacer: [
{ from: "'bottom-left'", to: "'bottom-start'" },
{ from: "'bottom-right'", to: "'bottom-end'" },
{ from: "'top-left'", to: "'top-start'" },
{ from: "'top-right'", to: "'top-end'" },
{ from: "'left-bottom'", to: "'start-bottom'" },
{ from: "'left-top'", to: "'start-top'" },
{ from: "'left'", to: "'start'" },
{ from: "'right-bottom'", to: "'end-bottom'" },
{ from: "'right-top'", to: "'end-top'" },
{ from: "'right'", to: "'end'" },
],
},
{
attrNames: ['tuiDropdownAlign', 'tuiSlot', 'tuiComment'],
valueReplacer: [
{ from: 'left', to: 'start' },
{ from: 'right', to: 'end' },
],
},
{
attrNames: ['[tuiDropdownAlign]', '[tuiSlot]', '[tuiComment]'],
valueReplacer: [
{ from: "'left'", to: "'start'" },
{ from: "'right'", to: "'end'" },
],
},
{
attrNames: ['direction'],
withTagNames: ['tui-avatar-stack', 'tui-drawer'],
valueReplacer: [
{ from: 'left', to: 'start' },
{ from: 'right', to: 'end' },
],
},
{
attrNames: ['[direction]'],
withTagNames: ['tui-avatar-stack', 'tui-drawer'],
valueReplacer: [
{ from: "'left'", to: "'start'" },
{ from: "'right'", to: "'end'" },
],
},
{
attrNames: ['vertical'],
withTagNames: ['tui-tabs'],
valueReplacer: [
{ from: 'left', to: 'start' },
{ from: 'right', to: 'end' },
],
},
{
attrNames: ['[vertical]'],
withTagNames: ['tui-tabs'],
valueReplacer: [
{ from: "'left'", to: "'start'" },
{ from: "'right'", to: "'end'" },
],
},
{
attrNames: ['vertical'],
withTagNames: ['nav'],
valueReplacer: [
{ from: 'left', to: 'start' },
{ from: 'right', to: 'end' },
],
filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiTabs'),
},
{
attrNames: ['[vertical]'],
withTagNames: ['nav'],
valueReplacer: [
{ from: "'left'", to: "'start'" },
{ from: "'right'", to: "'end'" },
],
filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiTabs'),
},
{
attrNames: ['align'],
withTagNames: ['input'],
valueReplacer: [
{ from: 'left', to: 'start' },
{ from: 'right', to: 'end' },
],
filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiInputColor'),
},
{
attrNames: ['[align]'],
withTagNames: ['input'],
valueReplacer: [
{ from: "'left'", to: "'start'" },
{ from: "'right'", to: "'end'" },
],
filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiInputColor'),
},
{
attrNames: ['tuiHeader'],
valueReplacer: [
{ from: 'xxl', to: 'h1' },
{ from: 'xl', to: 'h2' },
{ from: 'l', to: 'h3' },
{ from: 'm', to: 'h4' },
{ from: 's', to: 'h5' },
{ from: 'xs', to: 'h6' },
{ from: 'xxs', to: 'body-l' },
],
},
{
attrNames: ['[tuiHeader]'],
valueReplacer: [
{ from: "'xxl'", to: "'h1'" },
{ from: "'xl'", to: "'h2'" },
{ from: "'l'", to: "'h3'" },
{ from: "'m'", to: "'h4'" },
{ from: "'s'", to: "'h5'" },
{ from: "'xs'", to: "'h6'" },
{ from: "'xxs'", to: "'body-l'" },
],
},
{
attrNames: ['appearance'],
valueReplacer: [
{ from: 'error', to: 'negative' },
{ from: 'success', to: 'positive' },
{ from: 'glass', to: 'secondary-grayscale' },
],
},
{
attrNames: ['[appearance]'],
valueReplacer: [
{ from: "'error'", to: "'negative'" },
{ from: "'success'", to: "'positive'" },
{ from: "'glass'", to: "'secondary-grayscale'" },
],
},
{
attrNames: ['[directionOrder]'],
newAttrName: '[direction]',
withTagNames: ['table'],
valueReplacer: (value) => {
if (value === "'asc'") {
return '1';
}
return value === "'desc'" ? '-1' : value;
},
},
{
attrNames: ['tuiSurface', '[tuiSurface]'],
filterFn: (el) => (0, elements_1.hasElementAttribute)(el, 'tuiCardLarge'),
newAttrName: 'appearance',
valueReplacer: [
{ from: "'elevated'", to: 'floating' },
{ from: 'elevated', to: 'floating' },
],
},
];
//# sourceMappingURL=attr-with-values-to-replace.js.map