@syncfusion/ej2-angular-layouts 23.1.36-ngcc → 23.1.36

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

@@ -0,0 +1,26 @@
+$navigation-arrow-background: #fff !default;
+$navigation-icon-background-hover: #0078d6 !default;
+$navigation-icon-border-hover: rgba(0, 116, 204, .5) !default;
+$splitter-border-color: $neutral-light !default;
+$splitter-background-color: #fff !default;
+$splitpane-font-size: 13px !default;
+$splitpane-font-weight: normal !default;
+$splitpane-font-family: $font-family !default;
+$splitpane-font-color: $neutral-light-font !default;
+$splitbar-border-color: $neutral-light !default;
+$splitbar-hover-border-color: $theme-tertiary !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
+$splitbar-icon-color: $neutral-light-font !default;
+$splitbar-icon-size: 14px !default;
+$collapse-icon-bg-color: $neutral-white !default;
+$splitbar-icon-gap: 18px !default;
+$resize-icon-bg-color: $neutral-white !default;
+$split-bar-border-left: none !default;
+$split-bar-border-right: none !default;
+$split-bar-hover-border-left: none !default;
+$split-bar-hover-border-right: none !default;
+
+// Bigger style
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: 13px !default;
+$bigger-splitbar-icon-size: 16px !default;

package/styles/splitter/_fabric-definition.scss

@@ -0,0 +1,26 @@
+$navigation-arrow-background: $neutral-white !default;
+$navigation-icon-background-hover: $theme-primary !default;
+$navigation-icon-border-hover: rgba(0, 120, 214, .5) !default;
+$splitter-border-color: $neutral-quintenaryalt !default;
+$splitter-background-color: #fff !default;
+$splitpane-font-size: 13px !default;
+$splitpane-font-weight: normal !default;
+$splitpane-font-family: $font-family !default;
+$splitpane-font-color: $neutral-light-font !default;
+$splitbar-border-color: $neutral-quintenaryalt !default;
+$splitbar-hover-border-color: $theme-primary !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
+$splitbar-icon-color: $neutral-light-font !default;
+$splitbar-icon-size: 14px !default;
+$collapse-icon-bg-color: $neutral-white !default;
+$splitbar-icon-gap: 18px !default;
+$resize-icon-bg-color: $neutral-white !default;
+$split-bar-border-left: none !default;
+$split-bar-border-right: none !default;
+$split-bar-hover-border-left: none !default;
+$split-bar-hover-border-right: none !default;
+
+// Bigger style
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: 13px !default;
+$bigger-splitbar-icon-size: 16px !default;

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

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

package/styles/splitter/_fluent-definition.scss

@@ -0,0 +1,31 @@
+//Layout Variables Start
+$splitpane-font-size: $text-sm !default;
+$splitpane-font-weight: $font-weight-normal !default;
+$splitpane-font-family: $font-family !default;
+$splitbar-icon-size: 14px !default;
+$splitbar-icon-gap: 18px !default;
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: $text-base !default;
+$bigger-splitbar-icon-size: 16px !default;
+
+//Layout Variables End
+
+//Theme Variables Start
+$navigation-arrow-background: $transparent !default;
+$navigation-icon-background-hover: $primary !default;
+$navigation-icon-border-hover: $primary !default;
+$splitter-border-color: $border-light !default;
+$splitter-background-color: $primary-text-color !default;
+$splitpane-font-color: $content-text-color !default;
+$splitbar-border-color: $border-light !default;
+$splitbar-hover-border-color: $primary !default;
+$splitbar-icon-color: $icon-color !default;
+$collapse-icon-bg-color: $primary-text-color !default;
+$resize-icon-bg-color: $content-bg-color !default;
+$resize-icon-hover-color: $primary-text-color !default;
+$split-bar-border-left: 1px solid $border-light !default;
+$split-bar-border-right: 1px solid $border-light !default;
+$split-bar-hover-border-left: 1px solid $splitbar-hover-border-color !default;
+$split-bar-hover-border-right: 1px solid $splitbar-hover-border-color !default;
+
+//Theme Variables End

package/styles/splitter/_fusionnew-definition.scss

