@openziti/ziti-console-lib 0.5.0 → 0.6.0

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,12 +1,78 @@
+body {
+  --highlighted: #f5a93d;
+  --red: #ff104b;
+  --lightRed: #ffedf1;
+  --green: #00db48;
+  --white: #FFF;
+  --menu: #434c5e;
+  --stroke: #d4d9e2;
+  --black: #000;
+  --shaded: #f6f7fb;
+  --formBackground: #f6f7fb;
+  --visualizerBackground: #ffffff80;
+  --background: #ffffff;
+  --placeholder: #CDCDCD;
+  --text: #000;
+  --tableText: #000;
+  --table: #ffffff;
+  --shadow: 0px 0px 8px 2px rgba(0,0,0,0.08);
+  --shadowLarge: 0 12px 23px 0 rgba(0, 0, 0, .07);
+  --shadowColor: rgba(0,0,0,0.08);
+  --transition: 0.5s;
+  --offWhite: #FCFCFC;
+  --dark: #28292B;
+  --formBase: #919ca5;
+  --formGroup: #232f3e;
+  --formSubGroup: #5e7088;
+  --modalBorderRadius: 15px;
+  --paddingSmall: 5px;
+  --paddingMedium: 10px;
+  --paddingLarge: 10px;
+  --paddingXL: 15px;
+  --paddingXXL: 20px;
+  --marginSmall: 5px;
+  --marginMedium: 10px;
+  --marginLarge: 10px;
+  --marginXL: 15px;
+  --marginXXL: 20px;
+  --gapSmall: 5px;
+  --gapMedium: 10px;
+  --gapLarge: 10px;
+  --gapXL: 15px;
+  --defaultInputHeight: 43px;
+  --defaultLineHeight: 15px;
+  --inputBorderRadius: 7px;
+  --inputBorderWidth: 2px;
+  --spinnerSizeMedium: 20px;
+  --spinerBorderTopMedium: 2px solid var(--stroke);
+  --spinerBorderRightMedium: 2px solid var(--stroke);
+  --spinerBorderBottomMedium: 2px solid transparent;
+  --spinerBorderLeftMedium: 2px solid transparent;
+}
 
 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;
   }
 }
 
@@ -160,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;
@@ -198,6 +256,13 @@ input {
   }
 }
 
+.form-field-content {
+  textarea {
+    padding-top: initial;
+    margin-top: initial;
+  }
+}
+
 .form-field-input {
   min-height: var(--defaultInputHeight);
 }
@@ -205,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;
@@ -216,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;
@@ -232,6 +315,15 @@ input {
   height: 14px;
 }
 
+.form-field-label {
+  color: var(--stroke);
+  font-size: 14px;
+  font-weight: 600;
+  display: flex;
+  flex: 1 0 auto;
+  flex-wrap: nowrap;
+}
+
 .form-field-count {
   background-color: #4c5566;
   color: var(--white);
@@ -264,7 +356,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);
@@ -288,7 +380,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);
@@ -362,7 +454,7 @@ input {
 .form-field-label-container {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: var(--paddingSmall);
   width: 100%;
 }
 
@@ -471,7 +563,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;
@@ -564,14 +656,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;
     }
@@ -639,7 +731,7 @@ lib-form-field-container {
   background-color: var(--transparent);
   transition: var(--transition);
   line-height: 13px;
-  border-radius: 7px;
+  border-radius: var(--inputBorderRadius);
 }
 
 .config-item {
@@ -811,7 +903,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;
@@ -935,10 +1027,85 @@ 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;
     transition: var(--transition);
   }
