commons-shared-web-ui 0.0.62 → 0.0.63

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

@@ -1,496 +0,0 @@
-@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;
-    }
-  }
-}