@openziti/ziti-console-lib 0.5.1 → 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,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;
@@ -282,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);
@@ -314,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);
@@ -338,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);
@@ -412,7 +454,7 @@ input {
 .form-field-label-container {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: var(--paddingSmall);
   width: 100%;
 }
 
@@ -521,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;
@@ -614,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;
     }
@@ -689,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 {
@@ -861,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;
@@ -985,7 +1027,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;

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

@@ -70,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);
@@ -464,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;
 }
@@ -695,7 +695,7 @@ aside .icon {
 
 .configureBox {
     background-color: var(--stroke);
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     padding: 20px;
     margin-bottom: 10px;
     position: relative;
@@ -708,7 +708,7 @@ aside .icon {
 
 .configBox {
     background-color: var(--stroke);
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     padding: 20px;
     margin-bottom: 10px;
     position: relative;
@@ -721,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;
@@ -774,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;
@@ -1021,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;
@@ -1039,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;
@@ -1072,7 +1072,7 @@ aside .icon {
     background-color: transparent;
     transition: var(--transition);
     line-height: 13px;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
 }
 
 .docs {
@@ -1240,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;
@@ -1434,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);
@@ -1492,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;
@@ -1600,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;
 }
@@ -1635,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;
 }
@@ -1688,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);
@@ -1787,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;
@@ -1850,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;
 }
@@ -1865,7 +1865,7 @@ aside .icon {
     position: relative;
     display: inline-block;
     cursor: pointer;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     transition: var(--transition);
 }
 
@@ -2074,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;
@@ -2088,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;
@@ -2133,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);
@@ -2158,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%;
@@ -2200,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;
@@ -2581,7 +2581,7 @@ div:focus {
 .pod .button {
     margin-top: 10px;
     width: 100%;
-    border-radius: 7px;
+    border-radius: var(--inputBorderRadius);
     line-height: 30px;
 }
 
@@ -2897,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;
@@ -2912,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);
@@ -3147,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;
@@ -3169,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;
 }
 

package/esm2022/lib/features/card/card.component.mjs

