@syncfusion/ej2-angular-navigations 23.2.7 → 24.1.41-ngcc

package/styles/carousel/_fabric-dark-definition.scss

@@ -1,27 +0,0 @@
-/*! Carousel component fabric-dark theme definitions and variables */
-
-// COLORS VARIABLES
-$carousel-navigator-btn-bg: transparent !default;
-$carousel-navigator-btn-bg-hover: rgba($neutral-primary, .4) !default;
-$carousel-navigator-icon-color: $neutral-primary !default;
-$carousel-indicator-bar-bg: $neutral-primary !default;
-$carousel-indicator-bar-border: 1px solid rgba($neutral-primary, .4) !default;
-$carousel-indicator-bar-bg-active: $theme-primary !default;
-$carousel-indicator-border-color-focus: $shadow !default;
-$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
-$carousel-animation-duration: .6s !default;
-$carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
-$carousel-navigator-btn-border-radius-hover: 50% !default;
-$carousel-indicator-padding: 6px !default;
-$carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 50% !default;
-$carousel-indicator-bar-height: 12px !default;
-$carousel-indicator-bar-width: 12px !default;
-$carousel-indicator-dynamic-minheight: 36px !default;
-$carousel-indicator-fraction-minheight: 36px !default;
-$carousel-indicator-progress-minheight: 4px !default;
-$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_fabric-definition.scss

@@ -1,27 +0,0 @@
-/*! Carousel component fabric theme definitions and variables */
-
-// COLORS VARIABLES
-$carousel-navigator-btn-bg: transparent !default;
-$carousel-navigator-btn-bg-hover: rgba($neutral-white, .4) !default;
-$carousel-navigator-icon-color: $neutral-white !default;
-$carousel-indicator-bar-bg: $neutral-white !default;
-$carousel-indicator-bar-border: 1px solid rgba($neutral-white, .4) !default;
-$carousel-indicator-bar-bg-active: $theme-primary !default;
-$carousel-indicator-border-color-focus: $neutral-black !default;
-$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
-$carousel-animation-duration: .6s !default;
-$carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
-$carousel-navigator-btn-border-radius-hover: 50% !default;
-$carousel-indicator-padding: 6px !default;
-$carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 50% !default;
-$carousel-indicator-bar-height: 12px !default;
-$carousel-indicator-bar-width: 12px !default;
-$carousel-indicator-dynamic-minheight: 36px !default;
-$carousel-indicator-fraction-minheight: 36px !default;
-$carousel-indicator-progress-minheight: 4px !default;
-$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_fluent-dark-definition.scss

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

package/styles/carousel/_fluent-definition.scss

@@ -1,27 +0,0 @@
-/*! Carousel component FluentUI theme definitions and variables */
-
-// COLORS VARIABLES
-$carousel-navigator-btn-bg: transparent !default;
-$carousel-navigator-btn-bg-hover: rgba($primary-text-color, .4) !default;
-$carousel-navigator-icon-color: $primary-text-color !default;
-$carousel-indicator-bar-bg: $primary-text-color !default;
-$carousel-indicator-bar-border: 1px solid rgba($primary-text-color, .4) !default;
-$carousel-indicator-bar-bg-active: $primary !default;
-$carousel-indicator-border-color-focus: $black !default;
-$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
-$carousel-animation-duration: .6s !default;
-$carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
-$carousel-navigator-btn-border-radius-hover: 50% !default;
-$carousel-indicator-padding: 6px !default;
-$carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 50% !default;
-$carousel-indicator-bar-height: 12px !default;
-$carousel-indicator-bar-width: 12px !default;
-$carousel-indicator-dynamic-minheight: 36px !default;
-$carousel-indicator-fraction-minheight: 36px !default;
-$carousel-indicator-progress-minheight: 4px !default;
-$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_fusionnew-definition.scss

@@ -1,27 +0,0 @@
-/*! Carousel component bootstrap5 theme definitions and variables */
-
-// COLORS VARIABLES
-$carousel-navigator-btn-bg: transparent !default;
-$carousel-navigator-btn-bg-hover: rgba($primary-text-color, .4) !default;
-$carousel-navigator-icon-color: $primary-text-color !default;
-$carousel-indicator-bar-bg: $primary-text-color !default;
-$carousel-indicator-bar-border: 1px solid rgba($primary-text-color, .4) !default;
-$carousel-indicator-bar-bg-active: $primary !default;
-$carousel-indicator-border-color-focus: $black !default;
-$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
-$carousel-animation-duration: .6s !default;
-$carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
-$carousel-navigator-btn-border-radius-hover: 50% !default;
-$carousel-indicator-padding: 4px !default;
-$carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 2px !default;
-$carousel-indicator-bar-height: 5px !default;
-$carousel-indicator-bar-width: 20px !default;
-$carousel-indicator-dynamic-minheight: 36px !default;
-$carousel-indicator-fraction-minheight: 36px !default;
-$carousel-indicator-progress-minheight: 4px !default;
-$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_highcontrast-definition.scss

