@syncfusion/ej2-fabric-theme 34.2.9 → 35.1.37

package/styles/form-builder/form-builder.scss

@@ -0,0 +1,2 @@
+@use 'fabric-definition' as *;
+@use 'all' as *;

package/styles/form-builder/index.css

@@ -0,0 +1,53 @@
+@import '../base/base.css';
+@import '../button/button.css';
+@import '../check-box/check-box.css';
+@import '../radio-button/radio-button.css';
+@import '../switch/switch.css';
+@import '../calendar/calendar.css';
+@import '../input/input.css';
+@import '../popup/popup.css';
+@import '../datepicker/datepicker.css';
+@import '../list-view/list-view.css';
+@import '../daterangepicker/daterangepicker.css';
+@import '../datetimepicker/datetimepicker.css';
+@import '../timepicker/timepicker.css';
+@import '../drop-down-base/drop-down-base.css';
+@import '../spinner/spinner.css';
+@import '../drop-down-list/drop-down-list.css';
+@import '../multi-select/multi-select.css';
+@import '../pager/pager.css';
+@import '../excel-filter/excel-filter.css';
+@import '../numerictextbox/numerictextbox.css';
+@import '../auto-complete/auto-complete.css';
+@import '../dialog/dialog.css';
+@import '../context-menu/context-menu.css';
+@import '../tooltip/tooltip.css';
+@import '../toolbar/toolbar.css';
+@import '../h-scroll/h-scroll.css';
+@import '../v-scroll/v-scroll.css';
+@import '../grid/grid.css';
+@import '../drop-down-button/drop-down-button.css';
+@import '../textbox/textbox.css';
+@import '../uploader/uploader.css';
+@import '../color-picker/color-picker.css';
+@import '../split-button/split-button.css';
+@import '../slider/slider.css';
+@import '../image-editor/image-editor.css';
+@import '../maskedtextbox/maskedtextbox.css';
+@import '../rating/rating.css';
+@import '../signature/signature.css';
+@import '../textarea/textarea.css';
+@import '../tab/tab.css';
+@import '../message/message.css';
+@import '../menu/menu.css';
+@import '../ai-assistview/ai-assistview.css';
+@import '../floating-action-button/floating-action-button.css';
+@import '../skeleton/skeleton.css';
+@import '../mention/mention.css';
+@import '../rich-text-editor/rich-text-editor.css';
+@import '../button-group/button-group.css';
+@import '../query-builder/query-builder.css';
+@import '../combo-box/combo-box.css';
+@import '../inplace-editor/inplace-editor.css';
+@import '../form-renderer/form-renderer.css';
+@import '../form-builder/form-builder.css';

package/styles/form-builder/index.scss

@@ -0,0 +1,53 @@
+@use '../base/base' as *;
+@use '../button/button' as *;
+@use '../check-box/check-box' as *;
+@use '../radio-button/radio-button' as *;
+@use '../switch/switch' as *;
+@use '../calendar/calendar' as *;
+@use '../input/input' as *;
+@use '../popup/popup' as *;
+@use '../datepicker/datepicker' as *;
+@use '../list-view/list-view' as *;
+@use '../daterangepicker/daterangepicker' as *;
+@use '../datetimepicker/datetimepicker' as *;
+@use '../timepicker/timepicker' as *;
+@use '../drop-down-base/drop-down-base' as *;
+@use '../spinner/spinner' as *;
+@use '../drop-down-list/drop-down-list' as *;
+@use '../multi-select/multi-select' as *;
+@use '../pager/pager' as *;
+@use '../excel-filter/excel-filter' as *;
+@use '../numerictextbox/numerictextbox' as *;
+@use '../auto-complete/auto-complete' as *;
+@use '../dialog/dialog' as *;
+@use '../context-menu/context-menu' as *;
+@use '../tooltip/tooltip' as *;
+@use '../toolbar/toolbar' as *;
+@use '../h-scroll/h-scroll' as *;
+@use '../v-scroll/v-scroll' as *;
+@use '../grid/grid' as *;
+@use '../drop-down-button/drop-down-button' as *;
+@use '../textbox/textbox' as *;
+@use '../uploader/uploader' as *;
+@use '../color-picker/color-picker' as *;
+@use '../split-button/split-button' as *;
+@use '../slider/slider' as *;
+@use '../image-editor/image-editor' as *;
+@use '../maskedtextbox/maskedtextbox' as *;
+@use '../rating/rating' as *;
+@use '../signature/signature' as *;
+@use '../textarea/textarea' as *;
+@use '../tab/tab' as *;
+@use '../message/message' as *;
+@use '../menu/menu' as *;
+@use '../ai-assistview/ai-assistview' as *;
+@use '../floating-action-button/floating-action-button' as *;
+@use '../skeleton/skeleton' as *;
+@use '../mention/mention' as *;
+@use '../rich-text-editor/rich-text-editor' as *;
+@use '../button-group/button-group' as *;
+@use '../query-builder/query-builder' as *;
+@use '../combo-box/combo-box' as *;
+@use '../inplace-editor/inplace-editor' as *;
+@use '../form-renderer/form-renderer' as *;
+@use '../form-builder/form-builder' as *;

