@syncfusion/ej2-react-form-builder 0.1.0-beta → 35.1.42

package/styles/themes/datagrid.css

@@ -1,380 +0,0 @@
-/* DataGrid and ColumnBuilder Styles */
-
-.column-builder {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
-
-.column-list {
-  min-height: 35px;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  max-height: 800px;
-  scrollbar-width: thin;
-  overflow-y: auto;
-}
-
-.column-item {
-  border: 1px solid var(--sf-color-border, #ddd);
-  border-radius: 4px;
-  overflow: visible;
-  background: var(--sf-color-background, #ffffff);
-  flex-shrink: 0;
-}
-
-.right-sidebar:has(.right-sidebar-column) .sidebar-header,
-.right-sidebar:has(.right-sidebar-column) .e-tab .e-tab-header {
-  display: none !important;
-}
-
-.right-sidebar-column {
-  top: 0rem !important;
-  margin-top: 0 !important;
-  transition: transform .5s;
-  z-index: 999;
-  position: absolute;
-  overflow: hidden;
-  width: var(--ridesidebar-width);
-  min-width: var(--ridesidebar-width);
-  border-left: 1px solid rgb(var(--sf-color-line-color));
-  height: calc(100dvh - var(--topbar-height) - 3rem);
-  padding: 0;
-  right: 0;
-  background-color: rgb(var(--sf-color-background));
-}
-
-.builder-container.e-component .right-sidebar-column {
-    height: 100%;
-}
-
-.column-details {
-  padding: 1rem !important;
-  display: flex;
-  flex-direction: column;
-  height: calc(100dvh - var(--topbar-height) - var(--topbar-height) - 3rem);
-  overflow-y: auto;
-  gap: 16px;
-  background: var(--sf-color-background, #ffffff);
-}
-
-.builder-container.e-component .column-details {
-    height: calc(100% - var(--topbar-height))
-}
-
-.builder-container.e-component .conditions-editor-wrapper .e-dlg-container .e-dlg-overlay {
-  background-color: transparent !important;
-}
-
-.column-sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  min-height: 48px;
-  background-color: rgb(var(--sf-color-surface));
-  border-bottom: 1px solid rgb(var(--sf-color-line-color));
-  padding: 0rem 1.5rem;
-  flex-shrink: 0;
-}
-
-.column-sidebar-header h3 {
-    margin: 0;
-    font-size: 0.875rem;
-    line-height: 20px;
-    color: var(--dashboard-heading-color);
-    font-weight: 600;
-    font-style: Semi Bold;
-    line-height: 20px;
-    letter-spacing: 0%;
-}
-
-.column-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-radius: 6px;
-  padding: 4px 4px 4px 8px;
-  background: var(--sf-color-surface, #f5f5f5);
-  cursor: pointer;
-  border-bottom: 1px solid var(--sf-color-border, #eee);
-  user-select: none;
-}
-
-.column-header:hover {
-  background: var(--sf-color-surface-hover, #efefef);
-}
-
-.column-field {
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--sf-color-text, #333);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.column-header-text {
-  font-size: 13px;
-  color: var(--sf-color-text-secondary, #666);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.column-header .delete-btn {
-  padding: 4px 8px;
-  font-size: 12px;
-  border: none;
-  border-radius: 3px;
-  cursor: pointer;
-  flex-shrink: 0;
-  transition: background 0.2s;
-}
-
-.column-header .delete-btn:hover {
-  background: #ff3838;
-}
-
-.conditional-column .column-details {
-  height: 500px;
-}
-
-.no-border-radius {
-  border: none;
-  border-top-left-radius: 6px !important;
-  border-top-right-radius: 6px !important;
-}
-
-.column-builder .form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.column-builder .form-group label {
-  font-weight: 500;
-  font-size: 13px;
-  color: var(--sf-color-text, #333);
-}
-
-/* Conditional Data Editor Styles - follows ColumnBuilder pattern */
-.condition-data-editor {
-  padding-top: 8px;
-}
-
-.condition-data-editor .rule-details {
-  padding: 0px;
-}
-
-.condition-data-editor .column-list {
-  overflow-y: hidden;
-}
-
-.rule-item {
-  margin-bottom: 12px;
-  border: 1px solid rgb(var(--sf-color-line-color));
-  border-radius: 4px;
-  overflow: hidden;
-  background: rgb(var(--sf-color-background));
-}
-
-.rule-header {
-  padding: 12px;
-  border-bottom: 1px solid rgb(var(--sf-color-line-color));
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  user-select: none;
-}
-
-.rule-header:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-.rule-header:focus-visible,
-.custom-accordion-header:focus-visible,
-.add-field-message-wrapper:focus-visible,
-.palette-item:focus-visible,
-.tab:focus-visible,
-.close-btn:focus-visible  {
-  border: 2px solid var(--color-sf-primary-bg-color) !important;
-  outline-offset: 2px;
-  outline: none;
-}
-
-.rule-title {
-  font-weight: 500;
-  margin: 0;
-  color: var(--jsonview-text-color);
-  flex: 1;
-}
-
-.rule-details {
-  padding: 16px;
-  background: var(--sf-color-background, #ffffff);
-}
-
-.rule-details .form-group:last-child {
-  margin-bottom: 0;
-}
-
-.rule-actions .e-btn {
-  padding: 8px 16px;
-  font-size: 13px;
-}
-
-.condition-data-editor .e-rule-value.e-template-value.e-value.e-show {
-  width: 100% !important;
-}
-
-.condition-data-editor .e-query-builder .e-group-body .e-rule-container .e-rule-value.e-custom-value {
-  width: 100% !important;
-}
-
-.form-group input[type="text"],
-.form-group input[type="number"],
-.form-group input[type="date"],
-.form-group select {
-  padding: 8px 12px;
-  border: 1px solid var(--sf-color-border, #d3d3d3);
-  border-radius: 4px;
-  font-size: 13px;
-  font-family: inherit;
-  background: var(--sf-color-background, #ffffff);
-  color: var(--sf-color-text, #333);
-}
-
-.form-group input:focus,
-.form-group select:focus {
-  outline: none;
-  border-color: var(--sf-color-primary, #0078d4);
-  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.1);
-}
-
-.checkbox-group {
-  flex-direction: row;
-}
-
-.checkbox-group label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-weight: 400;
-  margin: 0;
-}
-
-.checkbox-group input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}
-
-/* DataGrid Component Styles */
-
-.datagrid-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 100%;
-}
-
-.datagrid-label {
-  font-weight: 600;
-  font-size: 14px;
-  color: var(--sf-color-text, #333);
-  display: block;
-  margin-bottom: 8px;
-}
-
-.datagrid-grid {
-  border: 1px solid var(--sf-color-border, #d3d3d3);
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.datagrid-grid .e-grid {
-  border: none;
-}
-
-.datagrid-grid .e-gridheader {
-  background: var(--sf-color-surface, #f5f5f5);
-  border-bottom: 1px solid var(--sf-color-border, #d3d3d3);
-}
-
-.datagrid-grid .e-headercell {
-  background: var(--sf-color-surface, #f5f5f5);
-  font-weight: 600;
-  padding: 12px;
-  border-right: 1px solid var(--sf-color-border, #e0e0e0);
-}
-
-.datagrid-grid .e-rowcell {
-  padding: 10px 12px;
-  border-right: 1px solid var(--sf-color-border, #e0e0e0);
-  color: var(--sf-color-text, #333);
-}
-
-.datagrid-grid .e-grid.e-gridhover tr.e-row:not(.e-disable-gridhover):not(.e-detailrow):hover td.e-active.e-rowcell:not(.e-updatedtd) {
-  background: unset !important;
-}
-
-/* Error States */
-
-.column-item.error {
-  border-color: #ff4757;
-  background: #fff5f5;
-}
-
-.form-group input.error,
-.form-group select.error {
-  border-color: #ff4757;
-  background: #fff5f5;
-}
-
-.validation-error {
-  color: #ff4757;
-  font-size: 12px;
-  margin-top: 4px;
-}
-
-.query-section {
-  padding-top: 0.75rem;
-  padding-bottom: 0.5rem;
-}
-
-/* Dark Mode Support */
-
-[data-theme="dark"] .column-builder,
-.e-dark-mode .column-builder {
-  --sf-color-text: #e0e0e0;
-  --sf-color-text-secondary: #a0a0a0;
-  --sf-color-border: #444;
-}
-
-
-[data-theme="dark"] .column-header,
-.e-dark-mode .column-header {
-  background: #1e1e1e;
-  border-bottom-color: #444;
-}
-
-[data-theme="dark"] .column-header:hover,
-.e-dark-mode .column-header:hover {
-  background: #252525;
-}
-
-[data-theme="dark"] .form-group input,
-[data-theme="dark"] .form-group select,
-.e-dark-mode .form-group input,
-.e-dark-mode .form-group select {
-  background: var(--color-sf-content-bg-color);
-  color: #e0e0e0;
-  border-color: #444;
-}
-
-[data-theme="dark"] .validation-rules-section,
-.e-dark-mode .validation-rules-section {
-  background: #1a1a1a;
-}

package/styles/themes/drag-reorder.css

@@ -1,248 +0,0 @@
-/* Drag and Reorder Styles */
-.draggable-fields-container {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-  width: 100%;
-}
-
-.form-field-draggable {
-  user-select: none;
-  position: relative;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover))
-{
-  border: 1px solid var(--dragover-border-color);
-  border-radius: 6px;
-  transition: none !important;
-}
-
-.form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper:focus-visible:not(:has(.form-field-wrapper:focus-visible))
-{
-  border: 1px solid var(--dragover-border-color);
-  border-radius: 6px;
-  transition: none !important;
-  outline: none;
-}
-
-/* Dragging down (default) - show border-bottom and padding-bottom */
-.form-preview-area.is-reordering:not(.drag-moving-up):not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover))
-{
-  padding-bottom: 8px !important;
-  padding-top: 0 !important;
-  border-bottom: 2px solid var(--dragover-border-color);
-  border-top: none !important;
-}
-
-/* Dragging up - show border-top and padding-top */
-.form-preview-area.is-reordering.drag-moving-up:not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover))
-{
-  padding-top: 8px !important;
-  padding-bottom: 0 !important;
-  border-top: 2px solid var(--dragover-border-color);
-  border-bottom: none !important;
-}
-
-/* Nested reordering - dragging down (default) */
-.form-preview-area.is-nesteditemreordering:not(.drag-moving-up):not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)):not(:has(.panel-children, .tab-children, .nested-components)) 
-{
-  padding-bottom: 8px !important;
-  padding-top: 0 !important;
-  border-bottom: 2px solid var(--dragover-border-color);
-  border-top: none !important;
-}
-
-/* Nested reordering - dragging up */
-.form-preview-area.is-nesteditemreordering.drag-moving-up:not(.dragging-over):not(:has(.touch-hovered)):not(:has(.dragging-over)) .form-field-wrapper:hover:not(:has(.form-field-wrapper:hover)):not(:has(.panel-children, .tab-children, .nested-components)) 
-{
-  padding-top: 8px !important;
-  padding-bottom: 0 !important;
-  border-top: 2px solid var(--dragover-border-color);
-  border-bottom: none !important;
-}
-
-.form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper.is-active {
-  border: 1px solid var(--dragover-border-color);
-  border-radius: 6px;
-  background-color: var(--dragover-background-color);
-}
-
-.form-preview-area.is-reordering:not(.drag-moving-up):not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered))
-{
-  padding-bottom: 8px !important;
-  padding-top: 0 !important;
-  border-bottom: 2px solid var(--dragover-border-color);
-  border-top: none !important;
-}
-
-.form-preview-area.is-reordering.drag-moving-up:not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered))
-{
-  padding-top: 8px !important;
-  padding-bottom: 0 !important;
-  border-top: 2px solid var(--dragover-border-color);
-  border-bottom: none !important;
-}
-
-.form-preview-area.is-nesteditemreordering:not(.drag-moving-up):not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered)):not(:has(.panel-children, .tab-children, .nested-components))
-{
-  padding-bottom: 8px !important;
-  padding-top: 0 !important;
-  border-bottom: 2px solid var(--dragover-border-color);
-  border-top: none !important;
-}
-
-.form-preview-area.is-nesteditemreordering.drag-moving-up:not(.dragging-over):not(:has(.dragging-over)) .form-field-wrapper.touch-hovered:not(:has(.form-field-wrapper.touch-hovered)):not(:has(.panel-children, .tab-children, .nested-components)) 
-{
-  padding-top: 8px !important;
-  padding-bottom: 0 !important;
-  border-top: 2px solid var(--dragover-border-color);
-  border-bottom: none !important;
-}
-
-.form-preview-area.is-nesteditemreordering .form-table,
-.form-preview-area.is-nesteditemreordering .form-panel,
-.form-preview-area.is-nesteditemreordering .form-tabs {
-  padding: 15px 0px 15px 0px;
-}
-
-.form-preview-area.is-reordering .form-table,
-.form-preview-area.is-reordering .form-panel,
-.form-preview-area.is-reordering .form-tabs {
-   padding: 15px 0px 15px 0px;
-}
-
-
-.form-field-draggable:active {
-  cursor: grabbing;
-}
-
-/* Clone helper styles */
-.form-field-clone {
-  display: flex;
-  align-items: center;
-  position: fixed;
-  pointer-events: none;
-}
-
-.clone-content {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 250px;
-  color: var(--jsonview-text-color);
-}
-
-/* Dragging state */
-.e-dragging {
-  opacity: 0.5;
-}
-
-/* Nested reordering styles - Panels */
-.panel-child-field-draggable {
-  cursor: pointer;
-  transition: all 0.2s ease;
-  user-select: none;
-}
-
-.panel-children.is-nested-reordering .panel-child-field-draggable:hover {
-  background-color: transparent !important;
-}
-
-/* Nested reordering styles - Tabs */
-.tab-child-field-draggable {
-  cursor: pointer;
-  user-select: none;
-}
-
-.tab-children.is-nested-reordering .tab-child-field-draggable:hover {
-  background-color: transparent !important;
-}
-
-/* Nested reordering styles - Table Cells */
-.table-cell-child-draggable {
-  cursor: pointer;
-  user-select: none;
-}
-
-.nested-components.is-nested-reordering .table-cell-child-draggable:hover {
-  background-color: transparent !important;
-}
-
-/* Nested clone helper */
-.nested-field-clone {
-  display: flex;
-  align-items: center;
-  position: fixed;
-  pointer-events: none;
-}
-
-/* Drop-between-fields indicators - Root level */
-.form-field-wrapper .form-field-draggable.drop-target-before {
-  border-top: 2px solid var(--dragover-border-color) !important;
-  padding-top: 10px;
-  transition: none !important;
-}
-
-.form-field-wrapper .form-field-draggable.drop-target-after {
-  border-bottom: 2px solid var(--dragover-border-color) !important;
-  padding-bottom: 10px;
-  transition: none !important;
-}
-
-/* Drop-between-fields indicators - Nested panels */
-.form-field-wrapper .panel-child-field-draggable.drop-target-before {
-  border-top: 2px solid var(--dragover-border-color) !important;
-  padding-top: 8px;
-  transition: none !important;
-}
-
-.form-field-wrapper .panel-child-field-draggable.drop-target-after {
-  border-bottom: 2px solid var(--dragover-border-color) !important;
-  padding-bottom: 8px;
-  transition: none !important;
-}
-
-/* Drop-between-fields indicators - Nested tabs */
-.form-field-wrapper .tab-child-field-draggable.drop-target-before {
-  border-top: 2px solid var(--dragover-border-color) !important;
-  padding-top: 8px;
-}
-
-.form-field-wrapper .tab-child-field-draggable.drop-target-after {
-  border-bottom: 2px solid var(--dragover-border-color) !important;
-  padding-bottom: 8px;
-}
-
-/* Drop-between-fields indicators - Table cells */
-.form-field-wrapper .table-cell-child-draggable.drop-target-before {
-  border-top: 2px solid var(--dragover-border-color) !important;
-  padding-top: 8px;
-}
-
-.form-field-wrapper .table-cell-child-draggable.drop-target-after {
-  border-bottom: 2px solid var(--dragover-border-color) !important;
-  padding-bottom: 8px;
-}
-
-/* Drop indicator */
-.form-field-draggable.drag-over-top {
-  border-top: 2px solid rgb(var(--sf-color-primary));
-}
-
-.form-field-draggable.drag-over-bottom {
-  border-bottom: 2px solid rgb(var(--sf-color-primary));
-}
-
-/* Form components container */
-.form-components {
-  position: relative;
-}
-
-/* Dark mode */
-[data-theme="dark"] .form-field-clone {
-  background-color: rgba(var(--sf-color-surface), 0.95);
-  border-color: rgb(var(--sf-color-primary));
-}