@kubit-ui-web/react-components/dist/cjs/components/input/input.styled.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.InputWrapperStyled = exports.InputStyled = exports.LeftContentWrapperStyled = exports.RightContentWrapperStyled = exports.MessagesAndCounterWrapperStyled = exports.BottomContentWrapperStyled = exports.TopContentWrapperStyled = exports.InputIconStyled = exports.InputIconContainerStyled = exports.LoaderWrapperStyled = exports.TextCounterStyled = exports.HelpMessageWrapperStyled = exports.ErrorIconWrapperStyled = exports.InputErrorStyled = exports.InputErrorAndHelpMessageWrapperStyled = exports.InfoAssociatedButtonStyled = exports.InfoAssociatedTextAndDecorativeStyled = exports.InformationAssociatedWrapperStyled = exports.TitleAndAdditionalInfoWrapperStyled = exports.AdditionalInfoWrapperStyled = exports.LabelWrapperStyled = exports.TitleWrapperStyled = void 0;
const styled_components_1 = __importStar(require("styled-components"));
const getStyles_1 = require("../../utils/getStyles/getStyles");
// mixins
const input_mixin_1 = require("../../styles/mixins/input.mixin");
const inputTheme_1 = require("./types/inputTheme");
// Component styles
exports.TitleWrapperStyled = styled_components_1.default.div.withConfig({
    shouldForwardProp: () => true,
}) `
  margin-bottom: ${({ $titleStyles }) => $titleStyles?.titleContainer?.margin_bottom};
`;
exports.LabelWrapperStyled = styled_components_1.default.div `
  ${input_mixin_1.mapLabelTypeStyles}
`;
exports.AdditionalInfoWrapperStyled = styled_components_1.default.div `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.additionalInfoContainer)};
`;
exports.TitleAndAdditionalInfoWrapperStyled = styled_components_1.default.div `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.titleAndAdditionalInfoContainer)};
`;
exports.InformationAssociatedWrapperStyled = styled_components_1.default.div `
  flex-direction: ${({ iconPosition }) => iconPosition === inputTheme_1.InputIconPosition.RIGHT ? 'row-reverse' : 'row'};
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.informationAssociatedContainer)};
`;
exports.InfoAssociatedTextAndDecorativeStyled = styled_components_1.default.div `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.informationAssociatedTextAndDecorativeContainer)};
`;
exports.InfoAssociatedButtonStyled = styled_components_1.default.div ``;
exports.InputErrorAndHelpMessageWrapperStyled = styled_components_1.default.div `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.errorAndHelpMessageContainer)};
`;
exports.InputErrorStyled = styled_components_1.default.div `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.errorMessageContainer)};

  p {
    display: flex;
  }
`;
exports.ErrorIconWrapperStyled = styled_components_1.default.span `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.errorMessageIconContainer)};
`;
exports.HelpMessageWrapperStyled = styled_components_1.default.div `
  ${({ align }) => !align &&
    (0, styled_components_1.css) `
      margin-left: auto;
    `};
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.helpMessageContainer)};
`;
exports.TextCounterStyled = styled_components_1.default.div `
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.textCounterContainer)};
`;
exports.LoaderWrapperStyled = styled_components_1.default.div `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.loaderContainer)};
`;
exports.InputIconContainerStyled = styled_components_1.default.div `
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: ${({ $pointerEvents }) => ($pointerEvents ? 'auto' : 'none')};
  ${({ inputIconContainerStyles }) => (0, getStyles_1.getStyles)(inputIconContainerStyles)};
`;
exports.InputIconStyled = styled_components_1.default.div `
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: ${({ $pointerEvents }) => ($pointerEvents ? 'auto' : 'none')};
  ${({ iconPosition, styles }) => (0, styled_components_1.css) `
    ${(0, getStyles_1.getStyles)(iconPosition === inputTheme_1.InputIconPosition.RIGHT
    ? styles?.inputIconContainerRight
    : styles?.inputIconContainer)};
  `}
`;
// Input Styles
exports.TopContentWrapperStyled = styled_components_1.default.div `
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.topContentContainer)};
`;
exports.BottomContentWrapperStyled = styled_components_1.default.div `
  ${({ isExpanded }) => isExpanded &&
    (0, styled_components_1.css) `
      display: none;
    `}
`;
exports.MessagesAndCounterWrapperStyled = styled_components_1.default.div `
  display: flex;
  justify-content: space-between;
`;
exports.RightContentWrapperStyled = styled_components_1.default.div ``;
exports.LeftContentWrapperStyled = styled_components_1.default.div ``;
exports.InputStyled = styled_components_1.default.input `
  &::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  &::-ms-reveal {
    display: none;
  }

  width: 100%;
  box-sizing: border-box;
  ${input_mixin_1.mapBaseStyles}

  &:not(:placeholder-shown) {
    ${({ styles }) => (0, input_mixin_1.mapVariableStyles)(styles?.[inputTheme_1.InputState.FILLED])}
    ${({ icon, iconPosition, leftIcon, rightIcon, styles, state }) => icon
    ? (0, input_mixin_1.getIconPaddingDeprecated)(iconPosition, styles?.[state])
    : (0, input_mixin_1.getIconPadding)(!!leftIcon?.icon, !!rightIcon?.icon, styles?.[state])}
  }

  &:placeholder-shown {
    ${({ styles }) => (0, input_mixin_1.mapVariableStyles)(styles?.[inputTheme_1.InputState.EMPTY])}
    ${({ icon, iconPosition, leftIcon, rightIcon, styles, state }) => icon
    ? (0, input_mixin_1.getIconPaddingDeprecated)(iconPosition, styles?.[state])
    : (0, input_mixin_1.getIconPadding)(!!leftIcon?.icon, !!rightIcon?.icon, styles?.[state])}
  }

  &:disabled {
    ${({ styles, state }) => (0, input_mixin_1.mapVariableStyles)(styles?.[state])}
  }

  &:is([aria-invalid='true']) {
    ${({ styles, state }) => (0, input_mixin_1.mapVariableStyles)(styles?.[state])}
  }

  &:focus {
    ${({ styles, state }) => (0, input_mixin_1.mapVariableStyles)(styles?.[state])}
  }

  &:focus-visible {
    ${({ styles, state }) => styles?.[state]?.focusVisibleCustom
    ? (0, getStyles_1.getStyles)(styles?.[state]?.focusVisibleCustom)
    : input_mixin_1.inputFocusWidthMixin}
  }

  &[data-truncate='true'] {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  ${({ cursorPointer }) => cursorPointer &&
    `
    cursor: ${cursorPointer};
  `}

  box-shadow: ${({ styles, state }) => styles?.[state]?.inputContainer?.box_shadow};
  ${({ theme: { MEDIA_QUERIES: { onlyDesktop, onlyTablet, onlyMobile }, }, styles, state, }) => (0, styled_components_1.css) `
    ${onlyDesktop} {
      caret-color: ${styles?.[state]?.inputCaretColor?.DESKTOP};
    }
    ${onlyTablet} {
      caret-color: ${styles?.[state]?.inputCaretColor?.TABLET};
    }
    ${onlyMobile} {
      caret-color: ${styles?.[state]?.inputCaretColor?.MOBILE};
    }
  `};
`;
exports.InputWrapperStyled = styled_components_1.default.div `
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  ${({ styles }) => (0, getStyles_1.getStyles)(styles?.inputWrapperContainer)};
  /* to avoid "-internal-autofill-selected" style to be applied */
  input:-webkit-autofill,
  input:-webkit-autofill:focus {
    transition:
      background-color 600000s 0s,
      color 600000s 0s;
  }
  /* Removing input background colour for autocomplete when it is disabled */
  input:-webkit-autofill:disabled {
    -webkit-text-fill-color: ${props => props.styles?.input?.color};
    -webkit-box-shadow: 0 0 0px 1000px ${props => props.styles?.inputContainer?.background_color}
      inset;
    transition: background-color 5000s ease-in-out 0s;
  }
`;
//# sourceMappingURL=input.styled.js.map