@vitrosoftware/common-ui-ts 1.1.11 → 1.1.13

package/css/std/controls/time-picker/time-picker.css

@@ -0,0 +1,286 @@
+.vitro-control {
+    margin-bottom: 22px;
+    width: 100%;
+    position: relative;
+}
+
+.vitro-button-copy {
+    height: 20px;
+    width: 20px;
+    display: inline-block;
+    position: absolute;
+    right: 16px;
+    top: calc(50% - 10px);
+    /* copy.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='copy-icon'%3E%3Cpath id='Vector' d='M4.33594 4.14517V3.27214C4.33594 2.0877 4.75567 1.66797 5.9401 1.66797H12.7318C13.9162 1.66797 14.3359 2.0877 14.3359 3.27214V10.0638C14.3359 11.2482 13.9162 11.668 12.7318 11.668H11.8414' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M10.0599 4.33203H3.26823C2.0838 4.33203 1.66406 4.75176 1.66406 5.9362V12.7279C1.66406 13.9123 2.0838 14.332 3.26823 14.332H10.0599C11.2443 14.332 11.6641 13.9123 11.6641 12.7279V5.9362C11.6641 4.75176 11.2443 4.33203 10.0599 4.33203Z' stroke='%238E98A3' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+    cursor: pointer;
+}
+
+.vitro-control-container {
+    position: relative;
+    z-index: 1100;
+    width: 100% !important;
+}
+
+.vitro-control input {
+    height: 40px !important;
+    font-size: 14px !important;
+    padding: 8px 16px !important;
+    color: #222D44 !important;
+    line-height: 16px !important;
+    border: none;
+}
+
+.vitro-control input::selection {
+    background: #3274E0
+}
+
+.vitro-control input::placeholder {
+    color: #6C757D;
+    font-family: 'InterRegular';
+    font-weight: 400;
+    line-height: 16px;
+}
+
+.vitro-focus .vitro-label {
+    color: #3274E0;
+}
+
+.vitro-focus :global(.k-picker-wrap) {
+    border-color: #3274E0 !important;
+}
+
+.vitro-error :global(.k-picker-wrap) {
+    border-color: #D13438 !important;
+}
+
+.vitro-read-only input {
+    color: #4A556C;
+    font-size: 12px;
+    padding: 8px 36px 8px 16px;
+    user-select: none;
+}
+
+.vitro-read-only .vitro-label {
+    color: #C0CAD5;
+}
+
+.vitro-read-only :global(.k-picker-wrap .k-select) {
+    display: none;
+}
+
+.vitro-error .vitro-label {
+    color: #D13438;
+}
+
+.vitro-label {
+    padding: 0 6px;
+    background: #fff;
+    z-index: 1000;
+    position: absolute;
+    left: 10px;
+    top: -10px;
+}
+
+.vitro-left-label {
+    display: flex;
+    align-items: center;
+}
+
+.vitro-left-label .vitro-label {
+    position: initial;
+    margin-right: 8px;
+    width: 300px;
+}
+
+.vitro-error-text {
+    display: flex;
+    align-items: center;
+    color: #D13438;
+    font-size: 14px;
+    line-height: 135%;
+    margin-top: 2px;
+}
+
+.vitro-focus .vitro-error-text {
+    display: none;
+}
+
+.vitro-error-text::before {
+    content: '';
+    display: inline-block;
+    height: 16px;
+    width: 16px;
+    margin-right: 4px;
+    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 17' fill='none'%3E%3Cpath d='M7.99888 1.07255C12.1016 1.07255 15.4275 4.39843 15.4275 8.50112C15.4275 12.6038 12.1016 15.9297 7.99888 15.9297C3.8962 15.9297 0.570312 12.6038 0.570312 8.50112C0.570312 4.39843 3.8962 1.07255 7.99888 1.07255Z' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 9.5L8 4.5' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.00446 11.6434C7.84667 11.6434 7.71875 11.7713 7.71875 11.9291C7.71875 12.0869 7.84667 12.2148 8.00446 12.2148' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.00781 11.6434C8.16561 11.6434 8.29353 11.7713 8.29353 11.9291C8.29353 12.0869 8.16561 12.2148 8.00781 12.2148' stroke='%23D13438' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
+
+.vitro-control :global(.k-timepicker) {
+    width: 100% !important;
+}
+
+.vitro-control :global(.k-animation-container) {
+    top: 6px !important;
+    left: unset !important;
+    right: 0 !important;
+    width: 190px !important;
+    min-width: unset !important;
+}
+
+.vitro-control :global(.k-popup) {
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.16), 0px 0px 4px 0px rgba(0, 0, 0, 0.12) !important;
+    background-color: #fff;
+    border-radius: 4px !important;
+    right: 0;
+    width: 100% !important;
+}
+
+.vitro-control :global(.k-picker-wrap) {
+    border-radius: 4px !important;
+    border: 1px solid #C0CAD5 !important;
+}
+
+.vitro-control :global(.k-i-clock) {
+    height: 16px;
+    width: 16px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='clock'%3E%3Cpath id='Vector' d='M7.99888 15.4275C12.1016 15.4275 15.4275 12.1016 15.4275 7.99888C15.4275 3.8962 12.1016 0.570312 7.99888 0.570312C3.8962 0.570312 0.570312 3.8962 0.570312 7.99888C0.570312 12.1016 3.8962 15.4275 7.99888 15.4275Z' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath id='Vector_2' d='M7.42969 3.42969V9.14397L10.8583 10.8583' stroke='%23222D44' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+.vitro-control :global(.k-i-clock)::before {
+    display: none;
+}
+
+.vitro-control :global(.k-picker-wrap > .k-select) {
+    background: transparent !important;
+    margin-right: 16px;
+    width: 20px;
+    height: 20px;
+    align-self: center;
+}
+
+.vitro-control :global(.k-picker-wrap.k-state-focused),
+.vitro-control :global(.k-picker-wrap.k-state-active) {
+    box-shadow: none !important;
+}
+
+.vitro-control :global(.k-title) {
+    font-family: 'InterMedium';
+    font-weight: unset !important;
+    color: #222D44;
+    background-color: #FFF !important;
+    font-size: 18px;
+    line-height: 27px;
+}
+
+.vitro-control :global(.k-time-container .k-item:hover) {
+    font-family: 'InterMedium';
+}
+
+.vitro-control :global(.k-time-highlight) {
+    border-color: #C0CAD5;
+}
+
+.vitro-control :global(.k-time-list)::after,
+.vitro-control :global(.k-time-list)::before {
+    box-shadow: 0 12px 30px 60px #fff;
+}
+
+.vitro-control :global(.k-time-list-wrapper.k-state-focused) {
+    background-color: #fff;
+}
+
+.vitro-control :global(.k-time-list-wrapper.k-state-focused)::before,
+.vitro-control :global(.k-time-list-wrapper.k-state-focused)::after {
+    display: none;
+}
+
+.vitro-control :global(.k-time-list-wrapper) {
+    background-color: #FFF;
+    width: 85px;
+    margin-top: 1px;
+}
+
+.vitro-control :global(.k-time-list-wrapper .k-title) {
+    font-family: 'InterRegular';
+    color: #222D44;
+    background-color: #FFF !important;
+    font-size: 12px;
+    line-height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 36px;
+    opacity: 1 !important;
+}
+
+.vitro-control :global(.k-time-list-container) {
+    justify-content: center;
+}
+
+.vitro-control :global(.k-time-header) {
+    height: 40px;
+    border-bottom: 1px solid #C0CAD5;
+    padding: 8px 24px;
+}
+
+.vitro-control :global(.k-time-footer) {
+    border-top: 1px solid #E4E6EC;
+    margin-top: 0 !important;
+}
+
+.vitro-control :global(.k-time-now) {
+    border-radius: 4px !important;
+    color: #3274E0 !important;
+    font-size: 14px !important;
+    line-height: 21px;
+    outline: none !important;
+}
+
+.vitro-control :global(.k-time-now):hover::before {
+    display: none;
+}
+
+.vitro-control :global(.k-action-buttons .k-button) {
+    background: #fff;
+    border-bottom-left-radius: 4px;
+    font-size: 14px;
+    line-height: 21px;
+    padding: 8px !important;
+    font-family: 'InterMedium';
+    color: #222D44;
+}
+
+.vitro-control :global(.k-action-buttons .k-primary) {
+    background: #347FDE;
+    border-bottom-left-radius: 0 !important;
+    border-bottom-right-radius: 4px !important;
+    color: white !important;
+}
+
+.vitro-control :global(.k-action-buttons .k-primary:hover) {
+    background: #3274E0;
+    border-color: #3274E0;
+}
+
+.vitro-control :global(.k-time-cancel):hover {
+    background: #F3F8FF !important;
+    background-image: none;
+}
+
+.vitro-control :global(.k-item) {
+    width: 85px;
+}
+
+.vitro-control :global(.k-item span) {
+    color: #222D44;
+    font-size: 14px;
+    line-height: 21px;
+}

package/css/std/controls/tree-view/tree-view-context-menu.css

@@ -0,0 +1,77 @@
+.vakata-context, .vakata-context ul {
+    background: white;
+    border: none;
+    box-shadow: 0 4px 16px rgb(0 0 0 / 10%);
+    border-radius: 8px;
+    z-index: 30;
+    padding: 0;
+}
+
+.vakata-context > li {
+    box-shadow: none;
+    position: relative;
+}
+
+.vakata-context > li:hover {
+    box-shadow: none;
+}
+
+.vakata-context li > a {
+    line-height: 40px;
+    padding: 0 20px;
+}
+
+.vakata-context li > a.vakata-context-parent {
+    background-image: none;
+}
+
+.vakata-context li > a.vakata-context-parent::after {
+    content: '';
+    position: absolute;
+    right: 12px;
+    top: 15px;
+    width: 10px;
+    height: 10px;
+    display: inline-block;
+    background-position: center center !important;
+    background-size: 8px;
+    background-repeat: no-repeat;
+    /* closed.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16;' xml:space='preserve'%3E%3Cpath d='M5.3,0.3l6.9,6.9c0.2,0.2,0.3,0.5,0.3,0.8v0c0,0.3-0.1,0.6-0.3,0.8l-6.9,6.9c-0.4,0.4-1.1,0.4-1.6,0h0 c-0.4-0.4-0.4-1.1,0-1.6l6-6.1c0,0,0,0,0,0l-6-6c-0.4-0.4-0.4-1.2,0-1.6l0,0C4.2-0.1,4.9-0.1,5.3,0.3z'/%3E%3C/svg%3E%0A") !important;
+}
+
+.vakata-context li > a:hover {
+    border: none;
+    background: #F5F6FA;
+    box-shadow: none;
+}
+
+.vakata-context .vakata-context-hover > a {
+    border: none;
+    background: #F5F6FA;
+    box-shadow: none;
+}
+
+.vakata-context > li:first-child > a {
+    border-radius: 8px 8px 0 0;
+}
+
+.vakata-context > li:last-child > a {
+    border-radius: 0 0 8px 8px;
+}
+
+.vakata-context ul > li:first-child > a {
+    border-radius: 8px 8px 0 0;
+}
+
+.vakata-context ul > li:last-child > a {
+    border-radius: 0 0 8px 8px;
+}
+
+.vakata-context li > a .vakata-contextmenu-sep {
+    display: none;
+}
+
+.vakata-context li > a i {
+    display: none;
+}

package/css/std/controls/tree-view/tree-view.css

@@ -0,0 +1,110 @@
+:global(#TreeView) {
+    height: 100%;
+    flex: 1 1;
+}
+
+:global(#TreeView) :global(.ps) {
+    padding-top: 8px;
+    padding-right: 12px;
+}
+
+.vitro-tree-view {
+    height: 100%;
+}
+
+.vitro-tree-view :global(.jstree-default) :global(.jstree-node) {
+    margin-left: 20px !important;
+}
+
+.vitro-tree-view {
+    scrollbar-color: #e0e0e0 #fff;
+    scrollbar-width: thin;
+}
+
+.vitro-tree-view :global(.jstree-anchor) {
+    line-height: 32px;
+    height: 32px;
+    user-select: none;
+}
+
+.vitro-tree-view :global(.jstree-wholerow) {
+    height: 32px;
+    border-radius: 4px;
+}
+
+.vitro-tree-view :global(.jstree-wholerow-hovered) {
+    background: #F3F8FF;
+    box-shadow: none;
+}
+
+.vitro-tree-view :global(.jstree-wholerow-clicked) {
+    background: #DCEEFF;
+    box-shadow: none;
+}
+
+.vitro-tree-view :global(.jstree-clicked) {
+    font-family: 'InterMedium';
+}
+
+.vitro-tree-view :global(.jstree-node):has(:global(.jstree-clicked.focus)) :global(.jstree-wholerow-clicked) {
+    background: #DCEEFF;
+}
+
+.vitro-tree-view :global(.jstree-wholerow-clicked.jstree-wholerow-hovered) {
+    background: #DCEEFF;
+    box-shadow: none;
+}
+
+.vitro-tree-view :global(.vitro-root-node) > :global(.jstree-ocl) {
+    display: none;
+}
+
+.vitro-tree-view :global(.vitro-root-node) > ul > li {
+    margin-left: 0;
+}
+
+.vitro-tree-view :global(.vitro-root-node) > :global(.jstree-anchor) > :global(.jstree-icon.folder) {
+    /* 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-tree-view :global(.jstree-node.jstree-open) :global(.jstree-anchor.jstree-clicked) :global(.jstree-icon.folder) {
+    /* folder-opened-selected.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='M5.49122 10.6332L5.65217 11.0749L5.49122 10.6332C5.26752 10.7147 4.93925 10.8561 4.68041 11.0743C4.28128 11.4108 4.07788 11.784 3.94081 12.1788C3.87518 12.3678 3.82376 12.5649 3.77492 12.7552C3.77085 12.771 3.76679 12.7869 3.76273 12.8027C3.71679 12.982 3.67084 13.1614 3.61215 13.3538C3.50172 13.7159 2.92642 15.3491 2.5 16.5402V12V6C2.5 4.61929 3.61929 3.5 5 3.5H7.75736C8.4204 3.5 9.05629 3.76339 9.52513 4.23223L10.6464 5.35355C10.7402 5.44732 10.8674 5.5 11 5.5H19C20.3807 5.5 21.5 6.61929 21.5 8V10.7919C21.1397 10.6006 20.7373 10.5 20.3277 10.5H18.9908H12H12L6.34573 10.4998C6.08284 10.4998 5.78546 10.526 5.49122 10.6332Z' stroke='%23326AD6' stroke-linejoin='round'/%3E%3Cpath d='M3.3971 12.2106C3.75306 10.9055 4.93853 10 6.29139 10H20.0722C22.0504 10 23.487 11.8809 22.9665 13.7894L21.6029 18.7894C21.2469 20.0945 20.0615 21 18.7086 21H4.92775C2.94963 21 1.51298 19.1191 2.03346 17.2106L3.3971 12.2106Z' fill='%234292F7'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-tree-view :global(.jstree-node.jstree-open) :global(.jstree-anchor) :global(.jstree-icon.folder) {
+    /* folder-opened.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='M5.49122 10.6332L5.65217 11.0749L5.49122 10.6332C5.26752 10.7147 4.93925 10.8561 4.68041 11.0743C4.28128 11.4108 4.07788 11.784 3.94081 12.1788C3.87518 12.3678 3.82376 12.5649 3.77492 12.7552C3.77085 12.771 3.76679 12.7869 3.76273 12.8027C3.71679 12.982 3.67084 13.1614 3.61215 13.3538C3.50172 13.7159 2.92642 15.3491 2.5 16.5402V12V6C2.5 4.61929 3.61929 3.5 5 3.5H7.75736C8.4204 3.5 9.05629 3.76339 9.52513 4.23223L10.6464 5.35355C10.7402 5.44732 10.8674 5.5 11 5.5H19C20.3807 5.5 21.5 6.61929 21.5 8V10.7919C21.1397 10.6006 20.7373 10.5 20.3277 10.5H18.9908H12H12L6.34573 10.4998C6.08284 10.4998 5.78546 10.526 5.49122 10.6332Z' stroke='%23999B9D' stroke-linejoin='round'/%3E%3Cpath d='M3.87948 12.3422C4.17611 11.2546 5.16401 10.5 6.29139 10.5H20.0722C21.7207 10.5 22.9179 12.0674 22.4842 13.6578L21.1205 18.6578C20.8239 19.7454 19.836 20.5 18.7086 20.5H4.92775C3.27932 20.5 2.08211 18.9326 2.51584 17.3422L3.87948 12.3422Z' stroke='%23999B9D'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-tree-view :global(.jstree-node.jstree-closed) :global(.jstree-anchor.jstree-clicked) :global(.jstree-icon.folder), .vitro-tree-view :global(.jstree-node.jstree-leaf) :global(.jstree-anchor.jstree-clicked) :global(.jstree-icon.folder) {
+    /* folder-closed-selected.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 6.35355C10.7402 6.44732 10.8674 6.5 11 6.5H19C20.3807 6.5 21.5 7.61929 21.5 9V17C21.5 18.3807 20.3807 19.5 19 19.5H5C3.61929 19.5 2.5 18.3807 2.5 17V7C2.5 5.61929 3.61929 4.5 5 4.5H7.75736C8.4204 4.5 9.05629 4.76339 9.52513 5.23223L10.6464 6.35355Z' fill='%234292F7' stroke='%234292F7' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-tree-view :global(.jstree-node.jstree-closed) :global(.jstree-anchor) :global(.jstree-icon.folder), .vitro-tree-view :global(.jstree-node.jstree-leaf) :global(.jstree-anchor) :global(.jstree-icon.folder) {
+    /* folder-closed.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 6.35355C10.7402 6.44732 10.8674 6.5 11 6.5H19C20.3807 6.5 21.5 7.61929 21.5 9V17C21.5 18.3807 20.3807 19.5 19 19.5H5C3.61929 19.5 2.5 18.3807 2.5 17V7C2.5 5.61929 3.61929 4.5 5 4.5H7.75736C8.4204 4.5 9.05629 4.76339 9.52513 5.23223L10.6464 6.35355Z' stroke='%23999B9D' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+}
+
+.vitro-tree-view :global(.jstree-icon) {
+    height: 32px !important;
+    line-height: 32px !important;
+    background-position: center !important;
+    margin-right: 4px;
+}
+
+.vitro-tree-view :global(.jstree-open > .jstree-icon.jstree-ocl) {
+    /* tree-opened.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='M17 10L12 15L7 10' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-position: center center !important;
+}
+
+.vitro-tree-view :global(.jstree-closed > .jstree-icon.jstree-ocl) {
+    /* tree-closed.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='M9.5 7L14.5 12L9.5 17' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-position: center center !important;
+}