@smart-react-components/ui/components/Form/FormInlineLabel.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 Label_1 = __importDefault(require("@smart-react-components/core/Element/Label"));
const styled_components_1 = __importDefault(require("styled-components"));
const types_1 = require("../../types");
const css_1 = require("../../util/css");
const form_1 = require("../../util/form");
const props_1 = require("../../util/props");
exports.default = (0, styled_components_1.default)(Label_1.default).attrs(({ isBlock, labelPosition }) => ({
    getFormSize: (v, t) => `
    ${!isBlock
        ? `
        margin: ${t.$.size.form.inlineLabel[v].margin.y} ${t.$.size.form.inlineLabel[v].margin.x};
      `
        : `
        margin-bottom: ${t.$.size.form.inlineLabel[v].margin.x};
      `}

    > span {
      font-size: ${t.$.size.form.inlineLabel[v].fontSize};
      margin-${types_1.OrderPosition[(0, props_1.getReverseOrderPosition)(labelPosition)].toLowerCase()}: ${(0, css_1.toCSSValue)(t.$.size.form.inlineLabel[v].margin.x)(form_1.calculateFormLabelMarginX)};
    }
  `,
}))(({ theme, palette, isBlock, isDisabled, labelPosition }) => {
    var _a, _b, _c;
    return `
  align-items: center;
  cursor: ${theme.$.cursor.formInlineLabel};
  display: ${isBlock ? 'flex' : 'inline-flex'};
  justify-content: space-between;
  position: relative;

  > div {
    flex: 0 0 auto;
  }

  > span {
    color: ${(_c = (_b = (_a = theme.$.palette[palette].form) === null || _a === void 0 ? void 0 : _a.inlineLabel) === null || _b === void 0 ? void 0 : _b.font) !== null && _c !== void 0 ? _c : theme.$.color.dynamic.bodyFont};
    display: inline-flex;
    flex: 1 1 auto;
    font-family: ${theme.$.fontFamily.form};
    word-break: break-word;
    word-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
  }

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

  ${labelPosition === types_1.OrderPosition.LEFT
        ? `
      > span {
        order: 1;
      }

      > div {
        order: 2;
      }
    `
        : ''}
`;
});