@vitrosoftware/common-ui-ts 1.1.11 → 1.1.13

package/css/std/controls/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,137 @@
+.vitro-breadcrumbs {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    margin-bottom: 16px;
+}
+
+.vitro-breadcrumbs-list-wrap {
+    display: flex;
+    position: relative;
+    justify-content: space-between;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+}
+
+.vitro-breadcrumbs-list {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+}
+
+.vitro-breadcrumbs-list > li {
+    color: #8E98A3;
+    font-size: 14px;
+    line-height: 16px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+}
+
+.vitro-breadcrumbs-list > li::after, .vitro-breadcrumbs-button::after, .vitro-root::after {
+    content: '';
+    display: inline-block;
+    margin: 0 4px;
+    height: 16px;
+    width: 16px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* breadcrumbs-arrow.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12.1851C6 12.3633 6.21543 12.4525 6.34142 12.3265L10.5252 8.14272C10.6034 8.06462 10.6034 7.93799 10.5252 7.85988L6.34142 3.67606C6.21543 3.55006 6 3.6393 6 3.81748L6 12.1851Z' fill='%238E98A3'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-breadcrumbs-list > li:last-child{
+    color: #222D44;
+    font-family: 'InterMedium';
+}
+
+.vitro-breadcrumbs-list > li:last-child::after {
+    display: none;
+}
+
+.vitro-breadcrumbs-button {
+    height: 20px;
+    width: 20px;
+    cursor: pointer;
+    margin-right: 24px;
+    position: relative;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    /* breadcrumbs-button.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='header-super-next-btn'%3E%3Cpath id='Vector 11' d='M10 15L15 10L10 5' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector 10' d='M4 15L9 10L4 5' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-root {
+    cursor: pointer;
+    margin-right: 24px;
+    list-style-type: none;
+    line-height: 16px;
+    background-repeat: no-repeat;
+    width: 20px;
+    background-size: 100%;
+    /* root-folder.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.6464 5.35355C10.7402 5.44732 10.8674 5.5 11 5.5H19C20.3807 5.5 21.5 6.61929 21.5 8V18C21.5 19.3807 20.3807 20.5 19 20.5H5C3.61929 20.5 2.5 19.3807 2.5 18V6C2.5 4.61929 3.61929 3.5 5 3.5H7.75736C8.4204 3.5 9.05629 3.76339 9.52513 4.23223L10.6464 5.35355Z' stroke='%23999B9D' stroke-linejoin='round'/%3E%3Cpath d='M8 16L12 10' stroke='%23999B9D' stroke-linecap='round'/%3E%3Cpath d='M12 16L16 16' stroke='%23999B9D' stroke-linecap='round'/%3E%3C/svg%3E%0A") !important;
+}
+
+.vitro-root::after, .vitro-breadcrumbs-button::after {
+    margin-left: 24px;
+    height: 20px;
+}
+
+.vitro-drop-down-list {
+    z-index: 1000;
+    background: white;
+    position: absolute;
+    top: calc(100% + 11px);
+    left: 24px;
+    border-radius: 4px;
+    padding: 0;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.16), 0px 0px 4px 0px rgba(0, 0, 0, 0.12);
+}
+
+.vitro-drop-down-list::after {
+    content: '';
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+    background-color: #fff;
+    position: absolute;
+    top: -10px;
+    left: 20px;
+    clip-path: polygon(25% 25%, 75% 75%, 10% 90%);
+    transform: rotate(135deg);
+    border-radius: 20px;
+    border: 1px solid transparent;
+}
+
+.vitro-drop-down-list ul {
+    position: relative;
+    max-height: 160px;
+    padding: 0;
+    display: flex;
+    flex-direction: column-reverse;
+    list-style-type: none;
+    font-size: 14px;
+    color: #4A556C;
+    margin-bottom: 0px;
+    overflow: hidden;
+}
+
+.vitro-drop-down-list ul li {
+    line-height: 16px;
+    cursor: pointer;
+    padding: 8px 12px;
+    white-space: nowrap;
+}
+
+.vitro-drop-down-list ul li:hover {
+    background: #F3F8FF;
+}
+
+@media (max-width: 800px) {
+    .vitro-breadcrumbs {
+        margin-bottom: 12px;
+    }
+}

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

@@ -0,0 +1,67 @@
+.vitro-button {
+    font-family: 'InterSemiBold';
+    font-size: 14px;
+    outline: none;
+    height: 32px;
+    min-width: 85px;
+    color: #fff;
+    background: #347FDE;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 16px;
+    padding: 4px 8px;
+}
+
+.vitro-button > div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1 1;
+}
+
+.vitro-button:hover, 
+.vitro-button:active {
+    background: #3274E0;
+}
+
+.vitro-button:disabled {
+    background: #E4E6EC;
+}
+
+.vitro-button :global(.vitro-icon-default), 
+.vitro-button :global(.vitro-icon-hover) {
+    margin-right: 4px;
+    height: 24px;
+    width: 24px;
+}
+
+.vitro-button:before {
+    content: '';
+    position: absolute;
+    border: 2px solid #3274E0;
+    border-radius: 10px;
+    left: -5px;
+    right: -5px;
+    top: -5px;
+    bottom: -5px;
+    opacity: 0;
+    visibility: hidden;
+    transition: .1s;
+}
+
+:global(.vitro-effect-ripple) {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: vitro-animation-ripple 600ms linear;
+    background-color: #3274E0;
+}
+
+:global(.vitro-display-none) {
+    display: none;
+}

package/css/std/controls/command-menu/command-menu-button.css

@@ -0,0 +1,18 @@
+.vitro-command-menu-button {
+    font-family: 'InterRegular' !important;
+    border: none !important;
+    color: #222D44 !important;
+    background: #fff !important;
+    padding: 4px 8px !important;
+}
+
+.vitro-command-menu-button:hover,
+.vitro-command-menu-button:active {
+    background: #F3F8FF !important;
+}
+
+.vitro-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+}

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

@@ -0,0 +1,155 @@
+.vitro-command-menu-dropdown-button {
+    font-family: 'InterRegular';
+    border: none;
+    color: #222D44;
+    background: #fff;
+    outline: none;
+    height: 32px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 16px;
+    padding: 0 16px;
+}
+
+.vitro-command-menu-dropdown-button :hover
+.vitro-command-menu-dropdown-button :active {
+    background: #F3F8FF;
+}
+
+.vitro-dropdown-button-container :global(.dropdown-menu) {
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+    background: #fff;
+    border-radius: 4px;
+    border: none !important;
+    outline: none;
+    min-width: 241px;
+    width: fit-content;
+    font-size: 14px;
+    padding: 0px;
+    font-weight: 400;
+    box-sizing: border-box;
+    transform: none !important;
+    position: absolute;
+    z-index: 1150;
+    top: calc(100% + 6px);
+    right: -18px;
+}
+
+.vitro-dropdown-button-container :global(.dropdown-toggle):after,
+.vitro-dropdown-button-container :global(.dropdown-menu):before {
+    display: none;
+}
+
+.vitro-dropdown-button-container :global(.dropdown-menu::before) {
+    content: '';
+    display: block;
+    height: 11px;
+    width: 16px;
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    position: absolute;
+    right: 26px;
+    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-dropdown-button-container:first-child :global(.dropdown-menu) {
+    left: 0;
+}
+
+.vitro-dropdown-button-container:first-child :global(.dropdown-menu::before) {
+    left: 20px;
+}
+
+.vitro-dropdown-button-container :global(.dropdown-item) {
+    display: flex;
+    align-items: center;
+    height: 37px;
+    padding: 8px 12px;
+    border: none;
+    box-shadow: none;
+    outline: none;
+}
+
+.vitro-dropdown-button-container :global(.dropdown-item):first-child {
+    border-radius: 4px 4px 0 0;
+}
+
+.vitro-dropdown-button-container :global(.dropdown-item):last-child {
+    border-radius: 0 0 4px 4px;
+}
+
+.vitro-dropdown-button-container :global(.dropdown-item):hover,
+.vitro-dropdown-button-container :global(.dropdown-item):active {
+    background: #F3F8FF;
+}
+
+.vitro-dropdown-button-container :global(.dropdown-item) span {
+    font-family: "InterRegular";
+    font-size: 14px;
+    line-height: 21px;
+    color: #222D44;
+}
+
+.vitro-dropdown-button-container :global(.nav-link) {
+    color: #1e1e1e !important;
+    padding: 0px !important;
+}
+
+.vitro-dropdown-button-container :global(.dropdown-item) .vitro-icon {
+    width: 20px;
+    height: 20px;
+    background-size: 20px !important;
+    margin-right: 12px;
+    margin-left: 0;
+}
+
+.vitro-button-collapse-bottom {
+    width: 24px;
+    height: 24px;
+    margin-left: 4px;
+    background-size: 100%;
+    background-position: center;
+    background-repeat: no-repeat;
+    /* collapse-bottom.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='Chevron-dropdown-Big'%3E%3Cpath id='Vector 9' d='M19.5 9L12 16.5L4.5 9' stroke='%234A556C' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 4px;
+    margin-left: -8px;
+}
+
+:global(.vitro-button-active) {
+    border: 1px solid #4292F7 !important;
+}
+
+:global(.vitro-button-active:hover),
+:global(.vitro-button-active:active) {
+    border-color: #3274E0 !important;
+    background: #3274E0;
+    color: #fff;
+}
+
+:global(.vitro-button-context) {
+    padding: 0 !important;
+    width: 24px;
+}
+
+:global(.vitro-button-context > div) {
+    margin: 0 !important;
+}
+
+:global(.vitro-button-context:hover),
+:global(.vitro-button-context:active) {
+    border-color: #fff !important;
+}

package/css/std/controls/command-menu/command-menu-item.css

@@ -0,0 +1,14 @@
+.vitro-item {
+    display: flex;
+    align-items: center;
+}
+
+li:first-child .vitro-item {
+    background: #347FDE;
+    font-family: 'InterSemiBold';
+    color: #fff;
+}
+
+li:first-child .vitro-item:hover {
+    background: #3274E0;
+}

package/css/std/controls/command-menu/command-menu-lookup-picker.css

@@ -0,0 +1,48 @@
+.vitro-item-lookup-picker {
+  padding: 0px !important;
+  margin: 0;
+}
+
+.vitro-command-menu-lookup-picker {
+    width: 250px;
+}
+
+.vitro-command-menu-lookup-picker input {
+    min-width: 20px !important;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-content {
+    border: none !important;
+    min-height: initial;
+    padding: 4px 10px;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-value-list {
+    height: 450px;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-value-list > .ps.ps--active-y,
+.vitro-command-menu-lookup-picker > div.vitro-value-list > .ps:not(.ps--active-y) > div {
+    border-radius: 0;
+    box-shadow: none;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-content > .vitro-selected-item {
+    max-width: 190px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-value-list div.vitro-item {
+    border: none !important;
+    white-space: nowrap;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-content > .vitro-right svg path {
+    stroke: #222d44;
+}
+
+.vitro-command-menu-lookup-picker > div.vitro-content > div.vitro-right {
+    top: 10px;
+}

package/css/std/controls/command-menu/command-menu.css

@@ -0,0 +1,18 @@
+.vitro-command-menu {
+    display: flex;
+    z-index: 800;
+    padding: 0 !important;
+    margin-bottom: 12px;
+}
+
+.vitro-command-menu :global(.nav) {
+    flex-wrap: wrap;
+}
+
+.vitro-command-menu :global(.nav) > li {
+    margin-right: 12px;
+}
+
+.vitro-command-menu :global(.nav) > li:last-child {
+    margin-right: 0;
+}

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

@@ -0,0 +1,27 @@
+.vitro-control {
+    padding: 0 !important;
+    width: 100%;
+    position: relative;
+}
+
+.vitro-control :global(.vitro-control-container) {
+    position: relative;
+}
+
+.vitro-control-row {
+    display: flex;
+    align-items: baseline;
+}
+
+.vitro-control-row > span {
+    display: block;
+    margin: 0 5px;
+}
+
+.vitro-control-row .vitro-label {
+    width: 136px;
+}
+
+.vitro-control-row > div:not(:has(div, input)) {
+    width: 136px;
+}