@syncfusion/ej2-navigations 20.1.48 → 20.1.51-10460

package/styles/pager/icons/_fusionnew.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-fusionnew-icons') {
+
+  /* !componenticons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e7a9';
+    }
+
+    .e-icon-first::before {
+      content: '\e744';
+    }
+
+    .e-icon-prev::before {
+      content: '\e765';
+    }
+
+    .e-icon-next::before {
+      content: '\e748';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e744';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e7a9';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e748';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e765';
+      }
+    }
+  }
+}

package/styles/pager/icons/_highcontrast-light.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-highcontrast-light-icons') {
+
+  /*! component icons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e938';
+    }
+
+    .e-icon-first::before {
+      content: '\e999';
+    }
+
+    .e-icon-prev::before {
+      content: '\e829';
+    }
+
+    .e-icon-next::before {
+      content: '\e830';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e999';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e938';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e830';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e829';
+      }
+    }
+  }
+}

package/styles/pager/icons/_highcontrast.scss

@@ -0,0 +1,46 @@
+@include export-module('pager-highcontrast-icons') {
+
+  /*! component icons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e938';
+    }
+
+    .e-icon-first::before {
+      content: '\e999';
+    }
+
+    .e-icon-prev::before {
+      content: '\e829';
+    }
+
+    .e-icon-next::before {
+      content: '\e830';
+    }
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e999';
+      }
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e938';
+      }
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e830';
+      }
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e829';
+      }
+    }
+  }
+}

package/styles/pager/icons/_material-dark.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-material-dark-icons') {
+
+  /*! component icons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e897';
+    }
+
+    .e-icon-first::before {
+      content: '\e896';
+    }
+
+    .e-icon-prev::before {
+      content: '\e904';
+    }
+
+    .e-icon-next::before {
+      content: '\e913';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e896';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e897';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e913';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e904';
+      }
+    }
+  }
+}

package/styles/pager/icons/_material.scss

@@ -0,0 +1,46 @@
+@include export-module('pager-material-icons') {
+
+  /*! component icons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e897';
+    }
+
+    .e-icon-first::before {
+      content: '\e896';
+    }
+
+    .e-icon-prev::before {
+      content: '\e904';
+    }
+
+    .e-icon-next::before {
+      content: '\e913';
+    }
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e896';
+      }
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e897';
+      }
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e913';
+      }
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e904';
+      }
+    }
+  }
+}

package/styles/pager/icons/_material3.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-material3-icons') {
+
+  /* !componenticons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e818';
+    }
+
+    .e-icon-first::before {
+      content: '\e833';
+    }
+
+    .e-icon-prev::before {
+      content: '\e765';
+    }
+
+    .e-icon-next::before {
+      content: '\e748';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e833';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e818';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e748';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e765';
+      }
+    }
+  }
+}

package/styles/pager/icons/_tailwind.scss

@@ -0,0 +1,50 @@
+@include export-module('pager-tailwind-icons') {
+
+  /* !componenticons */
+
+  #{&}.e-pager,
+  .e-grid-menu {
+
+    .e-icon-last::before {
+      content: '\e7a9';
+    }
+
+    .e-icon-first::before {
+      content: '\e744';
+    }
+
+    .e-icon-prev::before {
+      content: '\e765';
+    }
+
+    .e-icon-next::before {
+      content: '\e748';
+    }
+
+    &.e-rtl {
+      & .e-icon-last.e-lastpage::before,
+      & .e-icon-last.e-lastpage:hover,
+      & .e-icon-last.e-lastpagedisabled::before {
+        content: '\e744';
+      }
+
+      & .e-icon-first.e-firstpage::before,
+      & .e-icon-first.e-firstpage:hover,
+      & .e-icon-first.e-firstpagedisabled::before {
+        content: '\e7a9';
+      }
+
+      & .e-icon-prev.e-prevpage::before,
+      & .e-icon-prev.e-prevpage:hover,
+      & .e-icon-prev.e-prevpagedisabled::before {
+        content: '\e748';
+      }
+
+      & .e-icon-next.e-nextpage::before,
+      & .e-icon-next.e-nextpage:hover,
+      & .e-icon-next.e-nextpagedisabled::before {
+        content: '\e765';
+      }
+    }
+  }
+}

package/styles/sidebar/_bds-definition.scss

