smart-webcomponents-react 13.1.1 → 13.1.26

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

@@ -3,6 +3,27 @@
   height: var(--smart-kanban-default-height);
   padding: var(--smart-data-view-padding);
 }
+.smart-kanban.smart-kanban-column-color .smart-kanban-column:not(.smart-kanban-add-new-column) {
+  background: var(--smart-surface);
+  padding: 5px;
+  border: 1px solid var(--smart-border);
+  border-radius: 5px;
+  box-sizing: border-box;
+}
+.smart-kanban.smart-kanban-column-color .smart-kanban-column:not(.smart-kanban-add-new-column) .smart-kanban-column-header {
+  background: transparent;
+  border: none;
+}
+.smart-kanban .smart-kanban-column-footer {
+  display: flex;
+  font-family: var(--smart-font-family);
+  font-size: 11px;
+  color: var(--smart-surface-color);
+  opacity: 0.5;
+  align-items: center;
+  text-align: center;
+  padding: 8px;
+}
 .smart-kanban > .smart-container, .smart-kanban.smart-container {
   position: relative;
 }
@@ -271,130 +292,6 @@
 .smart-kanban .smart-kanban-task-comments:focus {
   outline: 1px solid var(--smart-primary);
 }
-.smart-kanban .smart-kanban-list {
-  position: absolute;
-  border: var(--smart-border-width) solid var(--smart-border);
-  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);
-  width: var(--smart-kanban-user-list-width);
-  max-height: var(--smart-kanban-user-list-max-height);
-  background-color: var(--smart-background);
-  box-shadow: var(--smart-elevation-8);
-  overflow: auto;
-  transform: scaleY(1);
-  transform-origin: top;
-  opacity: 1;
-  z-index: 15;
-}
-.smart-kanban .smart-kanban-list:focus {
-  outline: 1px solid var(--smart-primary);
-}
-.smart-kanban .smart-kanban-list .item {
-  display: flex;
-  align-items: center;
-  min-height: calc(var(--smart-kanban-user-icon-size) + 10px);
-  padding: 5px 10px;
-  cursor: pointer;
-}
-.smart-kanban .smart-kanban-list .item:hover {
-  background-color: var(--smart-ui-state-hover);
-  color: var(--smart-ui-state-color-hover);
-}
-.smart-kanban .smart-kanban-list .item.selected {
-  border-left: var(--smart-kanban-color-band-width) solid var(--smart-primary);
-  padding-left: 7px;
-  background-color: var(--smart-ui-state-selected);
-  color: var(--smart-ui-state-color-selected);
-}
-.smart-kanban .smart-kanban-list .item[disabled] {
-  opacity: 0.55;
-  pointer-events: none;
-}
-.smart-kanban .smart-kanban-list .icon {
-  margin-right: 10px;
-  border-radius: 50%;
-  width: var(--smart-kanban-user-icon-size);
-  min-width: var(--smart-kanban-user-icon-size);
-  height: var(--smart-kanban-user-icon-size);
-  background-size: cover;
-  background-position: center;
-}
-.smart-kanban .smart-kanban-list .name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.smart-kanban .smart-kanban-list.smart-visibility-hidden {
-  transform: scaleY(0);
-  opacity: 0;
-}
-.smart-kanban .smart-kanban-list.actions.edit-comment .item[data-id="1"] {
-  display: none;
-}
-.smart-kanban .smart-kanban-list.comments {
-  width: var(--smart-kanban-comments-list-width);
-  height: var(--smart-kanban-comments-list-height);
-  max-height: 100%;
-}
-.smart-kanban .smart-kanban-list.comments .smart-kanban-comments {
-  height: calc(100% - var(--smart-kanban-new-comment-height));
-  overflow: auto;
-}
-.smart-kanban .smart-kanban-list.comments .smart-kanban-new-comment {
-  border-top: var(--smart-border-width) solid var(--smart-border);
-  height: var(--smart-kanban-new-comment-height);
-  padding: var(--smart-data-view-padding);
-  overflow: hidden;
-}
-.smart-kanban .smart-kanban-list.comments .smart-kanban-new-comment textarea {
-  resize: none;
-  width: 100%;
-  height: 100%;
-  border: var(--smart-border-width) solid var(--smart-border);
-  border-top-right-radius: var(--smart-border-top-right-radius);
-  border-top-left-radius: var(--smart-border-top-left-radius);
-  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
-  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
-  background-color: var(--smart-background);
-  color: var(--smart-background-color);
-  font-family: inherit;
-  font-size: inherit;
-}
-.smart-kanban .smart-kanban-list.comments .smart-kanban-new-comment textarea:focus {
-  outline: none;
-  border-color: var(--smart-outline);
-}
-.smart-kanban .smart-kanban-list.comments .smart-kanban-new-comment textarea:hover {
-  border-color: var(--smart-ui-state-border-hover);
-}
-.smart-kanban .smart-kanban-list.comments .smart-kanban-new-comment textarea[disabled] {
-  opacity: 0.5;
-}
-.smart-kanban .smart-kanban-list.comments .smart-kanban-new-comment smart-button {
-  --smart-button-padding: 0;
-  display: none;
-  margin-left: auto;
-  height: var(--smart-kanban-send-button-height);
-}
-.smart-kanban .smart-kanban-list.comments .smart-kanban-new-comment smart-button[disabled] {
-  pointer-events: unset;
-  cursor: not-allowed;
-}
-.smart-kanban .smart-kanban-list.comments.expanded .smart-kanban-comments {
-  height: calc(100% - var(--smart-kanban-new-comment-height-expanded));
-}
-.smart-kanban .smart-kanban-list.comments.expanded .smart-kanban-new-comment {
-  height: var(--smart-kanban-new-comment-height-expanded);
-}
-.smart-kanban .smart-kanban-list.comments.expanded .smart-kanban-new-comment textarea {
-  margin-bottom: var(--smart-data-view-padding);
-  height: calc(100% - var(--smart-data-view-padding) - var(--smart-kanban-send-button-height));
-  display: block;
-}
-.smart-kanban .smart-kanban-list.comments.expanded .smart-kanban-new-comment smart-button {
-  display: block;
-}
 .smart-kanban .smart-data-view-header {
   border: var(--smart-border-width) solid var(--smart-border);
   border-top-left-radius: var(--smart-border-top-left-radius);
@@ -407,6 +304,9 @@
 .smart-kanban .smart-kanban-add-new-column {
   cursor: pointer;
 }
+.smart-kanban .smart-kanban-add-new-column .smart-kanban-column-content {
+  display: none;
+}
 .smart-kanban .smart-kanban-add-new-column-label {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -454,73 +354,9 @@
 .smart-kanban .remove-button:focus {
   outline: 1px solid var(--smart-primary);
 }
-.smart-kanban .comment {
-  display: grid;
-  grid-template-columns: var(--smart-kanban-user-icon-size) 1fr;
-  grid-column-gap: var(--smart-data-view-padding);
-  margin: var(--smart-data-view-padding);
-}
-.smart-kanban .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-kanban .comment .user-icon {
-  width: 100%;
-  height: var(--smart-kanban-user-icon-size);
-  border-radius: 50%;
-  background-size: cover;
-  background-position: center;
-}
-.smart-kanban .comment .user-icon.empty {
-  background: var(--smart-surface);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  border: 1px solid var(--smart-border);
-}
-.smart-kanban .comment .user-icon.empty:after {
-  content: var(--smart-icon-user);
-  font-family: var(--smart-font-family-icon);
-  font-size: 20px;
-}
-.smart-kanban .comment .user-name {
-  font-weight: bold;
-}
-.smart-kanban .comment .time {
-  opacity: 0.8;
-}
-.smart-kanban .comment .remove-button {
-  visibility: hidden;
-  transform: rotate(90deg);
-  width: 16px;
-  cursor: pointer;
-}
-.smart-kanban .comment .remove-button:after {
-  content: var(--smart-icon-ellipsis);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  font-family: var(--smart-font-family-icon);
-  cursor: pointer;
-}
-.smart-kanban .comment .remove-button.enabled {
-  visibility: visible;
-}
 .smart-kanban:not([right-to-left]) .smart-kanban-column.collapsed > .smart-kanban-column-header > .smart-arrow {
   transform: rotate(180deg);
 }
-.smart-kanban:not([animation="none"]) .smart-kanban-list {
-  transition: transform 0.2s ease-in, visibility 0.2s ease-in, opacity 0.2s ease-in;
-}
-.smart-kanban:not([animation="none"]) .smart-kanban-list.comments .smart-kanban-comments,
-.smart-kanban:not([animation="none"]) .smart-kanban-list.comments .smart-kanban-new-comment,
-.smart-kanban:not([animation="none"]) .smart-kanban-list.comments .smart-kanban-new-comment textarea {
-  transition: height 0.2s ease-in;
-}
 .smart-kanban[add-new-button] .smart-kanban-column[add-new-button] > .smart-kanban-column-header > .smart-kanban-column-header-add:after {
   content: var(--smart-icon-plus-circled);
   font-family: var(--smart-font-family-icon);
@@ -537,8 +373,8 @@
   display: block;
 }
 .smart-kanban[add-new-button] .smart-kanban-add-new-button {
-  width: 36px;
-  height: 36px;
+  width: 30px;
+  height: 30px;
   border-radius: 50%;
   background: var(--smart-primary);
   color: var(--smart-primary-color);
@@ -1060,26 +896,26 @@
 .smart-window.smart-kanban-window .comments {
   margin: 0 auto;
 }
-.smart-window.smart-kanban-window .comments .comment {
+.smart-window.smart-kanban-window .comments .smart-comment {
   display: grid;
   grid-template-columns: var(--smart-kanban-user-icon-size) 1fr;
   grid-column-gap: var(--smart-data-view-padding);
   margin: var(--smart-data-view-padding);
 }
-.smart-window.smart-kanban-window .comments .comment .comment-header {
+.smart-window.smart-kanban-window .comments .smart-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-kanban-window .comments .comment .user-icon {
+.smart-window.smart-kanban-window .comments .smart-comment .user-icon {
   width: 100%;
   height: var(--smart-kanban-user-icon-size);
   border-radius: 50%;
   background-size: cover;
   background-position: center;
 }
-.smart-window.smart-kanban-window .comments .comment .user-icon.empty {
+.smart-window.smart-kanban-window .comments .smart-comment .user-icon.empty {
   background: var(--smart-surface);
   display: flex;
   align-items: center;
@@ -1087,24 +923,24 @@
   border-radius: 50%;
   border: 1px solid var(--smart-border);
 }
-.smart-window.smart-kanban-window .comments .comment .user-icon.empty:after {
+.smart-window.smart-kanban-window .comments .smart-comment .user-icon.empty:after {
   content: var(--smart-icon-user);
   font-family: var(--smart-font-family-icon);
   font-size: 20px;
 }
-.smart-window.smart-kanban-window .comments .comment .user-name {
+.smart-window.smart-kanban-window .comments .smart-comment .user-name {
   font-weight: bold;
 }
-.smart-window.smart-kanban-window .comments .comment .time {
+.smart-window.smart-kanban-window .comments .smart-comment .time {
   opacity: 0.8;
 }
-.smart-window.smart-kanban-window .comments .comment .remove-button {
+.smart-window.smart-kanban-window .comments .smart-comment .remove-button {
   visibility: hidden;
   transform: rotate(90deg);
   width: 16px;
   cursor: pointer;
 }
-.smart-window.smart-kanban-window .comments .comment .remove-button:after {
+.smart-window.smart-kanban-window .comments .smart-comment .remove-button:after {
   content: var(--smart-icon-close);
   display: flex;
   align-items: center;
@@ -1113,7 +949,7 @@
   font-family: var(--smart-font-family-icon);
   cursor: pointer;
 }
-.smart-window.smart-kanban-window .comments .comment .remove-button.enabled {
+.smart-window.smart-kanban-window .comments .smart-comment .remove-button.enabled {
   visibility: visible;
 }
 .smart-window.smart-kanban-window .comments .smart-kanban-list.comments {
@@ -1374,6 +1210,217 @@
   display: none;
 }
 
+.smart-kanban-list.dialog {
+  position: absolute;
+  border: var(--smart-border-width) solid var(--smart-border);
+  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);
+  width: var(--smart-kanban-user-list-width);
+  max-height: var(--smart-kanban-user-list-max-height);
+  background-color: var(--smart-background);
+  box-shadow: var(--smart-elevation-8);
+  overflow: auto;
+  transform: scaleY(1);
+  transform-origin: top;
+  opacity: 1;
+  z-index: 15;
+}
+.smart-kanban-list.dialog.comments .smart-kanban-comments,
+.smart-kanban-list.dialog.comments .smart-kanban-new-comment,
+.smart-kanban-list.dialog.comments .smart-kanban-new-comment textarea {
+  transition: height 0.2s ease-in;
+}
+.smart-kanban-list.dialog:focus {
+  outline: 1px solid var(--smart-primary);
+}
+.smart-kanban-list.dialog .item {
+  display: flex;
+  align-items: center;
+  min-height: calc(var(--smart-kanban-user-icon-size) + 10px);
+  padding: 5px 10px;
+  cursor: pointer;
+}
+.smart-kanban-list.dialog .item:hover {
+  background-color: var(--smart-ui-state-hover);
+  color: var(--smart-ui-state-color-hover);
+}
+.smart-kanban-list.dialog .item.selected {
+  border-left: var(--smart-kanban-color-band-width) solid var(--smart-primary);
+  padding-left: 7px;
+  background-color: var(--smart-ui-state-selected);
+  color: var(--smart-ui-state-color-selected);
+}
+.smart-kanban-list.dialog .item[disabled] {
+  opacity: 0.55;
+  pointer-events: none;
+}
+.smart-kanban-list.dialog .icon {
+  margin-right: 10px;
+  border-radius: 50%;
+  width: var(--smart-kanban-user-icon-size);
+  min-width: var(--smart-kanban-user-icon-size);
+  height: var(--smart-kanban-user-icon-size);
+  background-size: cover;
+  background-position: center;
+}
+.smart-kanban-list.dialog .name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.smart-kanban-list.dialog.smart-visibility-hidden {
+  transform: scaleY(0);
+  opacity: 0;
+}
+.smart-kanban-list.dialog.actions.edit-comment .item[data-id="1"] {
+  display: none;
+}
+.smart-kanban-list.dialog.comments {
+  width: var(--smart-kanban-comments-list-width);
+  height: var(--smart-kanban-comments-list-height);
+  max-height: 100%;
+}
+.smart-kanban-list.dialog.comments .smart-kanban-comments {
+  height: calc(100% - var(--smart-kanban-new-comment-height));
+  overflow: auto;
+}
+.smart-kanban-list.dialog.comments .smart-kanban-new-comment {
+  border-top: var(--smart-border-width) solid var(--smart-border);
+  height: var(--smart-kanban-new-comment-height);
+  padding: var(--smart-data-view-padding);
+  overflow: hidden;
+}
+.smart-kanban-list.dialog.comments .smart-kanban-new-comment textarea {
+  resize: none;
+  width: 100%;
+  height: 100%;
+  border: var(--smart-border-width) solid var(--smart-border);
+  border-top-right-radius: var(--smart-border-top-right-radius);
+  border-top-left-radius: var(--smart-border-top-left-radius);
+  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
+  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
+  background-color: var(--smart-background);
+  color: var(--smart-background-color);
+  font-family: inherit;
+  font-size: inherit;
+}
+.smart-kanban-list.dialog.comments .smart-kanban-new-comment textarea:focus {
+  outline: none;
+  border-color: var(--smart-outline);
+}
+.smart-kanban-list.dialog.comments .smart-kanban-new-comment textarea:hover {
+  border-color: var(--smart-ui-state-border-hover);
+}
+.smart-kanban-list.dialog.comments .smart-kanban-new-comment textarea[disabled] {
+  opacity: 0.5;
+}
+.smart-kanban-list.dialog.comments .smart-kanban-new-comment smart-button {
+  --smart-button-padding: 0;
+  display: none;
+  margin-left: auto;
+  height: var(--smart-kanban-send-button-height);
+}
+.smart-kanban-list.dialog.comments .smart-kanban-new-comment smart-button[disabled] {
+  pointer-events: unset;
+  cursor: not-allowed;
+}
+.smart-kanban-list.dialog.comments.expanded .smart-kanban-comments {
+  height: calc(100% - var(--smart-kanban-new-comment-height-expanded));
+}
+.smart-kanban-list.dialog.comments.expanded .smart-kanban-new-comment {
+  height: var(--smart-kanban-new-comment-height-expanded);
+}
+.smart-kanban-list.dialog.comments.expanded .smart-kanban-new-comment textarea {
+  margin-bottom: var(--smart-data-view-padding);
+  height: calc(100% - var(--smart-data-view-padding) - var(--smart-kanban-send-button-height));
+  display: block;
+}
+.smart-kanban-list.dialog.comments.expanded .smart-kanban-new-comment smart-button {
+  display: block;
+}
+
+.smart-comment {
+  display: grid;
+  grid-template-columns: var(--smart-kanban-user-icon-size) 1fr;
+  grid-column-gap: var(--smart-data-view-padding);
+  margin: var(--smart-data-view-padding);
+}
+.smart-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-comment .user-icon {
+  width: 100%;
+  height: var(--smart-kanban-user-icon-size);
+  border-radius: 50%;
+  background-size: cover;
+  background-position: center;
+}
+.smart-comment .user-icon.empty {
+  background: var(--smart-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid var(--smart-border);
+}
+.smart-comment .user-icon.empty:after {
+  content: var(--smart-icon-user);
+  font-family: var(--smart-font-family-icon);
+  font-size: 20px;
+}
+.smart-comment .user-name {
+  font-weight: bold;
+}
+.smart-comment .time {
+  opacity: 0.8;
+}
+.smart-comment .remove-button {
+  visibility: hidden;
+  transform: rotate(90deg);
+  width: 16px;
+  cursor: pointer;
+}
+.smart-comment .remove-button:after {
+  content: var(--smart-icon-ellipsis);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  font-family: var(--smart-font-family-icon);
+  cursor: pointer;
+}
+.smart-comment .remove-button.enabled {
+  visibility: visible;
+}
+
+.smart-kanban-task-text {
+  display: flex;
+  align-items: center;
+}
+.smart-kanban-task-text .priority {
+  font-family: var(--smart-font-family-icon);
+  margin-left: 5px;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+}
+.smart-kanban-task-text .priority.low {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232666BE'%3E%3Cpath d='M2.73804 7.00207C1.96611 5.66874 2.92823 4 4.46889 4H19.5311C21.0718 4 22.0339 5.66874 21.262 7.00207L13.7309 20.0103C12.9605 21.3409 11.0395 21.3409 10.2691 20.0103L2.73804 7.00207Z'/%3E%3C/svg%3E");
+}
+.smart-kanban-task-text .priority.average {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23005C99'%3E%3Cpath d='M12 5.98999L19.53 19H4.47L12 5.98999ZM2.74 18C1.97 19.33 2.93 21 4.47 21H19.53C21.07 21 22.03 19.33 21.26 18L13.73 4.98999C12.96 3.65999 11.04 3.65999 10.27 4.98999L2.74 18Z'/%3E%3C/svg%3E");
+}
+.smart-kanban-task-text .priority.high {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DD5347'%3E%3Cpath d='M2.73804 17.9979C1.96611 19.3313 2.92823 21 4.46889 21H19.5311C21.0718 21 22.0339 19.3313 21.262 17.9979L13.7309 4.98965C12.9605 3.65908 11.0395 3.65908 10.2691 4.98965L2.73804 17.9979Z'/%3E%3C/svg%3E");
+}
+.smart-kanban-task-text .priority.critical {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23AF0020'%3E%3Cpath d='M2.73804 17.9979C1.96611 19.3313 2.92823 21 4.46889 21H19.5311C21.0718 21 22.0339 19.3313 21.262 17.9979L13.7309 4.98965C12.9605 3.65908 11.0395 3.65908 10.2691 4.98965L2.73804 17.9979ZM13.5 17.5C13.5 18.3284 12.8284 19 12 19V19C11.1716 19 10.5 18.3284 10.5 17.5V17.5C10.5 16.6716 11.1716 16 12 16V16C12.8284 16 13.5 16.6716 13.5 17.5V17.5ZM13.5 13.5C13.5 14.3284 12.8284 15 12 15V15C11.1716 15 10.5 14.3284 10.5 13.5V9.5C10.5 8.67157 11.1716 8 12 8V8C12.8284 8 13.5 8.67157 13.5 9.5V13.5Z'/%3E%3C/svg%3E");
+}
+
 .smart-kanban[right-to-left] .smart-kanban-body,
 .smart-kanban[right-to-left] .smart-kanban-column-header-label,
 .smart-kanban[right-to-left] .swimlane {

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

@@ -0,0 +1,6 @@
+/* .smart-alert */
+.smart-qr-code {
+  display: block;
+}
+
+/*# sourceMappingURL=smart.barcode.css.map */

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

@@ -1172,11 +1172,11 @@
     /* Kanban user icon size */
     --smart-kanban-user-list-width: 150px;
     /* Kanban user list width */
-    --smart-kanban-user-list-max-height: 400px;
+    --smart-kanban-user-list-max-height: 500px;
     /* Kanban user list max height */
     --smart-kanban-comments-list-width: 350px;
     /* Kanban comments list width */
-    --smart-kanban-comments-list-height: 400px;
+    --smart-kanban-comments-list-height: auto;
     /* Kanban comments list height */
     --smart-kanban-new-comment-height: 50px;
     /* Height of new comment section */