@smart-react-components/ui/components/Popover/PopoverElement.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 });
exports.PopoverContent = exports.PopoverHeader = void 0;
const Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const styled_components_1 = __importDefault(require("styled-components"));
const PopoverArrow_1 = __importDefault(require("./PopoverArrow"));
const popover_1 = require("../../util/popover");
exports.PopoverHeader = styled_components_1.default.h4 `
  box-sizing: border-box;
  margin: 0;
`;
exports.PopoverContent = styled_components_1.default.div `
  box-sizing: border-box;
`;
exports.default = (0, styled_components_1.default)(Div_1.default).attrs({
    getPopoverSize: (v, t) => `
    > ${exports.PopoverHeader} {
      font-size: ${t.$.size.popover[v].headerFontSize};
      padding: ${t.$.size.popover[v].headerPadding.y} ${t.$.size.popover[v].headerPadding.x};
    }

    > ${exports.PopoverContent} {
      font-size: ${t.$.size.popover[v].fontSize};
      padding: ${t.$.size.popover[v].padding.y} ${t.$.size.popover[v].padding.x};
    }
  `,
})(({ theme, palette, duration, hasTransition, isSoft }) => {
    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;
    return `
  box-sizing: border-box;
  color: ${(_b = (_a = theme.$.palette[palette].popover) === null || _a === void 0 ? void 0 : _a.font) !== null && _b !== void 0 ? _b : theme.$.color.dynamic.font};
  fill: ${theme.$.color.dynamic.font};
  font-family: ${theme.$.fontFamily.popover};
  position: fixed;
  z-index: ${theme.$.zIndex.popover};

  ${exports.PopoverContent} {
    background: ${(_d = (_c = theme.$.palette[palette].popover) === null || _c === void 0 ? void 0 : _c.background) !== null && _d !== void 0 ? _d : theme.$.color.dynamic.background};
    border: solid 1px ${(_f = (_e = theme.$.palette[palette].popover) === null || _e === void 0 ? void 0 : _e.border) !== null && _f !== void 0 ? _f : theme.$.color.dynamic.accent};
  }

  ${exports.PopoverHeader} {
    ${!isSoft
        ? `
        background: ${(_j = (_h = (_g = theme.$.palette[palette].popover) === null || _g === void 0 ? void 0 : _g.header) === null || _h === void 0 ? void 0 : _h.background) !== null && _j !== void 0 ? _j : theme.$.palette[palette].main};
        border: solid 1px ${(_m = (_l = (_k = theme.$.palette[palette].popover) === null || _k === void 0 ? void 0 : _k.header) === null || _l === void 0 ? void 0 : _l.border) !== null && _m !== void 0 ? _m : theme.$.palette[palette].dynamicer};
        color: ${(_q = (_p = (_o = theme.$.palette[palette].popover) === null || _o === void 0 ? void 0 : _o.header) === null || _p === void 0 ? void 0 : _p.font) !== null && _q !== void 0 ? _q : theme.$.palette[palette].font};
        fill: ${(_t = (_s = (_r = theme.$.palette[palette].popover) === null || _r === void 0 ? void 0 : _r.header) === null || _s === void 0 ? void 0 : _s.font) !== null && _t !== void 0 ? _t : theme.$.palette[palette].font};

        ~ ${PopoverArrow_1.default}[data-arrow-header="true"] {
          fill: ${(_w = (_v = (_u = theme.$.palette[palette].popover) === null || _u === void 0 ? void 0 : _u.header) === null || _v === void 0 ? void 0 : _v.background) !== null && _w !== void 0 ? _w : theme.$.palette[palette].main};
          stroke: ${(_z = (_y = (_x = theme.$.palette[palette].popover) === null || _x === void 0 ? void 0 : _x.header) === null || _y === void 0 ? void 0 : _y.border) !== null && _z !== void 0 ? _z : theme.$.palette[palette].dynamicer};
        }
      `
        : `
        background: ${(_3 = (_2 = (_1 = (_0 = theme.$.palette[palette].popover) === null || _0 === void 0 ? void 0 : _0.soft) === null || _1 === void 0 ? void 0 : _1.header) === null || _2 === void 0 ? void 0 : _2.background) !== null && _3 !== void 0 ? _3 : theme.$.palette[palette].soft};
        border: solid 1px ${(_7 = (_6 = (_5 = (_4 = theme.$.palette[palette].popover) === null || _4 === void 0 ? void 0 : _4.soft) === null || _5 === void 0 ? void 0 : _5.header) === null || _6 === void 0 ? void 0 : _6.border) !== null && _7 !== void 0 ? _7 : theme.$.palette[palette].softDynamicer};
        color: ${(_11 = (_10 = (_9 = (_8 = theme.$.palette[palette].popover) === null || _8 === void 0 ? void 0 : _8.soft) === null || _9 === void 0 ? void 0 : _9.header) === null || _10 === void 0 ? void 0 : _10.font) !== null && _11 !== void 0 ? _11 : theme.$.palette[palette].softFont};
        fill: ${(_15 = (_14 = (_13 = (_12 = theme.$.palette[palette].popover) === null || _12 === void 0 ? void 0 : _12.soft) === null || _13 === void 0 ? void 0 : _13.header) === null || _14 === void 0 ? void 0 : _14.font) !== null && _15 !== void 0 ? _15 : theme.$.palette[palette].softFont};

        ~ ${PopoverArrow_1.default}[data-arrow-header="true"] {
          fill: ${(_19 = (_18 = (_17 = (_16 = theme.$.palette[palette].popover) === null || _16 === void 0 ? void 0 : _16.soft) === null || _17 === void 0 ? void 0 : _17.header) === null || _18 === void 0 ? void 0 : _18.background) !== null && _19 !== void 0 ? _19 : theme.$.palette[palette].soft};
          stroke: ${(_23 = (_22 = (_21 = (_20 = theme.$.palette[palette].popover) === null || _20 === void 0 ? void 0 : _20.soft) === null || _21 === void 0 ? void 0 : _21.header) === null || _22 === void 0 ? void 0 : _22.border) !== null && _23 !== void 0 ? _23 : theme.$.palette[palette].softDynamicer};
        }
      `}

    + ${exports.PopoverContent} {
      border-top: 0;
    }
  }

  ${PopoverArrow_1.default}[data-arrow-header="false"] {
    fill: ${(_25 = (_24 = theme.$.palette[palette].popover) === null || _24 === void 0 ? void 0 : _24.background) !== null && _25 !== void 0 ? _25 : theme.$.color.dynamic.background};
    stroke: ${(_27 = (_26 = theme.$.palette[palette].popover) === null || _26 === void 0 ? void 0 : _26.border) !== null && _27 !== void 0 ? _27 : theme.$.color.dynamic.accent};
  }

  ${hasTransition ? (0, popover_1.generateCSSTransitionClasses)('popover', duration) : ''}
`;
});