@@ -0,0 +1,53 @@
+$sidebar-box-shadow: $shadow-none !default;
+
+//color variables
+$sidebar-background: $content-bg-color !default;
+$sidebar-border: $border-light !default;
+$sidebar-overlay: $overlay-bg-color !default;
+
+.e-sidebar {
+  /* stylelint-disable property-no-vendor-prefix */
+  -webkit-tap-highlight-color: transparent;
+  background: $sidebar-background;
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  transition: none;
+  vertical-align: middle;
+  visibility: hidden;
+  will-change: transform;
+
+  /* stylelint-disable */
+  &.e-right {
+    @if ($skin-name == 'tailwind') {
+      border-left: 1px solid $sidebar-border !important;
+    }
+    @else {
+      border-left: 1px solid $sidebar-border;
+    }
+    left: auto;
+    right: 0;
+    top: 0;
+  }
+
+  &.e-left {
+    @if ($skin-name == 'tailwind') {
+      border-right: 1px solid $sidebar-border !important;
+    }
+    @else {
+      border-right: 1px solid $sidebar-border;
+    }
+    left: 0;
+    right: auto;
+    top: 0;
+  }
+}
+
+.e-backdrop {
+  filter: blur(2px) !important;
+}
+
+.e-sidebar-overlay {
+  backdrop-filter: blur(2px) !important;
+}

package/styles/sidebar/_bootstrap5.3-definition.scss

@@ -0,0 +1,6 @@
+$sidebar-box-shadow: $shadow !default;
+
+//color variables
+$sidebar-background: $content-bg-color-alt1 !default;
+$sidebar-border: $transparent !default;
+$sidebar-overlay: $overlay-bg-color !default;

package/styles/sidebar/_fluent2-definition.scss

@@ -0,0 +1,8 @@
+$sidebar-box-shadow: $shadow-none !default;
+
+//color variables
+$sidebar-background: $content-bg-color !default;
+$sidebar-border: $border-light !default;
+$sidebar-overlay: $overlay-bg-color !default;
+$sidebar-overlay-filter: blur(2px) !default;
+$sidebar-overlay-opacity: .4 !default;

package/styles/sidebar/_fusionnew-definition.scss

@@ -0,0 +1,6 @@
+$sidebar-box-shadow: $shadow !default;
+
+//color variables
+$sidebar-background: $content-bg-color-alt1 !default;
+$sidebar-border: $transparent !default;
+$sidebar-overlay: $overlay-bg-color !default;

package/styles/sidebar/_material3-dark-definition.scss

@@ -0,0 +1 @@
+@import './material3-definition.scss';

package/styles/sidebar/_material3-definition.scss

@@ -0,0 +1,4 @@
+$sidebar-box-shadow: rgba($shadow) !default;
+$sidebar-background: $surface2 !default;
+$sidebar-border: $transparent !default;
+$sidebar-overlay: $overlay-bg-color !default;

package/styles/sidebar/fluent2.scss

@@ -0,0 +1,3 @@
+@import 'ej2-base/styles/definition/fluent2.scss';
+@import 'fluent2-definition.scss';
+@import 'all.scss';

package/styles/sidebar/material3-dark.scss

@@ -0,0 +1,3 @@
+@import 'ej2-base/styles/definition/material3-dark.scss';
+@import 'material3-dark-definition.scss';
+@import 'all.scss';

package/styles/sidebar/material3.scss

@@ -0,0 +1,3 @@
+@import 'ej2-base/styles/definition/material3.scss';
+@import 'material3-definition.scss';
+@import 'all.scss';

package/styles/stepper/_all.scss

@@ -0,0 +1,2 @@
+@import 'layout.scss';
+@import 'theme.scss';

package/styles/stepper/_bds-definition.scss

