@smart-react-components/ui/components/ProgressBar/ProgressBarElement.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.Percentage = exports.Bar = void 0;
const Div_1 = __importDefault(require("@smart-react-components/core/Element/Div"));
const color_1 = require("@smart-react-components/core/util/color");
const styled_components_1 = __importDefault(require("styled-components"));
exports.Bar = styled_components_1.default.div `
  align-items: center;
  display: flex;
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
`;
exports.Percentage = styled_components_1.default.div `
  flex: 0 0 auto;
  position: relative;
`;
exports.default = (0, styled_components_1.default)(Div_1.default)(({ theme, hasStripedAnimation, height, isFilled, isNested, isStriped, palette, stripedAnimationDuration, transitionDuration, transitionTimingFunction }) => {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
    return `
  align-items: center;
  color: ${(_b = (_a = theme.$.palette[palette].progressBar) === null || _a === void 0 ? void 0 : _a.background) !== null && _b !== void 0 ? _b : theme.$.palette[palette].main};
  display: flex;
  fill: ${(_d = (_c = theme.$.palette[palette].progressBar) === null || _c === void 0 ? void 0 : _c.background) !== null && _d !== void 0 ? _d : theme.$.palette[palette].main};
  overflow: hidden;
  position: relative;

  ${exports.Bar} {
    background: ${(_f = (_e = theme.$.palette[palette].progressBar) === null || _e === void 0 ? void 0 : _e.background) !== null && _f !== void 0 ? _f : theme.$.palette[palette].main};
    color: ${(_h = (_g = theme.$.palette[palette].progressBar) === null || _g === void 0 ? void 0 : _g.font) !== null && _h !== void 0 ? _h : theme.$.palette[palette].font};
    fill: ${(_k = (_j = theme.$.palette[palette].progressBar) === null || _j === void 0 ? void 0 : _j.font) !== null && _k !== void 0 ? _k : theme.$.palette[palette].font};
    transition: width ${transitionDuration}ms 0s ${transitionTimingFunction};

    ${isNested
        ? `
        background: ${((_m = (_l = theme.$.palette[palette].progressBar) === null || _l === void 0 ? void 0 : _l.nested) === null || _m === void 0 ? void 0 : _m.background) ? (_p = (_o = theme.$.palette[palette].progressBar) === null || _o === void 0 ? void 0 : _o.nested) === null || _p === void 0 ? void 0 : _p.background : (0, color_1.getColor)(theme.$.color.light.background).alpha(.3).rgb().toString()};
      `
        : `
        border-radius: .125rem;
      `}
  }

  ${isFilled
        ? `
      background: ${(_s = (_r = (_q = theme.$.palette[palette].progressBar) === null || _q === void 0 ? void 0 : _q.filled) === null || _r === void 0 ? void 0 : _r.background) !== null && _s !== void 0 ? _s : theme.$.color.dynamic.gray};
    `
        : ''}

  ${isNested
        ? `
      flex: 1 1 auto;
    `
        : `
      border-radius: .125rem;
    `}

  ${isStriped
        ? `
      &,
      ${exports.Bar} {
        background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
        background-size: ${height} ${height};
      }

      ${hasStripedAnimation
            ? `
          &,
          ${exports.Bar} {
            animation: src-progress-bar-stripes ${stripedAnimationDuration}ms 0s ${transitionTimingFunction} infinite;
          }

          @keyframes src-progress-bar-stripes {
            from {
              background-position: ${height} 0;
            }
              
            to {
              background-position: 0 0;
            }
          }
        `
            : ''}
    `
        : ''}
`;
});