smart-webcomponents-react 18.0.2 → 18.0.11

package/source/styles/components/smart.validator.css

@@ -1 +1 @@
-.smart-validation-error:not(smart-check-box)>div.smart-container:after,.smart-validation-success:not(smart-check-box)>div.smart-container:after{left:calc(100% + 20px);top:50%;position:absolute;transform:translate(-50%,-50%);pointer-events:none;font-weight:700;font-family:var(--smart-font-family);font-size:var(--smart-font-size);width:20px;height:20px;border-radius:50%;display:flex;text-align:center;justify-content:center;align-items:center}.smart-validation-error:not(.underlined):not(.outlined),.smart-validation-error:not(.underlined):not(.outlined) input,.smart-validation-error:not(.underlined):not(.outlined) span{border-color:var(--smart-error)!important;outline:0}.smart-validation-error:not(smart-check-box)>div.smart-container:after{background-color:var(--smart-error);color:var(--smart-error-color);content:"!"}.smart-success-label-like-after-element:after,.smart-validation-success:not(smart-check-box)>div.smart-container:after{color:var(--smart-success-color);content:"✓";background-color:var(--smart-success)}.smart-validation-error.smart-element:not(.outlined):not(.underlined) .smart-hint::after{background-color:var(--smart-error)}.smart-validation-success.smart-element:not(.outlined):not(.underlined) .smart-hint::after{background-color:var(--smart-success)}input[type=checkbox].smart-validation-error,input[type=radio].smart-validation-error{outline:auto;outline-color:var(--smart-error)}input.smart-validation-error{border-style:solid;border-width:1px}.smart-error-label-like-after-element:after,.smart-success-label-like-after-element:after{pointer-events:none;font-weight:700;font-family:var(--smart-font-family);font-size:var(--smart-font-size);width:20px;height:20px;border-radius:50%;display:flex;text-align:center;justify-content:center;align-items:center;top:50%;position:absolute;left:calc(50% + 15px);transform:translate(-50%,-50%)}.smart-error-label-like-after-element,.smart-success-label-like-after-element{position:relative}.smart-error-label-like-after-element:after{background-color:var(--smart-error);color:var(--smart-error-color);content:"!"}.smart-validation-summary{font-family:var(--smart-font-family);font-size:var(--smart-font-size);color:var(--smart-error)}.smart-validation-summary span{display:block;margin-top:5px}.smart-error-holder{position:absolute;font-size:var(--smart-font-size);background-color:var(--smart-error);color:var(--smart-error-color);padding:10px;pointer-events:none;z-index:var(--smart-editor-drop-down-z-index);margin-top:10px}.smart-error-holder.smart-error-hint-position-right{white-space:nowrap}
+@charset "UTF-8";.smart-validation-error:not(smart-check-box)>div.smart-container:after,.smart-validation-success:not(smart-check-box)>div.smart-container:after{left:calc(100% + 20px);top:50%;position:absolute;transform:translate(-50%,-50%);pointer-events:none;font-weight:700;font-family:var(--smart-font-family);font-size:var(--smart-font-size);width:20px;height:20px;border-radius:50%;display:flex;text-align:center;justify-content:center;align-items:center}.smart-validation-error:not(.underlined):not(.outlined),.smart-validation-error:not(.underlined):not(.outlined) input,.smart-validation-error:not(.underlined):not(.outlined) span{border-color:var(--smart-error)!important;outline:0}.smart-validation-error:not(smart-check-box)>div.smart-container:after{background-color:var(--smart-error);color:var(--smart-error-color);content:"!"}.smart-success-label-like-after-element:after,.smart-validation-success:not(smart-check-box)>div.smart-container:after{color:var(--smart-success-color);content:"✓";background-color:var(--smart-success)}.smart-validation-error.smart-element:not(.outlined):not(.underlined) .smart-hint::after{background-color:var(--smart-error)}.smart-validation-success.smart-element:not(.outlined):not(.underlined) .smart-hint::after{background-color:var(--smart-success)}input[type=checkbox].smart-validation-error,input[type=radio].smart-validation-error{outline:auto;outline-color:var(--smart-error)}input.smart-validation-error{border-style:solid;border-width:1px}.smart-error-label-like-after-element:after,.smart-success-label-like-after-element:after{pointer-events:none;font-weight:700;font-family:var(--smart-font-family);font-size:var(--smart-font-size);width:20px;height:20px;border-radius:50%;display:flex;text-align:center;justify-content:center;align-items:center;top:50%;position:absolute;left:calc(50% + 15px);transform:translate(-50%,-50%)}.smart-error-label-like-after-element,.smart-success-label-like-after-element{position:relative}.smart-error-label-like-after-element:after{background-color:var(--smart-error);color:var(--smart-error-color);content:"!"}.smart-validation-summary{font-family:var(--smart-font-family);font-size:var(--smart-font-size);color:var(--smart-error)}.smart-validation-summary span{display:block;margin-top:5px}.smart-error-holder{position:absolute;font-family:var(--smart-font-family);font-size:var(--smart-font-size);background-color:var(--smart-error);color:var(--smart-error-color);padding:10px;pointer-events:none;z-index:var(--smart-editor-drop-down-z-index);margin-top:10px}.smart-error-holder.smart-error-hint-position-right{white-space:nowrap}

