@vitrosoftware/common-ui-ts 1.1.36 → 1.1.37

package/css/std/controls/action-handler/action-handler.css

@@ -17,6 +17,7 @@
 .vitro-icon-before {
     width: 42px;
     height: 42px;
+    min-width: 42px;
     margin-right: 16px;
 }
 

package/css/std/controls/button/button.css

@@ -25,7 +25,7 @@
     overflow: hidden;
 }
 
-.vitro-button div {
+.vitro-button > div > div {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;

package/css/std/controls/criterion/criterion.css

@@ -0,0 +1,217 @@
+.vitro-criterion-container {
+    width: 100%;
+    position: relative;
+    display: flex;
+    align-items: center;
+    margin-bottom: 28px;
+}
+
+.vitro-criterion-container:first-child {
+    margin-top: 10px;
+}
+
+.vitro-criterion-container:last-child {
+    margin-bottom: 18px;
+}
+
+.vitro-block:last-child .vitro-criterion-container {
+    margin-bottom: 18px;
+}
+
+.vitro-control {
+    position: relative;
+}
+
+.vitro-label {
+    padding: 0 6px;
+    background: #fff;
+    z-index: 1000;
+    position: absolute;
+    left: 10px;
+    top: -10px;
+    display: flex;
+}
+
+.vitro-operator-select-container {
+    min-width: 57px;
+    margin-right: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.vitro-operator-select {
+    cursor: pointer;
+    padding: 4px 6px;
+    line-height: 16px;
+    font-size: 12px;
+    border-radius: 4px;
+    background: #F7F9FC;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+}
+
+.vitro-operator-select > div {
+    display: inline-block;
+    line-height: 16px;
+    font-size: 12px;
+}
+
+.vitro-operator-select::after {
+    content: '';
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-left: 2px;
+    background-position: center;
+    background-size: 100%;
+    /* collapse-bottom.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19.5 9L12 16.5L4.5 9' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.vitro-operator-list {
+    position: absolute;
+    z-index: 10;
+    top: calc(100% + 2px);
+    right: 0;
+    width: fit-content;
+    min-width: 100%;
+    overflow: hidden;
+    border-radius: 4px;
+    background: #fff;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+}
+
+.vitro-operator-list li {
+    padding: 8px 12px;
+}
+
+.vitro-operator-list li:hover,
+.vitro-operator-list li:active {
+    background: #F3F8FF;
+}
+
+.vitro-control {
+    margin-bottom: 0px;
+    flex: 1 1;
+}
+
+.vitro-button-cancel {
+    width: 20px;
+    height: 20px;
+    min-width: 20px;
+    margin-left: 2px;
+    margin-top: -10px;
+    align-self: flex-start;
+    border: none;
+    background-color: transparent;
+    background-size: 100%;
+    background-position: center;
+    /* cancel-grey.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5.63281 14.3711L10.002 10.002L14.3711 14.3711M14.3711 5.63281L10.0011 10.002L5.63281 5.63281' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.vitro-focus .vitro-label {
+    color: #3274E0;
+}
+
+.vitro-error .vitro-label {
+    color: #D13438;
+}
+
+.vitro-condition-select {
+    padding: 0 6px 0 2px;
+    position: absolute;
+    top: -10px;
+    left: 0;
+    z-index: 10000;
+    background: #fff;
+}
+
+.vitro-condition-select > div {
+    border-radius: 16px;
+    background: #F1F3F5;
+    padding: 0 6px 0 8px;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    line-height: 16px;
+    cursor: pointer;
+}
+
+.vitro-condition-select > div::after {
+    content: '';
+    display: inline-block;
+    margin-left: 4px;
+    height: 16px;
+    width: 16px;
+    background-size: 100%;
+    background-position: center;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13 6L8 11L3 6' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.vitro-icon {
+    height: 16px;
+    width: 16px;
+}
+
+.vitro-condition-list {
+    position: absolute;
+    z-index: 1000000;
+    top: 14px;
+    left: 0;
+    width: fit-content;
+    min-width: 270px;
+    border-radius: 4px;
+    background: #fff;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+}
+
+.vitro-condition-list::before {
+    content: '';
+    display: block;
+    height: 11px;
+    width: 16px;
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    left: 24px;
+    top: -11px;
+    /* dropdown-arrow.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.31554 1.65838L0.382812 11H15.6249L9.69214 1.65838C8.90651 0.421336 7.10117 0.421335 6.31554 1.65838Z' fill='white'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-condition-list li {
+    padding: 8px 12px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    grid-gap: 12px;
+}
+
+.vitro-condition-list li:first-child {
+    border-radius: 4px 4px 0 0;
+}
+
+.vitro-condition-list li:last-child {
+    border-radius: 0 0 4px 4px;
+}
+
+.vitro-condition-list li:hover,
+.vitro-condition-list li:active {
+    background: #F3F8FF;
+}
+
+.vitro-condition-list .vitro-icon {
+    height: 20px;
+    width: 20px;
+}

package/css/std/controls/dropdown-button/dropdown-button.css

@@ -18,8 +18,6 @@
     outline: none;
     box-shadow: none !important;
     color: #E0E0E0;
-    font-family: inherit !important;
-    font-size: inherit !important;
     font-weight: normal !important;
     width: 24px;
     height: 24px;

package/css/std/controls/field-iterator/field-iterator.css

@@ -0,0 +1,17 @@
+:global(.vitro-inline) {
+    display: inline-flex;
+    flex: 1 1;
+    min-width: 180px;
+}
+
+:global(.vitro-inline) > div {
+    width: 100%;
+}
+
+:global(.vitro-block) {
+    width: 100%;
+}
+
+:global(.vitro-block):nth-child(2) {
+    margin-top: 8px;
+}

package/css/std/controls/lookup-picker/lookup-picker-selected-item.css

@@ -1,9 +1,45 @@
+.vitro-selected-item-multi,
 .vitro-selected-item {
     display: inline-flex;
     width: fit-content;
-    margin: 0 6px 0 0;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     align-items: center;
 }
+
+.vitro-selected-item-multi > span,
+.vitro-selected-item > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.vitro-selected-item {
+    margin-right: 6px;
+}
+
+.vitro-selected-item-multi {
+    background: #F7F9FC;
+    border-radius: 4px;
+    padding: 2px 4px;
+    margin-right: 12px;
+}
+
+.vitro-selected-item-multi:last-child {
+    margin-right: 0;
+}
+
+.vitro-button-close {
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    margin-left: 8px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
+.vitro-button-close {
+    /* close.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='iconoir:cancel'%3E%3Cpath id='Vector' d='M6.75781 17.2438L12.0008 12.0008L17.2438 17.2438M17.2438 6.75781L11.9998 12.0008L6.75781 6.75781' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}

package/css/std/controls/lookup-picker/lookup-picker-value-list.css

@@ -1,6 +1,6 @@
 .vitro-value-list {
     position: absolute;
-    z-index: 1001;
+    z-index: 10001;
     width: 100%;
     border-radius: 4px;
     margin-top: 4px;

package/css/std/controls/search/checkbox-list.css

@@ -0,0 +1,23 @@
+.vitro-checkbox-list {
+    border-radius: 4px;
+    background: #fff;
+    padding: 12px 0 0 12px;
+}
+
+.vitro-checkbox-list .vitro-control {
+    margin-bottom: 8px;
+    margin-right: 12px;
+}
+
+.vitro-checkbox-list .vitro-checkbox {
+    margin-bottom: 4px;
+}
+
+.vitro-checkbox:last-child,
+.vitro-checkbox-list span {
+    margin-bottom: 8px;
+}
+
+.vitro-checkbox-list span {
+    display: block;
+}

package/css/std/controls/search/input.css

@@ -0,0 +1,93 @@
+.vitro-control {
+    height: 32px;
+    border-radius: 4px;
+    border: 1px solid #4A556C;
+    padding: 4px 8px;
+    display: flex;
+    align-items: center;
+}
+
+.vitro-control.vitro-active {
+    border: 1px solid #C0CAD5;
+}
+
+.vitro-control.vitro-focus {
+    border: 1px solid #3274E0;
+}
+
+.vitro-control input {
+    border: none;
+}
+
+.vitro-control input::placeholder {
+    color: #8E98A3;
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 400 !important;
+}
+
+.vitro-search-value-list {
+    display: flex;
+    align-items: center;
+    flex: 1 1;
+    overflow: hidden;
+}
+
+.vitro-search-value-list::before {
+    content: '';
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    background-size: 100%;
+    background-position: center;
+    margin-right: 8px;
+    /* search-grey.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='circum:search'%3E%3Cpath id='Vector' d='M18.3236 18.8832C18.6858 19.2434 19.2449 18.6875 18.8827 18.3351L15.9297 15.3909C16.9656 14.2512 17.5381 12.7692 17.5361 11.233C17.5361 7.79544 14.725 5 11.2681 5C7.81118 5 5 7.79544 5 11.233C5 14.6705 7.81118 17.4659 11.2681 17.4659C12.8272 17.4659 14.2682 16.8943 15.3707 15.9468L18.3236 18.8832ZM5.78666 11.233C5.78666 8.22611 8.25136 5.78304 11.2673 5.78304C14.2911 5.78304 16.7479 8.22611 16.7479 11.233C16.7479 14.2398 14.2911 16.6829 11.2673 16.6829C8.25136 16.6829 5.78666 14.2398 5.78666 11.233Z' fill='%238E98A3'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-active .vitro-search-value-list::before {
+    /* search.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='circum:search'%3E%3Cpath id='Vector' d='M18.3236 18.8832C18.6858 19.2434 19.2449 18.6875 18.8827 18.3351L15.9297 15.3909C16.9656 14.2512 17.5381 12.7692 17.5361 11.233C17.5361 7.79544 14.725 5 11.2681 5C7.81118 5 5 7.79544 5 11.233C5 14.6705 7.81118 17.4659 11.2681 17.4659C12.8272 17.4659 14.2682 16.8943 15.3707 15.9468L18.3236 18.8832ZM5.78666 11.233C5.78666 8.22611 8.25136 5.78304 11.2673 5.78304C14.2911 5.78304 16.7479 8.22611 16.7479 11.233C16.7479 14.2398 14.2911 16.6829 11.2673 16.6829C8.25136 16.6829 5.78666 14.2398 5.78666 11.233Z' fill='%23222D44'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.vitro-button-cancel,
+.vitro-button-settings,
+.vitro-button-cancel:hover,
+.vitro-button-settings:hover {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    border: none;
+    background-size: 100%;
+    background-position: center;
+    margin-left: 8px;
+    background-color: #fff;
+}
+
+.vitro-button-settings {
+    border-radius: 4px;
+    /* search-settings.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='iconamoon:options-thin'%3E%3Cg id='Group'%3E%3Cpath id='Vector' d='M5.60156 8.80469H12.8016M16.0016 8.80469H18.4016M11.2016 15.2047H18.4016M5.60156 15.2047H8.00156' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M9.6 16.8016C10.4837 16.8016 11.2 16.0852 11.2 15.2016C11.2 14.3179 10.4837 13.6016 9.6 13.6016C8.71634 13.6016 8 14.3179 8 15.2016C8 16.0852 8.71634 16.8016 9.6 16.8016Z' stroke='%23222D44'/%3E%3Cpath id='Vector_3' d='M14.4047 10.4031C15.2883 10.4031 16.0047 9.68678 16.0047 8.80313C16.0047 7.91947 15.2883 7.20312 14.4047 7.20312C13.521 7.20312 12.8047 7.91947 12.8047 8.80313C12.8047 9.68678 13.521 10.4031 14.4047 10.4031Z' stroke='%23222D44'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-button-settings.vitro-active,
+.vitro-button-settings:hover {
+    background-color: #DCEEFF;
+}
+
+.vitro-button-cancel {
+    /* cancel-black.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.75781 17.2438L12.0008 12.0008L17.2438 17.2438M17.2438 6.75781L11.9998 12.0008L6.75781 6.75781' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-search-value {
+    border-radius: 4px;
+    background: #F7F9FC;
+    padding: 4px;
+    font-size: 14px;
+    line-height: 16px;
+    margin-right: 4px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/css/std/controls/search/search.css

@@ -0,0 +1,76 @@
+.vitro-search {
+    position: relative;
+    align-self: baseline;
+    margin-right: 16px;
+    margin-left: auto;
+    max-width: 50%;
+}
+
+.vitro-settings-dialog {
+    border-radius: 4px;
+    background: #fff;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    position: absolute;
+    top: 36px;
+    right: 0;
+    z-index: 10000001;
+    padding: 24px 0 16px 12px;
+    display: flex;
+    flex-direction: column;
+}
+
+.vitro-filter {
+    min-width: 502px;
+}
+
+.vitro-filter :global(.ps) {
+    overflow: visible !important;
+}
+
+.vitro-add-field {
+    position: relative;
+}
+
+.vitro-add-field-button,
+.vitro-add-field-button:hover,
+.vitro-add-field-button:active {
+    font-family: 'InterRegular' !important;
+    background: #fff !important;
+    color: #326AD6 !important;
+    margin-left: 66px;
+    padding: 0 !important;
+    min-width: unset !important;
+    height: 16px !important;
+}
+
+.vitro-add-field-dialog {
+    position: absolute;
+    z-index: 100;
+    top: 32px;
+    left: 0;
+    border-radius: 4px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+}
+
+.vitro-add-field-dialog :global(.ps) > div:first-child {
+    max-height: 204px;
+}
+
+.vitro-footer {
+    display: flex;
+    grid-gap: 12px;
+    justify-content: flex-end;
+    padding: 0 24px;
+    margin-top: auto;
+}
+
+.vitro-button-cancel {
+    background: #fff !important;
+    color: #222D44 !important;
+    font-family: 'InterRegular' !important;
+}
+
+.vitro-button-cancel:hover,
+.vitro-button-cancel:active {
+    background: #F3F8FF !important;
+}

package/css/std/controls/tab-group/tab-group.css

@@ -25,7 +25,7 @@
 }
 
 .vitro-tab :global(.ps) > div:first-child {
-    padding: 30px 16px 0 16px;
+    padding: 22px 16px 0 16px;
     display: flex;
     flex-wrap: wrap;
     grid-gap: 0 16px;

package/css/std/controls/uploader/uploader.css

@@ -4,7 +4,7 @@
     position: absolute;
     width: 241px;
     height: 96px;
-    z-index: 10000000000000;
+    z-index: 10000000;
 }
 
 .vitro-uploader:global(.vitro-dropzone-active) {

package/dist/constants/Event.d.ts

@@ -5,6 +5,7 @@ export declare enum EVENT {
     RESIZE = "resize",
     DRAGOVER = "dragover",
     DRAGLEAVE = "dragleave",
+    CLICK = "click",
     HISTORY_UPDATE = "vitro.history.update",
     HISTORY_CHANGED = "vitro.history.changed",
     DROP = "drop",

package/dist/controls/Criterion/ConditionSelect.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+interface ConditionSelectProps {
+    itemList: {
+        type: number;
+        text: string;
+        imageUrl?: string;
+        imageHoverUrl?: string;
+    }[];
+    onSelect: (condition: any) => any;
+    translateX: number;
+}
+export declare const ConditionSelect: (props: ConditionSelectProps) => JSX.Element;
+export {};

package/dist/controls/Criterion/Criterion.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { SearchCriterion } from '../Search/SearchCriterion';
+interface CriterionProps {
+    label: string;
+    operatorList: {
+        type: number;
+        text: string;
+    }[];
+    conditionList: {
+        type: number;
+        text: string;
+        imageUrl?: string;
+        imageHoverUrl?: string;
+    }[];
+    onChange: (value: SearchCriterion, name: string) => any;
+    onDelete: (name: string) => any;
+    className?: string;
+    isShowOperatorSelect: boolean;
+    content: {
+        component: React.FunctionComponent<any>;
+        props: {
+            [key: string]: any;
+        };
+    };
+}
+export declare const Criterion: (props: CriterionProps) => JSX.Element;
+export {};

package/dist/controls/DropdownButton/DropdownButton.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import { DropdownItem } from './DropdownItem';
 interface DropdownButtonProps {
     itemList: DropdownItem[];
-    title?: string;
+    title?: string | React.ReactNode;
     isIgnoreOverflow?: boolean;
+    isFlip?: boolean;
     onToggle?: (state: any, e: any) => any;
     className?: string;
     flip?: boolean;

package/dist/controls/FieldIterator/FieldIterator.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import '../../../css/std/controls/field-iterator/field-iterator.css';
+interface FieldIteratorProps {
+    fieldList: any[];
+    componentMap: {
+        name: string;
+        value: React.FunctionComponent<any>;
+    }[];
+    rowFieldList?: string[];
+    fieldValueMap?: Map<string, any>;
+    changedFieldValueMap?: Map<string, any>;
+    isClearChangedFieldValueMap?: boolean;
+    onChange: (changedFieldValueMap: Map<string, any>, saveStatus?: {
+        isSaving: boolean;
+    }) => any;
+    errorControlList?: {
+        fieldName: string;
+        message: string;
+    }[];
+}
+export declare const FieldIterator: (props: FieldIteratorProps) => JSX.Element;
+export {};

package/dist/controls/Search/CheckboxList.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface CheckboxListProps {
+    itemList: {
+        id: string;
+        name: string;
+        value?: boolean;
+    }[];
+    onChange?: (selectedItemList: string[]) => any;
+    isAllSelected?: boolean;
+}
+export declare const CheckboxList: (props: CheckboxListProps) => JSX.Element;
+export {};

package/dist/controls/Search/Filter.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+interface FilterProps {
+    fieldList: any[];
+    componentMap: {
+        name: string;
+        value: React.FunctionComponent<any>;
+    }[];
+    fieldValueMap?: Map<string, any>;
+    onChange: (changedFieldValueMap: Map<string, any>, saveStatus?: {
+        isSaving: boolean;
+    }) => any;
+    operatorList: {
+        type: number;
+        text: string;
+    }[];
+    conditionList: {
+        type: number;
+        text: string;
+        imageUrl?: string;
+        imageHoverUrl?: string;
+    }[];
+    onDeleteField: (id: string) => any;
+}
+export declare const Filter: (props: FilterProps) => JSX.Element;
+export {};

package/dist/controls/Search/Input.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { SearchCriterion } from '../Search/SearchCriterion';
+interface InputProps {
+    valueList?: SearchCriterion[];
+    textValue?: string;
+    placeholder?: string;
+    onSettingsClick?: (active: boolean) => any;
+    onCancel: () => any;
+    onEnter: (value?: string) => any;
+    onChange?: (value: any) => any;
+    isShowSettings?: boolean;
+    isSettingsActive?: boolean;
+    className?: string;
+}
+export declare const Input: (props: InputProps) => JSX.Element;
+export {};