@vitrosoftware/common-ui-ts 1.1.11 → 1.1.13

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

@@ -0,0 +1,311 @@
+.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%;
+}
+
+.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-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");
+}
+
+:global(.k-datepicker) {
+    width: 100% !important;
+}
+
+:global(.k-animation-container) {
+    top: 6px !important;
+    width: 100% !important;
+    min-width: 240px;
+}
+
+: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;
+}
+
+:global(.k-calendar) {
+    border-radius: 4px;
+    padding: 0;
+}
+
+:global(.k-calendar-view) {
+    padding: 8px 12px;
+    height: 226px !important;
+}
+
+:global(.k-picker-wrap) {
+    border-radius: 4px !important;
+    border: 1px solid #C0CAD5 !important;
+}
+
+:global(.k-picker-wrap.k-state-focused),
+:global(.k-picker-wrap.k-state-active) {
+    box-shadow: none !important;
+}
+
+.vitro-focus :global(.k-picker-wrap) {
+    border-color: #3274E0 !important;
+}
+
+.vitro-error :global(.k-picker-wrap) {
+    border-color: #D13438 !important;
+}
+
+:global(.k-i-calendar) {
+    width: 20px;
+    height: 20px;
+}
+
+:global(.k-i-calendar)::before {
+    content: '' !important;
+    display: inline-block;
+    height: 18px;
+    width: 18px;
+    background-repeat: no-repeat;
+    background-size: 100%;
+    background-position: center;
+    /* date-picker.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Vector'%3E%3Cpath d='M9.49725 6.25275C9.53799 6.29339 9.57032 6.34167 9.59237 6.39482C9.61443 6.44797 9.62578 6.50495 9.62578 6.5625C9.62578 6.62005 9.61443 6.67703 9.59237 6.73018C9.57032 6.78333 9.53799 6.83161 9.49725 6.87225L6.87225 9.49725C6.83161 9.53799 6.78333 9.57032 6.73018 9.59237C6.67703 9.61443 6.62005 9.62578 6.5625 9.62578C6.50495 9.62578 6.44797 9.61443 6.39482 9.59237C6.34167 9.57032 6.29339 9.53799 6.25275 9.49725L4.94025 8.18475C4.89957 8.14407 4.86731 8.09578 4.84529 8.04264C4.82328 7.98949 4.81195 7.93253 4.81195 7.875C4.81195 7.81747 4.82328 7.76051 4.84529 7.70736C4.86731 7.65422 4.89957 7.60593 4.94025 7.56525C5.0224 7.4831 5.13382 7.43695 5.25 7.43695C5.30753 7.43695 5.36449 7.44828 5.41764 7.47029C5.47078 7.49231 5.51907 7.52457 5.55975 7.56525L6.5625 8.56888L8.87775 6.25275C8.91839 6.21201 8.96667 6.17968 9.01982 6.15763C9.07297 6.13557 9.12995 6.12422 9.1875 6.12422C9.24505 6.12422 9.30203 6.13557 9.35518 6.15763C9.40833 6.17968 9.45661 6.21201 9.49725 6.25275Z' fill='%234A556C'/%3E%3Cpath d='M3.0625 0C3.17853 0 3.28981 0.0460936 3.37186 0.128141C3.45391 0.210188 3.5 0.321468 3.5 0.4375V0.875H10.5V0.4375C10.5 0.321468 10.5461 0.210188 10.6281 0.128141C10.7102 0.0460936 10.8215 0 10.9375 0C11.0535 0 11.1648 0.0460936 11.2469 0.128141C11.3289 0.210188 11.375 0.321468 11.375 0.4375V0.875H12.25C12.7141 0.875 13.1592 1.05937 13.4874 1.38756C13.8156 1.71575 14 2.16087 14 2.625V12.25C14 12.7141 13.8156 13.1592 13.4874 13.4874C13.1592 13.8156 12.7141 14 12.25 14H1.75C1.28587 14 0.840752 13.8156 0.512563 13.4874C0.184375 13.1592 0 12.7141 0 12.25V2.625C0 2.16087 0.184375 1.71575 0.512563 1.38756C0.840752 1.05937 1.28587 0.875 1.75 0.875H2.625V0.4375C2.625 0.321468 2.67109 0.210188 2.75314 0.128141C2.83519 0.0460936 2.94647 0 3.0625 0ZM0.875 3.5V12.25C0.875 12.4821 0.967187 12.7046 1.13128 12.8687C1.29538 13.0328 1.51794 13.125 1.75 13.125H12.25C12.4821 13.125 12.7046 13.0328 12.8687 12.8687C13.0328 12.7046 13.125 12.4821 13.125 12.25V3.5H0.875Z' fill='%234A556C'/%3E%3C/g%3E%3C/svg%3E%0A");
+}
+
+:global(.k-picker-wrap.k-state-default > .k-select) {
+    background: transparent;
+    margin-right: 16px;
+    width: 20px;
+    height: 20px;
+    align-self: center;
+}
+
+:global(.k-picker-wrap.k-state-hover > .k-select),
+:global(.k-picker-wrap.k-state-active > .k-select) {
+    background: transparent !important;
+}
+
+:global(.k-calendar th) {
+    font-size: 14px;
+    line-height: 16px;
+    color: #222D44;
+    height: 30px;
+    opacity: 1;
+}
+
+:global(.k-calendar td) {
+    height: 30px !important;
+    border: none;
+}
+
+:global(.k-today .k-link) {
+    border: 1px solid #347FDE;
+    height: 24px !important;
+    width: 24px !important;
+    border-radius: 2px;
+    color: #222D44 !important;
+    opacity: 1 !important;
+}
+
+:global(.k-today.k-state-focused .k-link) {
+    box-shadow: none;
+    border: 1px solid #347FDE;
+    color: #222D44;
+    padding: 0 !important;
+}
+
+:global(.k-calendar-view .k-link) {
+    height: 24px !important;
+    width: 24px !important;
+    padding: 0 !important;
+    margin: auto;
+}
+
+:global(.k-state-selected .k-link) {
+    height: 24px !important;
+    width: 24px !important;
+    border-radius: 2px !important;
+    border: none !important;
+    box-shadow: none !important;
+    background-color: #E4E6EC !important;
+    margin: auto;
+}
+
+:global(.k-state-selected.k-state-focused .k-link) {
+    background-color: #347FDE !important;
+    color: #fff !important;
+}
+
+:global(.k-state-hover .k-link) {
+    background-color: #DCEEFF !important;
+    border-radius: 2px !important;
+}
+
+:global(.k-header) {
+    border: none;
+    border-bottom: 1px solid #C0CAD5 !important;
+    height: 40px;
+    padding: 0 14px;
+    align-items: center;
+    color: #222D44 !important;
+    font-size: 14px;
+    line-height: 150%;
+    box-shadow: none !important;
+    background: #fff !important;
+}
+
+:global(.k-header .k-link) {
+    padding: 0;
+}
+
+:global(.k-header .k-nav-fast:hover),
+:global(.k-header .k-state-hover) {
+    color: #222D44 !important;
+    background: #fff !important;
+}
+
+:global(.k-nav-prev) span {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+    /* arrow-left.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 16L8 11L13 6' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+    width: 22px;
+    height: 22px;
+}
+
+:global(.k-nav-next) span {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100%;
+    /* arrow-right.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16L14 11L9 6' stroke='%238E98A3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
+    width: 22px;
+    height: 22px;
+}
+
+:global(.k-nav-prev) span::before,
+:global(.k-nav-next) span::before {
+    display: none;
+}
+
+:global(.k-footer) {
+    height: 42px;
+    border-top: 1px solid #C0CAD5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+:global(.k-footer .k-link) {
+    font-size: 14px;
+    line-height: 150%;
+    color: #347FDE !important;
+    text-decoration: none !important;
+    height: unset !important;
+    width: unset !important;
+    padding: 10px 0 !important;
+}

package/css/std/controls/dialog/dialog-button-close.css

@@ -0,0 +1,34 @@
+.vitro-dialog-button-close {
+    display: block;
+    position: absolute;
+    border: none;
+    background: 0 0;
+    outline: 0;
+    cursor: pointer;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    right: -48px;
+    top: 2px;
+    /* close.svg URL-encoder for SVG */
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' fill='none' stroke='%23fff' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 32.333l16-16m0 0l-16-16m16 16l16 16m-16-16l16-16'%3E%3C/path%3E%3C/svg%3E");
+}
+
+.vitro-button-close {
+    background: #fff !important;
+    color: #222D44 !important;
+    border: none;
+    margin-left: 12px;
+    font-family: 'InterRegular' !important;
+}
+
+.vitro-button-close:hover,
+.vitro-button-close:active {
+    background: #F3F8FF !important;
+}
+
+@media (max-width: 650px) {
+    .vitro-dialog-button-close {
+        display: none;
+    }
+}

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

