@smart-react-components/ui/components/DatePicker/DatePickerHeaderElement.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 Header_1 = __importDefault(require("@smart-react-components/core/Element/Header"));
const styled_components_1 = __importDefault(require("styled-components"));
exports.default = (0, styled_components_1.default)(Header_1.default).attrs({
    getDatePickerSize: (v, t) => `
    padding: ${t.$.size.datePicker[v].headerSpace.y} ${t.$.size.datePicker[v].space.x};

    > span {
      padding-left: ${t.$.size.datePicker[v].headerSpace.x};
    }

    > div {
      > div {
        height: ${t.$.size.datePicker[v].iconSize};
        margin: 0 ${t.$.size.datePicker[v].itemWeekSpace.x};
        width: ${t.$.size.datePicker[v].itemWeekSize};

        > svg {
          width: ${t.$.size.datePicker[v].iconSize};
        }
      }
    }
  `,
})(({ isSoft, palette, theme }) => {
    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;
    return `
  align-items: center;
  border-top-left-radius: ${theme.$.radius.datePicker};
  border-top-right-radius: ${theme.$.radius.datePicker};
  display: flex;
  justify-content: space-between;

  ${!isSoft
        ? `
      background: ${(_c = (_b = (_a = theme.$.palette[palette].datePicker) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.background) !== null && _c !== void 0 ? _c : theme.$.palette[palette].main};
      color: ${(_f = (_e = (_d = theme.$.palette[palette].datePicker) === null || _d === void 0 ? void 0 : _d.header) === null || _e === void 0 ? void 0 : _e.font) !== null && _f !== void 0 ? _f : theme.$.palette[palette].font};
    `
        : `
      background: ${(_k = (_j = (_h = (_g = theme.$.palette[palette].datePicker) === null || _g === void 0 ? void 0 : _g.soft) === null || _h === void 0 ? void 0 : _h.header) === null || _j === void 0 ? void 0 : _j.background) !== null && _k !== void 0 ? _k : theme.$.palette[palette].soft};
      color: ${(_p = (_o = (_m = (_l = theme.$.palette[palette].datePicker) === null || _l === void 0 ? void 0 : _l.soft) === null || _m === void 0 ? void 0 : _m.header) === null || _o === void 0 ? void 0 : _o.background) !== null && _p !== void 0 ? _p : theme.$.palette[palette].softFont};
    `}

  > div {
    align-items: center;
    display: flex;
    justify-content: flex-end;

    > div {
      display: flex;
      justify-content: center;
      position: relative;

      > svg {
        fill: ${!isSoft ? ((_s = (_r = (_q = theme.$.palette[palette].datePicker) === null || _q === void 0 ? void 0 : _q.header) === null || _r === void 0 ? void 0 : _r.icon) !== null && _s !== void 0 ? _s : theme.$.palette[palette].darker) : ((_w = (_v = (_u = (_t = theme.$.palette[palette].datePicker) === null || _t === void 0 ? void 0 : _t.soft) === null || _u === void 0 ? void 0 : _u.header) === null || _v === void 0 ? void 0 : _v.icon) !== null && _w !== void 0 ? _w : theme.$.palette[palette].softDynamicer)};
        position: absolute;
        transition: 150ms ease-in-out;

        &:hover {
          fill: ${!isSoft ? ((_0 = (_z = (_y = (_x = theme.$.palette[palette].datePicker) === null || _x === void 0 ? void 0 : _x.header) === null || _y === void 0 ? void 0 : _y.hover) === null || _z === void 0 ? void 0 : _z.icon) !== null && _0 !== void 0 ? _0 : theme.$.palette[palette].darkest) : ((_5 = (_4 = (_3 = (_2 = (_1 = theme.$.palette[palette].datePicker) === null || _1 === void 0 ? void 0 : _1.soft) === null || _2 === void 0 ? void 0 : _2.header) === null || _3 === void 0 ? void 0 : _3.hover) === null || _4 === void 0 ? void 0 : _4.icon) !== null && _5 !== void 0 ? _5 : theme.$.palette[palette].softDynamicest)};
        }

        &.src-fade-show {
          opacity: 0;
        }

        &.src-fade-show-active {
          opacity: 1;
        }

        &.src-fade-hide {
          opacity: 1;
        }

        &.src-fade-hide-active {
          opacity: 0;
        }
      }
    }
  }
`;
});