@micromerce/formbuilder-react 1.0.651 → 1.0.656

package/dist/components/Checkbox/Checkbox.module.scss

@@ -0,0 +1,10 @@
+.checkbox-container {
+  all: unset;
+  width: fit-content;
+  padding: 6.5px 9px !important;
+
+  &:hover {
+    border: none;
+    outline: none;
+  }
+}

package/dist/components/FormBuilder/FormBuilder.module.scss

@@ -0,0 +1,94 @@
+.hasSubmenu {
+  padding: 0 !important;
+}
+
+.form-builder-container {
+  font-family: 'Roboto', sans-serif;
+  background-color: white;
+  z-index: 9;
+  padding: 0 20px;
+  
+  @media screen and (max-width: 767px) {
+    padding: 0 40px;
+  }
+
+  *:not(i) {
+    font-family: inherit;
+  }
+
+  .required-message {
+    display: block;
+    font-size: 12px;
+    padding-top: 15px;
+    padding-bottom: 10px;
+    color: rgba(0,0,0,.54);
+  }
+
+  .xhtml-form-button {
+    min-width: 40px;
+    width: fit-content;
+    color: #4a95d0;
+    background-color: #fff;
+  
+    padding: 3px 8px 3px 5px;
+    box-sizing: border-box;
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    font-size: 14px;
+    font-weight: 400;
+    border-radius: 4px;
+    border: 1px solid #4a95d0;
+  
+    cursor: pointer;
+    margin: 0;
+    margin-bottom: 2px;
+    display: inline-flex;
+    outline: 0;
+    position: relative;
+    align-items: center;
+    user-select: none;
+    vertical-align: middle;
+    -moz-appearance: none;
+    justify-content: center;
+    text-decoration: none;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+  
+    svg {
+      fill: #4a95d0;
+      transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    }
+  
+    &:hover {
+      color: #fff;
+      background-color: #4a95d0;
+      svg {
+        fill: #fff;
+      }
+    }
+  
+    &.remove-item {
+      width: 40px;
+      height: 40px;
+      padding: 0;
+      background: transparent;
+      box-shadow: none;
+      margin-top: -5px !important;
+      svg {
+        font-size: 16px;
+        padding: 0 2px;
+        fill: rgba(0,0,0,.54);
+        transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+      }
+      &:hover {
+        background: #F0F0F0;
+        svg {
+          fill: #EB5757;
+        }
+      }
+      @media screen and (min-width: 768px) {
+        margin-top: 10px !important;
+        margin-left: -30px;
+      }
+    }
+  }
+}

package/dist/components/FormFooter/FormFooter.module.scss

@@ -0,0 +1,65 @@
+.form-footer-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  font-family: 'Roboto', sans-serif;
+
+  width: 100%;
+  border-radius: 0 0 4px 4px;
+
+  background: #FFFFFF;
+  z-index: 1;
+
+  .notificationContainer {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding: 20px 20px 0 20px;
+    max-height: 300px;
+  }
+
+  .controlsContainer {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+
+    .submit-container {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
+
+    .required-message {
+      display: block;
+      font-size: 12px;
+      color: rgba(0,0,0,.54);
+    }
+  }
+
+  button:last-child {
+    margin-left: auto;
+  }
+
+  .run-button__spinner {
+    -moz-animation: spin 2s infinite linear;
+    -o-animation: spin 2s infinite linear;
+    -webkit-animation: spin 2s infinite linear;
+    animation: spin 2s infinite linear;
+  }
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @media (max-width: 991px) {
+    border-radius: 0;
+  }
+}

package/dist/components/FormGroup/FormGroup.module.scss

@@ -0,0 +1,69 @@
+.form-group {
+  display: flex;
+  gap: 10px;
+  margin-bottom: -10px;
+  padding: 10px 0;
+  font-size: 14px;
+  font-weight: 400;
+  box-sizing: border-box;
+
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+    gap: 5px;
+  }
+
+  &.expert {
+    background-color: #f0f0f0;
+    padding-right: 10px;
+    margin: 10px 0;
+  }
+
+  &.error {
+    color: #a94442;
+
+    .error-message {
+      color: #a94442;
+      display: block !important;
+      font-weight: inherit;
+      font-size: 14px;
+      padding-top: 5px;
+      padding-left: 2px;
+      line-height: 1.42857;
+    }
+  }
+
+  .error-message {
+    display: none;
+  }
+
+  .control-label {
+    font-weight: 400;
+    width: 200px;
+    text-align: right;
+    flex-shrink: 0;
+    margin: 0 !important; // bootstrap overwrites label selector
+    padding-top: 9px;
+    color: rgba(0, 0, 0, 0.87);
+    font-size: 14px;
+
+    @media screen and (max-width: 767px) {
+      text-align: left;
+      width: 100%;
+    }
+  }
+
+  .control-wrapper {
+    display: flex;
+    flex-direction: column;
+    // width: 0;
+    flex: 1;
+  }
+
+  .control-wrapper-firstlayer {
+    width: calc(100% - 210px);
+
+    @media screen and (max-width: 767px) {
+      width: 100%;
+    }
+  }
+}

