simpo-component-library 3.5.52 → 3.6.2

package/lib/styles/types.d.ts

@@ -1,4 +1,5 @@
 export type SPACING_TYPE = 'none' | 'small' | 'medium' | 'large' | 'remove';
+export type CONTENT_ANIMATION = 'hover' | 'grow-shadow' | 'pop-bounce' | 'hover-pop' | 'slide-in-left' | 'none';
 export type ALIGN = 'left' | 'center' | 'right';
 export type LAYOUTPOSITION = 'left' | 'right' | 'top' | 'bottom';
 export type CONTENTPOSITION = 'image center' | 'image top' | 'image bottom';
@@ -8,8 +9,8 @@ export type ANIMATION_DIRECTION = 'left' | 'top' | 'bottom' | 'right' | 'fadeIn'
 export type BORDER_DIRECTION = "ALL" | "LEFT" | "RIGHT" | "TOP" | "BOTTOM";
 export type ANIMATION_SPEED = 'slow' | 'medium' | 'fast';
 export type LINK_TYPE = 'Button' | 'List Item';
-export type BUTTON_TYPE = 'Solid' | 'Outline';
-export type BUTTON_SHAPE = 'Round' | 'Square';
+export type BUTTON_TYPE = 'Solid' | 'Outline' | 'Text';
+export type BUTTON_SHAPE = 'Round' | 'Square' | 'Curve';
 export type FOOTER_IMAGE_SOURCE = 'BRANDING' | 'UPLOAD';
 export type SOCIAL_ICON_SIZE = 'large' | 'medium' | 'small';
 export type SOCIAL_ICON_SHAPE = 'circle' | 'square' | 'rounded';
@@ -21,3 +22,10 @@ export type BANNER_TRANSITION = 'Horizontal' | 'Animated';
 export type FILE_TYPE = 'Image' | 'Video';
 export type BACKGROUND_TYPE = 'Solid' | 'Gradient';
 export type GRADIENT_DIRECTION = 'DOWN' | 'RIGHT' | 'DIAGONAL_RIGHT' | 'DIAGONAL_LEFT';
