@syncfusion/ej2-multicolumn-combobox 26.1.35

package/styles/multicolumn-combobox/_fabric-dark-definition.scss

@@ -0,0 +1,29 @@
+$header-font-weight: 600 !default;
+$multicolumn-grid-height: 36px !default;
+$multicolumn-margin-top-value: unset !default;
+
+$multicolumn-grid-small-height: 32px !default;
+$multicolumn-margin-top-small-value: unset !default;
+
+$multicolumn-grid-bigger-height: 40px !default;
+$multicolumn-margin-top-bigger-value: unset !default;
+
+$multicolumn-grid-bigger-small-height: 38px !default;
+$multicolumn-margin-top-bigger-small-value: unset !default;
+
+$footer-border-color: $neutral-quintenary !default;
+$popup-text-color: $theme-primary !default;
+$grid-content-color: $neutral-light-font !default;
+$grid-content-hover-bg-color: $neutral-light !default;
+$grid-content-active-bg-color: $neutral-quintenary !default;
+$grid-content-active-color: $neutral-light-font !default;
+$grid-footer-bg-color: transparent !default;
+$grid-footer-color: $theme-primary !default;
+$grid-group-content-header-color: $theme-primary !default;
+$grid-group-content-header-bg-color: $neutral-lighter-alt !default;
+$grid-header-content-bg-color: $neutral-white !default;
+$grid-header-content-color: $theme-primary !default;
+$altrow-bg-color: $neutral-light !default;
+$popup-box-shadow: 0 .6px 1.8px 0 rgba($shadow, .11), 0 3.2px 7.2px 0 rgba($shadow, .13) !default;
+$nodata-bg-color: $neutral-lighter-alt !default;
+$nodata-border-color: $neutral-lighter-alt !default;

package/styles/multicolumn-combobox/_fabric-definition.scss

@@ -0,0 +1,29 @@
+$header-font-weight: 600 !default;
+$multicolumn-grid-height: 36px !default;
+$multicolumn-margin-top-value: unset !default;
+
+$multicolumn-grid-small-height: 32px !default;
+$multicolumn-margin-top-small-value: unset !default;
+
+$multicolumn-grid-bigger-height: 40px !default;
+$multicolumn-margin-top-bigger-value: unset !default;
+
+$multicolumn-grid-bigger-small-height: 38px !default;
+$multicolumn-margin-top-bigger-small-value: unset !default;
+
+$footer-border-color: $neutral-light !default;
+$popup-text-color: $theme-primary !default;
+$grid-content-color: $neutral-light-fontalt !default;
+$grid-content-hover-bg-color: $neutral-lighter !default;
+$grid-content-active-bg-color: $theme-lighter !default;
+$grid-content-active-color: $neutral-primary !default;
+$grid-footer-bg-color: transparent !default;
+$grid-footer-color: $theme-primary !default;
+$grid-group-content-header-color: $theme-primary !default;
+$grid-group-content-header-bg-color: $neutral-white !default;
+$grid-header-content-bg-color: $neutral-lighter !default;
+$grid-header-content-color: $theme-primary !default;
+$altrow-bg-color: $neutral-lighter-alt !default;
+$popup-box-shadow: 0 .6px 1.8px 0 rgba($shadow, .1), 0 3.2px 7.2px 0 rgba($shadow, .13) !default;
+$nodata-bg-color: $neutral-white !default;
+$nodata-border-color: $neutral-white !default;

package/styles/multicolumn-combobox/_fluent-dark-definition.scss

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

package/styles/multicolumn-combobox/_fluent-definition.scss

