@syncfusion/ej2-fabric-theme 34.2.8 → 35.1.37

package/styles/richtexteditor-ui/richtexteditor-ui.scss

@@ -0,0 +1,4 @@
+@use 'fabric-definition' as *;
+@use 'icons/fabric' as *;
+@use 'all' as *;
+@use 'bigger' as *;

package/styles/schedule/_layout.scss

@@ -1027,11 +1027,6 @@
         width: 100%;
       }
 
-      .e-previous-timeline,
-      .e-current-timeline {
-        z-index: 1;
-      }
-
       .e-date-header-wrap {
         max-height: 300px;
         overflow: hidden;

package/styles/schedule/schedule-lite.css

@@ -877,10 +877,6 @@
   top: 0;
   width: 100%;
 }
-.e-schedule .e-vertical-view .e-previous-timeline,
-.e-schedule .e-vertical-view .e-current-timeline {
-  z-index: 1;
-}
 .e-schedule .e-vertical-view .e-date-header-wrap {
   max-height: 300px;
   overflow: hidden;

package/styles/schedule/schedule.css

@@ -877,10 +877,6 @@
   top: 0;
   width: 100%;
 }
-.e-schedule .e-vertical-view .e-previous-timeline,
-.e-schedule .e-vertical-view .e-current-timeline {
-  z-index: 1;
-}
 .e-schedule .e-vertical-view .e-date-header-wrap {
   max-height: 300px;
   overflow: hidden;

package/styles/spreadsheet/_bigger.scss

@@ -522,6 +522,10 @@
       }
     }
 
+    & .e-find-dlg.e-dialog {
+      width: $bigger-find-dlg-width;
+    }
+
     & .e-find-dlg .e-dlg-content {
       @if $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
         padding-top: $bigger-find-dlg-content-padding-top;
@@ -1476,4 +1480,13 @@
       }
     }
   }
+
+  .e-bigger {
+    & .e-sfcontextmenu {
+      &.e-menu-popup.e-chart-menu ul .e-menu-item,
+      &.e-menu-popup.e-chart-type-menu ul .e-menu-item {
+        height: auto !important; /* stylelint-disable-line declaration-no-important */
+      }
+    }
+  }
 }

package/styles/spreadsheet/_fabric-definition.scss

@@ -175,7 +175,8 @@ $find-popup-border-color: #e0e0e0 !default;
 $find-popup-box-shadow: none !default;
 $find-tool-dlg-width: 351px !default;
 $find-tool-dlg-height: 44px !default;
-$find-dlg-width: 521px !default;
+$find-dlg-width: 550px !default;
+$bigger-find-dlg-width: 550px !default;
 $bigger-find-tool-dlg-width: 419px !default;
 $bigger-find-tool-dlg-height: 55px !default;
 $bigger-find-goto-dlg-height: 258px !default;

package/styles/spreadsheet/_layout.scss

@@ -590,6 +590,241 @@
       }
     }
 
