@naniteninja/dashboard-components-lib 1.0.0

package/src/lib/shared-styles/common/lists.scss

@@ -0,0 +1,91 @@
+.list-panel {
+    border: none;
+    z-index: 99999;
+    background: var(--ion-background-color) !important;
+    color: var(--ion-text-color-secondary) !important;
+    box-shadow: var(
+      --list-panel-shadow,
+      0 2px 4px -1px rgba(0, 0, 0, 0.2),
+      0 4px 5px 0 rgba(0, 0, 0, 0.14),
+      0 1px 10px 0 rgba(0, 0, 0, 0.12)
+    ) !important;
+}
+
+.list-panel-item-active{
+    background-color: #fe3c72;
+    color: #fff !important
+}
+
+.list-panel-item {
+    font-size: var(--input-font-size, 14px);
+    font-family: var(--font-family, 'Gilroy-Regular', serif);
+    color: var(--ion-text-color-secondary, rgba(255, 255, 255, .5)) !important;
+    cursor: pointer;
+    border: none;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: 30px;
+    text-align: left;
+    padding-top: 0;
+    padding-bottom: 0;
+}
+
+
+
+//------- primeng dropdown list ----------
+.p-dropdown-panel {
+  @extend .list-panel;
+}
+
+.p-dropdown .p-dropdown-label, .p-dropdown-item {
+  @extend .list-panel-item;
+  &.p-highlight {
+    @extend.list-panel-item-active;
+  }
+}
+
+.p-dropdown-item:hover {
+  @extend.list-panel-item-active;
+}
+
+.p-dropdown .p-dropdown-label {
+  font-size: var(--input-font-size, 16px) !important;
+  color: var(--input-font-color, rgba(255, 255, 255, 0.87)) !important;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  padding-left: 7px;
+}
+
+//------- customized google geo auto complete list ----------
+.pac-container {
+  @extend .list-panel;
+  &:after {
+    background-image: none !important;
+    height: 0;
+  }
+
+  .pac-item,
+  .pac-item .pac-item-query {
+    @extend .list-panel-item;
+    &:hover {
+      @extend.list-panel-item-active;
+    }
+  }
+
+  .pac-item:hover {
+      @extend.list-panel-item-active;
+      .pac-item-query, .pac-item-query.pac-matched {
+        @extend.list-panel-item-active;
+      }
+  }
+
+  .pac-item-selected {
+    @extend.list-panel-item-active;
+    .pac-icon {
+      background-position: -1px -161px;
+    }
+  }
+
+}

package/src/lib/shared-styles/common/login.scss

