smart-webcomponents-react 11.0.55 → 12.0.0

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

@@ -1512,7 +1512,7 @@ input[type=number] {
     }
 
     &.smart-grid-dialog-expand-row {
-      width: 700px !important;
+      width: 750px !important;
 
       .smart-grid-edit-dialog-column-info {
         display: grid;
@@ -1533,6 +1533,32 @@ input[type=number] {
         }
       }
 
+      .tabs {
+        width: 100%;
+        height: 35px;
+        overflow: hidden;
+        background: var(--smart-background);
+        transition: all 0.2s ease-in-out;
+        display: flex;
+        margin-bottom: 10px;
+        border-bottom: 1px solid var(--smart-border);
+
+        .tab {
+          padding: 8px 22px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-transform: uppercase;
+          color: var(--smart-background-color);
+          cursor: pointer;
+
+          &.active {
+            color: var(--smart-primary);
+            border-bottom: 2px solid var(--smart-primary);
+          }
+        }
+      }
+
       .smart-content-container {
         width: 100%;
       }
@@ -1563,7 +1589,7 @@ input[type=number] {
 
       .smart-grid-edit-dialog-layout {
         display: grid;
-        grid-template-columns: 1fr 300px;
+        grid-template-columns: 1fr 350px;
         column-gap: 20px;
 
         .smart-grid-edit-dialog-editors-container {
@@ -1590,6 +1616,70 @@ input[type=number] {
             grid-template-rows: 40px 40px 40px 40px 40px 1fr;
           }
 
+          .history-row {
+            padding: 5px;
+          }
+
+          .history-layout {
+            max-height: 500px;
+            overflow: auto;
+          }
+
+          .history-user {
+            display: grid;
+            grid-template-columns: 35px 1fr 1fr;
+            align-items: center;
+          }
+
+          .history-action {
+            display: grid;
+            padding-left: 35px;
+            grid-template-columns: 50% 50%;
+            align-items: center;
+            opacity: 0.8;
+
+            .detail {
+              white-space: initial;
+            }
+          }
+
+          .smart-user {
+            position: relative;
+            top: 10px;
+            left: -3px;
+          }
+
+          .user-icon {
+            height: 30px;
+            width: 30px;
+            border-radius: 50%;
+            background-size: cover;
+            background-position: center;
+
+            &.image:after {
+              content: '';
+            }
+
+            &:after {
+              content: var(--smart-icon-user);
+              font-family: var(--smart-font-family-icon);
+              width: 100%;
+              height: 100%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              font-size: 24px;
+            }
+          }
+
+          .user-name {
+            font-weight: bold;
+          }
+
+          .time {
+            opacity: 0.8;
+          }
+
           .comments-header {
             white-space: nowrap;
           }
@@ -1613,37 +1703,6 @@ input[type=number] {
                 margin-bottom: var(--smart-data-view-padding);
               }
 
-              .user-icon {
-                width: 100%;
-                height: 30px;
-                border-radius: 50%;
-                background-size: cover;
-                background-position: center;
-
-                &.image:after {
-                  content: '';
-                }
-
-                &:after {
-                  content: var(--smart-icon-user);
-                  font-family: var(--smart-font-family-icon);
-                  width: 100%;
-                  height: 100%;
-                  display: flex;
-                  justify-content: center;
-                  align-items: center;
-                  font-size: 24px;
-                }
-              }
-
-              .user-name {
-                font-weight: bold;
-              }
-
-              .time {
-                opacity: 0.8;
-              }
-
               .remove-button {
                 transform: rotate(90deg);
                 width: 16px;
@@ -1667,8 +1726,8 @@ input[type=number] {
 
             .comments {
               overflow: auto;
-              min-height: 150px;
-              max-height: 300px;
+              min-height: 180px;
+              max-height: 350px;
             }
 
             .footer {
@@ -1701,6 +1760,7 @@ input[type=number] {
             display: grid;
             grid-template-columns: 1fr 1fr 1fr;
             padding: 5px;
+            width: 300px;
 
             &.font-group {
               grid-column-gap: 10px;
@@ -3279,7 +3339,8 @@ smart-grid-column {
   cursor: default;
   min-height: 30px;
 
-  &[selected] {
+  &[selected],
+  &[focus] {
     background: var(--smart-ui-state-hover);
     color: var(--smart-ui-state-color-hover);
   }

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

@@ -1298,6 +1298,7 @@
     .smart-kanban-tab {
       padding: 8px 22px;
       cursor: pointer;
+      text-transform: uppercase;
 
       &.selected {
         color: var(--smart-primary);
@@ -1343,6 +1344,27 @@
     .smart-kanban-task-field-editor {
       width: 100%;
     }
+
+    .editor-label {
+      display: flex;
+      justify-content: space-between;
+
+      .icon {
+        width: 16px;
+        height: 16px;
+        display: inline-block;
+
+        &::before {
+          content: var(--smart-icon-visibility);
+          font-family: var(--smart-font-family-icon);
+          cursor: pointer;
+        }
+
+        &.hide::before {
+          content: var(--smart-icon-visibility-off);
+        }
+      }
+    }
   }
 
   .history-table {

package/source/styles/default/scss/textbox/_multi-combo-input.scss

@@ -42,9 +42,13 @@ smart-multi-combo-input {
 }
 
 .smart-multi-combo-input {
-  height: auto !important;
+  height: var(--smart-editor-height);
   min-height: var(--smart-editor-height);
 
+  &:not([input-tags-mode="one"]) {
+    height: auto !important;
+  }
+
   .smart-container {
     width: 100%;
     height: 100%;
@@ -215,6 +219,43 @@ smart-multi-combo-input {
     border: initial;
   }
 
+  .close-button:after {
+    font-family: var(--smart-font-family-icon);
+    content: var(--smart-icon-close);
+    margin-left: 5px;
+  }
+
+  .add-new-item {
+    display: grid;
+    grid-template-columns: 1fr var(--smart-text-box-default-height);
+    grid-column-gap: 5px;
+    margin-left: 7px;
+    margin-right: 7px;
+    height: 36px;
+
+    input {
+      height: 30px;
+    }
+
+    smart-button {
+      justify-content: center;
+      align-content: center;
+      height: 30px;
+    }
+
+    button {
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    button:after {
+      font-family: var(--smart-font-family-icon);
+      content: var(--smart-icon-plus);
+    }
+  }
+
   .smart-select-all {
     height: auto;
     border-bottom: var(--smart-border-width) solid var(--smart-border);

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

@@ -1239,7 +1239,7 @@ input[type=number]::-webkit-outer-spin-button {
   transition: none;
 }
 .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row {
-  width: 700px !important;
+  width: 750px !important;
 }
 .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-column-info {
   display: grid;
@@ -1257,6 +1257,29 @@ input[type=number]::-webkit-outer-spin-button {
   font-weight: bold;
   font-size: calc(var(--smart-font-size) + 1px);
 }
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .tabs {
+  width: 100%;
+  height: 35px;
+  overflow: hidden;
+  background: var(--smart-background);
+  transition: all 0.2s ease-in-out;
+  display: flex;
+  margin-bottom: 10px;
+  border-bottom: 1px solid var(--smart-border);
+}
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .tabs .tab {
+  padding: 8px 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+  color: var(--smart-background-color);
+  cursor: pointer;
+}
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .tabs .tab.active {
+  color: var(--smart-primary);
+  border-bottom: 2px solid var(--smart-primary);
+}
 .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-content-container {
   width: 100%;
 }
@@ -1276,7 +1299,7 @@ input[type=number]::-webkit-outer-spin-button {
 }
 .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout {
   display: grid;
-  grid-template-columns: 1fr 300px;
+  grid-template-columns: 1fr 350px;
   column-gap: 20px;
 }
 .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-editors-container.many {
@@ -1298,38 +1321,44 @@ input[type=number]::-webkit-outer-spin-button {
   display: grid;
   grid-template-rows: 40px 40px 40px 40px 40px 1fr;
 }
-.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-header {
-  white-space: nowrap;
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .history-row {
+  padding: 5px;
 }
-.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout {
-  display: grid;
-  grid-template-rows: 1fr auto;
-  flex-direction: column;
-  padding: 3px;
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .history-layout {
+  max-height: 500px;
+  overflow: auto;
 }
-.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment {
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .history-user {
   display: grid;
-  grid-template-columns: 30px 1fr;
-  grid-column-gap: var(--smart-data-view-padding);
-  margin: var(--smart-data-view-padding);
+  grid-template-columns: 35px 1fr 1fr;
+  align-items: center;
 }
-.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment .comment-header {
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .history-action {
   display: grid;
-  grid-template-columns: 1fr auto auto;
-  grid-column-gap: calc(var(--smart-data-view-padding) / 2);
-  margin-bottom: var(--smart-data-view-padding);
+  padding-left: 35px;
+  grid-template-columns: 50% 50%;
+  align-items: center;
+  opacity: 0.8;
 }
-.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment .user-icon {
-  width: 100%;
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .history-action .detail {
+  white-space: initial;
+}
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .smart-user {
+  position: relative;
+  top: 10px;
+  left: -3px;
+}
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .user-icon {
   height: 30px;
+  width: 30px;
   border-radius: 50%;
   background-size: cover;
   background-position: center;
 }
-.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment .user-icon.image:after {
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .user-icon.image:after {
   content: '';
 }
-.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment .user-icon:after {
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .user-icon:after {
   content: var(--smart-icon-user);
   font-family: var(--smart-font-family-icon);
   width: 100%;
@@ -1339,12 +1368,33 @@ input[type=number]::-webkit-outer-spin-button {
   align-items: center;
   font-size: 24px;
 }
-.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment .user-name {
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .user-name {
   font-weight: bold;
 }
-.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment .time {
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .time {
   opacity: 0.8;
 }
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-header {
+  white-space: nowrap;
+}
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  flex-direction: column;
+  padding: 3px;
+}
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment {
+  display: grid;
+  grid-template-columns: 30px 1fr;
+  grid-column-gap: var(--smart-data-view-padding);
+  margin: var(--smart-data-view-padding);
+}
+.smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment .comment-header {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  grid-column-gap: calc(var(--smart-data-view-padding) / 2);
+  margin-bottom: var(--smart-data-view-padding);
+}
 .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comment .remove-button {
   transform: rotate(90deg);
   width: 16px;
@@ -1364,8 +1414,8 @@ input[type=number]::-webkit-outer-spin-button {
 }
 .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .comments {
   overflow: auto;
-  min-height: 150px;
-  max-height: 300px;
+  min-height: 180px;
+  max-height: 350px;
 }
 .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .comments-layout .footer {
   height: 45px;
@@ -1392,6 +1442,7 @@ input[type=number]::-webkit-outer-spin-button {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   padding: 5px;
+  width: 300px;
 }
 .smart-window.smart-grid-dialog.smart-grid-dialog-expand-row .smart-grid-edit-dialog-layout .smart-grid-edit-dialog-activity-container .format-layout.font-group {
   grid-column-gap: 10px;
@@ -2546,7 +2597,7 @@ smart-grid-column {
   cursor: default;
   min-height: 30px;
 }
-smart-grid-column[selected] {
+smart-grid-column[selected], smart-grid-column[focus] {
   background: var(--smart-ui-state-hover);
   color: var(--smart-ui-state-color-hover);
 }

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

@@ -1008,6 +1008,7 @@
 .smart-window.smart-kanban-window .smart-kanban-tab-strip .smart-kanban-tab {
   padding: 8px 22px;
   cursor: pointer;
+  text-transform: uppercase;
 }
 .smart-window.smart-kanban-window .smart-kanban-tab-strip .smart-kanban-tab.selected {
   color: var(--smart-primary);
@@ -1042,6 +1043,23 @@
 .smart-window.smart-kanban-window .fields .smart-kanban-task-field-editor {
   width: 100%;
 }
+.smart-window.smart-kanban-window .fields .editor-label {
+  display: flex;
+  justify-content: space-between;
+}
+.smart-window.smart-kanban-window .fields .editor-label .icon {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+}
+.smart-window.smart-kanban-window .fields .editor-label .icon::before {
+  content: var(--smart-icon-visibility);
+  font-family: var(--smart-font-family-icon);
+  cursor: pointer;
+}
+.smart-window.smart-kanban-window .fields .editor-label .icon.hide::before {
+  content: var(--smart-icon-visibility-off);
+}
 .smart-window.smart-kanban-window .history-table {
   display: block !important;
   max-height: 400px;

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

@@ -701,8 +701,10 @@ smart-multi-combo-input {
     border-color: var(--smart-outline); }
 
 .smart-multi-combo-input {
-  height: auto !important;
+  height: var(--smart-editor-height);
   min-height: var(--smart-editor-height); }
+  .smart-multi-combo-input:not([input-tags-mode="one"]) {
+    height: auto !important; }
   .smart-multi-combo-input .smart-container {
     width: 100%;
     height: 100%;
@@ -809,6 +811,31 @@ smart-multi-combo-input {
   padding: initial;
   min-height: inherit;
   border: initial; }
+.smart-multi-combo-input-drop-down-menu .close-button:after {
+  font-family: var(--smart-font-family-icon);
+  content: var(--smart-icon-close);
+  margin-left: 5px; }
+.smart-multi-combo-input-drop-down-menu .add-new-item {
+  display: grid;
+  grid-template-columns: 1fr var(--smart-text-box-default-height);
+  grid-column-gap: 5px;
+  margin-left: 7px;
+  margin-right: 7px;
+  height: 36px; }
+  .smart-multi-combo-input-drop-down-menu .add-new-item input {
+    height: 30px; }
+  .smart-multi-combo-input-drop-down-menu .add-new-item smart-button {
+    justify-content: center;
+    align-content: center;
+    height: 30px; }
+  .smart-multi-combo-input-drop-down-menu .add-new-item button {
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center; }
+  .smart-multi-combo-input-drop-down-menu .add-new-item button:after {
+    font-family: var(--smart-font-family-icon);
+    content: var(--smart-icon-plus); }
 .smart-multi-combo-input-drop-down-menu .smart-select-all {
   height: auto;
   border-bottom: var(--smart-border-width) solid var(--smart-border); }