@smart-react-components/ui/components/Pagination/PaginationItemElement.js

SRC UI includes React and Styled components.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const Li_1 = __importDefault(require("@smart-react-components/core/Element/Li"));
const styled_components_1 = __importDefault(require("styled-components"));
exports.default = (0, styled_components_1.default)(Li_1.default)(({ theme, isActive, isDisabled, isFixedSize, isOutline, isSoft, palette, shape }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31, _32, _33, _34, _35, _36, _37, _38, _39, _40, _41, _42, _43, _44, _45, _46, _47, _48, _49, _50, _51, _52, _53, _54, _55, _56, _57, _58, _59, _60, _61, _62, _63, _64, _65, _66, _67, _68, _69, _70, _71, _72, _73, _74, _75, _76, _77, _78, _79, _80, _81, _82, _83, _84, _85, _86, _87, _88, _89, _90, _91, _92, _93, _94, _95, _96, _97, _98, _99, _100, _101, _102, _103, _104, _105, _106, _107, _108, _109, _110, _111, _112, _113, _114, _115, _116, _117, _118, _119, _120, _121, _122, _123, _124, _125, _126, _127, _128, _129, _130, _131, _132, _133, _134, _135, _136, _137, _138, _139, _140, _141, _142, _143, _144, _145, _146, _147, _148, _149, _150, _151, _152, _153, _154, _155, _156, _157, _158, _159, _160, _161, _162;
    return `
  flex: 0 0 auto;
  margin: ${theme.$.length.pagination.margin.y} ${theme.$.length.pagination.margin.x};

  > a {
    align-items: center;
    border: solid 1px;
    border-radius: ${shape === 'rounded' && isFixedSize ? '100%' : theme.$.radius.pagination[shape]};
    cursor: ${!isDisabled ? theme.$.cursor.pagination : theme.$.cursor.paginationDisabled};
    display: inline-flex;
    justify-content: center;
    text-decoration: none;
    transition: 300ms 0s ease-in-out;
    transition-property: background, border, color, fill;

    ${isSoft
        ? `
        font-weight: ${theme.$.fontWeight.bold};  
      `
        : ''}

    ${isFixedSize
        ? `
        height: ${theme.$.length.pagination.fixedSize};
        min-width: ${theme.$.length.pagination.fixedSize};
        padding: 0 3px;
      `
        : `
        padding: ${theme.$.length.pagination.padding.y} ${theme.$.length.pagination.padding.x};
      `}

    ${isDisabled
        ? `
        opacity: ${theme.$.opacity.paginationDisabled};
        pointer-events: none;
      `
        : ''}

    ${!isOutline
        ? `
        ${!isSoft
            ? `
            ${!isActive
                ? `
                background: ${(_b = (_a = theme.$.palette[palette].pagination) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : theme.$.palette[palette].main};
                border-color: ${(_d = (_c = theme.$.palette[palette].pagination) === null || _c === void 0 ? void 0 : _c.border) !== null && _d !== void 0 ? _d : theme.$.palette[palette].dynamic};
                color: ${(_f = (_e = theme.$.palette[palette].pagination) === null || _e === void 0 ? void 0 : _e.font) !== null && _f !== void 0 ? _f : theme.$.palette[palette].font};
                fill: ${(_h = (_g = theme.$.palette[palette].pagination) === null || _g === void 0 ? void 0 : _g.font) !== null && _h !== void 0 ? _h : theme.$.palette[palette].font};

                ${!isDisabled
                    ? `
                    &:hover {
                      background: ${(_l = (_k = (_j = theme.$.palette[palette].pagination) === null || _j === void 0 ? void 0 : _j.hover) === null || _k === void 0 ? void 0 : _k.background) !== null && _l !== void 0 ? _l : theme.$.palette[palette].dynamicer};
                      border-color: ${(_p = (_o = (_m = theme.$.palette[palette].pagination) === null || _m === void 0 ? void 0 : _m.hover) === null || _o === void 0 ? void 0 : _o.border) !== null && _p !== void 0 ? _p : theme.$.palette[palette].dynamicest};
                      color: ${(_s = (_r = (_q = theme.$.palette[palette].pagination) === null || _q === void 0 ? void 0 : _q.hover) === null || _r === void 0 ? void 0 : _r.font) !== null && _s !== void 0 ? _s : theme.$.palette[palette].font};
                      fill: ${(_v = (_u = (_t = theme.$.palette[palette].pagination) === null || _t === void 0 ? void 0 : _t.hover) === null || _u === void 0 ? void 0 : _u.font) !== null && _v !== void 0 ? _v : theme.$.palette[palette].font};
                    }
                  `
                    : ''}
              `
                : `
                background: ${(_y = (_x = (_w = theme.$.palette[palette].pagination) === null || _w === void 0 ? void 0 : _w.active) === null || _x === void 0 ? void 0 : _x.background) !== null && _y !== void 0 ? _y : theme.$.palette[palette].dynamicer};
                border-color: ${(_1 = (_0 = (_z = theme.$.palette[palette].pagination) === null || _z === void 0 ? void 0 : _z.active) === null || _0 === void 0 ? void 0 : _0.border) !== null && _1 !== void 0 ? _1 : theme.$.palette[palette].dynamicest};
                color: ${(_4 = (_3 = (_2 = theme.$.palette[palette].pagination) === null || _2 === void 0 ? void 0 : _2.active) === null || _3 === void 0 ? void 0 : _3.font) !== null && _4 !== void 0 ? _4 : theme.$.palette[palette].font};
                fill: ${(_7 = (_6 = (_5 = theme.$.palette[palette].pagination) === null || _5 === void 0 ? void 0 : _5.active) === null || _6 === void 0 ? void 0 : _6.font) !== null && _7 !== void 0 ? _7 : theme.$.palette[palette].font};
              `}

          `
            : `
            ${!isActive
                ? `
                background: ${(_10 = (_9 = (_8 = theme.$.palette[palette].pagination) === null || _8 === void 0 ? void 0 : _8.soft) === null || _9 === void 0 ? void 0 : _9.background) !== null && _10 !== void 0 ? _10 : theme.$.palette[palette].soft};
                border-color: ${(_13 = (_12 = (_11 = theme.$.palette[palette].pagination) === null || _11 === void 0 ? void 0 : _11.soft) === null || _12 === void 0 ? void 0 : _12.border) !== null && _13 !== void 0 ? _13 : theme.$.palette[palette].softDynamic};
                color: ${(_16 = (_15 = (_14 = theme.$.palette[palette].pagination) === null || _14 === void 0 ? void 0 : _14.soft) === null || _15 === void 0 ? void 0 : _15.font) !== null && _16 !== void 0 ? _16 : theme.$.palette[palette].softFont};
                fill: ${(_19 = (_18 = (_17 = theme.$.palette[palette].pagination) === null || _17 === void 0 ? void 0 : _17.soft) === null || _18 === void 0 ? void 0 : _18.font) !== null && _19 !== void 0 ? _19 : theme.$.palette[palette].softFont};

                ${!isDisabled
                    ? `
                    &:hover {
                      background: ${(_23 = (_22 = (_21 = (_20 = theme.$.palette[palette].pagination) === null || _20 === void 0 ? void 0 : _20.soft) === null || _21 === void 0 ? void 0 : _21.hover) === null || _22 === void 0 ? void 0 : _22.background) !== null && _23 !== void 0 ? _23 : theme.$.palette[palette].softDynamicer};
                      border-color: ${(_27 = (_26 = (_25 = (_24 = theme.$.palette[palette].pagination) === null || _24 === void 0 ? void 0 : _24.soft) === null || _25 === void 0 ? void 0 : _25.hover) === null || _26 === void 0 ? void 0 : _26.border) !== null && _27 !== void 0 ? _27 : theme.$.palette[palette].softDynamicest};
                      color: ${(_31 = (_30 = (_29 = (_28 = theme.$.palette[palette].pagination) === null || _28 === void 0 ? void 0 : _28.soft) === null || _29 === void 0 ? void 0 : _29.hover) === null || _30 === void 0 ? void 0 : _30.font) !== null && _31 !== void 0 ? _31 : theme.$.palette[palette].softFont};
                      fill: ${(_35 = (_34 = (_33 = (_32 = theme.$.palette[palette].pagination) === null || _32 === void 0 ? void 0 : _32.soft) === null || _33 === void 0 ? void 0 : _33.hover) === null || _34 === void 0 ? void 0 : _34.font) !== null && _35 !== void 0 ? _35 : theme.$.palette[palette].softFont};
                    }
                  `
                    : ''}
              `
                : `
                background: ${(_39 = (_38 = (_37 = (_36 = theme.$.palette[palette].pagination) === null || _36 === void 0 ? void 0 : _36.soft) === null || _37 === void 0 ? void 0 : _37.active) === null || _38 === void 0 ? void 0 : _38.background) !== null && _39 !== void 0 ? _39 : theme.$.palette[palette].softDynamicer};
                border-color: ${(_43 = (_42 = (_41 = (_40 = theme.$.palette[palette].pagination) === null || _40 === void 0 ? void 0 : _40.soft) === null || _41 === void 0 ? void 0 : _41.active) === null || _42 === void 0 ? void 0 : _42.border) !== null && _43 !== void 0 ? _43 : theme.$.palette[palette].softDynamicest};
                color: ${(_47 = (_46 = (_45 = (_44 = theme.$.palette[palette].pagination) === null || _44 === void 0 ? void 0 : _44.soft) === null || _45 === void 0 ? void 0 : _45.active) === null || _46 === void 0 ? void 0 : _46.font) !== null && _47 !== void 0 ? _47 : theme.$.palette[palette].softFont};
                fill: ${(_51 = (_50 = (_49 = (_48 = theme.$.palette[palette].pagination) === null || _48 === void 0 ? void 0 : _48.soft) === null || _49 === void 0 ? void 0 : _49.active) === null || _50 === void 0 ? void 0 : _50.font) !== null && _51 !== void 0 ? _51 : theme.$.palette[palette].softFont};
              `}
          `}
      `
        : `
        ${!isSoft
            ? `
            ${!isActive
                ? `
                border-color: ${(_54 = (_53 = (_52 = theme.$.palette[palette].pagination) === null || _52 === void 0 ? void 0 : _52.outline) === null || _53 === void 0 ? void 0 : _53.border) !== null && _54 !== void 0 ? _54 : theme.$.color.dynamic.accent};

                ${!isDisabled
                    ? `
                    color: ${(_57 = (_56 = (_55 = theme.$.palette[palette].pagination) === null || _55 === void 0 ? void 0 : _55.outline) === null || _56 === void 0 ? void 0 : _56.font) !== null && _57 !== void 0 ? _57 : theme.$.color.dynamic.font};
                    fill: ${(_60 = (_59 = (_58 = theme.$.palette[palette].pagination) === null || _58 === void 0 ? void 0 : _58.outline) === null || _59 === void 0 ? void 0 : _59.font) !== null && _60 !== void 0 ? _60 : theme.$.color.dynamic.font};

                    &:hover {
                      background: ${(_64 = (_63 = (_62 = (_61 = theme.$.palette[palette].pagination) === null || _61 === void 0 ? void 0 : _61.outline) === null || _62 === void 0 ? void 0 : _62.hover) === null || _63 === void 0 ? void 0 : _63.background) !== null && _64 !== void 0 ? _64 : theme.$.palette[palette].main};
                      border-color: ${(_68 = (_67 = (_66 = (_65 = theme.$.palette[palette].pagination) === null || _65 === void 0 ? void 0 : _65.outline) === null || _66 === void 0 ? void 0 : _66.hover) === null || _67 === void 0 ? void 0 : _67.border) !== null && _68 !== void 0 ? _68 : theme.$.palette[palette].main};
                      color: ${(_72 = (_71 = (_70 = (_69 = theme.$.palette[palette].pagination) === null || _69 === void 0 ? void 0 : _69.outline) === null || _70 === void 0 ? void 0 : _70.hover) === null || _71 === void 0 ? void 0 : _71.font) !== null && _72 !== void 0 ? _72 : theme.$.palette[palette].font};
                      fill: ${(_76 = (_75 = (_74 = (_73 = theme.$.palette[palette].pagination) === null || _73 === void 0 ? void 0 : _73.outline) === null || _74 === void 0 ? void 0 : _74.hover) === null || _75 === void 0 ? void 0 : _75.font) !== null && _76 !== void 0 ? _76 : theme.$.palette[palette].font};
                    }
                  `
                    : `            
                    color: ${(_80 = (_79 = (_78 = (_77 = theme.$.palette[palette].pagination) === null || _77 === void 0 ? void 0 : _77.outline) === null || _78 === void 0 ? void 0 : _78.disabled) === null || _79 === void 0 ? void 0 : _79.font) !== null && _80 !== void 0 ? _80 : theme.$.color.dynamic.accent};
                    fill: ${(_84 = (_83 = (_82 = (_81 = theme.$.palette[palette].pagination) === null || _81 === void 0 ? void 0 : _81.outline) === null || _82 === void 0 ? void 0 : _82.disabled) === null || _83 === void 0 ? void 0 : _83.font) !== null && _84 !== void 0 ? _84 : theme.$.color.dynamic.accent};
                  `}

              `
                : `
                background: ${(_88 = (_87 = (_86 = (_85 = theme.$.palette[palette].pagination) === null || _85 === void 0 ? void 0 : _85.outline) === null || _86 === void 0 ? void 0 : _86.active) === null || _87 === void 0 ? void 0 : _87.background) !== null && _88 !== void 0 ? _88 : theme.$.palette[palette].main};
                border-color: ${(_92 = (_91 = (_90 = (_89 = theme.$.palette[palette].pagination) === null || _89 === void 0 ? void 0 : _89.outline) === null || _90 === void 0 ? void 0 : _90.active) === null || _91 === void 0 ? void 0 : _91.border) !== null && _92 !== void 0 ? _92 : theme.$.palette[palette].main};
                color: ${(_96 = (_95 = (_94 = (_93 = theme.$.palette[palette].pagination) === null || _93 === void 0 ? void 0 : _93.outline) === null || _94 === void 0 ? void 0 : _94.active) === null || _95 === void 0 ? void 0 : _95.font) !== null && _96 !== void 0 ? _96 : theme.$.palette[palette].font};
                fill: ${(_100 = (_99 = (_98 = (_97 = theme.$.palette[palette].pagination) === null || _97 === void 0 ? void 0 : _97.outline) === null || _98 === void 0 ? void 0 : _98.active) === null || _99 === void 0 ? void 0 : _99.font) !== null && _100 !== void 0 ? _100 : theme.$.palette[palette].font};
              `}
          `
            : `
            ${!isActive
                ? `
                border-color: ${(_104 = (_103 = (_102 = (_101 = theme.$.palette[palette].pagination) === null || _101 === void 0 ? void 0 : _101.soft) === null || _102 === void 0 ? void 0 : _102.outline) === null || _103 === void 0 ? void 0 : _103.border) !== null && _104 !== void 0 ? _104 : theme.$.color.dynamic.accent};

                ${!isDisabled
                    ? `
                    color: ${(_108 = (_107 = (_106 = (_105 = theme.$.palette[palette].pagination) === null || _105 === void 0 ? void 0 : _105.soft) === null || _106 === void 0 ? void 0 : _106.outline) === null || _107 === void 0 ? void 0 : _107.font) !== null && _108 !== void 0 ? _108 : theme.$.color.dynamic.font};
                    fill: ${(_112 = (_111 = (_110 = (_109 = theme.$.palette[palette].pagination) === null || _109 === void 0 ? void 0 : _109.soft) === null || _110 === void 0 ? void 0 : _110.outline) === null || _111 === void 0 ? void 0 : _111.font) !== null && _112 !== void 0 ? _112 : theme.$.color.dynamic.font};

                    &:hover {
                      background: ${(_117 = (_116 = (_115 = (_114 = (_113 = theme.$.palette[palette].pagination) === null || _113 === void 0 ? void 0 : _113.soft) === null || _114 === void 0 ? void 0 : _114.outline) === null || _115 === void 0 ? void 0 : _115.hover) === null || _116 === void 0 ? void 0 : _116.background) !== null && _117 !== void 0 ? _117 : theme.$.palette[palette].soft};
                      border-color: ${(_122 = (_121 = (_120 = (_119 = (_118 = theme.$.palette[palette].pagination) === null || _118 === void 0 ? void 0 : _118.soft) === null || _119 === void 0 ? void 0 : _119.outline) === null || _120 === void 0 ? void 0 : _120.hover) === null || _121 === void 0 ? void 0 : _121.border) !== null && _122 !== void 0 ? _122 : theme.$.palette[palette].soft};
                      color: ${(_127 = (_126 = (_125 = (_124 = (_123 = theme.$.palette[palette].pagination) === null || _123 === void 0 ? void 0 : _123.soft) === null || _124 === void 0 ? void 0 : _124.outline) === null || _125 === void 0 ? void 0 : _125.hover) === null || _126 === void 0 ? void 0 : _126.font) !== null && _127 !== void 0 ? _127 : theme.$.palette[palette].softFont};
                      fill: ${(_132 = (_131 = (_130 = (_129 = (_128 = theme.$.palette[palette].pagination) === null || _128 === void 0 ? void 0 : _128.soft) === null || _129 === void 0 ? void 0 : _129.outline) === null || _130 === void 0 ? void 0 : _130.hover) === null || _131 === void 0 ? void 0 : _131.font) !== null && _132 !== void 0 ? _132 : theme.$.palette[palette].softFont};
                    }
                  `
                    : `            
                    color: ${(_137 = (_136 = (_135 = (_134 = (_133 = theme.$.palette[palette].pagination) === null || _133 === void 0 ? void 0 : _133.soft) === null || _134 === void 0 ? void 0 : _134.outline) === null || _135 === void 0 ? void 0 : _135.disabled) === null || _136 === void 0 ? void 0 : _136.font) !== null && _137 !== void 0 ? _137 : theme.$.color.dynamic.accent};
                    fill: ${(_142 = (_141 = (_140 = (_139 = (_138 = theme.$.palette[palette].pagination) === null || _138 === void 0 ? void 0 : _138.soft) === null || _139 === void 0 ? void 0 : _139.outline) === null || _140 === void 0 ? void 0 : _140.disabled) === null || _141 === void 0 ? void 0 : _141.font) !== null && _142 !== void 0 ? _142 : theme.$.color.dynamic.accent};
                  `}
              `
                : `

                background: ${(_147 = (_146 = (_145 = (_144 = (_143 = theme.$.palette[palette].pagination) === null || _143 === void 0 ? void 0 : _143.soft) === null || _144 === void 0 ? void 0 : _144.outline) === null || _145 === void 0 ? void 0 : _145.active) === null || _146 === void 0 ? void 0 : _146.background) !== null && _147 !== void 0 ? _147 : theme.$.palette[palette].soft};
                border-color: ${(_152 = (_151 = (_150 = (_149 = (_148 = theme.$.palette[palette].pagination) === null || _148 === void 0 ? void 0 : _148.soft) === null || _149 === void 0 ? void 0 : _149.outline) === null || _150 === void 0 ? void 0 : _150.active) === null || _151 === void 0 ? void 0 : _151.border) !== null && _152 !== void 0 ? _152 : theme.$.palette[palette].soft};
                color: ${(_157 = (_156 = (_155 = (_154 = (_153 = theme.$.palette[palette].pagination) === null || _153 === void 0 ? void 0 : _153.soft) === null || _154 === void 0 ? void 0 : _154.outline) === null || _155 === void 0 ? void 0 : _155.active) === null || _156 === void 0 ? void 0 : _156.font) !== null && _157 !== void 0 ? _157 : theme.$.palette[palette].softFont};
                fill: ${(_162 = (_161 = (_160 = (_159 = (_158 = theme.$.palette[palette].pagination) === null || _158 === void 0 ? void 0 : _158.soft) === null || _159 === void 0 ? void 0 : _159.outline) === null || _160 === void 0 ? void 0 : _160.active) === null || _161 === void 0 ? void 0 : _161.font) !== null && _162 !== void 0 ? _162 : theme.$.palette[palette].softFont};
              `}
          `}
      `}
  }
`;
});