commons-shared-web-ui 0.0.49 → 0.0.50

package/src/lib/modules/form-builder/components/field-configurator/configurator-config-panel/configurator-config-panel.component.scss

@@ -0,0 +1,496 @@
+@use '../../../form-builder.theme' as theme;
+@use '../../../../smart-form/smart-form.theme' as sf;
+
+.fb-config-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--fb-fc-panel-bg, #f9fafb);
+  overflow: hidden;
+
+  // Apply smart-form theme at container level so CSS variables cascade to all nested components
+  // This ensures lib-smart-form and form-section components receive the CSS variables
+  // regardless of ViewEncapsulation.Emulated boundary
+
+  // ──────────────────────────────────────────────────────────────────────────────
+  // RESPONSIVE THEME CONFIGURATION
+  // Optimized for visual hierarchy and readability across all screen sizes
+  // ──────────────────────────────────────────────────────────────────────────────
+
+  // Default (Mobile-First): 480px+
+  @include sf.smart-form-theme((
+    section-padding: 12px,
+    section-border: none,
+    section-shadow: none,
+    section-bg: transparent,
+    form-padding: 0,
+    form-bg: transparent,
+    form-shadow: none,
+    grid-gap: 12px,
+    label-size: 0.75rem,
+    label-weight: 600,
+    input-padding: 0.5rem 0.75rem,
+  ));
+
+  // Tablet Portrait (600px+): Better spacing for readability
+  @media (min-width: 600px) {
+    @include sf.smart-form-theme((
+      section-padding: 14px,
+      section-border: none,
+      section-shadow: none,
+      section-bg: transparent,
+      form-padding: 0,
+      form-bg: transparent,
+      form-shadow: none,
+      grid-gap: 14px,
+      label-size: 0.8rem,
+      label-weight: 600,
+      input-padding: 0.5rem 0.75rem,
+    ));
+  }
+
+  // Tablet Landscape (768px+): Balanced comfortable spacing
+  @media (min-width: 768px) {
+    @include sf.smart-form-theme((
+      section-padding: 16px,
+      section-border: none,
+      section-shadow: none,
+      section-bg: transparent,
+      form-padding: 0,
+      form-bg: transparent,
+      form-shadow: none,
+      grid-gap: 16px,
+      label-size: 0.8125rem,
+      label-weight: 600,
+      input-padding: 0.625rem 0.875rem,
+    ));
+  }
+
+  // Desktop (1024px+): Optimal form experience
+  @media (min-width: 1024px) {
+    @include sf.smart-form-theme((
+      section-padding: 16px,
+      section-border: none,
+      section-shadow: none,
+      section-bg: transparent,
+      form-padding: 0,
+      form-bg: transparent,
+      form-shadow: none,
+      grid-gap: 16px,
+      label-size: 0.8125rem,
+      label-weight: 600,
+      input-padding: 0.625rem 0.875rem,
+    ));
+  }
+
+  // Large Desktop (1440px+): Generous spacing
+  @media (min-width: 1440px) {
+    @include sf.smart-form-theme((
+      section-padding: 18px,
+      section-border: none,
+      section-shadow: none,
+      section-bg: transparent,
+      form-padding: 0,
+      form-bg: transparent,
+      form-shadow: none,
+      grid-gap: 18px,
+      label-size: 0.8125rem,
+      label-weight: 600,
+      input-padding: 0.625rem 0.875rem,
+    ));
+  }
+
+  // Ultra-wide (1920px+): Maximum breathing room
+  @media (min-width: 1920px) {
+    @include sf.smart-form-theme((
+      section-padding: 18px,
+      section-border: none,
+      section-shadow: none,
+      section-bg: transparent,
+      form-padding: 0,
+      form-bg: transparent,
+      form-shadow: none,
+      grid-gap: 18px,
+      label-size: 0.8125rem,
+      label-weight: 600,
+      input-padding: 0.625rem 0.875rem,
+    ));
+  }
+
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--fb-fc-empty-color, #9ca3af);
+    text-align: center;
+    padding: 48px 24px;
+
+    @media (max-width: 640px) {
+      padding: 24px 16px;
+    }
+
+    &-icon {
+      margin-bottom: 24px;
+      opacity: 0.4;
+      color: var(--fb-fc-accent, #3b82f6);
+
+      @media (max-width: 640px) {
+        margin-bottom: 16px;
+      }
+    }
+
+    &-text {
+      font-size: 15px;
+      max-width: 320px;
+      line-height: 1.6;
+      font-weight: 500;
+
+      @media (max-width: 640px) {
+        font-size: 14px;
+        max-width: 100%;
+      }
+    }
+  }
+
+  &__header {
+    background: var(--fb-fc-header-bg, #ffffff);
+    padding: 1.4rem; //20px 32px;
+    border-bottom: 1px solid var(--fb-fc-border, #e5e7eb);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-shrink: 0;
+    gap: 16px;
+    flex-wrap: wrap;
+
+    @media (max-width: 768px) {
+      padding: 16px 24px;
+      gap: 12px;
+    }
+
+    @media (max-width: 640px) {
+      padding: 12px 16px;
+      gap: 8px;
+    }
+
+    &-left {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      min-width: 0;
+      flex-wrap: wrap;
+
+      @media (max-width: 640px) {
+        gap: 8px;
+      }
+    }
+  }
+
+  &__type-switcher {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+
+    @media (max-width: 640px) {
+      gap: 4px;
+    }
+  }
+
+  &__type-label {
+    font-size: var(--fb-fc-type-label-size, 0.75rem);
+    font-weight: 600;
+    color: var(--fb-fc-type-label-color, #6b7280);
+    white-space: nowrap;
+
+    @media (max-width: 640px) {
+      font-size: 0.7rem;
+    }
+  }
+
+  &__type-select {
+    height: var(--fb-fc-type-select-height, 36px);
+    padding: 0 32px 0 10px;
+    border: 1px solid var(--fb-fc-type-select-border, #d1d5db);
+    border-radius: var(--fb-fc-type-select-radius, 8px);
+    background-color: var(--fb-fc-type-select-bg, #ffffff);
+    color: var(--fb-fc-type-select-color, #111827);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    cursor: pointer;
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 8px center;
+    min-width: 160px;
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+
+    @media (max-width: 640px) {
+      height: 32px;
+      font-size: 0.75rem;
+      min-width: 140px;
+      padding: 0 28px 0 8px;
+    }
+
+    &:hover {
+      border-color: var(--fb-fc-type-select-hover-border, #9ca3af);
+    }
+
+    &:focus {
+      outline: none;
+      border-color: var(--fb-fc-accent, #3b82f6);
+      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
+    }
+  }
+
+  &__title {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: var(--fb-fc-title-color, #111827);
+
+    @media (max-width: 1024px) {
+      font-size: 1.125rem;
+    }
+
+    @media (max-width: 640px) {
+      font-size: 1rem;
+    }
+  }
+
+  &__badge {
+    padding: 4px 12px;
+    background: var(--fb-fc-badge-bg, #eff6ff);
+    color: var(--fb-fc-badge-color, #3b82f6);
+    border-radius: 20px;
+    font-size: 11px;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border: 1px solid var(--fb-fc-badge-border, #dbeafe);
+
+    @media (max-width: 640px) {
+      padding: 3px 8px;
+      font-size: 9px;
+    }
+  }
+
+  &__form-wrapper {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    width: 100%;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    box-sizing: border-box;
+
+    // Mobile First: Tight padding for small screens
+    padding: 12px 16px;
+
+    // Tablet Portrait (600px+): Increase comfort space
+    @media (min-width: 600px) {
+      padding: 16px 20px;
+    }
+
+    // Tablet Landscape (768px+): Better vertical breathing room
+    @media (min-width: 768px) {
+      padding: 20px 24px;
+    }
+
+    // Desktop (1024px+): Comfortable padding
+    @media (min-width: 1024px) {
+      padding: 1rem;
+    }
+
+    // Large Desktop (1440px+): Spacious padding
+    @media (min-width: 1440px) {
+      padding: 28px 40px;
+    }
+
+    // Ultra-wide (1920px+): Maximum breathing room
+    @media (min-width: 1920px) {
+      padding: 32px 48px;
+    }
+
+    .fb-config-card {
+      width: 100%;
+      max-width: none;
+      margin: 0;
+      background: transparent;
+      border: none;
+      box-shadow: none;
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      flex: 1;
+      box-sizing: border-box;
+
+      // ────────────────────────────────────────────────────────────────────────────
+      // RESPONSIVE FORM FIELD LAYOUT
+      // Professional responsive grid for form fields - centered design
+      // ────────────────────────────────────────────────────────────────────────────
+
+      // Form field wrapper styling
+      ::ng-deep .sf-col {
+        // display: flex;
+        min-width: 0;
+      }
+
+      // Horizontal form rows - flexible responsive layout
+      ::ng-deep .form-row.horizontal {
+        display: grid;
+        grid-auto-flow: dense;
+        gap: 12px;
+        width: 100%;
+        align-items: start;
+
+        // Mobile (< 600px): Single column, full width
+        @media (max-width: 599px) {
+          grid-template-columns: 1fr;
+          gap: 12px;
+        }
+
+        // Tablet Portrait (600px-768px): Single column with better gap
+        @media (min-width: 600px) and (max-width: 767px) {
+          grid-template-columns: 1fr;
+          gap: 14px;
+        }
+
+        // Tablet Landscape (768px-1024px): 2 columns
+        @media (min-width: 768px) and (max-width: 1023px) {
+          grid-template-columns: repeat(2, 1fr);
+          gap: 14px;
+        }
+
+        // Desktop (1024px-1440px): 2 columns with balanced spacing
+        @media (min-width: 1024px) and (max-width: 1439px) {
+          grid-template-columns: repeat(2, 1fr);
+          gap: 16px;
+        }
+
+        // Large Desktop (1440px+): 3 columns for optimal use of space
+        @media (min-width: 1440px) {
+          grid-template-columns: repeat(3, 1fr);
+          gap: 18px;
+        }
+
+        // Ultra-wide (1920px+): 3 columns with generous gaps
+        @media (min-width: 1920px) {
+          grid-template-columns: repeat(3, 1fr);
+          gap: 20px;
+        }
+
+        // Field wrapper styling
+        > * {
+          display: flex;
+          flex-direction: column;
+          min-width: 0;
+          overflow: hidden;
+
+          // Ensure inputs take full width
+          ::ng-deep .form-field-wrapper,
+          ::ng-deep .field-wrapper,
+          ::ng-deep input,
+          ::ng-deep select,
+          ::ng-deep textarea {
+            width: 100%;
+            min-width: 0;
+          }
+        }
+      }
+
+      // Switch field styling - inline horizontal layout
+      ::ng-deep .form-row.horizontal .sf-switch-wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        white-space: nowrap;
+        min-width: 0;
+
+        @media (max-width: 768px) {
+          gap: 6px;
+        }
+
+        .field-label {
+          font-size: 0.75rem;
+          font-weight: 600;
+          margin: 0;
+          flex-shrink: 1;
+          min-width: 0;
+          word-break: keep-all;
+
+          @media (max-width: 768px) {
+            font-size: 0.7rem;
+          }
+
+          @media (max-width: 640px) {
+            font-size: 0.65rem;
+          }
+        }
+
+        .switch {
+          flex-shrink: 0;
+        }
+      }
+
+      ::ng-deep .grid-row .sf-col .sf-switch-wrapper {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        white-space: nowrap;
+        min-width: 0;
+
+        @media (max-width: 768px) {
+          gap: 6px;
+        }
+
+        .field-label {
+          font-size: 0.75rem;
+          font-weight: 600;
+          margin: 0;
+          flex-shrink: 1;
+          min-width: 0;
+          word-break: keep-all;
+
+          @media (max-width: 768px) {
+            font-size: 0.7rem;
+          }
+
+          @media (max-width: 640px) {
+            font-size: 0.65rem;
+          }
+        }
+
+        .switch {
+          flex-shrink: 0;
+        }
+      }
+    }
+  }
+
+  &__error {
+    padding: 24px;
+    background: var(--fb-fc-error-bg, #fef2f2);
+    color: var(--fb-fc-error-color, #dc2626);
+    border: 1px solid var(--fb-fc-error-border, #fee2e2);
+    border-radius: 8px;
+    font-size: 14px;
+    font-weight: 500;
+
+    @media (max-width: 768px) {
+      padding: 16px;
+      font-size: 13px;
+    }
+
+    @media (max-width: 640px) {
+      padding: 12px;
+      font-size: 12px;
+    }
+  }
+}