@@ -0,0 +1,31 @@
+//Layout Variables Start
+$splitpane-font-size: $text-sm !default;
+$splitpane-font-weight: $font-weight-normal !default;
+$splitpane-font-family: $font-family !default;
+$splitbar-icon-size: 14px !default;
+$splitbar-icon-gap: 18px !default;
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: $text-base !default;
+$bigger-splitbar-icon-size: 16px !default;
+
+//Layout Variables End
+
+//Theme Variables Start
+$navigation-arrow-background: $transparent !default;
+$navigation-icon-background-hover: $primary !default;
+$navigation-icon-border-hover: $primary !default;
+$splitter-border-color: $border-light !default;
+$splitter-background-color: $primary-text-color !default;
+$splitpane-font-color: $content-text-color !default;
+$splitbar-border-color: $border-light !default;
+$splitbar-hover-border-color: $primary !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
+$splitbar-icon-color: $icon-color !default;
+$collapse-icon-bg-color: $primary-text-color !default;
+$resize-icon-bg-color: $content-bg-color !default;
+$split-bar-border-left: none !default;
+$split-bar-border-right: none !default;
+$split-bar-hover-border-left: none !default;
+$split-bar-hover-border-right: none !default;
+
+//Theme Variables End

package/styles/splitter/_highcontrast-definition.scss

@@ -0,0 +1,26 @@
+$navigation-arrow-background: $bg-base-0 !default;
+$navigation-icon-background-hover: $selection-border !default;
+$navigation-icon-border-hover: rgba(255, 217, 57, .5) !default;
+$splitter-border-color: $border-fg !default;
+$splitter-background-color: #000 !default;
+$splitpane-font-size: 13px !default;
+$splitpane-font-weight: normal !default;
+$splitpane-font-family: $font-family !default;
+$splitpane-font-color: $content-font !default;
+$splitbar-border-color: $border-fg !default;
+$splitbar-hover-border-color: $selection-bg !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
+$splitbar-icon-color: $content-font !default;
+$splitbar-icon-size: 14px !default;
+$collapse-icon-bg-color: $bg-base-0 !default;
+$splitbar-icon-gap: 18px !default;
+$resize-icon-bg-color: $bg-base-0 !default;
+$split-bar-border-left: none !default;
+$split-bar-border-right: none !default;
+$split-bar-hover-border-left: none !default;
+$split-bar-hover-border-right: none !default;
+
+// Bigger style
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: 13px !default;
+$bigger-splitbar-icon-size: 16px !default;

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

@@ -0,0 +1,26 @@
+$navigation-arrow-background: #d4d1c3 !default;
+$navigation-icon-background-hover: #ffd939 !default;
+$navigation-icon-border-hover: rgba(255, 217, 57, .5) !default;
+$splitter-border-color: $border-fg !default;
+$splitter-background-color: #fff !default;
+$splitpane-font-size: 13px !default;
+$splitpane-font-weight: normal !default;
+$splitpane-font-family: $font-family !default;
+$splitpane-font-color: $content-font !default;
+$splitbar-border-color: $border-fg !default;
+$splitbar-hover-border-color: $selection-bg !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
+$splitbar-icon-color: $content-font !default;
+$splitbar-icon-size: 14px !default;
+$collapse-icon-bg-color: $bg-base-0 !default;
+$splitbar-icon-gap: 18px !default;
+$resize-icon-bg-color: $bg-base-0 !default;
+$split-bar-border-left: none !default;
+$split-bar-border-right: none !default;
+$split-bar-hover-border-left: none !default;
+$split-bar-hover-border-right: none !default;
+
+// Bigger style
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: 13px !default;
+$bigger-splitbar-icon-size: 16px !default;

package/styles/splitter/_layout.scss