+export type BACKGROUND_ANIMATION = 'NONE' | 'DANCING_DOTS' | 'SCATTERING_DOTS' | 'WAVES' | 'ABSTRACT' | 'DREW' | 'DOTS';
+export type PROCESS_SECTION_DISPLAY_STYLE = 'STYLE1' | 'STYLE2';
+export type TAB_STYLING = 'UNDERLINE' | 'BOXED' | 'NONE';
+export type PRICING_STYLE = 'STYLE1' | 'STYLE2';
+export type CONTENT_BACKGROUND = 'black' | 'white';
+export type LOGO_POSITION = 'left' | 'right' | 'top' | 'bottom';
+export type GRID_STYLE = 'Style1' | 'Style2';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "simpo-component-library",
-  "version": "3.5.52",
+  "version": "3.6.2",
   "peerDependencies": {
     "@angular/common": "^17.2.0",
     "@angular/core": "^17.2.0",

package/public-api.d.ts

@@ -40,6 +40,8 @@ export * from './lib/sections/footer/footer.component';
 export * from './lib/sections/header-section/header-section.component';
 export * from './lib/sections/new-testimonials/new-testimonials.component';
 export * from './lib/sections/new-services/new-services.component';
+export * from './lib/sections/moving-text/moving-text.component';
+export * from './lib/sections/news-letter-component/news-letter-component.component';
 export * from './lib/ecommerce/sections/featured-products/featured-products.component';
 export * from './lib/ecommerce/sections/featured-category/featured-category.component';
 export * from './lib/ecommerce/sections/product-desc/product-desc.component';
@@ -56,6 +58,12 @@ export * from './lib/ecommerce/sections/category-product/category-product.compon
 export * from './lib/ecommerce/sections/featured-category/featured-collection.component';
 export * from './lib/ecommerce/sections/customer-review/customer-review.component';
 export * from './lib/ecommerce/sections/authentication-required/authentication-required.component';
+export * from './lib/ecommerce/sections/new-collection/new-collection.component';
+export * from './lib/ecommerce/sections/store-list/store-list.component';
+export * from './lib/ecommerce/sections/store-page/store-page.component';
+export * from './lib/ecommerce/sections/enrollment-form/enrollment-form.component';
+export * from './lib/ecommerce/sections/returns-calculator/returns-calculator.component';
+export * from './lib/ecommerce/sections/book-appointment/book-appointment.component';
 export * from './lib/services/events.service';
 export * from './lib/services/endUser.service';
 export * from './lib/services/sanitizeHtml';
@@ -82,6 +90,11 @@ export * from './lib/directive/container-alignment.directive';
 export * from './lib/directive/sticky-directive';
 export * from './lib/directive/removeCarousel-directive';
 export * from './lib/directive/spacing-around.directive';
+export * from './lib/directive/hover-animation.directive';
+export * from './lib/directive/spacing.directive';
+export * from './lib/directive/height.directive';
+export * from './lib/directive/alignment.directive';
+export * from './lib/directive/translate-onhover.directive';
 export * from './lib/styles/index';
 export * from './lib/styles/style.model';
 export * from './lib/styles/types';

package/src/lib/styles/global-styles.css

@@ -1,192 +1,252 @@
-:root {
-  --primary-font-family: 'mulish';
-  --primary-bg-color: linear-gradient(345deg, #230860 0%, #00b6ff 100%);
-  --primary-color: white;
-}
-
-.add-section {
-  position: absolute !important;
-  width: 40%;
-  top: 0;
-  left: 0 !important;
-  height: 100vh;
-  background-color: transparent !important;
-  box-shadow: none !important;
-  animation: slideInLeft 0.5s ease-in-out forwards;
-}
-
-.add-section.closing {
-  animation: slideOutLeft 0.5 s ease-in-out forwards;
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-@keyframes slideOutLeft {
-  from {
-    transform: translateX(0);
-    opacity: 1;
-  }
-
-  to {
-    transform: translateX(-100%);
-    /* Close to the left side */
-    opacity: 0;
-  }
-}
-
-
-@media screen and (min-width: 1280px) {
-  .content-side {
-    h1 {
-      font-size: 72px !important;
-      line-height: 80px !important;
-    }
-
-    h2 {
-      font-size: 48px !important;
-      line-height: 56px !important;
-    }
-
-    h3 {
-      font-size: 32px !important;
-      line-height: 40px !important;
-    }
-
-    h4 {
-      font-size: 24px !important;
-      line-height: 36px !important;
-    }
-
-    h5 {
-      font-size: 18px !important;
-      line-height: 28px !important;
-    }
-
-    p {
-      font-size: 16px !important;
-      line-height: 21px !important;
-    }
-  }
-
-}
-
-@media screen and (min-width: 768px) {
-  .content-side {
-    h1 {
-      font-size: 46px;
-      line-height: 54px;
-    }
-
-    h2 {
-      font-size: 35px;
-      line-height: 42px;
-    }
-
-    h3 {
-      font-size: 28px;
-      line-height: 36px;
-    }
-
-    h4 {
-      font-size: 18px;
-      line-height: 26px;
-    }
-
-    h5 {
-      font-size: 16px;
-      line-height: 24px;
-    }
-
-    p {
-      font-size: 14px;
-      line-height: 21px;
-    }
-  }
-
-}
-
-.content-side {
-  h1 {
-    font-size: 36px;
-    line-height: 42px;
-  }
-
-  h2 {
-    font-size: 30px;
-    line-height: 36px;
-  }
-
-  h3 {
-    font-size: 24px;
-    line-height: 32px;
-  }
-
-  h4 {
-    font-size: 18px;
-    line-height: 26px;
-  }
-
-  h5 {
-    font-size: 16px;
-    line-height: 24px;
-  }
-
-  p {
-    font-size: 14px;
-    line-height: 21px;
-  }
-}
-
-.link-editor {
-  height: 100vh;
-  width: 28vw;
-  position: absolute !important;
-  top: 0;
-  left: 0 !important;
-  animation: slideInLeft 0.5s ease-in-out forwards;
-}
-
-@media screen and (max-width : 475px) {
-  .link-editor {
-    width: 100% !important;
-  }
-
-  .link-editor {
-    width: 100% !important;
-    max-width: 100% !important;
-  }
-
-  .media-selector {
-    width: 100% !important;
-    max-width: 100% !important;
-  }
-
-  .add-section{
-    width: 100% !important;
-    max-width: 100% !important;
-  }
-
-}
-
-.mat-mdc-form-field-subscript-wrapper {
-  display: none;
-}
-
-.media-selector {
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  width: 60%;
-  height: 100vh;
-  animation: slideInLeft 0.5s ease-in-out forwards;
+:root {
+  --primary-font-family: 'mulish';
+  --primary-bg-color: linear-gradient(345deg, #230860 0%, #00b6ff 100%);
+  --primary-color: white;
+}
+
+.add-section {
+  position: absolute !important;
+  width: 40%;
+  top: 0;
+  left: 0 !important;
+  height: 100vh;
+  background-color: transparent !important;
+  box-shadow: none !important;
+  animation: slideInLeft 0.5s ease-in-out forwards;
+}
+
+.add-section.closing {
+  animation: slideOutLeft 0.5 s ease-in-out forwards;
+}
+
+@keyframes slideInLeft {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: translateX(-100%);
+    /* Close to the left side */
+    opacity: 0;
+  }
+}
+
+
+@media screen and (min-width: 1280px) {
+  .content-side {
+    h1 {
+      font-size: 72px !important;
+      line-height: 80px !important;
+    }
+
+    h2 {
+      font-size: 48px !important;
+      line-height: 56px !important;
+    }
+
+    h3 {
+      font-size: 32px !important;
+      line-height: 40px !important;
+    }
+
+    h4 {
+      font-size: 24px !important;
+      line-height: 36px !important;
+    }
+
+    h5 {
+      font-size: 18px !important;
+      line-height: 28px !important;
+    }
+
+    p {
+      font-size: 16px !important;
+      line-height: 21px !important;
+    }
+  }
+
+}
+
+@media screen and (min-width: 768px) {
+  .content-side {
+    h1 {
+      font-size: 46px;
+      line-height: 54px;
+    }
+
+    h2 {
+      font-size: 35px;
+      line-height: 42px;
+    }
+
+    h3 {
+      font-size: 28px;
+      line-height: 36px;
+    }
+
+    h4 {
+      font-size: 18px;
+      line-height: 26px;
+    }
+
+    h5 {
+      font-size: 16px;
+      line-height: 24px;
+    }
+
+    p {
+      font-size: 14px;
+      line-height: 21px;
+    }
+  }
+
+}
+
+.content-side {
+  h1 {
+    font-size: 36px;
+    line-height: 42px;
+  }
+
+  h2 {
+    font-size: 30px;
+    line-height: 36px;
+  }
+
+  h3 {
+    font-size: 24px;
+    line-height: 32px;
+  }
+
+  h4 {
+    font-size: 18px;
+    line-height: 26px;
+  }
+
+  h5 {
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  p {
+    font-size: 14px;
+    line-height: 21px;
+  }
+}
+
+.link-editor {
+  height: 100vh;
+  width: 28vw;
+  position: absolute !important;
+  top: 0;
+  left: 0 !important;
+  animation: slideInLeft 0.5s ease-in-out forwards;
+}
+
+@media screen and (max-width : 475px) {
+  .link-editor {
+    width: 100% !important;
+  }
+
+  .link-editor {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .sidepanel-class {
+    max-width: 100vw !important;
+  }
+
+  .address-class {
+    width: 100vw;
+  }
+
+  .media-selector {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .add-section {
+    width: 100% !important;
+    max-width: 100% !important;
+  }
+
+  .address-class {
+    width: 100vw;
+  }
+
+}
+
+.mat-mdc-form-field-subscript-wrapper {
+  display: none;
+}
+
+.media-selector {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 60%;
+  height: 100vh;
+  animation: slideInLeft 0.5s ease-in-out forwards;
+}
+
+.appointment-form {
+  @media only screen and (max-width: 500px) {
+    margin: auto !important;
+    height: 65vh !important;
+    width: 95vw !important;
+  }
+}
+
+.hover-effect:hover {
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
+}
+
+.sidepanel-class {
+  position: absolute !important;
+  right: 0px;
+  top: 0px;
+  height: 100vh;
+}
+
+.video-call-dialog {
+  width: 55% !important;
+  height: 85vh !important;
+  border-radius: 18px !important;
+
+  .mat-mdc-dialog-surface {
+    border-radius: 22px !important;
+  }
+}
+
+.scroll-container-store {
+  .cdk-virtual-scroll-content-wrapper {
+    position: unset !important;
+  }
+}
+.p-rating-icon{
+  color: gold;
+}
+.trim-text {
+  text-align: left !important;
+  display: -webkit-box !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  -webkit-line-clamp: 2 !important;
+  -webkit-box-orient: vertical;
+  text-overflow: ellipsis !important;
+  /* word-break: break-all; */
 }