package/styles/form-renderer/_layout.scss

@@ -4,6 +4,8 @@
 @include export-module('form-renderer-theme') {
   .form-renderer-container {
     padding: 2rem;
+    /* stylelint-disable-next-line property-no-unknown */
+    container-type: inline-size;
   }
 
   .form-renderer-container hr {
@@ -16,8 +18,6 @@
     display: flex;
     flex-direction: column;
     gap: 1.5rem;
-    /* stylelint-disable-next-line property-no-unknown */
-    container-type: inline-size;
   }
 
   .form-renderer.twolayout {
@@ -89,7 +89,7 @@
   }
 
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @container (max-width: 480px) {
+  @container (max-width: 430px) {
     .form-renderer.twolayout,
     .form-renderer.threelayout,
     .form-renderer.fourlayout {
@@ -103,41 +103,41 @@
     gap: .5rem;
   }
 
-  .e-form-renderer .field-wrapper {
+  .field-wrapper {
     display: flex;
     width: 100%;
   }
 
-  .e-form-renderer .field-wrapper.label-top {
+  .field-wrapper.label-top {
     flex-direction: column;
     gap: .5rem;
   }
 
-  .e-form-renderer .field-wrapper.label-bottom {
+  .field-wrapper.label-bottom {
     flex-direction: column-reverse;
     gap: .5rem;
   }
 
-  .e-form-renderer .field-wrapper.label-left {
+  .field-wrapper.label-left {
     flex-direction: row;
     align-items: center;
     gap: 1rem;
   }
 
-  .e-form-renderer .field-wrapper.label-right {
+  .field-wrapper.label-right {
     flex-direction: row-reverse;
     align-items: center;
     gap: 1rem;
     justify-content: flex-end;
   }
 
-  .e-form-renderer .field-wrapper.label-left .field-input,
-  .e-form-renderer .field-wrapper.label-right .field-input {
+  .field-wrapper.label-left .field-input,
+  .field-wrapper.label-right .field-input {
     flex: 1;
     min-width: 0;
   }
 
-  .e-form-renderer .field-wrapper:has(.e-small) .field-label {
+  .field-wrapper:has(.e-small) .field-label {
     font-size: .75rem;
   }
 
@@ -149,7 +149,7 @@
     font-size: .625rem;
   }
 
-  .e-form-renderer .field-wrapper:has(.e-bigger) .field-label {
+  .field-wrapper:has(.e-bigger) .field-label {
     font-size: 1rem;
   }
 
@@ -157,7 +157,7 @@
     font-size: .875rem;
   }
 
-  .e-form-renderer .field-label {
+  .field-label {
     font-size: .875rem;
     font-weight: 500;
     margin: 0;
@@ -167,29 +167,29 @@
     flex-shrink: 0;
   }
 
-  .e-form-renderer .field-label .required-asterisk {
+  .field-label .required-asterisk {
     margin-left: 2px;
   }
 
-  .e-form-renderer .field-label .tooltip-icon {
+  .field-label .tooltip-icon {
     cursor: help;
     font-size: .875rem;
   }
 
-  .e-form-renderer .field-input {
+  .field-input {
     width: 100%;
   }
 
-  .e-form-renderer .field-input .e-image-editor {
+  .field-input .e-image-editor {
     min-height: 250px;
   }
 
-  .e-form-renderer .field-input .e-switch-wrapper,
-  .e-form-renderer .field-input .e-checkbox-wrapper {
+  .field-input .e-switch-wrapper,
+  .field-input .e-checkbox-wrapper {
     margin: 5px 0;
   }
 
-  .e-form-renderer .field-error {
+  .field-error {
     font-size: .75rem;
     margin-top: .25rem;
     display: block;
@@ -204,23 +204,23 @@
     margin-left: .5rem;
   }
 
-  .e-form-renderer .form-panel-renderer {
+  .form-panel-renderer {
     border: none;
     border-radius: 8px;
     padding: 0;
   }
 
-  .e-form-renderer .form-panel-renderer:has(.panel-legend) {
+  .form-panel-renderer:has(.panel-legend) {
     padding: 1.5rem;
   }
 
-  .e-form-renderer .form-panel-renderer legend {
+  .form-panel-renderer legend {
     font-size: 1.5rem;
     font-weight: 600;
     padding-bottom: 1.5rem;
   }
 
-  .e-form-renderer .form-panel-renderer .panel-legend {
+  .form-panel-renderer .panel-legend {
     font-size: 1.5rem;
     font-weight: 600;
     padding: 0 .5rem;
@@ -229,26 +229,26 @@
     width: unset;
   }
 
-  .e-form-renderer .panel-content {
+  .panel-content {
     display: flex;
     flex-direction: column;
     gap: 1rem;
     width: 100%;
   }
 
-  .e-form-renderer .card-content {
+  .card-content {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
 
-  .e-form-renderer .form-table-renderer {
+  .form-table-renderer {
     width: 100%;
     border-radius: 8px;
     overflow: hidden;
   }
 
-  .e-form-renderer .form-table-renderer {
+  .form-table-renderer {
     display: table;
     width: 100%;
     border-collapse: separate;
@@ -257,126 +257,126 @@
     overflow-y: hidden;
   }
 
-  .e-form-renderer .form-table-renderer .e-form-table-row {
+  .form-table-renderer .e-form-table-row {
     display: table-row;
     background: transparent;
   }
 
-  .e-form-renderer .form-table-renderer .e-form-table-cell {
+  .form-table-renderer .e-form-table-cell {
     display: table-cell;
     padding: 12px;
     vertical-align: top;
   }
 
-  .e-form-renderer .e-form-table-cell:last-child {
+  .e-form-table-cell:last-child {
     border-right: none;
   }
 
-  .e-form-renderer .form-table-renderer .e-form-table-row:last-child .e-form-table-cell {
+  .form-table-renderer .e-form-table-row:last-child .e-form-table-cell:last-child {
     border-bottom: none;
   }
 
-  .e-form-renderer .e-form-table-cell > .form-table-renderer,
-  .e-form-renderer .e-form-table-cell > .form-tabs-renderer,
-  .e-form-renderer .e-form-table-cell > .form-card-renderer,
-  .e-form-renderer .e-form-table-cell > .form-panel-renderer,
-  .e-form-renderer .e-form-table-cell > .form-group {
+  .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-renderer .e-form-table-cell > .form-table-renderer:last-child,
-  .e-form-renderer .e-form-table-cell > .form-tabs-renderer:last-child,
-  .e-form-renderer .e-form-table-cell > .form-card-renderer:last-child,
-  .e-form-renderer .e-form-table-cell > .form-panel-renderer:last-child,
-  .e-form-renderer .e-form-table-cell > .form-group:last-child {
+  .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;
   }
 
-  .e-form-renderer .form-table-renderer .col,
-  .e-form-renderer .form-table-renderer [class ^= 'col-'] {
+  .form-table-renderer .col,
+  .form-table-renderer [class ^= 'col-'] {
     min-height: 100%;
     vertical-align: top;
   }
 
-  .e-form-renderer .form-table-renderer .col {
+  .form-table-renderer .col {
     width: auto;
   }
 
-  .e-form-renderer .form-table-renderer .col-1 {
+  .form-table-renderer .col-1 {
     width: 8.33333333%;
   }
 
-  .e-form-renderer .form-table-renderer .col-2 {
+  .form-table-renderer .col-2 {
     width: 16.66666667%;
   }
 
-  .e-form-renderer .form-table-renderer .col-3 {
+  .form-table-renderer .col-3 {
     width: 25%;
   }
 
-  .e-form-renderer .form-table-renderer .col-4 {
+  .form-table-renderer .col-4 {
     width: 33.33333333%;
   }
 
-  .e-form-renderer .form-table-renderer .col-5 {
+  .form-table-renderer .col-5 {
     width: 41.66666667%;
   }
 
-  .e-form-renderer .form-table-renderer .col-6 {
+  .form-table-renderer .col-6 {
     width: 50%;
   }
 
-  .e-form-renderer .form-table-renderer .col-7 {
+  .form-table-renderer .col-7 {
     width: 58.33333333%;
   }
 
-  .e-form-renderer .form-table-renderer .col-8 {
+  .form-table-renderer .col-8 {
     width: 66.66666667%;
   }
 
-  .e-form-renderer .form-table-renderer .col-9 {
+  .form-table-renderer .col-9 {
     width: 75%;
   }
 
-  .e-form-renderer .form-table-renderer .col-10 {
+  .form-table-renderer .col-10 {
     width: 83.33333333%;
   }
 
-  .e-form-renderer .form-table-renderer .col-11 {
+  .form-table-renderer .col-11 {
     width: 91.66666667%;
   }
 
-  .e-form-renderer .form-table-renderer .col-12 {
+  .form-table-renderer .col-12 {
     width: auto;
   }
 
   /* Tabs Layout */
-  .e-form-renderer .form-tabs-renderer {
+  .form-tabs-renderer {
     width: 100%;
   }
 
-  .e-form-renderer .tab-content-renderer {
+  .tab-content-renderer {
     padding: 10px;
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
 
-  .e-form-renderer .form-submit-button {
+  .form-submit-button {
     margin-top: 1.5rem;
     align-self: flex-start;
   }
 
-  .e-form-renderer .field-input .e-input-group,
-  .e-form-renderer .field-input .e-control-wrapper {
+  .field-input .e-input-group,
+  .field-input .e-control-wrapper {
     width: 100%;
   }
 
-  .e-form-renderer .field-input .e-float-input {
+  .field-input .e-float-input {
     width: 100%;
   }
 
-  .e-form-renderer .unsupported-component {
+  .unsupported-component {
     padding: 1rem;
     border-radius: 4px;
     font-size: .875rem;
@@ -391,11 +391,11 @@
     line-height: 16px;
   }
 
-  .e-form-renderer .form-title h1 {
+  .form-title h1 {
     margin-top: 0;
   }
 
-  .e-form-renderer .form-title {
+  .form-title {
     text-align: center;
   }
 
@@ -405,56 +405,56 @@
 
   /* Responsive */
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @container (max-width: 480px) {
-    .e-form-renderer .form-table-renderer .table-grid {
+  @container (max-width: 430px) {
+    .form-table-renderer .table-grid {
       display: flex;
       flex-direction: column;
       border-spacing: 0;
       gap: .75rem;
     }
 
-    .e-form-renderer .form-table-renderer .row {
+    .form-table-renderer .row {
       display: flex;
       flex-wrap: wrap;
       gap: .75rem;
       width: 100%;
     }
 
-    .e-form-renderer .form-table-renderer .e-form-table-cell {
+    .form-table-renderer .e-form-table-cell {
       display: block;
       flex: 1 1 auto;
       padding: 12px;
     }
 
     /* Override column width classes on mobile - let content flow naturally */
-    .e-form-renderer .form-table-renderer .col,
-    .e-form-renderer .form-table-renderer [class ^= 'col-'] {
+    .form-table-renderer .col,
+    .form-table-renderer [class ^= 'col-'] {
       /* stylelint-disable-next-line declaration-no-important */
       width: auto !important;
       min-width: 250px;
       flex: 1 1 auto;
     }
 
-    .e-form-renderer .table-border .e-form-table-cell {
-      border-right: none;
-      border-radius: 4px;
+    .table-border .e-form-table-cell {
+      /* stylelint-disable-next-line declaration-no-important */
+      border-right: none !important;
     }
 
-    .e-form-renderer .form-table-renderer .row:last-child .e-form-table-cell {
+    .form-table-renderer .row:last-child .e-form-table-cell {
       border-bottom: none;
     }
   }
 
   /* stylelint-disable-next-line at-rule-no-unknown */
-  @container (max-width: 480px) {
-    .e-form-renderer .form-table-renderer .e-form-table-row {
+  @container (max-width: 430px) {
+    .form-table-renderer .e-form-table-row {
       /* stylelint-disable-next-line declaration-no-important */
       flex-direction: column !important;
       /* stylelint-disable-next-line declaration-no-important */
       gap: 1rem !important;
     }
 
-    .e-form-renderer .form-table-renderer .e-form-table-cell {
+    .form-table-renderer .e-form-table-cell {
       /* stylelint-disable-next-line declaration-no-important */
       width: 100% !important;
     }
@@ -466,14 +466,14 @@
 
   /* stylelint-disable-next-line at-rule-no-unknown */
   @container (max-width: 400px) {
-    .e-form-renderer .field-wrapper.label-left,
-    .e-form-renderer .field-wrapper.label-right {
+    .field-wrapper.label-left,
+    .field-wrapper.label-right {
       flex-direction: column;
       align-items: stretch;
     }
 
-    .e-form-renderer .field-wrapper.label-left .field-input,
-    .e-form-renderer .field-wrapper.label-right .field-input {
+    .field-wrapper.label-left .field-input,
+    .field-wrapper.label-right .field-input {
       width: 100%;
     }
   }

package/styles/form-renderer/_theme.scss

@@ -7,62 +7,67 @@
     background-color: $sf-layout-border-color;
   }
 
-  .e-form-renderer .field-label {
+  .field-label {
     color: $sf-text-color;
     font-family: $sf-font-family;
   }
 
-  .e-form-renderer .form-panel-renderer .panel-legend {
+  .form-panel-renderer .panel-legend {
     color: $sf-text-color;
     font-family: $sf-font-family;
   }
 
-  .e-form-renderer .field-label .required-asterisk {
+  .field-label .required-asterisk {
     color: $e-validation-text-color;
   }
 
-  .e-form-renderer .field-label .tooltip-icon {
+  .field-label .tooltip-icon {
     color: $sf-tooltip-text-color;
   }
 
-  .e-form-renderer .field-error {
+  .field-error {
     color: $e-validation-text-color;
   }
 
-  .e-form-renderer .form-panel-renderer:has(.panel-legend) {
+  .form-panel-renderer:has(.panel-legend) {
     border: 1px solid $sf-layout-border-color;
     font-family: $sf-font-family;
   }
 
-  .e-form-renderer .form-table-renderer.table-border {
+  .form-table-renderer.table-border {
     border: 1px solid $sf-layout-border-color;
   }
 
-  .e-form-renderer .table-border .e-form-table-cell {
+  .table-border .e-form-table-cell {
     border-bottom: 1px solid $sf-layout-border-color;
     border-right: 1px solid $sf-layout-border-color;
   }
 
-  .e-form-renderer .form-panel-renderer,
-  .e-form-renderer .form-table-renderer {
+  .form-renderer-container .e-tooltip .e-msg-icon::before {
+    content: '\e800';
+    // color: $color-sf-msg-icon-color;
+  }
+
+  .form-panel-renderer,
+  .form-table-renderer {
     @include border-color-when-dark($sf-layout-border-color);
   }
 
-  .e-form-renderer .e-form-table-row {
+  .e-form-table-row {
     @include border-color-when-dark($sf-layout-border-color);
   }
 
-  .e-form-renderer .e-form-table-cell {
+  .e-form-table-cell {
     @include border-color-when-dark($sf-layout-border-color);
   }
 
   /* stylelint-disable-next-line at-rule-no-unknown */
   @container (max-width: 480px) {
-    .e-form-renderer .table-border .e-form-table-cell {
+    .table-border .e-form-table-cell {
       border-bottom: 1px solid $sf-layout-border-color;
     }
 
-    .e-form-renderer .form-table-renderer .e-form-table-cell:last-child {
+    .form-table-renderer .e-form-table-cell:last-child {
       border-bottom: 1px solid $sf-layout-border-color;
     }
   }