@@ -0,0 +1,416 @@
+@include export-module('splitter-layout') {
+  .e-splitter {
+
+    &.e-splitter-horizontal,
+    &.e-splitter-vertical {
+      border-width: 1px;
+      display: flex;
+      overflow: hidden;
+      position: relative;
+      touch-action: none;
+      width: 100%;
+
+      .e-pane {
+        flex: 1 1 auto;
+        font-family: $splitpane-font-family;
+        font-size: $splitpane-font-size;
+        font-weight: $splitpane-font-weight;
+
+        &.e-scrollable {
+          overflow: auto;
+        }
+
+        &.e-static-pane {
+          flex-grow: 0;
+          flex-shrink: 0;
+        }
+
+        &.e-pane-horizontal {
+          overflow: auto;
+
+          &.e-pane-hidden {
+            flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+            overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
+          }
+        }
+      }
+    }
+
+    &.e-splitter-horizontal {
+      flex-direction: row;
+
+      &.e-pane {
+        &.e-scrollable {
+          overflow: hidden;
+        }
+      }
+
+      &.e-rtl {
+        flex-direction: row-reverse;
+
+        .e-split-bar {
+          &.e-split-bar-horizontal {
+            flex-direction: row-reverse;
+
+            .e-navigate-arrow:not(.e-arrow-right)::before,
+            .e-navigate-arrow:not(.e-arrow-right)::after {
+              right: auto;
+            }
+          }
+        }
+      }
+    }
+
+    &.e-splitter-vertical {
+      flex-direction: column;
+
+      &.e-pane {
+        &.e-scrollable {
+          overflow: hidden;
+        }
+      }
+
+      .e-pane-vertical {
+        overflow: auto;
+
+        &.e-pane-hidden {
+          flex-basis: 0 !important; /* stylelint-disable-line declaration-no-important */
+          overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
+        }
+      }
+
+      &.e-rtl {
+        .e-split-bar {
+          &.e-split-bar-vertical {
+            .e-navigate-arrow:not(.e-arrow-down)::before,
+            .e-navigate-arrow:not(.e-arrow-down)::after {
+              right: auto;
+            }
+
+            .e-navigate-arrow {
+              &:not(.e-arrow-down) {
+                border-radius: 50%;
+                bottom: 20px;
+                right: 22px;
+              }
+
+              &.e-arrow-down {
+                border-radius: 50%;
+                left: 22px;
+                right: auto;
+                top: 20px;
+
+                &::after {
+                  right: auto;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .e-split-bar {
+
+      &.e-split-bar-horizontal {
+        align-items: center;
+        display: flex;
+        flex: 0 0 auto;
+        justify-content: center;
+        min-width: 1px;
+        z-index: 15;
+
+        .e-icon-hidden {
+          visibility: hidden;
+        }
+
+        &.e-resizable-split-bar {
+          cursor: col-resize;
+        }
+
+        &.e-resizable-split-bar::after {
+          content: '';
+          cursor: col-resize;
+          display: block;
+          height: 100%;
+          position: absolute;
+          width: 16px;
+          z-index: 10;
+        }
+
+        .e-resize-handler {
+          align-items: center;
+          display: flex;
+          height: $splitbar-icon-gap;
+          justify-content: center;
+          position: relative;
+          width: 1px;
+
+          &.e-hide-handler {
+            visibility: hidden;
+          }
+        }
+
+        // icons hovering and avtive state effect for horizontal mode of orientation
+        .e-navigate-arrow:not(.e-arrow-right)::before,
+        .e-navigate-arrow:not(.e-arrow-right)::after {
+          left: 8px;
+          right: 3px;
+        }
+
+        .e-navigate-arrow {
+          border-image: none;
+          border-width: 1px;
+          cursor: pointer;
+          display: flex;
+          height: 26px;
+          padding: 1px 12px;
+          position: relative;
+
+          &::before,
+          &::after {
+            border-radius: 16px;
+            content: '';
+            height: 8px;
+            position: absolute;
+            transform: rotate(0deg);
+            width: 2px;
+          }
+
+          &::before {
+            top: 5px;
+            transform-origin: 1px 7px 0;
+          }
+
+          &::after {
+            top: 11px;
+            transform-origin: 1px 1px 0;
+          }
+
+          &:not(.e-arrow-right) {
+            border-radius: 50%;
+            right: 5px;
+          }
+
+          &.e-arrow-right {
+            border-radius: 50%;
+            left: 5px;
+          }
+
+          &.e-arrow-right::before,
+          &.e-arrow-right::after {
+            right: 8px;
+          }
+        }
+
+        &.e-last-bar:not(.e-resizable-split-bar) {
+          margin: 0 3px;
+        }
+
+        &:not(.e-resizable-split-bar) {
+          margin: 0 0 0 3px;
+        }
+      }
+
+      &.e-split-bar-vertical {
+        align-items: center;
+        border-left: $split-bar-border-left;
+        border-right: $split-bar-border-right;
+        display: flex;
+        flex: 0 0 auto;
+        justify-content: center;
+        min-height: 1px;
+
+        .e-icon-hidden {
+          visibility: hidden;
+        }
+
+        &.e-resizable-split-bar {
+          cursor: row-resize;
+        }
+
+        &.e-resizable-split-bar::after {
+          content: '';
+          cursor: row-resize;
+          display: block;
+          height: 16px;
+          position: absolute;
+          width: 100%;
+          z-index: 12;
+        }
+
+        .e-resize-handler {
+          align-items: center;
+          display: flex;
+          height: 1px;
+          justify-content: center;
+          width: $splitbar-icon-gap;
+
+          &.e-hide-handler {
+            visibility: hidden;
+          }
+        }
+
+        // icons hovering and avtive state effect for vertical mode of orientation
+        .e-navigate-arrow:not(.e-arrow-down)::before,
+        .e-navigate-arrow:not(.e-arrow-down)::after {
+          left: 10px;
+        }
+
+        .e-navigate-arrow {
+          border-image: none;
+          border-width: 0;
+          cursor: pointer;
+          display: flex;
+          height: 26px;
+          padding: 10px 3px 10px 18px;
+          position: relative;
+          width: 26px;
+
+          &::before,
+          &::after {
+            border-radius: 16px;
+            content: '';
+            height: 8px;
+            position: absolute;
+            transform: rotate(90deg);
+            width: 2px;
+          }
+
+          &:not(.e-arrow-down) {
+            &::before {
+              top: 3px;
+              transform-origin: 2px 7px 0;
+            }
+          }
+
+          &:not(.e-arrow-down) {
+            &::after {
+              left: 11px;
+              top: 8px;
+              transform-origin: 1px 1px 0;
+            }
+          }
+
+          &.e-arrow-down {
+            &::before {
+              left: 12px;
+              top: 8px;
+              transform-origin: 1px 6px 0;
+            }
+          }
+
+          &.e-arrow-down {
+            &::after {
+              left: 10px;
+              top: 12px;
+              transform-origin: 1px 2px 0;
+            }
+          }
+
+          &:not(.e-arrow-down) {
+            border-radius: 50%;
+            bottom: 20px;
+            left: 22px;
+          }
+
+          &.e-arrow-down {
+            border-radius: 50%;
+            right: 22px;
+            top: 20px;
+          }
+
+          &.e-arrow-down::before,
+          &.e-arrow-down::after {
+            right: 10px;
+          }
+        }
+
+        &.e-last-bar:not(.e-resizable-split-bar) {
+          margin: 3px 0;
+        }
+
+        &:not(.e-resizable-split-bar) {
+          margin: 3px 0 0;
+        }
+      }
+    }
+  }
+
+  .e-bigger.e-splitter {
+    .e-pane {
+      font-size: $bigger-splitpane-font-size;
+    }
+
+    .e-split-bar {
+      &.e-split-bar-horizontal {
+        .e-resize-handler {
+          height: $bigger-splitbar-icon-gap;
+        }
+      }
+
+      &.e-split-bar-vertical {
+        .e-resize-handler {
+          width: $bigger-splitbar-icon-gap;
+        }
+
+        .e-navigate-arrow:not(.e-arrow-down)::before,
+        .e-navigate-arrow:not(.e-arrow-down)::after {
+          margin-top: -2px;
+        }
+
+        .e-navigate-arrow {
+          &.e-arrow-down::after {
+            margin-top: 2px;
+          }
+        }
+      }
+    }
+  }
+
+  .e-rtl .e-splitter {
+    &.e-splitter-horizontal {
+      flex-direction: row-reverse;
+    }
+  }
+
+  .e-bigger .e-splitter {
+    .e-pane {
+      font-size: $bigger-splitpane-font-size;
+    }
+
+    .e-split-bar {
+
+      &.e-split-bar-horizontal {
+        .e-resize-handler {
+          height: $bigger-splitbar-icon-gap;
+        }
+      }
+
+      &.e-split-bar-vertical {
+        .e-resize-handler {
+          width: $bigger-splitbar-icon-gap;
+        }
+      }
+    }
+  }
+
+  .e-content-placeholder.e-splitter.e-placeholder-splitter {
+    background-size: 100px 110px;
+    min-height: 110px;
+  }
+
+  .e-bigger .e-content-placeholder.e-splitter.e-placeholder-splitter,
+  .e-bigger.e-content-placeholder.e-splitter.e-placeholder-splitter {
+    background-size: 100px 110px;
+    min-height: 110px;
+  }
+
+  .e-splitter.e-ie .e-navigate-arrow.e-arrow-left {
+    margin-left: -26px;
+  }
+
+  .e-splitter.e-ie .e-split-bar-horizontal .e-resize-handler {
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,26 @@
+$navigation-arrow-background: #000 !default;
+$navigation-icon-background-hover: rgba(255, 128, 171, 1) !default;
+$navigation-icon-border-hover: rgba(255, 128, 171, .5) !default;
+$splitter-border-color: $grey-700 !default;
+$splitter-background-color: #fff !default;
+$splitpane-font-size: 13px !default;
+$splitpane-font-weight: normal !default;
+$splitpane-font-family: $font-family !default;
+$splitpane-font-color: $grey-dark-font !default;
+$splitbar-border-color: $grey-700 !default;
+$splitbar-hover-border-color: $accent !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
+$splitbar-icon-color: rgba($grey-dark-font, .7) !default;
+$splitbar-icon-size: 14px !default;
+$collapse-icon-bg-color: $grey-dark !default;
+$splitbar-icon-gap: 18px !default;
+$resize-icon-bg-color: $grey-dark !default;
+$split-bar-border-left: none !default;
+$split-bar-border-right: none !default;
+$split-bar-hover-border-left: none !default;
+$split-bar-hover-border-right: none !default;
+
+// Bigger style
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: 14px !default;
+$bigger-splitbar-icon-size: 16px !default;

package/styles/splitter/_material-definition.scss

@@ -0,0 +1,27 @@
+/*! component's default definitions and variables */
+$navigation-arrow-background: $grey-white !default;
+$navigation-icon-background-hover: $accent !default;
+$navigation-icon-border-hover: rgba(227, 22, 91, .5) !default;
+$splitter-border-color: $grey-300 !default;
+$splitter-background-color: #fff !default;
+$splitpane-font-size: 13px !default;
+$splitpane-font-weight: normal !default;
+$splitpane-font-family: $font-family !default;
+$splitpane-font-color: rgba($grey-light-font, .87) !default;
+$splitbar-border-color: $grey-300 !default;
+$splitbar-hover-border-color: $accent !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
+$splitbar-icon-color: rgba($grey-light-font, .54) !default;
+$splitbar-icon-size: 14px !default;
+$collapse-icon-bg-color: $grey-white !default;
+$splitbar-icon-gap: 18px !default;
+$resize-icon-bg-color: $grey-white !default;
+$split-bar-border-left: none !default;
+$split-bar-border-right: none !default;
+$split-bar-hover-border-left: none !default;
+$split-bar-hover-border-right: none !default;
+
+// Bigger style
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: 14px !default;
+$bigger-splitbar-icon-size: 16px !default;

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

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

package/styles/splitter/_material3-definition.scss

@@ -0,0 +1,31 @@
+//Layout Variables Start
+$splitpane-font-size: $text-sm !default;
+$splitpane-font-weight: $font-weight-normal !default;
+$splitpane-font-family: $font-family !default;
+$splitbar-icon-size: 14px !default;
+$splitbar-icon-gap: 18px !default;
+$bigger-splitbar-icon-gap: 20px !default;
+$bigger-splitpane-font-size: $text-base !default;
+$bigger-splitbar-icon-size: 16px !default;
+
+//Layout Variables End
+
+//Theme Variables Start
+$navigation-arrow-background: $transparent !default;
+$navigation-icon-background-hover: rgba($primary) !default;
+$navigation-icon-border-hover: rgba($primary) !default;
+$splitter-border-color: rgba($border-light) !default;
+$splitter-background-color: rgba($primary-text-color) !default;
+$splitpane-font-color: rgba($content-text-color) !default;
+$splitbar-border-color: rgba($border-light) !default;
+$splitbar-hover-border-color: rgba($primary) !default;
+$resize-icon-hover-color: $splitbar-hover-border-color !default;
+$splitbar-icon-color: rgba($icon-color) !default;
+$collapse-icon-bg-color: rgba($primary-text-color) !default;
+$resize-icon-bg-color: rgba($content-bg-color) !default;
+$split-bar-border-left: none !default;
+$split-bar-border-right: none !default;
+$split-bar-hover-border-left: none !default;
+$split-bar-hover-border-right: none !default;
+
+//Theme Variables End

package/styles/splitter/_responsive.scss

@@ -0,0 +1 @@
+/* stylelint-disable-line no-empty-source */

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

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