@antscorp/antsomi-ui 1.3.3-beta.35 → 1.3.3-beta.37

package/es/components/atoms/InputDynamic/styled.js

@@ -1,19 +1,281 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
 // Libraries
 import styled from 'styled-components';
 import { Input } from '../Input/Input';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export var WrapperInputStyle = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  position: relative;\n\n  .input-wrapper-outter {\n    position: relative;\n    max-width: 100%;\n    min-height: 22px;\n    max-height: 6rem;\n    overflow: auto;\n    padding: 5px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .customize-antsomi-profile {\n    position: absolute;\n    font-size: 20px;\n    right: 4px;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: rgb(0, 94, 184);\n  }\n\n  .styles-input-wrapper {\n    border-bottom: 1px solid ", " !important;\n    :hover {\n      cursor: text;\n      background-color: ", ";\n      border-bottom: 1px solid ", ";\n    }\n    :focus-within {\n      background-color: ", ";\n      border-bottom: 1px solid rgb(0, 94, 184);\n    }\n    :active {\n      background-color: ", ";\n      border-bottom: 1px solid rgb(0, 94, 184);\n    }\n  }\n\n  .input-error {\n    border-bottom-color: rgb(239, 51, 64);\n  }\n\n  .customize-antsomi-profile-outter {\n    position: absolute;\n    font-size: 20px;\n    right: 2.8rem;\n    top: 2.3rem;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: ", ";\n  }\n\n  .input-personal {\n    padding: 0px 4px;\n    padding-right: 32px;\n    outline: none;\n    overflow-wrap: normal;\n    overflow: hidden;\n    text-overflow: unset;\n    white-space: normal;\n    // display: inline-block;\n\n    .detect-url {\n      background-color: #e8feca;\n      display: inline;\n      position: relative;\n      cursor: pointer;\n    }\n  }\n  /*\n  $base-color: ", ";\n  $bg-base-color: #fff;\n  $border-base-color: ", ";\n  $bg-btn-base-color: #f4f6f8; */\n\n  .antsomi-wrapper-personalization {\n    width: 100%;\n    height: 100%;\n    background: $bg-base-color;\n    border: 1px solid $border-base-color;\n    border-radius: ", "px;\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    font-family: Roboto, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;\n    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n    .header {\n      padding: 13px 20px;\n      position: relative;\n\n      .title {\n        font-size: 20px;\n        font-weight: bold;\n        color: $base-color;\n      }\n\n      &:before {\n        content: '';\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        height: 15px;\n        width: 95%;\n        border-bottom: 1px solid $border-base-color;\n      }\n    }\n\n    .body {\n      overflow: auto;\n      flex-grow: 1;\n      padding: 0 5px;\n\n      table {\n        width: 100%;\n        height: 100%;\n        table-layout: fixed;\n        border-collapse: collapse;\n        border-spacing: 0;\n        th,\n        td {\n          text-align: left;\n          padding: 0 15px;\n        }\n      }\n    }\n\n    .footer {\n      display: flex;\n      padding: 15px 25px;\n      justify-content: flex-end;\n    }\n  }\n\n  .btn {\n    min-width: 100px;\n    min-height: 40px;\n    border-radius: ", "px;\n    outline: none;\n    border: none;\n    cursor: pointer;\n\n    &:focus {\n      outline: none !important;\n    }\n  }\n\n  .group-btn {\n    width: 222px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .btn-default {\n    background-color: $bg-btn-base-color;\n    color: $base-color;\n    border: 1px solid #d7dfe8;\n\n    &:hover {\n      background-color: #e3e9ef;\n    }\n  }\n\n  .btn-blue {\n    background-color: $base-color;\n    color: $bg-base-color;\n    border: 1px solid #707070;\n    opacity: 0.9;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  .input-outline {\n    border-top-style: hidden;\n    border-right-style: hidden;\n    border-left-style: hidden;\n    height: 27px;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.4);\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .insert-word {\n    padding: 5px 8px;\n    color: white;\n    border: 1px solid;\n    border-radius: 20px;\n    height: 30px;\n    cursor: pointer;\n    line-height: 1px;\n    background: #bbefbe;\n\n    &.blue {\n      background: #3c39ba;\n    }\n\n    &.orange {\n      background: #fbac00;\n    }\n\n    &.violet-pc {\n      background: #6750a7;\n    }\n\n    &.disabled {\n      background: #ccc;\n    }\n    &.custom {\n      background: #bbefbe;\n      // border: 1px solid #BBEFBE;\n    }\n\n    em {\n      color: white;\n      font-style: normal;\n      font-size: 13px;\n      opacity: 0;\n      user-select: none;\n    }\n\n    &:hover {\n      em {\n        opacity: 1;\n      }\n    }\n  }\n"], ["\n  color: ", ";\n  position: relative;\n\n  .input-wrapper-outter {\n    position: relative;\n    max-width: 100%;\n    min-height: 22px;\n    max-height: 6rem;\n    overflow: auto;\n    padding: 5px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .customize-antsomi-profile {\n    position: absolute;\n    font-size: 20px;\n    right: 4px;\n    top: 50%;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: rgb(0, 94, 184);\n  }\n\n  .styles-input-wrapper {\n    border-bottom: 1px solid ", " !important;\n    :hover {\n      cursor: text;\n      background-color: ", ";\n      border-bottom: 1px solid ", ";\n    }\n    :focus-within {\n      background-color: ", ";\n      border-bottom: 1px solid rgb(0, 94, 184);\n    }\n    :active {\n      background-color: ", ";\n      border-bottom: 1px solid rgb(0, 94, 184);\n    }\n  }\n\n  .input-error {\n    border-bottom-color: rgb(239, 51, 64);\n  }\n\n  .customize-antsomi-profile-outter {\n    position: absolute;\n    font-size: 20px;\n    right: 2.8rem;\n    top: 2.3rem;\n    transform: translateY(-50%);\n    cursor: pointer;\n    color: ", ";\n  }\n\n  .input-personal {\n    padding: 0px 4px;\n    padding-right: 32px;\n    outline: none;\n    overflow-wrap: normal;\n    overflow: hidden;\n    text-overflow: unset;\n    white-space: normal;\n    // display: inline-block;\n\n    .detect-url {\n      background-color: #e8feca;\n      display: inline;\n      position: relative;\n      cursor: pointer;\n    }\n  }\n  /*\n  $base-color: ", ";\n  $bg-base-color: #fff;\n  $border-base-color: ", ";\n  $bg-btn-base-color: #f4f6f8; */\n\n  .antsomi-wrapper-personalization {\n    width: 100%;\n    height: 100%;\n    background: $bg-base-color;\n    border: 1px solid $border-base-color;\n    border-radius: ", "px;\n    display: flex;\n    flex-direction: column;\n    font-size: 14px;\n    font-family: Roboto, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;\n    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);\n    .header {\n      padding: 13px 20px;\n      position: relative;\n\n      .title {\n        font-size: 20px;\n        font-weight: bold;\n        color: $base-color;\n      }\n\n      &:before {\n        content: '';\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        height: 15px;\n        width: 95%;\n        border-bottom: 1px solid $border-base-color;\n      }\n    }\n\n    .body {\n      overflow: auto;\n      flex-grow: 1;\n      padding: 0 5px;\n\n      table {\n        width: 100%;\n        height: 100%;\n        table-layout: fixed;\n        border-collapse: collapse;\n        border-spacing: 0;\n        th,\n        td {\n          text-align: left;\n          padding: 0 15px;\n        }\n      }\n    }\n\n    .footer {\n      display: flex;\n      padding: 15px 25px;\n      justify-content: flex-end;\n    }\n  }\n\n  .btn {\n    min-width: 100px;\n    min-height: 40px;\n    border-radius: ", "px;\n    outline: none;\n    border: none;\n    cursor: pointer;\n\n    &:focus {\n      outline: none !important;\n    }\n  }\n\n  .group-btn {\n    width: 222px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .btn-default {\n    background-color: $bg-btn-base-color;\n    color: $base-color;\n    border: 1px solid #d7dfe8;\n\n    &:hover {\n      background-color: #e3e9ef;\n    }\n  }\n\n  .btn-blue {\n    background-color: $base-color;\n    color: $bg-base-color;\n    border: 1px solid #707070;\n    opacity: 0.9;\n\n    &:hover {\n      opacity: 1;\n    }\n  }\n\n  .input-outline {\n    border-top-style: hidden;\n    border-right-style: hidden;\n    border-left-style: hidden;\n    height: 27px;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.4);\n\n    &:focus {\n      outline: none;\n    }\n  }\n\n  .insert-word {\n    padding: 5px 8px;\n    color: white;\n    border: 1px solid;\n    border-radius: 20px;\n    height: 30px;\n    cursor: pointer;\n    line-height: 1px;\n    background: #bbefbe;\n\n    &.blue {\n      background: #3c39ba;\n    }\n\n    &.orange {\n      background: #fbac00;\n    }\n\n    &.violet-pc {\n      background: #6750a7;\n    }\n\n    &.disabled {\n      background: #ccc;\n    }\n    &.custom {\n      background: #bbefbe;\n      // border: 1px solid #BBEFBE;\n    }\n\n    em {\n      color: white;\n      font-style: normal;\n      font-size: 13px;\n      opacity: 0;\n      user-select: none;\n    }\n\n    &:hover {\n      em {\n        opacity: 1;\n      }\n    }\n  }\n"])), (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText, (_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1, (_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue1, (_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue, (_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1, (_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw0, (_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw0, (_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue7, (_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue7, (_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw3_5, (_l = THEME.token) === null || _l === void 0 ? void 0 : _l.borderRadius, (_m = THEME.token) === null || _m === void 0 ? void 0 : _m.borderRadius);
-export var SpanIcon = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  font-size: 20px;\n"], ["\n  ", "\n  font-size: 20px;\n"])), function (_a) {
-    var isDisabled = _a.isDisabled;
-    return isDisabled && "cursor: not-allowed !important; opacity: 0.5;";
-});
-export var InputWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  .input__wrapper {\n    display: flex;\n    align-items: center;\n\n    div.--default {\n      min-width: 120px;\n    }\n  }\n"], ["\n  .input__wrapper {\n    display: flex;\n    align-items: center;\n\n    div.--default {\n      min-width: 120px;\n    }\n  }\n"])));
-export var InputShortLink = styled(Input)(templateObject_4 || (templateObject_4 = __makeTemplateObject([""], [""])));
-export var TooltipHover = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: fixed;\n  left: ", ";\n  top: ", ";\n\n  display: ", ";\n  justify-content: center;\n  align-items: center;\n\n  background: rgba(0, 0, 0, 0.62);\n  transition: opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n    transform 124ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  color: #fff;\n  font-size: 12px;\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n    0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  height: 24px;\n  width: auto;\n  z-index: 999;\n  padding: 5px 10px;\n  user-select: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  box-sizing: border-box;\n"], ["\n  position: fixed;\n  left: ", ";\n  top: ", ";\n\n  display: ", ";\n  justify-content: center;\n  align-items: center;\n\n  background: rgba(0, 0, 0, 0.62);\n  transition: opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n    transform 124ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  color: #fff;\n  font-size: 12px;\n  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),\n    0px 3px 14px 2px rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  height: 24px;\n  width: auto;\n  z-index: 999;\n  padding: 5px 10px;\n  user-select: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  box-sizing: border-box;\n"])), function (props) { return "".concat(props.left, "px"); }, function (props) { return "".concat(props.top, "px"); }, function (props) { return (props.isShow ? 'flex' : 'none'); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
+export const WrapperInputStyle = styled.div `
+  color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.colorText};
+  position: relative;
+
+  .input-wrapper-outter {
+    position: relative;
+    max-width: 100%;
+    min-height: 22px;
+    max-height: 6rem;
+    overflow: auto;
+    padding: 5px;
+    border-bottom: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue1};
+  }
+
+  .customize-antsomi-profile {
+    position: absolute;
+    font-size: 20px;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: rgb(0, 94, 184);
+  }
+
+  .styles-input-wrapper {
+    border-bottom: 1px solid ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue1} !important;
+    :hover {
+      cursor: text;
+      background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue};
+      border-bottom: 1px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue1};
+    }
+    :focus-within {
+      background-color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.bw0};
+      border-bottom: 1px solid rgb(0, 94, 184);
+    }
+    :active {
+      background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.bw0};
+      border-bottom: 1px solid rgb(0, 94, 184);
+    }
+  }
+
+  .input-error {
+    border-bottom-color: rgb(239, 51, 64);
+  }
+
+  .customize-antsomi-profile-outter {
+    position: absolute;
+    font-size: 20px;
+    right: 2.8rem;
+    top: 2.3rem;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue7};
+  }
+
+  .input-personal {
+    padding: 0px 4px;
+    padding-right: 32px;
+    outline: none;
+    overflow-wrap: normal;
+    overflow: hidden;
+    text-overflow: unset;
+    white-space: normal;
+    // display: inline-block;
+
+    .detect-url {
+      background-color: #e8feca;
+      display: inline;
+      position: relative;
+      cursor: pointer;
+    }
+  }
+  /*
+  $base-color: ${(_j = THEME.token) === null || _j === void 0 ? void 0 : _j.blue7};
+  $bg-base-color: #fff;
+  $border-base-color: ${(_k = THEME.token) === null || _k === void 0 ? void 0 : _k.bw3_5};
+  $bg-btn-base-color: #f4f6f8; */
+
+  .antsomi-wrapper-personalization {
+    width: 100%;
+    height: 100%;
+    background: $bg-base-color;
+    border: 1px solid $border-base-color;
+    border-radius: ${(_l = THEME.token) === null || _l === void 0 ? void 0 : _l.borderRadius}px;
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    font-family: Roboto, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    .header {
+      padding: 13px 20px;
+      position: relative;
+
+      .title {
+        font-size: 20px;
+        font-weight: bold;
+        color: $base-color;
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 15px;
+        width: 95%;
+        border-bottom: 1px solid $border-base-color;
+      }
+    }
+
+    .body {
+      overflow: auto;
+      flex-grow: 1;
+      padding: 0 5px;
+
+      table {
+        width: 100%;
+        height: 100%;
+        table-layout: fixed;
+        border-collapse: collapse;
+        border-spacing: 0;
+        th,
+        td {
+          text-align: left;
+          padding: 0 15px;
+        }
+      }
+    }
+
+    .footer {
+      display: flex;
+      padding: 15px 25px;
+      justify-content: flex-end;
+    }
+  }
+
+  .btn {
+    min-width: 100px;
+    min-height: 40px;
+    border-radius: ${(_m = THEME.token) === null || _m === void 0 ? void 0 : _m.borderRadius}px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+
+    &:focus {
+      outline: none !important;
+    }
+  }
+
+  .group-btn {
+    width: 222px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .btn-default {
+    background-color: $bg-btn-base-color;
+    color: $base-color;
+    border: 1px solid #d7dfe8;
+
+    &:hover {
+      background-color: #e3e9ef;
+    }
+  }
+
+  .btn-blue {
+    background-color: $base-color;
+    color: $bg-base-color;
+    border: 1px solid #707070;
+    opacity: 0.9;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .input-outline {
+    border-top-style: hidden;
+    border-right-style: hidden;
+    border-left-style: hidden;
+    height: 27px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .insert-word {
+    padding: 5px 8px;
+    color: white;
+    border: 1px solid;
+    border-radius: 20px;
+    height: 30px;
+    cursor: pointer;
+    line-height: 1px;
+    background: #bbefbe;
+
+    &.blue {
+      background: #3c39ba;
+    }
+
+    &.orange {
+      background: #fbac00;
+    }
+
+    &.violet-pc {
+      background: #6750a7;
+    }
+
+    &.disabled {
+      background: #ccc;
+    }
+    &.custom {
+      background: #bbefbe;
+      // border: 1px solid #BBEFBE;
+    }
+
+    em {
+      color: white;
+      font-style: normal;
+      font-size: 13px;
+      opacity: 0;
+      user-select: none;
+    }
+
+    &:hover {
+      em {
+        opacity: 1;
+      }
+    }
+  }
+`;
+export const SpanIcon = styled.span `
+  ${({ isDisabled }) => isDisabled && `cursor: not-allowed !important; opacity: 0.5;`}
+  font-size: 20px;
+`;
+export const InputWrapper = styled.div `
+  .input__wrapper {
+    display: flex;
+    align-items: center;
+
+    div.--default {
+      min-width: 120px;
+    }
+  }
+`;
+export const InputShortLink = styled(Input) ``;
+export const TooltipHover = styled.div `
+  position: fixed;
+  left: ${props => `${props.left}px`};
+  top: ${props => `${props.top}px`};
+
+  display: ${props => (props.isShow ? 'flex' : 'none')};
+  justify-content: center;
+  align-items: center;
+
+  background: rgba(0, 0, 0, 0.62);
+  transition: opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 124ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  color: #fff;
+  font-size: 12px;
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  height: 24px;
+  width: auto;
+  z-index: 999;
+  padding: 5px 10px;
+  user-select: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  box-sizing: border-box;
+`;