@@ -0,0 +1,29 @@
+$header-font-weight: 600 !default;
+$multicolumn-grid-height: 32px !default;
+$multicolumn-margin-top-value: 2px !default;
+
+$multicolumn-grid-small-height: 26px !default;
+$multicolumn-margin-top-small-value: 2px !default;
+
+$multicolumn-grid-bigger-height: 40px !default;
+$multicolumn-margin-top-bigger-value: 2px !default;
+
+$multicolumn-grid-bigger-small-height: 36px !default;
+$multicolumn-margin-top-bigger-small-value: 2px !default;
+
+$footer-border-color: $border-light !default;
+$popup-text-color: $flyout-text-color !default;
+$grid-content-color: $content-text-color !default;
+$grid-content-hover-bg-color: $flyout-bg-color-hover !default;
+$grid-content-active-bg-color: $flyout-bg-color-pressed !default;
+$grid-content-active-color: $flyout-text-color-selected !default;
+$grid-footer-bg-color: $transparent !default;
+$grid-footer-color: $content-text-color-alt3 !default;
+$grid-group-content-header-color: $content-text-color-alt3 !default;
+$grid-group-content-header-bg-color: $flyout-bg-color !default;
+$grid-header-content-bg-color: $transparent !default;
+$grid-header-content-color: $content-text-color !default;
+$altrow-bg-color: $content-bg-color-alt1 !default;
+$popup-box-shadow: $shadow-md !default;
+$nodata-bg-color: $flyout-bg-color !default;
+$nodata-border-color: $border-light !default;

package/styles/multicolumn-combobox/_fluent2-definition.scss

@@ -0,0 +1,29 @@
+$header-font-weight: 400 !default;
+$multicolumn-grid-height: 32px !default;
+$multicolumn-margin-top-value: unset !default;
+
+$multicolumn-grid-small-height: 32px !default;
+$multicolumn-margin-top-small-value: unset !default;
+
+$multicolumn-grid-bigger-height: 40px !default;
+$multicolumn-margin-top-bigger-value: unset !default;
+
+$multicolumn-grid-bigger-small-height: 40px !default;
+$multicolumn-margin-top-bigger-small-value: unset !default;
+
+$footer-border-color: $border-light !default;
+$popup-text-color: $content-text-color-alt2 !default;
+$grid-content-color: $content-text-color !default;
+$grid-content-hover-bg-color: $flyout-bg-color-hover !default;
+$grid-content-active-bg-color: $flyout-bg-color-selected !default;
+$grid-content-active-color: $flyout-text-color-selected !default;
+$grid-footer-bg-color: $transparent !default;
+$grid-footer-color: $content-text-color-alt2 !default;
+$grid-group-content-header-color: $content-text-color-alt2 !default;
+$grid-group-content-header-bg-color: $flyout-bg-color !default;
+$grid-header-content-bg-color: $content-bg-color-alt2 !default;
+$grid-header-content-color: $content-text-color !default;
+$altrow-bg-color: $content-bg-color-alt2 !default;
+$popup-box-shadow: $shadow-lg !default;
+$nodata-bg-color: $flyout-bg-color !default;
+$nodata-border-color: $flyout-border !default;

package/styles/multicolumn-combobox/_fusionnew-definition.scss

@@ -0,0 +1,29 @@
+$header-font-weight: 600 !default;
+$multicolumn-grid-height: 32px !default;
+$multicolumn-margin-top-value: 2px !default;
+
+$multicolumn-grid-small-height: 26px !default;
+$multicolumn-margin-top-small-value: 2px !default;
+
+$multicolumn-grid-bigger-height: 40px !default;
+$multicolumn-margin-top-bigger-value: 2px !default;
+
+$multicolumn-grid-bigger-small-height: 36px !default;
+$multicolumn-margin-top-bigger-small-value: 2px !default;
+
+$footer-border-color: $border-light !default;
+$popup-text-color: $flyout-text-color !default;
+$grid-content-color: $content-text-color !default;
+$grid-content-hover-bg-color: $flyout-bg-color-hover !default;
+$grid-content-active-bg-color: $flyout-bg-color-pressed !default;
+$grid-content-active-color: $flyout-text-color-selected !default;
+$grid-footer-bg-color: $transparent !default;
+$grid-footer-color: $content-text-color-alt3 !default;
+$grid-group-content-header-color: $content-text-color-alt3 !default;
+$grid-group-content-header-bg-color: $flyout-bg-color !default;
+$grid-header-content-bg-color: $transparent !default;
+$grid-header-content-color: $content-text-color !default;
+$altrow-bg-color: $content-bg-color-alt1 !default;
+$popup-box-shadow: $shadow-md !default;
+$nodata-bg-color: $content-text-color-alt3 !default;
+$nodata-border-color: $border-light !default;