@@ -1,27 +0,0 @@
-/*! Carousel component highcontrast theme definitions and variables */
-
-// COLORS VARIABLES
-$carousel-navigator-btn-bg: transparent !default;
-$carousel-navigator-btn-bg-hover: rgba($message-font, .4) !default;
-$carousel-navigator-icon-color: $message-font !default;
-$carousel-indicator-bar-bg: $message-font !default;
-$carousel-indicator-bar-border: 1px solid rgba($message-font, .4) !default;
-$carousel-indicator-bar-bg-active: $selection-border !default;
-$carousel-indicator-border-color-focus: $shadow !default;
-$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
-$carousel-animation-duration: .6s !default;
-$carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
-$carousel-navigator-btn-border-radius-hover: 50% !default;
-$carousel-indicator-padding: 6px !default;
-$carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 50% !default;
-$carousel-indicator-bar-height: 12px !default;
-$carousel-indicator-bar-width: 12px !default;
-$carousel-indicator-dynamic-minheight: 36px !default;
-$carousel-indicator-fraction-minheight: 36px !default;
-$carousel-indicator-progress-minheight: 4px !default;
-$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_highcontrast-light-definition.scss

@@ -1,27 +0,0 @@
-/*! Carousel component highcontrast-light theme definitions and variables */
-
-// COLORS VARIABLES
-$carousel-navigator-btn-bg: transparent !default;
-$carousel-navigator-btn-bg-hover: rgba($selection-font, .4) !default;
-$carousel-navigator-icon-color: $selection-font !default;
-$carousel-indicator-bar-bg: $selection-font !default;
-$carousel-indicator-bar-border: 1px solid rgba($selection-font, .4) !default;
-$carousel-indicator-bar-bg-active: $selection-border !default;
-$carousel-indicator-border-color-focus: $message-font !default;
-$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
-$carousel-animation-duration: .6s !default;
-$carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
-$carousel-navigator-btn-border-radius-hover: 50% !default;
-$carousel-indicator-padding: 6px !default;
-$carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 50% !default;
-$carousel-indicator-bar-height: 12px !default;
-$carousel-indicator-bar-width: 12px !default;
-$carousel-indicator-dynamic-minheight: 36px !default;
-$carousel-indicator-fraction-minheight: 36px !default;
-$carousel-indicator-progress-minheight: 4px !default;
-$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_layout.scss