@@ -0,0 +1,3 @@
+.vitro-dialog-button:disabled {
+    background: #E0E0E0;
+}

package/css/std/controls/dialog/dialog-content.css

@@ -0,0 +1,29 @@
+.vitro-dialog-content {
+    min-width: auto;
+    overflow: visible;
+    flex: none;
+    display: flex;
+    flex-direction: column;
+}
+
+.vitro-dialog-content > div:first-child {
+    margin-top: 26px;
+}
+
+.vitro-dialog-content {
+    max-height: 360px !important;
+    height: 360px;
+}
+
+.vitro-dialog-content textarea {
+    max-height: 200px;
+}
+
+.vitro-dialog-content:has(div[role=alert]) textarea {
+    max-height: 125px;
+}
+
+:global(.vitro-time-log-history) {
+    height: 100%;
+    margin: 0 !important;
+}

package/css/std/controls/dialog/dialog-footer.css

@@ -0,0 +1,9 @@
+.vitro-dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    z-index: 1000;
+    background: #fff;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+}

package/css/std/controls/dialog/dialog-header.css

@@ -0,0 +1,5 @@
+.vitro-dialog-header {
+    font-size: 18px;
+    line-height: 150%;
+    margin-bottom: 12px;
+}

package/css/std/controls/dialog/dialog.css

