// import React, { FC, useEffect, useState } from "react";
// import { Routes, Route, Navigate, BrowserRouter } from "react-router-dom";

// import "./App.css";
// // import Buttons from "./components/buttons/Buttons";
// // import Colors from "./components/colors/Colors";
// // import Flipcard from "./components/flipcard/Flipcard";
// // import Fonts from "./components/fonts/Fonts";
// // import Forms from "./components/forms/Forms";
// // import Home from "./components/home/Home";
// // import Levels from "./components/levels/Levels";
// // import Modal from "./components/modal/Modal";
// // import MonthPicker from "./components/monthPicker";
// // import Multiselect from "./components/multiselect/Multiselect";
// // import Stepper from "./components/stepper/Stepper";
// // import Login from "./components/login/Login";


// // import { defineRequiredCwcElements } from "./cwc-elements-definitions"
// // import { createRoot } from "react-dom/client";
// // import Textfield from "./components/textfield/Textfield";
// import onemoretime from "./components/onemoretime/onemoretime";
			import angularTest from "./components/angularTest/angularTest";
			//END IMPORTS - DO NOT REMOVE THIS LINE

// const cwcElementsDefinedPromise = defineRequiredCwcElements()

// export function AppRoutes() {   
//     const [loadingState, setLoadingState] = useState<"loading" | "ok" | "error">("loading");

//     // Wait until we finish loading the CWC microfrontend.
//     // Or else, the methods of the web components won't be available, and the app crashes (not good).
//     useEffect(() => {
//         cwcElementsDefinedPromise.then(({ loadedOk }) => {
//             if (loadedOk) {
//                 setLoadingState("ok");
//             } else {
//                 setLoadingState("error");
//             }
//         });
//     });


//     if (loadingState === "loading") return <h1>Loading...</h1>;

//     if (loadingState === "error") return <h1>Oops... couldn't load Midnight microfrontend</h1>;

//     return (
//         <Routes>
//             <Route path="/" element={<Home />}></Route>
//             <Route path="/colors" element={<Colors />}> </Route>
//             <Route path="/font-sample" element={<Fonts />}> </Route>
//             <Route path="/buttons" element={<Buttons />}></Route>
//             <Route path="/forms" element={<Forms />}></Route>
//             <Route path="/levels" element={<Levels />}></Route>
//             <Route path="/multiselect" element={<Multiselect />}></Route>
//             <Route path="/stepper" element={<Stepper />}></Route>
//             <Route path="/modal" element={<Modal />}></Route>
//             <Route path="/monthPicker" element={<MonthPicker />}></Route>
//             <Route path="/login" element={<Login />}></Route>
//             <Route path="/flipcard" element={<Flipcard />}></Route>
//             <Route path="/textfield" element={<Textfield />}></Route>
            //  <Route path="/onemoretime" element={<onemoretime />}></Route>
			<Route path="/angularTest" element={<angularTest />}></Route>
			{/* END ROUTES - DO NOT REMOVE THIS LINE */}
//             <Route
//                 path="*"
//                 element={<Navigate to="/" replace />}
//             />
//         </Routes>
//     );
// }



// // @ts-ignore
// const styles = [...document.getElementsByTagName('style')].map(tag => tag.innerText).join('')

// /**
//  * @param basename To make the router work, basename should be the path where the host app is loading foundations.
//  * For example, if https://host.com/foundations loads foundations, then basename should be '/foundations'
//  */
// const AppMFE: FC<{ basename?: string }> = ({ basename }) => (
//     <>
//         <style>
//      {`${styles}`} 
//     {`
//     :root {
//     /* base colors */
//     --white: #FFFFFF;
//     --midnight-blue: #000048;
//     --black: #000000;

//     /* accent-color */
//     --dark-teal: #06C7CC;
//     --medium-teal: #26EFE9;
//     --light-teal: #97F5F7;

//     --dark-blue: #2F78C4;
//     --medium-blue: #6AA2DC;
//     --light-blue: #92BBE6;
//     --ultra-light-blue: #E0EBF6;

//     --dark-plum: #2E308E;
//     --medium-plum: #7373D8;
//     --light-plum: #85A0F9;

//     /* neutral colors */
//     --pressed: #222222;
//     --dark-gray: #53565A;
//     --medium-gray: #97999B;
//     --light-gray: #D0D0CE;
//     --very-light-gray: #EFEFEE;
//     --ultra-light-gray: #F6F6F5;

//     /* highlight color */
//     --highlight-red: #B81F2D;
//     --highlight-yellow: #E9C71D;

//     --form-element-border: #22222299;
//     --form-element-label: #C4C4C4;

//     --nightmode-dropdown: #00006C;
//     --nightmode-dropdown-hover: #343695;

