@momentum-ui/web-components 2.16.2 → 2.16.3

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

@@ -0,0 +1,637 @@
+: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;
+    }
+  }
+}
+
+:host([focus-visible]) {
+  .group {
+    border-color: var(--combobox-focus-border-color);
+    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);
+      background-color: var(--combobox-focus-bg-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-border-color) !important;
+      background-color: var(--combobox-disabled-bg-color);
+
+      md-icon {
+        opacity: 1;
+        color: var(--md-disabled-text-color);
+        fill: var(--md-disabled-text-color);
+      }
+
+      .md-combobox-right-arrow {
+        border-color: var(--combobox-disabled-border-color);
+      }
+    }
+
+    .md-combobox__multiwrap {
+      input {
+        color: var(--md-disabled-text-color);
+      }
+
+      input::placeholder,
+      input::-webkit-input-placeholder {
+        opacity: 1;
+        color: var(--md-disabled-text-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;
+    padding-right: $combobox-input-padding-right;
+    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 {
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    background: transparent;
+    height: $combobox-new-height;
+    max-width: 100%;
+    flex-grow: 1;
+
+    &.md-combobox-dropdown-arrow {
+      padding-right: $combobox-input-padding-right;
+    }
+
+    &:not(.md-combobox-dropdown-arrow) {
+      padding-right: 0;
+
+      .md-combobox-button {
+        margin-left: 0;
+      }
+
+      .md-combobox-button.clear {
+        margin-right: rem-calc(4);
+      }
+    }
+
+    span {
+      margin-right: -$combobox-main-indent;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: inline-block;
+      width: 100%;
+    }
+
+    &.compact {
+      height: $combobox-new-height-compact;
+
+      .md-combobox-button {
+        width: 20px;
+        height: 20px;
+        justify-content: center;
+        align-items: center;
+      }
+
+      .md-combobox__multiwrap {
+        display: flex;
+        align-items: center;
+        width: 50%;
+        max-height: $combobox-new-height-compact;
+
+        input {
+          height: $combobox-new-height-compact;
+          min-width: 0;
+          flex-grow: 1;
+          flex-shrink: 1;
+          width: auto;
+        }
+      }
+    }
+
+    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);
+      }
+    }
+  }
+
+  // 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;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  margin: 0;
+  margin-left: calc(#{$combobox-main-indent} * 2);
+  outline: none;
+  position: relative;
+  vertical-align: bottom;
+  height: inherit;
+  display: inline-flex;
+  border-radius: 50%;
+  width: rem-calc(20);
+  height: rem-calc(20);
+
+  .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 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;  
+}
+
+.md-combobox-right-arrow {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: rem-calc(32);  
+  border-left: $combobox-border;
+
+  .md-combobox-right-arrow {
+    margin-left: 0;
+  }
+
+  .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);
+  max-width: 100%;
+
+  .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-has-leading-icon {
+  .md-combobox__multiwrap {
+    margin-left: calc(#{$combobox-main-indent} * 1.5);
+  }
+}
+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

@@ -0,0 +1,9 @@
+@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

@@ -0,0 +1,17 @@
+@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

@@ -0,0 +1,39 @@
+: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-input-padding-right: rem-calc(8);
+$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);
+
+$combobox-new-height-compact: rem-calc(28);
+$combobox-new-height: rem-calc(32);