@momentum-ui/web-components 2.5.7 → 2.6.0

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

@@ -1,318 +0,0 @@
-:host() {
-  .group {
-    background: var(--combobox-bg-color, $lm-combobox-bg-color-light);
-  }
-}
-
-:host(:focus) {
-  box-shadow: none !important;
-  outline: none !important;
-}
-
-:host([focus-visible]) {
-  .group {
-    border-color: var(--combobox-focus-border-color, $lm-combobox-focus-border-color-light);
-    box-shadow: none;
-  }
-}
-
-: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;
-    }
-  }
-}
-
-: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;
-}
-
-.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;
-    min-height: $combobox-min-height;
-    padding: $combobox-input-padding;
-
-    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;
-      padding: calc(#{$combobox-main-indent} / 2);
-
-      &:focus {
-        @include remove-focus;
-        @include focus-boxshadow(
-          rem-calc(2),
-          var(--md-focus-border-color, $lm-combobox-dropdown-item-focus-bg-color-light)
-        );
-      }
-    }
-
-    &: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-combobox-button {
-  @include arrow-transition;
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  height: $combobox-min-height;
-  margin: 0;
-  margin-left: calc(#{$combobox-main-indent} * 2);
-  outline: none;
-  padding: 0;
-  padding-top: calc(#{$combobox-main-indent} / 2);
-  position: relative;
-  vertical-align: bottom;
-
-  md-icon {
-    color: var(--combobox-dropdown-item-icon-color, $lm-combobox-dropdown-item-icon-color-light);
-  }
-}
-
-ul {
-  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-size: $font-size-base;
-  left: 0;
-  list-style: none;
-  margin: 0;
-  overflow: auto;
-  overflow-x: hidden;
-  padding: 0;
-  position: absolute;
-  top: calc(100% + #{$combobox-main-indent});
-  width: 100%;
-
-  .no-result {
-    padding: $combobox-option-padding;
-  }
-}
-
-.md-combobox-multi-input {
-  width: initial;
-}
-
-.highlight-text {
-  font-weight: $font-weight-bold;
-}
-
-.selected-label-text {
-  white-space: pre-wrap;
-}
-
-.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%;
-
-  .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-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: -$combobox-select-icon-top;
-      vertical-align: top;
-      visibility: hidden;
-    }
-  }
-
-  .indeterminate {
-    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;
-    }
-  }
-
-  &:hover {
-    background: var(--combobox-dropdown-item-hover-bg-color, $lm-combobox-dropdown-item-hover-bg-color-light);
-  }
-
-  &.md-combobox-multiselect {
-    border-bottom: 1px solid var(--md-button-tertiary-outline-color, $md-gray-70);
-  }
-
-  &[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] {
-    background: var(--combobox-dropdown-item-focus-bg-color, $lm-combobox-dropdown-item-focus-bg-color-light);
-  }
-}
-
-.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-bottom: calc(#{$combobox-main-indent} / 2);
-    margin-right: $combobox-main-indent;
-    margin-top: $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);
-  }
-}

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,33 +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-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-option-padding: rem-calc(7) rem-calc(12) rem-calc(8);
-$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(16);
-
-$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);

package/src/components/combobox/tokens/lm-combobox-tokens.js

@@ -1,120 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const combobox = {
-  prefix: "lm",
-  component: "combobox",
-  "bg-color": {
-    light: colors.white[100].name,
-    dark: colors.gray[100].name
-  },
-  "border-color": {
-    light: colors.gray[40].name,
-    dark: colors.gray[80].name
-  },
-  "text-color": {
-    light: colors.gray[70].name,
-    dark: colors.gray[40].name
-  },
-  hover: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[90].name
-    }
-  },
-  pressed: {
-    "bg-color": {
-      light: colors.gray[30].name,
-      dark: colors.gray[80].name
-    }
-  },
-  focus: {
-    "border-color": {
-      light: colors.theme[70].name,
-      dark: colors.theme[50].name
-    }
-  },
-  disabled: {
-    "bg-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[90].name
-    }
-  },
-  invalid: {
-    "bg-color": {
-      light: colors.red[10].name,
-      dark: colors.red[90].name
-    },
-    "border-color": {
-      light: colors.red[50].name,
-      dark: colors.red[50].name
-    }
-  },
-  dropdown: {
-    "bg-color": {
-      light: colors.white[100].name,
-      dark: colors.gray[90].name
-    },
-    item: {
-      "hover-bg-color": {
-        light: colors.blue[10].name,
-        dark: colors.blue[80].name
-      },
-      "focus-bg-color": {
-        light: colors.blue[20].name,
-        dark: colors.blue[70].name
-      },
-      "select-bg-color": {
-        light: colors.white[100].name,
-        dark: colors.gray[100].name
-      },
-      "checked-bg-color": {
-        light: colors.blue[50].name,
-        dark: colors.blue[50].name
-      },
-      "checked-icon-color": {
-        light: colors.white[60].name,
-        dark: colors.white[100].name
-      },
-      "icon-color": {
-        light: colors.gray[100].name,
-        dark: colors.gray[40].name
-      }
-    }
-  },
-  group: {
-    "button-bg-color": {
-      light: colors.gray[60].name,
-      dark: colors.gray[40].name
-    },
-    radius: {
-      light: "0.25rem",
-      dark: "0.25rem"
-    },
-    "focus-shadow": {
-      light: "0 0 4px 2px transparent",
-      dark: "0 0 4px 2px transparent"
-    },
-    "focus-border": {
-      light: "1px solid",
-      dark: "1px solid"
-    }
-  },
-  selected: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    },
-    "border-color": {
-      light: colors.gray[30].name,
-      dark: colors.gray[70].name
-    },
-    hover: {
-      light: colors.gray[40].name,
-      dark: colors.gray[80].name
-    }
-  }
-};
-
-module.exports = combobox;

