@vitrosoftware/common-ui-ts 1.1.98 → 1.1.100

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

@@ -0,0 +1,4 @@
+.vitro-bottom {
+    width: 100%;
+    margin-top: 16px;
+}

package/css/std/controls/flex-box/flex-box.css

@@ -0,0 +1,4 @@
+.vitro-flex-box {
+    display: flex;
+    align-items: center;
+}

package/css/std/controls/header/header-nav-bar.css

@@ -1,5 +1,12 @@
 .vitro-nav-bar {
-    padding: 0 16px;
+    padding: 12px 16px;
     width: 100%;
     height: 72px;
+}
+
+@media (max-width: 800px) {
+    .vitro-nav-bar {
+        height: unset;
+        min-height: 56px;
+    }
 }

package/css/std/controls/main/main.css

@@ -26,7 +26,7 @@
         width: calc(100% - 24px);
         margin: 0 auto;
         border-radius: 4px 4px 0px 0px;
-        height: calc(100% - 136px);
-        padding-bottom: 16px;
+        height: 100%;
+        padding-bottom: 66px;
     }
 }

package/css/std/controls/product-title/product-title.css

@@ -12,6 +12,7 @@
 @media (max-width: 800px) {
     .vitro-product-title img {
         margin: 0;
+        max-height: 22px;
     }
 
     .vitro-product-title {

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

@@ -1,17 +1,11 @@
 .vitro-checkbox-list {
     border-radius: 4px;
     background: #fff;
-    padding: 12px 0 0 12px;
+    max-width: 307px;
 }
 
-.vitro-checkbox-list .vitro-control {
-    margin-bottom: 8px;
-    margin-right: 12px;
-    width: unset !important;
-}
-
-.vitro-checkbox-list .vitro-control > div {
-    width: unset !important;
+.vitro-checkbox-list :global(.ps) > div:first-child {
+    padding-left: 12px;
 }
 
 .vitro-checkbox-list .vitro-checkbox {

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

@@ -89,6 +89,28 @@
     background: #F3F8FF !important;
 }
 
+.vitro-button-settings,
+.vitro-button-settings:hover {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    border: none;
+    background-size: 100%;
+    background-position: center;
+    margin-left: 8px;
+    background-color: transparent;
+}
+
+.vitro-button-settings {
+    border-radius: 4px;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search/img/search-settings.svg');
+}
+
+.vitro-button-settings.vitro-active,
+.vitro-button-settings:hover {
+    background-color: #DCEEFF;
+}
+
 @media (max-width: 800px) {
     .vitro-filter {
         width: 100%;

package/css/std/controls/{search/input.css → search-input/search-input.css}

@@ -1,4 +1,4 @@
-.vitro-control {
+.vitro-search-input {
     height: 32px;
     border-radius: 4px;
     border: 1px solid #C0CAD5;
@@ -7,57 +7,54 @@
     align-items: center;
 }
 
-.vitro-control.vitro-active {
+.vitro-search-input:global(.vitro-active) {
     border: 1px solid #C0CAD5;
 }
 
-.vitro-control.vitro-focus {
+.vitro-search-input:global(.vitro-focus) {
     border: 1px solid #3274E0;
 }
 
-.vitro-control input {
+.vitro-search-input input {
     border: none;
     width: 100%;
+    background: transparent;
 }
 
-.vitro-control input::placeholder {
+.vitro-search-input input::placeholder {
     color: #4A556C;
     font-size: 14px;
     line-height: 16px;
     font-weight: 400 !important;
 }
 
-.vitro-button-search {
+.vitro-search-value-list {
+    flex: 1 1;
+    overflow: hidden;
+}
+
+.vitro-search-input :global(.vitro-button-search),
+.vitro-search-input :global(.vitro-button-search):hover {
     width: 24px;
     height: 24px;
     border: none;
     outline: none;
     flex-shrink: 0;
-    background-color: #fff;
+    background-color: transparent;
     background-size: 100%;
     background-position: center;
     margin-right: 8px;
-    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search/img/search.svg');
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search-input/img/search.svg');
 }
 
-.vitro-button-search:hover,
-.vitro-button-search:active,
-.vitro-button-search:focus {
+.vitro-search-input :global(.vitro-button-search):hover,
+.vitro-search-input :global(.vitro-button-search):active,
+.vitro-search-input :global(.vitro-button-search):focus {
     background-color: #fff;
 }
 
-
-.vitro-search-value-list {
-    display: flex;
-    align-items: center;
-    flex: 1 1;
-    overflow: hidden;
-}
-
 .vitro-button-cancel,
-.vitro-button-settings,
-.vitro-button-cancel:hover,
-.vitro-button-settings:hover {
+.vitro-button-cancel:hover {
     width: 24px;
     height: 24px;
     flex-shrink: 0;
@@ -68,25 +65,13 @@
     background-color: transparent;
 }
 
-.vitro-button-settings {
-    border-radius: 4px;
-    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search/img/search-settings.svg');
-}
-
-.vitro-button-settings.vitro-active,
-.vitro-button-settings:hover {
-    background-color: #DCEEFF;
-}
-
 .vitro-button-cancel {
-    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search/img/cancel-black.svg');
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search-input/img/cancel-black.svg');
 }
 
 .vitro-search-value {
     border-radius: 4px;
     background: #F7F9FC;
-    display: flex;
-    align-items: center;
     min-width: 0;
     grid-gap: 8px;
     padding: 0 4px;
@@ -104,24 +89,24 @@
 
 .vitro-search-value .vitro-button-cancel {
     margin: 0;
-    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search/img/cancel-dark-grey.svg');
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/search-input/img/cancel-dark-grey.svg');
 }
 
 @media (max-width: 800px) {
-    .vitro-control,
-    .vitro-control.vitro-active {
+    .vitro-search-input,
+    .vitro-search-input:global(.vitro-active) {
         border: none;
         padding: 0;
     }
 
-    .vitro-button-search {
+    .vitro-search-input :global(.vitro-button-search) {
         margin: 0;
         height: 32px;
         width: 32px;
         border-radius: 4px;
     }
 
-    .vitro-active.vitro-button-search {
+    :global(.vitro-active):global(.vitro-button-search) {
         background-color: #DCEEFF;
     }
 }

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

@@ -0,0 +1,13 @@
+.vitro-search-input-container {
+    padding: 12px;
+}
+
+.vitro-empty-placeholder {
+    align-items: center;
+    color: #c0cad5;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+    width: 100%;
+    padding: 8px 12px;
+}

package/css/std/controls/sidebar/sidebar-item.css

@@ -186,17 +186,6 @@
     margin-bottom: 0;
 }
 
-.vitro-popup-container {
-    transform: translate3d(0px, 0, 0px) !important;
-    height: 100%;
-    width: 100%;
-    padding: 0 0 56px 0;
-    display: flex;
-    flex-direction: column;
-    background: rgba(34, 45, 68, 0.56);
-    z-index: 1;
-}
-
 .vitro-scrollbar {
     max-height: 292px;
 }
@@ -218,25 +207,17 @@
     padding: 0 24px;
 }
 
-.vitro-popup-item-list {
-    background: #F7F9FC;
-    width: 100%;
-    border-radius: 8px 8px 0 0;
-    padding: 0 0 4px 0;
-    margin: auto 0 0 0;
-}
-
-.vitro-popup-item-list .vitro-item {
+.vitro-scrollbar .vitro-item {
     margin-bottom: 8px;
     width: 100% !important;
 }
 
-.vitro-popup-item-list .vitro-item:last-child {
+.vitro-scrollbar .vitro-item:last-child {
     margin-bottom: 16px;
 }
 
-.vitro-popup-item-list .vitro-item > a,
-.vitro-popup-item-list .vitro-item > button {
+.vitro-scrollbar .vitro-item > a,
+.vitro-scrollbar .vitro-item > button {
     background-color: #fff;
     padding: 12px;
     height: 48px;
@@ -246,8 +227,8 @@
     justify-content: flex-start;
 }
 
-.vitro-popup-item-list .vitro-item > a::before,
-.vitro-popup-item-list .vitro-item > button::before {
+.vitro-scrollbar .vitro-item > a::before,
+.vitro-scrollbar .vitro-item > button::before {
     content: '';
     display: block;
     flex-shrink: 0;
@@ -259,15 +240,15 @@
     background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/sidebar/img/list-marker.svg');
 }
 
-.vitro-popup-item-list .vitro-active {
+.vitro-scrollbar .vitro-active {
     background-color: #DCEEFF !important;
 }
 
-.vitro-popup-item-list .vitro-active .vitro-item-text {
+.vitro-scrollbar .vitro-active .vitro-item-text {
     font-family: 'InterRegular';
 }
 
-.vitro-popup-item-list .vitro-item-text {
+.vitro-scrollbar .vitro-item-text {
     font-size: 16px;
     line-height: 24px;
     color: #222D44;

package/css/std/controls/site-select/img/collapse-bottom-triangle.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.56286 9C5.38468 9 5.29545 9.21543 5.42144 9.34142L11.9386 15.8586C12.0167 15.9367 12.1433 15.9367 12.2214 15.8586L18.7386 9.34142C18.8646 9.21543 18.7754 9 18.5972 9H5.56286Z" fill="#4A556C"/>
+</svg>

package/css/std/controls/site-select/img/collapse-up-triangle.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.56286 15C5.38468 15 5.29545 14.7846 5.42144 14.6586L11.9386 8.14142C12.0167 8.06332 12.1433 8.06332 12.2214 8.14142L18.7386 14.6586C18.8646 14.7846 18.7754 15 18.5972 15H5.56286Z" fill="#4A556C"/>
+</svg>

package/css/std/controls/site-select/img/default-site-image.svg

@@ -0,0 +1,7 @@
+<svg width="32" height="33" viewBox="0 0 32 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="0.5" width="32" height="32" rx="4" fill="#F3F8FF"/>
+<path d="M25 17C25 21.9706 20.9706 26 16 26C11.0294 26 7 21.9706 7 17C7 12.0294 11.0294 8 16 8C20.9706 8 25 12.0294 25 17Z" stroke="#92C1FD"/>
+<path d="M20 17C20 21.9706 18.2091 26 16 26C13.7909 26 12 21.9706 12 17C12 12.0294 13.7909 8 16 8C18.2091 8 20 12.0294 20 17Z" stroke="#92C1FD"/>
+<path d="M24 21.795C22.2145 20.7053 19.3666 20 16.1583 20C12.7531 20 9.75391 20.7945 8 22" stroke="#92C1FD"/>
+<path d="M24 12.0869C22.2506 13.2435 19.3484 14 16.0641 14C12.6982 14 9.73365 13.2055 8 12" stroke="#92C1FD"/>
+</svg>

package/css/std/controls/site-select/img/dropdown-menu-arrow.svg

@@ -0,0 +1 @@
+<svg viewBox='0 0 44 42' fill='none' xmlns='http://www.w3.org/2000/svg'><g filter='url(#filter0_dd_778_105705)'><path d='M20.3117 11.6584C21.0973 10.4213 22.9027 10.4213 23.6883 11.6584L29.5752 20.9278C30.4208 22.2593 29.4642 24 27.8869 24H16.1131C14.5358 24 13.5792 22.2593 14.4248 20.9278L20.3117 11.6584Z' fill='white'/></g><defs><filter id='filter0_dd_778_105705' x='0.109375' y='0.730469' width='43.7812' height='41.2695' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'><feFlood flood-opacity='0' result='BackgroundImageFix'/><feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/><feOffset dy='4'/><feGaussianBlur stdDeviation='7'/><feComposite in2='hardAlpha' operator='out'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.18 0'/><feBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_778_105705'/><feColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/><feOffset/><feGaussianBlur stdDeviation='2'/><feComposite in2='hardAlpha' operator='out'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.14 0'/><feBlend mode='normal' in2='effect1_dropShadow_778_105705' result='effect2_dropShadow_778_105705'/><feBlend mode='normal' in='SourceGraphic' in2='effect2_dropShadow_778_105705' result='shape'/></filter></defs></svg>

package/css/std/controls/site-select/img/search-grey.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.031 20.7901C20.491 21.2501 21.201 20.5401 20.741 20.0901L16.991 16.3301C18.3064 14.8746 19.0336 12.9819 19.031 11.0201C19.031 6.63006 15.461 3.06006 11.071 3.06006C6.68102 3.06006 3.11102 6.63006 3.11102 11.0201C3.11102 15.4101 6.68102 18.9801 11.071 18.9801C13.051 18.9801 14.881 18.2501 16.281 17.0401L20.031 20.7901ZM4.11002 11.0201C4.11002 7.18006 7.24002 4.06006 11.07 4.06006C14.91 4.06006 18.03 7.18006 18.03 11.0201C18.03 14.8601 14.91 17.9801 11.07 17.9801C7.24002 17.9801 4.11002 14.8601 4.11002 11.0201Z" fill="#A5A5A5"/>
+</svg>

package/css/std/controls/site-select/img/search.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="circum:search">
+<path 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="#222D44"/>
+</g>
+</svg>

package/css/std/controls/site-select/site-item.css

@@ -0,0 +1,52 @@
+.vitro-item {
+    grid-gap: 8px;
+    padding: 8px 12px;
+    cursor: pointer;
+}
+
+.vitro-item:hover {
+    background-color: #F3F8FF;
+}
+
+.vitro-item.vitro-active {
+    background-color: #DCEEFF;
+}
+
+.vitro-name {
+    color: #1E1E1E;
+    font-size: 14px;
+    white-space: normal;
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+}
+
+.vitro-image,
+.vitro-default-image {
+    width: 32px;
+    height: 32px;
+    flex-shrink: 0;
+}
+
+.vitro-default-image {
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/site-select/img/default-site-image.svg');
+}
+
+.vitro-hidden {
+    visibility: hidden;
+}
+
+.vitro-item.vitro-mobile-view {
+    padding: 12px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.25);
+    margin-bottom: 8px;
+}
+
+.vitro-item.vitro-mobile-view:last-child {
+    margin-bottom: 0;
+}

package/css/std/controls/site-select/site-select.css

@@ -0,0 +1,163 @@
+.vitro-site-select {
+    position: relative;
+    z-index: 21;
+    margin-left: 32px;
+    max-width: 320px;
+}
+
+.vitro-site-select :global(.ps) {
+    max-height: 400px;
+    padding-bottom: 8px;
+}
+
+.vitro-site-select :global(.ps.ps--active-y) {
+    padding-right: 12px;
+}
+
+.vitro-site-select :global(.ps__rail-y),
+.vitro-site-select :global(.ps__rail-x) {
+    border: none;
+    background-color: transparent !important;
+}
+
+.vitro-flex {
+    grid-gap: 4px;
+}
+
+.vitro-site-select h2 {
+    font-size: 14px;
+    line-height: 16px;
+    margin-bottom: 0;
+    cursor: pointer;
+}
+
+.vitro-expand,
+.vitro-expand:hover,
+.vitro-collapse,
+.vitro-collapse:hover {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.vitro-expand {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/site-select/img/collapse-bottom-triangle.svg');
+}
+
+.vitro-collapse {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/site-select/img/collapse-up-triangle.svg');
+}
+
+.vitro-collapse::after {
+    content: '';
+    width: 32px;
+    height: 21px;
+    display: block;
+    position: absolute;
+    z-index: 1;
+    right: -4px;
+    top: calc(100% - 5px);
+    overflow: hidden;
+    background-position: center 0;
+    background-size: 44px 42px;
+    background-repeat: no-repeat;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/site-select/img/dropdown-menu-arrow.svg');
+}
+
+.vitro-site-list {
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.14), 0 4px 14px 0 rgba(0, 0, 0, 0.18);
+    position: absolute;
+    top: calc(100% + 16px);
+    left: 0;
+    width: 357px;
+}
+
+.vitro-title {
+    font-family: 'InterMedium';
+    color: #4A556C;
+    font-size: 14px;
+    line-height: 24px;
+    padding: 8px 0;
+    margin: 0 12px;
+    border-top: 1px solid rgba(228, 230, 236, 0.5);
+    justify-content: space-between;
+}
+
+.vitro-search-input {
+    border: 1px solid #6C6C6C;
+}
+
+.vitro-search-input input::placeholder {
+    color: #A5A5A5;
+}
+
+.vitro-search-input :global(.vitro-button-search) {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/site-select/img/search-grey.svg');
+}
+
+.vitro-root-item {
+    font-family: 'InterMedium';
+}
+
+.vitro-slide-up-panel .vitro-title {
+    border: none;
+    margin-bottom: 8px;
+}
+
+.vitro-slide-up-panel :global(.ps__rail-y),
+.vitro-slide-up-panel :global(.ps__rail-x) {
+    border: none;
+    background-color: transparent !important;
+}
+
+@media (max-width: 800px) {
+    .vitro-site-select {
+        z-index: 0;
+        margin: 0;
+        width: 100%;
+        max-width: unset;
+    }
+
+    .vitro-search-value-list {
+        height: calc(100% - 28px);
+    }
+    
+    .vitro-search-value-list > div:first-child {
+        padding: 0 16px 24px;
+    }
+
+    .vitro-search-input {
+        height: 36px;
+        border: 1px solid #C0CAD5;
+        padding: 4px 8px;
+    }
+
+    .vitro-search-input:global(.vitro-focus) {
+        border: 1px solid #4A556C;
+    }
+
+    .vitro-search-input :global(.vitro-button-search) {
+        width: 24px;
+        height: 24px;
+        margin-right: 8px;
+        background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/site-select/img/search.svg');
+    }
+
+    .vitro-slide-up-panel :global(.ps) {
+        height: calc(100% - 60px);
+    }
+    
+    .vitro-slide-up-panel :global(.ps) > div:first-child {
+        padding: 0 16px;
+    }
+
+    .vitro-collapse::after {
+        display: none;
+    }
+}

package/css/std/controls/slide-up-panel/slide-up-panel.css

@@ -0,0 +1,39 @@
+.vitro-slide-up-panel {
+    transform: translate3d(0px, 0, 0px) !important;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    background: rgba(34, 45, 68, 0.56);
+    z-index: 1;
+}
+
+.vitro-content {
+    background: #F7F9FC;
+    width: 100%;
+    border-radius: 8px 8px 0 0;
+    padding-bottom: 66px;
+    margin: auto 0 0 0;
+    max-height: 87%;
+}
+
+.vitro-content {
+    transform: translate(0, 100%);
+    transition: transform 0.3s ease;
+}
+
+.vitro-content.vitro-expanded {
+    transform: translate(0, 0);
+    transition: transform 0.3s ease;
+}
+
+.vitro-button-close {
+    background-color: #8E98A3;
+    width: 32px;
+    height: 4px;
+    display: block;
+    outline: none;
+    border: none;
+    border-radius: 2px;
+    margin: 12px auto;
+}

package/css/std/controls/star-button/img/star-active.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4.5L14.472 9.43691L20 10.2334L16 14.0741L16.944 19.5L12 16.9369L7.056 19.5L8 14.0741L4 10.2334L9.528 9.43691L12 4.5Z" fill="#FFD596" stroke="#FFD596" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/css/std/controls/star-button/img/star.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 4L14.472 8.93691L20 9.73344L16 13.5741L16.944 19L12 16.4369L7.056 19L8 13.5741L4 9.73344L9.528 8.93691L12 4Z" stroke="#BDBDBD" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

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

@@ -0,0 +1,22 @@
+.vitro-star-button,
+.vitro-star-button:hover,
+.vitro-star-button:active {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+    background-position: center;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/star-button/img/star.svg');
+}
+
+.vitro-star-button.vitro-hidden {
+    background-image: none;
+}
+
+.vitro-star-button.vitro-active {
+    background-image: url('@vitrosoftware/common-ui-ts/css/std/controls/star-button/img/star-active.svg');
+}