//     --multi-checkbox-text: #6C757D;

//     --dropdown-shadow: #00000040;
//     --dropdown-option-border: #F2F2F2;
//     --dropdown-option-hover: #FAFAFA;

//     /* layout */
//     --big-gap: 50px;
//     --medium-gap: 25px;
//     --small-gap: 10px;

//     /* buttons */
//     --btn-padding-h: 12px;
//     --btn-padding-v: 32px;
//     --btn-border-width: 3px;
//     --btn-border-radius: 3px;

//     /* multiselect */
//     --multiselect-width: 300px;
//     --multiselect-height: 58px;
//     --multiselect-title-height: 24px;
//     --multiselect-toggle-height: 34px;
//     --multiselect-border-size: 1px;
//     --multiselect-item-height: 56px;

//     /* checkbox-icon */
//     --checkbox-icon-width: 32px;
//     --checkbox-icon-height: 32px;
// }

// @font-face {
//     font-family: 'Gellix';
//     src: url('/fonts/gellix-regular_r.woff2') format('woff2');
//     font-weight: 400;
//     font-style: normal;
//     text-rendering: optimizeLegibility;
//     font-display: swap;
// }

// @font-face {
//     font-family: 'Gellix';
//     src: url('/fonts/gellix-regularitalic_r.woff2') format('woff2');
//     font-weight: 400;
//     font-style: italic;
//     text-rendering: optimizeLegibility;
//     font-display: swap;
// }

// @font-face {
//     font-family: 'Gellix';
//     src: url('/fonts/gellix-semibold_r.woff2') format('woff2');
//     font-weight: 600;
//     font-style: normal;
//     text-rendering: optimizeLegibility;
//     font-display: swap;
// }

// @font-face {
//     font-family: 'Gellix';
//     src: url('/fonts/gellix-semibolditalic_r.woff2') format('woff2');
//     font-weight: 600;
//     font-style: italic;
//     text-rendering: optimizeLegibility;
//     font-display: swap;
// }

// @font-face {
//     font-family: 'Gellix';
//     src: url('/fonts/gellix-light_r.woff2') format('woff2');
//     font-weight: 300;
//     font-style: normal;
//     text-rendering: optimizeLegibility;
//     font-display: swap;
// }

// @font-face {
//     font-family: 'Gellix';
//     src: url('/fonts/gellix-lightitalic_r.woff2') format('woff2');
//     font-weight: 300;
//     font-style: italic;
//     text-rendering: optimizeLegibility;
//     font-display: swap;
// }

// .light {
//     font-weight: 300;
// }

// .regular {
//     font-weight: 400;
// }

// .semi-bold {
//     font-weight: 600;
// }

// .italic {
//     font-style: italic;
// }

// .wrapper {
//     width: 90ch;
//     margin-left: 25%;
//     margin-bottom: 5em;
//   }

//   button[disabled],
//   button[disabled]:active,
//   button[disabled]:hover {
//       cursor: not-allowed;
//       pointer-events: none;
//       opacity: 0.3;
//   }
  
//   .btn {
//       cursor: pointer;
//       text-decoration: none;
//       display: flex;
//       flex-direction: row;
//       justify-content: center;
//       align-items: center;
//       padding: var(--btn-padding-v, 32px) var(--btn-padding-h, 12px);
//       gap: 15px;
//       border-radius: var(--btn-border-radius, 3px);
//       font-family: 'Gellix';
//       font-weight: 600;
//       font-size: 20px;
//       line-height: 20px;
//       height: 52px;
//   }
  
//   /* primary button */
  
//   .btn-primary {
//       border: var(--btn-border-width, 2px) solid var(--btn-primary-border-color);
//       background-color: var(--btn-primary-background-color);
//       color: var(--btn-primary-color);
//       --btn-svg-color: var(--btn-primary-color);
//   }
  
//   .btn-primary:hover {
//       background-color: var(--light-teal);
//       color: var(--btn-primary-color);
//   }
  
//   .btn-primary:active {
//       border: var(--btn-border-width, 2px) solid var(--dark-blue);
//       background-color: var(--btn-primary-background-color);
//       color: var(--btn-primary-color);
//   }
  
  
//   /* secondary button */
  
//   .btn-secondary {
//       border: var(--btn-border-width, 2px) solid var(--btn-secondary-border-color);
//       background-color: var(--btn-secondary-background-color);
//       color: var(--btn-secondary-color);
//       --btn-svg-color: var(--btn-secondary-color);
//   }
  
//   .btn-secondary:hover {
//       border: var(--btn-border-width, 2px) solid var(--midnight-blue);
//       color: var(--midnight-blue);
//       --btn-svg-color: var(--midnight-blue);
//   }
  
