ng-zenduit 1.0.0

package/styles/action-menu.scss

@@ -0,0 +1,127 @@
+@mixin action-menu-container() {
+  position: absolute;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.03), 0px 4px 5px rgba(0, 0, 0, 0.24), 0px 1px 10px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  z-index: 10;
+  overflow: hidden;
+}
+
+@mixin action-menu-item() {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  background: #FFFFFF;
+  color: #4F4F4F;
+  text-decoration: none;
+  user-select: none;
+
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+
+  &:hover,
+  &:focus-within {
+    outline: none;
+    text-decoration: none;
+    color: #4F4F4F;
+    background: #F4F9FD;
+  }
+}
+
+.action-item {
+  @include action-menu-item();
+  padding: 8px 16px;
+
+  &.active {
+    background: #F4F9FD;
+
+    &:hover,
+    &:focus {
+      background: #F4F9FD;
+    }
+  }
+
+  span {
+    word-break: break-all;
+
+    &.action-item-truncate {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      word-break: unset;
+    }
+  }
+}
+
+.action-item-checkbox {
+  @include action-menu-item();
+  padding: 0 16px;
+
+  zen-checkbox {
+    width: 100%;
+
+    .checkbox-component {
+      padding: 8px 0;
+    }
+  }
+}
+
+.action-item-radio {
+  @include action-menu-item();
+  padding: 0 16px;
+
+  &.active {
+    background: #F4F9FD;
+
+    zen-radio {
+      .radio-component {
+        color: #4F4F4F;
+      }  
+    }
+  }
+
+  zen-radio {
+    width: 100%;
+
+    .radio-component {
+      padding: 8px 0;
+
+      .radio-input + label {
+        padding: 0 0 0 28px !important;
+      }
+    }
+  }
+}
+
+.action-menu {
+  @include action-menu-container();
+
+  &-header {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: 16px;
+    border-bottom: 1px solid #ECECED;
+
+    .title {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+
+  &-body {
+    padding: 8px 0;
+  }
+
+  &-footer {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 16px;
+    border-top: 1px solid #ECECED;
+  }
+}

package/styles/all.scss

@@ -0,0 +1,11 @@
+@import "./extenal.scss";
+@import "./colors.scss";
+@import "./button.scss";
+@import "./action-menu.scss";
+@import "./common-form.scss";
+@import "./table.scss";
+@import "./page-layout.scss";
+@import "./ghost.scss";
+@import "./global-restyle.scss";
+@import "./snackbar.scss";
+

package/styles/button.scss

@@ -0,0 +1,188 @@
+@mixin button() {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 40px;
+  gap: 5px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  padding: 0 24px;
+  border-radius: 2px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  border: none;
+  transition: 0.1s;
+  cursor: pointer;
+
+  .mat-icon {
+    font-size: 20px;
+  }
+
+  &.button-small {
+    height: 32px;
+    padding: 0 16px;
+  }
+
+  &.button-icon {
+    padding: 0 10px;
+
+    &.button-small {
+      padding: 0 6px;
+    }
+  }
+
+  &.full-width {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
+.button-basic {
+  @include button();
+  color: #333333;
+  background: $color-white-primary;
+
+  &:hover {
+    background: $color-primary-hover;
+  }
+
+  &:focus {
+    outline: none;
+    color: $color-primary;
+    background: $color-blue-tint-1;
+  }
+
+  &:disabled {
+    color: #d6d6d6;
+    background: $color-white-primary;
+    cursor: not-allowed;
+  }
+
+  // this is for toolbox button active state
+  &.active {
+    color: $color-primary;
+    background: $color-blue-tint-1;
+  }
+}
+
+.button-stroked {
+  @include button();
+  color: $color-grey-shade-2;
+  background: $color-white-primary;
+  border: 1px solid $color-white-tint-1;
+  box-sizing: border-box;
+
+  &:hover {
+    background: $color-white-sidemenu;
+    border-color: $color-white-tint-4;
+  }
+
+  &:focus {
+    outline: none;
+    color: $color-blue-primary;
+    border-color: $color-blue-primary;
+    background: $color-blue-tint-1;
+    box-shadow: 0 0 2px 2px rgba(33, 136, 217, 0.3);
+  }
+
+  &:disabled {
+    color: #d6d6d6;
+    border-color: #f2f2f3;
+    background: $color-white-primary;
+    cursor: not-allowed;
+  }
+}
+
+.button-flat {
+  @include button();
+  color: $color-white-primary;
+  background: $color-primary;
+
+  &:hover {
+    background: $color-blue-shade-1;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 2px 2px rgba(33, 136, 217, 0.3);
+  }
+
+  &:disabled {
+    background: $color-blue-tint-4;
+    cursor: not-allowed;
+  }
+}
+
+.button-alert {
+    @include button();
+    color: $color-white-primary;
+    background: $color-error-primary;
+  
+    &:hover {
+      background: $color-error-shade;
+    }
+  
+    &:focus {
+      outline: none;
+      box-shadow: 0px 4px 10px 0px #FFE0DE;
+    }
+  
+    &:disabled {
+      background: $color-error-tint;
+      cursor: not-allowed;
+    }
+  }
+
+//  this button was completely restyled by designer
+.button-basic-new {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 25px;
+  gap: 4px;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 130%;
+  padding: 0 2px;
+  border-radius: 2px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  border: none;
+  transition: 0.1s;
+  cursor: pointer;
+  color: $color-grey-shade-2;
+  background: $color-white-primary;
+
+  .mat-icon {
+    font-size: 20px;
+  }
+
+  &.button-small {
+    height: 22px;
+  }
+
+  &.full-width {
+    width: 100%;
+    justify-content: center;
+  }
+
+  &:hover {
+    color: $color-grey-shade-4;
+  }
+
+  &:focus {
+    outline: none;
+    color: $color-primary;
+  }
+
+  &:disabled {
+    color: $color-white-tint-3;
+    cursor: not-allowed;
+  }
+
+  // this is for toolbox button active state
+  &.active {
+    color: $color-primary;
+  }
+}

package/styles/colors.scss

@@ -0,0 +1,125 @@
+$color-primary: var(--color-primary, #2188d9);
+
+$color-primary-hover: var(--color-primary-hover, #f7f7f8);
+
+$color-blue-primary: var(--color-blue-primary, #2188d9);
+
+/* Blue/Tint_01 */
+$color-blue-tint-1: var(--color-blue-tint-1,#f4f9fd);
+
+/* Blue/Tint_02 */
+$color-blue-tint-2: var(--color-blue-tint-2,#e9f3fb);
+
+/* Blue/Tint_03 */
+$color-blue-tint-3: var(--color-blue-tint-3,#def0ff);
+
+/* Blue/Tint_04 */
+$color-blue-tint-4: var(--color-blue-tint-4,#cfe9fd);
+
+/* Blue/Tint_05 */
+$color-blue-tint-5: var(--color-blue-tint-5,#b7dffe);
+
+/* Blue/Tint_06 */
+$color-blue-tint-6: var(--color-blue-tint-6,#99d2ff);
+
+/* Blue/Tint_07 */
+$color-blue-tint-7: var(--color-blue-tint-7,#5cb3f8);
+
+/* Blue/Shade_01 */
+$color-blue-shade-1: var(--color-blue-shade-1,#0d74c5);
+
+/* Blue/Shade_02 */
+$color-blue-shade-2: var(--color-blue-shade-2,#16598d);
+
+/* Blue/Shade_03 */
+$color-blue-shade-3: var(--color-blue-shade-3,#074474);
+
+/* Blue/Shade_04 */
+$color-blue-shade-4: var(--color-blue-shade-4,#00335a);
+
+/* Blue/Shade_05 */
+$color-blue-shade-5: var(--color-blue-shade-5,#001e35);
+
+/* Grayscale/Grey/Primary */
+$color-grey-primary: var(--color-grey-primary,#4f4f4f);
+
+/* Grayscale/Grey/2 */
+$color-grey-2: var(--color-grey-2,#d0d0d2);
+
+/* Grayscale/Grey/Shade_01 */
+$color-grey-shade-1: var(--color-grey-shade-1,#a0a0a0);
+
+/* Grayscale/Grey/Shade_02 */
+$color-grey-shade-2: var(--color-grey-shade-2,#828282);
+
+/* Grayscale/Grey/Shade_03 */
+$color-grey-shade-3: var(--color-grey-shade-3,#6d6c6c);
+
+/* Grayscale/Grey/Shade_04 */
+$color-grey-shade-4: var(--color-grey-shade-4,#5b5b5b);
+
+/* Grayscale/Grey/Shade_05 */
+$color-grey-shade-5: var(--color-grey-shade-5,#3a3a3a);
+
+/* Grayscale/Grey/Shade_06 */
+$color-grey-shade-6: var(--color-grey-shade-6,#262626);
+
+/* Grayscale/Grey/Shade_07 */
+$color-grey-shade-7: var(--color-grey-shade-7,#121212);
+
+/* Grayscale/White/Primary */
+$color-white-primary: var(--color-white-primary,#ffffff);
+
+// Grayscale/White/Tint_01
+$color-white-tint-1: var(--color-white-tint-1,#f2f2f2);
+// Grayscale/White/Tint_02
+$color-white-tint-2: var(--color-white-tint-2,#ececed);
+// Grayscale/White/Tint_04
+$color-white-tint-3: var(--color-white-tint-3,#e0e0e0);
+// Grayscale/White/Tint_04
+$color-white-tint-4: var(--color-white-tint-4,#d6d6d8);
+// Grayscale/White/Tint_05
+$color-white-tint-5: var(--color-white-tint-5,#cdcdcd);
+// Grayscale/White/Tint_06
+$color-white-tint-6: var(--color-white-tint-6,#bebebe);
+// Grayscale/White/Tint_07
+$color-white-tint-7: var(--color-white-tint-7,#a6a6a6);
+
+/* Grayscale/White/SideMenu */
+$color-white-sidemenu: var(--color-white-sidemenu,#fafafa);
+
+/* Success/Tint */
+$color-success-tint: var(--color-success-tint,#e2f8db);
+
+/* Success/Primary */
+$color-success-primary: var(--color-success-primary,#5cbb3a);
+
+/* Success/Shade */
+$color-success-shade: var(--color-success-shade,#328614);
+
+/* Error/Tint */
+$color-error-tint: var(--color-error-tint,#ffe6e3);
+
+/* Error/Primary */
+$color-error-primary: var(--color-error-primary,#dc3e33);
+
+/* Error/Shade */
+$color-error-shade: var(--color-error-shade,#972c25);
+
+/* Alert/Tint */
+$color-alert-tint: var(--color-alert-tint,#fff2de);
+
+/* Alert/Primary */
+$color-alert-primary: var(--color-alert-primary,#f1b10b);
+
+/* Alert/Shade */
+$color-alert-shade: var(--color-alert-shade,#c77916);
+
+/* Secondary/Tint */
+$color-secondary-tint: var(--color-secondary-tint,#c1fbff);
+
+/* Secondary/Primary */
+$color-secondary-primary: var(--color-secondary-primary,#00f0ff);
+
+/* Secondary/Shade */
+$color-secondary-shade: var(--color-secondary-shade,#00b0bb);

package/styles/common-form.scss

@@ -0,0 +1,159 @@
+.common-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .required {
+    &:after {
+      content: " *";
+      color: #d92c21;
+    }
+  }
+
+  .form-row {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    width: 100%;
+  }
+
+  .form-sub-header {
+    margin: 0;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    color: #060c1b;
+  }
+
+  .form-element {
+    width: 100%;
+    position: relative;
+
+    > label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+      transition: 0.3s;
+
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 130%;
+      color: #4f4f4f;
+    }
+
+    .error-message {
+      display: none;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 12px;
+      line-height: 130%;
+      align-items: center;
+      color: #d92c21;
+      padding-left: 20px;
+      height: 13px;
+      background-repeat: no-repeat;
+      background-size: 15px 13px;
+      margin-top: 3px;
+    }
+
+    &.error {
+      label {
+        color: #d92c21;
+      }
+
+      .material-input,
+      .zen-input,
+      .material-select,
+      .settings-multiselect {
+        border-color: #d92c21;
+      }
+
+      .error-message {
+        display: block;
+      }
+    }
+
+    &.country-code {
+      max-width: 140px;
+    }
+
+    &.toggle-slide {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+
+      label {
+        margin: 0;
+        font-weight: 400;
+        font-size: 16px;
+        line-height: 130%;
+        color: #060c1b;
+      }
+    }
+
+    &:hover {
+      label {
+        color: #333333;
+      }
+
+      .material-input,
+      .zen-input,
+      .app-select-toggle,
+      .material-select,
+      .dropdown-toggle {
+        border-color: #b8b9bc;
+      }
+    }
+
+    &:focus-within {
+      label {
+        color: $color-primary;
+      }
+
+      .material-input,
+      .zen-input,
+      .app-select-toggle,
+      .material-select,
+      .dropdown-toggle {
+        border-color: $color-primary;
+      }
+    }
+  }
+}
+
+.material-input,
+.zen-input {
+  width: 100%;
+
+  border: none;
+  outline: none;
+  border-bottom: 1px solid #d6d6d8;
+  padding-bottom: 8px;
+  transition: 0.3s;
+
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 24px;
+  color: #4f4f4f;
+
+  &::placeholder {
+    color: #bebebe;
+  }
+
+  &:focus {
+    caret-color: $color-primary;
+    border-color: $color-primary;
+  }
+
+  &[readonly],
+  &[disabled] {
+    cursor: not-allowed;
+    color: #b8b9bc;
+    border-color: #d0d0d2;
+    background: #ffffff;
+  }
+}

package/styles/extenal.scss

@@ -0,0 +1,2 @@
+@import url("https://fonts.googleapis.com/css?family=Roboto:wght@100;300;400;500;700;900&display=swap");
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Sharp|Material+Icons+Outlined&display=block");

package/styles/ghost.scss

@@ -0,0 +1,38 @@
+@keyframes ghost-lines-fast {
+  0% {
+    background-position: -100px;
+  }
+
+  40% {
+    background-position: 40vw;
+  }
+
+  100% {
+    background-position: 60vw;
+  }
+}
+
+@keyframes ghost-lines {
+  0% {
+    background-position: -200px 0;
+  }
+
+  100% {
+    background-position: calc(200px + 100%) 0;
+  }
+}
+
+.ghost-line {
+  background-color: #f8f7f7 !important;
+  margin: 10px;
+  background: 0 0/200px 100% no-repeat #f8f7f7;
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
+  animation: ghost-lines 2s infinite linear;
+}
+
+.ghost-bg {
+  background-color: #f8f7f7 !important;
+  background: 0 0/200px 100% no-repeat #f8f7f7;
+  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
+  animation: ghost-lines 2s infinite linear;
+}

package/styles/global-restyle.scss

@@ -0,0 +1,25 @@
+.pagination-component {
+  .app-select-toggle {
+    width: 35px !important;
+    border: none !important;
+    padding: 0 !important;
+
+    .selected-item {
+      line-height: 120% !important;
+      font-size: 12px !important;
+      color: #828282 !important;
+    }
+
+    .app-select-icon {
+      color: #828282 !important;
+      font-size: 16px !important;
+    }
+  }
+
+  .action-item {
+    justify-content: center !important;
+    font-size: 12px !important;
+    line-height: 120% !important;
+    padding: 8px !important;
+  }
+}