@syncfusion/ej2-form-renderer 34.2.8 → 35.1.42

package/styles/form-renderer/_bootstrap5-dark-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-text-color;
-$sf-tooltip-text-color: $icon-color;
-$sf-layout-border-color: $border-light;
-$e-validation-text-color: $danger;

package/styles/form-renderer/_bootstrap5-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-text-color;
-$sf-tooltip-text-color: $icon-color;
-$sf-layout-border-color: $border-light;
-$e-validation-text-color: $danger;

package/styles/form-renderer/_bootstrap5.3-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-text-color;
-$sf-tooltip-text-color: $icon-color;
-$sf-layout-border-color: $border-light;
-$e-validation-text-color: $danger;

package/styles/form-renderer/_fabric-dark-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-font-color;
-$sf-tooltip-text-color: $neutral-dark;
-$sf-layout-border-color: $neutral-light;
-$e-validation-text-color: #f44336 !default;

package/styles/form-renderer/_fabric-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-font-color;
-$sf-tooltip-text-color: $neutral-white;
-$sf-layout-border-color: $neutral-light;
-$e-validation-text-color: #f44336 !default;

package/styles/form-renderer/_fluent-dark-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-text-color;
-$sf-tooltip-text-color: $icon-color;
-$sf-layout-border-color: $border-light;
-$e-validation-text-color: $danger-dark;

package/styles/form-renderer/_fluent-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-text-color;
-$sf-tooltip-text-color: $icon-color;
-$sf-layout-border-color: $border-light;
-$e-validation-text-color: $danger-dark;

package/styles/form-renderer/_fluent2-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-text-color;
-$sf-tooltip-text-color: $icon-color;
-$sf-layout-border-color: $border-light;
-$e-validation-text-color: $danger;

package/styles/form-renderer/_highcontrast-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-font-color;
-$sf-tooltip-text-color: $bg-base-0;
-$sf-layout-border-color: $border-default;
-$e-validation-text-color: $message-font !default;

package/styles/form-renderer/_highcontrast-light-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-font-color;
-$sf-tooltip-text-color: $bg-base-0;
-$sf-layout-border-color: rgb(255, 255, 255) !default;
-$e-validation-text-color: $message-font !default;

package/styles/form-renderer/_layout.scss