package/src/components/combobox/tokens/md-combobox-tokens.js

@@ -1,120 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-/* eslint-disable no-undef */
-const colors = require("@momentum-ui/tokens/dist/colors.json");
-
-const combobox = {
-  prefix: "md",
-  component: "combobox",
-  "bg-color": {
-    light: colors.white[100].name,
-    dark: colors.gray[100].name
-  },
-  "border-color": {
-    light: colors.gray[30].name,
-    dark: colors.gray[70].name
-  },
-  "text-color": {
-    light: colors.gray[80].name,
-    dark: colors.gray[30].name
-  },
-  hover: {
-    "bg-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[80].name
-    }
-  },
-  pressed: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    }
-  },
-  focus: {
-    "border-color": {
-      light: colors.theme[50].name,
-      dark: colors.theme[60].name
-    }
-  },
-  disabled: {
-    "bg-color": {
-      light: colors.gray[10].name,
-      dark: colors.gray[80].name
-    }
-  },
-  invalid: {
-    "bg-color": {
-      light: colors.red[10].name,
-      dark: colors.red[90].name
-    },
-    "border-color": {
-      light: colors.red[50].name,
-      dark: colors.red[50].name
-    }
-  },
-  dropdown: {
-    "bg-color": {
-      light: colors.white[60].name,
-      dark: colors.gray[90].name
-    },
-    item: {
-      "hover-bg-color": {
-        light: "#e6f9fc",
-        dark: colors.theme[90].name
-      },
-      "focus-bg-color": {
-        light: "#b8f2ff",
-        dark: colors.theme[60].name
-      },
-      "select-bg-color": {
-        light: colors.white[60].name,
-        dark: colors.gray[90].name
-      },
-      "checked-bg-color": {
-        light: colors.theme[50].name,
-        dark: colors.theme[60].name
-      },
-      "checked-icon-color": {
-        light: colors.white[100].name,
-        dark: colors.white[60].name
-      },
-      "icon-color": {
-        light: colors.gray[100].name,
-        dark: colors.gray[40].name
-      }
-    }
-  },
-  group: {
-    "button-bg-color": {
-      light: colors.gray[60].name,
-      dark: colors.gray[40].name
-    },
-    radius: {
-      light: "0.25rem",
-      dark: "0.25rem"
-    },
-    "focus-shadow": {
-      light: "0 0 4px 2px #00a0d1",
-      dark: "0 0 4px 2px #00a0d1"
-    },
-    "focus-border": {
-      light: "0px solid",
-      dark: "0px solid"
-    }
-  },
-  selected: {
-    "bg-color": {
-      light: colors.gray[20].name,
-      dark: colors.gray[80].name
-    },
-    "border-color": {
-      light: colors.gray[30].name,
-      dark: colors.gray[70].name
-    },
-    hover: {
-      light: colors.gray[40].name,
-      dark: colors.gray[80].name
-    }
-  }
-};
-
-module.exports = combobox;

package/src/components/date-range-picker/DateRangePicker.stories.ts

@@ -1,62 +0,0 @@
-import "@/components/date-range-picker/DateRangePicker";
-import { DatePicker as DP } from "../datepicker/DatePicker"; // Keep type import as a relative path
-import { now } from "@/utils/dateUtils";
-import { withA11y } from "@storybook/addon-a11y";
-import { boolean, select, text, withKnobs } from "@storybook/addon-knobs";
-import { html } from "lit-element";
-import "../theme/Theme";
-
-export default {
-  title: "Components/Date Range Picker",
-  component: "md-date-range-picker",
-  decorators: [withKnobs, withA11y],
-  parameters: {
-    a11y: {
-      element: "md-date-range-picker"
-    }
-  }
-};
-
-export const DateRangePicker = () => {
-  const darkTheme = boolean("darkMode", false);
-  const lumos = boolean("Lumos Theme", false);
-  const shouldCloseOnSelect = boolean("shouldCloseOnSelect", false);
-  const weekStart = select("weekStart", DP.weekStartDays, "");
-  const locale = text("locale", "en-US");
-  const disabled = boolean("disabled", false);
-
-  const minDate = text(
-    "minimum date",
-    now()
-      .minus({ day: 5 })
-      .toISODate()
-  );
-
-  const maxDate = text(
-    "maximum date",
-    now()
-      .plus({ day: 30 })
-      .toISODate()
-  );
-
-  const value = text("value", now().toISODate());
-  const startDate = text("value", now().toISODate());
-  const endDate = text("value", now().toISODate());
-
-  return html`
-    <md-theme class="theme-toggle" id="datepicker" ?darkTheme=${darkTheme} ?lumos=${lumos}>
-      <md-date-range-picker
-        ?disabled=${disabled}
-        ?should-close-on-select=${shouldCloseOnSelect}
-        value=${value}
-        weekStart=${weekStart}
-        locale=${locale}
-        minDate=${minDate}
-        maxDate=${maxDate}
-        start-date=${startDate}
-        end-date=${endDate}
-      >
-      </md-date-range-picker>
-    </md-theme>
-  `;
-};