@openziti/ziti-console-lib 0.5.1 → 0.6.1

package/assets/scripts/growler.js

@@ -15,6 +15,7 @@
 */
 
 var growler = {
+  disabled: false,
   isDebugging: true,
   showId: -1,
   data: [],
@@ -77,6 +78,9 @@ var growler = {
     }
   },
 	show: function(type, title, subtitle, message) {
+    if (growler.disabled) {
+      return;
+    }
     if (growler.showId!=-1) clearTimeout(growler.showId);
     $("#Growler").removeClass("open");
     $("#Growler").removeClass("success");

package/assets/styles/forms.css

@@ -26,8 +26,8 @@ input, select, textarea {
     width: 100%;
     border-color: var(--stroke);
     border-style: solid;
-    border-width: 2px;
-    border-radius: 7px;
+    border-width: var(--inputBorderWidth);
+    border-radius: var(--inputBorderRadius);
     padding-left: 7px;
     padding-right: 7px;
     outline: none;
@@ -94,7 +94,7 @@ input:disabled, select:disabled, textarea:disabled {
 }
 
 div.errors {
-	border-width: 2px;
+	border-width: var(--inputBorderWidth);
 	border-style: solid;
 	border-color: var(--red);
 }
@@ -114,11 +114,11 @@ select {
 .check {
     width: 20px;
     height: 20px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     position: relative;
     margin-right: 10px;
     float: left;
-    border-width: 2px;
+    border-width: var(--inputBorderWidth);
     border-style: solid;
     border-color: var(--primary);
     background-color: var(--navigation) !important;
@@ -135,7 +135,7 @@ select {
 .subform {
 	background-color: var(--primary);
 	padding: 20px;
-	border-radius: 7px;
+	border-radius: var(--inputBorderRadius);
 	display: grid;
 	column-gap: 20px;
 	padding-top: 10px;
@@ -335,7 +335,7 @@ label .note:hover {
 	width: fit-content;
 	text-transform: uppercase;
 	text-align: center;
-	border-radius: 7px;
+	border-radius: var(--inputBorderRadius);
 	line-height: 25px;
 	position: relative;
 	border: 0;

package/assets/styles/global.scss

@@ -1,6 +1,7 @@
 body {
   --highlighted: #f5a93d;
   --red: #ff104b;
+  --lightRed: #ffedf1;
   --green: #00db48;
   --white: #FFF;
   --menu: #434c5e;
@@ -53,10 +54,25 @@ body {
   overflow: hidden;
 }
 
+textarea,
 select,
 input {
   &.error {
     border-color: var(--red);
+    background-color: var(--lightRed) !important;
+
+    &::placeholder {
+      color: var(--formBase);
+    }
+  }
+}
+
+.tagError {
+  border-color: var(--red);
+  background-color: var(--lightRed) !important;
+
+  &::placeholder {
+    color: var(--formBase) !important;
   }
 }
 
@@ -210,14 +226,6 @@ input {
   border-width: 1px;
   border-color: var(--stroke);
 }
-.form-field-label {
-  color: var(--stroke);
-  font-size: 18px;
-  font-weight: 700;
-  display: flex;
-  flex: 1 0 auto;
-  flex-wrap: nowrap;
-}
 .form-field-row {
   display: flex;
   flex-direction: row;
@@ -248,6 +256,13 @@ input {
   }
 }
 
+.form-field-content {
+  textarea {
+    padding-top: initial;
+    margin-top: initial;
+  }
+}
+
 .form-field-input {
   min-height: var(--defaultInputHeight);
 }
@@ -255,7 +270,7 @@ input {
 .form-field-input-group {
   padding: 15px;
   background-color: var(--formGroup);
-  border-radius: 7px;
+  border-radius: var(--inputBorderRadius);
 
   &[hidden] {
     display: none !important;
@@ -266,12 +281,30 @@ input {
   padding: var(--paddingXL);
   padding-top: var(--paddingSmall);
   background-color: var(--formSubGroup);
-  border-radius: 7px;
+  border-radius: var(--inputBorderRadius);
   &[hidden] {
     display: none !important;
   }
 }
 
+.form-field-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: 14px;
+  z-index: 10000;
+}
+
+.form-field-title-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  flex: 1 1 auto;
+  width: 100%;
+}
+
 .form-field-title {
   display: flex;
   align-items: center;
@@ -280,6 +313,21 @@ input {
   color: var(--tableText);
   text-transform: uppercase;
   height: 14px;
+
+  .form-sub-text {
+    margin-left: 5px;
+    font-size: 12px;
+    text-transform: none;
+  }
+}
+
+.form-field-label {
+  color: var(--stroke);
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+  flex: 1 0 auto;
+  flex-wrap: nowrap;
 }
 
 .form-field-count {
@@ -314,7 +362,7 @@ input {
     font-size: 14px;
     background: var(--primary);
     padding: 7px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     color: var(--white);
     cursor: pointer;
     box-shadow: 0 3px 9px 0 var(--primaryColorOpaque);
@@ -338,7 +386,7 @@ input {
   font-size: 14px;
   background: var(--primary);
   padding: 7px;
-  border-radius: 7px;
+  border-radius: var(--inputBorderRadius);
   color: var(--white);
   cursor: pointer;
   box-shadow: 0 3px 9px 0 var(--primaryColorOpaque);
@@ -412,7 +460,7 @@ input {
 .form-field-label-container {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: var(--paddingSmall);
   width: 100%;
 }
 
@@ -521,7 +569,7 @@ lib-form-field-container {
   font-size: 14px;
   font-weight: 600;
   text-align: center;
-  border-radius: 7px;
+  border-radius: var(--inputBorderRadius);
   cursor: pointer;
   transition: .5s;
   height: 50px;
@@ -614,14 +662,14 @@ lib-form-field-container {
 
     &:hover {
       background-color: #ffffff;
-      border-radius: 7px;
+      border-radius: var(--inputBorderRadius);
       filter: brightness(90%);
       transition: 0.3s;
     }
 
     &:active {
       background-color: #ffffff;
-      border-radius: 7px;
+      border-radius: var(--inputBorderRadius);
       filter: brightness(80%);
       transition: 0.3s;
     }
@@ -689,7 +737,7 @@ lib-form-field-container {
   background-color: var(--transparent);
   transition: var(--transition);
   line-height: 13px;
-  border-radius: 7px;
+  border-radius: var(--inputBorderRadius);
 }
 
 .config-item {
@@ -731,12 +779,15 @@ lib-form-field-container {
     justify-content: space-between;
     padding: 20px;
     width: 100%;
-    background-color: var(--stroke);
+    background-color: var(--formGroup);
     border-radius: 5px;
 
     &.toggle-container {
-      padding-top: 10px;
-      padding-bottom: 10px;
+      padding: 10px;
+
+      .config-container-label {
+        color: var(--offWhite);
+      }
     }
   }
 
@@ -861,7 +912,7 @@ lib-tag-selector {
     border-radius: 10px;
     border-color: var(--inputBorder);
     border-style: solid;
-    border-width: 2px;
+    border-width: var(--inputBorderWidth);
     margin-left: 5px;
     margin-right: 5px;
     cursor: pointer;
@@ -985,7 +1036,7 @@ lib-tag-selector {
     position: relative;
     float: left;
     line-height: 30px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     margin-left: 2px;
     margin-bottom: 10px;
     margin-top: 10px;
@@ -1065,5 +1116,205 @@ p-dropdown {
         display: none;
       }
     }
+    .p-icon-wrapper {
+      width: 20px;
+      position: absolute;
+      right: 32px;
+      top: 11px;
+      height: 20px;
+
+      .p-dropdown-clear-icon {
+        right: 0;
+        path {
+          fill: var(--icon) !important;
+        }
+      }
+
+      &:hover {
+        .p-dropdown-clear-icon {
+          path {
+            fill: var(--primaryColor) !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+.p-element {
+
+  .p-chips.p-component {
+    width: 100%;
+    font-weight: 400;
+    font-family: 'Open Sans', Arial, sans-serif;
+    height: var(--defaultInputHeight);
+    border-color: var(--stroke);
+    border-style: solid;
+    border-width: var(--inputBorderWidth);
+    border-radius: var(--inputBorderRadius);
+    padding-left: 10px;
+    padding-right: 10px;
+    outline: none;
+    box-sizing: border-box;
+    font-size: 15px;
+    background-color: var(--background) !important;
+    color: var(--text);
+    -webkit-appearance: none;
+
+    .p-inputtext.p-chips-multiple-container {
+      width: 100%;
+      padding: 0;
+      border-width: var(--inputBorderWidth);
+
+      &.p-focus {
+        border-color: var(--primaryColor) !important;
+        box-shadow: 0 0 7px 0 var(--primaryColorOpaque) !important;
+
+        &.error {
+          border-color: var(--red) !important;
+        }
+      }
+    }
+  }
+
+  .p-chips .p-chips-multiple-container .p-chips-input-token input {
+    height: 25px;
+    font-size: 14px;
+    color: #495057;
+    padding: 0;
+    margin: 0;
+    border: 0 none;
+    outline: 0 none;
+    background-color: transparent;
+    box-shadow: none;
+    border-radius: 0;
+    width: 100%
+  }
+
+  .p-chips .p-chips-multiple-container .p-chips-token {
+    margin-right: .5rem;
+    font-family: Open Sans, sans-serif;
+    font-weight: 600;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    background: var(--primary);
+    color: var(--white);
+    border-radius: var(--inputBorderRadius);
+    cursor: default;
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    max-width: 100%
+  }
+
+  .p-chips-token-icon {
+    margin-left: 0.5rem;
+    cursor: pointer;
+    color:blue;
+    fill: red;
+  }
+
+  .p-chips {
+    display: inline-flex
+  }
+
+  .p-chips-token-label {
+    min-width: 0;
+    overflow: auto
+  }
+
+  .p-chips-token-label::-webkit-scrollbar {
+    display: none
+  }
+
+  .p-fluid .p-chips {
+    display: flex
+  }
+
+  .p-chips-clear-icon {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+    cursor: pointer;
+  }
+
+  .p-chips-clearable .p-inputtext {
+    position: relative
+  }
+
+  .p-inputtext {
+    border:none;
+  }
+}
+
+p-dropdown {
+  .p-dropdown {
+    .p-dropdown-header {
+      .dropdown-filter-container {
+        display: flex;
+        flex-direction: row;
+
+        .p-inputtext {
+          border-radius: 0;
+          border-width: 1px;
+          border-color: var(--stroke);
+          border-style: solid;
+
+          &:focus {
+            box-shadow: none;
+            &:enabled {
+              box-shadow: none;
+            }
+          }
+        }
+
+        .spinner {
+          display: inline-block;
+          width: var(--spinnerSizeMedium);
+          height: var(--spinnerSizeMedium);
+          border-radius: 50%;
+          background: transparent;
+          border-top: var(--spinerBorderTopMedium);
+          border-right: var(--spinerBorderRightMedium);
+          border-bottom: var(--spinerBorderBottomMedium);
+          border-left: var(--spinerBorderLeftMedium);
+          animation: loading .5s infinite linear;
+          margin-left: var(--marginSmall);
+          position: absolute;
+          right: 18px;
+          top: 20px;
+          opacity: .7;
+        }
+      }
+
+      .p-inputgroup-addon {
+        border-top-left-radius: var(--inputBorderRadius);
+        border-bottom-left-radius: var(--inputBorderRadius);
+      }
+
+      .p-button {
+        border-radius: 0;
+        border-top-right-radius: var(--inputBorderRadius);
+        border-bottom-right-radius: var(--inputBorderRadius);
+        background-color: var(--primary);
+
+        &.configs-loading {
+          .p-button-icon {
+            display: none;
+          }
+        }
+
+        &:focus {
+          box-shadow: none;
+        }
+      }
+      .p-button {
+        &.configs-loading {
+          .p-button-icon {
+            display: none;
+          }
+        }
+      }
+    }
   }
 }

package/assets/styles/header.css

@@ -165,7 +165,7 @@ header #ProfileButton .icon {
 
 .menu {
 	background-color: var(--menu);
-	border-radius: 7px;
+	border-radius: var(--inputBorderRadius);
     box-shadow: 0 0 0 1px var(--shadow), 0 8px 16px var(--shadow);
 	font-size: 14px;
 	font-weight: 600;