package/dist/components/FormList/FormList.module.scss

@@ -0,0 +1,173 @@
+.list-container {
+  margin: 5px 0 -10px;
+  padding: 10px 0;
+
+  .list-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .list-header-label-button {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+
+      @media screen and (max-width: 767px) {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 5px;
+      }
+
+      .list-header-label {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        width: 200px;
+
+        i {
+          color: #000000b2;
+        }
+      }
+
+      .list-label {
+        font-size: 14px;
+        font-weight: 400;
+        text-align: right;
+        font-size: 14px;
+        width: 100%;
+
+        @media screen and (max-width: 767px) {
+          text-align: left;
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  .address {
+    margin-left: 0 !important;
+  }
+
+  .list-children-container {
+    position: relative;
+    margin-left: 195px;
+    @media screen and (max-width: 767px) {
+      margin-left: 0;
+    }
+
+    .form-list {
+      position: relative;
+      margin-top: 5px;
+      padding: 5px 0 5px 15px;
+      @media screen and (max-width: 767px) {
+        padding: 5px 0 5px 35px;
+      }
+
+      > div:first-of-type {
+        margin-top: -10px;
+      }
+
+      //* border-left
+      &::before {
+        content: "";
+        position: absolute;
+        top: 10px;
+        left: -3px;
+        height: calc(100% - 20px);
+        width: 2px;
+        background-color: rgb(192, 192, 192);
+      }
+    }
+
+    .remove-item {
+      border: none;
+      position: absolute;
+      top: 0px;
+      left: -30px;
+
+      @media screen and (max-width: 767px) {
+        top: 15px;
+        left: -45px;
+      }
+    }
+
+    .sort-buttons {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: absolute;
+      left: -25px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      button {
+        color: inherit;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: transparent;
+        border: none;
+        font-size: 10px;
+        padding: 0;
+        cursor: pointer;
+        height: 20px;
+        width: 25px;
+
+        &:disabled {
+          cursor: auto;
+          opacity: 0.5;
+        }
+      }
+    }
+  }
+
+  .form-list-single-item {
+    padding-right: 50px;
+
+    .control-label-group:first-child {
+      display: none;
+    }
+
+    .form-list {
+      margin-top: 0;
+      padding: 0;
+      position: relative;
+      padding-left: 15px;
+      @media screen and (max-width: 767px) {
+        padding-left: 35px;
+      }
+
+      > div:first-of-type {
+        margin-top: 0;
+      }
+
+      //* border-left
+      &::before {
+        content: "";
+        position: absolute;
+        top: 10px;
+        left: -3px;
+        height: calc(100% - 20px);
+        width: 2px;
+        background-color: rgb(192, 192, 192);
+      }
+    }
+
+    .form-list > .form-group > .control-label {
+      display: none;
+    }
+
+    .form-list > .form-group > .control-wrapper {
+      width: 100%;
+    }
+
+    .remove-item {
+      position: absolute;
+      left: auto !important;
+      right: -50px;
+      @media screen and (max-width: 767px) {
+        right: -55px;
+      }
+    }
+  }
+}

package/dist/components/Group/Group.module.scss

@@ -0,0 +1,28 @@
+.form-group-container {
+  margin: 30px 0 20px;
+  padding: 10px 0;
+
+  .group-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .control-label-group {
+    font-size: 14px;
+    font-weight: 400;
+    font-size: 18px;
+    color: #0000008A;
+    margin-top: 0;
+    margin-bottom: 0;
+    margin-left: 210px;
+
+    @media screen and (max-width: 767px) {
+      margin-left: 0;
+    }
+  }
+
+  & > .form-group-container:first-of-type {
+    margin-top: 10px;
+  }
+}

package/dist/components/Input/Input.module.scss

@@ -0,0 +1,3 @@
+.error {
+  border-color: #a94442;
+}

package/dist/components/InputFreeSolo/InputFreeSolo.module.scss

@@ -0,0 +1,29 @@
+.form-control {
+  width: 100%;
+
+  &:has(input[readonly]) {
+    background-color: #e0e0e033;
+    cursor: not-allowed;
+  }
+}
+
+.error fieldset {
+  border-color: #a94442;
+}
+
+.boxContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+
+  p {
+    margin: 0;
+    padding: 0;
+  }
+
+  i {
+    color: #000000B2;
+  }
+}

package/dist/components/MrnInput/MrnInput.module.scss

@@ -0,0 +1,31 @@
+.mrn-input-container {
+  width: 100%;
+  input {
+    max-width: calc(100% - 35px);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: rgba(0,0,0,0.54) !important;
+    font-weight: 400 !important;
+  }
+}
+
+.error fieldset {
+  border-color: #a94442;
+}
+
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.with-select {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+
+  @media only screen and (max-width: 991px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}

package/dist/components/MultiSelect/MultiSelect.module.scss

@@ -0,0 +1,13 @@
+.multi-select-container {
+  width: 100%;
+  background-color: white;
+
+  &:has(input[readonly]) {
+    background-color: #e0e0e033;
+    cursor: not-allowed;
+  }
+}
+
+.error fieldset {
+  border-color: #a94442;
+}

package/dist/components/PasswordInput/PasswordInput.module.scss

@@ -0,0 +1,26 @@
+.password-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+.password-input {
+  padding-right: 50px;
+  width: 100%;
+  height: 40px;
+}
+
+.toggle-icon {
+  background-color: transparent;
+  border: none;
+  position: absolute;
+  right: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.error {
+  border-color: #a94442;
+}

package/dist/components/Select/Select.module.scss

@@ -0,0 +1,15 @@
+.select-container {
+  width: 100%;
+  height: 100%;
+  background-color: white;
+
+  input {
+    color: rgba(0, 0, 0, 0.54) !important;
+    font-weight: 400 !important;
+  }
+
+  &:has(input[readonly]) {
+    background-color: #e0e0e033;
+    cursor: not-allowed;
+  }
+}

package/dist/components/Textarea/Textarea.module.scss

@@ -0,0 +1,14 @@
+.error {
+  border-color: #a94442;
+}
+
+.textarea {
+  color: rgb(51, 51, 51);
+  width: 100%;
+}
+
+.textareaWithBorder {
+  border: 1px solid rgb(204, 204, 204);
+  border-radius: 4px;
+  width: 100%;
+}

package/dist/components/addressGroup/AddressGroup.module.scss

@@ -0,0 +1,72 @@
+.address-group-container {
+  display: flex;
+  gap: 10px;
+  margin-top: 0;
+  margin-bottom: -10px;
+  @media screen and (max-width: 767px) {
+    flex-direction: column;
+    gap: 5px;
+  }
+  .control-label-group {
+    font-size: 14px;
+    font-weight: 400;
+    width: 200px;
+    text-align: right;
+    flex-shrink: 0;
+    margin: 0 !important;
+    padding-right: 3px;
+    padding-top: 10px;
+    color: #333;
+
+    @media screen and (max-width: 767px) {
+      padding-top: 9px;
+      text-align: left;
+      width: 100%;
+    }
+  }
+}
+
+.address {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  width: 100%;
+  row-gap: 10px;
+  column-gap: 10px;
+  & > div > div {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+  & > div {
+    margin: 0 !important;
+    &:nth-of-type(1) {
+      grid-area: streetName;
+    }
+    &:nth-of-type(2) {
+      grid-area: houseNumber;
+    }
+    &:nth-of-type(3) {
+      grid-area: postalCode;
+    }
+    &:nth-of-type(4) {
+      grid-area: locality;
+    }
+    &:nth-of-type(5) {
+      grid-area: country;
+    }
+  }
+}
+
+.address-default {
+  grid-template-areas:
+  "streetName streetName houseNumber"
+  "postalCode locality locality"
+  "country country country";
+}
+
+.gb {
+  grid-template-areas:
+  "houseNumber streetName streetName"
+  "locality locality locality"
+  "postalCode postalCode postalCode"
+  "country country country";
+}

package/dist/src/assets/icons/error/Error.d.ts

@@ -0,0 +1,2 @@
+declare const Error: () => import("react/jsx-runtime").JSX.Element;
+export default Error;

package/dist/src/assets/icons/error/Error.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Error = () => {
+    return (_jsx("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8.1 11.7H9.9V13.5H8.1V11.7ZM8.1 4.5H9.9V9.9H8.1V4.5ZM8.991 0C4.023 0 0 4.032 0 9C0 13.968 4.023 18 8.991 18C13.968 18 18 13.968 18 9C18 4.032 13.968 0 8.991 0ZM9 16.2C5.022 16.2 1.8 12.978 1.8 9C1.8 5.022 5.022 1.8 9 1.8C12.978 1.8 16.2 5.022 16.2 9C16.2 12.978 12.978 16.2 9 16.2Z", fill: "#B01F14" }) }));
+};
+export default Error;
+//# sourceMappingURL=Error.js.map

package/dist/src/assets/icons/error/Error.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Error.js","sourceRoot":"","sources":["../../../../../src/assets/icons/error/Error.tsx"],"names":[],"mappings":";AAEA,MAAM,KAAK,GAAG,GAAG,EAAE;IACjB,OAAO,CACL,cACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,YAElC,eACE,CAAC,EAAC,4RAA4R,EAC9R,IAAI,EAAC,SAAS,GACd,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/src/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,10 @@
+import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+import { CheckboxFormControl, OnChangeValueType } from "../../types";
+export interface IProps extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    control: CheckboxFormControl;
+    id: string;
+    objectPathId?: string;
+    onChangeValue: (newProperties: OnChangeValueType) => void;
+}
+declare const EnhancedCheckbox: ({ onChangeValue, ...props }: IProps) => import("react/jsx-runtime").JSX.Element;
+export default EnhancedCheckbox;