package/source/styles/default/scss/smart.grid.scss

@@ -2735,6 +2735,7 @@ smart-grid {
   .smart-data-view-header-drop-down {
     transition: transform ease-in-out 0.2s;
     transform: scaleY(0);
+
     &.open {
       transform: scaleY(1);
     }
@@ -3317,15 +3318,16 @@ smart-grid-row {
   .smart-grid-row-card-container {
     width: 100%;
     height: 100%;
-    
+
     .smart-card-layout-view {
       min-width: unset;
       min-height: unset;
       width: calc(100% - 20px);
       height: 100%;
-      padding:10px; 
+      padding: 10px;
       padding-top: 0px;
       background: var(--smart-surface);
+
       .smart-card-container {
         display: flex;
         justify-content: space-evenly;
@@ -3334,203 +3336,247 @@ smart-grid-row {
         height: 100%;
         grid-column-gap: var(--smart-card-view-column-gap, var(--smart-card-view-gap));
         grid-row-gap: var(--smart-card-view-row-gap, var(--smart-card-view-gap));
-      
 
-      .smart-card {
-        width: 100% !important;
-        display: flex;
-        margin: 0;
-        border: var(--smart-border-width) solid var(--smart-card-border, var(--smart-border));
-        width: unset;
-        padding: var(--smart-data-view-padding);
-        overflow: auto;
-        font-family: inherit;
-        font-size: inherit;
-        background-color: var(--smart-background);
-        color: var(--smart-background-color);
-        border-top-left-radius: var(--smart-border-top-left-radius);
-        border-top-right-radius: var(--smart-border-top-right-radius);
-        border-bottom-left-radius: var(--smart-border-bottom-left-radius);
-        border-bottom-right-radius: var(--smart-border-bottom-right-radius);
-        box-shadow: var(--smart-elevation-2);
-        transition: box-shadow ease-in-out 0.2s;
-        position: relative;
 
-        &.smart-card-tree-header {
-          cursor: pointer;
-        }
-        &.smart-card-header {
-           cursor: pointer;
-
-           .smart-card-view-cell {
-            justify-content: center;
-           }
+        .smart-card {
+          width: 100% !important;
+          display: flex;
+          margin: 0;
+          border: var(--smart-border-width) solid var(--smart-border);
+          width: unset;
+          padding: var(--smart-data-view-padding);
+          overflow: auto;
+          font-family: inherit;
+          font-size: inherit;
+          background-color: var(--smart-background);
+          color: var(--smart-background-color);
+          border-top-left-radius: var(--smart-border-top-left-radius);
+          border-top-right-radius: var(--smart-border-top-right-radius);
+          border-bottom-left-radius: var(--smart-border-bottom-left-radius);
+          border-bottom-right-radius: var(--smart-border-bottom-right-radius);
+          box-shadow: var(--smart-elevation-2);
+          transition: box-shadow ease-in-out 0.2s;
+          position: relative;
 
-           .smart-card-view-value {
-              
-            &:after {
-              font-family: var(--smart-font-family-icon);
-              content:var(--smart-icon-arrow-right);
-          }
+          &.smart-card-tree-header {
+            cursor: pointer;
           }
-        }
 
-        &[editable]:not(.smart-card-header) {
-          cursor: pointer;
+          &.smart-card-header {
+            cursor: pointer;
 
-          &[edit] {
-            border: 1px solid var(--smart-primary);
+            .smart-card-view-cell {
+              justify-content: center;
+            }
+
+            .smart-card-view-value {
+
+              &:after {
+                font-family: var(--smart-font-family-icon);
+                content: var(--smart-icon-arrow-right);
+              }
+            }
           }
 
-          &[edit], &:hover {
-          &:after {
-            content: var(--smart-icon-mode-edit);
-            font-family: var(--smart-font-family-icon);
-            width: 16px;
-            height: 16px;
-            right: 3px;
-            bottom: 3px;
-            position: absolute;
+          &[editable]:not(.smart-card-header) {
+            cursor: pointer;
+
+            &[edit] {
+              border: 1px solid var(--smart-primary);
+            }
+
+            &[edit],
+            &:hover {
+              &:after {
+                content: var(--smart-icon-mode-edit);
+                font-family: var(--smart-font-family-icon);
+                width: 16px;
+                height: 16px;
+                right: 3px;
+                bottom: 3px;
+                position: absolute;
+              }
+            }
           }
+
+          .smart-card-data-container {
+            width: 100%;
+
+            &.col-2 {
+              display: grid;
+              grid-template-columns: repeat(2, minmax(0, 1fr));
+
+              .smart-card-view-cell {
+                justify-content: flex-start;
+                column-gap: 5px;
+                flex-direction: column;
+                align-items: flex-start;
+
+                .smart-card-view-value {
+                  width: 100%;
+                }
+
+                &.center {
+                  align-items: center;
+                }
+
+                &.right {
+                  align-items: flex-end;
+                }
+              }
+            }
           }
-        }
 
-        .smart-card-data-container {
-          width: 100%;
+          &:hover {
+            box-shadow: var(--smart-elevation-4);
+          }
 
-          &.col-2 {
+          .smart-card-view-cell {
             display: grid;
-            grid-template-columns: repeat(2, minmax(0, 1fr));
+            grid-template-columns: auto auto;
+            align-items: center;
+            justify-content: space-between;
+            min-height: 30px;
+            margin-bottom: 5px;
+            padding-left: 10px;
+            overflow: hidden;
 
-            .smart-card-view-cell {
-              justify-content: flex-start;
-              column-gap: 5px;
-              flex-direction: column;
+            &.span {
+              grid-column: 1 / span 2;
+            }
+
+            .smart-arrow-down {
+              visibility: hidden;
+            }
+
+            &.row-span {
+              .smart-card-view-value {
+                smart-grid-cell {
+                  height: 100%;
+                  white-space: normal;
+
+                  .smart-label {
+                    white-space: normal;
+                  }
+                }
+              }
+            }
+
+            &.vertical {
+              display: grid;
+              grid-template-columns: unset;
+              grid-template-rows: 16px 1fr;
               align-items: flex-start;
-              
+              grid-row-gap: 0.25rem;
+              justify-content: stretch;
+
+              .smart-card-view-label,
               .smart-card-view-value {
                 width: 100%;
+                height: 100%;
               }
-              &.center {
-                align-items: center;
-              }
+            }
 
-              &.right {
-                align-items: flex-end;
+            .smart-card-view-label {
+              font-size: 12px;
+              opacity: 0.7;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              min-width: 50%;
+              position: relative;
+
+              &.icon:after {
+                content: "";
+                position: absolute;
+                left: -5px;
+                top: 0;
+                width: 30px;
+                height: 100%;
+                background-repeat: no-repeat;
+                background-position: center;
               }
-           }
-          }
-        }
-        
-        &:hover {
-          box-shadow: var(--smart-elevation-4);
-        }
+            }
 
-        .smart-card-view-cell {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          min-height: 30px;
-          margin-bottom: 5px;
-          overflow: hidden;
-          &.span {
-            grid-column: 1 / span 2;
-          }
-          .smart-arrow-down {
-            visibility: hidden;
-          }
-          &.row-span {
             .smart-card-view-value {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+
               smart-grid-cell {
-                height: 100%;
-                white-space: normal;
+                width: 100%;
+                height: auto;
+                position: static;
+                display: block;
 
-                .smart-label {
-                  white-space: normal; 
+                .attachments {
+                  display: block;
                 }
-              }
-            }
-          }
 
-          &.vertical {
-            flex-direction: column;
-            align-items: flex-start;
-            grid-row-gap: 0.25rem;
-          }
-          .smart-card-view-label {
-            font-size: 12px;
-            opacity: 0.7;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            min-width: 50%;
-          }
-          .smart-card-view-value {
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            smart-grid-cell {
-              width: 100%;
-              height: auto;
-              position: static;
-              display: block;
+                &[template="image"] {
 
-              .attachments {
-                display: block;
-              }
+                  .file-container {
+                    justify-content: center;
+                  }
 
-              &[template="image"] {
-                img {
-                  max-width: 100%;
-                  max-height: 100%;
-                  width: unset;
-                  height: unset;
+                  img {
+                    max-width: 100%;
+                    max-height: 100%;
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+                  }
+
+                  .images {
+                    display: flex;
+                    flex-direction: column;
+                    position: relative;
+                    top: 3px;
+                  }
+
+                  .smart-navigation {
+                    width: 100%;
+                    display: flex;
+                    width: 100%;
+                    height: 26px;
+                    align-items: center;
+                    justify-content: center;
+                    grid-column-gap: 3px;
+                    margin-top: -3px;
+
+                    .smart-navigation-item {
+                      width: 12px;
+                      height: 12px;
+                      border: 2px solid var(--smart-border);
+
+                      &.active,
+                      &:hover {
+                        width: 14px;
+                        height: 14px;
+                        border-color: var(--smart-primary);
+                      }
+                    }
+                  }
                 }
 
-                .images {
-                  display: flex;
-                  flex-direction: column;
-                  position: relative;
-                  top: 3px;
+                .textwrap {
+                  display: block;
                 }
-                .smart-navigation {
-                  width: 100%;
-                  height: 20px;
-                  display: flex;
-                  width: 100%;
-                  height: 20px;
-                  align-items: center;
-                  justify-content: center;
-                  grid-column-gap: 3px;
-                  margin-top: -3px;
-                  .smart-navigation-item {
-                     width: 10px;
-                     height: 10px;
-                     border: 2px solid var(--smart-border);
-
-                     &.active,
-                     &:hover {
-                      border-color:var(--smart-primary);
-                     }
-                  }
+
+                &::before,
+                &::after {
+                  content: '';
+                  border: none;
+                  width: 0px;
+                  height: 0px;
                 }
-              }
 
-              .textwrap {
-                display: block;
-              }
-              &::before,
-              &::after {
-                content: ''; 
-                border: none;
-                width: 0px;
-                height: 0px;
-              }
-              .smart-label {
-                white-space: nowrap;
-                text-align: unset;
-                padding-left: 0px;
-                padding-right: 0px;
+                .smart-label {
+                  white-space: nowrap;
+                  text-align: unset;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                }
               }
             }
           }
@@ -3538,7 +3584,6 @@ smart-grid-row {
       }
     }
   }
-  }
 
 
   &[filter-row],
@@ -4092,7 +4137,7 @@ smart-grid-cell {
   font-weight: var(--smart-grid-cell-font-weight, inherit);
 
   &.smart-readonly {
-    color: var(--smart-disabled); 
+    color: var(--smart-disabled);
   }
 
   button[toggle-button] {
@@ -4101,6 +4146,23 @@ smart-grid-cell {
     }
   }
 
+  line[highlight]  {
+    stroke: var(--smart-secondary);
+  } 
+
+  path[highlight],
+  rect[highlight] {
+    fill: var(--smart-secondary);
+  }
+
+  &[focus] {
+    line {
+      stroke: var(--smart-primary-color);
+    }
+    path, rect {
+      fill: var(--smart-primary-color);
+    }
+  }
   .wrap {
     white-space: normal;
     display: flex;

package/source/styles/default/scss/smart.validator.scss

@@ -144,6 +144,7 @@ input.smart-validation-error {
 //Spans in the bottom of the body - shown on input click
 .smart-error-holder {
   position: absolute;
+  font-family: var(--smart-font-family);
   font-size: var(--smart-font-size);
   background-color: var(--smart-error);
   color: var(--smart-error-color);

package/source/styles/default/smart.grid.css

@@ -2742,7 +2742,7 @@ smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-car
   width: 100% !important;
   display: flex;
   margin: 0;
-  border: var(--smart-border-width) solid var(--smart-card-border, var(--smart-border));
+  border: var(--smart-border-width) solid var(--smart-border);
   width: unset;
   padding: var(--smart-data-view-padding);
   overflow: auto;
@@ -2812,11 +2812,13 @@ smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-car
   box-shadow: var(--smart-elevation-4);
 }
 smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell {
-  display: flex;
+  display: grid;
+  grid-template-columns: auto auto;
   align-items: center;
   justify-content: space-between;
   min-height: 30px;
   margin-bottom: 5px;
+  padding-left: 10px;
   overflow: hidden;
 }
 smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell.span {
@@ -2833,9 +2835,17 @@ smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-car
   white-space: normal;
 }
 smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell.vertical {
-  flex-direction: column;
+  display: grid;
+  grid-template-columns: unset;
+  grid-template-rows: 16px 1fr;
   align-items: flex-start;
   grid-row-gap: 0.25rem;
+  justify-content: stretch;
+}
+smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell.vertical .smart-card-view-label,
+smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell.vertical .smart-card-view-value {
+  width: 100%;
+  height: 100%;
 }
 smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell .smart-card-view-label {
   font-size: 12px;
@@ -2844,6 +2854,17 @@ smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-car
   text-overflow: ellipsis;
   white-space: nowrap;
   min-width: 50%;
+  position: relative;
+}
+smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell .smart-card-view-label.icon:after {
+  content: "";
+  position: absolute;
+  left: -5px;
+  top: 0;
+  width: 30px;
+  height: 100%;
+  background-repeat: no-repeat;
+  background-position: center;
 }
 smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell .smart-card-view-value {
   overflow: hidden;
@@ -2859,11 +2880,15 @@ smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-car
 smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell .smart-card-view-value smart-grid-cell .attachments {
   display: block;
 }
+smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell .smart-card-view-value smart-grid-cell[template=image] .file-container {
+  justify-content: center;
+}
 smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell .smart-card-view-value smart-grid-cell[template=image] img {
   max-width: 100%;
   max-height: 100%;
-  width: unset;
-  height: unset;
+  width: 100%;
+  height: 100%;
+  display: block;
 }
 smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell .smart-card-view-value smart-grid-cell[template=image] .images {
   display: flex;
@@ -2873,21 +2898,22 @@ smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-car
 }
 smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell .smart-card-view-value smart-grid-cell[template=image] .smart-navigation {
   width: 100%;
-  height: 20px;
   display: flex;
   width: 100%;
-  height: 20px;
+  height: 26px;
   align-items: center;
   justify-content: center;
   grid-column-gap: 3px;
   margin-top: -3px;
 }
 smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell .smart-card-view-value smart-grid-cell[template=image] .smart-navigation .smart-navigation-item {
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   border: 2px solid var(--smart-border);
 }
 smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell .smart-card-view-value smart-grid-cell[template=image] .smart-navigation .smart-navigation-item.active, smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell .smart-card-view-value smart-grid-cell[template=image] .smart-navigation .smart-navigation-item:hover {
+  width: 14px;
+  height: 14px;
   border-color: var(--smart-primary);
 }
 smart-grid-row .smart-grid-row-card-container .smart-card-layout-view .smart-card-container .smart-card .smart-card-view-cell .smart-card-view-value smart-grid-cell .textwrap {
@@ -3307,6 +3333,19 @@ smart-grid-cell.smart-readonly {
 smart-grid-cell button[toggle-button]:after {
   justify-content: flex-start;
 }
+smart-grid-cell line[highlight] {
+  stroke: var(--smart-secondary);
+}
+smart-grid-cell path[highlight],
+smart-grid-cell rect[highlight] {
+  fill: var(--smart-secondary);
+}
+smart-grid-cell[focus] line {
+  stroke: var(--smart-primary-color);
+}
+smart-grid-cell[focus] path, smart-grid-cell[focus] rect {
+  fill: var(--smart-primary-color);
+}
 smart-grid-cell .wrap {
   white-space: normal;
   display: flex;