@@ -1,254 +0,0 @@
-@include export-module('carousel-layout') {
-
-  /*! carousel component styles */
-  .e-carousel {
-    display: block;
-    margin: 0;
-    padding: 0;
-    position: relative;
-
-    .e-carousel-items,
-    .e-carousel-slide-container {
-      height: 100%;
-      margin: 0;
-      overflow: hidden;
-      padding: 0;
-      position: relative;
-      width: 100%;
-    }
-
-    .e-carousel-items.e-swipe-start {
-      cursor: pointer;
-    }
-
-    &.e-partial {
-      .e-carousel-slide-container {
-        padding: 0 100px;
-
-        @media screen and (max-width: 480px) {
-          padding: 0 75px;
-        }
-
-        @media screen and (max-width: 320px) {
-          padding: 0 50px;
-        }
-      }
-    }
-
-    .e-carousel-items {
-      width: calc(var(--carousel-items-count) * 100%);
-      display: flex;
-      flex-direction: row;
-      transition-property: transform;
-      transition-duration: $carousel-animation-duration;
-      transition-timing-function: $carousel-animation-timing-function;
-
-      .e-carousel-item {
-        height: 100%;
-        overflow: hidden;
-        padding: 0;
-        position: relative;
-        width: calc(100% / var(--carousel-items-count));
-      }
-    }
-
-    &.e-blazor-carousel {
-      .e-carousel-items {
-        transform: translateX(calc((-100%/var(--carousel-items-count)) * var(--carousel-items-current)));
-        transition: transform;
-      }
-    }
-
-    &.e-blazor-carousel.e-rtl {
-      .e-carousel-items {
-        transform: translateX(calc((100%/var(--carousel-items-count)) * var(--carousel-items-current)));
-        transition: transform;
-      }
-    }
-
-    &.e-carousel-fade-animation {
-      .e-carousel-items {
-        &.e-fade-in-out {
-          transition-property: none;
-          animation: fade-in-out $carousel-animation-duration $carousel-animation-timing-function;
-        }
-
-        @keyframes fade-in-out {
-          0% {
-            opacity: 0;
-          }
-
-          100% {
-            opacity: 1;
-          }
-        }
-      }
-    }
-
-    &.e-carousel-slide-animation {
-      .e-carousel-items {
-        &.e-slide {
-          transition-duration: $carousel-animation-duration;
-        }
-      }
-    }
-
-    &.e-carousel-custom-animation:not(.e-partial) {
-      .e-carousel-item {
-        display: block;
-        height: 100%;
-        left: 0;
-        opacity: 0;
-        pointer-events: none;
-        top: 0;
-
-        &.e-active {
-          opacity: 1;
-          pointer-events: visible;
-        }
-      }
-    }
-
-    .e-carousel-navigators {
-      align-items: center;
-      display: flex;
-      height: 100%;
-      justify-content: space-between;
-      pointer-events: none;
-      position: absolute;
-      top: 0;
-      width: 100%;
-      z-index: 1;
-
-      .e-play-pause,
-      .e-previous,
-      .e-next {
-        padding: .5em;
-        pointer-events: auto;
-
-        .e-btn {
-          border: 0;
-          box-shadow: none;
-
-          &:hover {
-            border-radius: $carousel-navigator-btn-border-radius-hover;
-          }
-
-          &.e-rtl {
-            transform: rotate(180deg);
-          }
-        }
-
-        &.e-hover-arrows {
-          display: none;
-        }
-      }
-    }
-
-    .e-carousel-indicators {
-      align-items: center;
-      bottom: 0;
-      display: flex;
-      justify-content: center;
-      min-height: $carousel-indicator-height;
-      padding: 0;
-      pointer-events: none;
-      position: absolute;
-      width: 100%;
-      z-index: 1;
-
-      &.e-default .e-indicator-bars {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: center;
-        pointer-events: auto;
-
-        .e-indicator-bar {
-          padding: 0;
-
-          .e-indicator {
-            align-items: center;
-            display: flex;
-            justify-content: center;
-            padding: $carousel-indicator-padding;
-          }
-
-          .e-indicator div {
-            border: $carousel-indicator-bar-border;
-            border-radius: $carousel-indicator-bar-border-radius;
-            height: $carousel-indicator-bar-height;
-            transition-duration: $carousel-animation-duration;
-            transition-property: background-color, border-color;
-            transition-timing-function: $carousel-animation-timing-function;
-            width: $carousel-indicator-bar-width;
-          }
-
-          .e-indicator .e-ripple-element {
-            display: none;
-          }
-        }
-      }
-
-      &.e-dynamic {
-        min-height: $carousel-indicator-dynamic-minheight;
-
-        .e-indicator-bars {
-          display: block;
-          overflow: hidden;
-          transition: opacity $carousel-animation-duration $carousel-animation-timing-function;
-          white-space: nowrap;
-          width: 80px;
-
-          .e-indicator-bar {
-            border-radius: 50%;
-            display: inline-block;
-            height: 8px;
-            left: calc(32px - calc(16px * var(--carousel-items-current)));
-            margin: 0 4px;
-            opacity: 1;
-            position: relative;
-            transform: scale(.33);
-            transition-duration: $carousel-animation-duration;
-            transition-property: transform, left;
-            transition-timing-function: $carousel-animation-timing-function;
-            white-space: nowrap;
-            width: 8px;
-
-            &.e-active {
-              transform: scale(1);
-            }
-
-            &.e-prev,
-            &.e-next {
-              transform: scale(.66);
-            }
-          }
-        }
-      }
-
-      &.e-fraction {
-        min-height: $carousel-indicator-fraction-minheight;
-      }
-
-      &.e-progress {
-        min-height: $carousel-indicator-progress-minheight;
-
-        .e-indicator-bars {
-          height: $carousel-indicator-progress-height;
-          width: 100%;
-
-          .e-indicator-bar {
-            height: 100%;
-            left: 0;
-            position: absolute;
-            top: 0;
-            transform: translate3d(0, 0, 0) scaleX(calc(var(--carousel-items-current) / var(--carousel-items-count))) scaleY(1);
-            transition-duration: $carousel-animation-duration;
-            transform-origin: left top;
-            width: 100%;
-          }
-        }
-      }
-    }
-  }
-}

