@momentum-ui/web-components 2.14.13 → 2.14.14

package/src/components/combobox/scss/combobox.scss

@@ -1,572 +0,0 @@
-:host {
-  .group {
-    background: var(--combobox-bg-color, $lm-combobox-bg-color-light);
-  }
-}
-
-:host(:focus) {
-  box-shadow: none !important;
-  outline: none !important;
-}
-
-:host(:active) {
-  .md-new-combobox {
-    .group {
-      outline: 2px solid var(--input-default-outline-color);
-      outline-offset: rem-calc(2);
-      box-shadow: none;
-      border: $combobox-border !important;
-    }
-    .md-combobox-right-arrow {
-      border-left: $combobox-border !important;
-    }
-  }
-}
-
-:host([focus-visible]) {
-  .group {
-    border-color: var(--combobox-focus-border-color, $lm-combobox-focus-border-color-light);
-    box-shadow: none;
-  }
-  .md-new-combobox {
-    .group {
-      outline: 2px solid var(--combobox-focus-border-color);
-      outline-offset: rem-calc(2);
-      box-shadow: none;
-      border-color: var(--combobox-focus-new-border-color);
-    }
-    .md-combobox-right-arrow {
-      border-color: var(--combobox-focus-new-border-color);
-    }
-  }
-}
-
-:host([disabled]) {
-  .group,
-  .group:hover,
-  .group:active {
-    background: var(--combobox-disabled-bg-color, $lm-combobox-disabled-bg-color-light);
-    pointer-events: none;
-
-    md-icon {
-      opacity: $combobox-disabled-opacity;
-    }
-  }
-
-  .md-new-combobox {
-    .group,
-    .group:hover,
-    .group:active {
-      outline: none;
-      box-shadow: none;
-      border-color: var(--combobox-disabled-bg-color) !important;
-      background-color: transparent;
-
-      md-icon {
-        color: var(--md-primary-text-color);
-        fill: var(--md-primary-text-color);
-      }
-
-      .md-combobox-right-arrow {
-        border-color: var(--combobox-disabled-bg-color) !important;
-      }
-    }
-
-    .md-combobox__multiwrap {
-      input {
-        color: var(--combobox-disabled-bg-color);
-      }
-
-      input::placeholder,
-      input::-webkit-input-placeholder {
-        opacity: 1;
-        color: var(--combobox-disabled-bg-color);
-      }
-    }
-  }
-}
-
-:host([expanded]) {
-  .md-combobox-button {
-    &.arrow-down {
-      transform: rotate(180deg);
-    }
-  }
-}
-
-:host([invalid]) {
-  .group,
-  .group:hover,
-  .group:active {
-    background: $combobox-invalid-bg-color;
-    border-color: $combobox-invalid-border-color;
-  }
-
-  .md-combobox-error {
-    padding: $combobox-error-padding;
-  }
-}
-
-.md-combobox-list {
-  position: relative;
-  height: $combobox-min-height;
-}
-
-.md-combobox {
-  .group {
-    align-items: start;
-    background: var(--combobox-bg-color, $lm-combobox-bg-color-light);
-    border: $combobox-border;
-    border-radius: $combobox-group-radius;
-    display: flex;
-    padding: $combobox-input-padding;
-    height: rem-calc(34);
-
-    md-icon {
-      color: var(--md-secondary-text-color, $md-gray-70);
-      cursor: pointer;
-      fill: var(--md-secondary-text-color, $md-gray-70);
-      height: $combobox-search-icon-height;
-
-      &:focus {
-        @include remove-focus;
-        @include focus-boxshadow(
-          rem-calc(2),
-          var(--md-focus-border-color, $lm-combobox-dropdown-item-focus-bg-color-light)
-        );
-      }
-    }
-
-    .search-icon {
-      height: 100%;
-    }
-
-    &:hover {
-      background: var(--combobox-hover-bg-color, $lm-combobox-hover-bg-color-light);
-    }
-
-    &:active {
-      background: var(--combobox-pressed-bg-color, $lm-combobox-pressed-bg-color-light);
-    }
-
-    &.multiselect {
-      &:hover {
-        background: var(--combobox-bg-color, $lm-combobox-bg-color-light);
-      }
-
-      &:active {
-        background: var(--combobox-bg-color, $lm-combobox-bg-color-light);
-      }
-    }
-  }
-
-  .md-combobox-button[disabled] md-icon {
-    color: var(--md-disabled-text-color, $md-gray-40);
-  }
-
-  &--pill {
-    .group {
-      border-radius: 18px;
-    }
-  }
-}
-
-.md-new-combobox {
-  .group {
-    border-radius: 8px;
-    background: transparent;
-
-    .md-combobox-button.clear {
-      margin-right: $combobox-main-indent !important;
-    }
-
-    md-icon {
-      color: var(--md-primary-text-color);
-      cursor: pointer;
-      fill: var(--md-primary-text-color);
-
-      &:focus {
-        @include remove-focus;
-        @include focus-boxshadow(
-          rem-calc(2),
-          var(--md-focus-border-color, $lm-combobox-dropdown-item-focus-bg-color-light)
-        );
-      }
-    }
-
-    &:active {
-      border: $combobox-border;
-    }
-  }
-
-  .md-combobox__multiwrap {
-    input {
-      color: var(--md-primary-text-color);
-    }
-    .md-combobox-selected-item {
-      border-radius: 4px;
-      background: var(--combobox-selected-new-bg-color, $lm-combobox-selected-bg-color-light);
-      border-color: var(--combobox-selected-new-border-color, $lm-combobox-selected-bg-color-light);
-
-      md-icon {
-        font-size: 16px;
-      }
-    }
-  }
-
-  // Error
-  &.md-error {
-    .group,
-    .group:active {
-      border-color: var(--input-error-border-color) !important;
-
-      .md-combobox-right-arrow {
-        border-color: var(--input-error-border-color) !important;
-      }
-    }
-  }
-
-  // Warning
-  &.md-warning {
-    .group,
-    .group:active {
-      border-color: var(--input-warning-border-color) !important;
-
-      .md-combobox-right-arrow {
-        border-color: var(--input-warning-border-color) !important;
-      }
-    }
-  }
-
-  // Success
-  &.md-success {
-    .group,
-    .group:active {
-      border-color: var(--input-success-border-color) !important;
-
-      .md-combobox-right-arrow {
-        border-color: var(--input-success-border-color) !important;
-      }
-    }
-  }
-
-  &.md-combobox-readonly {
-    .group,
-    .group:hover,
-    .group:active {
-      border-color: var(--combobox-disabled-bg-color) !important;
-
-      .md-combobox-right-arrow {
-        border-color: var(--combobox-disabled-bg-color) !important;
-      }
-    }
-  }
-}
-
-.md-combobox__messages,
-.help-text {
-  padding-top: rem-calc(4);
-}
-
-.md-combobox-button {
-  @include arrow-transition;
-  align-self: center;
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  margin: 0;
-  margin-left: calc(#{$combobox-main-indent} * 2);
-  outline: none;
-  padding: 0;
-  padding-top: calc(#{$combobox-main-indent} / 1.5);
-  position: relative;
-  vertical-align: bottom;
-  height: inherit;
-  display: flex;
-
-  .md-input__icon-clear {
-    align-items: center;
-    display: flex;
-  }
-
-  md-icon {
-    color: var(--combobox-dropdown-item-icon-color, $lm-combobox-dropdown-item-icon-color-light);
-  }
-}
-.md-combobox-button.clear {
-  height: auto;
-  padding: 0.115rem;
-}
-
-.md-combobox-right-arrow {
-  height: 100%;
-  border-left: $combobox-border;
-  .md-combobox-button {
-    padding-top: calc(#{$combobox-main-indent} / 1.4);
-  }
-
-  .md-combobox-button.clear:focus,
-  .md-combobox-button.arrow-down:focus {
-    outline: none;
-  }
-}
-
-.md-combobox-button.clear:focus,
-.md-combobox-button.arrow-down:focus {
-  outline: 2px solid var(--button-focus-ring-color, #007aa3);
-}
-
-div#md-combobox-listbox {
-  background-color: var(--combobox-dropdown-bg-color, $lm-combobox-dropdown-bg-color-light);
-  border: $combobox-border;
-  border-radius: $combobox-dropdown-radius;
-  box-shadow: $combobox-dropdown-shadow;
-  box-sizing: border-box;
-  font-family: $brand-font-regular;
-  font-size: $font-size-base;
-  left: 0;
-  list-style: none;
-  margin: 0;
-  overflow: auto;
-  overflow-x: hidden;
-  position: absolute;
-  top: calc(100% + #{$combobox-main-indent});
-  width: 100%;
-  padding: var(--wc-menu-padding, 0);
-
-  .no-result {
-    padding: $combobox-option-padding;
-  }
-}
-.virtual-scroll {
-  overflow: auto;
-  position: relative;
-}
-
-.md-combobox-multi-input {
-  width: initial;
-}
-
-.highlight-text {
-  font-weight: $font-weight-bold;
-}
-
-.selected-label-text {
-  white-space: pre-wrap;
-}
-
-.group-label {
-  justify-content: space-between;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  color: var(--combobox-group-label-color);
-  padding: $combobox-option-padding;
-  border-bottom: 1px solid var(--combobox-group-label-border-color);
-  display: flex;
-  width: 100%;
-  background-color: var(--combobox-group-label-bg-color);
-  border-radius: var(--wc-menu-item-rounded-border-radius);
-
-  &:hover {
-    background: unset;
-    color: var(--combobox-group-label-color);
-  }
-
-  &[focused] {
-    background: var(--combobox-dropdown-item-focus-bg-color, $lm-combobox-dropdown-item-focus-bg-color-light);
-    color: var(--combobox-dropdown-item-select-font-color, $lm-combobox-dropdown-item-select-font-color-light);
-  }
-}
-
-.md-combobox-option {
-  align-items: center;
-  color: var(--md-primary-text-color, $md-gray-05);
-  display: flex;
-  margin: 0;
-  outline: none;
-  padding: $combobox-option-padding;
-  width: 100%;
-  border: solid 2px transparent;
-  border-radius: var(--wc-menu-item-rounded-border-radius);
-
-  .select-label {
-    @include text-dots;
-    cursor: default;
-    display: block;
-    letter-spacing: normal;
-    width: calc(100% - #{$combobox-select-size});
-
-    span {
-      margin-right: -$combobox-main-indent;
-      white-space: nowrap;
-    }
-  }
-
-  .select-option {
-    background: var(--combobox-dropdown-item-select-bg-color, $lm-combobox-dropdown-item-select-bg-color-light);
-    border: $combobox-select-border;
-    border-radius: calc(#{$combobox-dropdown-radius} / 2);
-    box-sizing: border-box;
-    cursor: pointer;
-    display: inline-block;
-    height: $combobox-select-size;
-    margin-right: $combobox-select-margin;
-    min-width: $combobox-select-size;
-    position: relative;
-
-    md-icon {
-      height: $combobox-select-icon-size;
-      left: $combobox-select-icon-left;
-      position: absolute;
-      top: auto;
-      vertical-align: top;
-      visibility: hidden;
-    }
-  }
-
-  &:hover {
-    background: var(--combobox-dropdown-item-hover-bg-color, $lm-combobox-dropdown-item-hover-bg-color-light);
-    color: var(--combobox-dropdown-item-select-font-color, $lm-combobox-dropdown-item-select-font-color-light);
-  }
-  &.md-combobox-multiselect {
-    border-bottom: 1px solid var(--md-primary-seperator-color, $md-gray-70);
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  &[aria-checked="true"] {
-    .select-option {
-      background: var(--combobox-dropdown-item-checked-bg-color, $lm-combobox-dropdown-item-checked-bg-color-light);
-      border: 1px solid
-        var(--combobox-dropdown-item-checked-bg-color, $lm-combobox-dropdown-item-checked-bg-color-light);
-
-      md-icon {
-        color: var(--combobox-dropdown-item-checked-icon-color, $lm-combobox-dropdown-item-checked-icon-color-light);
-        visibility: visible;
-      }
-    }
-  }
-
-  &[focused] {
-    border: 2px solid var(--md-default-focus-outline-color);
-  }
-  &[selected="true"] {
-    background: var(--combobox-dropdown-item-selected-bg-color, $lm-combobox-dropdown-item-selected-bg-color-light);
-    color: var(--combobox-dropdown-item-select-font-color, $lm-combobox-dropdown-item-select-font-color-light);
-    .select-option {
-      border: 1px solid #fff;
-    }
-  }
-}
-
-.md-combobox__multiwrap {
-  align-items: center;
-  display: inline-flex;
-  flex: 1 1 auto;
-  margin-left: 0;
-  max-height: calc(#{$combobox-select-size} * 4.5);
-
-  .selected-count {
-    color: var(--md-primary-text-color, $md-gray-05);
-  }
-
-  .md-combobox-selected-item {
-    align-items: center;
-    background: var(--combobox-selected-bg-color, $lm-combobox-selected-bg-color-light);
-    border: $combobox-selected-item-border;
-    border-radius: $combobox-selected-radius;
-    box-sizing: border-box;
-    cursor: pointer;
-    display: flex;
-    font-size: $font-size-small;
-    margin-right: $combobox-main-indent;
-    max-height: $combobox-selected-height;
-    padding: $combobox-input-padding;
-
-    span {
-      @include text-dots;
-      display: inline-block;
-      max-width: calc(#{$combobox-select-size} * 4);
-    }
-
-    .remove-item {
-      height: $combobox-selected-height;
-    }
-
-    &:hover {
-      background: var(--combobox-selected-hover, $lm-combobox-selected-hover-light);
-    }
-
-    &[selected] {
-      background: var(--combobox-selected-hover, $lm-combobox-selected-hover-light);
-    }
-  }
-
-  input {
-    @include text-dots;
-    background: transparent;
-    border: 0;
-    color: var(--md-secondary-text-color, $lm-combobox-text-color-light);
-    display: inline-block;
-    flex: 1 1 auto;
-    height: $combobox-min-height;
-    outline: none;
-  }
-
-  ::input-placeholder {
-    @include text-dots;
-    display: inline-block;
-    width: calc(100%);
-  }
-
-  .remove-item {
-    padding-left: calc(#{$combobox-main-indent} * 3);
-  }
-}
-
-.md-combobox-searchable {
-  .md-combobox__multiwrap {
-    margin-left: calc(#{$combobox-main-indent} * 3);
-  }
-}
-input::placeholder,
-input::-webkit-input-placeholder {
-  opacity: 1;
-  color: var(--combobox-placeholder-color, $lm-combobox-placeholder-color-light);
-}
-
-@media (forced-colors: active) {
-  :host([focus-visible]) .group {
-    border: none;
-    outline: 2px solid Highlight;
-    box-shadow: none;
-  }
-
-  .md-combobox-option {
-    .select-option {
-      background: Canvas;
-      color: CanvasText;
-      border: 1px solid CanvasText;
-    }
-
-    &[aria-checked="true"] {
-      .select-option {
-        background: Canvas;
-        color: CanvasText;
-        border: 1px solid CanvasText;
-
-        md-icon {
-          color: CanvasText;
-          visibility: visible;
-        }
-      }
-    }
-
-    &[focused] {
-      forced-color-adjust: none;
-      color: Canvas;
-      background-color: Highlight;
-    }
-  }
-}

package/src/components/combobox/scss/mixins.scss

@@ -1,9 +0,0 @@
-@mixin text-dots {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-@mixin arrow-transition {
-  transition: all 0.15s linear;
-}

package/src/components/combobox/scss/module.scss

@@ -1,17 +0,0 @@
-@import "@/wc_scss/tools/functions/core";
-
-// Settings
-@import "@/wc_scss/colors/settings-base";
-@import "@/wc_scss/colors/settings-transparencies";
-@import "@/wc_scss/settings/core";
-@import "@/wc_scss/settings/list-item";
-@import "@/wc_scss/tools/mixins/focus";
-
-@import "@/wc_scss/typography/settings";
-
-@import "./vars/lm-combobox-settings";
-
-// Component Specific
-@import "./settings";
-@import "./mixins";
-@import "./combobox";

package/src/components/combobox/scss/settings.scss

@@ -1,35 +0,0 @@
-:host {
-  --combobox-input-clear-bg: var(--combobox-group-button-bg-color, $lm-combobox-group-button-bg-color-light);
-}
-$combobox-radius: rem-calc(16);
-$combobox-border: 1px solid var(--combobox-border-color, $lm-combobox-border-color-light);
-$combobox-select-border: 1px solid var(--combobox-select-border-color, $lm-combobox-select-border-color-light);
-$combobox-group-radius: var(--combobox-group-radius, $lm-combobox-group-radius-light);
-$combobox-disabled-opacity: 0.3;
-$combobox-main-indent: rem-calc(4);
-$combobox-min-height: rem-calc(32);
-
-$combobox-focus-shadow: var(--combobox-group-focus-shadow, $lm-combobox-group-focus-shadow-light);
-$combobox-focus-border: var(--combobox-group-focus-border, $lm-combobox-group-focus-border-light);
-
-$combobox-search-icon-height: rem-calc(28);
-$combobox-dropdown-radius: rem-calc(8);
-$combobox-dropdown-shadow: 0 4px 8px $black-16, 0 0 1px $black-16;
-
-$combobox-input-padding: 0 rem-calc(12);
-$combobox-error-padding: rem-calc(3) 0 0 rem-calc(12);
-$combobox-new-error-padding: rem-calc(3) 0 0 0;
-
-$combobox-option-padding: rem-calc(5) rem-calc(12) rem-calc(6);
-$combobox-select-size: rem-calc(20);
-$combobox-select-icon-size: rem-calc(18);
-$combobox-select-icon-top: rem-calc(3);
-$combobox-select-icon-left: rem-calc(2);
-$combobox-select-margin: rem-calc(12);
-
-$combobox-selected-radius: rem-calc(14);
-$combobox-selected-height: rem-calc(24);
-$combobox-selected-item-border: 1px solid
-  var(--combobox-selected-border-color, $lm-combobox-selected-border-color-light);
-$combobox-invalid-bg-color: var(--combobox-invalid-bg-color, $lm-combobox-invalid-bg-color-light);
-$combobox-invalid-border-color: var(--combobox-invalid-border-color, $lm-combobox-invalid-border-color-light);