@flower-city-online/itinerary-lib 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flower-city-online/itinerary-lib",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "peerDependencies": {
     "@angular/animations": "^17.3.10",
     "@angular/cdk": "^17.3.10",

package/src/lib/_styles/_colors.scss

@@ -0,0 +1,69 @@
+$ns-blue: #45899b;
+$ns-orange: #d4863d;
+$ns-neutral-1: #333333;
+$ns-neutral-2: #666666;
+$ns-neutral-3: #868686;
+$ns-neutral-4: #a6a6a6;
+$ns-neutral-5: #cccccc;
+$ns-neutral-6: #dfe0e3;
+$ns-neutral-7: #eeeef0;
+$ns-neutral-8: #f4f6f7;
+$ns-error-primary: #c7472e;
+$ns-error-secondary: #f0dbd6;
+$ns-success-green: #599b4e;
+$ns-warn-orange: #f8a91d;
+$ns-teal: #10365a;
+
+$ns-dark-blue-800: #10365a;
+$ns-blue-900: #1350a4;
+$ns-grey-800: #464a4c;
+$ns-grey-900: #24282a;
+$ns-background-grey: #eff2f3;
+$ns-red-700: #d32f2f;
+$ns-orange-400: #f4a947;
+$ns-green-600: #2db231;
+$ns-blue-800: #1e6ec3;
+
+$background-color-1: #27242c;
+$background-color-10: #0c0b0e;
+$background-color-2: #cdd5d8;
+$background-color-3: #f5f5f5;
+$background-color: linear-gradient(
+  191.18deg,
+  $background-color-1 61.33%,
+  $background-color-10 101.43%
+);
+$background-color-4: #000000;
+$background-color-5: #28252d;
+$background-color-6: #ffb5e9;
+$background-color-7: #676767;
+$background-color-8: #dcdcdc;
+$background-color-9: #413f47;
+$background-color-11: #f7f5dd;
+$background-color-12: #403d46;
+$background-color-13: #3e3b44;
+
+$data-table-border: #212121;
+$cyrano-background: #28242d;
+$cyrano-primary: #e15561;
+
+$border-color-1: #b6b6b6;
+$border-color-2: #ffd7d7;
+
+$text-color-1: #0a0a0a;
+$text-color-2: #fe638e;
+$text-color-3: #ffffff;
+$text-color-4: #bdbdbd;
+$text-color-5: #94939b;
+$text-color-6: #939195;
+$text-color-7: #bbbabc;
+
+$scroll-color: #fe3c72;
+
+$box-shadow: #494949;
+$box-shadow-1: #323232;
+$box-shadow-2: #272a2c;
+$box-shadow-3: #151617;
+$box-shadow-4: #333333;
+$box-shadow-5: #cbc7d140;
+$box-shadow-6: #111014a6;

package/src/lib/_styles/component-global-styles/bottom-navigation.scss

@@ -0,0 +1,19 @@
+.active {
+  color: var(--secondary-color) !important;
+  opacity: 100% !important;
+}
+
+.lib-menu-bg-none {
+  --lib-list-button-padding: 10px !important;
+  --lib-button-container-background: transparent !important;
+  --lib-button-background: transparent !important;
+  --lib-button-border-radius: 0 !important;
+  --lib-button-border: 0 !important;
+  --box-shadow: none !important;
+}
+
+.lib-menu-bg-none button.mat-ripple {
+  background-color: black !important;
+  border-radius: 0 !important;
+  border: 0 !important;
+}

package/src/lib/_styles/component-global-styles/create-itinerary.scss

@@ -0,0 +1,16 @@
+.builder-add-btn lib-base-btn .mat-ripple .btn-text {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
+  flex-direction: row !important;
+  width: 100% !important;
+  color: var(--lib-secondary-button-font-color) !important;
+  text-shadow: var(--lib-secondary-button-text-shadow) !important;
+}
+
+.builder-add-btn .lib-button-container {
+  display: none !important;
+}
+.builder-add-btn .mat-ripple {
+  height: 60px !important;
+}

