@syncfusion/ej2-angular-navigations 20.4.49-ngcc → 20.4.49

package/styles/toolbar/_theme.scss

@@ -0,0 +1,441 @@
+@include export-module('toolbar-theme') {
+
+  /*! toolbar theme */
+  /* stylelint-disable property-no-vendor-prefix */
+  .e-toolbar {
+    -webkit-tap-highlight-color: $tbar-tab-highlight-color;
+    background: $tbar-default-bg;
+    border: $tbar-border-size $tbar-border-type $tbar-default-border;
+    box-shadow: $tbar-box-shadow;
+
+    &.e-vertical {
+
+      .e-hor-nav {
+        border: $tbar-border-nav-type $tbar-default-border;
+        border-width: $tbar-popup-vertical-border-width;
+      }
+
+      &.e-rtl .e-hor-nav {
+        border: $tbar-border-nav-type $tbar-default-border;
+        border-width: $tbar-popup-vertical-rtl-border-width;
+      }
+
+      .e-toolbar-items .e-toolbar-item {
+
+        &.e-separator {
+          border-width: $tba-vertical-separator;
+        }
+      }
+    }
+
+    &.e-extended-toolbar {
+
+      .e-toolbar-extended {
+
+        .e-toolbar-item.e-overlay {
+          background: $tbar-default-bg;
+        }
+
+        .e-toolbar-item.e-separator {
+          border: $tbar-separator-border-type $tbar-separator-border;
+          border-width: $tba-horizontal-separator;
+        }
+
+        .e-toolbar-item .e-tbar-btn .e-icons {
+          color: $tbar-default-icon-color;
+        }
+
+        .e-toolbar-item .e-tbar-btn {
+          background: $tbar-default-bg;
+          box-shadow: $tbar-btn-box-shadow;
+          color: $tbar-default-font;
+          border: $tbar-ext-btn-border;
+
+          .e-toolbar-item .e-tbar-btn-text {
+            color: $tbar-default-font;
+          }
+
+          &:focus {
+            background: $tbar-focus-bg;
+            border-radius: $tbar-btn-border-radius;
+            color: $tbar-hover-font-color;
+            border-color: $tbar-btn-focus-border-color;
+            border-style: $tbar-border-nav-type;
+            border-width: $tbar-btn-hover-border-size;
+            box-shadow: $tbar-ext-btn-focus-box-shadow;
+
+            .e-icons {
+              color: $tbar-ext-btn-icon-hover-font;
+            }
+
+            .e-tbar-btn-text {
+              color: $tbar-ext-btn-text-hover-font;
+            }
+          }
+
+          &:hover {
+            background: $tbar-hover-bg;
+            border-radius: $tbar-btn-border-radius;
+            color: $tbar-hover-font-color;
+            border-color: $tbar-ext-btn-hover-border-color;
+            border-style: $tbar-border-nav-type;
+            border-width: $tbar-ext-btn-hover-border-size;
+
+            &:active {
+
+              .e-icons {
+                color: $tbar-ext-btn-icon-hover-active-font;
+              }
+
+              .e-tbar-btn-text {
+                color: $tbar-ext-btn-text-hover-active-font;
+              }
+            }
+
+            .e-icons {
+              color: $tbar-ext-btn-icon-hover-font;
+            }
+
+            .e-tbar-btn-text {
+              color: $tbar-ext-btn-text-hover-font;
+            }
+          }
+
+          &:active {
+            background: $tbar-btn-press-bg;
+            border-radius: $tbar-btn-border-radius;
+            box-shadow: $tbar-btn-pressed-box-shadow;
+            color: $tbar-btn-active-font-color;
+            border-color: $tbar-press-border-color;
+            border-style: $tbar-border-nav-type;
+            border-width: $tbar-ext-btn-active-border-size;
+
+            .e-icons {
+              color: $tbar-ext-btn-icon-active-font;
+            }
+
+            .e-tbar-btn-text {
+              color: $tbar-ext-btn-text-active-font;
+            }
+          }
+        }
+      }
+    }
+
+    .e-tbar-btn.e-btn .e-icons {
+      color: $tbar-default-icon-color;
+    }
+
+    .e-toolbar-pop {
+      background: $tbar-pop-bg;
+      border: $tbar-border-size $tbar-border-type $tbar-default-border;
+      box-shadow: $tbar-pop-box-shadow;
+
+      .e-toolbar-item {
+
+        .e-tbar-btn {
+          background: $tbar-popup-btn-bg;
+        }
+
+        .e-tbar-btn:hover {
+          background: $tbar-popup-btn-hover-bg;
+          box-shadow: $tbar-popup-btn-hover-box-shadow;
+          color: $tbar-popup-btn-hover-color;
+          border-color: $tbar-hover-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-btn-hover-border-size;
+
+          .e-icons {
+            color: $tbar-popup-btn-hover-icons-color;
+          }
+
+          .e-tbar-btn-text {
+            color: $tbar-popup-btn-hover-text-color;
+          }
+        }
+
+        .e-tbar-btn:active {
+          background: $tbar-popup-btn-active-bg;
+          box-shadow: $tbar-popup-btn-active-box-shadow;
+          color: $tbar-popup-btn-active-color;
+          border-color: $tbar-press-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-btn-hover-border-size;
+
+          .e-icons {
+            color: $tbar-popup-btn-active-icons-color;
+          }
+
+          .e-tbar-btn-text {
+            color: $tbar-popup-btn-active-text-color;
+          }
+        }
+
+        .e-tbar-btn:focus {
+          background: $tbar-popup-btn-focus-bg;
+          box-shadow: $tbar-popup-btn-focus-box-shadow;
+          color: $tbar-popup-btn-focus-color;
+          border-color: $tbar-btn-focus-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-btn-hover-border-size;
+
+          .e-icons {
+            color: $tbar-popup-btn-focus-icons-color;
+          }
+
+          .e-tbar-btn-text {
+            color: $tbar-popup-btn-focus-text-color;
+          }
+        }
+
+        .e-btn:focus {
+          outline: $tbar-popup-btn-focus-outline;
+        }
+
+        &:not(.e-separator) {
+          background: $tbar-item-pop-bg-color;
+        }
+      }
+    }
+
+    &.e-extended-toolbar .e-toolbar-pop {
+      background: $tbar-default-bg;
+    }
+
+    &.e-toolpop {
+
+      .e-hor-nav.e-nav-active,
+      .e-hor-nav.e-nav-active:not(.e-expended-nav) {
+        background: $tbar-pressed-bg;
+        box-shadow: $tbar-nav-pressed-box-shadow;
+        border-color: $tbar-popup-nav-pressed-border-color;
+        border-style: $tbar-border-nav-type;
+        border-width: $tbar-popup-nav-pressed-border-size;
+
+        &:focus {
+          border-color: $tbar-popup-nav-pressed-focus-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-nav-pressed-focus-border-size;
+        }
+
+        .e-icons {
+          color: $tbar-active-font-color;
+
+          &:active {
+            color: $tbar-popup-nav-pressed-icons-active-color;
+          }
+        }
+      }
+    }
+
+    .e-tbar-btn {
+      background: $tbar-items-default-bg;
+      box-shadow: $tbar-btn-box-shadow;
+      color: $tbar-default-font;
+      border: $tbar-btn-border;
+
+      &:focus {
+        background: $tbar-focus-bg;
+        border-radius: $tbar-btn-border-radius;
+        color: $tbar-hover-font;
+        border-color: $tbar-btn-focus-border-color;
+        border-style: $tbar-border-nav-type;
+        border-width: $tbar-btn-hover-border-size;
+        box-shadow: $tbar-ext-btn-focus-box-shadow;
+
+        .e-icons {
+          color: $tbar-btn-icons-focus-color;
+        }
+
+        .e-tbar-btn-text {
+          color: $tbar-btn-text-focus-color;
+        }
+      }
+
+      &:hover {
+        background: $tbar-hover-bg;
+        border-color: $tbar-hover-border-color;
+        border-style: $tbar-border-nav-type;
+        border-width: $tbar-btn-hover-border-size;
+        border-radius: $tbar-btn-border-radius;
+        color: $tbar-hover-font;
+      }
+    }
+
+    .e-toolbar-items {
+      background: $tbar-default-bg;
+
+      .e-toolbar-item {
+
+        &.e-overlay {
+          background: $tbar-default-bg;
+          opacity: $tbar-btn-overlay-opacity;
+
+          .e-tbar-btn-text {
+            color: $tbar-default-font-overlay;
+          }
+
+          .e-icons {
+            color: $tbar-default-icon-overlay;
+          }
+        }
+
+        .e-tbar-btn-text {
+          color: $tbar-btn-text-color;
+        }
+
+        .e-tbar-btn {
+
+          &.e-flat.e-active {
+            .e-tbar-btn-text {
+              color: $tbar-btn-pressed-text-color;
+            }
+
+            &:focus {
+              box-shadow: $tbar-btn-pressed-focus-box-shadow;
+            }
+          }
+
+          &:hover {
+            .e-icons {
+              color: $tbar-btn-icons-focus-color;
+            }
+
+            .e-tbar-btn-text {
+              color: $tbar-btn-text-focus-color;
+            }
+
+            &:active {
+              .e-icons {
+                color: $tbar-btn-hover-active-icons-color;
+              }
+  
+              .e-tbar-btn-text {
+                color: $tbar-btn-hover-active-text-color;
+              }
+            }
+          }
+
+          &:focus {
+            .e-icons {
+              color: $tbar-btn-icons-focus-color;
+            }
+
+            .e-tbar-btn-text {
+              color: $tbar-btn-text-focus-color;
+            }
+          }
+        }
+
+        &.e-separator {
+          border: $tbar-separator-border-type $tbar-separator-border;
+          border-width: $tba-horizontal-separator;
+        }
+      }
+    }
+
+    &.e-rtl .e-hor-nav {
+      background: $tbar-default-bg;
+      border: $tbar-border-nav-type $tbar-default-border;
+      border-left: 0;
+      border-width: $tbar-popup-rtl-border-width;
+
+      &:not(.e-nav-active):hover {
+        background: $tbar-hover-bg;
+        color: $tbar-hover-font;
+      }
+    }
+
+    .e-hor-nav {
+      background: $tbar-default-bg;
+      border: $tbar-border-nav-type $tbar-default-border;
+      border-width: $tbar-popup-border-width;
+    }
+
+    .e-hor-nav  {
+
+      &::after {
+        @include tbar-btn-animation;
+      }
+
+      &.e-nav-active {
+        &:active,
+        &:focus,
+        &:hover {
+          border-bottom-right-radius: $tbar-popup-nav-active-border-bottom-right-radius;
+        }
+      }
+
+      &:active {
+        border: $tbar-nav-press-border;
+        box-shadow: $tbar-nav-pressed-box-shadow;
+        color: $tbar-select-font;
+        background: $tbar-popup-nav-active-bg;
+
+        .e-icons {
+          color: $tbar-popup-nav-active-icons-color;
+        }
+
+        &::after {
+          @include tbar-btn-animation-after;
+        }
+      }
+
+      &:hover {
+        background: $tbar-popup-nav-hover-bg;
+        border-left: $tbar-nav-hover-border;
+        color: $tbar-popup-nav-hover-color;
+
+        .e-icons {
+          color: $tbar-popup-nav-hover-icons-color;
+        }
+
+        &:not(.e-nav-active) {
+          border-color: $tbar-popup-nav-hover-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-nav-hover-border-size;
+        }
+
+        &:active {
+          background: $tbar-popup-nav-hover-active-bg;
+          border-color: $tbar-popup-nav-hover-active-border-color;
+          border-style: $tbar-border-nav-type;
+          border-width: $tbar-popup-nav-hover-active-border-size;
+        }
+      }
+
+      &:focus {
+        background: $tbar-popup-nav-focus-bg;
+        color: $tbar-popup-nav-focus-color;
+        border-color: $tbar-popup-nav-focus-border-color;
+        border-style: $tbar-border-nav-type;
+        border-width: $tbar-popup-nav-focus-border-size;
+
+        .e-icons {
+          color: $tbar-popup-nav-hover-icons-color;
+        }
+      }
+    }
+
+    .e-tbar-btn {
+
+      &:active {
+        background: $tbar-btn-active-bg;
+        border-color: $tbar-press-border-color;
+        border-style: $tbar-border-nav-type;
+        border-width: $tbar-btn-active-border-size;
+        border-radius: $tbar-btn-border-radius;
+        box-shadow: $tbar-btn-pressed-box-shadow;
+        color: $tbar-press-font;
+
+        .e-icons {
+          color: $tbar-btn-active-icons-color;
+        }
+
+        .e-tbar-btn-text {
+          color: $tbar-btn-active-text-color;
+        }
+      }
+    }
+  }
+}