@@ -0,0 +1,72 @@
+$stepper-ol-padding: 0 !default;
+$stepper-step-radius: 9999px !default;
+$stepper-step-width: 32px !default;
+$stepper-icon-size: 16px !default;
+$stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-value-height: 100% !default;
+$stepper-progress-position: 50% !default;
+$stepper-temp-outline-width: 2px solid !default;
+$stepper-label-top: 1em !default;
+$stepper-label-bottom: 4.5em !default;
+$stepper-label-position: 2.5em !default;
+$stepper-validation-position: .25em !default;
+$stepper-text-padding: 0 6px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-label-optional: 3em !default;
+$stepper-text-postion: 10px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 2px solid !default;
+$stepper-label-order: -1 !default;
+$stepper-font-weight: 600 !default;
+$stepper-text-size: 14px !default;
+$stepper-tooltip-tip-bottom-height: 8px !default;
+
+$stepper-small-step-width: 28px !default;
+$stepper-small-icon-size: 14px !default;
+$stepper-small-optional-size: 10px !default;
+$stepper-small-text-size: 12px !default;
+
+$stepper-bigger-step-width: 40px !default;
+$stepper-bigger-icon-size: 18px !default;
+$stepper-bigger-optional-size: 14px !default;
+$stepper-bigger-text-size: 16px !default;
+
+$stepper-bigger-small-step-width: 36px !default;
+$stepper-bigger-small-icon-size: 16px !default;
+$stepper-bigger-small-optional-size: 12px !default;
+$stepper-bigger-small-text-size: 14px !default;
+
+$step-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $primary, 0 0 0 8px $content-bg-color !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $content-text-color, 0 0 0 8px $content-bg-color !default;
+$step-valid-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $success-border-color, 0 0 0 8px $content-bg-color !default;
+$step-error-li-shadow: 0 0 0 2px $content-bg-color, 0 0 0 4px $border-error, 0 0 0 8px $content-bg-color !default;
+$step-li-shadow: 0 0 0 8px $content-bg-color !default;
+$step-border-color: $border !default;
+$step-hover-text-color: $primary-text-color !default;
+$step-hover-not-text-color: $content-text-color-alt2 !default;
+$step-hover-border-color: $border-dark !default;
+$step-active-border-color: $border-dark !default;
+$stepper-outline-color: $content-bg-color !default;
+$step-color: $content-text-color-alt2 !default;
+$step-optional-color: $content-text-color-alt2 !default;
+$step-bg-color: $content-bg-color !default;
+$step-completed-color: $primary-text-color !default;
+$step-completed-bg-color: $primary !default;
+$step-progress-bg-color: $border !default;
+$step-progress-value-bg-color: $primary !default;
+$step-disabled-bg-color: $border-light !default;
+$step-disabled-font-color: $content-text-color-disabled !default;
+$step-disabled-color: $content-text-color-disabled !default;
+$stepper-text-color: $content-text-color !default;
+$step-valid-icon-only-color: $success-border-color !default;
+$step-error-icon-only-color: $border-error !default;
+$step-valid-completed-color: $primary-text-color !default;
+$step-valid-completed-bg-color: $success-border-color !default;
+$step-error-icon-color: $primary-text-color !default;
+$step-error-completed-color: $border-error !default;
+$step-error-completed-bg-color: $border-error !default;
+$step-hover-color: $content-bg-color !default;
+$step-active-color: $content-bg-color !default;
+$step-selected-hover-color: $primary-bg-color-hover !default;
+$step-selected-active-color: $primary-bg-color-pressed !default;

package/styles/stepper/_bigger.scss

@@ -0,0 +1,53 @@
+@mixin stepper-styles($step-width, $icon-size, $text-size, $optional-size) {
+  &.e-step-type-indicator .e-step-container:not(.e-step-item.e-step-label.e-step-text) {
+    .e-icons.e-step-indicator {
+      font-size: $step-width;
+    }
+    &.e-step-notstarted .e-icons.e-step-indicator {
+      width: $step-width;
+      height: $step-width;
+    }
+  }
+
+  .e-step-container {
+    .e-step,
+    .e-indicator {
+      min-width: $step-width;
+      min-height: $step-width;
+    }
+
+    .e-indicator {
+      font-size: $icon-size;
+    }
+
+    .e-step-text-container,
+    .e-step-label-container {
+      font-size: $text-size;
+    }
+
+    .e-step-content {
+      font-size: $icon-size;
+    }
+
+    .e-step-label-optional {
+      font-size: $optional-size;
+    }
+  }
+  &.e-vertical .e-step-label-container.e-label-after .e-step-label-optional {
+    font-size: $optional-size;
+  }
+}
+
+@include export-module('stepper-bigger') {
+  .e-bigger.e-stepper,
+  .e-bigger .e-stepper {
+    @include stepper-styles($stepper-bigger-step-width, $stepper-bigger-icon-size, $stepper-bigger-text-size, $stepper-bigger-optional-size);
+  }
+
+  .e-bigger.e-small.e-stepper,
+  .e-bigger.e-small .e-stepper,
+  .e-bigger .e-small.e-stepper,
+  .e-small .e-bigger.e-stepper {
+    @include stepper-styles($stepper-bigger-small-step-width, $stepper-bigger-small-icon-size, $stepper-bigger-small-text-size, $stepper-bigger-small-optional-size);
+  }
+}