package/styles/multicolumn-combobox/_highcontrast-definition.scss

@@ -0,0 +1,29 @@
+$header-font-weight: 600 !default;
+$multicolumn-grid-height: 36px !default;
+$multicolumn-margin-top-value: unset !default;
+
+$multicolumn-grid-small-height: 32px !default;
+$multicolumn-margin-top-small-value: unset !default;
+
+$multicolumn-grid-bigger-height: 40px !default;
+$multicolumn-margin-top-bigger-value: unset !default;
+
+$multicolumn-grid-bigger-small-height: 38px !default;
+$multicolumn-margin-top-bigger-small-value: unset !default;
+
+$footer-border-color: $content-font-alt !default;
+$popup-text-color: $selection-border !default;
+$grid-content-color: $content-font !default;
+$grid-content-hover-bg-color: $hover-bg !default;
+$grid-content-active-bg-color: $selection-bg !default;
+$grid-content-active-color: $selection-font !default;
+$grid-footer-bg-color: transparent !default;
+$grid-footer-color: $selection-border !default;
+$grid-group-content-header-color: $selection-border !default;
+$grid-group-content-header-bg-color: $bg-base-0 !default;
+$grid-header-content-bg-color: transparent !default;
+$grid-header-content-color: $selection-border !default;
+$altrow-bg-color: $bg-base-10 !default;
+$popup-box-shadow: none !default;
+$nodata-bg-color: $bg-base-0 !default;
+$nodata-border-color: $content-font-alt !default;

package/styles/multicolumn-combobox/_highcontrast-light-definition.scss

@@ -0,0 +1,29 @@
+$header-font-weight: 600 !default;
+$multicolumn-grid-height: 36px !default;
+$multicolumn-margin-top-value: unset !default;
+
+$multicolumn-grid-small-height: 32px !default;
+$multicolumn-margin-top-small-value: unset !default;
+
+$multicolumn-grid-bigger-height: 40px !default;
+$multicolumn-margin-top-bigger-value: unset !default;
+
+$multicolumn-grid-bigger-small-height: 38px !default;
+$multicolumn-margin-top-bigger-small-value: unset !default;
+
+$footer-border-color: $content-font-alt !default;
+$popup-text-color: $selection-border !default;
+$grid-content-color: $content-font !default;
+$grid-content-hover-bg-color: $hover-bg !default;
+$grid-content-active-bg-color: $selection-bg !default;
+$grid-content-active-color: $selection-font !default;
+$grid-footer-bg-color: transparent !default;
+$grid-footer-color: $selection-border !default;
+$grid-group-content-header-color: $selection-border !default;
+$grid-group-content-header-bg-color: $bg-base-0 !default;
+$grid-header-content-bg-color: transparent !default;
+$grid-header-content-color: $selection-border !default;
+$altrow-bg-color: $bg-base-10 !default;
+$popup-box-shadow: none !default;
+$nodata-bg-color: $selection-border !default;
+$nodata-border-color: $selection-border !default;

package/styles/multicolumn-combobox/_layout.scss