package/styles/toolbar/bootstrap-dark.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/toolbar/bootstrap-dark.scss';
+@import 'ej2-base/styles/bootstrap-dark-definition.scss';
+@import '../h-scroll/bootstrap-dark-definition.scss';
+@import '../v-scroll/bootstrap-dark-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap-dark-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap-dark-definition.scss';
+@import 'bootstrap-dark-definition.scss';
+@import 'icons/bootstrap-dark.scss';
+@import 'all.scss';

package/styles/toolbar/bootstrap.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/toolbar/bootstrap.scss';
+@import 'ej2-base/styles/bootstrap-definition.scss';
+@import '../h-scroll/bootstrap-definition.scss';
+@import '../v-scroll/bootstrap-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap-definition.scss';
+@import 'bootstrap-definition.scss';
+@import 'icons/bootstrap.scss';
+@import 'all.scss';

package/styles/toolbar/bootstrap4.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/toolbar/bootstrap4.scss';
+@import 'ej2-base/styles/bootstrap4-definition.scss';
+@import '../h-scroll/bootstrap4-definition.scss';
+@import '../v-scroll/bootstrap4-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap4-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap4-definition.scss';
+@import 'bootstrap4-definition.scss';
+@import 'icons/bootstrap4.scss';
+@import 'all.scss';