@@ -13,12 +13,12 @@ class CardComponent {
         event.preventDefault();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardComponent, selector: "lib-card", inputs: { imageUrl: "imageUrl", title: "title", content: "content", buttonText: "buttonText", id: "id", href: "href" }, ngImport: i0, template: "<a href=\"/{{href}}\" (click)=\"linkClicked($event)\">\n    <div class=\"service-card-container\">\n        <div class=\"buttonCard selectType\" [id]=\"id\">\n            <div style=\"background-image: url({{imageUrl}})\" class=\"icon\"></div>\n            <div class=\"title\">{{title}}</div>\n            <div class=\"content\">\n                {{ content }}\n            </div>\n            <div class=\"row center buttonArea\">\n                <button class=\"save\">{{buttonText}}</button>\n            </div>\n        </div>\n    </div>\n</a>", styles: [".buttonCard .title{top:230px}.buttonCard .content{font-size:14px;bottom:80px;display:flex;flex-direction:column;align-items:center;text-align:center}.red{color:var(--red);font-weight:650;background-color:unset}.disabled{background:var(--inputBorder);box-shadow:none;color:var(--icon)}.save{margin-top:3px;font-size:14px;font-family:Open Sans;font-weight:600;display:inline-block;min-width:150px;clear:both;overflow:hidden;height:45px;padding:13px;width:-moz-fit-content;width:fit-content;text-transform:uppercase;text-align:center;border-radius:7px;position:relative;border:0;background:var(--primaryColor);color:#fff;white-space:nowrap;transition:all .15s ease;cursor:pointer;box-shadow:0 3px 9px 0 var(--primaryColorOpaque)}.padTop{padding-top:12px}.linkButton{margin-top:unset}.subtext{color:var(--stroke)}.buttonCard{max-width:320px;width:320px;position:relative;float:none;cursor:pointer;padding-bottom:25px;margin:20px 20px 0;background-color:var(--navigation);box-shadow:0 12px 23px 0 var(--shadow);transition:box-shadow .3s;border-radius:7px;min-height:405px;display:flex;flex-direction:column;align-items:center;justify-content:center}.buttonCard.shadow{box-shadow:0 12px 23px 0 var(--shadow)}.buttonCard.shadow .icon{background-size:50%;background-position:center top}.buttonCard:hover{filter:brightness(99.5%);box-shadow:0 3px 3px 0 var(--shadow);transition:box-shadow .3s}.buttonCard:active{filter:brightness(99%);box-shadow:0 1px 1px 0 var(--shadow);transition:box-shadow .3s}.buttonCard .title{font-size:16px;color:var(--tableText);text-align:center;text-transform:uppercase;padding-top:0;font-weight:600;font-family:Open Sans;position:absolute;top:220px;width:100%}.buttonCard .buttonArea{position:absolute;bottom:25px;width:100%}.buttonCard .subButton{position:absolute;bottom:10px}.buttonCard .content{color:var(--text);font-size:13px;height:80px;margin-top:15px;margin-bottom:30px;padding-left:30px;padding-right:30px;padding-top:30px;bottom:70px;position:absolute;font-weight:400;font-family:Open Sans}.buttonCard .icon{position:absolute;top:30px;left:10px;right:10px;height:185px;background-position:center bottom;background-size:contain;z-index:unset;width:unset;min-width:unset;min-height:unset}.buttonCard .buttonArea{bottom:30px}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CardComponent, selector: "lib-card", inputs: { imageUrl: "imageUrl", title: "title", content: "content", buttonText: "buttonText", id: "id", href: "href" }, ngImport: i0, template: "<a href=\"/{{href}}\" (click)=\"linkClicked($event)\">\n    <div class=\"service-card-container\">\n        <div class=\"buttonCard selectType\" [id]=\"id\">\n            <div style=\"background-image: url({{imageUrl}})\" class=\"icon\"></div>\n            <div class=\"title\">{{title}}</div>\n            <div class=\"content\">\n                {{ content }}\n            </div>\n            <div class=\"row center buttonArea\">\n                <button class=\"save\">{{buttonText}}</button>\n            </div>\n        </div>\n    </div>\n</a>", styles: [".buttonCard .title{top:230px}.buttonCard .content{font-size:14px;bottom:80px;display:flex;flex-direction:column;align-items:center;text-align:center}.red{color:var(--red);font-weight:650;background-color:unset}.disabled{background:var(--inputBorder);box-shadow:none;color:var(--icon)}.save{margin-top:3px;font-size:14px;font-family:Open Sans;font-weight:600;display:inline-block;min-width:150px;clear:both;overflow:hidden;height:45px;padding:13px;width:-moz-fit-content;width:fit-content;text-transform:uppercase;text-align:center;border-radius:var(--inputBorderRadius);position:relative;border:0;background:var(--primaryColor);color:#fff;white-space:nowrap;transition:all .15s ease;cursor:pointer;box-shadow:0 3px 9px 0 var(--primaryColorOpaque)}.padTop{padding-top:12px}.linkButton{margin-top:unset}.subtext{color:var(--stroke)}.buttonCard{max-width:320px;width:320px;position:relative;float:none;cursor:pointer;padding-bottom:25px;margin:20px 20px 0;background-color:var(--navigation);box-shadow:0 12px 23px 0 var(--shadow);transition:box-shadow .3s;border-radius:var(--inputBorderRadius);min-height:405px;display:flex;flex-direction:column;align-items:center;justify-content:center}.buttonCard.shadow{box-shadow:0 12px 23px 0 var(--shadow)}.buttonCard.shadow .icon{background-size:50%;background-position:center top}.buttonCard:hover{filter:brightness(99.5%);box-shadow:0 3px 3px 0 var(--shadow);transition:box-shadow .3s}.buttonCard:active{filter:brightness(99%);box-shadow:0 1px 1px 0 var(--shadow);transition:box-shadow .3s}.buttonCard .title{font-size:16px;color:var(--tableText);text-align:center;text-transform:uppercase;padding-top:0;font-weight:600;font-family:Open Sans;position:absolute;top:220px;width:100%}.buttonCard .buttonArea{position:absolute;bottom:25px;width:100%}.buttonCard .subButton{position:absolute;bottom:10px}.buttonCard .content{color:var(--text);font-size:13px;height:80px;margin-top:15px;margin-bottom:30px;padding-left:30px;padding-right:30px;padding-top:30px;bottom:70px;position:absolute;font-weight:400;font-family:Open Sans}.buttonCard .icon{position:absolute;top:30px;left:10px;right:10px;height:185px;background-position:center bottom;background-size:contain;z-index:unset;width:unset;min-width:unset;min-height:unset}.buttonCard .buttonArea{bottom:30px}\n"] }); }
 }
 export { CardComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-card', template: "<a href=\"/{{href}}\" (click)=\"linkClicked($event)\">\n    <div class=\"service-card-container\">\n        <div class=\"buttonCard selectType\" [id]=\"id\">\n            <div style=\"background-image: url({{imageUrl}})\" class=\"icon\"></div>\n            <div class=\"title\">{{title}}</div>\n            <div class=\"content\">\n                {{ content }}\n            </div>\n            <div class=\"row center buttonArea\">\n                <button class=\"save\">{{buttonText}}</button>\n            </div>\n        </div>\n    </div>\n</a>", styles: [".buttonCard .title{top:230px}.buttonCard .content{font-size:14px;bottom:80px;display:flex;flex-direction:column;align-items:center;text-align:center}.red{color:var(--red);font-weight:650;background-color:unset}.disabled{background:var(--inputBorder);box-shadow:none;color:var(--icon)}.save{margin-top:3px;font-size:14px;font-family:Open Sans;font-weight:600;display:inline-block;min-width:150px;clear:both;overflow:hidden;height:45px;padding:13px;width:-moz-fit-content;width:fit-content;text-transform:uppercase;text-align:center;border-radius:7px;position:relative;border:0;background:var(--primaryColor);color:#fff;white-space:nowrap;transition:all .15s ease;cursor:pointer;box-shadow:0 3px 9px 0 var(--primaryColorOpaque)}.padTop{padding-top:12px}.linkButton{margin-top:unset}.subtext{color:var(--stroke)}.buttonCard{max-width:320px;width:320px;position:relative;float:none;cursor:pointer;padding-bottom:25px;margin:20px 20px 0;background-color:var(--navigation);box-shadow:0 12px 23px 0 var(--shadow);transition:box-shadow .3s;border-radius:7px;min-height:405px;display:flex;flex-direction:column;align-items:center;justify-content:center}.buttonCard.shadow{box-shadow:0 12px 23px 0 var(--shadow)}.buttonCard.shadow .icon{background-size:50%;background-position:center top}.buttonCard:hover{filter:brightness(99.5%);box-shadow:0 3px 3px 0 var(--shadow);transition:box-shadow .3s}.buttonCard:active{filter:brightness(99%);box-shadow:0 1px 1px 0 var(--shadow);transition:box-shadow .3s}.buttonCard .title{font-size:16px;color:var(--tableText);text-align:center;text-transform:uppercase;padding-top:0;font-weight:600;font-family:Open Sans;position:absolute;top:220px;width:100%}.buttonCard .buttonArea{position:absolute;bottom:25px;width:100%}.buttonCard .subButton{position:absolute;bottom:10px}.buttonCard .content{color:var(--text);font-size:13px;height:80px;margin-top:15px;margin-bottom:30px;padding-left:30px;padding-right:30px;padding-top:30px;bottom:70px;position:absolute;font-weight:400;font-family:Open Sans}.buttonCard .icon{position:absolute;top:30px;left:10px;right:10px;height:185px;background-position:center bottom;background-size:contain;z-index:unset;width:unset;min-width:unset;min-height:unset}.buttonCard .buttonArea{bottom:30px}\n"] }]
+            args: [{ selector: 'lib-card', template: "<a href=\"/{{href}}\" (click)=\"linkClicked($event)\">\n    <div class=\"service-card-container\">\n        <div class=\"buttonCard selectType\" [id]=\"id\">\n            <div style=\"background-image: url({{imageUrl}})\" class=\"icon\"></div>\n            <div class=\"title\">{{title}}</div>\n            <div class=\"content\">\n                {{ content }}\n            </div>\n            <div class=\"row center buttonArea\">\n                <button class=\"save\">{{buttonText}}</button>\n            </div>\n        </div>\n    </div>\n</a>", styles: [".buttonCard .title{top:230px}.buttonCard .content{font-size:14px;bottom:80px;display:flex;flex-direction:column;align-items:center;text-align:center}.red{color:var(--red);font-weight:650;background-color:unset}.disabled{background:var(--inputBorder);box-shadow:none;color:var(--icon)}.save{margin-top:3px;font-size:14px;font-family:Open Sans;font-weight:600;display:inline-block;min-width:150px;clear:both;overflow:hidden;height:45px;padding:13px;width:-moz-fit-content;width:fit-content;text-transform:uppercase;text-align:center;border-radius:var(--inputBorderRadius);position:relative;border:0;background:var(--primaryColor);color:#fff;white-space:nowrap;transition:all .15s ease;cursor:pointer;box-shadow:0 3px 9px 0 var(--primaryColorOpaque)}.padTop{padding-top:12px}.linkButton{margin-top:unset}.subtext{color:var(--stroke)}.buttonCard{max-width:320px;width:320px;position:relative;float:none;cursor:pointer;padding-bottom:25px;margin:20px 20px 0;background-color:var(--navigation);box-shadow:0 12px 23px 0 var(--shadow);transition:box-shadow .3s;border-radius:var(--inputBorderRadius);min-height:405px;display:flex;flex-direction:column;align-items:center;justify-content:center}.buttonCard.shadow{box-shadow:0 12px 23px 0 var(--shadow)}.buttonCard.shadow .icon{background-size:50%;background-position:center top}.buttonCard:hover{filter:brightness(99.5%);box-shadow:0 3px 3px 0 var(--shadow);transition:box-shadow .3s}.buttonCard:active{filter:brightness(99%);box-shadow:0 1px 1px 0 var(--shadow);transition:box-shadow .3s}.buttonCard .title{font-size:16px;color:var(--tableText);text-align:center;text-transform:uppercase;padding-top:0;font-weight:600;font-family:Open Sans;position:absolute;top:220px;width:100%}.buttonCard .buttonArea{position:absolute;bottom:25px;width:100%}.buttonCard .subButton{position:absolute;bottom:10px}.buttonCard .content{color:var(--text);font-size:13px;height:80px;margin-top:15px;margin-bottom:30px;padding-left:30px;padding-right:30px;padding-top:30px;bottom:70px;position:absolute;font-weight:400;font-family:Open Sans}.buttonCard .icon{position:absolute;top:30px;left:10px;right:10px;height:185px;background-position:center bottom;background-size:contain;z-index:unset;width:unset;min-width:unset;min-height:unset}.buttonCard .buttonArea{bottom:30px}\n"] }]
         }], propDecorators: { imageUrl: [{
                 type: Input
             }], title: [{

package/esm2022/lib/features/data-table/cells/table-cell-menu/table-cell-menu.component.mjs

@@ -37,11 +37,11 @@ class TableCellMenuComponent {
         this.cellParams.closeMenu(event);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableCellMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableCellMenuComponent, selector: "app-table-cell-menu", ngImport: i0, template: "<div (clickOutside)=\"closeActionMenu($event)\" class=\"cell-menu-container\">\n  <div\n    (click)=\"toggleMenu($event)\"\n    *ngIf=\"enableCellMenu\"\n    attr.name=\"RowDots_{{ item.name }}\"\n    class=\"dots\"\n    id=\"RowDots_{{ item.id }}\"\n  >\n    ...\n  </div>\n</div>\n", styles: [".cell-menu-container{width:100%;height:100%;position:absolute}.cell-menu-container .dots{width:30px;right:10px;height:30px;position:absolute;top:10px;font-size:24px;text-align:center;cursor:pointer;background-color:transparent;transition:var(--transition);line-height:13px;border-radius:7px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TableCellMenuComponent, selector: "app-table-cell-menu", ngImport: i0, template: "<div (clickOutside)=\"closeActionMenu($event)\" class=\"cell-menu-container\">\n  <div\n    (click)=\"toggleMenu($event)\"\n    *ngIf=\"enableCellMenu\"\n    attr.name=\"RowDots_{{ item.name }}\"\n    class=\"dots\"\n    id=\"RowDots_{{ item.id }}\"\n  >\n    ...\n  </div>\n</div>\n", styles: [".cell-menu-container{width:100%;height:100%;position:absolute}.cell-menu-container .dots{width:30px;right:10px;height:30px;position:absolute;top:10px;font-size:24px;text-align:center;cursor:pointer;background-color:transparent;transition:var(--transition);line-height:13px;border-radius:var(--inputBorderRadius)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.ClickOutsideDirective, selector: "[clickOutside]", inputs: ["clickOutsideEnabled", "attachOutsideOnClick", "delayClickOutsideInit", "emitOnBlur", "exclude", "excludeBeforeClick", "clickOutsideEvents"], outputs: ["clickOutside"] }] }); }
 }
 export { TableCellMenuComponent };
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TableCellMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-cell-menu', template: "<div (clickOutside)=\"closeActionMenu($event)\" class=\"cell-menu-container\">\n  <div\n    (click)=\"toggleMenu($event)\"\n    *ngIf=\"enableCellMenu\"\n    attr.name=\"RowDots_{{ item.name }}\"\n    class=\"dots\"\n    id=\"RowDots_{{ item.id }}\"\n  >\n    ...\n  </div>\n</div>\n", styles: [".cell-menu-container{width:100%;height:100%;position:absolute}.cell-menu-container .dots{width:30px;right:10px;height:30px;position:absolute;top:10px;font-size:24px;text-align:center;cursor:pointer;background-color:transparent;transition:var(--transition);line-height:13px;border-radius:7px}\n"] }]
+            args: [{ selector: 'app-table-cell-menu', template: "<div (clickOutside)=\"closeActionMenu($event)\" class=\"cell-menu-container\">\n  <div\n    (click)=\"toggleMenu($event)\"\n    *ngIf=\"enableCellMenu\"\n    attr.name=\"RowDots_{{ item.name }}\"\n    class=\"dots\"\n    id=\"RowDots_{{ item.id }}\"\n  >\n    ...\n  </div>\n</div>\n", styles: [".cell-menu-container{width:100%;height:100%;position:absolute}.cell-menu-container .dots{width:30px;right:10px;height:30px;position:absolute;top:10px;font-size:24px;text-align:center;cursor:pointer;background-color:transparent;transition:var(--transition);line-height:13px;border-radius:var(--inputBorderRadius)}\n"] }]
         }] });
 //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtY2VsbC1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3ppdGktY29uc29sZS1saWIvc3JjL2xpYi9mZWF0dXJlcy9kYXRhLXRhYmxlL2NlbGxzL3RhYmxlLWNlbGwtbWVudS90YWJsZS1jZWxsLW1lbnUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMveml0aS1jb25zb2xlLWxpYi9zcmMvbGliL2ZlYXR1cmVzL2RhdGEtdGFibGUvY2VsbHMvdGFibGUtY2VsbC1tZW51L3RhYmxlLWNlbGwtbWVudS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFDLE1BQU0sZUFBZSxDQUFDO0FBR3hDLE9BQU8sQ0FBQyxNQUFNLFFBQVEsQ0FBQzs7OztBQUV2QixNQUthLHNCQUFzQjtJQUxuQztRQU1FLFNBQUksR0FBUTtZQUNWLFFBQVEsRUFBRSxLQUFLO1lBQ2YsRUFBRSxFQUFFLEVBQUU7WUFDTixJQUFJLEVBQUUsRUFBRTtZQUNSLFVBQVUsRUFBRSxFQUFFO1NBQ2YsQ0FBQztRQUVGLFNBQUksR0FBRyxLQUFLLENBQUM7S0E4QmQ7SUE1QkMsSUFBSSxjQUFjO1FBQ2hCLE9BQU8sQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxJQUFJLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLE1BQU0sS0FBSyxDQUFDLENBQUMsQ0FBQztJQUVyRixDQUFDO0lBRUQsTUFBTSxDQUFDLFVBQStCO1FBQ3BDLElBQUksQ0FBQyxVQUFVLEdBQUcsVUFBVSxDQUFDO1FBQzdCLElBQUksQ0FBQyxJQUFJLEdBQUcsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxVQUFVLEVBQUUsTUFBTSxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUVELE9BQU8sQ0FBQyxVQUErQjtRQUNyQyxJQUFJLENBQUMsVUFBVSxHQUFHLFVBQVUsQ0FBQztRQUM3QixJQUFJLENBQUMsSUFBSSxHQUFHLENBQUMsQ0FBQyxHQUFHLENBQUMsVUFBVSxFQUFFLE1BQU0sQ0FBQyxDQUFDO1FBQ3RDLE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQUVELFVBQVUsQ0FBQyxLQUFLO1FBQ2QsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsUUFBUSxFQUFFO1lBQzdCLE9BQU87U0FDUjtRQUNELENBQUMsQ0FBQyxLQUFLLENBQUMsR0FBRyxFQUFFO1lBQ1gsSUFBSSxDQUFDLFVBQVUsQ0FBQyxRQUFRLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUM3QyxDQUFDLENBQUMsQ0FBQztJQUNMLENBQUM7SUFFRCxlQUFlLENBQUMsS0FBSztRQUNuQixJQUFJLENBQUMsVUFBVSxDQUFDLFNBQVMsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNuQyxDQUFDOytHQXJDVSxzQkFBc0I7bUdBQXRCLHNCQUFzQiwyRENWbkMsNlJBV0E7O1NERGEsc0JBQXNCOzRGQUF0QixzQkFBc0I7a0JBTGxDLFNBQVM7K0JBQ0UscUJBQXFCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtJQ2VsbFJlbmRlcmVyQW5ndWxhckNvbXB9IGZyb20gJ2FnLWdyaWQtYW5ndWxhcic7XG5pbXBvcnQge0lDZWxsUmVuZGVyZXJQYXJhbXN9IGZyb20gJ2FnLWdyaWQtY29tbXVuaXR5JztcbmltcG9ydCBfIGZyb20gJ2xvZGFzaCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2FwcC10YWJsZS1jZWxsLW1lbnUnLFxuICB0ZW1wbGF0ZVVybDogJy4vdGFibGUtY2VsbC1tZW51LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vdGFibGUtY2VsbC1tZW51LmNvbXBvbmVudC5zY3NzJ10sXG59KVxuZXhwb3J0IGNsYXNzIFRhYmxlQ2VsbE1lbnVDb21wb25lbnQgaW1wbGVtZW50cyBJQ2VsbFJlbmRlcmVyQW5ndWxhckNvbXAge1xuICBpdGVtOiBhbnkgPSB7XG4gICAgc2VsZWN0ZWQ6IGZhbHNlLFxuICAgIGlkOiAnJyxcbiAgICBuYW1lOiAnJyxcbiAgICBhY3Rpb25MaXN0OiBbXSxcbiAgfTtcbiAgY2VsbFBhcmFtcztcbiAgb3BlbiA9IGZhbHNlO1xuXG4gIGdldCBlbmFibGVDZWxsTWVudSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gISghdGhpcy5pdGVtIHx8ICF0aGlzLml0ZW0uYWN0aW9uTGlzdCB8fCB0aGlzLml0ZW0uYWN0aW9uTGlzdC5sZW5ndGggPT09IDApO1xuXG4gIH1cblxuICBhZ0luaXQoY2VsbFBhcmFtczogSUNlbGxSZW5kZXJlclBhcmFtcyk6IHZvaWQge1xuICAgIHRoaXMuY2VsbFBhcmFtcyA9IGNlbGxQYXJhbXM7XG4gICAgdGhpcy5pdGVtID0gXy5nZXQoY2VsbFBhcmFtcywgJ2RhdGEnKTtcbiAgfVxuXG4gIHJlZnJlc2goY2VsbFBhcmFtczogSUNlbGxSZW5kZXJlclBhcmFtcyk6IGJvb2xlYW4ge1xuICAgIHRoaXMuY2VsbFBhcmFtcyA9IGNlbGxQYXJhbXM7XG4gICAgdGhpcy5pdGVtID0gXy5nZXQoY2VsbFBhcmFtcywgJ2RhdGEnKTtcbiAgICByZXR1cm4gdHJ1ZTtcbiAgfVxuXG4gIHRvZ2dsZU1lbnUoZXZlbnQpOiB2b2lkIHtcbiAgICBpZiAoIXRoaXMuY2VsbFBhcmFtcy5vcGVuTWVudSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICBfLmRlZmVyKCgpID0+IHtcbiAgICAgIHRoaXMuY2VsbFBhcmFtcy5vcGVuTWVudShldmVudCwgdGhpcy5pdGVtKTtcbiAgICB9KTtcbiAgfVxuXG4gIGNsb3NlQWN0aW9uTWVudShldmVudCk6IHZvaWQge1xuICAgIHRoaXMuY2VsbFBhcmFtcy5jbG9zZU1lbnUoZXZlbnQpO1xuICB9XG59XG4iLCI8ZGl2IChjbGlja091dHNpZGUpPVwiY2xvc2VBY3Rpb25NZW51KCRldmVudClcIiBjbGFzcz1cImNlbGwtbWVudS1jb250YWluZXJcIj5cbiAgPGRpdlxuICAgIChjbGljayk9XCJ0b2dnbGVNZW51KCRldmVudClcIlxuICAgICpuZ0lmPVwiZW5hYmxlQ2VsbE1lbnVcIlxuICAgIGF0dHIubmFtZT1cIlJvd0RvdHNfe3sgaXRlbS5uYW1lIH19XCJcbiAgICBjbGFzcz1cImRvdHNcIlxuICAgIGlkPVwiUm93RG90c197eyBpdGVtLmlkIH19XCJcbiAgPlxuICAgIC4uLlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19