@syncfusion/ej2-react-form-renderer 0.1.2-beta → 34.2.2

package/styles/form-renderer.base.css

@@ -1,499 +0,0 @@
-/**
- * Form Renderer Styles
- * Clean production-ready styles without drag/drop UI elements
- */
-
-/* Form Container */
-.form-renderer-container {
-  padding: 2rem;
-  background-color: var(--sf-bg-color);
-}
-
-/* Form */
-.form-renderer {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-
-/* ============================================================
-   TEMPLATE-BASED LAYOUT SYSTEM
-   Only applies when UI schema is NOT provided (auto-generated)
-   ============================================================ */
-
-/* Two-Column Layout */
-.form-renderer.twolayout {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1.5rem;
-}
-
-/* Three-Column Layout */
-.form-renderer.threelayout {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 1.5rem;
-}
-
-/* Four-Column Layout */
-.form-renderer.fourlayout {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 1.5rem;
-}
-
-.form-renderer.twolayout > .form-group:has(.e-btn),
-.form-renderer.threelayout > .form-group:has(.e-btn),
-.form-renderer.fourlayout > .form-group:has(.e-btn) {
-  align-self: flex-end;
-}
-
-.form-renderer.twolayout > .form-group:has(.e-message),
-.form-renderer.threelayout > .form-group:has(.e-message),
-.form-renderer.fourlayout > .form-group:has(.e-message) {
-  align-self: flex-end;
-}
-
-.form-renderer.twolayout > .form-group:has(.e-checkbox),
-.form-renderer.threelayout > .form-group:has(.e-checkbox),
-.form-renderer.fourlayout > .form-group:has(.e-checkbox) {
-  align-self: flex-end;
-}
-
-.form-renderer.twolayout > .form-group:has(.e-switch),
-.form-renderer.threelayout > .form-group:has(.e-switch),
-.form-renderer.fourlayout > .form-group:has(.e-switch) {
-  align-self: flex-end;
-}
-
-/* Submit/Reset buttons handling:
-   - If they're at the end, display side by side
-   - If not at the end, display normally
-*/
-/* When submit button is the only button at the end */
-.form-renderer.twolayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)),
-.form-renderer.threelayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)),
-.form-renderer.fourlayout > .form-group:last-child:has(.form-submit-type):not(:has(.form-reset-type)) {
-  grid-column: 1 / -1; 
-}
-
-/* When both reset and submit are the last two children, display them in adjacent cells side by side */
-.form-renderer.twolayout > .form-group:nth-last-child(2):has(.form-reset-type),
-.form-renderer.twolayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type),
-.form-renderer.threelayout > .form-group:nth-last-child(2):has(.form-reset-type),
-.form-renderer.threelayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type),
-.form-renderer.fourlayout > .form-group:nth-last-child(2):has(.form-reset-type),
-.form-renderer.fourlayout > .form-group:nth-last-child(2):has(.form-reset-type) ~ .form-group:last-child:has(.form-submit-type) {
-  grid-column: auto;
-}
-
-/* Responsive: Collapse to fewer columns on tablets */
-@media (max-width: 1024px) {
-  .form-renderer.fourlayout {
-    grid-template-columns: repeat(2, 1fr);
-  }
-  
-  .form-renderer.threelayout {
-    grid-template-columns: repeat(2, 1fr);
-  }
-}
-
-/* Responsive: Single column on mobile */
-@media (max-width: 768px) {
-  .form-renderer.twolayout,
-  .form-renderer.threelayout,
-  .form-renderer.fourlayout {
-    grid-template-columns: 1fr;
-  }
-}
-
-/* Form Group */
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Field Wrapper */
-.field-wrapper {
-  display: flex;
-  width: 100%;
-}
-
-.field-wrapper.label-top {
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.field-wrapper.label-bottom {
-  flex-direction: column-reverse;
-  gap: 0.5rem;
-}
-
-.field-wrapper.label-left {
-  flex-direction: row;
-  align-items: center;
-  gap: 1rem;
-}
-
-.field-wrapper.label-right {
-  flex-direction: row-reverse;
-  align-items: center;
-  gap: 1rem;
-  justify-content: flex-end;
-}
-
-/* Input grows in left/right label layouts */
-.field-wrapper.label-left .field-input,
-.field-wrapper.label-right .field-input {
-  flex: 1;
-  min-width: 0;
-}
-
-.field-wrapper:has(.e-small) .field-label {
-  font-size: .75rem;
-}
-
-.field-wrapper:has(.e-small) .field-description {
-  font-size: 0.625rem;
-}
-
-.field-wrapper:has(.e-bigger) .field-label {
-  font-size: 1rem;
-}
-
-.field-wrapper:has(.e-bigger) .field-description {
-  font-size: 0.875rem;
-}
-
-/* Label */
-.field-label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--sf-text-color);
-  margin: 0;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-  font-family: var(--sf-font-family);
-}
-
-.field-label .required-asterisk {
-  color: #ef4444;
-  margin-left: 2px;
-}
-
-.field-label .tooltip-icon {
-  cursor: help;
-  color: var(--sf-tooltip-text-color);
-  font-size: 0.875rem;
-}
-
-/* Input Field */
-.field-input {
-  width: 100%;
-}
-
-.field-input .e-image-editor {
-  min-height: 250px;
-}
-
-.field-input .e-switch-wrapper,
-.field-input .e-checkbox-wrapper {
-  margin: 5px 0;
-}
-
-/* Error Message */
-.field-error {
-  color: #ef4444;
-  font-size: 0.75rem;
-  margin-top: 0.25rem;
-  display: block;
-}
-
-/* Radio Button Group */
-.e-radio-group {
-  display: flex;
-  flex-direction: column;
-}
-
-.e-radio-group .e-radio + label {
-  margin-left: 0.5rem;
-}
-
-/* Layout Components - Clean Styles */
-
-/* Panel (Fieldset) */
-.form-panel-renderer {
-  border: none;
-  border-radius: 8px;
-  padding: 0;
-}
-
-.form-panel-renderer:has(.panel-legend) {
-  border: 1px solid var(--sf-layout-border-color);
-  padding: 1.5rem;
-  font-family: var(--sf-font-family)
-}
-
-.form-panel-renderer legend {
-  font-size: 1.5rem;
-  font-weight: 600;
-  padding-bottom: 1.5rem;
-}
-
-.form-panel-renderer .panel-legend {
-  font-size: 1.5rem;
-  font-weight: 600;
-  padding: 0 0.5rem;
-}
-
-
-.panel-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-}
-
-.card-content {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Table Layout */
-.form-table-renderer {
-  width: 100%;
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.form-table-renderer.table-border {
-  border: 1px solid var(--sf-layout-border-color);
-}
-
-.form-table-renderer {
-  display: table;
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0px; 
-  overflow-x: auto;
-  overflow-y: hidden; 
-}
-
-.form-table-renderer .e-form-table-row {
-  display: table-row;
-  background: transparent;
-}
-
-.form-table-renderer .e-form-table-cell {
-  display: table-cell;
-  padding: 12px;
-  vertical-align: top;
-}
-
-.table-border .e-form-table-cell {
-  border-bottom: 1px solid var(--sf-layout-border-color);
-  border-right: 1px solid var(--sf-layout-border-color);
-}
-
-.e-form-table-cell:last-child {
-  border-right: none;
-}
-
-.form-table-renderer .e-form-table-row:last-child .e-form-table-cell {
-  border-bottom: none;
-}
-
-.e-form-table-cell > .form-table-renderer,
-.e-form-table-cell > .form-tabs-renderer,
-.e-form-table-cell > .form-card-renderer,
-.e-form-table-cell > .form-panel-renderer,
-.e-form-table-cell > .form-group
- {
-    margin-bottom: 1.5rem;
-}
-
-
-.e-form-table-cell > .form-table-renderer:last-child,
-.e-form-table-cell > .form-tabs-renderer:last-child,
-.e-form-table-cell > .form-card-renderer:last-child,
-.e-form-table-cell > .form-panel-renderer:last-child,
-.e-form-table-cell > .form-group:last-child
-{
-  margin-bottom: 0;
-}
-
-
-/* Column helper classes (col, col-1..col-12) — copied from preview styles
-   Scoped under .form-table-renderer so renderer respects `col-{n}` classes
-   without changing the renderer's flex-based layout. These only set widths.
-*/
-.form-table-renderer .col,
-.form-table-renderer [class^="col-"] {
-  min-height: 100%;
-  vertical-align: top;
-}
-
-.form-table-renderer .col { width: auto; }
-.form-table-renderer .col-1 { width: 8.33333333%; }
-.form-table-renderer .col-2 { width: 16.66666667%; }
-.form-table-renderer .col-3 { width: 25%; }
-.form-table-renderer .col-4 { width: 33.33333333%; }
-.form-table-renderer .col-5 { width: 41.66666667%; }
-.form-table-renderer .col-6 { width: 50%; }
-.form-table-renderer .col-7 { width: 58.33333333%; }
-.form-table-renderer .col-8 { width: 66.66666667%; }
-.form-table-renderer .col-9 { width: 75%; }
-.form-table-renderer .col-10 { width: 83.33333333%; }
-.form-table-renderer .col-11 { width: 91.66666667%; }
-.form-table-renderer .col-12 { width: auto; }
-
-/* Tabs Layout */
-.form-tabs-renderer {
-  width: 100%;
-}
-
-.tab-content-renderer {
-  padding-top: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-/* Submit Button */
-.form-submit-button {
-  margin-top: 1.5rem;
-  align-self: flex-start;
-}
-
-/* Syncfusion Component Overrides */
-.field-input .e-input-group,
-.field-input .e-control-wrapper {
-  width: 100%;
-}
-
-.field-input .e-float-input {
-  width: 100%;
-}
-
-/* Unsupported Component */
-.unsupported-component {
-  padding: 1rem;
-  background-color: #fff3cd;
-  border: 1px solid #ffc107;
-  border-radius: 4px;
-  color: #856404;
-  font-size: 0.875rem;
-}
-
-/* Dark Mode Support */
-[data-theme="dark"] .form-renderer-container {
-  background-color: #1e1e1e;
-}
-
-[data-theme="dark"] .field-label {
-  color: #e0e0e0;
-}
-
-[data-theme="dark"] .form-panel-renderer,
-[data-theme="dark"] .form-table-renderer {
-  border-color: #3d3d3d;
-}
-
-[data-theme="dark"] .e-form-table-row {
-  border-color: #3d3d3d;
-}
-
-[data-theme="dark"] .e-form-table-cell {
-  border-color: #3d3d3d;
-}
-
-.e-tooltip .e-msg-icon::before {
-  content: "\e800";
-  font-family: "e-icons";
-  color: var(--color-sf-msg-icon-color);
-  font-size: 16px;
-  height: 16px;
-  margin: 3px 4px;
-  display: flex;
-  line-height: 16px;
-}
-
-.form-title h1,
-.form-title h2,
-.form-title h3 {
-  margin-top: 0;
-}
-
-.form-title {
-  text-align: center;
-}
-
-.e-card .e-card-content {
-  padding: 12px 18px 12px 18px;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .form-renderer-container {
-    padding: 1rem;
-  }
-  
-  .field-wrapper.label-left,
-  .field-wrapper.label-right {
-    flex-direction: column;
-    align-items: stretch;
-  }
-  
-  .field-wrapper.label-left .field-input,
-  .field-wrapper.label-right .field-input {
-    width: 100%;
-  }
-  
-  /* Convert table layout to flex layout for mobile */
-  .form-table-renderer .table-grid {
-    display: flex;
-    flex-direction: column;
-    border-spacing: 0;
-    gap: 0.75rem;
-  }
-  
-  .form-table-renderer .row {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.75rem;
-    width: 100%;
-  }
-  
-  .form-table-renderer .e-form-table-cell {
-    display: block;
-    flex: 1 1 auto;
-    min-width: 250px; /* minimum width before wrapping to next row */
-    padding: 12px;
-  }
-  
-  /* Override column width classes on mobile - let content flow naturally */
-  .form-table-renderer .col,
-  .form-table-renderer [class^="col-"] {
-    width: auto !important;
-    min-width: 250px;
-    flex: 1 1 auto;
-  }
-  
-  .table-border .e-form-table-cell  {
-    border-right: none;
-    border-bottom: 1px solid var(--sf-layout-border-color);
-    border-radius: 4px;
-  }
-  
-  .form-table-renderer .e-form-table-cell:last-child {
-    border-bottom: 1px solid var(--sf-layout-border-color);
-  }
-  
-  .form-table-renderer .row:last-child .e-form-table-cell {
-    border-bottom: none;
-  }
-}

package/styles/tailwind3-dark.css

@@ -1,10 +0,0 @@
-@import '@syncfusion/ej2-tailwind3-dark-theme/styles/tailwind3-dark.css';
-@import 'form-renderer.base.css';
-
-:root {
-  --sf-bg-color: rgba(17, 24, 39);
-  --sf-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'apple color emoji', 'Segoe UI emoji', 'Segoe UI Symbol', 'Noto color emoji';
-  --sf-text-color: #fff;
-  --sf-tooltip-text-color: #d1d5db;
-  --sf-layout-border-color: #282f3c;
-}