package/styles/toolbar/bootstrap5-dark.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/toolbar/bootstrap5-dark.scss';
+@import 'ej2-base/styles/bootstrap5-dark-definition.scss';
+@import '../h-scroll/bootstrap5-dark-definition.scss';
+@import '../v-scroll/bootstrap5-dark-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap5-dark-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap5-dark-definition.scss';
+@import 'bootstrap5-dark-definition.scss';
+@import 'icons/bootstrap5-dark.scss';
+@import 'all.scss';

package/styles/toolbar/bootstrap5.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/toolbar/bootstrap5.scss';
+@import 'ej2-base/styles/bootstrap5-definition.scss';
+@import '../h-scroll/bootstrap5-definition.scss';
+@import '../v-scroll/bootstrap5-definition.scss';
+@import 'ej2-buttons/styles/button/bootstrap5-definition.scss';
+@import 'ej2-popups/styles/popup/bootstrap5-definition.scss';
+@import 'bootstrap5-definition.scss';
+@import 'icons/bootstrap5.scss';
+@import 'all.scss';

package/styles/toolbar/fabric-dark.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/toolbar/fabric-dark.scss';
+@import 'ej2-base/styles/fabric-dark-definition.scss';
+@import '../h-scroll/fabric-dark-definition.scss';
+@import '../v-scroll/fabric-dark-definition.scss';
+@import 'ej2-buttons/styles/button/fabric-dark-definition.scss';
+@import 'ej2-popups/styles/popup/fabric-dark-definition.scss';
+@import 'fabric-dark-definition.scss';
+@import 'icons/fabric-dark.scss';
+@import 'all.scss';

