@retailcrm/embed-ui-v1-components 0.9.6 → 0.9.8

package/dist/host.css

@@ -1180,6 +1180,208 @@
 .ui-v1-transition-fade-2-leave-active.ui-v1-loader-wrapper {
   transition: opacity 0.1s;
 }
+.ui-v1-menu-item {
+  --ui-v1-menu-item-background-color: #EDF4FF;
+  --ui-v1-menu-item-main-color: #005EEB;
+  width: 100%;
+  padding: 2px 4px;
+}
+.ui-v1-menu-item,
+.ui-v1-menu-item *,
+.ui-v1-menu-item *::before,
+.ui-v1-menu-item *::after {
+  box-sizing: border-box;
+}
+.ui-v1-menu-item_danger {
+  --ui-v1-menu-item-background-color: #FFEDED;
+  --ui-v1-menu-item-main-color: #FF5353;
+}
+.ui-v1-menu-item_simple {
+  padding: 0;
+}
+.ui-v1-menu-item__inner {
+  display: flex;
+  align-items: flex-start;
+  padding: 6px 8px 6px 12px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: 0.25s ease;
+}
+.ui-v1-menu-item__inner_centered {
+  align-items: center;
+}
+.ui-v1-menu-item__inner:not(.ui-v1-menu-item__inner_disabled):hover {
+  background: var(--ui-v1-menu-item-background-color);
+}
+.ui-v1-menu-item__add-icon {
+  opacity: 0;
+}
+.ui-v1-menu-item:not(.ui-v1-menu-item_disabled):hover .ui-v1-menu-item__add-icon {
+  opacity: 1;
+}
+.ui-v1-menu-item__checkmark-icon,
+.ui-v1-menu-item__add-icon {
+  color: #005EEB;
+}
+.ui-v1-menu-item:active .ui-v1-menu-item__inner,
+.ui-v1-menu-item_active .ui-v1-menu-item__inner {
+  background: var(--ui-v1-menu-item-background-color);
+  border: 1px solid var(--ui-v1-menu-item-main-color);
+}
+.ui-v1-menu-item__inner:not(.ui-v1-menu-item__inner_disabled):hover .ui-v1-menu-item__icon_leading {
+  color: var(--ui-v1-menu-item-main-color);
+}
+.ui-v1-menu-item__inner:not(.ui-v1-menu-item__inner_disabled):hover .ui-v1-menu-item__icon_leading svg {
+  fill: var(--ui-v1-menu-item-main-color);
+}
+.ui-v1-menu-item__inner:not(.ui-v1-menu-item__inner_disabled):hover .ui-v1-menu-item__ticker {
+  animation: ui-v1-menu-item-ticker 2s linear 0.1s infinite alternate;
+  overflow: visible;
+}
+.ui-v1-menu-item__inner:not(:hover) .ui-v1-menu-item__text {
+  text-overflow: ellipsis;
+}
+.ui-v1-menu-item__content {
+  flex: 1 0 1px;
+  min-width: 0;
+}
+.ui-v1-menu-item__text {
+  padding-right: 4px;
+  color: #1E2248;
+  cursor: pointer;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.ui-v1-menu-item_md .ui-v1-menu-item__text {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+}
+.ui-v1-menu-item_sm .ui-v1-menu-item__text {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42857143;
+}
+.ui-v1-menu-item_simple .ui-v1-menu-item__text {
+  color: var(--ui-v1-menu-item-main-color);
+}
+.ui-v1-menu-item__ticker {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-v1-menu-item__description {
+  color: #636F7F;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42857143;
+  margin-top: 4px;
+}
+.ui-v1-menu-item__icon {
+  width: 24px;
+  min-width: 24px;
+  height: 24px;
+}
+.ui-v1-menu-item__icon_leading {
+  margin-right: 8px;
+  margin-left: -4px;
+}
+.ui-v1-menu-item__icon_trailing {
+  margin-left: 4px;
+}
+.ui-v1-menu-item__icon svg {
+  transition: 0.25s ease;
+}
+.ui-v1-menu-item__avatar {
+  margin-right: 8px;
+}
+.ui-v1-menu-item__counter {
+  max-width: 60%;
+  color: #8A96A6;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.42857143;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-left: 8px;
+  margin-top: 2px;
+}
+.ui-v1-menu-item_md .ui-v1-menu-item__counter {
+  margin-top: 3px;
+}
+.ui-v1-menu-item_disabled {
+  cursor: default;
+  opacity: 0.6;
+  user-select: none;
+}
+.ui-v1-menu-item_sm {
+  padding: 2px 4px;
+}
+.ui-v1-menu-item_sm .ui-v1-menu-item__inner {
+  padding: 2px 8px;
+  border-radius: 6px;
+}
+.ui-v1-menu-item_sm .ui-v1-menu-item__icon {
+  width: 20px;
+  min-width: 20px;
+  height: 20px;
+}
+.ui-v1-menu-item_sm .ui-v1-menu-item__icon_leading {
+  margin-right: 4px;
+}
+.ui-v1-menu-item_accent .ui-v1-menu-item__text {
+  font-weight: 500;
+}
+@keyframes ui-v1-menu-item-ticker {
+0% {
+    transform: translateX(0);
+}
+80% {
+    transform: translateX(var(--delta-width));
+}
+100% {
+    transform: translateX(var(--delta-width));
+}
+}
+.ui-v1-menu-item-group {
+  transform: translate3d(0, 0, 0);
+}
+.ui-v1-menu-item-group__head {
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(15px);
+  transition: 0.25s ease;
+  position: sticky;
+  top: 0;
+}
+@supports not (backdrop-filter: none) {
+.ui-v1-menu-item-group__head {
+    background: #fff;
+}
+}
+.ui-v1-menu-item-group__head-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 10px 6px 16px;
+}
+.ui-v1-menu-item-group__title {
+  color: #8A96A6;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.42857143;
+}
+.ui-v1-menu-item-group__title_upper {
+  text-transform: uppercase;
+}
+.ui-v1-menu-item-group__count {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  margin-left: 8px;
+  color: #8A96A6;
+}
 .ps {
   overflow: hidden !important;
   overflow-anchor: none;
@@ -1781,6 +1983,110 @@
 .ui-v1-radio_checked.ui-v1-radio_disabled .ui-v1-radio__checkmark::after {
   background: var(--ui-radio-disabled-color, #B8DBFF);
 }
+.ui-v1-select,
+.ui-v1-select *,
+.ui-v1-select *::before,
+.ui-v1-select *::after {
+  box-sizing: border-box;
+}
+.ui-v1-select__trigger {
+  width: 100%;
+  max-width: 100%;
+  position: relative;
+  text-align: left;
+}
+.ui-v1-select__touchstone {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.5;
+  opacity: 0;
+  white-space: nowrap;
+  transform: translateZ(0);
+  visibility: hidden;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.ui-v1-select__input {
+  text-overflow: ellipsis;
+}
+.ui-v1-select__popper {
+  --ui-v1-popper-padding: 2px 0;
+  --ui-v1-popper-roundings: 8px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Roboto", sans-serif;
+}
+.ui-v1-select__popper:focus {
+  outline: none !important;
+}
+.ui-v1-select__content {
+  max-height: 210px;
+  max-width: 500px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #DEE2E6 transparent;
+}
+.ui-v1-select__content::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 6px;
+}
+.ui-v1-select__content:hover .ui-v1-scroll-rail:not(.ui-v1-scroll-rail:hover):not(.ui-v1-scroll-rail_active) .ui-v1-scroll-rail__slider {
+  width: 6px;
+}
+.ui-v1-select__content_locked {
+  pointer-events: none;
+}
+.ui-v1-select__content_long {
+  max-width: 656px;
+}
+.ui-v1-select__no-results-text {
+  padding: 8px 16px;
+  background: #F9FAFB;
+  border-radius: 4px;
+  color: #636F7F;
+  word-break: break-all;
+  margin: 4px;
+}
+.ui-v1-select_active {
+  --border-color: var(--ui-v1-textbox-primary-color);
+  --active-color: var(--ui-v1-textbox-primary-color);
+}
+.ui-v1-select_active .ui-v1-select__caret {
+  color: var(--active-color);
+}
+.ui-v1-select:not(.ui-v1-select_active) .ui-v1-textbox {
+  --border-color: #DEE2E6;
+  --active-color: #DEE2E6;
+}
+.ui-v1-select:not(.ui-v1-select_active) .ui-v1-textbox.ui-v1-textbox_outlined {
+  box-shadow: none;
+}
+.ui-v1-select_filterable {
+  cursor: text;
+}
+.ui-v1-select-option_hidden {
+  display: none;
+}
+.ui-v1-select-option__add-icon {
+  opacity: 0;
+}
+.ui-v1-select-option:not(.ui-v1-select-option_disabled):hover .ui-v1-select-option__add-icon {
+  opacity: 1;
+}
+.ui-v1-select-option__checkmark-icon,
+.ui-v1-select-option__add-icon {
+  color: #005EEB;
+}
+.ui-v1-select-option-group + .ui-v1-select-option-group {
+  padding-top: 3px;
+  border-top: 1px solid #DEE2E6;
+  margin-top: 4px;
+}
+.ui-v1-select-option-group:nth-last-child(1) {
+  padding-bottom: 0;
+}
+.ui-v1-select-option-group_hidden {
+  display: none;
+}
 .ui-v1-tag-wrapper {
   display: inline-block;
   max-width: 100%;
@@ -2032,6 +2338,12 @@
   border-radius: 6px;
   line-height: var(--height);
 }
+.ui-v1-textbox_outlined:has(input[readonly]:not(:disabled)),
+.ui-v1-textbox_outlined:has(input[readonly]:not(:disabled):hover),
+.ui-v1-textbox_outlined input[readonly]:not(:disabled),
+.ui-v1-textbox_outlined input[readonly]:not(:disabled):hover {
+  cursor: pointer;
+}
 .ui-v1-textbox_outlined.ui-v1-textbox_xs {
   --height: 24px;
   --padding: 8px;
@@ -2112,8 +2424,13 @@
 .ui-v1-textbox_outlined:has(textarea:focus) {
   box-shadow: 0 0 0 4px var(--shadow-color);
 }
-.ui-v1-textbox_active {
-  border-color: var(--active-color);
+.ui-v1-textbox:not(.ui-v1-textbox_active):has(input[readonly]:focus:not(:disabled)),
+.ui-v1-textbox:not(.ui-v1-textbox_active):has(textarea[readonly]:focus:not(:disabled)) {
+  --border-color: #DEE2E6;
+}
+.ui-v1-textbox_outlined:not(.ui-v1-textbox_active):has(input[readonly]:focus),
+.ui-v1-textbox_outlined:not(.ui-v1-textbox_active):has(textarea[readonly]:focus) {
+  box-shadow: none;
 }
 .ui-v1-textbox__eraser {
   display: inline-flex;
@@ -2143,6 +2460,7 @@
   padding-block-start: calc((var(--height) - var(--icon-size)) / 2);
   justify-content: center;
   z-index: 2;
+  color: var(--ui-v1-textbox-icon-color);
 }
 .ui-v1-textbox__icon svg {
   width: var(--icon-size);