package/styles/stepper/_bootstrap-dark-definition.scss

@@ -0,0 +1,72 @@
+$stepper-ol-padding: 0 !default;
+$stepper-step-radius: 9999px !default;
+$stepper-step-width: 32px !default;
+$stepper-icon-size: 16px !default;
+$stepper-progress-bar-height: 1.6px !default;
+$stepper-progress-value-height: 100% !default;
+$stepper-progress-position: 50% !default;
+$stepper-temp-outline-width: 2px solid !default;
+$stepper-label-top: 1em !default;
+$stepper-label-bottom: 4.5em !default;
+$stepper-label-position: 2.5em !default;
+$stepper-validation-position: .25em !default;
+$stepper-text-padding: 0 6px !default;
+$stepper-icon-text-padding: 0 8px !default;
+$stepper-text-vert-padding: 6px 0 !default;
+$stepper-label-optional: 3em !default;
+$stepper-text-postion: 10px !default;
+$stepper-optional-size: 12px !default;
+$step-border: 2px solid !default;
+$stepper-label-order: -1 !default;
+$stepper-font-weight: 600 !default;
+$stepper-text-size: 14px !default;
+$stepper-tooltip-tip-bottom-height: 8px !default;
+
+$stepper-small-step-width: 28px !default;
+$stepper-small-icon-size: 14px !default;
+$stepper-small-optional-size: 10px !default;
+$stepper-small-text-size: 12px !default;
+
+$stepper-bigger-step-width: 40px !default;
+$stepper-bigger-icon-size: 18px !default;
+$stepper-bigger-optional-size: 14px !default;
+$stepper-bigger-text-size: 16px !default;
+
+$stepper-bigger-small-step-width: 36px !default;
+$stepper-bigger-small-icon-size: 16px !default;
+$stepper-bigger-small-optional-size: 12px !default;
+$stepper-bigger-small-text-size: 14px !default;
+
+$step-selected-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $brand-primary, 0 0 0 8px $gray-base !default;
+$step-keyboard-selected-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $grey-light-font, 0 0 0 8px $gray-base !default;
+$step-valid-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $brand-success, 0 0 0 8px $gray-base !default;
+$step-error-li-shadow: 0 0 0 2px $gray-base, 0 0 0 4px $brand-danger, 0 0 0 8px $gray-base !default;
+$step-li-shadow: 0 0 0 8px $gray-base !default;
+$step-border-color: $grey-8c !default;
+$step-hover-text-color: $brand-primary-font !default;
+$step-hover-not-text-color: $grey-dark-font !default;
+$step-hover-border-color: $grey-f9 !default;
+$step-active-border-color: $grey-f9 !default;
+$stepper-outline-color: $gray-base !default;
+$step-color: $grey-dark-font !default;
+$step-optional-color: $grey-cc !default;
+$step-bg-color: $gray-light !default;
+$step-completed-color: $brand-primary-font !default;
+$step-completed-bg-color: $brand-primary !default;
+$step-progress-bg-color: $grey-8c !default;
+$step-progress-value-bg-color: $brand-primary !default;
+$step-disabled-bg-color: $grey-88 !default;
+$step-disabled-font-color: $grey-lighter !default;
+$step-disabled-color: $grey-88 !default;
+$stepper-text-color: $grey-light-font !default;
+$step-valid-icon-only-color:$brand-success !default;
+$step-error-icon-only-color: $brand-danger !default;
+$step-valid-completed-color: $grey-light-font !default;
+$step-valid-completed-bg-color: $brand-success !default;
+$step-error-icon-color: $grey-light-font !default;
+$step-error-completed-color: $brand-danger !default;
+$step-error-completed-bg-color: $brand-danger !default;
+$step-hover-color: $grey-88 !default;
+$step-active-color: $grey-8c !default;
+$step-selected-hover-color: $brand-primary-lighten-10 !default;
+$step-selected-active-color: $brand-primary-lighten-15 !default;