//   .btn-secondary:active {
//       border: var(--btn-border-width, 3px) solid var(--btn-secondary-border-color);
//       color: var(--btn-secondary-color);
//       --btn-svg-color: var(--btn-secondary-color);
//   }
  
  
//   /* link styled button */
  
//   .btn-link {
//       border: 0;
//       background-color: transparent;
//       color: var(--link-color);
//       --btn-svg-color: var(--link-color);
//       height: max-content;
//       width: max-content;
//       padding: 4px 8px;
//       border: 2px solid transparent;
//   }
  
//   .btn-link:hover {
//       color: var(--midnight-blue);
//       --btn-svg-color: var(--midnight-blue);
//   }
  
//   .btn-link:active {
//       color: var(--accent2-dark);
//       --btn-svg-color: var(--accent2-dark);
//       border: 2px solid var(--accent2-dark);
//       border-radius: 4px;
//   }
  
  
//   /* svg inside the button */
  
//   .btn-primary>svg>path {
//       stroke: var(--btn-primary-color);
//   }
  
//   .btn-secondary>svg>path {
//       stroke: var(--btn-secondary-color);
//   }
  
//   .btn-link>svg>path {
//       stroke: var(--link-color);
//   }
  
//   /**
//    * Add the .svg-fill class to the <path> element if it needs to be filled
//    */
//   .btn-primary .svg-fill {
//       stroke: unset;
//       fill: var(--btn-primary-color);
//   }
  
//   .btn-primary:active .svg-fill {
//       stroke: unset;
//       fill: var(--medium-blue);
//   }
  
//   .btn-secondary .svg-fill {
//       stroke: unset;
//       fill: var(--btn-secondary-color);
//   }
  
//   .btn-link .svg-fill {
//       stroke: unset;
//       fill: var(--btn-secondary-color);
//   }
  
  
//   /* not a button */
  
//   .link[disabled],
//   .link[disabled]:active,
//   .link[disabled]:hover {
//       cursor: not-allowed;
//       pointer-events: none;
//       opacity: 0.3;
//   }
  
//   .link {
//       cursor: pointer;
//       text-decoration: underline;
//       color: var(--link-color);
//   }
  
//   /* Arrow icons */
//   .btn-arrow-left {
//       padding-left: 21px;
//   }
//   .btn-arrow-left::before {
//       content: "";
//       width: 10px;
//       height: 20px;
//       background-color: var(--btn-svg-color);
//       mask: url("https://rd-latam.cognizantsoftvision.com/img/btn-arrow-left.svg") no-repeat center;
//       -webkit-mask: url("https://rd-latam.cognizantsoftvision.com/img/btn-arrow-left.svg") no-repeat center;
//   }
//   .btn-arrow-right {
//       padding-right: 21px;
//   }
//   .btn-arrow-right::after {
//       content: "";
//       width: 10px;
//       height: 20px;
//       background-color: var(--btn-svg-color);
//       mask: url("https://rd-latam.cognizantsoftvision.com/img/btn-arrow-right.svg") no-repeat center;
//       -webkit-mask: url("https://rd-latam.cognizantsoftvision.com/img/btn-arrow-right.svg") no-repeat center;
//   }

// input,
// select,
// textarea {
//     font-family: inherit;
//     font-size: 100%;
// }

// fieldset {
//     position: relative;
// }

// legend {
//     position: absolute;
//     bottom: 0;
//     right: 0;
// }

// /* input:focus,
// textarea:focus {
//     background: rgba(0, 0, 0, .1);
//     border-radius: 5px;
// } */

// label {
//     font: .8em "Gellix", sans-serif;
//     color: var(--dark-gray);
//     display:inline-block;
// }



// input[type=text], [type=email] {
//     width: 100%;
//     padding: 12px 0;
//     margin: 2px;
//     box-sizing: border-box;
//     border: none;
//     border-bottom: 1px solid rgba(34, 34, 34, 0.6);
// }


// textarea {
//     width: 100%;
//     height: 150px;
//     padding: 12px 20px;
//     margin-top:5px;
//     box-sizing: border-box;
//     border: 1px solid rgba(34, 34, 34, 0.6);
//     border-radius: 4px;
//     resize: none;
//   }


// form {
//     display: flex;
//     flex-direction: column;
//     gap: var(--medium-gap);
//     width: 90ch;
// }

// .stepper-wrapper {
//     display: flex;
//     justify-content: space-between;
// }

// .step {
//     position: relative;
//     display: flex;
//     font-size: 12px;
//     font-weight: 600;
//     flex-direction: column;
//     align-items: center;
//     flex: 1;
//     transition: color 0.3s ease 0s;
// }

// .step::before {
//     position: absolute;
//     content: "";
//     width: 100%;
//     top: 20px;
//     left: -50%;
//     z-index: 2;  
// }

