simpo-component-library 3.6.92 → 3.6.94

package/lib/directive/alignment.directive.d.ts

@@ -0,0 +1,11 @@
+import { ElementRef, OnChanges } from '@angular/core';
+import { ALIGN } from '../styles/types';
+import * as i0 from "@angular/core";
+export declare class AlignmentDirective implements OnChanges {
+    private el;
+    alignment?: ALIGN;
+    constructor(el: ElementRef);
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AlignmentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AlignmentDirective, "[simpoAlignment]", never, { "alignment": { "alias": "simpoAlignment"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/directive/button-directive.directive.d.ts

@@ -20,6 +20,8 @@ export declare class ButtonDirectiveDirective implements OnChanges {
     buttonStyleSubscription?: Subscription;
     buttonStyleChangeCheck(): void;
     changeButtonStyle(id: any, style: ButtonStyleModel, backgroundInfo: BackgroundModel): void;
+    onHover(): void;
+    onLeave(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonDirectiveDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<ButtonDirectiveDirective, "[simpoButtonDirective]", never, { "buttonStyle": { "alias": "buttonStyle"; "required": false; }; "color": { "alias": "color"; "required": false; }; "scrollValue": { "alias": "scrollValue"; "required": false; }; "backgroundInfo": { "alias": "backgroundInfo"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/directive/height.directive.d.ts

@@ -0,0 +1,11 @@
+import { ElementRef, OnChanges } from '@angular/core';
+import { FIT } from '../styles/types';
+import * as i0 from "@angular/core";
+export declare class HeightDirective implements OnChanges {
+    private el;
+    fit?: FIT;
+    constructor(el: ElementRef);
+    ngOnChanges(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<HeightDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<HeightDirective, "[simpoHeight]", never, { "fit": { "alias": "simpoHeight"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/directive/set-dynamic-background.directive.d.ts

@@ -0,0 +1,14 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class SetDynamicBackgroundDirective {
+    private el;
+    backgroundColor: string;
+    showBackground: boolean;
+    constructor(el: ElementRef);
+    ngOnChanges(): void;
+    private getContrastingColor;
+    lightenColor(r: number, g: number, b: number, factor: number): string;
+    darkenColor(r: number, g: number, b: number, factor: number): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SetDynamicBackgroundDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SetDynamicBackgroundDirective, "[simpoSetDynamicBackground]", never, { "backgroundColor": { "alias": "backgroundColor"; "required": false; }; "showBackground": { "alias": "simpoSetDynamicBackground"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/directive/spacing.directive.d.ts

@@ -0,0 +1,12 @@
+import { ElementRef, OnChanges } from '@angular/core';
+import { SpacingModel } from '../styles/style.model';
+import * as i0 from "@angular/core";
+export declare class SpacingDirective implements OnChanges {
+    private el;
+    spacing?: SpacingModel;
+    constructor(el: ElementRef);
+    ngOnChanges(): void;
+    private applySpacing;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SpacingDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<SpacingDirective, "[simpoSpacing]", never, { "spacing": { "alias": "simpoSpacing"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/directive/translate-onhover.directive.d.ts

@@ -0,0 +1,11 @@
+import { ElementRef } from '@angular/core';
+import * as i0 from "@angular/core";
+export declare class TranslateOnhoverDirective {
+    private el;
+    translateOnHover?: boolean;
+    constructor(el: ElementRef);
+    ngOnChanges(): void;
+    setTranslate(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TranslateOnhoverDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TranslateOnhoverDirective, "[simpoTranslateOnhover]", never, { "translateOnHover": { "alias": "simpoTranslateOnhover"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/sections/banner-grid-section/banner-grid-section.component.d.ts

@@ -2,7 +2,7 @@ import { OnInit } from '@angular/core';
 import { BannerGridSectionModel, BannerGridContentModel, BannerGridStylesModel } from './banner-grid-section.model';
 import { EventsService } from '../../services/events.service';
 import BaseSection from '../BaseSection';
-import { BackgroundModel, LayOutModel } from '../../styles/style.model';
+import { BackgroundModel, LayOutModel, SpacingModel } from '../../styles/style.model';
 import * as i0 from "@angular/core";
 export declare class BannerGridSectionComponent extends BaseSection implements OnInit {
     private _eventService;
@@ -17,10 +17,16 @@ export declare class BannerGridSectionComponent extends BaseSection implements O
     listItems: any;
     constructor(_eventService: EventsService);
     ngOnInit(): void;
+    screenWidth: any;
+    getScreenSize(): void;
     get stylesLayout(): LayOutModel;
     get canMergeNavbar(): boolean | undefined;
     get isBorderlessImage(): boolean | undefined;
     editSection(): void;
+    getImageClass(index: number): string;
+    get spacingLayout(): SpacingModel;
+    get alignmentLayout(): import("simpo-component-library").ALIGN | undefined;
+    get fitLayout(): import("simpo-component-library").FIT | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<BannerGridSectionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<BannerGridSectionComponent, "simpo-banner-grid-section", never, { "data": { "alias": "data"; "required": false; }; "edit": { "alias": "edit"; "required": false; }; "delete": { "alias": "delete"; "required": false; }; "customClass": { "alias": "customClass"; "required": false; }; "index": { "alias": "index"; "required": false; }; "nextComponentColor": { "alias": "nextComponentColor"; "required": false; }; }, {}, never, never, true, never>;
 }

package/lib/sections/logo-showcase/logo-showcase.modal.d.ts

@@ -1,4 +1,4 @@
-import { Image, ImageStyle, StylesModel, ActionModel, InputTextModel, ListItemModal, PositionLayoutModal } from "./../../styles/style.model";
+import { Image, ImageStyle, StylesModel, ActionModel, InputTextModel, ListItemModal, PositionLayoutModal, DisplaySection } from "./../../styles/style.model";
 import { Corners, logoDirection, logoSpeed, logoType, showCaseType, AlignContent } from './../../styles/index';
 import { CARD_SIZE } from './../../styles/types';
 export interface LogoShowcaseSection {
@@ -11,10 +11,16 @@ export interface LogoShowcaseSection {
 }
 export interface LogoShowcaseContentModel {
     inputText: InputTextModel[];
+    display: Display;
     listItem: ListItemModal<LogoShowcaseItemModel>;
 }
+export interface Display extends DisplaySection {
+    showIcon: boolean;
+    showButtonOnHover: boolean;
+}
 export interface LogoShowcaseItemModel {
     image: Image;
+    inputText: InputTextModel;
 }
 export interface LogoShowcaseStylesModel extends StylesModel {
     positionLayout: PositionLayoutModal;

package/lib/sections/pricing-section/pricing-section.modal.d.ts

@@ -19,6 +19,7 @@ export interface Display extends DisplaySection {
     showImage: boolean;
     showButton: boolean;
     showIncludeditems: boolean;
+    showHoverEffect: boolean;
 }
 export interface PricingSectionStylesModel extends StylesModel {
     image: ImageStyle;

package/lib/sections/process-modern/process-modern.component.d.ts

@@ -15,6 +15,8 @@ export declare class ProcessModernComponent extends BaseSection implements OnIni
     nextComponentColor?: BackgroundModel;
     styles?: ProcessModernStylesModel;
     constructor(_eventService: EventsService);
+    scrWidth: number;
+    getScreenSize(): void;
     ngOnInit(): void;
     get stylesLayout(): LayOutModel;
     get getJustifyContent(): string;

package/lib/sections/service-section/service-section.model.d.ts

@@ -14,6 +14,8 @@ export interface ServiceContentModal {
 }
 export interface Display extends DisplaySection {
     showIcon: boolean;
+    showHoverEffect: boolean;
+    showCardBackground: boolean;
     showButtonOnHover: boolean;
 }
 export interface ServiceStylesModel extends StylesModel, CardStyles {

package/package.json

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

package/public-api.d.ts

@@ -84,6 +84,10 @@ 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,200 @@
-: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;
+  }
+
+  .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;
+}
+
+.appointment-form{
+  @media only screen and (max-width: 500px){
+    margin: auto !important;
+    height: 65vh !important;
+    width: 95vw !important;
+  }
 }