@@ -1,480 +0,0 @@
-@use 'variables' as *;
-@use 'mixin' as *;
-
-@include export-module('form-renderer-theme') {
-  .form-renderer-container {
-    padding: 2rem;
-  }
-
-  .form-renderer-container hr {
-    border: none;
-    height: .5px;
-    margin: 0;
-  }
-
-  .form-renderer {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-    /* stylelint-disable-next-line property-no-unknown */
-    container-type: inline-size;
-  }
-
-  .form-renderer.twolayout {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 1.5rem;
-  }
-
-  .form-renderer.threelayout {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1.5rem;
-  }
-
-  .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;
-  }
-
-  .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;
-  }
-
-  .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;
-  }
-
-  /* stylelint-disable-next-line at-rule-no-unknown */
-  @container (max-width: 768px) {
-    .form-renderer.fourlayout {
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    .form-renderer.threelayout {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-
-  /* stylelint-disable-next-line at-rule-no-unknown */
-  @container (max-width: 480px) {
-    .form-renderer.twolayout,
-    .form-renderer.threelayout,
-    .form-renderer.fourlayout {
-      grid-template-columns: 1fr;
-    }
-  }
-
-  .e-form-renderer .form-group {
-    display: flex;
-    flex-direction: column;
-    gap: .5rem;
-  }
-
-  .e-form-renderer .field-wrapper {
-    display: flex;
-    width: 100%;
-  }
-
-  .e-form-renderer .field-wrapper.label-top {
-    flex-direction: column;
-    gap: .5rem;
-  }
-
-  .e-form-renderer .field-wrapper.label-bottom {
-    flex-direction: column-reverse;
-    gap: .5rem;
-  }
-
-  .e-form-renderer .field-wrapper.label-left {
-    flex-direction: row;
-    align-items: center;
-    gap: 1rem;
-  }
-
-  .e-form-renderer .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 {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .e-form-renderer .field-wrapper:has(.e-small) .field-label {
-    font-size: .75rem;
-  }
-
-  .e-form-renderer .form-group .field-description {
-    font-size: .75rem;
-  }
-
-  .e-form-renderer .form-group:has(.e-small) .field-description {
-    font-size: .625rem;
-  }
-
-  .e-form-renderer .field-wrapper:has(.e-bigger) .field-label {
-    font-size: 1rem;
-  }
-
-  .e-form-renderer .form-group:has(.e-bigger) .field-description {
-    font-size: .875rem;
-  }
-
-  .e-form-renderer .field-label {
-    font-size: .875rem;
-    font-weight: 500;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    gap: 4px;
-    flex-shrink: 0;
-  }
-
-  .e-form-renderer .field-label .required-asterisk {
-    margin-left: 2px;
-  }
-
-  .e-form-renderer .field-label .tooltip-icon {
-    cursor: help;
-    font-size: .875rem;
-  }
-
-  .e-form-renderer .field-input {
-    width: 100%;
-  }
-
-  .e-form-renderer .field-input .e-image-editor {
-    min-height: 250px;
-  }
-
-  .e-form-renderer .field-input .e-switch-wrapper,
-  .e-form-renderer .field-input .e-checkbox-wrapper {
-    margin: 5px 0;
-  }
-
-  .e-form-renderer .field-error {
-    font-size: .75rem;
-    margin-top: .25rem;
-    display: block;
-  }
-
-  .form-renderer-container .e-radio-group {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .form-renderer-container .e-radio-group .e-radio + label {
-    margin-left: .5rem;
-  }
-
-  .e-form-renderer .form-panel-renderer {
-    border: none;
-    border-radius: 8px;
-    padding: 0;
-  }
-
-  .e-form-renderer .form-panel-renderer:has(.panel-legend) {
-    padding: 1.5rem;
-  }
-
-  .e-form-renderer .form-panel-renderer legend {
-    font-size: 1.5rem;
-    font-weight: 600;
-    padding-bottom: 1.5rem;
-  }
-
-  .e-form-renderer .form-panel-renderer .panel-legend {
-    font-size: 1.5rem;
-    font-weight: 600;
-    padding: 0 .5rem;
-    margin-bottom: 0;
-    border-bottom: none;
-    width: unset;
-  }
-
-  .e-form-renderer .panel-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    width: 100%;
-  }
-
-  .e-form-renderer .card-content {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .e-form-renderer .form-table-renderer {
-    width: 100%;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-
-  .e-form-renderer .form-table-renderer {
-    display: table;
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-  }
-
-  .e-form-renderer .form-table-renderer .e-form-table-row {
-    display: table-row;
-    background: transparent;
-  }
-
-  .e-form-renderer .form-table-renderer .e-form-table-cell {
-    display: table-cell;
-    padding: 12px;
-    vertical-align: top;
-  }
-
-  .e-form-renderer .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 {
-    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 {
-    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 {
-    margin-bottom: 0;
-  }
-
-  .e-form-renderer .form-table-renderer .col,
-  .e-form-renderer .form-table-renderer [class ^= 'col-'] {
-    min-height: 100%;
-    vertical-align: top;
-  }
-
-  .e-form-renderer .form-table-renderer .col {
-    width: auto;
-  }
-
-  .e-form-renderer .form-table-renderer .col-1 {
-    width: 8.33333333%;
-  }
-
-  .e-form-renderer .form-table-renderer .col-2 {
-    width: 16.66666667%;
-  }
-
-  .e-form-renderer .form-table-renderer .col-3 {
-    width: 25%;
-  }
-
-  .e-form-renderer .form-table-renderer .col-4 {
-    width: 33.33333333%;
-  }
-
-  .e-form-renderer .form-table-renderer .col-5 {
-    width: 41.66666667%;
-  }
-
-  .e-form-renderer .form-table-renderer .col-6 {
-    width: 50%;
-  }
-
-  .e-form-renderer .form-table-renderer .col-7 {
-    width: 58.33333333%;
-  }
-
-  .e-form-renderer .form-table-renderer .col-8 {
-    width: 66.66666667%;
-  }
-
-  .e-form-renderer .form-table-renderer .col-9 {
-    width: 75%;
-  }
-
-  .e-form-renderer .form-table-renderer .col-10 {
-    width: 83.33333333%;
-  }
-
-  .e-form-renderer .form-table-renderer .col-11 {
-    width: 91.66666667%;
-  }
-
-  .e-form-renderer .form-table-renderer .col-12 {
-    width: auto;
-  }
-
-  /* Tabs Layout */
-  .e-form-renderer .form-tabs-renderer {
-    width: 100%;
-  }
-
-  .e-form-renderer .tab-content-renderer {
-    padding: 10px;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .e-form-renderer .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 {
-    width: 100%;
-  }
-
-  .e-form-renderer .field-input .e-float-input {
-    width: 100%;
-  }
-
-  .e-form-renderer .unsupported-component {
-    padding: 1rem;
-    border-radius: 4px;
-    font-size: .875rem;
-  }
-
-  .form-renderer-container .e-tooltip.e-msg-icon::before {
-    font-family: 'e-icons';
-    font-size: 16px;
-    height: 16px;
-    margin: 3px 4px;
-    display: flex;
-    line-height: 16px;
-  }
-
-  .e-form-renderer .form-title h1 {
-    margin-top: 0;
-  }
-
-  .e-form-renderer .form-title {
-    text-align: center;
-  }
-
-  .form-renderer-container .e-card .e-card-content {
-    padding: 12px 18px;
-  }
-
-  /* Responsive */
-  /* stylelint-disable-next-line at-rule-no-unknown */
-  @container (max-width: 480px) {
-    .e-form-renderer .form-table-renderer .table-grid {
-      display: flex;
-      flex-direction: column;
-      border-spacing: 0;
-      gap: .75rem;
-    }
-
-    .e-form-renderer .form-table-renderer .row {
-      display: flex;
-      flex-wrap: wrap;
-      gap: .75rem;
-      width: 100%;
-    }
-
-    .e-form-renderer .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-'] {
-      /* 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;
-    }
-
-    .e-form-renderer .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 {
-      /* 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 {
-      /* stylelint-disable-next-line declaration-no-important */
-      width: 100% !important;
-    }
-
-    .form-renderer-container {
-      padding: 1rem;
-    }
-  }
-
-  /* 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 {
-      flex-direction: column;
-      align-items: stretch;
-    }
-
-    .e-form-renderer .field-wrapper.label-left .field-input,
-    .e-form-renderer .field-wrapper.label-right .field-input {
-      width: 100%;
-    }
-  }
-}

package/styles/form-renderer/_material-dark-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-font-color;
-$sf-tooltip-text-color: $grey-200 !default;
-$sf-layout-border-color: $grey-800 !default;
-$e-validation-text-color: #f44336 !default;

package/styles/form-renderer/_material-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-font-color;
-$sf-tooltip-text-color: $grey-700 !default;
-$sf-layout-border-color: $grey-300 !default;
-$e-validation-text-color: #f44336 !default;

package/styles/form-renderer/_material3-dark-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-text-color;
-$sf-tooltip-text-color: $icon-color;
-$sf-layout-border-color: rgba($border-light) !default;
-$e-validation-text-color: rgba($danger) !default;

package/styles/form-renderer/_material3-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-text-color;
-$sf-tooltip-text-color: $icon-color;
-$sf-layout-border-color: rgba($border-light) !default;
-$e-validation-text-color: rgba($danger) !default;

package/styles/form-renderer/_mixin.scss

@@ -1,26 +0,0 @@
-@use 'sass:color';
-@use 'variables' as *;
-
-@mixin when-dark-skin {
-  @if $skin-name =='bootstrap5-dark' or $skin-name == 'bootstrap-dark' or $skin-name == 'fabric-dark' or $skin-name == 'fluent2-dark' or $skin-name == 'fluent-dark' or $skin-name == 'highcontrast' or $skin-name == 'material3-dark' or $skin-name == 'material-dark' or $skin-name == 'tailwind3-dark' or $skin-name == 'tailwind-dark' {
-    @content;
-  }
-}
-
-@mixin border-color-when-dark($color) {
-  @include when-dark-skin {
-    border-color: $color;
-  }
-}
-
-@mixin grid-columns($count, $gap: 1.5rem) {
-  display: grid;
-  grid-template-columns: repeat($count, 1fr);
-  gap: $gap;
-}
-
-@mixin form-group-self-end($descendant) {
-  & > .form-group:has(#{$descendant}) {
-    align-self: flex-end;
-  }
-}

package/styles/form-renderer/_tailwind-dark-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-text-color;
-$sf-tooltip-text-color: $icon-color;
-$sf-layout-border-color: $border-light;
-$e-validation-text-color: $danger !default;

package/styles/form-renderer/_tailwind-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-text-color;
-$sf-tooltip-text-color: $icon-color;
-$sf-layout-border-color: $border-light;
-$e-validation-text-color: $danger !default;

package/styles/form-renderer/_tailwind3-definition.scss

@@ -1,8 +0,0 @@
-@use 'sass:color';
-@use '@syncfusion/ej2-base/styles/common/base-variables' as *;
-
-$sf-font-family: $font-family;
-$sf-text-color: $content-text-color;
-$sf-tooltip-text-color: $icon-color;
-$sf-layout-border-color: $border-light;
-$e-validation-text-color: $danger !default;