@@ -0,0 +1,35 @@
+.vitro-dialog {
+    position: fixed;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(34, 45, 68, 0.2);
+}
+
+.vitro-dialog > div {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #C0CAD5;
+    background: #fff;
+    position: absolute;
+    display: block;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    opacity: 1;
+    padding: 24px;
+    border-radius: 4px;
+    min-height: 514px;
+    width: 760px;
+    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.18), 0px 0px 4px 0px rgba(0, 0, 0, 0.14);
+}
+
+.vitro-dialog :global(.vitro-content) {
+    height: 400px;
+}

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

@@ -0,0 +1,145 @@
+.vitro-control {
+    width: 100%;
+    position: relative;
+    margin-bottom: 22px;
+}
+
+.vitro-control input,
+.vitro-control textarea {
+    width: 100%;
+    padding: 8px 16px;
+    background: #fff;
+    border: 1px solid #C0CAD5;
+    border-radius: 4px;
+    width: 100%;
+    font-size: 14px;
+    line-height: 16px;
+    color: #222D44;
+}
+
+.vitro-control input {
+    min-height: 40px;
+    white-space: normal;
+}
+
+.vitro-control textarea::-webkit-scrollbar {
+    width: 4px;
+}
+
+.vitro-control textarea::-webkit-scrollbar-track {
+    background: #fff;
+    border-radius: 4px;
+}
+
+.vitro-control textarea::-webkit-scrollbar-thumb {
+    background: #E4E6EC;
+    border-radius: 4px;
+}
+
+.vitro-control textarea::-webkit-scrollbar:hover {
+    background: #E4E6EC;
+}
+
+.vitro-control textarea {
+    scrollbar-color: #E4E6EC #fff;
+    scrollbar-width: thin;
+}
+
+.vitro-control input::placeholder,
+.vitro-control textarea::placeholder {
+    color: #6C757D;
+    font-family: 'InterRegular';
+    font-weight: 400;
+    line-height: 16px;
+}
+
+.vitro-focus input,
+.vitro-focus textarea {
+    border-color: #3274E0;
+}
+
+.vitro-focus .vitro-label {
+    color: #3274E0;
+}
+
+.vitro-read-only input,
+.vitro-read-only textarea {
+    color: #4A556C;
+    font-size: 12px;
+    user-select: none;
+    padding: 8px 36px 8px 16px;
+}
+
+.vitro-read-only input::selection,
+.vitro-read-only textarea::selection {
+    background: white;
+    color: #4A556C;
+}
+
+.vitro-error input,
+.vitro-error textarea {
+    border-color: #D13438;
+}
+
+.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-button-copy {
+    height: 20px;
+    width: 20px;
+    display: inline-block;
+    position: absolute;
+    right: 16px;
+    top: 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;
+}

package/css/std/controls/label/label.css

@@ -0,0 +1,8 @@
+.vitro-label {
+    font-size: inherit;
+    margin-left: 0;
+}
+
+.vitro-label .vitro-required {
+    color: red;
+}