package/styles/toolbar/fabric.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/toolbar/fabric.scss';
+@import 'ej2-base/styles/fabric-definition.scss';
+@import '../h-scroll/fabric-definition.scss';
+@import '../v-scroll/fabric-definition.scss';
+@import 'ej2-buttons/styles/button/fabric-definition.scss';
+@import 'ej2-popups/styles/popup/fabric-definition.scss';
+@import 'fabric-definition.scss';
+@import 'icons/fabric.scss';
+@import 'all.scss';

package/styles/toolbar/fluent-dark.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/toolbar/fluent-dark.scss';
+@import 'ej2-base/styles/fluent-dark-definition.scss';
+@import '../h-scroll/fluent-dark-definition.scss';
+@import '../v-scroll/fluent-dark-definition.scss';
+@import 'ej2-buttons/styles/button/fluent-dark-definition.scss';
+@import 'ej2-popups/styles/popup/fluent-dark-definition.scss';
+@import 'fluent-dark-definition.scss';
+@import 'icons/fluent-dark.scss';
+@import 'all.scss';

package/styles/toolbar/fluent.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/toolbar/fluent.scss';
+@import 'ej2-base/styles/fluent-definition.scss';
+@import '../h-scroll/fluent-definition.scss';
+@import '../v-scroll/fluent-definition.scss';
+@import 'ej2-buttons/styles/button/fluent-definition.scss';
+@import 'ej2-popups/styles/popup/fluent-definition.scss';
+@import 'fluent-definition.scss';
+@import 'icons/fluent.scss';
+@import 'all.scss';