@@ -0,0 +1,130 @@
+@mixin multicolumn-combobox-styles($margin-top-value) {
+  &.e-multicolumn-list {
+    margin-top: $margin-top-value;
+  }
+}
+
+@include export-module('multicolumn-combobox-layout') {
+  .e-multicolumn-grid tr.e-groupcaptionrow {
+    position: sticky;
+    top: 0;
+  }
+  .e-multicolumn-grid th.e-grouptopleftcell.e-lastgrouptopleftcell,
+  .e-multicolumn-grid td.e-recordplusexpand,
+  .e-multicolumn-grid td.e-indentcell,
+  .e-multicolumn-grid col.e-group-intent,
+  .e-multicolumn-list .e-no-records + .e-grid {
+    display: none;
+  }
+  .e-multicolumn-grid .e-gridheader .e-headercelldiv {
+    overflow: hidden;
+  }
+  .e-multicolumn-list .e-popup-footer {
+    vertical-align: middle;
+    border-top: 1px solid;
+    font-size: 14px;
+    height: 38px;
+    padding: 8px 0;
+  }
+  .e-input-group.e-multicolumn-list {
+    input[readonly].e-input {
+      pointer-events: none;
+    }
+  }
+  .e-multicolumn-list {
+    &.e-icon-anim .e-multicolumn-list-icon::before {
+      transform: rotate(180deg);
+    }
+    &:not(.e-icon-anim) .e-multicolumn-list-icon::before {
+      transform: rotate(0deg);
+    }
+    .e-multicolumn-list-icon::before {
+      transition: transform 300ms ease;
+    }
+  }
+  .e-multicolumn-grid .e-grid {
+    overflow: auto;
+  }
+  .e-multicolumn-grid .e-row,
+  .e-multicolumn-grid .e-emptyrow {
+    height: $multicolumn-grid-height;
+  }
+  .e-multicolumn-group .e-sortnumber {
+    display: none;
+  }
+  .e-popup.e-multicolumn-list {
+    position: absolute;
+    border-radius: 4px;
+    margin-top: $multicolumn-margin-top-value;
+    .e-nodata {
+      cursor: default;
+      font-family: inherit;
+      font-size: 14px;
+      padding: 14px 16px;
+      text-align: center;
+      border-radius: inherit;
+    }
+    .e-headertext {
+      font-weight: $header-font-weight;
+    }
+    .e-gridheader {
+      position: sticky;
+      top: 0;
+      z-index: 1;
+    }
+  }
+
+  .e-multicolumn-grid .e-headercontent {
+    border-right-width: inherit !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-multicolumn-grid.e-rtl .e-headercontent {
+    border-left-width: inherit !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-multicolumn-grid .e-content {
+    overflow: auto !important; /* stylelint-disable-line declaration-no-important */
+  }
+
+  .e-small.e-popup,
+  .e-small .e-popup {
+    .e-multicolumn-grid .e-headercelldiv,
+    .e-multicolumn-grid .e-rowcell,
+    &.e-multicolumn-list .e-popup-footer {
+      font-size: 12px;
+    }
+    .e-multicolumn-grid .e-row,
+    .e-multicolumn-grid .e-emptyrow {
+      height: $multicolumn-grid-small-height;
+    }
+    @include multicolumn-combobox-styles($multicolumn-margin-top-small-value);
+  }
+
+  .e-bigger.e-popup,
+  .e-bigger .e-popup {
+    &.e-multicolumn-list .e-popup-footer {
+      font-size: 16px;
+    }
+    .e-multicolumn-grid .e-row,
+    .e-multicolumn-grid .e-emptyrow {
+      height: $multicolumn-grid-bigger-height;
+    }
+    @include multicolumn-combobox-styles($multicolumn-margin-top-bigger-value);
+  }
+
+  .e-bigger.e-small.e-popup,
+  .e-bigger.e-small .e-popup,
+  .e-bigger .e-small.e-popup,
+  .e-small .e-bigger.e-popup {
+    .e-multicolumn-grid .e-headercelldiv,
+    .e-multicolumn-grid .e-rowcell,
+    &.e-multicolumn-list .e-popup-footer {
+      font-size: 14px;
+    }
+    .e-multicolumn-grid .e-row,
+    .e-multicolumn-grid .e-emptyrow {
+      height: $multicolumn-grid-bigger-small-height;
+    }
+    @include multicolumn-combobox-styles($multicolumn-margin-top-bigger-small-value);
+  }
+}

package/styles/multicolumn-combobox/_material-dark-definition.scss

@@ -0,0 +1,29 @@
+$header-font-weight: 500 !default;
+$multicolumn-grid-height: 36px !default;
+$multicolumn-margin-top-value: 1px !default;
+
+$multicolumn-grid-small-height: 36px !default;
+$multicolumn-margin-top-small-value: 1px !default;
+
+$multicolumn-grid-bigger-height: 48px !default;
+$multicolumn-margin-top-bigger-value: 1px !default;
+
+$multicolumn-grid-bigger-small-height: 48px !default;
+$multicolumn-margin-top-bigger-small-value: 1px !default;
+
+$footer-border-color: $grey-700 !default;
+$popup-text-color: rgba($grey-white, .6) !default;
+$grid-content-color: rgba($grey-white, 1) !default;
+$grid-content-hover-bg-color: $grey-700 !default;
+$grid-content-active-bg-color: $grey-700 !default;
+$grid-content-active-color: $accent !default;
+$grid-footer-bg-color: transperent !default;
+$grid-footer-color: rgba($grey-white, .6) !default;
+$grid-group-content-header-color: rgba($grey-white, .6) !default;
+$grid-group-content-header-bg-color: $grey-800 !default;
+$grid-header-content-bg-color: $grey-dark !default;
+$grid-header-content-color: rgba($grey-white, .6) !default;
+$altrow-bg-color: $grey-700 !default;
+$popup-box-shadow: 0 .6px 1.8px 0 rgba($grey-black, .1), 0 3.2px 7.2px 0 rgba($grey-black, .13) !default;
+$nodata-bg-color: $grey-800 !default;
+$nodata-border-color: $grey-800 !default;

package/styles/multicolumn-combobox/_material-definition.scss

@@ -0,0 +1,29 @@
+$header-font-weight: 500 !default;
+$multicolumn-grid-height: 36px !default;
+$multicolumn-margin-top-value: 1px !default;
+
+$multicolumn-grid-small-height: 36px !default;
+$multicolumn-margin-top-small-value: 1px !default;
+
+$multicolumn-grid-bigger-height: 48px !default;
+$multicolumn-margin-top-bigger-value: 1px !default;
+
+$multicolumn-grid-bigger-small-height: 48px !default;
+$multicolumn-margin-top-bigger-small-value: 1px !default;
+
+$footer-border-color: $grey-300 !default;
+$popup-text-color: rgba($grey-black, .54) !default;
+$grid-content-color: rgba($grey-black, .87) !default;
+$grid-content-hover-bg-color: $grey-200 !default;
+$grid-content-active-bg-color: $grey-200 !default;
+$grid-content-active-color: $accent !default;
+$grid-footer-bg-color: transparent !default;
+$grid-footer-color: rgba($grey-black, .54) !default;
+$grid-group-content-header-color: rgba($grey-black, .54) !default;
+$grid-group-content-header-bg-color: $grey-white !default;
+$grid-header-content-bg-color: $grey-100 !default;
+$grid-header-content-color: rgba($grey-black, .54) !default;
+$altrow-bg-color: $grey-100 !default;
+$popup-box-shadow: 0 .6px 1.8px 0 rgba($grey-black, .1), 0 3.2px 7.2px 0 rgba($grey-black, .13) !default;
+$nodata-bg-color: $grey-white !default;
+$nodata-border-color: $grey-white !default;

package/styles/multicolumn-combobox/_material3-dark-definition.scss

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

package/styles/multicolumn-combobox/_material3-definition.scss

@@ -0,0 +1,29 @@
+$header-font-weight: 500 !default;
+$multicolumn-grid-height: 32px !default;
+$multicolumn-margin-top-value: 1px !default;
+
+$multicolumn-grid-small-height: 26px !default;
+$multicolumn-margin-top-small-value: 1px !default;
+
+$multicolumn-grid-bigger-height: 40px !default;
+$multicolumn-margin-top-bigger-value: 1px !default;
+
+$multicolumn-grid-bigger-small-height: 36px !default;
+$multicolumn-margin-top-bigger-small-value: 1px !default;
+
+$footer-border-color: $border-light !default;
+$popup-text-color: $content-text-color-alt1 !default;
+$grid-content-color: $content-text-color !default;
+$grid-content-hover-bg-color: $flyout-bg-color-hover !default;
+$grid-content-active-bg-color: $flyout-bg-color-selected !default;
+$grid-content-active-color: $flyout-text-color-selected !default;
+$grid-footer-bg-color: $transparent !default;
+$grid-footer-color: $content-text-color-alt1 !default;
+$grid-group-content-header-color: $content-text-color-alt1 !default;
+$grid-group-content-header-bg-color: rgba($content-bg-color) !default;
+$grid-header-content-bg-color: $transparent !default;
+$grid-header-content-color: $content-text-color-alt1 !default;
+$altrow-bg-color: $content-bg-color-alt1 !default;
+$popup-box-shadow: $shadow-md !default;
+$nodata-bg-color: $flyout-bg-color !default;
+$nodata-border-color: $flyout-bg-color !default;

package/styles/multicolumn-combobox/_tailwind-dark-definition.scss

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

package/styles/multicolumn-combobox/_tailwind-definition.scss

@@ -0,0 +1,29 @@
+$header-font-weight: 500 !default;
+$multicolumn-grid-height: 30px !default;
+$multicolumn-margin-top-value: 2px !default;
+
+$multicolumn-grid-small-height: 24px !default;
+$multicolumn-margin-top-small-value: 2px !default;
+
+$multicolumn-grid-bigger-height: 36px !default;
+$multicolumn-margin-top-bigger-value: 2px !default;
+
+$multicolumn-grid-bigger-small-height: 32px !default;
+$multicolumn-margin-top-bigger-small-value: 2px !default;
+
+$footer-border-color: $border-light !default;
+$popup-text-color: $content-text-color !default;
+$grid-content-color: $content-text-color !default;
+$grid-content-hover-bg-color: $content-bg-color-hover !default;
+$grid-content-active-bg-color: $content-bg-color-selected !default;
+$grid-content-active-color: $content-text-color-selected !default;
+$grid-footer-bg-color: transparent !default;
+$grid-footer-color: $content-text-color-alt2 !default;
+$grid-group-content-header-color: $content-text-color-alt2 !default;
+$grid-group-content-header-bg-color: $flyout-bg-color !default;
+$grid-header-content-bg-color: $content-bg-color-alt1 !default;
+$grid-header-content-color: $content-text-color-alt2 !default;
+$altrow-bg-color: $content-bg-color-alt1 !default;
+$popup-box-shadow: $shadow-lg !default;
+$nodata-bg-color: $flyout-bg-color !default;
+$nodata-border-color: $border-light !default;

package/styles/multicolumn-combobox/_theme.scss

@@ -0,0 +1,49 @@
+@include export-module('multicolumn-combobox-theme') {
+  .e-multicolumn-list .e-popup-footer {
+    background: $grid-footer-bg-color;
+    color: $grid-footer-color;
+    border-color: $footer-border-color;
+  }
+  .e-input-group.e-multicolumn-list:focus-visible {
+    outline: transparent;
+  }
+  .e-popup.e-multicolumn-list {
+    background: transparent;
+    box-shadow: $popup-box-shadow;
+    .e-nodata {
+      color: $popup-text-color;
+      border: 1px solid $nodata-border-color;
+      background: $nodata-bg-color;
+    }
+    .e-multicolumn-grid .e-rowcell {
+      color: $grid-content-color;
+    }
+    .e-multicolumn-grid .e-focused {
+      box-shadow: none;
+    }
+    .e-gridhover .e-row:hover .e-rowcell:not(.e-active),
+    .e-gridcontent .e-row-focus {
+      background: $grid-content-hover-bg-color !important; /* stylelint-disable-line declaration-no-important */
+    }
+    .e-multicolumn-grid td.e-active {
+      background: $grid-content-active-bg-color;
+      color: $grid-content-active-color;
+    }
+    .e-groupcaption {
+      color: $grid-group-content-header-color;
+      background: $grid-group-content-header-bg-color;
+    }
+    .e-gridheader,
+    .e-gridheader colgroup {
+      background: $grid-header-content-bg-color;
+    }
+    .e-altrow {
+      background: $altrow-bg-color;
+    }
+    .e-headertext,
+    .e-grid th.e-headercell[aria-sort = 'ascending'] .e-headertext,
+    .e-grid th.e-headercell[aria-sort = 'descending'] .e-headertext {
+      color: $grid-header-content-color;
+    }
+  }
+}