package/src/lib/_styles/component-global-styles/custom-menu.scss

@@ -0,0 +1,42 @@
+.lib-menu-custom-class .text {
+  padding: 0 !important;
+  font-size: 10px !important;
+}
+
+.mat-mdc-menu-item-text {
+  padding: 0 !important;
+  font-size: 14px !important;
+}
+
+.mat-mdc-menu-item-text img {
+  height: 15px !important;
+  width: 15px !important;
+  margin-top: 5px !important;
+  margin-right: 20px !important;
+}
+
+.mat-mdc-menu-item {
+  min-height: 35px !important;
+}
+
+.lib-menu-custom-class .btn-text {
+  margin-bottom: 10px;
+}
+
+.lib-menu-custom-class .mat-ripple {
+  background: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+.lib-menu-custom-class .lib-button-component {
+  background: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+}
+
+.lib-menu-custom-class .lib-button-container {
+  background: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+}

package/src/lib/_styles/component-global-styles/dashboard.scss

@@ -0,0 +1,5 @@
+@use "../../styles/colors" as *;
+
+// .customBody {
+//   background: $background-color-7 !important;
+// }

package/src/lib/_styles/component-global-styles/delete-itineraries.scss

@@ -0,0 +1,7 @@
+.check-box svg {
+  padding: 1.5px !important;
+}
+
+.mat-mdc-dialog-surface {
+  border-radius: 10px !important;
+}

package/src/lib/_styles/component-global-styles/filter-menu.scss

@@ -0,0 +1,40 @@
+@use "../../styles/colors" as *;
+
+.btn-selectable {
+  padding: 0px !important;
+  font-size: 11px !important;
+  margin-right: 12px !important;
+  position: relative;
+  box-shadow: -4.1px -4.1px 13.13px -2.46px $box-shadow-5;
+  background-color: $background-color-1 !important;
+  color: $text-color-3 !important;
+}
+
+.selectable-container {
+  padding: 0 !important;
+}
+
+.btn-selectable.selected {
+  background: linear-gradient(
+    94.44deg,
+    $scroll-color 1.26%,
+    $cyrano-primary 100%
+  );
+}
+
+.filter-btn .lib-button-component .mat-ripple {
+  background: $background-color-1 !important;
+  border: none !important;
+}
+
+.filter-btn .lib-button-component .lib-button-container {
+  display: none !important;
+}
+
+.button-native {
+  background: transparent !important;
+}
+
+.btn-selectable[_ngcontent-ng-c3164006478] {
+  padding: 0 !important;
+}

package/src/lib/_styles/component-global-styles/header.scss

@@ -0,0 +1,22 @@
+@use "../../styles/colors" as *;
+
+.header-back-btn .lib-button-component .mat-ripple {
+  background: $background-color-1 !important;
+  border: none !important;
+}
+
+.header-back-btn .lib-button-component .lib-button-container {
+  display: none !important;
+}
+
+.header-back-btn .lib-button-component {
+  border: none !important;
+}
+
+.header-back-btn .mat-ripple {
+  border: none !important;
+  background: $background-color-1;
+  box-shadow:
+    9.026px 8.205px 22.153px 2.051px rgba(17, 16, 20, 0.65),
+    -4.102px -4.102px 13.128px -2.462px rgba(203, 199, 209, 0.25) !important;
+}

package/src/lib/_styles/component-global-styles/navbar.scss

@@ -0,0 +1,47 @@
+.nav-top-search .search-field {
+  margin-top: 0 !important;
+}
+
+.container {
+  padding: 0 !important;
+}
+
+.nav-main-bar .menu-btn-image {
+  height: 26px !important;
+  width: 26px !important;
+}
+
+/*menu*/
+#mat-menu-panel-0
+  .mat-mdc-menu-panel.lib-btn-menu-panel
+  button.mat-mdc-menu-item
+  .mat-mdc-menu-item-text {
+  justify-content: flex-start !important;
+}
+// #mat-menu-panel-0 .mat-mdc-menu-item-text img {
+//   position: relative !important;
+//   right: -22px !important;
+// }
+
+.dashboard-menu .lib-button-container {
+  box-shadow: none !important;
+  background: none !important;
+}
+
+.dashboard-menu .lib-button-component {
+  height: 29px !important;
+  width: 29px !important;
+}
+
+.dashboard-menu .btn-text img {
+  height: 24px !important;
+  width: 24px !important;
+}
+
+.nav-top-search .search-field {
+  top: 0px !important;
+}
+
+.nav-top-search .search-field .container {
+  height: auto !important;
+}

package/src/lib/_styles/component-global-styles/search-bar.scss

@@ -0,0 +1,17 @@
+.search-field .container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 46px;
+  width: 100%;
+  margin: 0px;
+  position: relative;
+  padding: 6px;
+  min-width: 100%;
+}
+
+.container__search-bar__icon.container__search-bar__search-icon {
+  position: absolute;
+  right: 6%;
+  top: 39%;
+}

