@retailcrm/embed-ui-v1-components 0.9.7 → 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);

package/dist/host.d.ts

@@ -155,16 +155,16 @@ declare const __VLS_component_2: DefineComponent_2<    {}, {}, {}, {}, {}, Compo
 
 declare const __VLS_component_3: DefineComponent_2<ExtractPropTypes<    {
 size: {
-type: PropType<SIZE_7 | `${SIZE_7}`>;
-default: SIZE_7;
+type: PropType<SIZE_9 | `${SIZE_9}`>;
+default: SIZE_9;
 };
 }>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
 size: {
-type: PropType<SIZE_7 | `${SIZE_7}`>;
-default: SIZE_7;
+type: PropType<SIZE_9 | `${SIZE_9}`>;
+default: SIZE_9;
 };
 }>> & Readonly<{}>, {
-size: "sm" | "md" | SIZE_7;
+size: "sm" | "md" | SIZE_9;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 declare function __VLS_template(): {
@@ -366,18 +366,31 @@ declare enum SIZE_3 {
 }
 
 declare enum SIZE_4 {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg"
+}
+
+declare enum SIZE_5 {
     LG = "lg",
     SM = "sm"
 }
 
-declare enum SIZE_5 {
+declare enum SIZE_6 {
+    XS = "xs",
+    SM = "sm",
+    XL = "xl"
+}
+
+declare enum SIZE_7 {
     LG = "lg",
     MD = "md",
     SM = "sm",
     XS = "xs"
 }
 
-declare enum SIZE_6 {
+declare enum SIZE_8 {
     XS = "xs",
     SM = "sm",
     MD = "md",
@@ -385,7 +398,7 @@ declare enum SIZE_6 {
     XL = "xl"
 }
 
-declare enum SIZE_7 {
+declare enum SIZE_9 {
     SM = "sm",
     MD = "md"
 }
@@ -550,6 +563,24 @@ declare type UiLoaderProperties = {
     overlay?: boolean;
 };
 
+export declare const UiMenuItem: DefineComponent<
+UiMenuItemProperties
+>;
+
+export declare const UiMenuItemGroup: DefineComponent;
+
+declare type UiMenuItemProperties = {
+    description?: string;
+    counter?: string | number | null;
+    accent?: boolean;
+    active?: boolean;
+    danger?: boolean;
+    ticker?: boolean;
+    simple?: boolean;
+    size?: `${SIZE_4}`;
+    disabled?: boolean;
+};
+
 export declare const UiModalSidebar: DefineComponent<UiModalSidebarProperties>;
 
 declare type UiModalSidebarProperties = {
@@ -560,7 +591,7 @@ declare type UiModalSidebarProperties = {
     disposeTimeout?: number | string | null;
     fixed?: boolean;
     scrolling?: SCROLLING | `${SCROLLING}`;
-    size?: SIZE_4 | `${SIZE_4}`;
+    size?: SIZE_5 | `${SIZE_5}`;
 };
 
 export declare const UiModalWindow: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
@@ -639,10 +670,44 @@ declare type UiScrollBoxProperties = {
     showOnMac?: boolean;
 };
 
+export declare const UiSelectPopper: DefineComponent<
+UiPopperProperties, { target: Ref<HTMLElement | null> },
+UiPopperMethods
+>;
+
+export declare const UiSelectTrigger: DefineComponent<
+UiSelectTriggerProperties,
+UiSelectTriggerMethods
+>;
+
+declare type UiSelectTriggerMethods = {
+    open(): void;
+    close(): void;
+    onClick(): void;
+    onInput(event: Event): void;
+    onFocus(event: Event): void;
+    onBlur(event: Event): void;
+    onClear(event: MouseEvent): void;
+};
+
+declare type UiSelectTriggerProperties = {
+    value?: unknown | unknown[];
+    clearable?: boolean;
+    filter?: string;
+    invalid?: boolean;
+    multiple?: boolean;
+    expanded?: boolean;
+    placeholder?: string;
+    placeholderOnly?: boolean;
+    readonly?: boolean;
+    disabled?: boolean;
+    textboxSize?: SIZE_6 | `${SIZE_6}`;
+};
+
 export declare const UiTag: DefineComponent<UiTagProperties>;
 
 declare type UiTagProperties = {
-    size?: SIZE_5 | `${SIZE_5}`;
+    size?: SIZE_7 | `${SIZE_7}`;
     pinned?: boolean;
     removable?: boolean;
     interactive?: boolean;
@@ -680,7 +745,7 @@ declare type UiTextboxProperties = {
     maxlength?: number | string;
     /** Максимальное количество знаков после запятой (для inputmode="decimal"). '*' — без ограничений */
     decimals?: number | `${number}` | '*';
-    size?: SIZE_6 | `${SIZE_6}`;
+    size?: SIZE_8 | `${SIZE_8}`;
     placeholder?: string;
     prefix?: string;
     suffix?: string;