// .stepper-wrapper .step:not(:last-child):after {
//     position: absolute;
//     content: "";
//     border-bottom: 4px solid #ccc;
//     width: 100%;
//     top: 13px;
//     left: 50%;
//     z-index: 2;
// }

// .step.done::after {
//     border-color: var(--dark-plum);
// }

// .step .step-bullet {
//     position: relative;
//     z-index: 5;
//     display: flex;
//     justify-content: center;
//     align-items: center;
//     width: 26px;
//     height: 26px;
//     border-radius: 50%;
//     margin-bottom: 6px;
//     border: 2px solid var(--dark-plum);
// }

// .step.done .step-bullet {
//     background-color: var(--white);
//     color: var(--dark-plum);

// }

// .step.done .step-bullet::after {
//     content: " ";
//     display: block;
//     background: transparent;
//     border-width: 2px;
//     border-style: none none solid solid;
//     position: relative;
//     height: 4px;
//     width: 8px;
//     border-color: var(--dark-plum);
//     transition: -webkit-transform 0.3s ease 0s, transform 0.3s ease 0s, height 0.3s ease 0s, width 0.3s ease 0s;
//     transform: rotate(-45deg);}

// .step.done .step-description {
//     color: var(--very-dark-gray);
// }

// .step.active .step-bullet {
//     background-color: var(--dark-plum);
//     color: var(--white);
// }

// .step.active .step-description {
//     color: var(--dark-plum);
// }

// .step.inactive .step-bullet {
//     margin-bottom: 8px;
//     background-color: var(--white);
//     border: 1px solid var(--light-gray);
//     color: var(--light-gray);
// }

// .step.inactive .step-description {
//     color: var(--medium-gray);
//     font-weight: 400;
// }

// .container {
//     display: flex;
//     width: 100%;
//     gap: 1rem;
//     flex-wrap: wrap;
//   }
  
//   .front {
//     display: flex;
//     flex-direction: column;
//     align-items: center;
//     justify-content: space-evenly;
//     height: 100%;
//   }
  
//   .front h1 {
//     color: white;
//     font-size: 22px;
//   }
  
//   .back h1 {
//     font-size: 18px;
//     background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(152.5deg, #102E84 5.41%, #54B2CB 93.42%);
//     -webkit-background-clip: text;
//     -webkit-text-fill-color: transparent;
//     background-clip: text;
//   }
  
//     `}
//         </style>
//         <link id="linkGlobalStyles" rel="stylesheet" href="https://rd-latam.cognizantsoftvision.com/assets/foundations-all-styles.css"></link>
//         <BrowserRouter basename={basename}>
//             <AppRoutes />
//         </BrowserRouter>
//     </>

// );


// class StandaloneWebComponent extends HTMLElement {
//     mountPoint!: HTMLSpanElement;
//     styleTag: HTMLStyleElement;
    
//     // This wrapper is required in order to use `useState`,
//     // so AppMFE will listen to React attribute changes.
//     AppMFEWrapper: FC = () => {
//         const [basename, setBasename] = useState<undefined | string>(this.getAttribute("basename") ?? undefined);
//         this.wrapperBasenameSetter = setBasename;
//         return <AppMFE basename={basename} />
//     }
//     // We save the React state setter to call it from attributeChangedCallback.
//     wrapperBasenameSetter?: (basename: undefined | string) => void;
    
//     constructor() {
//         super()
//         this.styleTag = document.createElement('style') as HTMLStyleElement;
//         this.styleTag.innerHTML = `${styles}`
//     }

//     attributeChangedCallback(name: string, oldValue: string, newValue: string) {
//         if (name === "basename") {
//             if (this.wrapperBasenameSetter) {
//                 this.wrapperBasenameSetter(newValue)
//             }
//         }
//     }

//     connectedCallback() {
//         const mountPoint = document.createElement("span");
//         mountPoint.appendChild(this.styleTag)
//         this.attachShadow({ mode: "open" }).appendChild(mountPoint);

//         const root = createRoot(mountPoint); // createRoot(container!) if you use TypeScript
//         root.render(<this.AppMFEWrapper />);
        
//         // const linkGlobalStyles = this.shadowRoot?.getElementById('linkGlobalStyles');

//         // this.styleTag?.addEventListener('load', () => {
//         //     console.log('loaded!!!');
            
//         // })
        
//         // setTimeout(() => {console.log('connected!', this.styleTag, this.linkGlobalStyles)}, 1000)

//     }
// }

// const init = () => {
//     window.customElements.get("cwc-foundations") || window.customElements.define("cwc-foundations", StandaloneWebComponent);
//     return Promise.resolve('cwc-foundations')
// }


// export default init();