+    & .e-collaborative-active-cell {
+      position: absolute;
+      box-sizing: border-box;
+      border: 2px solid;
+      pointer-events: none;
+      z-index: 1;
+    }
+  
+    & .e-collaborative-user-avatar {
+      position: absolute;
+      top: -21px;
+      right: -16px;
+      width: 25px;
+      height: 25px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      padding: 0 8px;
+      border: 2px solid $cell-background;
+      border-radius: 14px;
+      color: $cell-background;
+      font-size: 10px;
+      font-weight: 600;
+      line-height: 1;
+      box-shadow: 0 1px 4px rgb(0 0 0 / .25);
+      pointer-events: auto;
+      cursor: default;
+      overflow: hidden;
+      white-space: nowrap;
+      transition: width 120ms ease, min-width 120ms ease, transform 120ms ease;
+    }
+  
+    & .e-collaborative-user-avatar.e-collaborative-avatar-expanded {
+      min-width: 88px;
+      transform: translateY(-2px);
+    }
+  
+    & .e-collaborative-user-avatar::after {
+      content: attr(data-name);
+      display: inline-block;
+      max-width: 0;
+      opacity: 0;
+      overflow: hidden;
+      margin-left: 0;
+      font-size: 11px;
+      font-weight: 500;
+      transition: max-width 120ms ease, opacity 120ms ease, margin-left 120ms ease;
+    }
+  
+    & .e-collaborative-active-cell.e-collaborative-avatar-expanded .e-collaborative-user-avatar {
+      width: auto;
+      min-width: 28px;
+      padding: 0 8px;
+      border-radius: 14px;
+      transform: translateY(-2px);
+    }
+  
+    & .e-collaborative-active-cell.e-collaborative-avatar-expanded .e-collaborative-user-avatar::after {
+      max-width: 140px;
+      opacity: 1;
+      margin-left: 6px;
+    }
+  
+    & .e-collaborative-editing-indicator {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+    }
+  
+    & .e-collaborative-editing-indicator span {
+      width: 3px;
+      height: 3px;
+      border-radius: 50%;
+      background: $cell-background;
+      animation: collaborative-editing-dot 1s infinite ease-in-out;
+    }
+  
+    & .e-collaborative-editing-indicator span:nth-child(2) {
+      animation-delay: .15s;
+    }
+  
+    & .e-collaborative-editing-indicator span:nth-child(3) {
+      animation-delay: .3s;
+    }
+  
+    & .e-collaborative-ribbon-avatar {
+      position: absolute;
+    }
+  
+    & .e-collaborative-ribbon-avatar-group {
+      position: absolute;
+      left: 0;
+      top: 0;
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+  
+    & .e-collaborative-ribbon-avatar-individual {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 6px;
+      margin-right: 3px;
+      color: $cell-background;
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 1;
+      border: 2px solid $cell-background;
+      box-sizing: border-box;
+      box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
+      gap: 4px;
+    }
+  
+    & .e-collaborative-ribbon-avatar:first-child {
+      margin-left: 0;
+    }
+  
+    & .e-collaborative-ribbon-avatar-individual:not(:first-child) {
+      margin-left: 3px;
+    }
+  
+    & .e-collaborative-user-avatar-group {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin-left: 3px;
+      margin-right: 3px;
+      background: $cell-color;
+      color: $cell-background;
+      font-size: 11px;
+      font-weight: 600;
+      line-height: 1;
+      border: 2px solid $cell-background;
+      box-sizing: border-box;
+      position: absolute;
+      cursor: pointer;
+    }
+  
+    & .e-collaborator-tooltip {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+  
+    & .e-collaborator-tooltip-text {
+      display: flex;
+      flex-direction: column;
+    }
+  
+    & .e-tooltip-container-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: $cell-background;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+  
+    & .e-tooltip-wrap.e-popup {
+      opacity: 1;
+    }
+  
+    & .e-collaborator-ribbon-tooltip .e-tooltip-wrap {
+      max-height: 280px;
+      max-width: 320px;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+  
+    & .e-collaborator-ribbon-tooltip .e-tip-content {
+      padding: 8px 10px;
+    }
+  
+    & .e-collaborator-ribbon-tooltip .e-group-collaborator-tooltip {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+  
+    & .e-collaborator-ribbon-tooltip .e-group-collaborator-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
+    }
+  
+    & .e-collaborator-ribbon-tooltip .e-collaborator-tooltip-text {
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+    }
+  
+    & .e-collaborative-ribbon-avatar-with-group {
+      flex-wrap: nowrap;
+    }
+  
+    & .e-collaborative-ribbon-avatar-individual,
+    & .e-collaborative-user-avatar-group {
+      position: relative;
+    }
+  
+    & .e-collaborative-user-avatar-group,
+    & .e-collaborative-ribbon-avatar-individual {
+      --collab-user-color: $cell-color;
+    }
+  
+    & .e-collaborative-user-avatar-group:hover,
+    & .e-collaborative-ribbon-avatar-individual:hover {
+      box-shadow: 0 0 0 3px var(--collab-user-color);
+    }
+  
+    @keyframes collaborative-editing-dot {
+      0%,
+      60%,
+      100% {
+        opacity: .35;
+        transform: translateY(0);
+      }
+      30% {
+        opacity: 1;
+        transform: translateY(-2px);
+      }
+    }
+
     & .e-protect-dlg.e-dialog {
       @if $skin-name != 'Material3' {
         height: $protect-dlg-height;
@@ -1212,6 +1447,12 @@
       }
     }
 
+    &.e-drag-move-cursor {
+      & .e-table {
+        cursor: move;
+      }
+    }
+
     & .e-table {
       border: 0 none;
       border-collapse: separate;
@@ -1296,6 +1537,15 @@
             }
           }
 
+          &.e-overflow-txt {
+            overflow: visible;
+            z-index: 1;
+          }
+
+          &.e-overflow-gridline {
+            border-right-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+          }
+
           & .e-cf-databar {
             position: relative;
             z-index: 1;
@@ -1927,6 +2177,7 @@
 
     .e-active-cell,
     .e-copy-indicator,
+    .e-drag-preview-indicator,
     .e-range-indicator,
     .e-formularef-indicator {
       cursor: cell;
@@ -1968,6 +2219,7 @@
 
     .e-copy-indicator div,
     .e-range-indicator div,
+    .e-drag-preview-indicator div,
     .e-formularef-indicator div {
       position: absolute;
 
@@ -2776,7 +3028,7 @@
           .e-pane-container {
             position: static;
             max-height: 443px;
-            border-radius: 4px;
+            border-radius: 8px;
             background-color: $spread-comment-background-color;
             border: 1px solid $cell-border-color;
             transition: border-color .2s ease, border-width .2s ease;
@@ -3112,9 +3364,9 @@
     & .e-rowresize-handler {
       border-top: 1px solid;
       cursor: row-resize;
+      height: 1px;
       pointer-events: none;
       position: absolute;
-      height: 1px;
       z-index: 1;
     }
 
@@ -3673,9 +3925,24 @@
       }
 
       & .e-dlg-content {
+        & .e-find {
+          .e-search-options {
+            display: flex;
+            gap: 24px;
+          }
+          .e-search-options-container {
+            flex: 1;
+          }
+          & > .e-findCheck {
+            padding-top: 12px;
+          }
+        }
         @if $skin-name == 'bootstrap5.3' or $skin-name == 'tailwind3' {
           padding-top: $find-dlg-content-padding-top;
         }
+        @if $skin-name == 'tailwind3' {
+          padding-bottom: 0;
+        }
         & .e-find-alert-span,
         & .e-replace-alert-span {
           color: $dlg-error-color;
@@ -3743,7 +4010,17 @@
       }
 
       & .e-footer-content {
-        text-align: left;
+        @if $skin-name == 'tailwind3' {
+          text-align: right;
+        }
+        @else {
+          text-align: left;
+        }
+        @if $skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast' or $skin-name == 'highcontrast-light' {
+          & .e-find-dlg.e-btn {
+            padding: 2px 14px;
+          }
+        }
       }
 
       &.e-rtl{
@@ -4087,6 +4364,18 @@
       & .e-invisible {
         display: none;
       }
+
+      & .e-datavalidation-dlg {
+        & .e-validation-dlg {
+          & .e-values:has(.e-minimum):has(.e-maximum) {
+            display: flex;
+            flex-wrap: wrap;
+            & .e-dlg-error {
+              flex: 0 0 100%;
+            }
+          }
+        }
+      }
     }
 
     &.e-rtl {
@@ -4188,6 +4477,14 @@
     width: 1px;
   }
 
+  .e-group-collaborator-tooltip {
+    max-height: 250px;
+  }
+  
+  .e-group-collaborator-row {
+    margin-bottom: 8px;
+  }
+
   .e-spreadsheet-palette-item{
     height: auto !important; /* stylelint-disable-line declaration-no-important */
     padding: 0 !important; /* stylelint-disable-line declaration-no-important */
@@ -4364,6 +4661,7 @@
   .e-sheets-list .e-dropdown-menu,
   .e-font-list .e-dropdown-menu,
   .e-numformat-ddb .e-dropdown-menu,
+  .e-charttheme-ddb .e-dropdown-menu,
   .e-borders-ddb .e-border-selector .e-menu {
     max-height: 342px;
     overflow-y: auto !important; /* stylelint-disable-line declaration-no-important */
@@ -5512,4 +5810,233 @@
       }
     }
   }
+
+  /* Chart selector menu container for Blazor Spreadsheet */
+  .e-sfcontextmenu {
+    &.e-menu-popup.e-chart-menu ul,
+    &.e-menu-popup.e-chart-type-menu ul {
+      @include chart-menu-popup(165px);
+
+      & .e-menu-item {
+        @include chart-menu-item;
+
+        & .e-column-main,
+        & .e-bar-main {
+          height: 90px;
+
+          & .e-column1-text,
+          & .e-bar1-text {
+            height: 40%;
+            padding: 18px 16px;
+          }
+
+          & .e-column1-cont,
+          & .e-bar1-cont {
+            height: 60%;
+            @if $skin-name == 'tailwind3' {
+              margin: $chart-menu-column-cont-margin;
+            }
+
+            & .e-clusteredcolumn,
+            & .e-stackedcolumn,
+            & .e-stackedcolumn100,
+            & .e-clusteredcolumn3d,
+            & .e-stackedcolumn3d,
+            & .e-stackedcolumn1003d,
+            & .e-clusteredbar,
+            & .e-stackedbar,
+            & .e-stackedbar100,
+            & .e-clusteredbar3d,
+            & .e-stackedbar3d,
+            & .e-stackedbar1003d {
+              @if $skin-name != 'fluent2' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' {
+                @include chart-type-styles(inline-block, 40px, 100%, 0, 10px, 55px);
+              }
+              @else if $skin-name == 'fluent2' {
+                @include chart-type-styles(inline-block, 32px, 100%, 0, 10px, 56px);
+                line-height: 32px;
+              }
+              @else if $skin-name == 'tailwind3' {
+                @include chart-type-styles(inline-block, 32px, 48px, 0, 10px, 48px);
+                line-height: 32px;
+              }
+              @else if $skin-name == 'bootstrap5.3' {
+                @include chart-type-styles(inline-block, 36px, 100%, 0, 10px, 54px);
+                line-height: 36px;
+              }
+            }
+          }
+        }
+      }
+
+      @include chart-menu-popup(110px);
+
+      & .e-menu-item {
+        @include chart-menu-item;
+
+        & .e-pie-main,
+        & .e-radar-main {
+          height: 96px;
+
+          & .e-pie-text,
+          & .e-radar-text {
+            height: 40%;
+            padding: 18px 16px;
+          }
+
+          & .e-pie-cont,
+          & .e-radar-cont {
+            height: 60%;
+            @if $skin-name == 'tailwind3' {
+              margin: $chart-menu-pie-cont-margin;
+            }
+
+            & .e-pie,
+            & .e-doughnut,
+            & .e-radar,
+            & .e-radar-markers {
+              @if $skin-name != 'fluent2' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' {
+                @include chart-type-styles(inline-block, 40px, 60px, 0, 10px, 55px);
+              }
+              @else if $skin-name == 'fluent2' {
+                @include chart-type-styles(inline-block, 32px, 56px, 0, 10px, 56px);
+                line-height: 38px;
+              }
+              @else if $skin-name == 'tailwind3' {
+                @include chart-type-styles(inline-block, 32px, 52px, 0, 10px, 52px);
+                line-height: 34px;
+              }
+              @else if $skin-name == 'bootstrap5.3' {
+                @include chart-type-styles(inline-block, 36px, 54px, 0, 8px 10px, 54px);
+                line-height: 36px;
+              }
+            }
+          }
+        }
+      }
+      @include chart-menu-popup(165px);
+
+      & .e-menu-item {
+        @include chart-menu-item;
+
+        & .e-line-main,
+        & .e-area-main {
+          height: auto;
+
+          & .e-line-text,
+          & .e-area-text {
+            height: 40%;
+            padding: 18px 16px;
+          }
+
+          & .e-line-cont,
+          & .e-area-cont {
+            height: 60%;
+            @if $skin-name == 'tailwind3' {
+              margin: $chart-menu-line-cont-margin;
+            }
+
+            & .e-area,
+            & .e-stackedarea,
+            & .e-stackedarea100,
+            & .e-line,
+            & .e-stackedline,
+            & .e-stackedline100,
+            & .e-line-marker,
+            & .e-stackedline-marker,
+            & .e-stackedline100-marker {
+              @if $skin-name != 'fluent2' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' {
+                @include chart-type-styles(inline-block, 40px, 60px, 0, 10px, 55px);
+              }
+              @else if $skin-name == 'fluent2' {
+                @include chart-type-styles(inline-block, 32px, 56px, 0, 10px, 56px);
+                line-height: 36px;
+              }
+              @else if $skin-name == 'tailwind3' {
+                @include chart-type-styles(inline-block, 32px, 52px, 0, 10px, 52px);
+                line-height: 32px;
+              }
+              @else if $skin-name == 'bootstrap5.3' {
+                @include chart-type-styles(inline-block, 36px, 54px, 0, 10px, 54px);
+                line-height: 36px;
+              }
+            }
+          }
+        }
+      }
+
+      @include chart-menu-popup(60px);
+
+      & .e-menu-item {
+        @include chart-menu-item;
+
+        & .e-scatter-main {
+          height: 90px;
+
+          & .e-scatter-text {
+            height: 40%;
+            padding: 18px 16px;
+          }
+
+          & .e-scatter-cont {
+            height: 60%;
+
+            & .e-scatter {
+              @if $skin-name != 'fluent2' and $skin-name != 'bootstrap5.3' and $skin-name != 'tailwind3' {
+                @include chart-type-styles(inline-block, 60px, 60px, 0, 10px, 100%);
+              }
+              @else if $skin-name == 'tailwind3' {
+                @include chart-type-styles(inline-block, 50px, 46px, 0, 0, 60px);
+                line-height: 48px;
+                margin: $chart-menu-scatter-margin;
+              }
+              @else if $skin-name == 'fluent2' or $skin-name == 'bootstrap5.3' {
+                @include chart-type-styles(inline-block, 60px, 56px, 0, 10px, 100%);
+                line-height: 36px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .sf-spreadsheet .e-ribbon-tab-item .e-chart-ddb {
+    & .e-chart-icon,
+    & .e-chart-type-icon {
+      font-size: 26px !important; /* stylelint-disable-line declaration-no-important */
+      padding: 0 5px;
+      width: 30px;
+      @if $skin-name == 'fluent2' {
+        line-height: 26px;
+        margin-right: 3px;
+        margin-top: -3px;
+      }
+      @else {
+        margin-right: 5px;
+      }
+      @if $skin-name == 'bootstrap5.3' {
+        margin-top: -6px;
+      }
+    }
+  }
+
+  .sf-spreadsheetchart.e-chart-ddb .e-chart-menu .e-menu-icon.e-icons,
+  .sf-spreadsheetaddchart.e-addchart-ddb .e-addchart-menu .e-menu-item .e-menu-icon.e-icons {
+    font-size: 28px !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-dropdown-popup {
+    &.e-charttheme-ddb ul {
+      & .e-item.e-chart-theme {
+        & .e-theme-text {
+          & .e-menu-icon {
+            @if $skin-name !='fluent2' {
+              padding: .1px;
+            }
+          }
+        }
+      }
+    }
+  }
 }