@sarasanalytics-com/design-system 0.0.42 → 0.0.43

package/src/app/app.component.ts

@@ -0,0 +1,1341 @@
+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
+  ];
+}
+
+