package/src/lib/_styles/component-global-styles/side-bar.scss

@@ -0,0 +1,28 @@
+.side-bar-heading-bar .mat-ripple {
+  box-shadow: none !important;
+}
+
+.side-bar-heading-bar .header-btn:last-child {
+  box-shadow: none !important;
+  margin-right: 10px !important;
+  margin-top: 5px !important;
+}
+
+.side-bar-heading-bar .lib-button-container {
+  box-shadow: none !important;
+}
+
+.filter-side-bar {
+  display: flex !important;
+  flex-direction: column-reverse !important;
+}
+
+.filter-side-bar .selectable-container {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center;
+}
+
+.filter-side-bar .btn-selectable {
+  height: 100% !important;
+}

package/src/lib/_styles/component-global-styles/tab-bar.scss

@@ -0,0 +1,21 @@
+@use "../../styles/colors" as *;
+
+.p-tabmenu-nav-content {
+  font-family: "Calistoga", cursive;
+  margin: 0px 0px !important;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.p-ripple.p-element.p-menuitem-link.p-menuitem-link-active {
+  border-width: 3px !important;
+}
+
+.p-menuitem-text {
+  color: rgb(255, 255, 255, 0.5) !important;
+}
+
+.p-menuitem-link-active .p-menuitem-text {
+  color: $text-color-3 !important;
+}

package/src/lib/_styles/fonts.scss

@@ -0,0 +1,2 @@
+$header-font: "Calistoga", cursive;
+$filter-font: Gilroy-Thin;

package/src/lib/_styles/media-queries.scss

@@ -0,0 +1,416 @@
+@use "../styles/colors" as *;
+
+@media (max-width: 380px) {
+  .min-screen-main {
+    padding: 0px !important;
+  }
+  .min-screen {
+    padding: 5px 10px !important;
+  }
+}
+
+@media (max-height: 720px) {
+  .h-screen {
+    padding-bottom: 60px;
+  }
+}
+
+@media (max-height: 720px) and (max-width: 380px) {
+  .h-screen {
+    padding-bottom: 60px !important;
+  }
+}
+
+@media (max-height: 720px) and (max-width: 380px) {
+  .h-screen {
+    padding-bottom: 60px !important;
+  }
+}
+
+@media (min-width: 320px) and (max-width: 379px) {
+  .h-screen {
+    padding-bottom: 100px !important;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .bottom-navigation {
+    padding: 8px 8px;
+  }
+}
+
+@media screen and (min-width: 500px) {
+  .custom-nav-bottom-modal {
+    background: none;
+    z-index: 20003;
+    pointer-events: auto;
+    box-shadow: none;
+    width: 500px !important;
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .bottom-navitem img {
+    height: 13px !important;
+    width: 13px !important;
+  }
+  .bottom-nav-item span {
+    font-size: 10px;
+    line-height: 12px;
+  }
+}
+
+@media screen and (max-width: 390px) {
+  .header-btn {
+    height: 27px !important;
+    width: 27px !important;
+  }
+  .header-btn img {
+    height: 13px !important;
+    width: 13px !important;
+  }
+  .header-main-bar {
+    padding-inline: 10px !important;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .p-tabmenu-nav-content ul {
+    font-size: 12px !important;
+  }
+}
+
+@media screen and (max-width: 1492px) {
+  .sub-nav {
+    gap: 100px;
+  }
+}
+
+@media screen and (max-width: 1282px) {
+  .sub-nav {
+    gap: 80px;
+  }
+}
+
+@media screen and (max-width: 1152px) {
+  .sub-nav {
+    gap: 50px;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .delete-modal p {
+    font-size: 10px;
+    padding: 0px 11px;
+  }
+  .check-box {
+    height: 13px !important;
+    width: 13px !important;
+    margin-top: -1px;
+  }
+
+  .check-box-feild {
+    margin-top: 20px !important;
+  }
+}
+
+@media (min-width: 960px) {
+  .btn-selectable {
+    margin: 7px !important;
+    margin-right: 7px !important;
+  }
+
+  .selectable-container {
+    padding: 0 14px !important;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .btn-selectable {
+    font-size: 10px !important;
+    margin-right: 7px !important;
+    position: relative;
+    box-shadow: -4.1px -4.1px 13.13px -2.46px $box-shadow-5;
+  }
+
+  .filter-btn {
+    height: 32px !important;
+    width: 32px !important;
+  }
+
+  .filter-btn img {
+    height: 14px !important;
+    width: 14px !important;
+  }
+}
+
+@media screen and (max-width: 320px) {
+  .btn-selectable {
+    margin: 2px !important;
+  }
+}
+
+@media (min-width: 320px) and (max-width: 327px) {
+  .btn-selectable {
+    margin: 2px !important;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .report-itineraies {
+    width: 280px;
+    padding: 0px 10px;
+  }
+
+  .radio-group {
+    font-size: 11px !important;
+  }
+}
+
+@media (max-width: 380px) {
+  .builder-add-btn {
+    width: 100% !important;
+    font-size: 14px !important;
+  }
+  .builder-add-btn img {
+    height: 13px;
+    width: 13px;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .content {
+    width: fit-content;
+  }
+  .content-text {
+    width: fit-content;
+  }
+  .content-text span {
+    font-size: 12px;
+  }
+  .content p {
+    font-size: 9px;
+    width: 100%;
+  }
+  .content-icon-last {
+    margin-left: 0px;
+  }
+}
+
+@media (max-width: 1500px) {
+  .grid-columns {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 1160px) {
+  .grid-columns {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+@media (max-width: 380px) {
+  .favourite-main-section,
+  .favouriteSubSection {
+    margin-top: 10% !important;
+  }
+  .favourite-sub-section div img {
+    height: 120px;
+    width: 120px;
+  }
+  .favourite-main-section h1 {
+    font-size: 20px;
+  }
+
+  .btn-style {
+    padding-inline: 20px;
+  }
+}
+@media (max-height: 630px) {
+  .favourite-main-section,
+  .favouriteSubSection {
+    margin-top: 5% !important;
+  }
+  .favourite-sub-section div img {
+    height: 120px;
+    width: 120px;
+  }
+  .favourite-main-section h1 {
+    font-size: 20px;
+  }
+  .btn-style {
+    padding-inline: 20px;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .main-btn {
+    width: 140px;
+    font-size: 16px !important;
+  }
+  .main-btn:last-child {
+    width: 168px;
+  }
+  .main-btn span img {
+    height: 14px !important;
+    width: 15px !important;
+  }
+  .main-btn span {
+    margin-top: 0px !important;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .search-history-text {
+    font-size: 12px;
+  }
+
+  .search-history-bar span img:first-child {
+    height: 11px;
+    width: 10px;
+  }
+  .search-history-bar span img:last-child {
+    height: 11px;
+    width: 10px;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .search-chips {
+    font-size: 12px !important;
+    padding-inline: 8px !important;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .search-chips {
+    font-size: 12px !important;
+    padding-inline: 8px !important;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .search-bottom {
+    padding-top: 0%;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .clear-history-main {
+    width: 95px;
+    font-size: 12px !important;
+  }
+  .clear-history-main span img {
+    height: 13px;
+    width: 14px;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .sub-ccreen {
+    padding-inline: 15px;
+  }
+  .search-chips {
+    font-size: 10px !important;
+    padding-inline: 2px !important;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .title {
+    font-size: 15px !important;
+  }
+  .draft-header {
+    font-size: 10px !important;
+    left: 20px;
+  }
+  .bottom-icons {
+    height: 12px;
+    width: 13px;
+  }
+  .user-icon-text {
+    font-size: 13px;
+  }
+  .bottom-tags {
+    font-size: 10px;
+    font-family: Gilroy-Thin;
+  }
+  .draft-description {
+    font-size: 10px;
+  }
+}
+
+@media screen and (max-width: 390px) {
+  h4 {
+    font-size: 12px !important;
+  }
+  .archive-css h4 {
+    font-size: 10px !important;
+  }
+  .archive-css img {
+    margin-top: 4px !important;
+  }
+  .icon-button p {
+    font-size: 12px !important;
+  }
+  .icon-button img {
+    height: 12px !important;
+    width: 12px !important;
+    margin-top: 1px;
+  }
+}
+
+@media screen and (max-width: 380px) {
+  .title {
+    font-size: 145x !important;
+  }
+  .draft-header {
+    font-size: 10px !important;
+    left: 20px;
+  }
+  .bottom-icons {
+    height: 12px;
+    width: 13px;
+  }
+  .user-icon-text {
+    font-size: 13px;
+  }
+  .bottom-tags {
+    font-size: 10px;
+    font-family: Gilroy-Thin;
+  }
+  .draft-description {
+    font-size: 10px;
+  }
+}
+
+@media screen and (max-width: 390px) {
+  .search-field {
+    margin-top: 10px !important;
+  }
+  .container {
+    margin: 0px 5px;
+    position: relative;
+    padding: 0px;
+  }
+
+  .container__search-bar__input {
+    font-size: 12px !important;
+  }
+
+  .container__search-bar__input::placeholder {
+    font-size: 12px !important;
+    padding-bottom: 2px;
+  }
+
+  .container__search-bar__icon.container__search-bar__search-icon {
+    position: absolute;
+    right: 6%;
+    height: 12px !important;
+    width: 12px !important;
+  }
+}

package/src/lib/_styles/modal.scss

@@ -0,0 +1,186 @@
+// @use "src/styles/colors" as *;
+
+// .modal-tab-shadow {
+//   box-shadow: 9.026px 8.205px 22.153px 2.051px rgba(17, 16, 20, 0.65);
+// }
+
+// .parent-class-for-modal {
+//   width: 100%;
+//   padding: 0px 20px;
+//   margin-top: 15px;
+//   font-family: "Calistoga";
+//   border-radius: 10px;
+// }
+
+// .lib-bottom-modal .modal-wrapper {
+//   background: transparent !important;
+//   box-shadow: none !important;
+// }
+
+// #bottom-modal-content-ref {
+//   background: transparent;
+//   margin-top: 0px !important;
+// }
+
+// .lib-bottom-modal-loader {
+//   display: none !important;
+// }
+
+// .lib-bottom-modal-header {
+//   display: none !important;
+// }
+
+// .lib-bottom-modal-header.ng-star-inserted {
+//   display: none;
+// }
+
+// .modal-handle {
+//   display: none !important;
+// }
+
+// .modal-wrapper.ion-overlay-wrapper {
+//   background: transparent !important;
+// }
+
+// .modal-handle {
+//   display: none !important;
+// }
+
+// ion-modal.lib-bottom-modal[_ngcontent-ng-c1153917535]::part(handle) {
+//   opacity: 0 !important;
+//   display: none !important;
+// }
+
+// .custom-nav-bottom-modal {
+//   height: 60px;
+//   margin-top: auto;
+//   position: absolute !important;
+//   z-index: 9999 !important;
+//   display: flex !important;
+//   box-shadow: var(
+//     --lib-popup-modal-shadow,
+//     5px 5px 95px 0px rgba(255, 255, 255, 0.32),
+//     -3px -3px 16px 0px rgba(255, 255, 255, 0.1)
+//   ) !important;
+//   border-radius: var(--lib-popup-modal-radius) !important;
+// }
+
+// .custom-nav-bottom-modal #bottomModalContentRef {
+//   height: 60px !important;
+//   max-width: 100% !important;
+//   padding-bottom: 0px;
+// }
+
+// .delete-modal {
+//   padding: 10px;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   flex-direction: column;
+// }
+
+// .delete-modal h1 {
+//   font-size: 15px;
+//   color: $text-color-3;
+//   font-family: "Calistoga";
+// }
+
+// .delete-modal p {
+//   font-size: 12px;
+//   color: $text-color-3;
+//   width: 250px;
+// }
+
+// .parent-class-for-modal {
+//   margin-top: 30px;
+// }
+
+// .custom-modal .modal-wrapper.ion-overlay-wrapper {
+//   background: transparent !important;
+//   box-shadow: none !important;
+// }
+
+// #ion-overlay-2.modal-wrapper {
+//   background: transparent !important;
+// }
+
+// .modal-wrapper.ion-overlay-wrapper {
+//   background: transparent !important;
+// }
+
+// .bottom-modal-items {
+//   margin-bottom: 20px;
+// }
+
+// .bottom-modal {
+//   font-family: Gilroy-Regular !important;
+//   font-size: 12px !important;
+// }
+
+// .delete-modal {
+//   padding: 10px;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+//   flex-direction: column;
+// }
+
+// .delete-modal h1 {
+//   font-size: 15px;
+//   color: $text-color-3;
+//   font-family: "Calistoga";
+// }
+
+// .delete-modal p {
+//   font-size: 13px;
+//   color: $text-color-3;
+//   width: 245px;
+// }
+
+// .parent-class-for-modal {
+//   margin-top: 40px;
+// }
+
+// .modal-bottom-bar {
+//   display: flex;
+//   justify-content: space-around;
+//   align-items: center;
+//   width: 100%;
+//   position: relative;
+// }
+
+// .modal-bottom-bar button:last-child {
+//   color: var(--secondary-color);
+// }
+
+// // Ng-deep removed from component styles
+
+// // create-itinerary.component.scss
+// .mat-mdc-dialog-surface {
+//   border-radius: 10px !important;
+// }
+
+// .mdc-label {
+//   padding: 5px 4px !important;
+//   font-size: 12px;
+// }
+
+// .input-label {
+//   top: 24px !important;
+// }
+
+// // create-itinerary-modal.component.scss
+// .cdk-overlay-dark-backdrop {
+//   opacity: 80.2% !important;
+//   background: $background-color-4;
+//   backdrop-filter: blur(16.40999984741211px) !important;
+// }
+
+// .mat-mdc-dialog-surface.mdc-dialog__surface {
+//   background: transparent !important;
+//   margin-bottom: 40px !important;
+// }
+
+// .cdk-global-overlay-wrapper {
+//   align-items: end !important;
+// }

package/src/lib/_styles/styles.scss

@@ -0,0 +1,308 @@
+// Custom Theming for Angular Material
+@use "@angular/material" as mat;
+// For more information: https://material.angular.io/guide/theming
+// @import '@angular/material/theming';
+// Plus imports for other components in your app.
+
+$custom-typography: mat.define-typography-config(
+  $font-family: "Gilroy-Regular, serif",
+);
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// Be sure that you only ever include this mixin once!
+// @include mat.core($custom-typography);
+@include mat.core();
+
+// Define the palettes for your theme using the Material Design palettes available in palette.scss
+// (imported above). For each palette, you can optionally specify a default, lighter, and darker
+// hue. Available color palettes: https://material.io/design/color/
+$ns-add-in-primary: mat.define-palette(mat.$indigo-palette);
+$ns-add-in-accent: mat.define-palette(mat.$pink-palette);
+
+// The warn palette is optional (defaults to red).
+$ns-add-in-warn: mat.define-palette(mat.$red-palette);
+
+// Create the theme object (a Sass map containing all of the palettes).
+$ns-add-in-theme: mat.define-dark-theme(
+  (
+    color: (
+      primary: $ns-add-in-primary,
+      accent: $ns-add-in-accent,
+      warn: $ns-add-in-warn,
+    ),
+    typography: $custom-typography,
+    density: -12,
+  )
+);
+
+// Include theme styles for core and each component used in your app.
+// Alternatively, you can import and @include the theme mixins for each component
+// that you are using.
+@include mat.all-component-themes($ns-add-in-theme);
+
+@import "../assets/styles/typography.scss";
+@import "../../node_modules/nextsapien-component-lib/src/lib/shared-styles/styles.scss";
+
+@import "./colors";
+
+html {
+  display: flex;
+  font-size: 12px;
+}
+
+body {
+  background: var(--primary-background);
+  display: flex;
+  width: 100vw;
+  min-height: 100vh;
+  margin: 0;
+  justify-content: center;
+}
+
+input {
+  font-family: "Gilroy-Regular", serif;
+}
+
+.primary-text,
+button {
+  font-family: "Calistoga", cursive;
+}
+
+a {
+  color: $cyrano-primary;
+
+  &.link {
+    justify-content: center;
+    margin: auto;
+    width: 100%;
+    display: flex;
+    text-decoration: none;
+    color: $cyrano-primary;
+    cursor: pointer;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+code {
+  color: $text-color-1;
+  background-color: $background-color-2;
+  padding: 10px;
+  margin: 10px auto;
+  position: relative;
+  display: block;
+  border-radius: 20px;
+  border: 1px solid $border-color-1;
+  width: -moz-fit-content;
+  width: fit-content;
+  max-width: 90%;
+}
+
+table {
+  width: 100%;
+  border-radius: 4px;
+  margin-top: 15px;
+  &.nested-table {
+    width: 95%;
+
+    tr td:first-child {
+      font-weight: bold;
+      width: 250px;
+    }
+  }
+  code {
+    max-width: unset;
+  }
+}
+
+table,
+th,
+td {
+  border: 1px solid $ns-neutral-6;
+  border-collapse: collapse;
+  color: $ns-neutral-8;
+}
+
+th,
+td {
+  padding: 5px;
+  max-width: 25%;
+}
+
+.hidden {
+  display: none !important;
+}
+
+h1,
+h2,
+p {
+  color: $ns-neutral-8;
+}
+
+.intro {
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 22px;
+  text-align: center;
+  color: $ns-neutral-8;
+  max-width: 75%;
+  padding: 20px;
+  justify-content: center;
+}
+
+.header {
+  display: flex;
+  flex: 0 0 auto;
+  font-size: 15px;
+  text-align: center;
+  color: $ns-neutral-6;
+  width: 75%;
+  justify-content: center;
+  padding: 10px;
+}
+
+.info {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  font-size: 14px;
+  color: $ns-neutral-5;
+  padding: 10px;
+  line-height: 20px;
+  max-width: 75%;
+}
+
+.detail-section {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  padding-top: 10px;
+
+  .mat-expansion-panel {
+    background: transparent !important;
+    border: none !important;
+  }
+}
+
+.code-section {
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: 15px;
+  max-width: 60%;
+}
+
+.component-demo {
+  background-color: transparent;
+  margin: 20px 20px 40px 20px;
+  padding: 10px;
+  border-radius: 3px;
+}
+
+.detail {
+  display: flex;
+  flex: 1 1 100%;
+  flex-direction: column;
+  align-items: center;
+  overflow: auto;
+  height: 100%;
+}
+
+.showcase-container {
+  width: 100%;
+  padding: 25px 25px 25px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  height: calc(100% - 55px);
+  &.full-screen {
+    height: 100%;
+  }
+}
+
+.centered-scrollable {
+  align-items: center;
+  overflow-y: auto;
+  h2 {
+    position: relative;
+    display: block;
+    width: 100%;
+    text-align: left;
+    color: $text-color-2;
+    text-transform: capitalize;
+  }
+}
+
+.tag-name {
+  background: $background-color-3;
+  padding: 2px 10px;
+  border-radius: 10px;
+  border: 1px solid $border-color-2;
+}
+
+.first-td {
+  min-width: 130px;
+}
+
+.last-td {
+  padding: 15px;
+  background: $background-color-1;
+  &.demo-container {
+    min-width: 250px;
+  }
+}
+
+.mat-autocomplete-panel {
+  font-family: var(--input-number-filed-font);
+  background: var(--button-background);
+  color: var(--input-font-color) !important;
+  .mat-mdc-option {
+    color: var(--input-font-color) !important;
+    line-height: 35px;
+    height: 35px;
+  }
+}
+.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {
+  background: var(--cyrano-pink-shade-1);
+  color: var(--input-font-color) !important;
+}
+
+/*-----------------
+scrollbar styling
+------------------*/
+// moz
+@-moz-document url-prefix() {
+  * {
+    scrollbar-width: thin;
+    scrollbar-base-color: rgba(0, 0, 0, 0.5);
+    scrollbar-color: var(--cyrano-pink-shade-1, $scroll-color) transparent;
+  }
+}
+
+// webkit
+::-webkit-scrollbar {
+  width: 8px;
+  opacity: 0.5;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--cyrano-dark-color, $background-color-5);
+  opacity: 0.5;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 5px;
+  background-color: var(--cyrano-pink-shade-1, $scroll-color);
+  opacity: 0.5;
+  border: 3px solid $background-color-4;
+}
+
+.one-line-textarea textarea {
+  overflow: hidden;
+}

package/src/lib/styles.scss

@@ -1,20 +1,20 @@
 @use "@angular/material" as mat;
 
-@import "../styles/component-global-styles/search-bar.scss";
-@import "../styles/component-global-styles/create-itinerary.scss";
-@import "../styles/component-global-styles/bottom-navigation.scss";
-@import "../styles/component-global-styles/dashboard.scss";
-@import "../styles/component-global-styles/delete-itineraries.scss";
-@import "../styles/component-global-styles/filter-menu.scss";
-@import "../styles/component-global-styles/header.scss";
-@import "../styles/component-global-styles/navbar.scss";
-@import "../styles/component-global-styles/side-bar.scss";
-@import "../styles/component-global-styles/tab-bar.scss";
-@import "../styles/component-global-styles/custom-menu.scss";
-
-@import "../styles/media-queries.scss";
+@import "../lib/_styles/component-global-styles/search-bar.scss";
+@import "../lib/_styles/component-global-styles/create-itinerary.scss";
+@import "../lib/_styles/component-global-styles/bottom-navigation.scss";
+@import "../lib/_styles/component-global-styles/dashboard.scss";
+@import "../lib/_styles/component-global-styles/delete-itineraries.scss";
+@import "../lib/_styles/component-global-styles/filter-menu.scss";
+@import "../lib/_styles/component-global-styles/header.scss";
+@import "../lib/_styles/component-global-styles/navbar.scss";
+@import "../lib/_styles/component-global-styles/side-bar.scss";
+@import "../lib/_styles/component-global-styles/tab-bar.scss";
+@import "../lib/_styles/component-global-styles/custom-menu.scss";
+
+@import "../lib/_styles/media-queries.scss";
 // @import "./styles/modal.scss";
-@import "../styles/colors";
+@import "../lib/_styles/colors";
 
 :root {
   --font-gilroy-regular: "Gilroy-Regular", serif;