package/styles/carousel/_material-dark-definition.scss

@@ -1,27 +0,0 @@
-/*! Carousel component material-dark theme definitions and variables */
-
-// COLORS VARIABLES
-$carousel-navigator-btn-bg: transparent !default;
-$carousel-navigator-btn-bg-hover: rgba($grey-white, .4) !default;
-$carousel-navigator-icon-color: $grey-white !default;
-$carousel-indicator-bar-bg: $grey-white !default;
-$carousel-indicator-bar-border: 1px solid rgba($grey-white, .4) !default;
-$carousel-indicator-bar-bg-active: $accent !default;
-$carousel-indicator-border-color-focus: $grey-black !default;
-$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
-$carousel-animation-duration: .6s !default;
-$carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
-$carousel-navigator-btn-border-radius-hover: 50% !default;
-$carousel-indicator-padding: 6px !default;
-$carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 50% !default;
-$carousel-indicator-bar-height: 12px !default;
-$carousel-indicator-bar-width: 12px !default;
-$carousel-indicator-dynamic-minheight: 36px !default;
-$carousel-indicator-fraction-minheight: 36px !default;
-$carousel-indicator-progress-minheight: 4px !default;
-$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_material-definition.scss

@@ -1,27 +0,0 @@
-/*! Carousel component material theme definitions and variables */
-
-// COLORS VARIABLES
-$carousel-navigator-btn-bg: transparent !default;
-$carousel-navigator-btn-bg-hover: rgba($grey-white, .4) !default;
-$carousel-navigator-icon-color: $grey-white !default;
-$carousel-indicator-bar-bg: $grey-white !default;
-$carousel-indicator-bar-border: 1px solid rgba($grey-white, .4) !default;
-$carousel-indicator-bar-bg-active: $accent !default;
-$carousel-indicator-border-color-focus: $grey-black !default;
-$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
-$carousel-animation-duration: .6s !default;
-$carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
-$carousel-navigator-btn-border-radius-hover: 50% !default;
-$carousel-indicator-padding: 6px !default;
-$carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 50% !default;
-$carousel-indicator-bar-height: 12px !default;
-$carousel-indicator-bar-width: 12px !default;
-$carousel-indicator-dynamic-minheight: 36px !default;
-$carousel-indicator-fraction-minheight: 36px !default;
-$carousel-indicator-progress-minheight: 4px !default;
-$carousel-indicator-progress-height: 4px !default;

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

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

package/styles/carousel/_material3-definition.scss

@@ -1,28 +0,0 @@
-/*! Carousel component bootstrap5 theme definitions and variables */
-
-// COLORS VARIABLES
-$carousel-navigator-btn-bg: transparent !default;
-$carousel-navigator-btn-bg-hover: $content-bg-color-hover !default;
-$carousel-navigator-icon-color: rgba($icon-color) !default;
-$carousel-indicator-bar-bg: $content-bg-color-alt5 !default;
-$carousel-indicator-bar-border: 1px solid rgba($content-text-color, .4) !default;
-$carousel-indicator-bar-border-bg: linear-gradient(0deg, rgba($primary, $opacity14), rgba($primary, $opacity14)) !default;
-$carousel-indicator-bar-bg-active: rgba($primary) !default;
-$carousel-indicator-border-color-focus: rgba($content-text-color) !default;
-$carousel-indicator-progress-bg: rgba($primary, .4) !default;
-
-// ANIMATION VARIABLES
-$carousel-animation-duration: .6s !default;
-$carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
-$carousel-navigator-btn-border-radius-hover: 50% !default;
-$carousel-indicator-padding: 8px !default;
-$carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 50% !default;
-$carousel-indicator-bar-height: 12px !default;
-$carousel-indicator-bar-width: 12px !default;
-$carousel-indicator-dynamic-minheight: 36px !default;
-$carousel-indicator-fraction-minheight: 36px !default;
-$carousel-indicator-progress-minheight: 4px !default;
-$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_tailwind-dark-definition.scss

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

package/styles/carousel/_tailwind-definition.scss

