@sarasanalytics-com/design-system 0.0.43 → 0.0.45

package/src/app/app.component.ts

@@ -1,1341 +0,0 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import { ButtonComponent } from '../../projects/component-library/src/lib/button/button.component';
-import { KitchenSinkComponent } from './kitchen-sink/kitchen-sink.component';
-import { ChipsComponent } from '../../projects/component-library/src/lib/chips/chips.component';
-import { AvatarComponent } from '../../projects/component-library/src/lib/avatar/avatar.component';
-import { GridCellComponent } from '../../projects/component-library/src/lib/grid-cell/grid-cell.component';
-import { ColDef, GridReadyEvent } from 'ag-grid-community';
-import { AgGridAngular } from 'ag-grid-angular';
-import rawData from './data';
-import { GridInterface } from '../../projects/component-library/src/interfaces/grid-interface';
-import { FormGroup, FormsModule, FormControl, Validators } from '@angular/forms';
-import { FormlyFieldConfig } from '@ngx-formly/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { FormlyModule } from '@ngx-formly/core';
-import { CommonModule } from '@angular/common';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { ToolTipComponent } from '../../projects/component-library/src/lib/tool-tip/tool-tip.component';
-import { ToastComponent } from '../../projects/component-library/src/lib/toast/toast.component';
-import { HeaderComponent } from '../../projects/component-library/src/lib/header/header.component';
-import { TabsComponent } from '../../projects/component-library/src/lib/tabs/tabs.component';
-import { TabInterface } from '../../projects/component-library/src/interfaces/tab-interface';
-import { DatepickerComponent } from '../../projects/component-library/src/lib/datepicker/datepicker.component';
-import { Renderer2 } from '@angular/core';
-import { SelectInterface } from '../../projects/component-library/src/interfaces/select-interface';
-import { IconName, StepperComponent } from '../../projects/component-library/src/public-api';
-
-import { CardComponent } from '../../projects/component-library/src/lib/card/card.component';
-import { ILeftNav, LeftNavComponent } from '../../projects/component-library/src/lib/left-nav/left-nav.component';
-import { customEmailValidator, phoneNumberValidator } from '../../projects/component-library/src/utils/validators';
-import { CardTitleActionsComponent } from '../../projects/component-library/src/lib/card/card-title-actions/card-title-actions.component';
-import { CardCustomHeaderComponent } from '../../projects/component-library/src/lib/card/card-custom-header/card-custom-header.component';
-import { CardFooterActionsComponent } from '../../projects/component-library/src/lib/card/card-footer-actions/card-footer-actions.component';
-import { CardBodyComponent } from '../../projects/component-library/src/lib/card/card-body/card-body.component';
-import { ChipInterface } from '../../projects/component-library/src/interfaces/chip-interface';
-import { CardIconComponent } from '../../projects/component-library/src/lib/card/card-icon/card-icon.component';
-import { IconComponent } from '../../projects/component-library/src/lib/icon/icon.component';
-import { HttpClientModule } from '@angular/common/http';
-import { IInputEvent, IInputEventType, IInputParam } from '../../projects/component-library/src/lib/form-input/form-input.component';
-// import { DynamicIcon } from '../../projects/component-library/src/lib/form-input/form-input.component';
-import { ProgressBarComponent } from '../../projects/component-library/src/lib/progress-bar/progress-bar.component';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { SpinnerComponent } from '../../projects/component-library/src/lib/spinner/spinner.component';
-import { GuideCardComponent } from "../../projects/component-library/src/lib/card/guide-card/guide-card.component";
-import { GuideStep } from '../../projects/component-library/src/interfaces/guide-card-interface';
-import { RadioButtonComponent } from '../../projects/component-library/src/lib/radio-button/radio-button.component';
-import { OptionInterface } from '../../projects/component-library/src/interfaces/option-interface'; import { CardCarouselComponent } from '../../projects/component-library/src/lib/card-carousel/card-carousel.component';
-import { ScrollingCardsComponent } from '../../projects/component-library/src/lib/scrolling-cards/scrolling-cards.component';
-import { PageLayoutComponent } from '../../projects/component-library/src/lib/page-layout/page-layout.component';
-import { CheckboxComponent } from '../../projects/component-library/src/lib/checkbox/checkbox.component';
-import { ListComponent } from '../../projects/component-library/src/lib/list/list.component'
-import { CheckboxCardComponent } from '../../projects/component-library/src/lib/card/checkbox-card/checkbox-card.component';
-import { remove, reduce, map } from 'lodash';
-import { MatExpansionModule } from '@angular/material/expansion';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { AccordionComponent } from '../../projects/component-library/src/lib/accordion/accordion.component'
-import { MessageBannerComponent } from '../../projects/component-library/src/lib/message-banner/message-banner.component';
-@Component({
-  selector: 'app-root',
-  standalone: true,
-  imports: [
-    CommonModule,
-    MatProgressBarModule,
-    RouterOutlet,
-    ButtonComponent,
-    KitchenSinkComponent,
-    ChipsComponent,
-    AvatarComponent,
-    GridCellComponent,
-    AgGridAngular,
-    //imports for grid
-    ReactiveFormsModule,
-    FormlyModule,
-    ReactiveFormsModule,
-    NgSelectModule,
-    FormsModule,
-    //imports for sa-select and sa-stepper
-    ToolTipComponent,
-    ToastComponent,
-    HeaderComponent,
-    DatepickerComponent,
-    StepperComponent,
-    TabsComponent,
-    CardComponent,
-    RadioButtonComponent,
-    CardTitleActionsComponent,
-    CardCustomHeaderComponent,
-    CardFooterActionsComponent,
-    CardBodyComponent,
-    CardIconComponent,
-    LeftNavComponent,
-    IconComponent,
-    HttpClientModule,
-    ProgressBarComponent,
-    SpinnerComponent,
-    GuideCardComponent,
-    CardCarouselComponent,
-    ScrollingCardsComponent,
-    PageLayoutComponent,
-    CheckboxComponent,
-    MatCheckboxModule,
-    ListComponent,
-    CheckboxCardComponent,
-    MatExpansionModule,
-    MatTooltipModule,
-    AccordionComponent,
-    MessageBannerComponent
-  ],
-  templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
-})
-export class AppComponent {
-  global_theme: string = 'purple-theme';
-
-  constructor(private renderer: Renderer2) {
-    this.renderer.addClass(document.body, this.global_theme);
-  }
-
-  testComp = ButtonComponent;
-  testInputs = [
-    ["primary", "outline", "transparent"],     // type
-    ["default", "error", "disabled"],          // state
-    ["small", "medium", "large"],              // size
-    ["Button"],                                // text
-    ["../assets/sourcesOutlined.svg"],                 // ImagePath
-    ["both"],                                  // iconPosition 
-    ["https://sarasanalytics.com"],            // href
-    ["self"],                                  // hrefTarget 
-  ]
-  testParams = [
-    "type",
-    "state",
-    "size",
-    "text",
-    "ImagePath",
-    "iconPosition",
-    "href",
-    "hrefTarget",
-  ]
-
-  testCompChip = ChipsComponent;
-  testInputsChip = [
-    ["regular", "small", "large"],                                            // type
-    ["primary", "secondary", "neutral", "success", "error", "warning"],       // state
-    ["filled", "outline"],                                                    // filling
-    ["Chip text"],                                                            // text
-    ["../assets/closeBlueOutlined.svg"],                                                  // iconPath
-    ["both"],                                                                 // iconPosition
-    ["../assets/circleFilled.svg"],                                                    // largeStateIcon
-    ["Good"],                                                                 // largeStateText
-  ];
-  testParamsChip = [
-    "type",
-    "state",
-    "filling",
-    "text",
-    "iconPath",
-    "iconPosition",
-    "largeStateIcon",
-    "largeStateText",
-  ]
-
-  testCompAvatar = AvatarComponent;
-  testInputsAvatar = [
-    ["../assets/avatar.svg", ""],
-    ["extra-small", "small", "medium", "large", "extra-large"],
-    ["AB"]
-  ];
-  testParamsAvatar = ["imagePath", "size", "altText"];
-
-  testSVGPreview = IconComponent;
-  testSVGPreviewInputs = [
-    ["analysis", "arrowRightOutlined", "avatar",
-      "businessStatsFilled", "chatHelpOutlined", "checkCircleFilled",
-      "checkCircleOutlined", "checkOutlined", "circleFilled",
-      "closeBlueOutlined", "closeCircleFilled", "closeOutlined",
-      "doubleDownOutlined", "downChevronOutlined", "eyeFilled",
-      "eyeOutlined", "formDetailsOutlined", "gridViewOutlined",
-      "homeOutlined", "infoCircleOutlined", "infoTriangleFilled",
-      "infoTriangleOutlined", "innosupps", "locationOutlined",
-      "mailOutlined", "multiConnectionHub", "personOutlined",
-      "rightChevronOutlined", "sarasWhite", "settingsOutlined",
-      "sourcesOutlined", "targetScanOutlined", "upwardTriangleFilled", "headsetOutlined"
-    ],
-    ["44"],
-    ["AB"]
-  ];
-  testSVGPreviewParams = ["icon", "size", "altText"];
-
-  params: GridInterface = {
-    cellType: '',
-    viewText: false,
-    viewLeadingIcon: false,
-    viewTrailingIcon: false,
-    viewButton: false,
-    viewChip: false,
-    viewAvatar: false,
-  }
-
-  handleChipClick(evt: any) {
-    const prevData = this.rowData[evt.rowId]["Chip"].chipConfig;
-    if (prevData == undefined) return;
-    for (let i = 0; i < prevData.length; i++) {
-      if (prevData[i].id == evt.id) {
-        this.rowData[evt.rowId]["Chip"].chipConfig?.splice(i, 1);
-        break;
-      }
-    }
-  }
-
-  // for every in cell in a row, returning a grid-interface object to specify how it should be rendered.
-  rowData = rawData.map((current): { [key: string]: GridInterface } => {
-    return {
-      "Text": {
-        ...this.params,
-        viewText: true,
-        cellType: 'row',
-        text: current.rowNo,
-      },
-      "Numeric": {
-        ...this.params,
-        viewText: true,
-        cellType: 'numeric',
-        text: Math.floor(((current.rowNo * 23) / 77) * 75),
-      },
-      "Leading Icon": {
-        ...this.params,
-        viewText: true,
-        cellType: 'interactive',
-        text: current.name,
-        iconPath: '../assets/targetScanOutlined.svg',
-        viewLeadingIcon: true,
-        interactiveLinkTarget: 'blank',
-        linkClicked: (evt: Event) => {
-          console.log(evt);
-        }
-      },
-      "Chip": {
-        ...this.params,
-        cellType: 'row',
-        viewChip: true,
-        chipConfig: [
-          {
-            id: 0,
-            text: current.chip,
-            type: 'primary',
-            state: 'regular',
-            filling: 'filled',
-            iconPath: '../assets/closeBlueOutlined.svg',
-            iconPosition: 'left',
-            largeStateIcon: '',
-            largeStateText: '',
-          },
-          {
-            id: 1,
-            text: current.chip2,
-            type: 'secondary',
-            state: 'regular',
-            filling: 'filled',
-            iconPath: '../assets/closeBlueOutlined.svg',
-            iconPosition: 'left',
-            largeStateIcon: '',
-            largeStateText: '',
-          },
-          {
-            id: 2,
-            text: current.chip3,
-            type: 'error',
-            state: 'regular',
-            filling: 'filled',
-            iconPath: '../assets/closeBlueOutlined.svg',
-            iconPosition: 'left',
-            largeStateIcon: '',
-            largeStateText: '',
-          },
-        ],
-        chipClicked: (evt: Event) => {
-          console.log(evt);
-          this.handleChipClick(evt);
-        }
-      },
-      "Button": {
-        ...this.params,
-        cellType: "row",
-        viewButton: true,
-        buttonConfig: {
-          id: 0,
-          type: 'outline',
-          state: current.buttonState,
-          size: 'small',
-          text: 'Button',
-          href: current.link,
-          imagePath: '../assets/sourcesOutlined.svg',
-          iconPosition: 'both',
-          hrefTarget: 'blank',
-        },
-        buttonClicked: (evt: Event) => {
-          console.log(evt);
-        }
-      },
-      "Avatar": {
-        ...this.params,
-        viewText: true,
-        cellType: "row",
-        avatarConfig: {
-          id: 0,
-          size: 'small',
-          imagePath: current.personPhoto,
-          altText: 'AB'
-        },
-        viewAvatar: true,
-        text: current.personName,
-        subText: current.personDesignation,
-        avatarClicked: (evt: Event) => {
-          console.log(evt);
-        }
-      },
-      "Subtext": {
-        ...this.params,
-        viewText: true,
-        cellType: "row",
-        text: "Text",
-        subText: "Subtext"
-      },
-      "All": {
-        cellType: 'row',
-        viewText: true,
-        viewLeadingIcon: true,
-        viewTrailingIcon: true,
-        viewButton: true,
-        viewChip: true,
-        viewAvatar: true,
-        iconPath: '../assets/targetScanOutlined.svg',
-        chipConfig: [
-          {
-            id: 2,
-            text: current.chip3,
-            type: 'error',
-            state: 'regular',
-            filling: 'filled',
-            iconPath: '../assets/sourcesOutlined.svg',
-            iconPosition: 'left',
-            largeStateIcon: '',
-            largeStateText: '',
-          }
-        ],
-        buttonConfig: {
-          id: 0,
-          type: 'outline',
-          state: current.buttonState,
-          size: 'small',
-          text: 'Button',
-          href: current.link,
-          imagePath: '../assets/sourcesOutlined.svg',
-          iconPosition: 'both',
-          hrefTarget: 'blank',
-        },
-        avatarConfig: {
-          id: 0,
-          size: 'small',
-          imagePath: '../assets/avatar.svg',
-          altText: 'AB'
-        },
-        text: "Text",
-        subText: "subText",
-      }
-    }
-  }
-  );
-  colDefs: ColDef[] = [
-    {
-      field: "Text",
-      comparator: (_valueA, _valueB, nodeA, nodeB) => {
-        return Number(nodeA.data.Text.text) - Number(nodeB.data.Text.text)
-      },
-      resizable: false,
-      cellRenderer: GridCellComponent,
-    },
-    {
-      field: "Numeric",
-      comparator: (_valueA, _valueB, nodeA, nodeB) => {
-        return Number(nodeA.data.Numeric.text) - Number(nodeB.data.Numeric.text)
-      },
-      resizable: false,
-      filter: 'agNumberColumnFilter',
-      valueFormatter: p => p.data.Numeric.text,
-      cellRenderer: GridCellComponent,
-    },
-    {
-      field: "Leading Icon",
-      headerCheckboxSelection: true,
-      resizable: false,
-      cellRenderer: GridCellComponent,
-    },
-    {
-      field: "Chip",
-      resizable: false,
-      cellRenderer: GridCellComponent,
-    },
-    {
-      field: "Button",
-      resizable: false,
-      cellRenderer: GridCellComponent,
-    },
-    {
-      field: "Avatar",
-      resizable: false,
-      cellRenderer: GridCellComponent,
-    },
-    {
-      field: "Subtext",
-      resizable: false,
-      cellRenderer: GridCellComponent,
-    },
-    {
-      field: "All",
-      resizable: false,
-      cellRenderer: GridCellComponent,
-    }
-  ]
-  onGridReady(evt: GridReadyEvent) {
-    evt.api.autoSizeAllColumns();
-  }
-
-  // model: any = {
-  //   "Test-select": [{
-  //     "id": 0,
-  //     "name": "One"
-  //   }],
-  //   "Test-stepper": {
-  //     "id": 2,
-  //   }
-  // };
-  form = new FormGroup({});
-
-  fields2: FormlyFieldConfig[] = [{
-    key: 'email',
-    type: 'input',
-    props: {
-      type: 'email',
-      label: 'Email',
-      placeholder: 'Enter your email address',
-      required: true,
-      appearance: 'outline'
-    },
-  }]
-
-  selectProps = {
-    options: [
-      { id: 0, name: "Afghanistan", dial_code: "+93", code: "AF" },
-      { id: 1, name: "Aland Islands", dial_code: "+358", code: "AX" },
-      { id: 2, name: "Algeria", dial_code: "+213", code: "DZ" }
-    ],
-    searchable: true,
-    disabled: false,
-    change: () => {
-      console.log(this.model);
-    },
-    params: {
-      label: 'Label',
-      supportText: "Supporting text",
-      dropIcon: '../assets/downChevronOutlined.svg',
-      dropIconPosition: 'both',
-      multiple: false,
-      iconPath: "../assets/closeBlueOutlined.svg",
-      text: "chip",
-      type: "regular",
-      state: "primary",
-      filling: "filled",
-      iconPosition: "left",
-    }
-  };
-
-  model = {
-    "Test-select": this.selectProps.options[1],
-    brand_name: 'sakdada',
-    'company-input': 'sakdada',
-  };
-  fields: FormlyFieldConfig[] = [
-    {
-      key: 'Test-select',
-      type: 'sa-select',
-      props: this.selectProps,
-      className: "col-6"
-    },
-    {
-      "key": "brand_name",
-      "type": "sa-input",
-      "props": {
-        "label": "Enter your brand name",
-        "required": true,
-        "description": "If you manage multiple brands, don’t worry—you can add them later",
-        "column": false,
-        "state": "default",
-        "disabled": false,
-        "placeholder": "brand name",
-        "bigLabel": "Enter your brand name",
-        "bigDescription": "If you manage multiple brands, don’t worry—you can add them later",
-      },
-      "id": "formly_1_sa-input_brand_name_0",
-      "hooks": {},
-      "modelOptions": {},
-      "validation": {
-        "messages": {}
-      },
-      "resetOnHide": true,
-      "wrappers": [],
-      "expressions": {},
-      "expressionProperties": {}
-    },
-    {
-      key: 'company-input',
-      type: 'sa-input',
-      className: "col-6",
-      props: {
-        disabled: false,
-        value: '',
-        required: true,
-        // dynamicIcon: DynamicIcon.PASSWORD,
-        params: {
-          supportText: 'Enter your password here',
-          placeholder: 'password',
-          type: 'password',
-          validators: [Validators.required]
-        }
-      }
-    }, {
-      key: 'phone_input',
-      type: 'sa-input',
-      className: "col-6",
-      props: {
-        disabled: false,
-        value: '',
-        // dynamicIcon: DynamicIcon.STATUS,
-        params: {
-          supportText: 'this input is for demo',
-          placeholder: 'Phone Number',
-          type: 'tel',
-          dependent: 'Test-select',
-          validators: [phoneNumberValidator('Test-select')]
-        }
-      }
-    }
-    // {
-    //   key: 'Test-stepper',
-    //   type: 'sa-stepper',
-    //   props: {
-    //     disabled: false,
-    //     options: [
-    //       { id: 0, name: 'Zero' },
-    //       { id: 1, name: 'One' },
-    //       { id: 2, name: 'Two' },
-    //       { id: 3, name: 'Three' },
-    //     ],
-    //     params: {
-    //       editable: true,
-    //       doneIcon: "../assets/tick.svg"
-    //     }
-    //   }
-    // }
-  ];
-
-  /* validate email */
-  formEmailEvent(data: IInputEvent): Promise<IInputParam | null> {
-
-    return new Promise((s, r) => {
-      if (data.type === IInputEventType.INPUT_CHANGE) {
-        console.log('formEventClick', data.formControl.errors);
-
-        if (!data.formControl.hasError('email') && !data.formControl.hasError('required')) {
-          if (data.value === 'sk@gm.com') { // is workemail
-            // s({ icon: { name: 'checkmark', color: '#33961F', show: true } })
-          } else { // not work email
-            !data.formControl.touched && data.formControl.markAsTouched();
-            data.formControl.setErrors({ 'invalid': 'Please use a work email; personal emails (e.g., @gmail, @outlook) are not accepted.' })
-            // s({ icon: { name: 'checkmark', color: '', show: true } });
-          }
-        } else {
-          // s({ icon: { name: 'checkmark', color: '', show: false } })
-        }
-      }
-    })
-
-  }
-
-  submit(model: any) {
-    console.log(model);
-    if (this.form.invalid) {
-      this.form.markAllAsTouched();
-      this.form.markAsTouched();
-      this.form.get('email-input')?.markAsTouched()
-    } else {
-
-    }
-  }
-
-  stepLabels = [
-    { id: 0, name: 'Zero' },
-    { id: 1, name: 'One' },
-    { id: 2, name: 'Two' },
-    { id: 3, name: 'Three' },
-  ];
-  editable = true;
-  doneIcon = "../assets/checkOutlined.svg";
-  stepped(evt: any) {
-    console.log(evt);
-  }
-
-  skip = () => { console.log("skipped") };
-  seen = () => { console.log("seen") };
-
-  messages: string[] = [
-    "This first line can act as the subheading of this onboarding tooltip",
-    "This second line can act as the subheading of this onboarding tooltip",
-    "This third line can act as the subheading of this onboarding tooltip",
-    "This fourth line can act as the subheading of this onboarding tooltip",
-  ]
-
-  heading: string = "Heading";
-  subHeading: string = "Subheading text"
-  percent = 30
-  statusIcon = "../assets/infoTriangleFilled"
-  clicked(num: number) { num ? this.percent += 5 : this.percent -= 5 }
-
-  info = [
-    ["Info Text 1", "../assets/personOutlined.svg"],
-    ["Info Text 2", "../assets/locationOutlined.svg"],
-    ["Info Text 3", "../assets/mailOutlined.svg"]
-  ]
-  chipConfig = [
-    ["Chip 1", "success"],
-    ["Chip 2", "warning"],
-    ["Chip 3", "error"],
-  ]
-  mainButton = "+ Button"
-  helperButton = "Helper"
-  header = "Header"
-
-  tabs: TabInterface[] = [
-    {
-      tabName: "Tab 1",
-      tabIcon: "../assets/sourcesOutlined.svg",
-      iconPosition: "left",
-      badgeContent: "3 new",
-    },
-    {
-      tabName: "Tab 2",
-      tabIcon: "../assets/gridViewOutlined.svg",
-      iconPosition: "right",
-      badgeContent: "9 new",
-    },
-    {
-      tabName: "Tab 3",
-      tabIcon: "../assets/infoTriangleFilled.svg",
-      iconPosition: "left",
-      badgeContent: "17 new",
-    },
-    {
-      tabName: "Tab 4",
-      tabIcon: "../assets/personOutlined.svg",
-      iconPosition: "right",
-    },
-    {
-      tabName: "Tab 5",
-      tabIcon: "../assets/mailOutlined.svg",
-      badgeContent: "6 new",
-      iconPosition: "both",
-    }
-  ]
-
-  defaultTab = 2;
-  tabSwitch(evt: any) {
-    console.log(evt);
-  }
-
-  range = new FormGroup({
-    start: new FormControl(),
-    end: new FormControl(),
-  });
-
-  leftNavData: ILeftNav = {
-    items: [{
-      title: 'Home',
-      icon: 'homeOutlined',
-      disable: false,
-      tooltip: '',
-      relativePath: true,
-      path: 'home'
-    }, {
-      title: 'Pricing',
-      icon: 'formDetailsOutlined',
-      disable: true,
-      tooltip: '',
-      relativePath: true,
-      path: ''
-    }, {
-      title: 'Setting',
-      icon: 'settingsOutlined',
-      disable: true,
-      tooltip: 'coming soon',
-      relativePath: true,
-      path: ''
-    }],
-    footerItems: [{
-      title: 'Help',
-      icon: 'chatHelpOutlined',
-      disable: true,
-      tooltip: ''
-    }, {
-      title: 'Name',
-      disable: false,
-      tooltip: '',
-      type: 'AVATAR'
-    }, {
-      title: 'Chevron',
-      icon: 'doubleDownOutlined',
-      disable: true,
-      tooltip: ''
-    }]
-  }
-
-  datonCardChip: ChipInterface = {
-    id: '',
-    text: 'Not started yet',
-    type: 'small',
-    state: 'neutral',
-    filling: 'filled'
-  }
-  keyFeaturesIcon = '../assets/chatHelpOutlined.svg';
-
-
-  guideCardSteps: GuideStep[] = [
-    {
-      title: "Define your target audience",
-      description: "Identify the specific group of people you want to reach with your marketing efforts. Consider demographics, interests, and behaviors."
-    },
-    {
-      title: "Set clear marketing goals",
-      description: "Establish specific, measurable, achievable, relevant, and time-bound (SMART) objectives for your marketing plan."
-    },
-    {
-      title: "Conduct market research",
-      description: "Analyze your competitors, industry trends, and customer needs to inform your marketing strategy."
-    },
-    {
-      title: "Choose your marketing channels",
-      description: "Select the most effective platforms and methods to reach your target audience, such as social media, email marketing, or content marketing."
-    },
-    {
-      title: "Develop your marketing message"
-    },
-    {
-      title: "Set your marketing budget",
-      description: "Allocate resources to different marketing activities based on their potential impact and alignment with your goals."
-    },
-    {
-      title: "Implement your marketing tactics",
-      description: "Execute your planned marketing activities across chosen channels, ensuring consistency in messaging and branding."
-    },
-    {
-      title: "Monitor and measure results"
-    }
-  ];
-  //for testimonial card
-  titleIcon = `../assets/innosupps.svg`;
-  cardIcon = `../assets/avatar.svg`;
-  cardBody = `"Saras Analytics provides reliable, data-driven insights that empower us to make informed decisions with confidence."`
-  title = 'Jason Panzer';
-  subtitle = 'CEO, Innosupps';
-  testimonialLogo: IconName = 'innosupps';
-  //for radio-button
-  radioOptions = [
-    { value: 'option1', label: 'We are a Brand' },
-    { value: 'option2', label: 'Option 2' },
-    { value: 'option3', label: 'We are an Agency' },
-  ];
-  selectedRadio: OptionInterface = { value: 'option3', label: 'We are an Agency' };
-  columnRadio: boolean = false;
-  onRadioSelectionChange(value: OptionInterface): void {
-    this.selectedRadio = value;
-  }
-  //for checkbox
-  checkboxOptions = [                                         //options 
-    { value: 'option1', label: 'We are a Brand' },
-    { value: 'option2', label: 'Option 2' },
-    { value: 'option3', label: 'We are an Agency' },
-  ]
-  selectedValuesCheckbox: OptionInterface[] = [{ value: 'option1', label: 'We are a Brand' }];
-  onCheckboxSelectionChange(values: OptionInterface[]): void {
-    this.selectedValuesCheckbox = values
-    console.log("checkbox", values)
-  }
-  //for checkbox card
-  checkboxCardLogo = 'desktopSpeakerOutlined';
-  checkboxCardTitle = 'Marketing';
-  checkboxCardListIcon = 'checkCircleOutlined';
-  listItems = [
-    { text: 'Optimize marketing campaigns for better ROI' },
-    { text: 'Compare marketing performance across all channels' },
-    { text: 'Measure customer acquisition cost by campaign and channel' }
-  ];
-  checkboxCardSelected = false;
-
-  checkboxCardsList = [
-    {
-      'featureIcon': 'desktopSpeakerOutlined',
-      'title': 'Marketing',
-      'listIcon': 'checkCircleOutlined',
-      'listItems': [
-        { text: 'Optimize marketing campaigns for better ROI' },
-        { text: 'Compare marketing performance across all channels' },
-        { text: 'Measure customer acquisition cost by campaign and channel' }
-      ],
-      'isCardSelected': false,
-      "disabled": false
-    },
-    {
-      'featureIcon': 'desktopSpeakerOutlined',
-      'title': 'Product',
-      'listIcon': 'checkCircleOutlined',
-      'listItems': [
-        { text: 'Optimize marketing campaigns for better ROI' },
-        { text: 'Compare marketing performance across all channels' },
-        { text: 'Measure customer acquisition cost by campaign and channel' }
-      ],
-      'isCardSelected': false,
-      "disabled": false
-    },
-    {
-      'featureIcon': 'desktopSpeakerOutlined',
-      'title': 'Operations',
-      'listIcon': 'checkCircleOutlined',
-      'listItems': [
-        { text: 'Optimize marketing campaigns for better ROI' },
-        { text: 'Compare marketing performance across all channels' },
-        { text: 'Measure customer acquisition cost by campaign and channel' }
-      ],
-      'isCardSelected': true,
-      'customWrapperClass': 'sa-card-checkbox-wrapper',
-      "disabled": false
-    },
-    {
-      'featureIcon': 'tabDesktopArrowClockwiseOutlined',
-      'title': 'Re-marketing & Activation',
-      'isCardSelected': false,
-      'customWrapperClass': 'sa-card-checkbox-wrapper',
-      "disabled": true,
-      "description": 'Coming soon!!',
-      "descriptionIcon": 'timerOutlined',
-      'showButtons': [
-        {
-          'label': 'Contact us to activate now',
-          'icon': 'headsetOutlined',
-          'type': 'submit',
-          'class': 'open-chat-button',
-          'iconPosition': 'left',
-          'buttonType': 'outline',
-          'size': 'large',
-          'state': 'default',
-          'iconSize': '17'
-        },
-      ]
-    },
-  ]
-
-  handleCardClick(event: any) {
-    console.log(event);
-  }
-
-  handleCheckboxChange(event: any) {
-    console.log(event)
-  }
-
-  //for list
-  selectedCheckboxCards: any[] = [];
-  handleCardSelection(selectedCard: any, isSelected: boolean) {
-    if (isSelected) {
-      this.selectedCheckboxCards.push(selectedCard);
-    } else {
-      remove(this.selectedCheckboxCards, (card) => card.title === selectedCard.title)
-    }
-    console.log(this.selectedCheckboxCards)
-  }
-
-  //for accordion
-  onAccordionOpened($event: any, accordionName: string) {
-    console.log(event)
-  }
-  accordionCardMessage = "This first line can act as the subheading of this onboarding tooltip"
-  accordionCustomWrapperClass: string = 'sa-card-checkbox-wrapper';
-  accordionCardDetails = [{
-    title: 'Amazon Ads',
-    tooltip: "Track and analyze performance metrics for Amazon advertising campaigns, including impressions, clicks, and conversions.",
-    selected: false,
-  }, {
-    title: 'Google Ads',
-    tooltip: "Track and analyze performance metrics for Amazon advertising campaigns, including impressions, clicks, and conversions.",
-    selected: false,
-  }, {
-    title: 'Marketing Overview',
-    tooltip: "Track and analyze performance metrics for Amazon advertising campaigns, including impressions, clicks, and conversions.",
-    selected: false,
-  }, {
-    title: 'Facebook Ads',
-    tooltip: "Track and analyze performance metrics for Amazon advertising campaigns, including impressions, clicks, and conversions.",
-    selected: false,
-  }]
-  accordionPanelTitle: string = 'Marketing';
-  accordionExpanded: boolean = true;
-  handleAccordionCardSelection(event: any) {
-    console.log(event)
-  }
-  //for accordion formly
-  panelData = [
-    {
-      key: 'marketingPanel',
-      title: 'Marketing',
-      accordionExpanded: false,
-      cardMessage: 'Marketing-specific features',
-      titleChip: {
-        label: 'Selected',
-        type: 'small',
-        state: 'neutral',
-        filling: 'filled',
-        changeStateTo: 'error',
-        text: ' {count} Selected',
-      },
-      features: [
-        {
-          title: 'Amazon Ads',
-          tooltip: 'Track Amazon ad performance.',
-          isSelected: false,
-          disabled: true
-        },
-        {
-          title: 'Google Ads',
-          tooltip: 'Analyze Google ad metrics.',
-          isSelected: true,
-        },
-        {
-          title: 'Marketing Overview',
-          tooltip: 'Track and analyze performance metrics for Amazon advertising campaigns, including impressions, clicks, and conversions.',
-          isSelected: false,
-        },
-        {
-          title: 'Facebook Ads',
-          tooltip: 'Track and analyze performance metrics for Amazon advertising campaigns, including impressions, clicks, and conversions.',
-          isSelected: false,
-        },
-      ],
-    },
-    {
-      key: 'accountingPanel',
-      title: 'Accounting',
-      accordionExpanded: true,
-      cardMessage: 'Accounting-specific features',
-      customWrapperClass: '',
-      titleChip: {
-        label: 'Selected',
-        type: 'small',
-        state: 'neutral',
-        filling: 'filled',
-        changeStateTo: 'primary',
-        text: '{count} Selected',
-      },
-      features: [
-        {
-          title: 'QuickBooks',
-          tooltip: 'Integrate QuickBooks data.',
-          isSelected: false,
-        },
-        {
-          title: 'Xero',
-          tooltip: 'Connect Xero accounting.',
-          isSelected: true,
-        },
-        {
-          title: 'Shopify',
-          tooltip: 'Track Amazon ad performance.',
-          isSelected: false,
-        },
-        {
-          title: 'Klaviyo',
-          tooltip: 'Analyze Google ad metrics.',
-          isSelected: true,
-        },
-      ],
-      advancedFeaturesExpanded: true,
-      advancedFeatures: [
-        {
-          title: 'Magento',
-          tooltip: 'Integrate Magento data.',
-          isSelected: false,
-          disabled: true,
-          featureChip: {
-            label: 'Advanced',
-            type: 'small',
-            state: 'primary',
-            filling: 'filled',
-          },
-        },
-        {
-          title: 'Shiphero',
-          tooltip: 'Connect Xero accounting.',
-          isSelected: false,
-          disabled: true
-        },
-      ],
-      advancedFeatureDisclaimer: 'Please reach out to us to activate the advanced dashboards',
-      advancedFeatureTitle: 'View Advanced Features',
-      advancedFeatureToggleTitle: 'Hide Advanced Features',
-      advancedFeatureDisclaimerButtons: [
-        {
-          text: 'Learn More',
-          type: 'transparent',
-          size: 'small',
-          state: 'default'
-        }, {
-          text: 'Schedule a call',
-          type: 'outline',
-          size: 'small',
-          state: 'default',
-          iconPosition: 'left',
-          icon: "headsetOutlined",
-          buttonIconSize: "14"
-        }
-      ]
-    },
-  ];
-  accordionForm = new FormGroup({});
-  accordionModel = {
-
-  };
-  accordionFields: FormlyFieldConfig[] = [
-    {
-      key: 'accordionPanelGroup',
-      wrappers: ['wrapper'],
-      props: {
-        label: 'Choose the features that you would like to activate',
-        description: `Based on your selected features and preferences, we'll recommend the most relevant dashboards to support your goals`,
-        helpText: 'helptext here'
-      },
-      fieldGroupClassName: 'accordions-group-container',
-      fieldGroup: this.panelData.map(panel => ({
-        key: panel.key,
-        type: 'sa-accordion',
-        className: 'accordion-group-container',
-        props: {
-          panelTitle: panel.title,
-          accordionExpanded: panel.accordionExpanded,
-          cardMessage: panel.cardMessage,
-          customWrapperClass: panel.customWrapperClass || 'sa-card-accordion-wrapper',
-          titleChip: panel.titleChip,
-          expandedIcon: 'downChevronOutlined',
-          collapsedIcon: 'rightChevronOutlined',
-          tooltipIcon: 'infoCircleOutlined',
-          advancedTooltipIcon: 'infoCircleOutlined',
-          featureCardWidth: '628px',
-          advancedFeatureCardWidth: '623px',
-          featuresList: panel.features,
-          advancedFeatures: panel.advancedFeatures,
-          advancedFeaturesExpanded: panel.advancedFeaturesExpanded || false,
-          advancedFeatureTitle: panel.advancedFeatureTitle || 'View Advanced Features',
-          advancedFeatureToggleTitle: panel.advancedFeatureToggleTitle || 'Hide Advanced Features',
-          advancedFeatureDisclaimerButtons: panel.advancedFeatureDisclaimerButtons,
-          advancedFeatureDisclaimer: panel.advancedFeatureDisclaimer,
-          ...(panel.advancedFeatureDisclaimerButtons && {
-            onButtonClick: (button: any) => this.onButtonClick(panel, button)
-          }),
-        },
-      }))
-    }
-  ]
-
-  //radio formly
-  radioForm = new FormGroup({});
-  radioModel = {
-    "radio-select": 'option3'
-  };
-  radioFields: FormlyFieldConfig[] = [
-    {
-      key: 'radio-select',
-      type: 'sa-radio-button',
-      props: {
-        options: [
-          { value: 'option1', label: 'We are a Brand' },
-          { value: 'option2', label: 'Option 2' },
-          { value: 'option3', label: 'We are an Agency' },
-        ],
-        label: 'Select an Option',
-        column: false,
-      },
-    },
-  ];
-  modelChangeHandler(event: any) {
-    console.log(event)
-  }
-
-  //checkbox formly
-  checkboxForm = new FormGroup({});
-  checkboxModel = {
-    "checkbox-select": ['option2']
-  };
-  checkboxFields: FormlyFieldConfig[] = [
-    {
-      "key": "organization_type",
-      "type": "sa-radio-button",
-      "props": {
-        "label": "How would you best describe your organization?",
-        "required": true,
-        "options": [
-          {
-            "label": "We are a Brand",
-            "value": "We are a Brand"
-          },
-          {
-            "label": "We are an Agency",
-            "value": "We are an Agency"
-          }
-        ],
-        "description": "Select any one to ensure we tailor Pulse to fit your needs",
-        "column": false,
-        "state": "default",
-        "disabled": false,
-        "placeholder": "",
-        "type": "chipsMultiSelect",
-      },
-      "id": "formly_2_sa-radio-button_organization_type_0",
-      "hooks": {},
-      "modelOptions": {},
-      "validation": {
-        "messages": {}
-      },
-      "resetOnHide": true,
-      "wrappers": [],
-      "expressions": {},
-      "expressionProperties": {}
-    },
-    {
-      "key": "onboarding_function_type",
-      "type": "sa-checkbox",
-      "props": {
-        "label": "Which areas do you want to improve and grow using data insights?",
-        "required": true,
-        "options": [
-          {
-            "label": "Marketing",
-            "value": "Marketing"
-          },
-          {
-            "label": "Sales",
-            "value": "Sales"
-          },
-          {
-            "label": "Finance",
-            "value": "Finance"
-          },
-          {
-            "label": "Operations",
-            "value": "Operations"
-          },
-          {
-            "label": "Product",
-            "value": "Product"
-          },
-          {
-            "label": "Customer",
-            "value": "Customer"
-          }
-        ],
-        "description": "Pulse delivers a single source of truth for the entire business. You can start with any function and expand later",
-        "column": false,
-        "state": "default",
-        "disabled": false,
-        "placeholder": ""
-      },
-      "id": "formly_2_sa-checkbox_onboarding_function_type_1",
-      "hooks": {},
-      "modelOptions": {},
-      "validation": {
-        "messages": {}
-      },
-      "resetOnHide": true,
-      "wrappers": [],
-      "expressions": {},
-      "expressionProperties": {}
-    }
-  ];
-  //for checkbox card formly
-  checkboxCardForm = new FormGroup({});
-  checkboxCardModel = {
-    checkboxCardGroup: reduce(
-      map(this.checkboxCardsList, (card, index) => {
-        if (card.disabled) return null;
-        return {
-          [`card_${index}`]: card.isCardSelected,
-        };
-      }),
-      (acc, cur) => (cur ? { ...acc, ...cur } : acc),
-      {}
-    ),
-  };
-  checkboxCardFields: FormlyFieldConfig[] = [
-    {
-      key: 'checkboxCardGroup',
-      fieldGroupClassName: 'checkbox-card-group',
-      fieldGroup: this.checkboxCardsList.map((card, index) => ({
-        key: `card_${index}`,
-        type: 'sa-checkbox-card',
-        props: {
-          featureIcon: card.featureIcon,
-          title: card.title,
-          listIcon: card.listIcon,
-          listItems: card.listItems,
-          width: '40.25rem',
-          customWrapperClass: card.customWrapperClass || 'sa-card-checkbox-wrapper',
-          isCardSelected: card.isCardSelected,
-          disabled: card.disabled,
-          showButtons: card.showButtons,
-          description: card.description,
-          descriptionIcon: card.descriptionIcon,
-          ...(card.showButtons && { onButtonClick: () => this.onButtonClick(card) }),
-        },
-        defaultValue: card.isCardSelected,
-      })),
-    },
-  ];
-  onButtonClick(card: any, button?: any) {
-    if (card.disabled) {
-      console.log(`Button clicked on disabled card: ${card.title}`, {
-        button
-      });
-    } else {
-      console.log(`Button clicked on enabled card: ${card.title}`, {
-        button
-      });
-    }
-  }
-  //for carousel 
-  carouselCards = [
-    {
-      id: 1,
-      avatarIcon: 'avatar',
-      title: 'Jason Panzer',
-      subtitle: 'CEO, Innosupps',
-      logoIcon: 'innosupps',
-      body: '"Saras Analytics provides reliable, data-driven insights that empower us to make informed decisions with confidence."'
-    },
-    {
-      id: 1,
-      avatarIcon: 'avatar',
-      title: 'Michael Jackson',
-      subtitle: 'CEO, Innosupps',
-      logoIcon: 'bpn',
-      body: '"Saras Analytics provides reliable, data-driven insights that empower us to make informed decisions with confidence."'
-    },
-    {
-      id: 3,
-      avatarIcon: 'avatar',
-      title: 'Michael Chen',
-      subtitle: 'Founder, GreenEco Solutions',
-      logoIcon: 'murad',
-      body: '"Saras Analytics has been instrumental in helping us identify and capitalize on sustainable market trends. Their insights are invaluable."'
-    },
-    {
-      id: 4,
-      avatarIcon: 'avatar',
-      title: 'Emily Rodriguez',
-      subtitle: 'Data person, HealthTech',
-      logoIcon: 'downChevronOutlined',
-      body: `"The precision and reliability of Saras Analytics' data have significantly improved our research outcomes."`
-    },
-    {
-      id: 5,
-      avatarIcon: 'avatar',
-      title: 'Alex Kowalski',
-      subtitle: 'CTO, FinServe Global',
-      logoIcon: 'checkOutlined',
-      body: `Saras Analytics platform has streamlined our data processing, allowing us to focus on strategy rather than data management.Highly recommended.`
-    },
-    {
-      id: 6,
-      avatarIcon: 'avatar',
-      title: 'Olivia Thompson',
-      subtitle: 'Head of E-commerce, RetailGiant',
-      logoIcon: 'infoTriangleFilled',
-      body: `"The insights we've gained through Saras Analytics have directly contributed to a 25% boost in our online sales.Their platform is intuitive"`
-    },
-    {
-      id: 7,
-      avatarIcon: 'avatar',
-      title: 'Alex Kowalski',
-      subtitle: 'CTO, FinServe Global',
-      logoIcon: 'closeCircleFilled',
-      body: `Saras Analytics platform has streamlined our data processing, allowing us to focus on strategy rather than data management.Highly recommended.`
-    },
-    {
-      id: 8,
-      avatarIcon: 'avatar',
-      title: 'Olivia Thompson',
-      subtitle: 'Head of E-commerce, RetailGiant',
-      logoIcon: 'locationOutlined',
-      body: `"The insights we've gained through Saras Analytics have directly contributed to a 25% boost in our online sales.Their platform is intuitive"`
-    },
-    {
-      id: 9,
-      avatarIcon: 'avatar',
-      title: 'Alex Kowalski',
-      subtitle: 'CTO, FinServe Global',
-      logoIcon: 'personOutlined',
-      body: `Saras Analytics platform has streamlined our data processing, allowing us to focus on strategy rather than data management.Highly recommended.`
-    },
-    {
-      id: 10,
-      avatarIcon: 'avatar',
-      title: 'Olivia Thompson',
-      subtitle: 'Head of E-commerce, RetailGiant',
-      logoIcon: 'multiConnectionHub',
-      body: `"The insights we've gained through Saras Analytics have directly contributed to a 25% boost in our online sales.Their platform is intuitive"`
-    }, {
-      id: 11,
-      avatarIcon: 'avatar',
-      title: 'Alex Kowalski',
-      subtitle: 'CTO, FinServe Global',
-      logoIcon: 'targetScanOutlined',
-      body: `Saras Analytics platform has streamlined our data processing, allowing us to focus on strategy rather than data management.Highly recommended.`
-    },
-    {
-      id: 12,
-      avatarIcon: 'avatar',
-      title: 'Olivia Thompson',
-      subtitle: 'Head of E-commerce, RetailGiant',
-      logoIcon: 'bpn',
-      body: `"The insights we've gained through Saras Analytics have directly contributed to a 25% boost in our online sales.Their platform is intuitive"`
-    }
-    // Add more testimonials here
-  ];
-}
-
-