-}
+}
+
+.dropdown-loading {
+  .p-dropdown {
+    &.p-component {
+      .p-inputtext {
+        &.p-dropdown-label {
+          background: none;
+        }
+      }
+    }
+  }
+}
+
+p-dropdown {
+  .p-dropdown {
+    &.p-component {
+      width: 100%;
+      border-radius: var(--inputBorderRadius);
+      height: var(--defaultInputHeight);
+      font-family: 'Open Sans', Arial, sans-serif;
+      border-color: var(--stroke);
+      border-style: solid;
+      border-width: var(--inputBorderWidth);
+
+      .p-inputtext {
+        font-size: 14px;
+        font-family: 'Open Sans', Arial, sans-serif;
+        padding: 7px;
+        border-radius: var(--inputBorderRadius);
+      }
+
+      &.p-focus {
+        box-shadow: none;
+        border-color: var(--primary);
+        border-width: var(--inputBorderWidth);
+      }
+
+      .p-dropdown-header {
+        padding: 10px;
+
+        .p-dropdown-filter {
+          box-shadow: none;
+          border-style: solid;
+          border-width: var(--inputBorderWidth);
+          border-color: var(--stroke);
+
+          &:focus {
+            border-color: var(--primary);
+          }
+        }
+      }
+
+      .p-inputtext {
+        &.p-dropdown-label {
+          background-image: url(/assets/svgs/ArrowDown.svg);
+          background-position: center right 10px;
+          background-repeat: no-repeat;
+          background-size: 18px;
+          min-height: var(--defaultInputHeight);
+          font-family: 'Open Sans', Arial, sans-serif;
+          font-size: 14px;
+          color: var(--tableText);
+          height: 43px;
+          line-height: 40px;
+          padding: 0;
+          padding-left: var(--inputBorderRadius);
+        }
+      }
+
+      .p-dropdown-trigger {
+        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;

package/assets/styles/ziti.css

@@ -43,6 +43,13 @@ body {
     --gapXL: 15px;
     --defaultInputHeight: 43px;
     --defaultLineHeight: 15px;
+    --inputBorderRadius: 7px;
+    --inputBorderWidth: 2px;
+    --spinnerSizeMedium: 20px;
+    --spinerBorderTopMedium: 2px solid var(--stroke);
+    --spinerBorderRightMedium: 2px solid var(--stroke);
+    --spinerBorderBottomMedium: 2px solid transparent;
+    --spinerBorderLeftMedium: 2px solid transparent;
 }
 
 ::placeholder {
@@ -63,8 +70,8 @@ body {
     min-height: 34px;
     border: 4px solid rgba(0, 0, 0, 0);
     background-clip: padding-box;
-    -webkit-border-radius: 7px;
-    border-radius: 7px;
+    -webkit-border-radius: var(--inputBorderRadius);
+    border-radius: var(--inputBorderRadius);
     background-color: var(--stroke);
     -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
     box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05);
@@ -457,9 +464,9 @@ aside .icon {
 .blurb {
     padding: 10px;
     background-color: #ffcc33;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     border-color: #cc3300;
-    border-width: 2px;
+    border-width: var(--inputBorderWidth);
     border-style: solid;
     margin-top: 8px;
 }
@@ -688,7 +695,7 @@ aside .icon {
 
 .configureBox {
     background-color: var(--stroke);
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     padding: 20px;
     margin-bottom: 10px;
     position: relative;
@@ -701,7 +708,7 @@ aside .icon {
 
 .configBox {
     background-color: var(--stroke);
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     padding: 20px;
     margin-bottom: 10px;
     position: relative;
@@ -714,7 +721,7 @@ aside .icon {
 .lightBox {
     color: #FFF;
     background-color: var(--menu);
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     padding: 10px;
     margin-top: 10px;
     position: relative;
@@ -767,7 +774,7 @@ aside .icon {
     padding-top: 5px;
     font-size: 12px;
     padding-bottom: 5px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     color: var(--black);
     transition: var(--transition);
     z-index: 10;
@@ -1014,10 +1021,10 @@ aside .icon {
 }
 
 .selectable {
-    border-width: 2px;
+    border-width: var(--inputBorderWidth);
     border-style: solid;
     border-color: var(--menu);
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     background-color: var(--menu);
     padding:0px;
     height: 130px;
@@ -1032,7 +1039,7 @@ aside .icon {
     height: 40px;
     line-height: 40px;
     padding-left: 5px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     margin-bottom: 10px;
     background-color: var(--stroke);
     cursor: pointer;
@@ -1065,7 +1072,7 @@ aside .icon {
     background-color: transparent;
     transition: var(--transition);
     line-height: 13px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
 }
 
 .docs {
@@ -1233,10 +1240,10 @@ aside .icon {
 }
 
 .tagSelect {
-    border-width: 2px;
+    border-width: var(--inputBorderWidth);
     border-style: solid;
     border-color: var(--menu);
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     background-color: var(--menu);
     padding: 0px;
     height: 130px;
@@ -1427,7 +1434,7 @@ aside .icon {
     position: absolute;
     width: 150px;
     background-color: var(--menu);
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     right: 0px;
     top: 20px;
     box-shadow: 0 0 0 1px var(--shadowColor), 0 8px 16px var(--shadowColor);
@@ -1485,7 +1492,7 @@ aside .icon {
 .cardStack {
     background-color: var(--primary);
     overflow: visable;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     height: 120px;
     width: 100%;
     float: left;
@@ -1593,7 +1600,7 @@ aside .icon {
     gap: 30px;
     box-shadow: 0px 0px 19px -8px rgba(0, 0, 0, 0.2);
     padding: 10px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     cursor: pointer;
     transition: 0.3s;
 }
@@ -1628,7 +1635,7 @@ aside .icon {
     height: 150px;
     position: relative;
     background-color: var(--white);
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     box-sizing: var(--shadow);
     cursor: pointer;
 }
@@ -1681,8 +1688,8 @@ aside .icon {
 }
 
 .card {
-    border-radius: 7px;
-    border-width: 2px;
+    border-radius: var(--inputBorderRadius);
+    border-width: var(--inputBorderWidth);
     border-style: solid;
     border-color: var(--offWhite);
     background-color: var(--offWhite);
@@ -1780,7 +1787,7 @@ aside .icon {
 .idBox {
     width: 48%;
     margin: 6px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     background-color: var(--stroke);
     position: relative;
     display: inline-block;
@@ -1843,8 +1850,8 @@ aside .icon {
     opacity: 0.0;
     transition: var(--transition);
     background-color: #fCFCFC;
-    border-radius: 7px;
-    border-width: 2px;
+    border-radius: var(--inputBorderRadius);
+    border-width: var(--inputBorderWidth);
     border-color: var(--placeholder);
     overflow: hidden;
 }
@@ -1858,7 +1865,7 @@ aside .icon {
     position: relative;
     display: inline-block;
     cursor: pointer;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     transition: var(--transition);
 }
 
@@ -2067,7 +2074,7 @@ path.green {
     position: absolute;
     float: left;
     line-height: 30px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     margin-left: 2px;
     margin-bottom: 10px;
     margin-top: 10px;
@@ -2081,7 +2088,7 @@ path.green {
     position: relative;
     float: left;
     line-height: 30px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     margin-left: 2px;
     margin-bottom: 10px;
     margin-top: 10px;
@@ -2126,7 +2133,7 @@ path.green {
     position: relative;
     float: left;
     line-height: 30px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     margin-left: 10px;
     margin-bottom: 10px;
     transition: var(--transition);
@@ -2151,15 +2158,15 @@ path.green {
     position: relative;
     float: left;
     line-height: 30px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     margin-left: 10px;
     margin-bottom: 10px;
     transition: var(--transition);
 }
 
 .searchSelector {
-    border-radius: 7px;
-    border-width: 2px;
+    border-radius: var(--inputBorderRadius);
+    border-width: var(--inputBorderWidth);
     border-color: var(--stroke);
     border-style: solid;
     width: 100%;
@@ -2193,8 +2200,8 @@ path.green {
     margin-top: -7px;
     margin-bottom: 10px;
     opacity: 1.0;
-    border-bottom-left-radius: 7px;
-    border-bottom-right-radius: 7px;
+    border-bottom-left-radius: var(--inputBorderRadius);
+    border-bottom-right-radius: var(--inputBorderRadius);
     background-color: rgba(0,0,0,0.6);
     padding-top: 25px;
     padding-left: 10px;
@@ -2574,7 +2581,7 @@ div:focus {
 .pod .button {
     margin-top: 10px;
     width: 100%;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     line-height: 30px;
 }
 
@@ -2890,10 +2897,10 @@ svg {
 }
 
 .list {
-    border-width: 2px;
+    border-width: var(--inputBorderWidth);
     border-style: solid;
     border-color: var(--menu);
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     background-color: var(--menu);
     padding: 0px;
     height: 260px;
@@ -2905,7 +2912,7 @@ svg {
 .list .listItem {
     position: relative;
     width: 100%;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     height: 30px;
     background-color: var(--white);
     color: var(--black);
@@ -3140,7 +3147,7 @@ button[aria-label][data-balloon-pos] {
     opacity: 0;
     background-color: var(--black);
     color: var(--white);
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     padding: 20px;
     transition: var(--transition);
     margin-top: 15px;
@@ -3162,9 +3169,9 @@ button[aria-label][data-balloon-pos] {
 
 .modal .CodeMirror {
     height: 150px;
-    border-radius: 7px;
-    border-top-left-radius: 7px;
-    border-bottom-left-radius: 7px;
+    border-radius: var(--inputBorderRadius);
+    border-top-left-radius: var(--inputBorderRadius);
+    border-bottom-left-radius: var(--inputBorderRadius);
     margin-top: 10px;
 }