@@ -1,27 +0,0 @@
-/*! Carousel component tailwind theme definitions and variables */
-
-// COLORS VARIABLES
-$carousel-navigator-btn-bg: transparent !default;
-$carousel-navigator-btn-bg-hover: rgba($white, .4) !default;
-$carousel-navigator-icon-color: $white !default;
-$carousel-indicator-bar-bg: $white !default;
-$carousel-indicator-bar-border: 1px solid rgba($white, .4) !default;
-$carousel-indicator-bar-bg-active: $primary !default;
-$carousel-indicator-border-color-focus: $black !default;
-$carousel-indicator-progress-bg: rgba($carousel-indicator-bar-bg-active, .4) !default;
-
-// ANIMATION VARIABLES
-$carousel-animation-duration: .6s !default;
-$carousel-animation-timing-function: ease-in-out !default;
-
-// DIMENSION VARIABLES
-$carousel-navigator-btn-border-radius-hover: 50% !default;
-$carousel-indicator-padding: 6px !default;
-$carousel-indicator-height: 48px !default;
-$carousel-indicator-bar-border-radius: 50% !default;
-$carousel-indicator-bar-height: 12px !default;
-$carousel-indicator-bar-width: 12px !default;
-$carousel-indicator-dynamic-minheight: 36px !default;
-$carousel-indicator-fraction-minheight: 36px !default;
-$carousel-indicator-progress-minheight: 4px !default;
-$carousel-indicator-progress-height: 4px !default;

package/styles/carousel/_theme.scss

@@ -1,85 +0,0 @@
-@include export-module('carousel-theme') {
-
-  /*! carousel component theme */
-  .e-carousel {
-    .e-carousel-navigators {
-
-      .e-previous .e-btn:not(:disabled),
-      .e-next .e-btn:not(:disabled),
-      .e-play-pause .e-btn:not(:disabled) {
-        background-color: $carousel-navigator-btn-bg;
-
-        .e-btn-icon {
-          color: $carousel-navigator-icon-color;
-        }
-
-        &:active,
-        &:focus,
-        &:hover {
-          background-color: $carousel-navigator-btn-bg-hover;
-          outline: none;
-        }
-      }
-    }
-
-    .e-carousel-indicators {
-      &.e-default .e-indicator-bar {
-        .e-indicator {
-          background-color: transparent;
-          border-color: transparent;
-          box-shadow: none;
-
-          div {
-            background: $carousel-indicator-bar-bg;
-            @if ($skin-name == 'Material3') {
-              border-image: $carousel-indicator-bar-border-bg;
-            }
-            @else {
-              border-color: $carousel-indicator-bar-bg;
-            }
-          }
-
-          &:active,
-          &:focus,
-          &:hover {
-            background: transparent;
-            border-color: transparent;
-            box-shadow: none;
-            outline: none;
-          }
-
-          &:focus-visible {
-            border-color: $carousel-indicator-border-color-focus;
-          }
-        }
-
-        &.e-active .e-indicator div {
-          background-color: $carousel-indicator-bar-bg-active;
-          border-color: $carousel-indicator-bar-bg-active;
-        }
-      }
-
-      &.e-dynamic .e-indicator-bars {
-        .e-indicator-bar {
-          background-color: $carousel-navigator-icon-color;
-
-          &.e-active {
-            background-color: $carousel-indicator-bar-bg-active;
-          }
-        }
-      }
-
-      &.e-fraction .e-indicator-bars {
-        color: $carousel-navigator-icon-color;
-      }
-
-      &.e-progress .e-indicator-bars {
-        background-color: $carousel-indicator-progress-bg;
-
-        .e-indicator-bar {
-          background-color: $carousel-indicator-bar-bg-active;
-        }
-      }
-    }
-  }
-}

package/styles/carousel/icons/_bootstrap-dark.scss

@@ -1,30 +0,0 @@
-@include export-module('carousel-bootstrap-icons') {
-  .e-carousel {
-
-    .e-previous-icon::before {
-      content: '\e904';
-    }
-
-    .e-next-icon::before {
-      content: '\e826';
-    }
-
-    .e-play-icon::before {
-      content: '\e328';
-    }
-
-    .e-pause-icon::before {
-      content: '\e329';
-    }
-
-    &.e-rtl {
-      .e-previous-icon::before {
-        content: '\e826';
-      }
-
-      .e-next-icon::before {
-        content: '\e904';
-      }
-    }
-  }
-}