@visns-studio/visns-components 5.8.13 → 5.8.16

package/src/components/crm/generic/styles/GenericFormBuilder.module.scss

@@ -130,6 +130,24 @@
             margin: 0 0 30px;
         }
     }
+
+    &__fullwidth {
+        width: 100%;
+        background: white;
+        border-radius: var(--br);
+        border: 1px solid var(--border-color);
+        box-sizing: border-box;
+        padding: 0;
+        margin: 5px;
+        height: auto;
+        position: relative;
+
+        h2 {
+            color: var(--primary-color);
+            font-size: 1.35em;
+            margin: 0 0 30px;
+        }
+    }
 }
 
 .gridtxt {
@@ -176,10 +194,51 @@
 .modalForm {
     width: 100%;
     display: flex;
-    align-items: flex-start;
+    align-items: stretch;
     flex-wrap: wrap;
+    gap: 0.35em;
+    position: relative;
+    min-height: 200px;
+}
+
+// Separate class for modal forms (add/edit field modal)
+.modalFieldForm {
+    width: 100%;
+    display: flex;
+    align-items: stretch;
+    flex-wrap: wrap;
+    gap: 0.35em;
+    position: relative;
+
+    // Ensure form items in modal display in rows
+    .formItem {
+        width: calc(50% - 0.175em) !important;
+        flex: 0 0 calc(50% - 0.175em);
+        box-sizing: border-box;
+
+        // Full-width items within modal
+        &.fwItem {
+            width: 100% !important;
+            flex: 0 0 100%;
+            margin-top: 0.5em;
+
+            // Add visual separation for full-width elements
+            &:not(:last-child) {
+                margin-bottom: 0.5em;
+                padding-bottom: 0.5em;
+                border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
+            }
+        }
+    }
+
+    .formItemFull {
+        width: 100% !important;
+        flex: 0 0 100%;
+        box-sizing: border-box;
+    }
 }
 
+// Modal form items (for the add/edit field modal)
 .formItem {
     width: 50%;
     padding: 0.35em;
@@ -187,11 +246,153 @@
     box-sizing: border-box;
 }
 
-.formItem .fi__label {
+// Full width form items for modal
+.formItemFull {
+    width: 100%;
+    padding: 0.35em;
+    position: relative;
+    box-sizing: border-box;
+}
+
+.formItem .fi__label,
+.formItemFull .fi__label {
     position: relative;
     display: block;
 }
 
+// Compact table styling for modal options
+.optionsTable {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0.5rem 0;
+    font-size: 0.9rem;
+    background: white;
+    border-radius: var(--br);
+    overflow: hidden;
+    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.1);
+}
+
+.optionsTable thead {
+    background: var(--primary-color);
+    color: white;
+}
+
+.optionsTable th,
+.optionsTable td {
+    padding: 0.5rem 0.75rem;
+    text-align: left;
+    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
+    vertical-align: middle;
+}
+
+// Special styling for action column
+.optionsTable td:last-child {
+    text-align: center;
+    padding: 0.3rem;
+}
+
+.optionsTable th {
+    font-weight: 600;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.optionsTable tbody tr {
+    transition: background-color 0.2s ease;
+}
+
+.optionsTable tbody tr:hover {
+    background-color: rgba(var(--primary-rgb), 0.02);
+}
+
+.optionsTable tbody tr:last-child td {
+    border-bottom: none;
+}
+
+// Compact input styling for table cells
+.optionsTable input {
+    width: 100%;
+    padding: 0.4rem 0.6rem !important;
+    border: 1px solid rgba(var(--primary-rgb), 0.2) !important;
+    border-radius: 4px !important;
+    font-size: 0.85rem !important;
+    background: white !important;
+}
+
+.optionsTable input:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.1) !important;
+}
+
+// Action buttons in tables
+.tableActionBtn {
+    padding: 0.4rem 0.6rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.8rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.3rem;
+    min-height: 32px; // Match input field height
+    width: 100%;
+    max-width: 70px;
+}
+
+.tableActionBtn.add {
+    background: var(--primary-color);
+    color: white;
+}
+
+.tableActionBtn.add:hover {
+    background: var(--secondary-color);
+    transform: translateY(-1px);
+}
+
+.tableActionBtn.delete {
+    background: #dc3545;
+    color: white;
+    padding: 0.2rem 0.4rem;
+}
+
+.tableActionBtn.delete:hover {
+    background: #c82333;
+    transform: translateY(-1px);
+}
+
+// Modal-specific overrides to prevent conflicts with form builder styles
+.modal .formItem,
+.modal .formItemFull {
+    // Reset any form builder specific styles that might interfere
+    min-height: auto;
+
+    .fi__label {
+        height: auto;
+        min-height: auto;
+    }
+
+    input,
+    select,
+    textarea {
+        // Ensure modal form fields have proper styling
+        min-height: 48px;
+        font-size: 0.9rem;
+    }
+}
+
+// Ensure modal tables don't inherit preview field styles
+.modal .optionsTable {
+    // Override any conflicting styles
+    .fi__label {
+        height: auto;
+        display: block;
+    }
+}
+
 .formItem textarea,
 .formItem select,
 .formItem