@@ -0,0 +1,32 @@
+lib-login-screen {
+  .input-toggle-container {
+    max-width: none !important;
+  }
+
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus {
+    background-color: transparent;
+  }
+
+  .primary-link {
+    text-decoration: none;
+    color: var(--cyrano-pink-shade-1, #fe3c72);
+    text-shadow: 0 0 10px var(--cyrano-pink-shade-1, #fe3c72);
+    font-weight: 600;
+    border: 0;
+  }
+
+  lib-primary-btn,
+  lib-secondary-btn {
+    lib-base-btn {
+      width: 180px;
+      @media (max-width: 568px) {
+        width: 130px;
+      }
+    }
+  }
+}

package/src/lib/shared-styles/common/maps.scss

@@ -0,0 +1,10 @@
+google-map {
+  .map-container {
+    height: 100% !important;
+    border-radius: 10px !important;
+
+    & > div {
+      background: unset !important;
+    }
+  }
+}

package/src/lib/shared-styles/common/matcher-dash.scss

@@ -0,0 +1,49 @@
+.custom-bubble-status {
+  $fontSize: clamp(0px, 3.2dvw, 15px);
+
+  lib-base-btn {
+    --lib-bubble-btn-diameter: calc(#{$fontSize} * 1.78);
+    --font-size-title: calc(#{$fontSize} * 0.45);
+    --font-size-subtitle: calc(#{$fontSize} * 0.35);
+
+    .lib-button-component {
+      font-size: clamp(0px, 3.2dvw, 15px);
+
+      button .text .btn-text {
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+
+        .title {
+          color: white;
+        }
+
+        .subtitle {
+          text-overflow: inherit !important;
+          overflow: visible !important;
+          color: #939195;
+        }
+      }
+    }
+  }
+}
+
+.progress_view {
+  .circle-progress-suggestion {
+    .circle {
+      background: none;
+    }
+    lib-d3-circle {
+      .d3-circle {
+        max-width: var(--max-diameter);
+        max-height: var(--max-diameter);
+      }
+    }
+  }
+}
+
+.spider-chart___active {
+  .d3-container {
+    min-height: 433px !important;
+  }
+}

package/src/lib/shared-styles/common/modal_styles.scss

@@ -0,0 +1,32 @@
+// Add figma properties to cropper square dots to make them circular
+.ngx-ic-square {
+  display: inline-block !important;
+  background: rgba(255, 0, 0, 0.5) !important;
+  width: 9.26px !important;
+  height: 9.26px !important;
+  border: 0.92px solid rgba(205, 202, 202, 1) !important;
+  border-radius: 6.56px !important;
+  box-sizing: content-box !important;
+  box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
+}
+.ngx-ic-resize.ngx-ic-top {
+  top: -12.5px !important;
+  left: calc(50% - 12px) !important;
+}
+.ngx-ic-resize.ngx-ic-right {
+  top: calc(50% - 12px) !important;
+  right: -13px !important;
+}
+.ngx-ic-resize.ngx-ic-bottom {
+  bottom: -13px !important;
+  left: calc(50% - 12px) !important;
+}
+.ngx-ic-resize.ngx-ic-left {
+  top: calc(50% - 12px) !important;
+  left: -13.5px !important;
+}
+.lib-popup-modal.message-modal-container {
+  .popover-container {
+    padding: 0px !important;
+  }
+}

package/src/lib/shared-styles/common/notifications-list.scss

@@ -0,0 +1,9 @@
+lib-notifications-list {
+  .notifications {
+    .notification-text {
+      span {
+        font-family: 'Gilroy-Bold', serif;
+      }
+    }
+  }
+}

package/src/lib/shared-styles/common/overrides.scss

@@ -0,0 +1,6 @@
+* {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}

package/src/lib/shared-styles/common/pulse.scss

@@ -0,0 +1,26 @@
+.pulse {
+  overflow: visible !important;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0; /* covers the host element */
+    border-radius: 50%;
+    animation: pulse-animation 2s infinite;
+  }
+}
+
+@keyframes pulse-animation {
+  0% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 #fe3c73e3;
+  }
+  70% {
+    transform: scale(1);
+    box-shadow: 0 0 0 10px #fe3c7300;
+  }
+  100% {
+    transform: scale(0.95);
+    box-shadow: 0 0 0 0 #fe3c7300;
+  }
+}

package/src/lib/shared-styles/common/swiper.scss

@@ -0,0 +1,5 @@
+.thumb-swiper {
+  swiper-slide {
+    width: auto !important;
+  }
+}

package/src/lib/shared-styles/common/tab-menu.scss

@@ -0,0 +1,74 @@
+.p-tabmenu .p-tabmenu-nav {
+  background: transparent;
+  border: 0;
+}
+.p-tabmenu .p-tabmenu-nav .p-menuitem-badge {
+  background: #9fa8da;
+  color: #121212;
+  font-size: 0.75rem;
+  font-weight: 700;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  line-height: 1.5rem;
+  border-radius: 4px;
+  margin-left: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem {
+  margin-right: 0;
+}
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link {
+  border: 0;
+  border-color: transparent transparent rgba(255, 255, 255, 0.12) transparent;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  padding: 1rem 1.5rem;
+  font-weight: 500;
+  transition: none;
+  margin: 0 0 0 0;
+}
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link .p-menuitem-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem .p-menuitem-link:not(.p-disabled):focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+}
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem:not(.p-highlight):not(.p-disabled):hover .p-menuitem-link {
+  background: rgba(159, 168, 218, 0.04);
+  border-color: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.6);
+}
+.p-tabmenu .p-tabmenu-nav .p-tabmenuitem.p-highlight .p-menuitem-link {
+  background: transparent;
+  color: #9fa8da;
+  border-bottom: 1px solid var(--cyrano-pink-shade-1);
+}
+.p-tabmenu .p-tabmenu-left-icon {
+  margin-right: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-right-icon {
+  margin-left: 0.5rem;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link {
+  background: transparent;
+  color: #9fa8da;
+  width: 3rem;
+  box-shadow:
+    0 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0 2px 2px 0 rgba(0, 0, 0, 0.14),
+    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 0;
+  display: none;
+}
+.p-tabmenu .p-tabmenu-nav-btn.p-link:focus {
+  outline: 0 none;
+  outline-offset: 0;
+  box-shadow: inset none;
+}
+
+.cdk-overlay-container {
+  z-index: 30000;
+}

package/src/lib/shared-styles/common/theme.scss

@@ -0,0 +1,55 @@
+:root {
+  --border: 1px solid rgba(255, 255, 255, 0.25);
+  --ion-text-color-secondary: rgba(255, 255, 255, 0.5);
+  --ion-text-color: #fff;
+  --input-font-color: rgba(255, 255, 255, 0.5);
+  --ion-background-color: #29252d;
+  --primary-background: linear-gradient(191.18deg, #27242c 61.33%, #0c0b0e 101.43%);
+  --box-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, 0.65), -5px -5px 16px -3px rgba(203, 199, 209, 0.25);
+  --input-box-shadow: inset 17px 22px 20px 2.5px rgba(17, 16, 20, 0.7), inset -2px -2px 8px rgba(203, 199, 209, 0.5);
+  --footer-backgound: linear-gradient(190deg, #27242c 0.54%, #0c0b0e 92.09%);
+  --footer-tab-label: linear-gradient(94.44deg, #fe3c72 1.26%, #e15561 100%);
+  --button-background: #27242c;
+  --footer-add-btn-box-shadow1: 12.1px 11px 29.7px 2.75px rgb(17 16 20 / 65%), -5.5px -5.5px 17.6px -4.4px rgb(203 199 209 / 25%);
+  --footer-add-btn-box-shadow2: inset 12px 11px 29.7px 2.75px rgb(17 16 20 / 65%), inset -5.5px -5.5px 17.6px -4.4px rgb(203 199 209 / 25%);
+  --header-button-shadow: 11px 10px 27px 2.5px rgba(17, 16, 20, 0.65), -5px -5px 16px -3px rgba(203, 199, 209, 0.25);
+  --fab-backdrop: linear-gradient(191.18deg, #545454 61.33%, #666666 101.43%);
+  --fab-text-color: #27242c;
+  --fab-mins-color: rgba(0, 0, 0, 0.5);
+  --faded-background: linear-gradient(180deg, transparent, #27242cd1, #141316f2);
+  --cyrano-pink-shade-1: #fe3c72;
+  --cyrano-pink-shade-2: #e15561;
+  --text-highlight-color: #f7f5dd;
+  --focus-indicator: #ffb5e9;
+  --box-shadow-2: -2px -2px 10px rgba(255, 255, 255, 0.25), 4px 4px 8px rgba(0, 0, 0, 0.25);
+  --cyrano-dark-color: #28252d;
+  --cyrano-milky-white: #f7f5dd;
+  --cyrano-maps-background: linear-gradient(180deg, #3a3e45 0%, #1c2028 100%);
+  --cyrano-maps-shadow-back: 1.7px 1.7px 3.46667px #0d0a0e, -1.7px -1.7px 3.46667px #272129;
+  --cyrano-solid-no-transparency: rgba(0, 0, 0, 1);
+  --border-fading-edges: linear-gradient(to right, rgba(0, 0, 0, 0), #d9d9d9 50%, rgba(0, 0, 0, 0));
+  --mat-option-selected-state-label-text-color: #fff !important;
+  --mat-minimal-pseudo-checkbox-selected-checkmark-color: var(--cyrano-pink-shade-1, #fe3c72);
+  --mat-autocomplete-background-color: var(--cyrano-dark-color);
+  --font-family: 'Gilroy-Regular', serif !important;
+  --border-radius: 100px !important;
+  --mat-select-focused-arrow-color: var(--focus-indicator);
+  --mdc-filled-text-field-focus-active-indicator-color: var(--focus-indicator);
+  --mdc-filled-text-field-caret-color: var(--focus-indicator);
+  font-family: var(--font-family);
+
+  // error gradient
+  --primary-toaster-transparent-layer: radial-gradient(#fe3c72, #fff0 55%);
+  --primary-toaster-glow-layer: radial-gradient(#f7bdde, #fff0 55%);
+  --primary-toaster-error-background: linear-gradient(50.44deg, #784b5f 1%, #3a3541 20%);
+  --primary-toaster-error-border: linear-gradient(160.44deg, #ce769e 1%, #6d3c51 20%, #736980 50%, #332e39 80%);
+  // success gradient
+  --primary-toaster-success-background: linear-gradient(94.44deg, #509462 1%, #3a3541 20%);
+  --primary-toaster-success-border: linear-gradient(160.44deg, #80d59d 1%, #478857 20%, #736980 50%, #332e39 80%);
+  // warning gradient
+  --primary-toaster-warning-background: linear-gradient(94.44deg, #8e9153 1%, #3a3541 20%);
+  --primary-toaster-warning-border: linear-gradient(160.44deg, #ddde8c 1%, #898d4f 20%, #736980 50%, #332e39 80%);
+  // info gradient
+  --primary-toaster-info-background: linear-gradient(94.44deg, #574a91 1%, #3a3541 20%);
+  --primary-toaster-info-border: linear-gradient(160.44deg, #8a75da 1%, #574e96 20%, #736980 50%, #332e39 80%);
+}

package/src/lib/shared-styles/common/typography.scss

@@ -0,0 +1,121 @@
+/* Text styles */
+.f-calistoga {
+  font-family: 'Calistoga', serif;
+  font-style: normal;
+}
+
+.f-gilroy-medium {
+  font-family: 'Gilroy-Medium', serif;
+}
+
+.f-gilroy-semibold {
+  font-family: 'Gilroy-SemiBold', serif;
+}
+
+.f-gilroy-regular {
+  font-family: 'Gilroy-Regular', serif;
+}
+
+/* font sizes */
+.f-size-34 {
+  font-size: 2.125rem;
+}
+
+.f-3xl {
+  font-size: 28px;
+}
+
+.f-2xl {
+  font-size: 24px;
+}
+
+.f-xl {
+  font-size: 18px;
+}
+
+.f-lg {
+  font-size: 16px;
+}
+
+.f-md {
+  font-size: 14px;
+}
+
+.f-sm {
+  font-size: 12px;
+}
+
+.f-xs {
+  font-size: 10px;
+}
+
+/* colors */
+.f-white {
+  color: var(--ion-text-color);
+}
+
+.f-dark {
+  color: var(--ion-text-color-secondary);
+}
+
+.f-gray {
+  color: var(--ion-text-color);
+  opacity: 0.6;
+}
+
+.f-light-gray {
+  color: var(--ion-text-color);
+  opacity: 0.7;
+}
+
+.f-accent {
+  color: var(--text-highlight-color);
+}
+
+/* Font heights */
+.h-160 {
+  line-height: 160%;
+}
+
+.h-100 {
+  line-height: 100%;
+}
+
+.h-110 {
+  line-height: 110%;
+}
+
+.h-150 {
+  line-height: 150%;
+}
+
+.h-180 {
+  line-height: 180%;
+}
+
+/* font weights */
+.f-w-400 {
+  font-weight: 400;
+}
+
+.f-w-500 {
+  font-weight: 500;
+}
+
+.f-w-600 {
+  font-weight: 600;
+}
+
+.f-w-700 {
+  font-weight: 700;
+}
+
+h1,
+h2,
+h3,
+h5,
+h5,
+h6,
+p {
+  margin: 0;
+}

package/src/lib/shared-styles/common/user-menu.scss

@@ -0,0 +1,129 @@
+.user-menu-overlay + .cdk-overlay-connected-position-bounding-box {
+  .mat-mdc-menu-panel.lib-btn-menu-panel .mat-mdc-menu-content:not(:empty) {
+    padding-top: 8px !important;
+    padding-bottom: 8px !important;
+    min-width: 280px !important;
+  }
+  .mat-mdc-menu-panel button.mat-mdc-menu-item {
+    height: auto !important;
+  }
+  .mat-mdc-menu-panel.lib-btn-menu-panel {
+    .user-menu-item {
+      min-height: 2.08rem !important;
+      --mat-menu-item-label-text-size: 1rem;
+      --lib-menu--button-padding: 3px 2px 0px 4px;
+      .basic-user-menu-template {
+        display: flex;
+        flex-direction: column;
+        .body-template {
+          display: flex;
+          align-items: center;
+          gap: 9px;
+          padding-right: 18px;
+          span {
+            color: #fe3c72;
+            font-weight: bold;
+          }
+          .notifications-icon {
+            position: relative;
+            .notification-alert {
+              position: absolute;
+              top: 4px;
+              right: -1px;
+              width: 6px;
+              height: 6px;
+              border: 0.4px solid rgba(255, 255, 255, 0.2);
+              border-radius: 50%;
+              background: #fe3c72;
+              box-shadow: 0 0 3px 1px #e15561;
+            }
+          }
+        }
+        .notifications-container {
+          overflow-y: scroll;
+          max-height: 8px;
+          opacity: 1;
+          transition: all 500ms ease;
+          direction: ltr !important;
+          &::-webkit-scrollbar-track {
+            height: 90% !important;
+            background: transparent !important;
+          }
+          &::-webkit-scrollbar-thumb {
+            background-color: transparent;
+            border: none;
+          }
+          .more-notifications {
+            width: 100%;
+            background: rgba(0, 0, 0, 0.203);
+            border-radius: 10px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 20px;
+            font-size: 8px;
+            margin-top: 8px;
+          }
+          lib-notifications-list {
+            display: flex;
+            width: 100%;
+          }
+          .hideNotificationsLoader {
+            opacity: 0;
+            height: 0px !important;
+            overflow: auto !important;
+          }
+          .showNotificationsLoader {
+            opacity: 1;
+          }
+        }
+        .notificationsOpened {
+          max-height: min(300px, 45vh);
+          -webkit-transition: all 1s ease !important;
+          -moz-transition: all 1s ease !important;
+          -o-transition: all 1s ease !important;
+          transition: all 1s ease !important;
+          &::-webkit-scrollbar-thumb {
+            background-color: inherit;
+            border: inherit;
+          }
+        }
+
+        .notificationsBase {
+          overflow-y: scroll;
+          opacity: 0;
+          &::-webkit-scrollbar-thumb {
+            background-color: transparent;
+            border: none;
+          }
+        }
+
+        .moreNotifications {
+          overflow-y: scroll;
+          &::-webkit-scrollbar-thumb {
+            background-color: #fe3b72 !important;
+            border: 3px solid black !important;
+          }
+        }
+      }
+    }
+  }
+
+  .user-menu-item + .lib-btn-menu-panel-separator {
+    background: linear-gradient(90deg, rgba(1, 206, 194, 0) 0%, rgba(247, 245, 221, 0.2) 50%, rgba(9, 217, 248, 0) 100%) !important;
+    max-width: 132px;
+    margin-left: auto;
+  }
+}
+
+#user-menu-btn {
+  lib-base-btn {
+    .lib-button-component {
+      > button {
+        width: 35px !important;
+        height: 35px !important;
+        border: none !important;
+      }
+    }
+  }
+}

package/src/lib/shared-styles/fonts/calistoga.font.scss

@@ -0,0 +1,6 @@
+@font-face {
+  font-family: 'Calistoga';
+  src: url('../../../assets/fonts/calistoga/Calistoga-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}