package/styles/toolbar/highcontrast-light.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/toolbar/highcontrast-light.scss';
+@import 'ej2-base/styles/highcontrast-light-definition.scss';
+@import '../h-scroll/highcontrast-light-definition.scss';
+@import '../v-scroll/highcontrast-light-definition.scss';
+@import 'ej2-buttons/styles/button/highcontrast-light-definition.scss';
+@import 'ej2-popups/styles/popup/highcontrast-light-definition.scss';
+@import 'highcontrast-light-definition.scss';
+@import 'icons/highcontrast-light.scss';
+@import 'all.scss';

package/styles/toolbar/highcontrast.scss

@@ -1 +1,8 @@
-@import 'ej2-navigations/styles/toolbar/highcontrast.scss';
+@import 'ej2-base/styles/highcontrast-definition.scss';
+@import '../h-scroll/highcontrast-definition.scss';
+@import '../v-scroll/highcontrast-definition.scss';
+@import 'ej2-buttons/styles/button/highcontrast-definition.scss';
+@import 'ej2-popups/styles/popup/highcontrast-definition.scss';
+@import 'highcontrast-definition.scss';
+@import 'icons/highcontrast.scss';
+@import 'all.scss';

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

@@ -0,0 +1,16 @@
+@include export-module('toolbar-bootstrap-dark-icons') {
+
+  /*! toolbar icons */
+  #{&}.e-toolbar {
+
+    .e-popup-down-icon::before {
+      content: '\e83d';
+      line-height: normal;
+    }
+
+    .e-popup-up-icon::before {
+      content: '\e834';
+      line-height: normal;
+    }
+  }
+}

package/styles/toolbar/icons/_bootstrap.scss

@@ -0,0 +1,16 @@
+@include export-module('toolbar-bootstrap-icons') {
+
+  /*! toolbar icons */
+  #{&}.e-toolbar {
+
+    .e-popup-down-icon::before {
+      content: '\e83d';
+      line-height: normal;
+    }
+
+    .e-popup-up-icon::before {
+      content: '\e834';
+      line-height: normal;
+    }
+  }
+}

package/styles/toolbar/icons/_bootstrap4.scss

@@ -0,0 +1,16 @@
+@include export-module('toolbar-bootstrap4-icons') {
+
+  /*! toolbar icons */
+  #{&}.e-toolbar {
+
+    .e-popup-down-icon::before {
+      content: '\e744';
+      line-height: normal;
+    }
+
+    .e-popup-up-icon::before {
+      content: '\e721';
+      line-height: normal;
+    }
+  }
+}

package/styles/toolbar/icons/_bootstrap5-dark.scss

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

package/styles/toolbar/icons/_bootstrap5.scss

@@ -0,0 +1,16 @@
+@include export-module('toolbar-bootstrap5-icons') {
+
+  /*! toolbar icons */
+  #{&}.e-toolbar {
+
+    .e-popup-down-icon::before {
+      content: '\e729';
+      line-height: normal;
+    }
+
+    .e-popup-up-icon::before {
+      content: '\e776';
+      line-height: normal;
+    }
+  }
+}

package/styles/toolbar/icons/_fabric-dark.scss

@@ -0,0 +1,16 @@
+@include export-module('toolbar-fabric-dark-icons') {
+
+  /*! toolbar icons */
+  #{&}.e-toolbar {
+
+    .e-popup-down-icon::before {
+      content: '\e916';
+      line-height: normal;
+    }
+
+    .e-popup-up-icon::before {
+      content: '\e910';
+      line-height: normal;
+    }
+  }
+}

package/styles/toolbar/icons/_fabric.scss

@@ -0,0 +1,16 @@
+@include export-module('toolbar-fabric-icons') {
+
+  /*! toolbar icons */
+  #{&}.e-toolbar {
+
+    .e-popup-down-icon::before {
+      content: '\e916';
+      line-height: normal;
+    }
+
+    .e-popup-up-icon::before {
+      content: '\e910';
+      line-height: normal;
+    }
+  }
+}

package/styles/toolbar/icons/_fluent-dark.scss

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

package/styles/toolbar/icons/_fluent.scss

@@ -0,0 +1,16 @@
+@include export-module('toolbar-fluent-icons') {
+
+  /*! toolbar icons */
+  #{&}.e-toolbar {
+
+    .e-popup-down-icon::before {
+      content: '\e71c';
+      line-height: normal;
+    }
+
+    .e-popup-up-icon::before {
+      content: '\e71c';
+      line-height: normal;
+    }
+  }
+}