@@ -257,10 +458,18 @@ input[type='file']:hover {
 }
 
 .formBuilderItem {
-    width: 50%;
+    width: calc(50% - 0.175em);
     padding: 0.35em;
     position: relative;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    min-height: 80px;
+
+    // Ensure consistent layout during drag operations
+    &:not(.sortingHelper) {
+        transition: transform 0.2s ease;
+    }
 }
 
 .formBuilderItem .fi__label {
@@ -318,15 +527,48 @@ input[type='file']:hover {
 }
 
 .qtrBuilderItem {
-    flex-basis: 50%;
+    flex-basis: calc(50% - 0.175em);
+    display: flex;
+    flex-direction: column;
+    min-height: 80px;
+    position: relative;
+    box-sizing: border-box;
+    padding: 0.35em;
+
+    // Ensure consistent layout during drag operations
+    &:not(.sortingHelper) {
+        transition: transform 0.2s ease;
+    }
 }
 
 .halfBuilderItem {
-    flex-basis: 50%;
+    flex-basis: calc(50% - 0.175em);
+    display: flex;
+    flex-direction: column;
+    min-height: 80px;
+    position: relative;
+    box-sizing: border-box;
+    padding: 0.35em;
+
+    // Ensure consistent layout during drag operations
+    &:not(.sortingHelper) {
+        transition: transform 0.2s ease;
+    }
 }
 
 .fwBuilderItem {
-    flex-basis: 100%;
+    flex-basis: calc(100% - 0.35em);
+    display: flex;
+    flex-direction: column;
+    min-height: 80px;
+    position: relative;
+    box-sizing: border-box;
+    padding: 0.35em;
+
+    // Ensure consistent layout during drag operations
+    &:not(.sortingHelper) {
+        transition: transform 0.2s ease;
+    }
 }
 
 input:not(:placeholder-shown) + .fi__span,
@@ -451,6 +693,7 @@ select:not(:placeholder-shown) + .fi__span {
     bottom: 20px;
     right: 20px;
     width: auto;
+    z-index: 500;
 
     button {
         display: block;
@@ -876,6 +1119,500 @@ select:not(:placeholder-shown) + .fi__span {
     background-color: rgba(var(--primary-rgb), 0.02);
 }
 
+/* Interactive Field Styles */
+.interactiveField {
+    position: relative;
+    border: 2px solid transparent;
+    border-radius: var(--br);
+    transition: all 0.2s ease;
+    display: flex;
+    flex-direction: column;
+    min-height: 100px;
+    height: 100%;
+
+    // Ensure proper layout during sorting
+    &.sortableHelper {
+        position: fixed !important;
+        z-index: 99999 !important;
+        pointer-events: none !important;
+    }
+
+    &:hover:not(.sortableHelper) {
+        border-color: rgba(var(--primary-rgb), 0.3);
+        background-color: rgba(var(--primary-rgb), 0.02);
+
+        .fieldControls {
+            opacity: 1;
+        }
+    }
+
+    // Add visual feedback during drag operations
+    &.isDragging {
+        opacity: 0.5;
+        transform: scale(0.98);
+    }
+}
+
+.fieldControls {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    right: 4px;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    z-index: 10000;
+    pointer-events: none;
+
+    > * {
+        pointer-events: auto;
+    }
+}
+
+.fieldInfo {
+    position: absolute;
+    top: 4px;
+    left: 50%;
+    transform: translateX(-50%);
+    background: rgba(var(--primary-rgb), 0.9);
+    color: white;
+    padding: 4px 12px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    white-space: nowrap;
+    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
+    z-index: 10001;
+    pointer-events: none;
+    opacity: 1; // Always visible
+    transition: all 0.2s ease;
+    max-width: calc(100% - 120px); // Leave space for drag handle and actions
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    // Ensure it's visible even when field controls are hidden
+    .interactiveField:not(:hover) & {
+        opacity: 0.8;
+    }
+
+    .interactiveField:hover & {
+        opacity: 1;
+        background: var(--primary-color);
+        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.4);
+    }
+
+    // Responsive behavior for smaller fields
+    @media (max-width: 768px) {
+        font-size: 0.7rem;
+        padding: 3px 8px;
+        max-width: calc(100% - 100px);
+    }
+}
+
+.fieldInfoText {
+    display: block;
+    line-height: 1.2;
+    letter-spacing: 0.025em;
+}
+
+.dragHandle {
+    color: var(--primary-color) !important;
+    cursor: grab;
+    padding: 8px;
+    border-radius: 8px;
+    background: white;
+    border: 2px solid var(--primary-color);
+    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.25);
+    transition: all 0.2s ease;
+    font-weight: bold;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    min-width: 40px;
+    min-height: 40px;
+    position: relative;
+    z-index: 10001;
+
+    svg {
+        display: block !important;
+        width: 24px !important;
+        height: 24px !important;
+        stroke: currentColor !important;
+        fill: none !important;
+    }
+
+    &:hover {
+        background: var(--primary-color);
+        color: white;
+        border-color: var(--primary-color);
+        transform: scale(1.1);
+        box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
+    }
+
+    &:active {
+        cursor: grabbing;
+        transform: scale(0.95);
+    }
+}
+
+.fieldActions {
+    display: flex;
+    gap: 6px;
+    align-items: center;
+}
+
+.editIcon,
+.deleteIcon {
+    padding: 8px;
+    border-radius: 8px;
+    background: white;
+    border: 2px solid;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    font-weight: bold;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    min-width: 36px;
+    min-height: 36px;
+    position: relative;
+    z-index: 10001;
+
+    svg {
+        display: block !important;
+        width: 20px !important;
+        height: 20px !important;
+        stroke: currentColor !important;
+        fill: none !important;
+    }
+}
+
+.editIcon {
+    color: var(--primary-color) !important;
+    border-color: var(--primary-color);
+
+    &:hover {
+        background: var(--primary-color);
+        color: white !important;
+        border-color: var(--primary-color);
+        transform: scale(1.1);
+        box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.4);
+    }
+}
+
+.deleteIcon {
+    color: #d32f2f !important;
+    border-color: #d32f2f;
+
+    &:hover {
+        background: #d32f2f;
+        color: white !important;
+        border-color: #d32f2f;
+        transform: scale(1.1);
+        box-shadow: 0 6px 16px rgba(211, 47, 47, 0.4);
+    }
+}
+
+/* Preview Field Styling - Visual distinction from regular sections */
+.previewField {
+    background: linear-gradient(
+        135deg,
+        rgba(var(--primary-rgb), 0.02),
+        rgba(var(--primary-rgb), 0.05)
+    );
+    border-left: 4px solid rgba(var(--primary-rgb), 0.3);
+    position: relative;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 2px;
+        background: linear-gradient(
+            90deg,
+            rgba(var(--primary-rgb), 0.3),
+            rgba(var(--primary-rgb), 0.1),
+            rgba(var(--primary-rgb), 0.3)
+        );
+    }
+
+    &:hover {
+        background: linear-gradient(
+            135deg,
+            rgba(var(--primary-rgb), 0.05),
+            rgba(var(--primary-rgb), 0.08)
+        );
+        border-left-color: rgba(var(--primary-rgb), 0.6);
+        box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.1);
+    }
+
+    // Override section styling when in preview mode
+    .gridtxt__header {
+        background: linear-gradient(
+            135deg,
+            rgba(var(--primary-rgb), 0.1),
+            rgba(var(--primary-rgb), 0.15)
+        );
+        border-left: 3px solid var(--primary-color);
+        position: relative;
+
+        &::after {
+            content: 'PREVIEW';
+            position: absolute;
+            right: 10px;
+            top: 50%;
+            transform: translateY(-50%);
+            font-size: 0.7rem;
+            color: rgba(var(--primary-rgb), 0.7);
+            font-weight: 600;
+            letter-spacing: 1px;
+        }
+    }
+}
+
+// Dragging state for @dnd-kit
+.dragging {
+    opacity: 0.5;
+    transform: rotate(2deg) scale(1.02);
+    z-index: 1000;
+
+    // Ensure dragged items maintain their natural size during drag
+    &.halfBuilderItem {
+        width: min(
+            300px,
+            45vw
+        ) !important; // Responsive width for half items during drag
+        max-width: 400px !important;
+        flex-basis: auto !important;
+        flex-shrink: 0 !important;
+        flex-grow: 0 !important;
+    }
+
+    &.fwBuilderItem {
+        width: min(
+            600px,
+            90vw
+        ) !important; // Responsive width for full items during drag
+        max-width: 800px !important;
+        flex-basis: auto !important;
+        flex-shrink: 0 !important;
+        flex-grow: 0 !important;
+    }
+
+    // Remove flexbox behavior during drag
+    display: block !important;
+
+    // Hide field controls and info during drag for cleaner appearance
+    .fieldControls {
+        opacity: 0 !important;
+    }
+
+    .fieldInfo {
+        opacity: 0 !important;
+    }
+
+    // Ensure content doesn't stretch
+    .fieldContent {
+        width: 100%;
+        box-sizing: border-box;
+        padding-top: 10px !important; // Reduce padding since controls are hidden
+
+        // Ensure form elements maintain proper sizing
+        .fi__label {
+            width: 100%;
+            max-width: 100%;
+        }
+
+        input,
+        select,
+        textarea,
+        table {
+            width: 100%;
+            max-width: 100%;
+            box-sizing: border-box;
+        }
+
+        // Ensure tables don't overflow during drag
+        table {
+            table-layout: fixed;
+            word-wrap: break-word;
+        }
+    }
+
+    // Add a subtle border to make the drag preview more defined
+    border: 2px solid rgba(var(--primary-rgb), 0.3) !important;
+    border-radius: var(--br) !important;
+    background: white !important;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
+}
+
+.fieldContent {
+    position: relative;
+    z-index: 1;
+    padding-top: 50px; /* Add space for the larger controls */
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+
+    // Ensure form elements take full height
+    .fi__label {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-start;
+    }
+
+    // Handle different field types
+    select,
+    input,
+    textarea {
+        flex-grow: 1;
+    }
+}
+
+.emptyState {
+    padding: 3rem;
+    text-align: center;
+    color: rgba(var(--paragraph-color-rgb), 0.7);
+    font-size: 1rem;
+    background: rgba(var(--primary-rgb), 0.02);
+    border-radius: var(--br);
+    margin: 1rem;
+
+    p {
+        margin: 0;
+    }
+}
+
+.sortingHelper {
+    z-index: 99999 !important;
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2) !important;
+    transform: rotate(2deg) scale(1.05) !important;
+    pointer-events: none !important;
+    opacity: 0.9 !important;
+    background: white !important;
+    border: 2px solid var(--primary-color) !important;
+    border-radius: 8px !important;
+
+    // Hide field controls during drag
+    .fieldControls {
+        display: none !important;
+    }
+
+    // Ensure field content is visible
+    .fieldContent {
+        opacity: 1 !important;
+        visibility: visible !important;
+    }
+    min-height: 80px !important;
+
+    // Ensure proper flex layout is maintained
+    &.formBuilderItem {
+        display: flex !important;
+        flex-direction: column !important;
+    }
+
+    &.halfBuilderItem {
+        flex-basis: auto !important;
+        width: auto !important;
+    }
+
+    &.fwBuilderItem {
+        flex-basis: auto !important;
+        width: auto !important;
+    }
+
+    // Ensure the helper is visible and styled
+    &::before {
+        content: '';
+        position: absolute;
+        top: -2px;
+        left: -2px;
+        right: -2px;
+        bottom: -2px;
+        background: linear-gradient(
+            45deg,
+            var(--primary-color),
+            var(--secondary-color)
+        );
+        border-radius: var(--br);
+        z-index: -1;
+        opacity: 0.1;
+    }
+
+    // Disable all interactions during drag
+    * {
+        pointer-events: none !important;
+    }
+
+    // Hide field controls during drag but keep content visible
+    .fieldControls {
+        opacity: 0 !important;
+        visibility: hidden !important;
+        display: none !important;
+    }
+
+    // Ensure field content is visible during drag
+    .fieldContent {
+        opacity: 1 !important;
+        visibility: visible !important;
+        display: flex !important;
+        flex-direction: column !important;
+        flex-grow: 1 !important;
+        padding-top: 10px !important; // Reduce padding since controls are hidden
+    }
+
+    // Ensure form elements are visible
+    .fi__label {
+        display: flex !important;
+        flex-direction: column !important;
+        opacity: 1 !important;
+        visibility: visible !important;
+    }
+
+    // Ensure inputs, selects, textareas are visible
+    input,
+    select,
+    textarea,
+    button,
+    table,
+    img,
+    h2,
+    div {
+        opacity: 1 !important;
+        visibility: visible !important;
+        display: block !important;
+    }
+
+    // Special handling for table elements
+    table {
+        display: table !important;
+    }
+
+    thead {
+        display: table-header-group !important;
+    }
+
+    tbody {
+        display: table-row-group !important;
+    }
+
+    tr {
+        display: table-row !important;
+    }
+
+    td,
+    th {
+        display: table-cell !important;
+    }
+}
+
 .dragitem {
     list-style: none;
     display: flex;