@idsoftsource/initial-process 1.1.0 → 1.1.1

package/fesm2022/idsoftsource-initial-process.mjs

@@ -1171,11 +1171,11 @@ class PrivacyPolicyComponent {
     branding;
     PrivacyAndTerms;
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PrivacyPolicyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PrivacyPolicyComponent, isStandalone: false, selector: "app-privacy-policy", inputs: { title: "title", branding: "branding", PrivacyAndTerms: "PrivacyAndTerms" }, ngImport: i0, template: "<div class=\"privacy-policy-modal\">\r\n  <!-- Header -->\r\n  <!-- <div class=\"header\">\r\n    <h1>Website Privacy Policy</h1>\r\n  </div> -->\r\n\r\n  <!-- Logo and Address -->\r\n\r\n\r\n</div>\r\n\r\n<div style=\"margin-left: 10px;margin-right: 0px;font-size: 13.5px;\">\r\nLast modified: {{PrivacyAndTerms?.modifiedDate}}\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Introduction</div>\r\n{{PrivacyAndTerms?.companyName}}, LLC, a {{PrivacyAndTerms?.state}} limited liability company ( <span class=\"h\">\"Company\"</span>   or <span class=\"h\">\"We\"</span>), \r\nrespect your privacy and are committed to protecting it through our compliance with this \r\npolicy. \r\n\r\n<br>\r\nThis policy describes the types of information we may collect from you or that you may \r\nprovide when you visit the website www.bootog.com (our \"Website\") and our practices \r\nfor collecting, using, maintaining, protecting, and disclosing that information. \r\n<br>\r\nThis policy applies to information we collect: \r\n<br>\r\nOn this Website. \r\n<br>\r\nIn email, text, and other electronic messages between you and this Website. \r\nThrough mobile and desktop applications you download from this Website, which \r\nprovide dedicated non-browser-based interaction between you and this Website. \r\nWhen you interact with our advertising and applications on third-party websites and \r\nservices. \r\n<br>\r\nIt does not apply to information collected by: \r\n<br>\r\nUs offline or through any other means, including on any other website operated by \r\nCompany or any third party (including our affiliates and subsidiaries); or  \r\nAny third party (including our affiliates and subsidiaries), including through any \r\napplication or content (including advertising) that may link to or be accessible from or \r\nthrough the Website. \r\n<br>\r\nPlease read this policy carefully to understand our policies and practices regarding your \r\ninformation and how we will treat it. If you do not agree with our policies and practices, \r\nyour choice is not to use our Website. By accessing or using this Website, you agree to \r\nthis privacy policy. This policy may change from time to time (see Changes to Our \r\nPrivacy Policy). Your continued use of this Website after we make changes is deemed \r\nto be acceptance of those changes, so please check the policy periodically for updates. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Children Under the Age of 16</div> \r\nOur Website is not intended for children under 16 years of age. No one under age 16 \r\nmay provide any information to or on the Website. We do not knowingly collect personal \r\ninformation from children under 16. If you are under 16, do not use or provide any \r\ninformation on this Website or through any of its features, register on the Website, make \r\nany purchases through the Website, use any of the interactive or public comment \r\nfeatures of this Website, or provide any information about yourself to us, including your \r\nname, address, telephone number, email address, or any screen name or user name \r\nyou may use. If we learn we have collected or received personal information from a \r\nchild under 16 without verification of parental consent, we will delete that information. If \r\nyou believe we might have any information from or about a child under 16, please \r\ncontact us at {{PrivacyAndTerms?.email}}. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Information We Collect About You and How We Collect It </div>\r\n\r\nWe collect several types of information from and about users of our Website, including \r\ninformation: \r\n<br>\r\nBy which you may be personally identified, such as name, postal address, email \r\naddress, telephone number, social security number, any other personally identifiable \r\ninformation or any other identifier by which you may be contacted online or offline \r\n(<span class=\"h\">\"personal information\"</span>) \r\n<br>\r\nThat is about you but individually does not identify you; and/or \r\n<br>\r\nAbout your internet connection, the equipment you use to access our Website, and \r\nusage details. <br>\r\nWe collect this information: \r\n<br>\r\nDirectly from you when you provide it to us. \r\n<br>\r\nAutomatically as you navigate through the site. Information collected automatically may \r\ninclude usage details, IP addresses, and information collected through cookies, web \r\nbeacons, and other tracking technologies. \r\nFrom third parties, for example, our business partners. \r\nInformation You Provide to Us   \r\n<br>\r\nThe information we collect on or through our Website may include: \r\n<br>\r\nInformation that you provide by filling in forms on our Website. This includes information \r\nprovided at the time of registering to use our Website, subscribing to our service, \r\nposting material, or requesting further services. We may also ask you for information \r\nwhen you report a problem with our Website. \r\n<br>\r\nRecords and copies of your correspondence (including email addresses), if you contact \r\nus. \r\n<br>\r\nYour responses to surveys that we might ask you to complete for research purposes. \r\nDetails of transactions you carry out through our Website and of the fulfillment of your \r\norders. You may be required to provide financial information before placing an order \r\nthrough our Website. \r\n<br>\r\nYour search queries on the Website. \r\n<br>\r\nAny other information you may provide by using the Website. \r\n<br>\r\nYou also may provide information to be published or displayed (hereinafter, <span class=\"h\">\"posted\"</span> ) \r\non public areas of the Website, or transmitted to other users of the Website or third \r\nparties (collectively, <span class=\"h\">\"User Contributions\"</span> ). Your User Contributions are posted on and \r\ntransmitted to others at your own risk. Although we limit access to certain pages, please \r\nbe aware that no security measures are perfect or impenetrable. Additionally, we cannot \r\ncontrol the actions of other users of the Website with whom you may choose to share \r\nyour User Contributions. Therefore, we cannot and do not guarantee that your User \r\nContributions will not be viewed by unauthorized persons. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">IInformation We Collect Through Automatic Data Collection Technologies</div>\r\n\r\n  \r\nAs you navigate through and interact with our Website, we may use automatic data \r\ncollection technologies to collect certain information about your equipment, browsing \r\nactions, and patterns, including: \r\n<br>\r\nDetails of your visits to our Website, including but not limited to traffic data, location data, \r\nlogs, and other communication data and the resources that you access and use on the \r\nWebsite. \r\n<br>\r\nInformation about your computer and internet connection, including your IP address, \r\noperating system, and browser type. \r\n<br>\r\nThe information we collect automatically may include personal information, or we may \r\nmaintain it or associate it with personal information we collect in other ways or receive \r\nfrom third parties. It helps us to improve our Website and to deliver a better and more\r\npersonalized service, including by enabling us to:\r\n<br>\r\nEstimate our audience size and usage patterns.\r\n<br>\r\nStore information about your preferences, allowing us to customize our Website \r\naccording to your individual interests.\r\n<br>\r\nSpeed up your searches.\r\n<br>\r\nRecognize you when you return to our Website.\r\n<br>\r\nThe technologies we use for this automatic data collection may include:\r\n<br>\r\n<span class=\"h\">Cookies (or browser cookies).</span>  A cookie is a small file placed on the hard drive of your \r\ncomputer. You may refuse to accept browser cookies by activating the appropriate \r\nsetting on your browser. However, if you select this setting you may be unable to access \r\ncertain parts of our Website. Unless you have adjusted your browser setting so that it \r\nwill refuse cookies, our system will issue cookies when you direct your browser to our \r\nWebsite. \r\n<br>\r\n<span class=\"h\">Web Beacons.</span>  Pages of our Website and our emails may contain small electronic files \r\nknown as web beacons (also referred to as clear gifs, pixel tags, and single-pixel gifs) \r\nthat permit the Company, for example, to count users who have visited those pages or \r\nopened an email and for other related website statistics (for example, recording the \r\npopularity of certain website content and verifying system and server integrity). \r\n<br>\r\n<span class=\"h\">Flash Cookies.</span>  Certain features of our Website may use local stored objects (or Flash \r\ncookies) to collect and store information about your preferences and navigation to, from, \r\nand on our Website. Flash cookies are not managed by the same browser settings as \r\nare used for browser cookies. For information about managing your privacy and security \r\nsettings for Flash cookies, see Choices About How We Use and Disclose Your \r\nInformation.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Third-Party Use of Cookies and Other Tracking Technologies</div>\r\n\r\nSome content or applications, including advertisements, on the Website may be served \r\nby third-parties, including advertisers, ad networks and servers, content providers, and \r\napplication providers. These third parties may use cookies alone or in conjunction with \r\nweb beacons or other tracking technologies to collect information about you when you \r\nuse our website. The information they collect may be associated with your personal \r\ninformation or they may collect information, including personal information, about your \r\nonline activities over time and across different websites and other online services. They \r\nmay use this information to provide you with interest-based (behavioral) advertising or \r\nother targeted content. \r\n<br>\r\nWe do not control these third parties' tracking technologies or how they may be used. If \r\nyou have any questions about an advertisement or other targeted content, you should \r\ncontact the responsible provider directly. For information about how you can opt out of \r\nreceiving targeted advertising from many providers, see Choices About How We Use \r\nand Disclose Your Information.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">How We Use Your Information</div>\r\n\r\nWe use information that we collect about you or that you provide to us, including any \r\npersonal information:\r\n<br>\r\nTo present our Website and its contents to you.\r\n<br>\r\nTo provide you with information, products, or services that you request from us.\r\n<br>\r\nTo fulfill any other purpose for which you provide it.\r\n<br>\r\nTo provide you with notices about your account or subscription, including expiration and \r\n\u00A92025 {{PrivacyAndTerms?.companyName}}\r\n<br>\r\nProprietary and Confidential Information. Strictly for use by {{PrivacyAndTerms?.companyName}} approved customers only.\r\n<br>\r\nDuplication or alteration is strictly prohibited without prior written consent.\r\nrenewal notices.\r\n<br>\r\nTo carry out our obligations and enforce our rights arising from any contracts entered \r\ninto between you and us, including for billing and collection.\r\n<br>\r\nTo notify you about changes to our Website or any products or services we offer or \r\nprovide though it.\r\n<br>\r\nTo allow you to participate in interactive features on our Website.\r\n<br>\r\nIn any other way we may describe when you provide the information.\r\n<br>\r\nFor any other purpose with your consent.\r\n<br>\r\nWe may also use your information to contact you about goods and services that may be \r\nof interest to you. If you do not want us to use your information in this way, please \r\n[check the relevant box located on the form on which we collect your data adjust your \r\nuser preferences in your account profile. For more information, see Choices About How \r\nWe Use and Disclose Your Information.\r\n<br>\r\nWe may use the information we have collected from you to enable us to display \r\nadvertisements to our advertisers' target audiences. Even though we do not disclose \r\nyour personal information for these purposes without your consent, if you click on or \r\notherwise interact with an advertisement, the advertiser may assume that you meet its \r\ntarget criteria.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Disclosure of Your Information</div>\r\n\r\nWe may disclose aggregated information about our users without restriction. \r\nWe may disclose personal information that we collect or you provide as described in this \r\nprivacy policy:\r\n<br>\r\nTo our subsidiaries and affiliates.\r\n<br>\r\nTo contractors, service providers, and other third parties we use to support our business.\r\n<br>\r\nTo a buyer or other successor in the event of a merger, divestiture, restructuring, \r\nreorganization, dissolution, or other sale or transfer of some or all of our assets, whether \r\nas a going concern or as part of bankruptcy, liquidation, or similar proceeding, in which \r\npersonal information held by us about our Website users is among the assets \r\ntransferred.\r\n<br>\r\nTo third parties to market their products or services to you if you have not opted out of \r\nthese disclosures. For more information, see Choices About How We Use and Disclose \r\nYour Information.\r\n<br>\r\nTo fulfill the purpose for which you provide it. \r\n<br>\r\nFor any other purpose disclosed by us when you provide the information.\r\n<br>\r\nWith your consent.\r\n<br>\r\nWe may also disclose your personal information:\r\n<br>\r\nTo comply with any court order, law, or legal process, including to respond to any \r\ngovernment or regulatory request.\r\n<br>\r\nTo enforce or apply our terms of use and other agreements, including for billing and \r\ncollection purposes.\r\n<br>\r\nIf we believe disclosure is necessary or appropriate to protect the rights, property, or \r\nsafety of our company, our customers, or others. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Choices About How We Use and Disclose Your Information</div>\r\n\r\nWe strive to provide you with choices regarding the personal information you provide to \r\nus. We have created mechanisms to provide you with the following control over your \r\ninformation: \r\n<br>\r\n<span class=\"h\">Tracking Technologies and Advertising.</span>  You can set your browser to refuse all or \r\nsome browser cookies, or to alert you when cookies are being sent. If you disable or \r\nrefuse cookies, please note that some parts of this site may then be inaccessible or not \r\nfunction properly.\r\n<br>\r\n<span class=\"h\">Disclosure of Your Information for Third-Party Advertising.</span>  If you do not want us to \r\nshare your personal information with unaffiliated or non-agent third parties for \r\npromotional purposes, you can opt-out by logging into the Website and adjusting your \r\nuser preferences in your account profile or by sending us an email with your request to \r\n{{PrivacyAndTerms?.privacyPolicyUrl}}.\r\n<br>\r\n<span class=\"h\">Promotional Offers from the Company.</span>  If you do not wish to have your email address \r\nor contact information used by the Company to promote our own or third parties' \r\nproducts or services, you can opt-out by logging into the Website and adjusting your \r\nuser preferences in your account profile or by sending us an email stating your request \r\nto {{PrivacyAndTerms?.email}}. If we have sent you a promotional email, you may send us a \r\nreturn email asking to be omitted from future email distributions.\r\n<br> \r\n<span class=\"h\">Targeted Advertising.</span>  If you do not want us to use information that we collect or that \r\nyou provide to us to deliver advertisements according to our advertisers' target\u0002audience preferences, you can opt-out by sending us an email stating your request to \r\n{{PrivacyAndTerms?.email}}.\r\n<br> \r\nWe do not control third parties' collection or use of your information to serve interest\u0002based advertising. However these third parties may provide you with ways to choose \r\nnot to have your information collected or used in this way. You can opt out of receiving \r\ntargeted ads from members of the Network Advertising Initiative (\"NAI\") on the NAI's \r\nwebsite.\r\n<br>\r\nResidents of certain states, such as California, Nevada, Colorado, Connecticut, Virginia, \r\nand Utah may have additional personal information rights and choices. Please see Your \r\nState Privacy Rights for more information.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Accessing and Correcting Your Information</div>\r\nYou can review and change your personal information by logging into the Website and \r\nvisiting your account profile page.\r\n<br>\r\nResidents of certain states, such as California, Nevada, Colorado, Virginia, and Utah \r\nmay have additional personal information rights and choices. Please see Your State \r\nPrivacy Rights for more information.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Your State Privacy Rights</div>\r\nState consumer privacy laws may provide their residents with additional rights regarding \r\nour use of their personal information.\r\n<br> \r\nColorado, Connecticut, Virginia, and Utah each provide their state residents with rights \r\nto:\r\n<br>\r\nConfirm whether we process their personal information.\r\n<br>\r\nAccess and delete certain personal information.\r\n<br>\r\nData portability.\r\n<br>\r\nOpt-out of personal data processing for targeted advertising and sales.\r\n<br>\r\nColorado, Connecticut, and Virginia also provide their state residents with rights to:\r\n<br>\r\nCorrect inaccuracies in their personal information, taking into account the information's \r\nnature processing purpose.\r\n<br>\r\nOpt-out of profiling in furtherance of decisions that produce legal or similarly significant\r\neffects. \r\n<br>\r\nTo exercise any of these rights please send an email to {{PrivacyAndTerms?.copyrightPolicyLink}}. To appeal a \r\ndecision regarding a consumer rights request send an email to {{PrivacyAndTerms?.email}}.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">For California Residents Only:</div>\r\n<span class=\"h\">California Privacy Rights</span> \r\n<br>\r\nThis section applies solely to individuals who reside in the State of California \r\n(\u201Cconsumers\u201D or \u201Cyou\u201D). We adopt this notice to comply with the California Consumer \r\nPrivacy Act of 2018 (CCPA), as amended by the California Privacy Rights Act of 2020 \r\n(CPRA), and any terms defined in the CCPA/CPRA have the same meaning when used \r\nin this section.\r\n<br>\r\n<span class=\"h\">Your Rights Under California Law</span>\r\n\r\n<br>\r\nIf you are a California resident, you have the following rights with respect to your \r\npersonal information:\r\n<br>\r\n<span class=\"h\">Right to Know/Access \u2013</span>\r\n You may request that we disclose to you the categories and \r\nspecific pieces of personal information we have collected about you, as well as the \r\nsources, purposes for collection, and categories of third parties to whom the information \r\nis disclosed.\r\n<br>\r\n<span class=\"h\">Right to Delete \u2013</span>\r\n You may request that we delete personal information we have \r\ncollected from you, subject to certain exceptions.\r\n<br>\r\n<span class=\"h\">Right to Correct \u2013</span>\r\n You may request that we correct inaccurate personal information \r\nthat we maintain about you.\r\n<br>\r\n<span class=\"h\">Right to Opt Out of Sale/Sharing \u2013 </span>\r\nYou may request that we do not \u201Csell\u201D or \u201Cshare\u201D \r\nyour personal information (as those terms are defined under the CCPA/CPRA). We do \r\nnot sell your personal information in the traditional sense, but if our practices change we \r\nwill update this policy and provide you with a method to exercise this right.\r\n<br>\r\n<span class=\"h\">Right to Limit Use of Sensitive Personal Information \u2013</span>\r\n\r\n If we collect sensitive \r\npersonal information (such as government ID numbers, precise geolocation, or financial \r\naccount information), you may direct us to limit its use to what is reasonably necessary \r\nto provide the services requested.\r\n<br>\r\n<span class=\"h\">Right of Non-Discrimination \u2013</span>\r\n\r\n We will not discriminate against you for exercising your \r\nprivacy rights.\r\n<br>\r\n<span class=\"h\">Exercising Your Rights</span>\r\n\r\n\r\n<br>\r\nTo exercise any of the rights described above, please submit a verifiable consumer \r\nrequest to us by:\r\n<br>\r\nEmail: {{PrivacyAndTerms?.email}}\r\n<br>\r\nPhone: {{PrivacyAndTerms?.phone}}\r\n<br>\r\nOnline request form: {{PrivacyAndTerms?.requestForm}}\r\n<br>\r\nOnly you, or someone legally authorized to act on your behalf, may make a verifiable \r\nconsumer request.\r\n<br>\r\n<span class=\"h\">Information We Collect\r\n</span>\r\n\r\n<br>\r\nIn the past 12 months, we may have collected the following categories of personal \r\ninformation about consumers:\r\n<br>\r\nIdentifiers (such as name, email address, phone number)\r\n<br>\r\nInternet or network activity (such as browsing history on our website)\r\n<br>\r\nCommercial information (such as records of products or services purchased)\r\n<br>\r\n\r\nGeolocation data (if you enable location services)\r\n<br>\r\nInferences drawn from other personal information (such as preferences or interests)\r\nWe collect this information for the purposes described in the \u201CHow We Use Your \r\nInformation\u201D section of our general Privacy Policy.\r\n<br>\r\n<span class=\"h\">Data Retention </span>\r\n\r\n<br>\r\nWe retain personal information for as long as necessary to fulfill the purposes described \r\nin this Privacy Policy, unless a longer retention period is required or permitted by law.\r\n<br>\r\n<span class=\"h\">Shine the Light Law </span>\r\n\r\n\r\n<br>\r\nCalifornia residents may also request certain information regarding our disclosure of \r\npersonal information to third parties for their direct marketing purposes under California \r\nCivil Code \u00A71798.83 (\u201CShine the Light\u201D law). To make such a request, please contact us \r\nat [Insert contact email].\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Data Security</div>\r\nUnfortunately, the transmission of information via the internet is not completely secure. \r\nAlthough we do our best to protect your personal information, we cannot guarantee the \r\nsecurity of your personal information transmitted to our Website. Any transmission of \r\npersonal information is at your own risk. We are not responsible for circumvention of \r\nany privacy settings or security measures contained on the Website.] \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Changes to Our Privacy Policy</div>\r\nIt is our policy to post any changes we make to our privacy policy on this page. If we \r\nmake material changes to how we treat our users' personal information, we will notify \r\nyou through a notice on the Website home page. The date the privacy policy was last \r\nrevised is identified at the top of the page. You are responsible for ensuring we have an \r\nup-to-date active and deliverable email address for you, and for periodically visiting our \r\nWebsite and this privacy policy to check for any changes.\r\n<br>\r\nContact Information\r\n<br>\r\nTo ask questions or comment about this privacy policy and our privacy practices, \r\ncontact us at: \r\n<br>\r\n{{PrivacyAndTerms?.email}}\r\n</div>\r\n<div class=\"logo-section mt-5 text-center\" >\r\n  <img [src]=\"branding?.logo\" [alt]=\"branding?.displayName\" />\r\n\r\n  <!-- <p class=\"address\">\r\n    {{ PrivacyAndTerms?.address1 }}\r\n    {{ PrivacyAndTerms?.city }}\r\n    {{ PrivacyAndTerms?.state }}\r\n    {{ PrivacyAndTerms?.country }} {{ PrivacyAndTerms?.zipCode }}\r\n    \r\n  </p> -->\r\n</div>\r\n<div class=\"content\">\r\n    <p>\r\n      \u00A9{{PrivacyAndTerms?.currentYear}} {{PrivacyAndTerms?.companyName}}.<br>\r\n      Proprietary and Confidential Information. Strictly for use by {{PrivacyAndTerms?.companyName}}t approved customers only.<br>\r\n      Duplication or alteration is strictly prohibited without prior written consent.\r\n    </p>\r\n    <!-- <p class=\"last-modified\">Last modified: {{PrivacyAndTerms?.modifiedDate}}</p> -->\r\n  </div>\r\n", styles: [".privacy-policy-modal{background:#fff;padding:0 20px;max-width:650px;margin:auto;font-family:Arial,sans-serif;display:flex;flex-direction:column;align-items:center}.privacy-policy-modal .header{text-align:center;margin-bottom:40px}.privacy-policy-modal .header h1{font-size:26px;font-weight:700;margin:0}.privacy-policy-modal .modal-footer{width:100%;display:flex;justify-content:center}.privacy-policy-modal .modal-footer .btn{padding:8px 25px;font-size:14px}.section-title{color:#000;text-decoration:underline;font-weight:700}.content{font-size:14px;line-height:1.7;text-align:center;margin-bottom:40px;margin-top:10px}.content .last-modified{margin-top:20px;font-size:12px;color:gray}.h{color:#000;font-weight:700}.logo-section{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:-10px;overflow:visible;min-height:42px}.logo-section img{display:block;max-width:180px;height:auto;margin-bottom:15px;position:relative;z-index:2}.logo-section .address{font-size:14px;line-height:1.6;margin-bottom:10px}.logo-section .address a{color:#007bff;text-decoration:none}.logo-section .address a:hover{text-decoration:underline}.logo-section .policy-title{font-weight:700;font-size:16px;margin-top:5px}\n"] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PrivacyPolicyComponent, isStandalone: false, selector: "app-privacy-policy", inputs: { title: "title", branding: "branding", PrivacyAndTerms: "PrivacyAndTerms" }, ngImport: i0, template: "<div class=\"privacy-policy-modal\">\r\n  <!-- Header -->\r\n  <!-- <div class=\"header\">\r\n    <h1>Website Privacy Policy</h1>\r\n  </div> -->\r\n\r\n  <!-- Logo and Address -->\r\n\r\n\r\n</div>\r\n\r\n<div style=\"margin-left: 10px;margin-right: 0px;font-size: 13.5px;\">\r\nLast modified: {{PrivacyAndTerms?.modifiedDate}}\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Introduction</div>\r\n{{PrivacyAndTerms?.companyName}}, LLC, a {{PrivacyAndTerms?.state}} limited liability company ( <span class=\"h\">\"Company\"</span>   or <span class=\"h\">\"We\"</span>), \r\nrespect your privacy and are committed to protecting it through our compliance with this \r\npolicy. \r\n\r\n<br>\r\nThis policy describes the types of information we may collect from you or that you may \r\nprovide when you visit the website www.bootog.com (our \"Website\") and our practices \r\nfor collecting, using, maintaining, protecting, and disclosing that information. \r\n<br>\r\nThis policy applies to information we collect: \r\n<br>\r\nOn this Website. \r\n<br>\r\nIn email, text, and other electronic messages between you and this Website. \r\nThrough mobile and desktop applications you download from this Website, which \r\nprovide dedicated non-browser-based interaction between you and this Website. \r\nWhen you interact with our advertising and applications on third-party websites and \r\nservices. \r\n<br>\r\nIt does not apply to information collected by: \r\n<br>\r\nUs offline or through any other means, including on any other website operated by \r\nCompany or any third party (including our affiliates and subsidiaries); or  \r\nAny third party (including our affiliates and subsidiaries), including through any \r\napplication or content (including advertising) that may link to or be accessible from or \r\nthrough the Website. \r\n<br>\r\nPlease read this policy carefully to understand our policies and practices regarding your \r\ninformation and how we will treat it. If you do not agree with our policies and practices, \r\nyour choice is not to use our Website. By accessing or using this Website, you agree to \r\nthis privacy policy. This policy may change from time to time (see Changes to Our \r\nPrivacy Policy). Your continued use of this Website after we make changes is deemed \r\nto be acceptance of those changes, so please check the policy periodically for updates. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Children Under the Age of 16</div> \r\nOur Website is not intended for children under 16 years of age. No one under age 16 \r\nmay provide any information to or on the Website. We do not knowingly collect personal \r\ninformation from children under 16. If you are under 16, do not use or provide any \r\ninformation on this Website or through any of its features, register on the Website, make \r\nany purchases through the Website, use any of the interactive or public comment \r\nfeatures of this Website, or provide any information about yourself to us, including your \r\nname, address, telephone number, email address, or any screen name or user name \r\nyou may use. If we learn we have collected or received personal information from a \r\nchild under 16 without verification of parental consent, we will delete that information. If \r\nyou believe we might have any information from or about a child under 16, please \r\ncontact us at {{PrivacyAndTerms?.email}}. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Information We Collect About You and How We Collect It </div>\r\n\r\nWe collect several types of information from and about users of our Website, including \r\ninformation: \r\n<br>\r\nBy which you may be personally identified, such as name, postal address, email \r\naddress, telephone number, social security number, any other personally identifiable \r\ninformation or any other identifier by which you may be contacted online or offline \r\n(<span class=\"h\">\"personal information\"</span>) \r\n<br>\r\nThat is about you but individually does not identify you; and/or \r\n<br>\r\nAbout your internet connection, the equipment you use to access our Website, and \r\nusage details. <br>\r\nWe collect this information: \r\n<br>\r\nDirectly from you when you provide it to us. \r\n<br>\r\nAutomatically as you navigate through the site. Information collected automatically may \r\ninclude usage details, IP addresses, and information collected through cookies, web \r\nbeacons, and other tracking technologies. \r\nFrom third parties, for example, our business partners. \r\nInformation You Provide to Us   \r\n<br>\r\nThe information we collect on or through our Website may include: \r\n<br>\r\nInformation that you provide by filling in forms on our Website. This includes information \r\nprovided at the time of registering to use our Website, subscribing to our service, \r\nposting material, or requesting further services. We may also ask you for information \r\nwhen you report a problem with our Website. \r\n<br>\r\nRecords and copies of your correspondence (including email addresses), if you contact \r\nus. \r\n<br>\r\nYour responses to surveys that we might ask you to complete for research purposes. \r\nDetails of transactions you carry out through our Website and of the fulfillment of your \r\norders. You may be required to provide financial information before placing an order \r\nthrough our Website. \r\n<br>\r\nYour search queries on the Website. \r\n<br>\r\nAny other information you may provide by using the Website. \r\n<br>\r\nYou also may provide information to be published or displayed (hereinafter, <span class=\"h\">\"posted\"</span> ) \r\non public areas of the Website, or transmitted to other users of the Website or third \r\nparties (collectively, <span class=\"h\">\"User Contributions\"</span> ). Your User Contributions are posted on and \r\ntransmitted to others at your own risk. Although we limit access to certain pages, please \r\nbe aware that no security measures are perfect or impenetrable. Additionally, we cannot \r\ncontrol the actions of other users of the Website with whom you may choose to share \r\nyour User Contributions. Therefore, we cannot and do not guarantee that your User \r\nContributions will not be viewed by unauthorized persons. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">IInformation We Collect Through Automatic Data Collection Technologies</div>\r\n\r\n  \r\nAs you navigate through and interact with our Website, we may use automatic data \r\ncollection technologies to collect certain information about your equipment, browsing \r\nactions, and patterns, including: \r\n<br>\r\nDetails of your visits to our Website, including but not limited to traffic data, location data, \r\nlogs, and other communication data and the resources that you access and use on the \r\nWebsite. \r\n<br>\r\nInformation about your computer and internet connection, including your IP address, \r\noperating system, and browser type. \r\n<br>\r\nThe information we collect automatically may include personal information, or we may \r\nmaintain it or associate it with personal information we collect in other ways or receive \r\nfrom third parties. It helps us to improve our Website and to deliver a better and more\r\npersonalized service, including by enabling us to:\r\n<br>\r\nEstimate our audience size and usage patterns.\r\n<br>\r\nStore information about your preferences, allowing us to customize our Website \r\naccording to your individual interests.\r\n<br>\r\nSpeed up your searches.\r\n<br>\r\nRecognize you when you return to our Website.\r\n<br>\r\nThe technologies we use for this automatic data collection may include:\r\n<br>\r\n<span class=\"h\">Cookies (or browser cookies).</span>  A cookie is a small file placed on the hard drive of your \r\ncomputer. You may refuse to accept browser cookies by activating the appropriate \r\nsetting on your browser. However, if you select this setting you may be unable to access \r\ncertain parts of our Website. Unless you have adjusted your browser setting so that it \r\nwill refuse cookies, our system will issue cookies when you direct your browser to our \r\nWebsite. \r\n<br>\r\n<span class=\"h\">Web Beacons.</span>  Pages of our Website and our emails may contain small electronic files \r\nknown as web beacons (also referred to as clear gifs, pixel tags, and single-pixel gifs) \r\nthat permit the Company, for example, to count users who have visited those pages or \r\nopened an email and for other related website statistics (for example, recording the \r\npopularity of certain website content and verifying system and server integrity). \r\n<br>\r\n<span class=\"h\">Flash Cookies.</span>  Certain features of our Website may use local stored objects (or Flash \r\ncookies) to collect and store information about your preferences and navigation to, from, \r\nand on our Website. Flash cookies are not managed by the same browser settings as \r\nare used for browser cookies. For information about managing your privacy and security \r\nsettings for Flash cookies, see Choices About How We Use and Disclose Your \r\nInformation.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Third-Party Use of Cookies and Other Tracking Technologies</div>\r\n\r\nSome content or applications, including advertisements, on the Website may be served \r\nby third-parties, including advertisers, ad networks and servers, content providers, and \r\napplication providers. These third parties may use cookies alone or in conjunction with \r\nweb beacons or other tracking technologies to collect information about you when you \r\nuse our website. The information they collect may be associated with your personal \r\ninformation or they may collect information, including personal information, about your \r\nonline activities over time and across different websites and other online services. They \r\nmay use this information to provide you with interest-based (behavioral) advertising or \r\nother targeted content. \r\n<br>\r\nWe do not control these third parties' tracking technologies or how they may be used. If \r\nyou have any questions about an advertisement or other targeted content, you should \r\ncontact the responsible provider directly. For information about how you can opt out of \r\nreceiving targeted advertising from many providers, see Choices About How We Use \r\nand Disclose Your Information.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">How We Use Your Information</div>\r\n\r\nWe use information that we collect about you or that you provide to us, including any \r\npersonal information:\r\n<br>\r\nTo present our Website and its contents to you.\r\n<br>\r\nTo provide you with information, products, or services that you request from us.\r\n<br>\r\nTo fulfill any other purpose for which you provide it.\r\n<br>\r\nTo provide you with notices about your account or subscription, including expiration and \r\n\u00A92025 {{PrivacyAndTerms?.companyName}}\r\n<br>\r\nProprietary and Confidential Information. Strictly for use by {{PrivacyAndTerms?.companyName}} approved customers only.\r\n<br>\r\nDuplication or alteration is strictly prohibited without prior written consent.\r\nrenewal notices.\r\n<br>\r\nTo carry out our obligations and enforce our rights arising from any contracts entered \r\ninto between you and us, including for billing and collection.\r\n<br>\r\nTo notify you about changes to our Website or any products or services we offer or \r\nprovide though it.\r\n<br>\r\nTo allow you to participate in interactive features on our Website.\r\n<br>\r\nIn any other way we may describe when you provide the information.\r\n<br>\r\nFor any other purpose with your consent.\r\n<br>\r\nWe may also use your information to contact you about goods and services that may be \r\nof interest to you. If you do not want us to use your information in this way, please \r\n[check the relevant box located on the form on which we collect your data adjust your \r\nuser preferences in your account profile. For more information, see Choices About How \r\nWe Use and Disclose Your Information.\r\n<br>\r\nWe may use the information we have collected from you to enable us to display \r\nadvertisements to our advertisers' target audiences. Even though we do not disclose \r\nyour personal information for these purposes without your consent, if you click on or \r\notherwise interact with an advertisement, the advertiser may assume that you meet its \r\ntarget criteria.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Disclosure of Your Information</div>\r\n\r\nWe may disclose aggregated information about our users without restriction. \r\nWe may disclose personal information that we collect or you provide as described in this \r\nprivacy policy:\r\n<br>\r\nTo our subsidiaries and affiliates.\r\n<br>\r\nTo contractors, service providers, and other third parties we use to support our business.\r\n<br>\r\nTo a buyer or other successor in the event of a merger, divestiture, restructuring, \r\nreorganization, dissolution, or other sale or transfer of some or all of our assets, whether \r\nas a going concern or as part of bankruptcy, liquidation, or similar proceeding, in which \r\npersonal information held by us about our Website users is among the assets \r\ntransferred.\r\n<br>\r\nTo third parties to market their products or services to you if you have not opted out of \r\nthese disclosures. For more information, see Choices About How We Use and Disclose \r\nYour Information.\r\n<br>\r\nTo fulfill the purpose for which you provide it. \r\n<br>\r\nFor any other purpose disclosed by us when you provide the information.\r\n<br>\r\nWith your consent.\r\n<br>\r\nWe may also disclose your personal information:\r\n<br>\r\nTo comply with any court order, law, or legal process, including to respond to any \r\ngovernment or regulatory request.\r\n<br>\r\nTo enforce or apply our terms of use and other agreements, including for billing and \r\ncollection purposes.\r\n<br>\r\nIf we believe disclosure is necessary or appropriate to protect the rights, property, or \r\nsafety of our company, our customers, or others. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Choices About How We Use and Disclose Your Information</div>\r\n\r\nWe strive to provide you with choices regarding the personal information you provide to \r\nus. We have created mechanisms to provide you with the following control over your \r\ninformation: \r\n<br>\r\n<span class=\"h\">Tracking Technologies and Advertising.</span>  You can set your browser to refuse all or \r\nsome browser cookies, or to alert you when cookies are being sent. If you disable or \r\nrefuse cookies, please note that some parts of this site may then be inaccessible or not \r\nfunction properly.\r\n<br>\r\n<span class=\"h\">Disclosure of Your Information for Third-Party Advertising.</span>  If you do not want us to \r\nshare your personal information with unaffiliated or non-agent third parties for \r\npromotional purposes, you can opt-out by logging into the Website and adjusting your \r\nuser preferences in your account profile or by sending us an email with your request to \r\n{{PrivacyAndTerms?.privacyPolicyUrl}}.\r\n<br>\r\n<span class=\"h\">Promotional Offers from the Company.</span>  If you do not wish to have your email address \r\nor contact information used by the Company to promote our own or third parties' \r\nproducts or services, you can opt-out by logging into the Website and adjusting your \r\nuser preferences in your account profile or by sending us an email stating your request \r\nto {{PrivacyAndTerms?.email}}. If we have sent you a promotional email, you may send us a \r\nreturn email asking to be omitted from future email distributions.\r\n<br> \r\n<span class=\"h\">Targeted Advertising.</span>  If you do not want us to use information that we collect or that \r\nyou provide to us to deliver advertisements according to our advertisers' target\u0002audience preferences, you can opt-out by sending us an email stating your request to \r\n{{PrivacyAndTerms?.email}}.\r\n<br> \r\nWe do not control third parties' collection or use of your information to serve interest\u0002based advertising. However these third parties may provide you with ways to choose \r\nnot to have your information collected or used in this way. You can opt out of receiving \r\ntargeted ads from members of the Network Advertising Initiative (\"NAI\") on the NAI's \r\nwebsite.\r\n<br>\r\nResidents of certain states, such as California, Nevada, Colorado, Connecticut, Virginia, \r\nand Utah may have additional personal information rights and choices. Please see Your \r\nState Privacy Rights for more information.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Accessing and Correcting Your Information</div>\r\nYou can review and change your personal information by logging into the Website and \r\nvisiting your account profile page.\r\n<br>\r\nResidents of certain states, such as California, Nevada, Colorado, Virginia, and Utah \r\nmay have additional personal information rights and choices. Please see Your State \r\nPrivacy Rights for more information.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Your State Privacy Rights</div>\r\nState consumer privacy laws may provide their residents with additional rights regarding \r\nour use of their personal information.\r\n<br> \r\nColorado, Connecticut, Virginia, and Utah each provide their state residents with rights \r\nto:\r\n<br>\r\nConfirm whether we process their personal information.\r\n<br>\r\nAccess and delete certain personal information.\r\n<br>\r\nData portability.\r\n<br>\r\nOpt-out of personal data processing for targeted advertising and sales.\r\n<br>\r\nColorado, Connecticut, and Virginia also provide their state residents with rights to:\r\n<br>\r\nCorrect inaccuracies in their personal information, taking into account the information's \r\nnature processing purpose.\r\n<br>\r\nOpt-out of profiling in furtherance of decisions that produce legal or similarly significant\r\neffects. \r\n<br>\r\nTo exercise any of these rights please send an email to {{PrivacyAndTerms?.copyrightPolicyLink}}. To appeal a \r\ndecision regarding a consumer rights request send an email to {{PrivacyAndTerms?.email}}.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">For California Residents Only:</div>\r\n<span class=\"h\">California Privacy Rights</span> \r\n<br>\r\nThis section applies solely to individuals who reside in the State of California \r\n(\u201Cconsumers\u201D or \u201Cyou\u201D). We adopt this notice to comply with the California Consumer \r\nPrivacy Act of 2018 (CCPA), as amended by the California Privacy Rights Act of 2020 \r\n(CPRA), and any terms defined in the CCPA/CPRA have the same meaning when used \r\nin this section.\r\n<br>\r\n<span class=\"h\">Your Rights Under California Law</span>\r\n\r\n<br>\r\nIf you are a California resident, you have the following rights with respect to your \r\npersonal information:\r\n<br>\r\n<span class=\"h\">Right to Know/Access \u2013</span>\r\n You may request that we disclose to you the categories and \r\nspecific pieces of personal information we have collected about you, as well as the \r\nsources, purposes for collection, and categories of third parties to whom the information \r\nis disclosed.\r\n<br>\r\n<span class=\"h\">Right to Delete \u2013</span>\r\n You may request that we delete personal information we have \r\ncollected from you, subject to certain exceptions.\r\n<br>\r\n<span class=\"h\">Right to Correct \u2013</span>\r\n You may request that we correct inaccurate personal information \r\nthat we maintain about you.\r\n<br>\r\n<span class=\"h\">Right to Opt Out of Sale/Sharing \u2013 </span>\r\nYou may request that we do not \u201Csell\u201D or \u201Cshare\u201D \r\nyour personal information (as those terms are defined under the CCPA/CPRA). We do \r\nnot sell your personal information in the traditional sense, but if our practices change we \r\nwill update this policy and provide you with a method to exercise this right.\r\n<br>\r\n<span class=\"h\">Right to Limit Use of Sensitive Personal Information \u2013</span>\r\n\r\n If we collect sensitive \r\npersonal information (such as government ID numbers, precise geolocation, or financial \r\naccount information), you may direct us to limit its use to what is reasonably necessary \r\nto provide the services requested.\r\n<br>\r\n<span class=\"h\">Right of Non-Discrimination \u2013</span>\r\n\r\n We will not discriminate against you for exercising your \r\nprivacy rights.\r\n<br>\r\n<span class=\"h\">Exercising Your Rights</span>\r\n\r\n\r\n<br>\r\nTo exercise any of the rights described above, please submit a verifiable consumer \r\nrequest to us by:\r\n<br>\r\nEmail: {{PrivacyAndTerms?.email}}\r\n<br>\r\nPhone: {{PrivacyAndTerms?.phone}}\r\n<br>\r\nOnline request form: {{PrivacyAndTerms?.requestForm}}\r\n<br>\r\nOnly you, or someone legally authorized to act on your behalf, may make a verifiable \r\nconsumer request.\r\n<br>\r\n<span class=\"h\">Information We Collect\r\n</span>\r\n\r\n<br>\r\nIn the past 12 months, we may have collected the following categories of personal \r\ninformation about consumers:\r\n<br>\r\nIdentifiers (such as name, email address, phone number)\r\n<br>\r\nInternet or network activity (such as browsing history on our website)\r\n<br>\r\nCommercial information (such as records of products or services purchased)\r\n<br>\r\n\r\nGeolocation data (if you enable location services)\r\n<br>\r\nInferences drawn from other personal information (such as preferences or interests)\r\nWe collect this information for the purposes described in the \u201CHow We Use Your \r\nInformation\u201D section of our general Privacy Policy.\r\n<br>\r\n<span class=\"h\">Data Retention </span>\r\n\r\n<br>\r\nWe retain personal information for as long as necessary to fulfill the purposes described \r\nin this Privacy Policy, unless a longer retention period is required or permitted by law.\r\n<br>\r\n<span class=\"h\">Shine the Light Law </span>\r\n\r\n\r\n<br>\r\nCalifornia residents may also request certain information regarding our disclosure of \r\npersonal information to third parties for their direct marketing purposes under California \r\nCivil Code \u00A71798.83 (\u201CShine the Light\u201D law). To make such a request, please contact us \r\nat [Insert contact email].\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Data Security</div>\r\nUnfortunately, the transmission of information via the internet is not completely secure. \r\nAlthough we do our best to protect your personal information, we cannot guarantee the \r\nsecurity of your personal information transmitted to our Website. Any transmission of \r\npersonal information is at your own risk. We are not responsible for circumvention of \r\nany privacy settings or security measures contained on the Website.] \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Changes to Our Privacy Policy</div>\r\nIt is our policy to post any changes we make to our privacy policy on this page. If we \r\nmake material changes to how we treat our users' personal information, we will notify \r\nyou through a notice on the Website home page. The date the privacy policy was last \r\nrevised is identified at the top of the page. You are responsible for ensuring we have an \r\nup-to-date active and deliverable email address for you, and for periodically visiting our \r\nWebsite and this privacy policy to check for any changes.\r\n<br>\r\nContact Information\r\n<br>\r\nTo ask questions or comment about this privacy policy and our privacy practices, \r\ncontact us at: \r\n<br>\r\n{{PrivacyAndTerms?.email}}\r\n</div>\r\n<div class=\"logo-section mt-5 text-center\" >\r\n  <img [src]=\"branding?.logo\" [alt]=\"branding?.displayName\" />\r\n\r\n  <!-- <p class=\"address\">\r\n    {{ PrivacyAndTerms?.address1 }}\r\n    {{ PrivacyAndTerms?.city }}\r\n    {{ PrivacyAndTerms?.state }}\r\n    {{ PrivacyAndTerms?.country }} {{ PrivacyAndTerms?.zipCode }}\r\n    \r\n  </p> -->\r\n</div>\r\n<div class=\"content\">\r\n    <p>\r\n      \u00A9{{PrivacyAndTerms?.currentYear}} {{PrivacyAndTerms?.companyName}}.<br>\r\n      Proprietary and Confidential Information. Strictly for use by {{PrivacyAndTerms?.companyName}} approved customers only.<br>\r\n      Duplication or alteration is strictly prohibited without prior written consent.\r\n    </p>\r\n    <!-- <p class=\"last-modified\">Last modified: {{PrivacyAndTerms?.modifiedDate}}</p> -->\r\n  </div>\r\n", styles: [".privacy-policy-modal{background:#fff;padding:0 20px;max-width:650px;margin:auto;font-family:Arial,sans-serif;display:flex;flex-direction:column;align-items:center}.privacy-policy-modal .header{text-align:center;margin-bottom:40px}.privacy-policy-modal .header h1{font-size:26px;font-weight:700;margin:0}.privacy-policy-modal .modal-footer{width:100%;display:flex;justify-content:center}.privacy-policy-modal .modal-footer .btn{padding:8px 25px;font-size:14px}.section-title{color:#000;text-decoration:underline;font-weight:700}.content{font-size:14px;line-height:1.7;text-align:center;margin-bottom:40px;margin-top:10px}.content .last-modified{margin-top:20px;font-size:12px;color:gray}.h{color:#000;font-weight:700}.logo-section{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:-10px;overflow:visible;min-height:42px}.logo-section img{display:block;max-width:180px;height:auto;margin-bottom:15px;position:relative;z-index:2}.logo-section .address{font-size:14px;line-height:1.6;margin-bottom:10px}.logo-section .address a{color:#007bff;text-decoration:none}.logo-section .address a:hover{text-decoration:underline}.logo-section .policy-title{font-weight:700;font-size:16px;margin-top:5px}\n"] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PrivacyPolicyComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'app-privacy-policy', template: "<div class=\"privacy-policy-modal\">\r\n  <!-- Header -->\r\n  <!-- <div class=\"header\">\r\n    <h1>Website Privacy Policy</h1>\r\n  </div> -->\r\n\r\n  <!-- Logo and Address -->\r\n\r\n\r\n</div>\r\n\r\n<div style=\"margin-left: 10px;margin-right: 0px;font-size: 13.5px;\">\r\nLast modified: {{PrivacyAndTerms?.modifiedDate}}\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Introduction</div>\r\n{{PrivacyAndTerms?.companyName}}, LLC, a {{PrivacyAndTerms?.state}} limited liability company ( <span class=\"h\">\"Company\"</span>   or <span class=\"h\">\"We\"</span>), \r\nrespect your privacy and are committed to protecting it through our compliance with this \r\npolicy. \r\n\r\n<br>\r\nThis policy describes the types of information we may collect from you or that you may \r\nprovide when you visit the website www.bootog.com (our \"Website\") and our practices \r\nfor collecting, using, maintaining, protecting, and disclosing that information. \r\n<br>\r\nThis policy applies to information we collect: \r\n<br>\r\nOn this Website. \r\n<br>\r\nIn email, text, and other electronic messages between you and this Website. \r\nThrough mobile and desktop applications you download from this Website, which \r\nprovide dedicated non-browser-based interaction between you and this Website. \r\nWhen you interact with our advertising and applications on third-party websites and \r\nservices. \r\n<br>\r\nIt does not apply to information collected by: \r\n<br>\r\nUs offline or through any other means, including on any other website operated by \r\nCompany or any third party (including our affiliates and subsidiaries); or  \r\nAny third party (including our affiliates and subsidiaries), including through any \r\napplication or content (including advertising) that may link to or be accessible from or \r\nthrough the Website. \r\n<br>\r\nPlease read this policy carefully to understand our policies and practices regarding your \r\ninformation and how we will treat it. If you do not agree with our policies and practices, \r\nyour choice is not to use our Website. By accessing or using this Website, you agree to \r\nthis privacy policy. This policy may change from time to time (see Changes to Our \r\nPrivacy Policy). Your continued use of this Website after we make changes is deemed \r\nto be acceptance of those changes, so please check the policy periodically for updates. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Children Under the Age of 16</div> \r\nOur Website is not intended for children under 16 years of age. No one under age 16 \r\nmay provide any information to or on the Website. We do not knowingly collect personal \r\ninformation from children under 16. If you are under 16, do not use or provide any \r\ninformation on this Website or through any of its features, register on the Website, make \r\nany purchases through the Website, use any of the interactive or public comment \r\nfeatures of this Website, or provide any information about yourself to us, including your \r\nname, address, telephone number, email address, or any screen name or user name \r\nyou may use. If we learn we have collected or received personal information from a \r\nchild under 16 without verification of parental consent, we will delete that information. If \r\nyou believe we might have any information from or about a child under 16, please \r\ncontact us at {{PrivacyAndTerms?.email}}. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Information We Collect About You and How We Collect It </div>\r\n\r\nWe collect several types of information from and about users of our Website, including \r\ninformation: \r\n<br>\r\nBy which you may be personally identified, such as name, postal address, email \r\naddress, telephone number, social security number, any other personally identifiable \r\ninformation or any other identifier by which you may be contacted online or offline \r\n(<span class=\"h\">\"personal information\"</span>) \r\n<br>\r\nThat is about you but individually does not identify you; and/or \r\n<br>\r\nAbout your internet connection, the equipment you use to access our Website, and \r\nusage details. <br>\r\nWe collect this information: \r\n<br>\r\nDirectly from you when you provide it to us. \r\n<br>\r\nAutomatically as you navigate through the site. Information collected automatically may \r\ninclude usage details, IP addresses, and information collected through cookies, web \r\nbeacons, and other tracking technologies. \r\nFrom third parties, for example, our business partners. \r\nInformation You Provide to Us   \r\n<br>\r\nThe information we collect on or through our Website may include: \r\n<br>\r\nInformation that you provide by filling in forms on our Website. This includes information \r\nprovided at the time of registering to use our Website, subscribing to our service, \r\nposting material, or requesting further services. We may also ask you for information \r\nwhen you report a problem with our Website. \r\n<br>\r\nRecords and copies of your correspondence (including email addresses), if you contact \r\nus. \r\n<br>\r\nYour responses to surveys that we might ask you to complete for research purposes. \r\nDetails of transactions you carry out through our Website and of the fulfillment of your \r\norders. You may be required to provide financial information before placing an order \r\nthrough our Website. \r\n<br>\r\nYour search queries on the Website. \r\n<br>\r\nAny other information you may provide by using the Website. \r\n<br>\r\nYou also may provide information to be published or displayed (hereinafter, <span class=\"h\">\"posted\"</span> ) \r\non public areas of the Website, or transmitted to other users of the Website or third \r\nparties (collectively, <span class=\"h\">\"User Contributions\"</span> ). Your User Contributions are posted on and \r\ntransmitted to others at your own risk. Although we limit access to certain pages, please \r\nbe aware that no security measures are perfect or impenetrable. Additionally, we cannot \r\ncontrol the actions of other users of the Website with whom you may choose to share \r\nyour User Contributions. Therefore, we cannot and do not guarantee that your User \r\nContributions will not be viewed by unauthorized persons. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">IInformation We Collect Through Automatic Data Collection Technologies</div>\r\n\r\n  \r\nAs you navigate through and interact with our Website, we may use automatic data \r\ncollection technologies to collect certain information about your equipment, browsing \r\nactions, and patterns, including: \r\n<br>\r\nDetails of your visits to our Website, including but not limited to traffic data, location data, \r\nlogs, and other communication data and the resources that you access and use on the \r\nWebsite. \r\n<br>\r\nInformation about your computer and internet connection, including your IP address, \r\noperating system, and browser type. \r\n<br>\r\nThe information we collect automatically may include personal information, or we may \r\nmaintain it or associate it with personal information we collect in other ways or receive \r\nfrom third parties. It helps us to improve our Website and to deliver a better and more\r\npersonalized service, including by enabling us to:\r\n<br>\r\nEstimate our audience size and usage patterns.\r\n<br>\r\nStore information about your preferences, allowing us to customize our Website \r\naccording to your individual interests.\r\n<br>\r\nSpeed up your searches.\r\n<br>\r\nRecognize you when you return to our Website.\r\n<br>\r\nThe technologies we use for this automatic data collection may include:\r\n<br>\r\n<span class=\"h\">Cookies (or browser cookies).</span>  A cookie is a small file placed on the hard drive of your \r\ncomputer. You may refuse to accept browser cookies by activating the appropriate \r\nsetting on your browser. However, if you select this setting you may be unable to access \r\ncertain parts of our Website. Unless you have adjusted your browser setting so that it \r\nwill refuse cookies, our system will issue cookies when you direct your browser to our \r\nWebsite. \r\n<br>\r\n<span class=\"h\">Web Beacons.</span>  Pages of our Website and our emails may contain small electronic files \r\nknown as web beacons (also referred to as clear gifs, pixel tags, and single-pixel gifs) \r\nthat permit the Company, for example, to count users who have visited those pages or \r\nopened an email and for other related website statistics (for example, recording the \r\npopularity of certain website content and verifying system and server integrity). \r\n<br>\r\n<span class=\"h\">Flash Cookies.</span>  Certain features of our Website may use local stored objects (or Flash \r\ncookies) to collect and store information about your preferences and navigation to, from, \r\nand on our Website. Flash cookies are not managed by the same browser settings as \r\nare used for browser cookies. For information about managing your privacy and security \r\nsettings for Flash cookies, see Choices About How We Use and Disclose Your \r\nInformation.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Third-Party Use of Cookies and Other Tracking Technologies</div>\r\n\r\nSome content or applications, including advertisements, on the Website may be served \r\nby third-parties, including advertisers, ad networks and servers, content providers, and \r\napplication providers. These third parties may use cookies alone or in conjunction with \r\nweb beacons or other tracking technologies to collect information about you when you \r\nuse our website. The information they collect may be associated with your personal \r\ninformation or they may collect information, including personal information, about your \r\nonline activities over time and across different websites and other online services. They \r\nmay use this information to provide you with interest-based (behavioral) advertising or \r\nother targeted content. \r\n<br>\r\nWe do not control these third parties' tracking technologies or how they may be used. If \r\nyou have any questions about an advertisement or other targeted content, you should \r\ncontact the responsible provider directly. For information about how you can opt out of \r\nreceiving targeted advertising from many providers, see Choices About How We Use \r\nand Disclose Your Information.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">How We Use Your Information</div>\r\n\r\nWe use information that we collect about you or that you provide to us, including any \r\npersonal information:\r\n<br>\r\nTo present our Website and its contents to you.\r\n<br>\r\nTo provide you with information, products, or services that you request from us.\r\n<br>\r\nTo fulfill any other purpose for which you provide it.\r\n<br>\r\nTo provide you with notices about your account or subscription, including expiration and \r\n\u00A92025 {{PrivacyAndTerms?.companyName}}\r\n<br>\r\nProprietary and Confidential Information. Strictly for use by {{PrivacyAndTerms?.companyName}} approved customers only.\r\n<br>\r\nDuplication or alteration is strictly prohibited without prior written consent.\r\nrenewal notices.\r\n<br>\r\nTo carry out our obligations and enforce our rights arising from any contracts entered \r\ninto between you and us, including for billing and collection.\r\n<br>\r\nTo notify you about changes to our Website or any products or services we offer or \r\nprovide though it.\r\n<br>\r\nTo allow you to participate in interactive features on our Website.\r\n<br>\r\nIn any other way we may describe when you provide the information.\r\n<br>\r\nFor any other purpose with your consent.\r\n<br>\r\nWe may also use your information to contact you about goods and services that may be \r\nof interest to you. If you do not want us to use your information in this way, please \r\n[check the relevant box located on the form on which we collect your data adjust your \r\nuser preferences in your account profile. For more information, see Choices About How \r\nWe Use and Disclose Your Information.\r\n<br>\r\nWe may use the information we have collected from you to enable us to display \r\nadvertisements to our advertisers' target audiences. Even though we do not disclose \r\nyour personal information for these purposes without your consent, if you click on or \r\notherwise interact with an advertisement, the advertiser may assume that you meet its \r\ntarget criteria.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Disclosure of Your Information</div>\r\n\r\nWe may disclose aggregated information about our users without restriction. \r\nWe may disclose personal information that we collect or you provide as described in this \r\nprivacy policy:\r\n<br>\r\nTo our subsidiaries and affiliates.\r\n<br>\r\nTo contractors, service providers, and other third parties we use to support our business.\r\n<br>\r\nTo a buyer or other successor in the event of a merger, divestiture, restructuring, \r\nreorganization, dissolution, or other sale or transfer of some or all of our assets, whether \r\nas a going concern or as part of bankruptcy, liquidation, or similar proceeding, in which \r\npersonal information held by us about our Website users is among the assets \r\ntransferred.\r\n<br>\r\nTo third parties to market their products or services to you if you have not opted out of \r\nthese disclosures. For more information, see Choices About How We Use and Disclose \r\nYour Information.\r\n<br>\r\nTo fulfill the purpose for which you provide it. \r\n<br>\r\nFor any other purpose disclosed by us when you provide the information.\r\n<br>\r\nWith your consent.\r\n<br>\r\nWe may also disclose your personal information:\r\n<br>\r\nTo comply with any court order, law, or legal process, including to respond to any \r\ngovernment or regulatory request.\r\n<br>\r\nTo enforce or apply our terms of use and other agreements, including for billing and \r\ncollection purposes.\r\n<br>\r\nIf we believe disclosure is necessary or appropriate to protect the rights, property, or \r\nsafety of our company, our customers, or others. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Choices About How We Use and Disclose Your Information</div>\r\n\r\nWe strive to provide you with choices regarding the personal information you provide to \r\nus. We have created mechanisms to provide you with the following control over your \r\ninformation: \r\n<br>\r\n<span class=\"h\">Tracking Technologies and Advertising.</span>  You can set your browser to refuse all or \r\nsome browser cookies, or to alert you when cookies are being sent. If you disable or \r\nrefuse cookies, please note that some parts of this site may then be inaccessible or not \r\nfunction properly.\r\n<br>\r\n<span class=\"h\">Disclosure of Your Information for Third-Party Advertising.</span>  If you do not want us to \r\nshare your personal information with unaffiliated or non-agent third parties for \r\npromotional purposes, you can opt-out by logging into the Website and adjusting your \r\nuser preferences in your account profile or by sending us an email with your request to \r\n{{PrivacyAndTerms?.privacyPolicyUrl}}.\r\n<br>\r\n<span class=\"h\">Promotional Offers from the Company.</span>  If you do not wish to have your email address \r\nor contact information used by the Company to promote our own or third parties' \r\nproducts or services, you can opt-out by logging into the Website and adjusting your \r\nuser preferences in your account profile or by sending us an email stating your request \r\nto {{PrivacyAndTerms?.email}}. If we have sent you a promotional email, you may send us a \r\nreturn email asking to be omitted from future email distributions.\r\n<br> \r\n<span class=\"h\">Targeted Advertising.</span>  If you do not want us to use information that we collect or that \r\nyou provide to us to deliver advertisements according to our advertisers' target\u0002audience preferences, you can opt-out by sending us an email stating your request to \r\n{{PrivacyAndTerms?.email}}.\r\n<br> \r\nWe do not control third parties' collection or use of your information to serve interest\u0002based advertising. However these third parties may provide you with ways to choose \r\nnot to have your information collected or used in this way. You can opt out of receiving \r\ntargeted ads from members of the Network Advertising Initiative (\"NAI\") on the NAI's \r\nwebsite.\r\n<br>\r\nResidents of certain states, such as California, Nevada, Colorado, Connecticut, Virginia, \r\nand Utah may have additional personal information rights and choices. Please see Your \r\nState Privacy Rights for more information.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Accessing and Correcting Your Information</div>\r\nYou can review and change your personal information by logging into the Website and \r\nvisiting your account profile page.\r\n<br>\r\nResidents of certain states, such as California, Nevada, Colorado, Virginia, and Utah \r\nmay have additional personal information rights and choices. Please see Your State \r\nPrivacy Rights for more information.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Your State Privacy Rights</div>\r\nState consumer privacy laws may provide their residents with additional rights regarding \r\nour use of their personal information.\r\n<br> \r\nColorado, Connecticut, Virginia, and Utah each provide their state residents with rights \r\nto:\r\n<br>\r\nConfirm whether we process their personal information.\r\n<br>\r\nAccess and delete certain personal information.\r\n<br>\r\nData portability.\r\n<br>\r\nOpt-out of personal data processing for targeted advertising and sales.\r\n<br>\r\nColorado, Connecticut, and Virginia also provide their state residents with rights to:\r\n<br>\r\nCorrect inaccuracies in their personal information, taking into account the information's \r\nnature processing purpose.\r\n<br>\r\nOpt-out of profiling in furtherance of decisions that produce legal or similarly significant\r\neffects. \r\n<br>\r\nTo exercise any of these rights please send an email to {{PrivacyAndTerms?.copyrightPolicyLink}}. To appeal a \r\ndecision regarding a consumer rights request send an email to {{PrivacyAndTerms?.email}}.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">For California Residents Only:</div>\r\n<span class=\"h\">California Privacy Rights</span> \r\n<br>\r\nThis section applies solely to individuals who reside in the State of California \r\n(\u201Cconsumers\u201D or \u201Cyou\u201D). We adopt this notice to comply with the California Consumer \r\nPrivacy Act of 2018 (CCPA), as amended by the California Privacy Rights Act of 2020 \r\n(CPRA), and any terms defined in the CCPA/CPRA have the same meaning when used \r\nin this section.\r\n<br>\r\n<span class=\"h\">Your Rights Under California Law</span>\r\n\r\n<br>\r\nIf you are a California resident, you have the following rights with respect to your \r\npersonal information:\r\n<br>\r\n<span class=\"h\">Right to Know/Access \u2013</span>\r\n You may request that we disclose to you the categories and \r\nspecific pieces of personal information we have collected about you, as well as the \r\nsources, purposes for collection, and categories of third parties to whom the information \r\nis disclosed.\r\n<br>\r\n<span class=\"h\">Right to Delete \u2013</span>\r\n You may request that we delete personal information we have \r\ncollected from you, subject to certain exceptions.\r\n<br>\r\n<span class=\"h\">Right to Correct \u2013</span>\r\n You may request that we correct inaccurate personal information \r\nthat we maintain about you.\r\n<br>\r\n<span class=\"h\">Right to Opt Out of Sale/Sharing \u2013 </span>\r\nYou may request that we do not \u201Csell\u201D or \u201Cshare\u201D \r\nyour personal information (as those terms are defined under the CCPA/CPRA). We do \r\nnot sell your personal information in the traditional sense, but if our practices change we \r\nwill update this policy and provide you with a method to exercise this right.\r\n<br>\r\n<span class=\"h\">Right to Limit Use of Sensitive Personal Information \u2013</span>\r\n\r\n If we collect sensitive \r\npersonal information (such as government ID numbers, precise geolocation, or financial \r\naccount information), you may direct us to limit its use to what is reasonably necessary \r\nto provide the services requested.\r\n<br>\r\n<span class=\"h\">Right of Non-Discrimination \u2013</span>\r\n\r\n We will not discriminate against you for exercising your \r\nprivacy rights.\r\n<br>\r\n<span class=\"h\">Exercising Your Rights</span>\r\n\r\n\r\n<br>\r\nTo exercise any of the rights described above, please submit a verifiable consumer \r\nrequest to us by:\r\n<br>\r\nEmail: {{PrivacyAndTerms?.email}}\r\n<br>\r\nPhone: {{PrivacyAndTerms?.phone}}\r\n<br>\r\nOnline request form: {{PrivacyAndTerms?.requestForm}}\r\n<br>\r\nOnly you, or someone legally authorized to act on your behalf, may make a verifiable \r\nconsumer request.\r\n<br>\r\n<span class=\"h\">Information We Collect\r\n</span>\r\n\r\n<br>\r\nIn the past 12 months, we may have collected the following categories of personal \r\ninformation about consumers:\r\n<br>\r\nIdentifiers (such as name, email address, phone number)\r\n<br>\r\nInternet or network activity (such as browsing history on our website)\r\n<br>\r\nCommercial information (such as records of products or services purchased)\r\n<br>\r\n\r\nGeolocation data (if you enable location services)\r\n<br>\r\nInferences drawn from other personal information (such as preferences or interests)\r\nWe collect this information for the purposes described in the \u201CHow We Use Your \r\nInformation\u201D section of our general Privacy Policy.\r\n<br>\r\n<span class=\"h\">Data Retention </span>\r\n\r\n<br>\r\nWe retain personal information for as long as necessary to fulfill the purposes described \r\nin this Privacy Policy, unless a longer retention period is required or permitted by law.\r\n<br>\r\n<span class=\"h\">Shine the Light Law </span>\r\n\r\n\r\n<br>\r\nCalifornia residents may also request certain information regarding our disclosure of \r\npersonal information to third parties for their direct marketing purposes under California \r\nCivil Code \u00A71798.83 (\u201CShine the Light\u201D law). To make such a request, please contact us \r\nat [Insert contact email].\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Data Security</div>\r\nUnfortunately, the transmission of information via the internet is not completely secure. \r\nAlthough we do our best to protect your personal information, we cannot guarantee the \r\nsecurity of your personal information transmitted to our Website. Any transmission of \r\npersonal information is at your own risk. We are not responsible for circumvention of \r\nany privacy settings or security measures contained on the Website.] \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Changes to Our Privacy Policy</div>\r\nIt is our policy to post any changes we make to our privacy policy on this page. If we \r\nmake material changes to how we treat our users' personal information, we will notify \r\nyou through a notice on the Website home page. The date the privacy policy was last \r\nrevised is identified at the top of the page. You are responsible for ensuring we have an \r\nup-to-date active and deliverable email address for you, and for periodically visiting our \r\nWebsite and this privacy policy to check for any changes.\r\n<br>\r\nContact Information\r\n<br>\r\nTo ask questions or comment about this privacy policy and our privacy practices, \r\ncontact us at: \r\n<br>\r\n{{PrivacyAndTerms?.email}}\r\n</div>\r\n<div class=\"logo-section mt-5 text-center\" >\r\n  <img [src]=\"branding?.logo\" [alt]=\"branding?.displayName\" />\r\n\r\n  <!-- <p class=\"address\">\r\n    {{ PrivacyAndTerms?.address1 }}\r\n    {{ PrivacyAndTerms?.city }}\r\n    {{ PrivacyAndTerms?.state }}\r\n    {{ PrivacyAndTerms?.country }} {{ PrivacyAndTerms?.zipCode }}\r\n    \r\n  </p> -->\r\n</div>\r\n<div class=\"content\">\r\n    <p>\r\n      \u00A9{{PrivacyAndTerms?.currentYear}} {{PrivacyAndTerms?.companyName}}.<br>\r\n      Proprietary and Confidential Information. Strictly for use by {{PrivacyAndTerms?.companyName}}t approved customers only.<br>\r\n      Duplication or alteration is strictly prohibited without prior written consent.\r\n    </p>\r\n    <!-- <p class=\"last-modified\">Last modified: {{PrivacyAndTerms?.modifiedDate}}</p> -->\r\n  </div>\r\n", styles: [".privacy-policy-modal{background:#fff;padding:0 20px;max-width:650px;margin:auto;font-family:Arial,sans-serif;display:flex;flex-direction:column;align-items:center}.privacy-policy-modal .header{text-align:center;margin-bottom:40px}.privacy-policy-modal .header h1{font-size:26px;font-weight:700;margin:0}.privacy-policy-modal .modal-footer{width:100%;display:flex;justify-content:center}.privacy-policy-modal .modal-footer .btn{padding:8px 25px;font-size:14px}.section-title{color:#000;text-decoration:underline;font-weight:700}.content{font-size:14px;line-height:1.7;text-align:center;margin-bottom:40px;margin-top:10px}.content .last-modified{margin-top:20px;font-size:12px;color:gray}.h{color:#000;font-weight:700}.logo-section{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:-10px;overflow:visible;min-height:42px}.logo-section img{display:block;max-width:180px;height:auto;margin-bottom:15px;position:relative;z-index:2}.logo-section .address{font-size:14px;line-height:1.6;margin-bottom:10px}.logo-section .address a{color:#007bff;text-decoration:none}.logo-section .address a:hover{text-decoration:underline}.logo-section .policy-title{font-weight:700;font-size:16px;margin-top:5px}\n"] }]
+            args: [{ standalone: false, selector: 'app-privacy-policy', template: "<div class=\"privacy-policy-modal\">\r\n  <!-- Header -->\r\n  <!-- <div class=\"header\">\r\n    <h1>Website Privacy Policy</h1>\r\n  </div> -->\r\n\r\n  <!-- Logo and Address -->\r\n\r\n\r\n</div>\r\n\r\n<div style=\"margin-left: 10px;margin-right: 0px;font-size: 13.5px;\">\r\nLast modified: {{PrivacyAndTerms?.modifiedDate}}\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Introduction</div>\r\n{{PrivacyAndTerms?.companyName}}, LLC, a {{PrivacyAndTerms?.state}} limited liability company ( <span class=\"h\">\"Company\"</span>   or <span class=\"h\">\"We\"</span>), \r\nrespect your privacy and are committed to protecting it through our compliance with this \r\npolicy. \r\n\r\n<br>\r\nThis policy describes the types of information we may collect from you or that you may \r\nprovide when you visit the website www.bootog.com (our \"Website\") and our practices \r\nfor collecting, using, maintaining, protecting, and disclosing that information. \r\n<br>\r\nThis policy applies to information we collect: \r\n<br>\r\nOn this Website. \r\n<br>\r\nIn email, text, and other electronic messages between you and this Website. \r\nThrough mobile and desktop applications you download from this Website, which \r\nprovide dedicated non-browser-based interaction between you and this Website. \r\nWhen you interact with our advertising and applications on third-party websites and \r\nservices. \r\n<br>\r\nIt does not apply to information collected by: \r\n<br>\r\nUs offline or through any other means, including on any other website operated by \r\nCompany or any third party (including our affiliates and subsidiaries); or  \r\nAny third party (including our affiliates and subsidiaries), including through any \r\napplication or content (including advertising) that may link to or be accessible from or \r\nthrough the Website. \r\n<br>\r\nPlease read this policy carefully to understand our policies and practices regarding your \r\ninformation and how we will treat it. If you do not agree with our policies and practices, \r\nyour choice is not to use our Website. By accessing or using this Website, you agree to \r\nthis privacy policy. This policy may change from time to time (see Changes to Our \r\nPrivacy Policy). Your continued use of this Website after we make changes is deemed \r\nto be acceptance of those changes, so please check the policy periodically for updates. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Children Under the Age of 16</div> \r\nOur Website is not intended for children under 16 years of age. No one under age 16 \r\nmay provide any information to or on the Website. We do not knowingly collect personal \r\ninformation from children under 16. If you are under 16, do not use or provide any \r\ninformation on this Website or through any of its features, register on the Website, make \r\nany purchases through the Website, use any of the interactive or public comment \r\nfeatures of this Website, or provide any information about yourself to us, including your \r\nname, address, telephone number, email address, or any screen name or user name \r\nyou may use. If we learn we have collected or received personal information from a \r\nchild under 16 without verification of parental consent, we will delete that information. If \r\nyou believe we might have any information from or about a child under 16, please \r\ncontact us at {{PrivacyAndTerms?.email}}. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Information We Collect About You and How We Collect It </div>\r\n\r\nWe collect several types of information from and about users of our Website, including \r\ninformation: \r\n<br>\r\nBy which you may be personally identified, such as name, postal address, email \r\naddress, telephone number, social security number, any other personally identifiable \r\ninformation or any other identifier by which you may be contacted online or offline \r\n(<span class=\"h\">\"personal information\"</span>) \r\n<br>\r\nThat is about you but individually does not identify you; and/or \r\n<br>\r\nAbout your internet connection, the equipment you use to access our Website, and \r\nusage details. <br>\r\nWe collect this information: \r\n<br>\r\nDirectly from you when you provide it to us. \r\n<br>\r\nAutomatically as you navigate through the site. Information collected automatically may \r\ninclude usage details, IP addresses, and information collected through cookies, web \r\nbeacons, and other tracking technologies. \r\nFrom third parties, for example, our business partners. \r\nInformation You Provide to Us   \r\n<br>\r\nThe information we collect on or through our Website may include: \r\n<br>\r\nInformation that you provide by filling in forms on our Website. This includes information \r\nprovided at the time of registering to use our Website, subscribing to our service, \r\nposting material, or requesting further services. We may also ask you for information \r\nwhen you report a problem with our Website. \r\n<br>\r\nRecords and copies of your correspondence (including email addresses), if you contact \r\nus. \r\n<br>\r\nYour responses to surveys that we might ask you to complete for research purposes. \r\nDetails of transactions you carry out through our Website and of the fulfillment of your \r\norders. You may be required to provide financial information before placing an order \r\nthrough our Website. \r\n<br>\r\nYour search queries on the Website. \r\n<br>\r\nAny other information you may provide by using the Website. \r\n<br>\r\nYou also may provide information to be published or displayed (hereinafter, <span class=\"h\">\"posted\"</span> ) \r\non public areas of the Website, or transmitted to other users of the Website or third \r\nparties (collectively, <span class=\"h\">\"User Contributions\"</span> ). Your User Contributions are posted on and \r\ntransmitted to others at your own risk. Although we limit access to certain pages, please \r\nbe aware that no security measures are perfect or impenetrable. Additionally, we cannot \r\ncontrol the actions of other users of the Website with whom you may choose to share \r\nyour User Contributions. Therefore, we cannot and do not guarantee that your User \r\nContributions will not be viewed by unauthorized persons. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">IInformation We Collect Through Automatic Data Collection Technologies</div>\r\n\r\n  \r\nAs you navigate through and interact with our Website, we may use automatic data \r\ncollection technologies to collect certain information about your equipment, browsing \r\nactions, and patterns, including: \r\n<br>\r\nDetails of your visits to our Website, including but not limited to traffic data, location data, \r\nlogs, and other communication data and the resources that you access and use on the \r\nWebsite. \r\n<br>\r\nInformation about your computer and internet connection, including your IP address, \r\noperating system, and browser type. \r\n<br>\r\nThe information we collect automatically may include personal information, or we may \r\nmaintain it or associate it with personal information we collect in other ways or receive \r\nfrom third parties. It helps us to improve our Website and to deliver a better and more\r\npersonalized service, including by enabling us to:\r\n<br>\r\nEstimate our audience size and usage patterns.\r\n<br>\r\nStore information about your preferences, allowing us to customize our Website \r\naccording to your individual interests.\r\n<br>\r\nSpeed up your searches.\r\n<br>\r\nRecognize you when you return to our Website.\r\n<br>\r\nThe technologies we use for this automatic data collection may include:\r\n<br>\r\n<span class=\"h\">Cookies (or browser cookies).</span>  A cookie is a small file placed on the hard drive of your \r\ncomputer. You may refuse to accept browser cookies by activating the appropriate \r\nsetting on your browser. However, if you select this setting you may be unable to access \r\ncertain parts of our Website. Unless you have adjusted your browser setting so that it \r\nwill refuse cookies, our system will issue cookies when you direct your browser to our \r\nWebsite. \r\n<br>\r\n<span class=\"h\">Web Beacons.</span>  Pages of our Website and our emails may contain small electronic files \r\nknown as web beacons (also referred to as clear gifs, pixel tags, and single-pixel gifs) \r\nthat permit the Company, for example, to count users who have visited those pages or \r\nopened an email and for other related website statistics (for example, recording the \r\npopularity of certain website content and verifying system and server integrity). \r\n<br>\r\n<span class=\"h\">Flash Cookies.</span>  Certain features of our Website may use local stored objects (or Flash \r\ncookies) to collect and store information about your preferences and navigation to, from, \r\nand on our Website. Flash cookies are not managed by the same browser settings as \r\nare used for browser cookies. For information about managing your privacy and security \r\nsettings for Flash cookies, see Choices About How We Use and Disclose Your \r\nInformation.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Third-Party Use of Cookies and Other Tracking Technologies</div>\r\n\r\nSome content or applications, including advertisements, on the Website may be served \r\nby third-parties, including advertisers, ad networks and servers, content providers, and \r\napplication providers. These third parties may use cookies alone or in conjunction with \r\nweb beacons or other tracking technologies to collect information about you when you \r\nuse our website. The information they collect may be associated with your personal \r\ninformation or they may collect information, including personal information, about your \r\nonline activities over time and across different websites and other online services. They \r\nmay use this information to provide you with interest-based (behavioral) advertising or \r\nother targeted content. \r\n<br>\r\nWe do not control these third parties' tracking technologies or how they may be used. If \r\nyou have any questions about an advertisement or other targeted content, you should \r\ncontact the responsible provider directly. For information about how you can opt out of \r\nreceiving targeted advertising from many providers, see Choices About How We Use \r\nand Disclose Your Information.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">How We Use Your Information</div>\r\n\r\nWe use information that we collect about you or that you provide to us, including any \r\npersonal information:\r\n<br>\r\nTo present our Website and its contents to you.\r\n<br>\r\nTo provide you with information, products, or services that you request from us.\r\n<br>\r\nTo fulfill any other purpose for which you provide it.\r\n<br>\r\nTo provide you with notices about your account or subscription, including expiration and \r\n\u00A92025 {{PrivacyAndTerms?.companyName}}\r\n<br>\r\nProprietary and Confidential Information. Strictly for use by {{PrivacyAndTerms?.companyName}} approved customers only.\r\n<br>\r\nDuplication or alteration is strictly prohibited without prior written consent.\r\nrenewal notices.\r\n<br>\r\nTo carry out our obligations and enforce our rights arising from any contracts entered \r\ninto between you and us, including for billing and collection.\r\n<br>\r\nTo notify you about changes to our Website or any products or services we offer or \r\nprovide though it.\r\n<br>\r\nTo allow you to participate in interactive features on our Website.\r\n<br>\r\nIn any other way we may describe when you provide the information.\r\n<br>\r\nFor any other purpose with your consent.\r\n<br>\r\nWe may also use your information to contact you about goods and services that may be \r\nof interest to you. If you do not want us to use your information in this way, please \r\n[check the relevant box located on the form on which we collect your data adjust your \r\nuser preferences in your account profile. For more information, see Choices About How \r\nWe Use and Disclose Your Information.\r\n<br>\r\nWe may use the information we have collected from you to enable us to display \r\nadvertisements to our advertisers' target audiences. Even though we do not disclose \r\nyour personal information for these purposes without your consent, if you click on or \r\notherwise interact with an advertisement, the advertiser may assume that you meet its \r\ntarget criteria.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Disclosure of Your Information</div>\r\n\r\nWe may disclose aggregated information about our users without restriction. \r\nWe may disclose personal information that we collect or you provide as described in this \r\nprivacy policy:\r\n<br>\r\nTo our subsidiaries and affiliates.\r\n<br>\r\nTo contractors, service providers, and other third parties we use to support our business.\r\n<br>\r\nTo a buyer or other successor in the event of a merger, divestiture, restructuring, \r\nreorganization, dissolution, or other sale or transfer of some or all of our assets, whether \r\nas a going concern or as part of bankruptcy, liquidation, or similar proceeding, in which \r\npersonal information held by us about our Website users is among the assets \r\ntransferred.\r\n<br>\r\nTo third parties to market their products or services to you if you have not opted out of \r\nthese disclosures. For more information, see Choices About How We Use and Disclose \r\nYour Information.\r\n<br>\r\nTo fulfill the purpose for which you provide it. \r\n<br>\r\nFor any other purpose disclosed by us when you provide the information.\r\n<br>\r\nWith your consent.\r\n<br>\r\nWe may also disclose your personal information:\r\n<br>\r\nTo comply with any court order, law, or legal process, including to respond to any \r\ngovernment or regulatory request.\r\n<br>\r\nTo enforce or apply our terms of use and other agreements, including for billing and \r\ncollection purposes.\r\n<br>\r\nIf we believe disclosure is necessary or appropriate to protect the rights, property, or \r\nsafety of our company, our customers, or others. \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Choices About How We Use and Disclose Your Information</div>\r\n\r\nWe strive to provide you with choices regarding the personal information you provide to \r\nus. We have created mechanisms to provide you with the following control over your \r\ninformation: \r\n<br>\r\n<span class=\"h\">Tracking Technologies and Advertising.</span>  You can set your browser to refuse all or \r\nsome browser cookies, or to alert you when cookies are being sent. If you disable or \r\nrefuse cookies, please note that some parts of this site may then be inaccessible or not \r\nfunction properly.\r\n<br>\r\n<span class=\"h\">Disclosure of Your Information for Third-Party Advertising.</span>  If you do not want us to \r\nshare your personal information with unaffiliated or non-agent third parties for \r\npromotional purposes, you can opt-out by logging into the Website and adjusting your \r\nuser preferences in your account profile or by sending us an email with your request to \r\n{{PrivacyAndTerms?.privacyPolicyUrl}}.\r\n<br>\r\n<span class=\"h\">Promotional Offers from the Company.</span>  If you do not wish to have your email address \r\nor contact information used by the Company to promote our own or third parties' \r\nproducts or services, you can opt-out by logging into the Website and adjusting your \r\nuser preferences in your account profile or by sending us an email stating your request \r\nto {{PrivacyAndTerms?.email}}. If we have sent you a promotional email, you may send us a \r\nreturn email asking to be omitted from future email distributions.\r\n<br> \r\n<span class=\"h\">Targeted Advertising.</span>  If you do not want us to use information that we collect or that \r\nyou provide to us to deliver advertisements according to our advertisers' target\u0002audience preferences, you can opt-out by sending us an email stating your request to \r\n{{PrivacyAndTerms?.email}}.\r\n<br> \r\nWe do not control third parties' collection or use of your information to serve interest\u0002based advertising. However these third parties may provide you with ways to choose \r\nnot to have your information collected or used in this way. You can opt out of receiving \r\ntargeted ads from members of the Network Advertising Initiative (\"NAI\") on the NAI's \r\nwebsite.\r\n<br>\r\nResidents of certain states, such as California, Nevada, Colorado, Connecticut, Virginia, \r\nand Utah may have additional personal information rights and choices. Please see Your \r\nState Privacy Rights for more information.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Accessing and Correcting Your Information</div>\r\nYou can review and change your personal information by logging into the Website and \r\nvisiting your account profile page.\r\n<br>\r\nResidents of certain states, such as California, Nevada, Colorado, Virginia, and Utah \r\nmay have additional personal information rights and choices. Please see Your State \r\nPrivacy Rights for more information.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Your State Privacy Rights</div>\r\nState consumer privacy laws may provide their residents with additional rights regarding \r\nour use of their personal information.\r\n<br> \r\nColorado, Connecticut, Virginia, and Utah each provide their state residents with rights \r\nto:\r\n<br>\r\nConfirm whether we process their personal information.\r\n<br>\r\nAccess and delete certain personal information.\r\n<br>\r\nData portability.\r\n<br>\r\nOpt-out of personal data processing for targeted advertising and sales.\r\n<br>\r\nColorado, Connecticut, and Virginia also provide their state residents with rights to:\r\n<br>\r\nCorrect inaccuracies in their personal information, taking into account the information's \r\nnature processing purpose.\r\n<br>\r\nOpt-out of profiling in furtherance of decisions that produce legal or similarly significant\r\neffects. \r\n<br>\r\nTo exercise any of these rights please send an email to {{PrivacyAndTerms?.copyrightPolicyLink}}. To appeal a \r\ndecision regarding a consumer rights request send an email to {{PrivacyAndTerms?.email}}.\r\n<br>\r\n<br>\r\n<div class=\"section-title\">For California Residents Only:</div>\r\n<span class=\"h\">California Privacy Rights</span> \r\n<br>\r\nThis section applies solely to individuals who reside in the State of California \r\n(\u201Cconsumers\u201D or \u201Cyou\u201D). We adopt this notice to comply with the California Consumer \r\nPrivacy Act of 2018 (CCPA), as amended by the California Privacy Rights Act of 2020 \r\n(CPRA), and any terms defined in the CCPA/CPRA have the same meaning when used \r\nin this section.\r\n<br>\r\n<span class=\"h\">Your Rights Under California Law</span>\r\n\r\n<br>\r\nIf you are a California resident, you have the following rights with respect to your \r\npersonal information:\r\n<br>\r\n<span class=\"h\">Right to Know/Access \u2013</span>\r\n You may request that we disclose to you the categories and \r\nspecific pieces of personal information we have collected about you, as well as the \r\nsources, purposes for collection, and categories of third parties to whom the information \r\nis disclosed.\r\n<br>\r\n<span class=\"h\">Right to Delete \u2013</span>\r\n You may request that we delete personal information we have \r\ncollected from you, subject to certain exceptions.\r\n<br>\r\n<span class=\"h\">Right to Correct \u2013</span>\r\n You may request that we correct inaccurate personal information \r\nthat we maintain about you.\r\n<br>\r\n<span class=\"h\">Right to Opt Out of Sale/Sharing \u2013 </span>\r\nYou may request that we do not \u201Csell\u201D or \u201Cshare\u201D \r\nyour personal information (as those terms are defined under the CCPA/CPRA). We do \r\nnot sell your personal information in the traditional sense, but if our practices change we \r\nwill update this policy and provide you with a method to exercise this right.\r\n<br>\r\n<span class=\"h\">Right to Limit Use of Sensitive Personal Information \u2013</span>\r\n\r\n If we collect sensitive \r\npersonal information (such as government ID numbers, precise geolocation, or financial \r\naccount information), you may direct us to limit its use to what is reasonably necessary \r\nto provide the services requested.\r\n<br>\r\n<span class=\"h\">Right of Non-Discrimination \u2013</span>\r\n\r\n We will not discriminate against you for exercising your \r\nprivacy rights.\r\n<br>\r\n<span class=\"h\">Exercising Your Rights</span>\r\n\r\n\r\n<br>\r\nTo exercise any of the rights described above, please submit a verifiable consumer \r\nrequest to us by:\r\n<br>\r\nEmail: {{PrivacyAndTerms?.email}}\r\n<br>\r\nPhone: {{PrivacyAndTerms?.phone}}\r\n<br>\r\nOnline request form: {{PrivacyAndTerms?.requestForm}}\r\n<br>\r\nOnly you, or someone legally authorized to act on your behalf, may make a verifiable \r\nconsumer request.\r\n<br>\r\n<span class=\"h\">Information We Collect\r\n</span>\r\n\r\n<br>\r\nIn the past 12 months, we may have collected the following categories of personal \r\ninformation about consumers:\r\n<br>\r\nIdentifiers (such as name, email address, phone number)\r\n<br>\r\nInternet or network activity (such as browsing history on our website)\r\n<br>\r\nCommercial information (such as records of products or services purchased)\r\n<br>\r\n\r\nGeolocation data (if you enable location services)\r\n<br>\r\nInferences drawn from other personal information (such as preferences or interests)\r\nWe collect this information for the purposes described in the \u201CHow We Use Your \r\nInformation\u201D section of our general Privacy Policy.\r\n<br>\r\n<span class=\"h\">Data Retention </span>\r\n\r\n<br>\r\nWe retain personal information for as long as necessary to fulfill the purposes described \r\nin this Privacy Policy, unless a longer retention period is required or permitted by law.\r\n<br>\r\n<span class=\"h\">Shine the Light Law </span>\r\n\r\n\r\n<br>\r\nCalifornia residents may also request certain information regarding our disclosure of \r\npersonal information to third parties for their direct marketing purposes under California \r\nCivil Code \u00A71798.83 (\u201CShine the Light\u201D law). To make such a request, please contact us \r\nat [Insert contact email].\r\n<br>\r\n<br>\r\n<div class=\"section-title\">Data Security</div>\r\nUnfortunately, the transmission of information via the internet is not completely secure. \r\nAlthough we do our best to protect your personal information, we cannot guarantee the \r\nsecurity of your personal information transmitted to our Website. Any transmission of \r\npersonal information is at your own risk. We are not responsible for circumvention of \r\nany privacy settings or security measures contained on the Website.] \r\n<br>\r\n<br>\r\n<div class=\"section-title\">Changes to Our Privacy Policy</div>\r\nIt is our policy to post any changes we make to our privacy policy on this page. If we \r\nmake material changes to how we treat our users' personal information, we will notify \r\nyou through a notice on the Website home page. The date the privacy policy was last \r\nrevised is identified at the top of the page. You are responsible for ensuring we have an \r\nup-to-date active and deliverable email address for you, and for periodically visiting our \r\nWebsite and this privacy policy to check for any changes.\r\n<br>\r\nContact Information\r\n<br>\r\nTo ask questions or comment about this privacy policy and our privacy practices, \r\ncontact us at: \r\n<br>\r\n{{PrivacyAndTerms?.email}}\r\n</div>\r\n<div class=\"logo-section mt-5 text-center\" >\r\n  <img [src]=\"branding?.logo\" [alt]=\"branding?.displayName\" />\r\n\r\n  <!-- <p class=\"address\">\r\n    {{ PrivacyAndTerms?.address1 }}\r\n    {{ PrivacyAndTerms?.city }}\r\n    {{ PrivacyAndTerms?.state }}\r\n    {{ PrivacyAndTerms?.country }} {{ PrivacyAndTerms?.zipCode }}\r\n    \r\n  </p> -->\r\n</div>\r\n<div class=\"content\">\r\n    <p>\r\n      \u00A9{{PrivacyAndTerms?.currentYear}} {{PrivacyAndTerms?.companyName}}.<br>\r\n      Proprietary and Confidential Information. Strictly for use by {{PrivacyAndTerms?.companyName}} approved customers only.<br>\r\n      Duplication or alteration is strictly prohibited without prior written consent.\r\n    </p>\r\n    <!-- <p class=\"last-modified\">Last modified: {{PrivacyAndTerms?.modifiedDate}}</p> -->\r\n  </div>\r\n", styles: [".privacy-policy-modal{background:#fff;padding:0 20px;max-width:650px;margin:auto;font-family:Arial,sans-serif;display:flex;flex-direction:column;align-items:center}.privacy-policy-modal .header{text-align:center;margin-bottom:40px}.privacy-policy-modal .header h1{font-size:26px;font-weight:700;margin:0}.privacy-policy-modal .modal-footer{width:100%;display:flex;justify-content:center}.privacy-policy-modal .modal-footer .btn{padding:8px 25px;font-size:14px}.section-title{color:#000;text-decoration:underline;font-weight:700}.content{font-size:14px;line-height:1.7;text-align:center;margin-bottom:40px;margin-top:10px}.content .last-modified{margin-top:20px;font-size:12px;color:gray}.h{color:#000;font-weight:700}.logo-section{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:-10px;overflow:visible;min-height:42px}.logo-section img{display:block;max-width:180px;height:auto;margin-bottom:15px;position:relative;z-index:2}.logo-section .address{font-size:14px;line-height:1.6;margin-bottom:10px}.logo-section .address a{color:#007bff;text-decoration:none}.logo-section .address a:hover{text-decoration:underline}.logo-section .policy-title{font-weight:700;font-size:16px;margin-top:5px}\n"] }]
         }], propDecorators: { title: [{
                 type: Input
             }], branding: [{
@@ -1377,11 +1377,11 @@ class StepperComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StepperComponent, deps: [{ token: CredentialingStore }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: StepperComponent, isStandalone: false, selector: "app-stepper", ngImport: i0, template: "<div class=\"stepper-wrapper\">\r\n  <div class=\"tabs\">\r\n    <div\r\n      *ngFor=\"let step of steps; let i = index\"\r\n      class=\"tab\"\r\n      [class.active]=\"store.currentStep() === i + 1\"\r\n      [class.completed]=\"store.currentStep() > i + 1\"\r\n      (click)=\"goToStep(i)\"\r\n    >\r\n      {{ step }}\r\n    </div>\r\n    <div class=\"align-items-center d-flex step-count\">\r\n      Step {{ store.currentStep() }}/{{ steps.length }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;align-items:center}.stepper-wrapper .tabs{width:100%;display:flex}.stepper-wrapper .tabs .tab{padding:9px 36.4px;cursor:pointer;background-color:#f1f4fa;color:#4077ad;font-weight:500;transition:all .3s;text-align:center}.stepper-wrapper .tabs .tab.active,.stepper-wrapper .tabs .tab.completed{background-color:#4077ad;color:#fff}.stepper-wrapper .step-count{font-weight:500;color:#fff;background:#4077ad;width:10%;justify-content:center}@media screen and (max-width: 767px){.stepper-wrapper .tabs{width:100%;display:flex;flex-direction:column}.stepper-wrapper .step-count{width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: StepperComponent, isStandalone: false, selector: "app-stepper", ngImport: i0, template: "<div class=\"stepper-wrapper\">\r\n  <div class=\"tabs\">\r\n    <div\r\n      *ngFor=\"let step of steps; let i = index\"\r\n      class=\"tab\"\r\n      [class.active]=\"store.currentStep() === i + 1\"\r\n      [class.completed]=\"store.currentStep() > i + 1\"\r\n      (click)=\"goToStep(i)\"\r\n    >\r\n      {{ step }}\r\n    </div>\r\n    <div class=\"align-items-center d-flex step-count\">\r\n      Step {{ store.currentStep() }}/{{ steps.length }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;align-items:center}.stepper-wrapper .tabs{width:100%;display:flex}.stepper-wrapper .tabs .tab{padding:9px 36.4px;cursor:pointer;background-color:#f1f4fa;color:#4077ad;font-weight:500;transition:all .3s;text-align:center}.stepper-wrapper .tabs .tab.active,.stepper-wrapper .tabs .tab.completed{background-color:#4077ad;color:#fff}.stepper-wrapper .step-count{font-weight:500;color:#fff;background:#4077ad;width:10%;justify-content:center}@media screen and (max-width: 767px){.stepper-wrapper .tabs{width:100%;display:flex;flex-direction:column}.stepper-wrapper .step-count{width:100%;padding:8px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StepperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-stepper', standalone: false, template: "<div class=\"stepper-wrapper\">\r\n  <div class=\"tabs\">\r\n    <div\r\n      *ngFor=\"let step of steps; let i = index\"\r\n      class=\"tab\"\r\n      [class.active]=\"store.currentStep() === i + 1\"\r\n      [class.completed]=\"store.currentStep() > i + 1\"\r\n      (click)=\"goToStep(i)\"\r\n    >\r\n      {{ step }}\r\n    </div>\r\n    <div class=\"align-items-center d-flex step-count\">\r\n      Step {{ store.currentStep() }}/{{ steps.length }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;align-items:center}.stepper-wrapper .tabs{width:100%;display:flex}.stepper-wrapper .tabs .tab{padding:9px 36.4px;cursor:pointer;background-color:#f1f4fa;color:#4077ad;font-weight:500;transition:all .3s;text-align:center}.stepper-wrapper .tabs .tab.active,.stepper-wrapper .tabs .tab.completed{background-color:#4077ad;color:#fff}.stepper-wrapper .step-count{font-weight:500;color:#fff;background:#4077ad;width:10%;justify-content:center}@media screen and (max-width: 767px){.stepper-wrapper .tabs{width:100%;display:flex;flex-direction:column}.stepper-wrapper .step-count{width:100%}}\n"] }]
+            args: [{ selector: 'app-stepper', standalone: false, template: "<div class=\"stepper-wrapper\">\r\n  <div class=\"tabs\">\r\n    <div\r\n      *ngFor=\"let step of steps; let i = index\"\r\n      class=\"tab\"\r\n      [class.active]=\"store.currentStep() === i + 1\"\r\n      [class.completed]=\"store.currentStep() > i + 1\"\r\n      (click)=\"goToStep(i)\"\r\n    >\r\n      {{ step }}\r\n    </div>\r\n    <div class=\"align-items-center d-flex step-count\">\r\n      Step {{ store.currentStep() }}/{{ steps.length }}\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;align-items:center}.stepper-wrapper .tabs{width:100%;display:flex}.stepper-wrapper .tabs .tab{padding:9px 36.4px;cursor:pointer;background-color:#f1f4fa;color:#4077ad;font-weight:500;transition:all .3s;text-align:center}.stepper-wrapper .tabs .tab.active,.stepper-wrapper .tabs .tab.completed{background-color:#4077ad;color:#fff}.stepper-wrapper .step-count{font-weight:500;color:#fff;background:#4077ad;width:10%;justify-content:center}@media screen and (max-width: 767px){.stepper-wrapper .tabs{width:100%;display:flex;flex-direction:column}.stepper-wrapper .step-count{width:100%;padding:8px}}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }] });
 
 const STORAGE_KEY = 'profile_full_state';
@@ -2350,11 +2350,11 @@ class EducationComponent {
         this.store.nextStep();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, deps: [{ token: UserEducationService }, { token: CredentialingStore }, { token: EducationStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i6.TokenService }, { token: i3.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EducationComponent, isStandalone: false, selector: "app-education", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3>Add Education</h3>\r\n    <p class=\"hint\">\r\n      Please list your educational history. This can cover anything from GED to college degree\r\n    </p>\r\n    <form [formGroup]=\"educationForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n               educationForm.get('courseName')?.hasError('required')\">\r\n            Degree is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Diploma / Degree Type</div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n               educationForm.get('courseType')?.hasError('required')\">\r\n            Diploma / Degree Type is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Institution Name</div>\r\n          <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n               educationForm.get('instituteName')?.hasError('required')\">\r\n            Institution name is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n            <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n          <span class=\"ng-value-label\">\r\n            {{item.country}}\r\n          </span>\r\n          <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n            <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n          </span> &nbsp;\r\n        </ng-template> -->\r\n          </ng-select>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field city\">\r\n          <div class=\"head\">City</div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n               educationForm.get('city')?.hasError('required')\">\r\n            Enter City\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n         <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n               educationForm.get('startDate')?.hasError('required')\">\r\n            Start Date is required\r\n          </small>\r\n         \r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n               educationForm.get('endDate')?.hasError('required')\">\r\n            To Date is required\r\n          </small>\r\n         \r\n            </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Comments</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n      <div class=\"upload-wrapper\">\r\n        <p class=\"upload-title\">Upload</p>\r\n        <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n        <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          Selected: {{ fileName }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">  \r\n         <button type=\"button\" class=\"secondary\"  (click)=\"nextStep()\" >\r\n       Skip\r\n      </button>     \r\n        <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n          (click)=\"saveFile()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Education Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" >\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.courseName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n\r\n            <div>\r\n              <strong>Course Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Course Type</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Institute Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n             <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n            </div> <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\"> {{ exp.city }}</span>\r\n            </div>\r\n         \r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Comments</strong><br />\r\n            <span class=\"job-title\"> {{ exp.comments }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n        Add More Educations\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin-top:24px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{gap:5px}.accordion-item{margin:20px 0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EducationComponent, isStandalone: false, selector: "app-education", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3>Add Education</h3>\r\n    <p class=\"hint\">\r\n      Please list your educational history. This can cover anything from GED to college degree\r\n    </p>\r\n    <form [formGroup]=\"educationForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n               educationForm.get('courseName')?.hasError('required')\">\r\n            Degree is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Diploma / Degree Type</div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n               educationForm.get('courseType')?.hasError('required')\">\r\n            Diploma / Degree Type is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Institution Name</div>\r\n          <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n               educationForm.get('instituteName')?.hasError('required')\">\r\n            Institution name is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n            <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n          <span class=\"ng-value-label\">\r\n            {{item.country}}\r\n          </span>\r\n          <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n            <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n          </span> &nbsp;\r\n        </ng-template> -->\r\n          </ng-select>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field city\">\r\n          <div class=\"head\">City</div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n               educationForm.get('city')?.hasError('required')\">\r\n            Enter City\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n         <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n               educationForm.get('startDate')?.hasError('required')\">\r\n            Start Date is required\r\n          </small>\r\n         \r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n               educationForm.get('endDate')?.hasError('required')\">\r\n            To Date is required\r\n          </small>\r\n         \r\n            </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Comments</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n      <div class=\"upload-wrapper\">\r\n        <p class=\"upload-title\">Upload</p>\r\n        <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n        <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          Selected: {{ fileName }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">  \r\n         <button type=\"button\" class=\"secondary\"  (click)=\"nextStep()\" >\r\n       Skip\r\n      </button>     \r\n        <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n          (click)=\"saveFile()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Education Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" >\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.courseName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n\r\n            <div>\r\n              <strong>Course Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Course Type</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Institute Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n             <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n            </div> <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\"> {{ exp.city }}</span>\r\n            </div>\r\n         \r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Comments</strong><br />\r\n            <span class=\"job-title\"> {{ exp.comments }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n        Add More Educations\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin-top:24px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px;flex-direction:column-reverse}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{gap:8px;display:flex;flex-direction:column-reverse}.accordion-item{margin:20px 0}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-education', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3>Add Education</h3>\r\n    <p class=\"hint\">\r\n      Please list your educational history. This can cover anything from GED to college degree\r\n    </p>\r\n    <form [formGroup]=\"educationForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n               educationForm.get('courseName')?.hasError('required')\">\r\n            Degree is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Diploma / Degree Type</div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n               educationForm.get('courseType')?.hasError('required')\">\r\n            Diploma / Degree Type is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Institution Name</div>\r\n          <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n               educationForm.get('instituteName')?.hasError('required')\">\r\n            Institution name is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n            <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n          <span class=\"ng-value-label\">\r\n            {{item.country}}\r\n          </span>\r\n          <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n            <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n          </span> &nbsp;\r\n        </ng-template> -->\r\n          </ng-select>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field city\">\r\n          <div class=\"head\">City</div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n               educationForm.get('city')?.hasError('required')\">\r\n            Enter City\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n         <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n               educationForm.get('startDate')?.hasError('required')\">\r\n            Start Date is required\r\n          </small>\r\n         \r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n               educationForm.get('endDate')?.hasError('required')\">\r\n            To Date is required\r\n          </small>\r\n         \r\n            </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Comments</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n      <div class=\"upload-wrapper\">\r\n        <p class=\"upload-title\">Upload</p>\r\n        <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n        <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          Selected: {{ fileName }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">  \r\n         <button type=\"button\" class=\"secondary\"  (click)=\"nextStep()\" >\r\n       Skip\r\n      </button>     \r\n        <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n          (click)=\"saveFile()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Education Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" >\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.courseName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n\r\n            <div>\r\n              <strong>Course Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Course Type</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Institute Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n             <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n            </div> <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\"> {{ exp.city }}</span>\r\n            </div>\r\n         \r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Comments</strong><br />\r\n            <span class=\"job-title\"> {{ exp.comments }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n        Add More Educations\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin-top:24px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{gap:5px}.accordion-item{margin:20px 0}}\n"] }]
+            args: [{ selector: 'app-education', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3>Add Education</h3>\r\n    <p class=\"hint\">\r\n      Please list your educational history. This can cover anything from GED to college degree\r\n    </p>\r\n    <form [formGroup]=\"educationForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n               educationForm.get('courseName')?.hasError('required')\">\r\n            Degree is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Diploma / Degree Type</div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n               educationForm.get('courseType')?.hasError('required')\">\r\n            Diploma / Degree Type is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Institution Name</div>\r\n          <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n               educationForm.get('instituteName')?.hasError('required')\">\r\n            Institution name is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n            <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n          <span class=\"ng-value-label\">\r\n            {{item.country}}\r\n          </span>\r\n          <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n            <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n          </span> &nbsp;\r\n        </ng-template> -->\r\n          </ng-select>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field city\">\r\n          <div class=\"head\">City</div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n               educationForm.get('city')?.hasError('required')\">\r\n            Enter City\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n         <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n               educationForm.get('startDate')?.hasError('required')\">\r\n            Start Date is required\r\n          </small>\r\n         \r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n               educationForm.get('endDate')?.hasError('required')\">\r\n            To Date is required\r\n          </small>\r\n         \r\n            </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Comments</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n      <div class=\"upload-wrapper\">\r\n        <p class=\"upload-title\">Upload</p>\r\n        <p class=\"upload-subtitle\">Add documents such as Diploma, Degree</p>\r\n        <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          Selected: {{ fileName }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">  \r\n         <button type=\"button\" class=\"secondary\"  (click)=\"nextStep()\" >\r\n       Skip\r\n      </button>     \r\n        <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n          (click)=\"saveFile()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Education Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" >\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.courseName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n\r\n            <div>\r\n              <strong>Course Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Course Type</strong><br />\r\n              <span class=\"job-title\"> {{ exp.courseType }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Institute Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.instituteName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n             <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.state | stateName }}</span>\r\n            </div> <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\"> {{ exp.city }}</span>\r\n            </div>\r\n         \r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Comments</strong><br />\r\n            <span class=\"job-title\"> {{ exp.comments }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n        Add More Educations\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin-top:24px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:400px}.accordion-item{margin:20px 100px}@media screen and (max-width: 767px){.row{flex-direction:column;gap:12px}.right-actions{gap:9px;flex-direction:column-reverse}.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{gap:8px;display:flex;flex-direction:column-reverse}.accordion-item{margin:20px 0}}\n"] }]
         }], ctorParameters: () => [{ type: UserEducationService }, { type: CredentialingStore }, { type: EducationStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -2764,11 +2764,11 @@ class CertificationComponent {
         this.store.nextStep();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, deps: [{ token: UserDocumentService }, { token: CredentialingStore }, { token: CertificationStore }, { token: i6.TokenService }, { token: PostalCodeServices }, { token: i3.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n  <h3>Add Certificates</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          Certificate number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          Certificate issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State here\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n\r\n      <p class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add certificates below</p>\r\n\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Certifications\r\n      </button>\r\n\r\n      <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n\r\n      <p class=\"file-name\" *ngIf=\"fileName\">\r\n        Selected: {{ fileName }}\r\n      </p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Certifications Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Certificate Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Certificate Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n        Add More Certifications\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:15px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}@media screen and (max-width: 767px){.hint{margin-bottom:5px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px}.right-actions{gap:54px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n  <h3>Add Certificates</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          Certificate number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          Certificate issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State here\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n\r\n      <p class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add certificates below</p>\r\n\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Certifications\r\n      </button>\r\n\r\n      <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n\r\n      <p class=\"file-name\" *ngIf=\"fileName\">\r\n        Selected: {{ fileName }}\r\n      </p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Certifications Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Certificate Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Certificate Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Certifications\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:15px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px}.right-actions{gap:5px;flex-direction:column-reverse}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-certification', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n  <h3>Add Certificates</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          Certificate number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          Certificate issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State here\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n\r\n      <p class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add certificates below</p>\r\n\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Certifications\r\n      </button>\r\n\r\n      <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n\r\n      <p class=\"file-name\" *ngIf=\"fileName\">\r\n        Selected: {{ fileName }}\r\n      </p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Certifications Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Certificate Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Certificate Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n        Add More Certifications\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:15px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}@media screen and (max-width: 767px){.hint{margin-bottom:5px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px}.right-actions{gap:54px}}\n"] }]
+            args: [{ selector: 'app-certification', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n  <h3>Add Certificates</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          Certificate number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          Certificate issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State here\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n\r\n      <p class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add certificates below</p>\r\n\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Certifications\r\n      </button>\r\n\r\n      <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n\r\n      <p class=\"file-name\" *ngIf=\"fileName\">\r\n        Selected: {{ fileName }}\r\n      </p>\r\n\r\n    </div>\r\n\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Certifications Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Certificate Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Certificate Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Certifications\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:15px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px}.right-actions{gap:5px;flex-direction:column-reverse}}\n"] }]
         }], ctorParameters: () => [{ type: UserDocumentService }, { type: CredentialingStore }, { type: CertificationStore }, { type: i6.TokenService }, { type: PostalCodeServices }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -3750,7 +3750,7 @@ class SkillsComponent {
         this.userSkillsSub?.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SkillsComponent, deps: [{ token: SkillSetService }, { token: UserSkillSetService }, { token: i3.UntypedFormBuilder }, { token: UtilsService }, { token: i6.RoleContextService }, { token: CredentialingStore }, { token: i6.TokenService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n  <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n    business profile you can add skills under</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n          class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n          <div>\r\n            <label>Service Provider</label> <br>\r\n            {{ skill.providerName }}\r\n          </div>\r\n          <div>\r\n            <label>Skill</label> <br>\r\n            {{ skill.skillSetName }}\r\n          </div>\r\n          <div style=\"pointer-events: none;\">\r\n            <label>Self Ability Rating</label> <br>\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <div>\r\n            <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n            {{ skill?.year }}\r\n          </div>\r\n          <div>\r\n            <label>Visible</label> <br>\r\n            <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n          </div>\r\n          <div class=\"w-100 mt-3\">\r\n            <label>Description</label> <br>\r\n            {{ skill.notes }}\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n            <div>\r\n              <label>Service Provider</label> <br>\r\n              {{ skill.providerName }}\r\n            </div>\r\n            <div>\r\n              <label>Skill</label> <br>\r\n              {{ skill.skillSetName }}\r\n            </div>\r\n            <div>\r\n              <label>Self Ability Rating</label> <br>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div style=\"width: 200px;\">\r\n              <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\" formControlName=\"year\"\r\n                [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n            </div>\r\n            <div>\r\n              <label>Visible</label> <br>\r\n              <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"mt-3\">\r\n            <label>Description</label> <br>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n              style=\"height: 80px;\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\r\n          <div class=\"search-part\">\r\n            <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n              (input)=\"getSkillSets()\" />\r\n            <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\"\r\n                height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n             <input \r\n  type=\"checkbox\"\r\n  [checked]=\"skill.selected\"\r\n  (change)=\"onSelectedSkillsets($event, skill)\"\r\n  id=\"{{skill.id}}\"\r\n  name=\"{{skill.id}}\">\r\n<label class=\"text-title\" for=\"{{skill.id}}\">\r\n  {{ skill.name }}\r\n</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n                        Rating is\r\n                        required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label \">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n                      formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n                      bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n                        required</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile\r\n                      Visibility</label><br />\r\n                    <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n      <!-- <div class=\"row pt-3\">\r\n        <div class=\"pt-3 text-end\">\r\n          <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n        </div>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div>\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"store.goToAdd()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}@media screen and (max-width: 767px){.skills-container{padding:0 10px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.back-btn{width:96%}.continue-btn{padding:10px 43px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i11$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i12.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i12.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i12.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n  <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n    business profile you can add skills under</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n          class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n          <div>\r\n            <label>Service Provider</label> <br>\r\n            {{ skill.providerName }}\r\n          </div>\r\n          <div>\r\n            <label>Skill</label> <br>\r\n            {{ skill.skillSetName }}\r\n          </div>\r\n          <div style=\"pointer-events: none;\">\r\n            <label>Self Ability Rating</label> <br>\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <div>\r\n            <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n            {{ skill?.year }}\r\n          </div>\r\n          <div>\r\n            <label>Visible</label> <br>\r\n            <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n          </div>\r\n          <div class=\"w-100 mt-3\">\r\n            <label>Description</label> <br>\r\n            {{ skill.notes }}\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n            <div>\r\n              <label>Service Provider</label> <br>\r\n              {{ skill.providerName }}\r\n            </div>\r\n            <div>\r\n              <label>Skill</label> <br>\r\n              {{ skill.skillSetName }}\r\n            </div>\r\n            <div>\r\n              <label>Self Ability Rating</label> <br>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div style=\"width: 200px;\">\r\n              <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\" formControlName=\"year\"\r\n                [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n            </div>\r\n            <div>\r\n              <label>Visible</label> <br>\r\n              <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"mt-3\">\r\n            <label>Description</label> <br>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n              style=\"height: 80px;\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\r\n          <div class=\"search-part\">\r\n            <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n              (input)=\"getSkillSets()\" />\r\n            <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\"\r\n                height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n             <input \r\n  type=\"checkbox\"\r\n  [checked]=\"skill.selected\"\r\n  (change)=\"onSelectedSkillsets($event, skill)\"\r\n  id=\"{{skill.id}}\"\r\n  name=\"{{skill.id}}\">\r\n<label class=\"text-title\" for=\"{{skill.id}}\">\r\n  {{ skill.name }}\r\n</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n                        Rating is\r\n                        required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label \">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n                      formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n                      bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n                        required</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile\r\n                      Visibility</label><br />\r\n                    <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n      <!-- <div class=\"row pt-3\">\r\n        <div class=\"pt-3 text-end\">\r\n          <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n        </div>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"store.goToAdd()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}@media screen and (max-width: 767px){.skills-container{padding:0 10px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.mb-res{display:flex;flex-direction:column-reverse;gap:5px;width:100%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i11$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i12.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i12.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i12.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
             trigger('expandCollapse', [
                 state('open', style({
                     height: '*',
@@ -3788,7 +3788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             })),
                             transition('open <=> closed', animate('300ms ease'))
                         ])
-                    ], template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n  <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n    business profile you can add skills under</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n          class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n          <div>\r\n            <label>Service Provider</label> <br>\r\n            {{ skill.providerName }}\r\n          </div>\r\n          <div>\r\n            <label>Skill</label> <br>\r\n            {{ skill.skillSetName }}\r\n          </div>\r\n          <div style=\"pointer-events: none;\">\r\n            <label>Self Ability Rating</label> <br>\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <div>\r\n            <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n            {{ skill?.year }}\r\n          </div>\r\n          <div>\r\n            <label>Visible</label> <br>\r\n            <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n          </div>\r\n          <div class=\"w-100 mt-3\">\r\n            <label>Description</label> <br>\r\n            {{ skill.notes }}\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n            <div>\r\n              <label>Service Provider</label> <br>\r\n              {{ skill.providerName }}\r\n            </div>\r\n            <div>\r\n              <label>Skill</label> <br>\r\n              {{ skill.skillSetName }}\r\n            </div>\r\n            <div>\r\n              <label>Self Ability Rating</label> <br>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div style=\"width: 200px;\">\r\n              <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\" formControlName=\"year\"\r\n                [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n            </div>\r\n            <div>\r\n              <label>Visible</label> <br>\r\n              <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"mt-3\">\r\n            <label>Description</label> <br>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n              style=\"height: 80px;\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\r\n          <div class=\"search-part\">\r\n            <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n              (input)=\"getSkillSets()\" />\r\n            <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\"\r\n                height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n             <input \r\n  type=\"checkbox\"\r\n  [checked]=\"skill.selected\"\r\n  (change)=\"onSelectedSkillsets($event, skill)\"\r\n  id=\"{{skill.id}}\"\r\n  name=\"{{skill.id}}\">\r\n<label class=\"text-title\" for=\"{{skill.id}}\">\r\n  {{ skill.name }}\r\n</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n                        Rating is\r\n                        required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label \">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n                      formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n                      bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n                        required</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile\r\n                      Visibility</label><br />\r\n                    <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n      <!-- <div class=\"row pt-3\">\r\n        <div class=\"pt-3 text-end\">\r\n          <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n        </div>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div>\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"store.goToAdd()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}@media screen and (max-width: 767px){.skills-container{padding:0 10px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.back-btn{width:96%}.continue-btn{padding:10px 43px}}\n"] }]
+                    ], template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Skills Preview</h5>\r\n  <!-- <p class=\"subtitle\">First-time users should enter skillsets with Inspector Match, Once you setup skillsets in your\r\n    business profile you can add skills under</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\"\r\n          class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n          <div>\r\n            <label>Service Provider</label> <br>\r\n            {{ skill.providerName }}\r\n          </div>\r\n          <div>\r\n            <label>Skill</label> <br>\r\n            {{ skill.skillSetName }}\r\n          </div>\r\n          <div style=\"pointer-events: none;\">\r\n            <label>Self Ability Rating</label> <br>\r\n            <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n          </div>\r\n          <div>\r\n            <label class=\"mb-0 pb-0 label\">Years of Experience</label> <br>\r\n            {{ skill?.year }}\r\n          </div>\r\n          <div>\r\n            <label>Visible</label> <br>\r\n            <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n          </div>\r\n          <div class=\"w-100 mt-3\">\r\n            <label>Description</label> <br>\r\n            {{ skill.notes }}\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"d-flex justify-content-between align-items-center flex-wrap gap-3\">\r\n            <div>\r\n              <label>Service Provider</label> <br>\r\n              {{ skill.providerName }}\r\n            </div>\r\n            <div>\r\n              <label>Skill</label> <br>\r\n              {{ skill.skillSetName }}\r\n            </div>\r\n            <div>\r\n              <label>Self Ability Rating</label> <br>\r\n              <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\" [key]=\"tab.at(0).get('starRating')?.value\"\r\n                [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onEditRating($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div style=\"width: 200px;\">\r\n              <label class=\"mb-0 label pb-0\">Years of Experience</label> <br>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\" formControlName=\"year\"\r\n                [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n            </div>\r\n            <div>\r\n              <label>Visible</label> <br>\r\n              <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n            </div>\r\n          </div>\r\n          <div class=\"mt-3\">\r\n            <label>Description</label> <br>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"\r\n              style=\"height: 80px;\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\r\n          <div class=\"search-part\">\r\n            <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n              (input)=\"getSkillSets()\" />\r\n            <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\"\r\n                height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n             <input \r\n  type=\"checkbox\"\r\n  [checked]=\"skill.selected\"\r\n  (change)=\"onSelectedSkillsets($event, skill)\"\r\n  id=\"{{skill.id}}\"\r\n  name=\"{{skill.id}}\">\r\n<label class=\"text-title\" for=\"{{skill.id}}\">\r\n  {{ skill.name }}\r\n</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <!-- <loader [show]=\"showLoading\" [small]=\"true\"></loader> -->\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star\r\n                        Rating is\r\n                        required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label \">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n                      formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n                      bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is\r\n                        required</div>\r\n                    </div>\r\n\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile\r\n                      Visibility</label><br />\r\n                    <input class=\"form-check-input \" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"mb-2 label\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n      <!-- <div class=\"row pt-3\">\r\n        <div class=\"pt-3 text-end\">\r\n          <button class=\"back-btn\" (click)=\"reset()\">Reset</button>\r\n        </div>\r\n      </div> -->\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"store.goToAdd()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue</button>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:40px auto;min-height:300px}.skills-container.last{min-height:unset}.title{font-size:22px;margin-bottom:4px}.subtitle{font-size:13px;color:#777;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part .card{margin-top:15px;background-color:#fff;border-radius:10px}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .card .sub-section .content{font-size:12px}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary);margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;height:45px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;height:100px;background:none}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .skills-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary);display:contents}.content-part .skills-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .skills-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}::ng-deep .ng-select.ng-select-opened>.ng-select-container{background:#f1f4fa}::ng-deep .ng-select .ng-select-container{background:#f1f4fa;border:1px solid #ccc;border-radius:5px}.back-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background:#d3dae6;color:#fff;border-radius:5px;padding:6px 8px}.save-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px}.create-btn{font-size:12px;transition:.2s;border:none;height:auto;font-weight:600;min-width:6rem;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;min-height:36px;font-size:small;height:43px}.form-control:focus{box-shadow:none!important}.close-popup{position:absolute;right:7px;top:4px;width:25px}.label{font-size:12px;font-weight:700;padding-bottom:8px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:100px}.skip-btn,.back-btn{background:#d3dae6;color:#6c757dc7;font-size:14px;border-radius:5px;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px}.skip-btn.edit,.back-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn{padding:7px 23px;background-color:#4077ad;color:#fff;border-radius:5px;min-width:8rem;min-height:45px;border:white}.continue-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background-color:#2e5b70}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}.skill-preview-body label{font-weight:500;font-size:13px;color:#6b7280}.skill-preview-body p{margin:0}@media screen and (max-width: 767px){.skills-container{padding:0 10px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.mb-res{display:flex;flex-direction:column-reverse;gap:5px;width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: SkillSetService }, { type: UserSkillSetService }, { type: i3.UntypedFormBuilder }, { type: UtilsService }, { type: i6.RoleContextService }, { type: CredentialingStore }, { type: i6.TokenService }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -4137,11 +4137,11 @@ class LicensesComponent {
         this.store.nextStep();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, deps: [{ token: UserDocumentService }, { token: CredentialingStore }, { token: LicenseStore }, { token: i6.TokenService }, { token: PostalCodeServices }, { token: i3.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n  <h3>Add Licenses</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          License number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          License issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n           Issued date is required\r\n        </small>\r\n          </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n       <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n          </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n      <p class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add licenses below</p>\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Licenses\r\n      </button>\r\n      <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n      <p class=\"file-name\" *ngIf=\"fileName\">\r\n        Selected: {{ fileName }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\"  [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Licenses Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n           <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>License  Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>License  Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n        Add More Licenses\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}@media screen and (max-width: 767px){.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px}.right-actions{gap:54px}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n  <h3>Add Licenses</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          License number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          License issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n           Issued date is required\r\n        </small>\r\n          </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n       <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n          </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n      <p class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add licenses below</p>\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Licenses\r\n      </button>\r\n      <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n      <p class=\"file-name\" *ngIf=\"fileName\">\r\n        Selected: {{ fileName }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\"  [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Licenses Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n           <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>License  Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>License  Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Licenses\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px}.right-actions{gap:5px;flex-direction:column-reverse}.add-btn{width:unset}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-licenses', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n  <h3>Add Licenses</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          License number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          License issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n           Issued date is required\r\n        </small>\r\n          </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n       <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n          </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n      <p class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add licenses below</p>\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Licenses\r\n      </button>\r\n      <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n      <p class=\"file-name\" *ngIf=\"fileName\">\r\n        Selected: {{ fileName }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\"  [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Licenses Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n           <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>License  Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>License  Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n        Add More Licenses\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}@media screen and (max-width: 767px){.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px}.right-actions{gap:54px}}\n"] }]
+            args: [{ selector: 'app-licenses', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n  <h3>Add Licenses</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <input type=\"text\" class=\"search-input\" placeholder=\"Search documents here...\" [formControl]=\"searchControl\" />\r\n <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          License number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          License issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n           Issued date is required\r\n        </small>\r\n          </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n       <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n          </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n      <p class=\"upload-title\">Upload</p>\r\n      <p class=\"upload-subtitle\">Add licenses below</p>\r\n      <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n        Upload Licenses\r\n      </button>\r\n      <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n      <p class=\"file-name\" *ngIf=\"fileName\">\r\n        Selected: {{ fileName }}\r\n      </p>\r\n    </div>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\"  [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Licenses Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" style=\"margin: 20px 100px;\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n          <span class=\"accordion-title\">\r\n            {{ exp.documentTypeName }}\r\n          </span>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n           <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>License  Name</strong><br />\r\n              <span class=\"job-title\"> {{ exp.documentTypeName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>License  Number</strong><br />\r\n              <span class=\"job-title\"> {{ exp.number }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued By</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedBy }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued State</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Issued Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.issueDate | date:'MM/dd/yyyy' }} </span>\r\n            </div>\r\n            <div>\r\n              <strong>Expiry Date</strong><br />\r\n              <span class=\"job-title\"> {{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.notes }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\" style=\"background-color: #1f4d5f;\">\r\n        Add More Licenses\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:23px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;color:#374151}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;font-weight:500;margin-bottom:5px}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.document-container{max-width:1100px;margin:auto}.search-input{width:100%;max-width:400px;height:44px;margin-bottom:16px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer}.content .title{font-weight:600;font-size:14px}.checkbox-row input{margin:0}.title{font-size:14px;font-weight:600}.content .desc{font-size:12px;color:#666;margin-top:4px}.save-btn{margin-top:20px;padding:10px 18px;border-radius:6px;border:none;background:#4077ad;color:#fff;cursor:pointer}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:350px}.accordion{margin:20px 100px}.add-btn{width:200px}@media screen and (max-width: 767px){.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0}.right-actions{gap:5px}.preview-header{margin-left:0}.accordion{margin:20px 0!important}.actions{flex-direction:column-reverse;gap:7px}.right-actions{gap:5px;flex-direction:column-reverse}.add-btn{width:unset}}\n"] }]
         }], ctorParameters: () => [{ type: UserDocumentService }, { type: CredentialingStore }, { type: LicenseStore }, { type: i6.TokenService }, { type: PostalCodeServices }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -4803,7 +4803,7 @@ class ToolsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolsComponent, deps: [{ token: ToolService }, { token: UserToolService }, { token: i3.UntypedFormBuilder }, { token: UtilsService }, { token: CredentialingStore }, { token: i6.TokenService }, { token: UserDetailService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToolsComponent, isStandalone: false, selector: "app-tools", inputs: { roleData: "roleData", providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part mt-3\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"row g-3 row-gap-2\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label>\r\n              <div class=\"value\">{{ tool.make }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <div class=\"value\">{{ tool.year }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <div class=\"value\">{{ tool.toolName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <div class=\"value\">{{ tool.model }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <div class=\"value\">{{ tool.serialNumber }}</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <div class=\"value\">{{ tool.notes }}</div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n  <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n        Add More Tools\r\n      </button>\r\n      <button    [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:46%;margin-left:0!important}}.save-btn{margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i11$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i12.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i12.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i12.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToolsComponent, isStandalone: false, selector: "app-tools", inputs: { roleData: "roleData", providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part mt-3\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"row g-3 row-gap-2\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label>\r\n              <div class=\"value\">{{ tool.make }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <div class=\"value\">{{ tool.year }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <div class=\"value\">{{ tool.toolName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <div class=\"value\">{{ tool.model }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <div class=\"value\">{{ tool.serialNumber }}</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <div class=\"value\">{{ tool.notes }}</div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n  <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n        Add More Tools\r\n      </button>\r\n      <button    [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:5px}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}}.save-btn{margin-left:15px}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i11$1.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i12.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i12.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i12.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
             trigger('expandCollapse', [
                 state('open', style({
                     height: '*',
@@ -4841,7 +4841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             })),
                             transition('open <=> closed', animate('300ms ease'))
                         ])
-                    ], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part mt-3\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"row g-3 row-gap-2\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label>\r\n              <div class=\"value\">{{ tool.make }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <div class=\"value\">{{ tool.year }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <div class=\"value\">{{ tool.toolName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <div class=\"value\">{{ tool.model }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <div class=\"value\">{{ tool.serialNumber }}</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <div class=\"value\">{{ tool.notes }}</div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n  <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n        Add More Tools\r\n      </button>\r\n      <button    [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:46%;margin-left:0!important}}.save-btn{margin-left:15px}\n"] }]
+                    ], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\">Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part mt-3\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"row g-3 row-gap-2\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label>\r\n              <div class=\"value\">{{ tool.make }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <div class=\"value\">{{ tool.year }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\" style=\"pointer-events: none\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <div class=\"value\">{{ tool.toolName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <div class=\"value\">{{ tool.model }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <div class=\"value\">{{ tool.serialNumber }}</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <div class=\"value\">{{ tool.notes }}</div>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (rate)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n  <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"store.goToToolAdd()\">\r\n        Add More Tools\r\n      </button>\r\n      <button    [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"saveFinal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:40px auto;min-height:300px}.tools-container.last{min-height:unset}.tools-container h3{margin-bottom:5px;font-size:22px;font-weight:500}.tools-container .info{font-size:13px;color:#666;margin-bottom:30px}.content-part{background:#fff}.content-part p,.content-part div{font-size:small}.content-part div .label{font-size:12px!important;font-weight:700!important;padding-bottom:5px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:16px;font-weight:400;color:var(--font-primary)}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .sub-section .content{font-size:12px}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background-color:#fff;border-radius:5px;color:var(--font-primary)}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:45px;position:relative;border-radius:5px;border:1px solid #d3dae6;padding:10px 0 10px 15px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.content-part .search-part input{width:auto;flex:1;color:var(--font-dark);font-size:var(--font12-input);font-weight:400;border:none;background:none;outline:none}.content-part .search-part .btn{background:#1e2541;border-radius:5px;padding:5px;width:41px;height:36px;margin-right:3px}.content-part .search-part .btn img{filter:brightness(0) invert(1)}.content-part textarea{width:100%;background:none}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:5px;font-size:13px;font-weight:400;color:var(--font-primary);margin-left:5px}.content-part .tools-section .text-title{font-size:13px;margin-left:3px;color:var(--font-primary)}.content-part .tools-section input[type=checkbox]{border:2px solid #000!important;height:14px!important;width:15px!important;border-radius:2px!important;margin:2px}.content-part .tools-section input[type=checkbox]:checked{background-color:#000!important;border:2px solid #000!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#000;width:15px;display:flex;justify-content:center;border:2px solid #000;height:14px;align-items:center;border-radius:2px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#237b4b!important;border:1px solid #237b4b!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px}.form-control:focus{border:var(--bs-border-width) solid var(--bs-border-color)}::ng-deep .nav-link{color:#000!important}.back-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background:#d3dae6;color:#6c757dc7;border-radius:5px}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2e5b70;color:#fff}.save-btn{font-size:14px;transition:.2s;padding:7px 23px;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px}.create-btn{font-size:14px;transition:.2s;border:none;height:auto;font-weight:500;min-width:8rem;min-height:45px;background-color:#4077ad;color:#fff;border-radius:5px;padding:6px 8px;height:40px;min-width:9rem}.form-control{color:#333;background:none!important;font-size:small;height:45px}.form-control:focus{box-shadow:none!important}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.skill-preview-body label{font-weight:500;font-size:14px;color:#6b7280;padding-bottom:5px}.skill-preview-body p{margin:0}.skill-preview-body .value{font-size:13px;color:#212529}.skill-preview-card{border-radius:12px;margin-bottom:12px;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease;overflow:hidden}.continue-btn{background-color:#4077ad;padding:5px 20px;min-height:20px;font-weight:500;color:#fff;border-radius:5px}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:15px}.actions button{padding:10px 22px;border:none;border-radius:6px;font-size:14px;transition:all .2s ease;font-weight:500;min-width:8rem;min-height:45px}.actions .secondary{color:#6c757dc7;background-color:#e0e0e0}.actions .secondary:hover{background-color:#d5d5d5}.actions .primary{background-color:#2196f3;color:#fff}.actions .primary:hover{background-color:#1976d2}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media screen and (max-width: 767px){.tools-container{padding:0 10px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:5px}.tools-container .mob-res{flex-direction:column-reverse;gap:5px}.footer-actions{flex-direction:column-reverse;gap:5px;margin-top:65px}.continue-btn{padding:7px 45px}.back-btn{width:100%}.continue-btn{padding:10px 43px}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}}.save-btn{margin-left:15px}\n"] }]
         }], ctorParameters: () => [{ type: ToolService }, { type: UserToolService }, { type: i3.UntypedFormBuilder }, { type: UtilsService }, { type: CredentialingStore }, { type: i6.TokenService }, { type: UserDetailService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]
@@ -5544,11 +5544,11 @@ class RoleSelectComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: UserDocumentService }, { token: i3$1.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: ProvidersService }, { token: i6.TokenService }, { token: i3.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "<div class=\"role-selection-container\">\r\n  <h2>Basic Details</h2>\r\n  <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n  <div class=\"profile-field\">\r\n    <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n      <div class=\"spinner-border\"></div>\r\n    </div>\r\n    <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n          <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n          <div *ngIf=\" u.firstName.invalid &&\r\n      (u.firstName.touched || u.firstName.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n              First Name is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n            [ngClass]=\"{\r\n    'is-invalid':\r\n      u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n  }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n    u.lastName.invalid &&\r\n    (u.lastName.touched || u.lastName.dirty)\r\n  \">\r\n            <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n              Last Name is required\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Email*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.email.invalid && (u.email.touched || u.email.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.email.invalid &&\r\n      (u.email.touched || u.email.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n              Email is required\r\n            </div>\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n              Please enter a valid email address\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n            ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n              Home Address 1 is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">City*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">State*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n            placeholder=\"Home Address 2\" />\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n            [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.zipcode.invalid &&\r\n      (u.zipcode.touched || u.zipcode.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n              Zipcode is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n          <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n            placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n            (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n              Phone Number is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n          <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              Years Of Experience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n          <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n          <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"res d-flex justify-content-between\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n\r\n            <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n              <!-- Dropdown option -->\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n\r\n              <!-- Selected label -->\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n              <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n                <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                  Industry is required\r\n                </div>\r\n              </div>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <!-- Spinner -->\r\n              <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n              <!-- Image -->\r\n              <div *ngIf=\"previewUrl\">\r\n                <img [src]=\"previewUrl\" class=\"preview-image mt-2\" (load)=\"onImageLoad()\" />\r\n              </div>\r\n\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note mb-2\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 position-relative\">\r\n          <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n            (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n          <a *ngIf=\"list\" [href]=\"list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n            <span>{{ list.fileName }}</span>\r\n          </a>\r\n        </div>\r\n        <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n          <div>{{ userError }}</div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n        <div>\r\n          {{userError}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n  <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n  <p class=\"notes\">What type of job are you interested in</p>\r\n  <div class=\"job-list\">\r\n    <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n      <span class=\"plus\">+</span> {{ job.text }}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n  <div class=\"right-actions\">\r\n\r\n    <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n  <div class=\"right-actions\">\r\n\r\n    <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 88px 27px 174px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 34px}.res{flex-direction:column-reverse}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "<div class=\"role-selection-container\">\r\n  <h2>Basic Details</h2>\r\n  <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n  <div class=\"profile-field\">\r\n    <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n      <div class=\"spinner-border\"></div>\r\n    </div>\r\n    <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n          <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n          <div *ngIf=\" u.firstName.invalid &&\r\n      (u.firstName.touched || u.firstName.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n              First Name is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n            [ngClass]=\"{\r\n    'is-invalid':\r\n      u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n  }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n    u.lastName.invalid &&\r\n    (u.lastName.touched || u.lastName.dirty)\r\n  \">\r\n            <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n              Last Name is required\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Email*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.email.invalid && (u.email.touched || u.email.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.email.invalid &&\r\n      (u.email.touched || u.email.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n              Email is required\r\n            </div>\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n              Please enter a valid email address\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n            ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n              Home Address 1 is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">City*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">State*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n            placeholder=\"Home Address 2\" />\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n            [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.zipcode.invalid &&\r\n      (u.zipcode.touched || u.zipcode.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n              Zipcode is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n          <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n            placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n            (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n              Phone Number is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n          <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              Years Of Experience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n          <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n          <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"res d-flex justify-content-between\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n\r\n            <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n              <!-- Dropdown option -->\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n\r\n              <!-- Selected label -->\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n              <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n                <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                  Industry is required\r\n                </div>\r\n              </div>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <!-- Spinner -->\r\n              <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n              <!-- Image -->\r\n              <div *ngIf=\"previewUrl\">\r\n                <img [src]=\"previewUrl\" class=\"preview-image mt-2\" (load)=\"onImageLoad()\" />\r\n              </div>\r\n\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note mb-2\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 position-relative\">\r\n          <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n            (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n          <a *ngIf=\"list\" [href]=\"list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n            <span>{{ list.fileName }}</span>\r\n          </a>\r\n        </div>\r\n        <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n          <div>{{ userError }}</div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n        <div>\r\n          {{userError}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n  <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n  <p class=\"notes\">What type of job are you interested in</p>\r\n  <div class=\"job-list\">\r\n    <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n      <span class=\"plus\">+</span> {{ job.text }}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n  <div class=\"right-actions\">\r\n\r\n    <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n  <div class=\"right-actions\">\r\n\r\n    <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 88px 27px 174px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 34px}.res{flex-direction:column-reverse}.spinner{width:24px;height:24px;top:-22%;left:180%}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\">\r\n  <h2>Basic Details</h2>\r\n  <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n  <div class=\"profile-field\">\r\n    <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n      <div class=\"spinner-border\"></div>\r\n    </div>\r\n    <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n          <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n          <div *ngIf=\" u.firstName.invalid &&\r\n      (u.firstName.touched || u.firstName.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n              First Name is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n            [ngClass]=\"{\r\n    'is-invalid':\r\n      u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n  }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n    u.lastName.invalid &&\r\n    (u.lastName.touched || u.lastName.dirty)\r\n  \">\r\n            <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n              Last Name is required\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Email*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.email.invalid && (u.email.touched || u.email.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.email.invalid &&\r\n      (u.email.touched || u.email.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n              Email is required\r\n            </div>\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n              Please enter a valid email address\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n            ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n              Home Address 1 is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">City*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">State*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n            placeholder=\"Home Address 2\" />\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n            [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.zipcode.invalid &&\r\n      (u.zipcode.touched || u.zipcode.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n              Zipcode is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n          <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n            placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n            (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n              Phone Number is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n          <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              Years Of Experience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n          <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n          <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"res d-flex justify-content-between\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n\r\n            <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n              <!-- Dropdown option -->\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n\r\n              <!-- Selected label -->\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n              <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n                <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                  Industry is required\r\n                </div>\r\n              </div>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <!-- Spinner -->\r\n              <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n              <!-- Image -->\r\n              <div *ngIf=\"previewUrl\">\r\n                <img [src]=\"previewUrl\" class=\"preview-image mt-2\" (load)=\"onImageLoad()\" />\r\n              </div>\r\n\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note mb-2\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 position-relative\">\r\n          <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n            (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n          <a *ngIf=\"list\" [href]=\"list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n            <span>{{ list.fileName }}</span>\r\n          </a>\r\n        </div>\r\n        <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n          <div>{{ userError }}</div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n        <div>\r\n          {{userError}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n  <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n  <p class=\"notes\">What type of job are you interested in</p>\r\n  <div class=\"job-list\">\r\n    <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n      <span class=\"plus\">+</span> {{ job.text }}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n  <div class=\"right-actions\">\r\n\r\n    <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n  <div class=\"right-actions\">\r\n\r\n    <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 88px 27px 174px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 34px}.res{flex-direction:column-reverse}}\n"] }]
+            args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\">\r\n  <h2>Basic Details</h2>\r\n  <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n  <div class=\"profile-field\">\r\n    <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n      <div class=\"spinner-border\"></div>\r\n    </div>\r\n    <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n          <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n            type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n          <div *ngIf=\" u.firstName.invalid &&\r\n      (u.firstName.touched || u.firstName.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n              First Name is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n            [ngClass]=\"{\r\n    'is-invalid':\r\n      u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n  }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n    u.lastName.invalid &&\r\n    (u.lastName.touched || u.lastName.dirty)\r\n  \">\r\n            <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n              Last Name is required\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Email*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.email.invalid && (u.email.touched || u.email.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.email.invalid &&\r\n      (u.email.touched || u.email.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n              Email is required\r\n            </div>\r\n            <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n              Please enter a valid email address\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Home Address 1*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n            ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.address1.invalid &&\r\n      (u.address1.touched || u.address1.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n              Home Address 1 is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">City*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">State*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <!-- <div class=\"d-flex flex-wrap justify-content-between row\">\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n            placeholder=\"Home Address 2\" />\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.city.invalid && (u.city.touched || u.city.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.city.invalid &&\r\n      (u.city.touched || u.city.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.state.invalid && (u.state.touched || u.state.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.state.invalid &&\r\n      (u.state.touched || u.state.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n      </div> -->\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Zip Code*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n            [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.zipcode.invalid &&\r\n      (u.zipcode.touched || u.zipcode.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n              Zipcode is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Country*</label>\r\n\r\n          <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n            [ngClass]=\"{\r\n      'is-invalid':\r\n        u.country.invalid && (u.country.touched || u.country.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.country.invalid &&\r\n      (u.country.touched || u.country.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Phone Number*</label>\r\n\r\n          <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n            placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"phoneNumber\" maxlength=\"14\"\r\n            (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n      'is-invalid':\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    }\" />\r\n\r\n          <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.phoneNumber.invalid &&\r\n      (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n    \">\r\n            <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n              Phone Number is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n      </div>\r\n      <div class=\"d-flex flex-wrap justify-content-between row\">\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n          <label class=\"note-label mb-2\">Years of experience*</label>\r\n\r\n          <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n            formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n            bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n            id=\"yearsOfExperince\"></ng-select>\r\n\r\n          <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n      (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n              Years Of Experience is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"form-group col-md-4 col-sm-12\r\n         mt-3 mb-2\">\r\n          <label class=\"note-label mb-2\">Job Title*</label>\r\n\r\n          <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n            [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n            [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n          </ng-select>\r\n          <div *ngIf=\" u.userJobTitle.invalid &&\r\n      (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n            <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n              Job title is required\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n          <label class=\"note-label mb-2\">Profile image</label>\r\n\r\n          <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n        </div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n        <div class=\"res d-flex justify-content-between\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Industry</label>\r\n\r\n            <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n              [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n\r\n              <!-- Dropdown option -->\r\n              <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                <span class=\"form-check\">\r\n                  <span class=\"form-check-input-wrapper\">\r\n                    <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                  </span>\r\n                  {{ item.industryName }}\r\n                </span>\r\n              </ng-template>\r\n\r\n              <!-- Selected label -->\r\n              <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                </span>\r\n              </ng-template>\r\n              <div *ngIf=\"u.industries.invalid &&\r\n      (u.industries.touched || u.industries.dirty)\" class=\"invalid-feedback\">\r\n                <div class=\"ms-1\" *ngIf=\"u.industries.errors.required\">\r\n                  Industry is required\r\n                </div>\r\n              </div>\r\n            </ng-select>\r\n          </div>\r\n          <div class=\"form-group col-sm-12 col-md-4\">\r\n            <div class=\"image-wrapper\">\r\n              <!-- Spinner -->\r\n              <div *ngIf=\"isImageLoading\" class=\"spinner\"></div>\r\n              <!-- Image -->\r\n              <div *ngIf=\"previewUrl\">\r\n                <img [src]=\"previewUrl\" class=\"preview-image mt-2\" (load)=\"onImageLoad()\" />\r\n              </div>\r\n\r\n            </div>\r\n            <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n              <div>{{ userError }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </form>\r\n\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Resume Submission</h2>\r\n      <p class=\"note mb-2\">Submit your resume here</p>\r\n      <div class=\"col-sm-12 col-md-8\">\r\n        <div class=\"form-group mb-2 position-relative\">\r\n          <input #fileInput type=\"file\" accept=\"/*\" (change)=\"selectFile($event)\" class=\"d-none\" />\r\n          <input [(ngModel)]=\"resumeName\" readonly type=\"text\" class=\"form-control pe-5\"\r\n            placeholder=\"Upload Resume Here\" (click)=\"fileInput.click()\" />\r\n\r\n          <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon-resume\"\r\n            (click)=\"fileInput.click()\" />\r\n          <div *ngIf=\"isResumeRequired\" class=\"invalid-feedback d-block ms-1\">\r\n            Upload your resume\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap justify-content-between row\">\r\n      <div class=\"col-sm-12 col-md-8\" style=\"padding-left: 15px;\">\r\n        <div class=\"resume-wrapper\">\r\n          <div *ngIf=\"isresumeLoading\" class=\"spinner-resume\"></div>\r\n\r\n          <a *ngIf=\"list\" [href]=\"list.fileUrl\" class=\"mt-2\" target=\"_blank\">\r\n            <span>{{ list.fileName }}</span>\r\n          </a>\r\n        </div>\r\n        <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n          <div>{{ userError }}</div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n        <div>\r\n          {{userError}}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n<!-- \r\n<div class=\"producer-type-container\">\r\n  <h2 class=\"mb-2\" style=\"margin-top: 50px;\">Type of jobs</h2>\r\n  <p class=\"notes\">What type of job are you interested in</p>\r\n  <div class=\"job-list\">\r\n    <div class=\"job-item\" *ngFor=\"let job of jobTypes\" [class.selected]=\"isSelected(job)\" (click)=\"toggleJob(job)\">\r\n      <span class=\"plus\">+</span> {{ job.text }}\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n  <div class=\"right-actions\">\r\n\r\n    <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div> -->\r\n\r\n\r\n<div class=\"actions\">\r\n  <button type=\"button\" class=\"secondary\" (click)=\"onBackClick()\">Back</button>\r\n  <div class=\"right-actions\">\r\n\r\n    <button type=\"button\" class=\"primary\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" (click)=\"saveFinal()\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div>", styles: [".preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:5px}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer}::ng-deep .ng-select .ng-select-container{width:101%;border-radius:7px}.form-control{font-size:14px;color:#6b7280}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:2rem}.role-selection-container h2{margin-bottom:.5rem;font-size:1.5rem;font-weight:600}.role-selection-container .note{font-size:.875rem;color:#6b7280}.role-selection-container .note-label{font-size:.875rem;color:#6b7280;padding-left:5px}.role-selection-container .dropdown-wrapper{display:flex;gap:.5rem;margin-bottom:1rem}.role-selection-container .dropdown-wrapper select{flex:1;padding:.5rem;border:1px solid #d1d5db;border-radius:.375rem}.role-selection-container .dropdown-wrapper .add-btn{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border:none;border-radius:.375rem;cursor:pointer}.role-selection-container .dropdown-wrapper .add-btn:disabled{background-color:#d1d5db;cursor:not-allowed}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1rem;border-radius:.375rem;background-color:#fef3c7;color:#92400e}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.2rem;font-weight:700;cursor:pointer;color:#b91c1c}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.role-selection-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.role-selection-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.spinner{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:163%;margin-top:-2px;margin-left:-7px;animation:spin 1s linear infinite}.spinner-resume{width:40px;height:40px;border:4px solid #e0e0e0;border-top:4px solid #9e9e9e;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px}.producer-type-container h2{font-size:1.5rem;font-weight:600;margin-bottom:.5rem}.producer-type-container p{font-size:.875rem;color:#6b7280;margin-bottom:1.5rem}.producer-type-container .job-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:2rem}.producer-type-container .job-list .job-item{padding:.75rem 1rem;font-size:14px;border:1px solid #d1d5db;border-radius:.375rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .2s}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background-color:#eff6ff}.producer-type-container .job-list .job-item .plus{font-weight:700}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:.5rem;margin:50px 0}.producer-type-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer}.producer-type-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer}.producer-type-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}.actions{display:flex;justify-content:space-between;margin:50px 88px 27px 174px}.right-actions{display:flex;gap:16px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:45px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#6b7280}::ng-deep .ng-select .ng-select-container{padding-top:3px;font-size:14px;color:#6b7280}@media screen and (max-width: 767px){.actions{margin:10px 34px}.res{flex-direction:column-reverse}.spinner{width:24px;height:24px;top:-22%;left:180%}}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: UserDocumentService }, { type: i3$1.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: ProvidersService }, { type: i6.TokenService }, { type: i3.FormBuilder }], propDecorators: { backToParent: [{
                 type: Output
             }], roleData: [{
@@ -28135,11 +28135,11 @@ class Step2CoverageComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Step2CoverageComponent, deps: [{ token: CredentialingStore }, { token: UsMapLatestService }, { token: PostalCodeServices }, { token: UserCoverageAreaService }, { token: AlertService }, { token: i6.TokenService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Step2CoverageComponent, isStandalone: false, selector: "app-coverage", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<div class=\"coverage-container\">\r\n  <div class=\"first-section\">\r\n    <h4 class=\"head\">Coverage Area</h4>\r\n    <!-- <p>Let's start with the basics. Where are you located?</p>\r\n    <span>We use this to match you with jobs nearby</span>\r\n    <div class=\"location-inputs\">\r\n      <input type=\"text\" placeholder=\"City\" [(ngModel)]=\"city\">\r\n      <input type=\"text\" placeholder=\"State\" [(ngModel)]=\"state\">\r\n    </div> -->\r\n  </div>\r\n\r\n  <div class=\"coverage-options\">\r\n    <div class=\"d-flex justify-content-between\">\r\n      <h6 class=\"text-secondary view-card fw-semibold\" style=\"font-size: 14px;\"> Where can you complete assignments?\r\n      </h6>\r\n      <div class=\"d-flex gap-1\">\r\n        <label class=\"form-check-label\">Show Map</label>\r\n        <div class=\"form-check form-switch\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr class=\"m-0 border-3\">\r\n\r\n    <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        My Current Coverage Area\r\n      </span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"cursor: pointer;\" (click)=\"skip()\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        Not Applicable\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"state-selector\">\r\n    <div class=\"row pb-2\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"position-relative\">\r\n          <!-- ng-select -->\r\n          <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n            [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n            <!-- Option Template -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.stateName }}\r\n              </span>\r\n            </ng-template>\r\n\r\n            <!-- Label Template -->\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <ng-container *ngIf=\"!isStatesLoading\">\r\n                <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"border-0 empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n      <div class=\"text-center text-secondary\" style=\"font-size: 14px;\">No States Selected yet</div>\r\n    </div>\r\n    <div class=\"coverage-options\">\r\n      <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n        <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n      <div *ngIf=\"coverages.length > 0\">\r\n        <div class=\"col-8 p-0 ms-2\">\r\n          <h4 class=\"head\">Coverage Area\r\n            Counties</h4>\r\n        </div>\r\n      </div>\r\n      <div class=\"row pt-2 pb-2\">\r\n        <div class=\"col-12 \">\r\n          <div class=\"row\">\r\n            <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n              <div class=\"row m-0\" style=\"background: #dedede;\">\r\n                <div class=\"col-10\" style=\"margin-left: 0px;padding-left: 5px !important;\">\r\n                  <div class=\"form-group my-2\">\r\n                    <div class=\"custom-control custom-checkbox\">\r\n                      <label style=\"padding-top: 2px;\">Select All</label>\r\n                      <input type=\"checkbox\" style=\"width: 16px;border: 1px solid #ddd;\"\r\n                        id=\"stateCheckbox{{ coverage.state + coverageIndex }}\" [(ngModel)]=\"coverage.checked\"\r\n                        [indeterminate]=\"coverage.indeterminate\" (change)=\"onSelectAllChanged(coverage)\" />\r\n                      <label for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\"\r\n                        class=\"custom-control font-weight-bold\"></label>\r\n                      <label class=\"position-absolute\" style=\"margin-left: 88px;\"\r\n                        [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n                        {{ coverage.state | stateName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-2\" style=\"display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    height: 21px;\r\n    \">\r\n                  <img class=\"mt-2 mt-sm-2 pt-2 pointer\" [src]=\"coverage?.isShow\r\n    ? '/assets/images/icons/arrow-up.svg'\r\n    : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" (click)=\"coverage.isShow = !coverage?.isShow\" />\r\n                </div>\r\n                <span></span>\r\n              </div>\r\n              <hr class=\"mt-0\" />\r\n              <ng-container *ngIf=\"coverage?.isShow\">\r\n                <div class=\"form-group mb-1\">\r\n                  <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n                    placeholder=\"Select Counties In {{ coverage.state | stateName }}\" [(ngModel)]=\"coverage.query\" />\r\n                </div>\r\n                 <div class=\"row m-lg-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n                  <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n                    *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n                    <div class=\"form-check\">\r\n                      <input class=\"form-check-input\" type=\"checkbox\"\r\n                        [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n                        [(ngModel)]=\"county.checked\"\r\n                        (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n                      <label class=\"form-check-label\"\r\n                        [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n                        {{ county.countyName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"skip()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n        (click)=\"saveCoverage()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n</div>", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:2rem;min-height:300px}.coverage-container .form-check-label{color:#69707d}.coverage-container .head{margin-bottom:.5rem;font-size:20px;font-weight:600;color:#69707d}.coverage-container p{font-size:16px;font-weight:500;color:#6b7280;margin-bottom:7px;margin-top:25px}.coverage-container .first-section span{color:#6b7280}.coverage-container .location-inputs{display:flex;gap:1rem;margin-bottom:5rem;margin-top:20px}.coverage-container .location-inputs input{flex:1;padding:5px 15px;border:1px solid #d1d5db;border-radius:.375rem;height:45px}.coverage-container .state-selector .empty-message{width:100%;padding:1rem;background-color:#f3f4f6;text-align:center;color:#6b7280;border-radius:.375rem}.coverage-container .state-selector .custom-control{font-size:15px;display:flex;align-items:center;gap:7px;color:#69707d;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options{margin-bottom:1rem}.coverage-container .coverage-options label{font-size:.875rem;display:flex;align-items:center;gap:.25rem}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.231372549)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.coverage-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}::ng-deep .ng-select .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px}.custom-checkbox1{display:inline-block;width:15px;height:15px;border:1px solid #ccc;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2{display:inline-block;width:15px;height:15px;border:1px solid #ccc;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.right-actions{display:flex;gap:16px}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.custom-control label{padding-top:8px}@media screen and (max-width: 767px){.actions{gap:10px}.actions button{min-width:90px}.right-actions{gap:5px;justify-content:space-between}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UsMapComponent, selector: "us-map", inputs: ["selectedStates", "allowedStates", "isReadOnly", "filteredLocations"], outputs: ["onMapClick"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: SearchPipe, name: "SearchBy" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Step2CoverageComponent, isStandalone: false, selector: "app-coverage", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<div class=\"coverage-container\">\r\n  <div class=\"first-section\">\r\n    <h4 class=\"head\">Coverage Area</h4>\r\n    <!-- <p>Let's start with the basics. Where are you located?</p>\r\n    <span>We use this to match you with jobs nearby</span>\r\n    <div class=\"location-inputs\">\r\n      <input type=\"text\" placeholder=\"City\" [(ngModel)]=\"city\">\r\n      <input type=\"text\" placeholder=\"State\" [(ngModel)]=\"state\">\r\n    </div> -->\r\n  </div>\r\n\r\n  <div class=\"coverage-options\">\r\n    <div class=\"d-flex justify-content-between\">\r\n      <h6 class=\"text-secondary view-card fw-semibold\" style=\"font-size: 14px;\"> Where can you complete assignments?\r\n      </h6>\r\n      <div class=\"d-flex gap-1\">\r\n        <label class=\"form-check-label\">Show Map</label>\r\n        <div class=\"form-check form-switch\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr class=\"m-0 border-3\">\r\n\r\n    <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        My Current Coverage Area\r\n      </span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"cursor: pointer;\" (click)=\"skip()\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        Not Applicable\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"state-selector\">\r\n    <div class=\"row pb-2\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"position-relative\">\r\n          <!-- ng-select -->\r\n          <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n            [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n            <!-- Option Template -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.stateName }}\r\n              </span>\r\n            </ng-template>\r\n\r\n            <!-- Label Template -->\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <ng-container *ngIf=\"!isStatesLoading\">\r\n                <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"border-0 empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n      <div class=\"text-center text-secondary\" style=\"font-size: 14px;\">No States Selected yet</div>\r\n    </div>\r\n    <div class=\"coverage-options\">\r\n      <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n        <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n      <div *ngIf=\"coverages.length > 0\">\r\n        <div class=\"col-8 p-0 ms-2\">\r\n          <h4 class=\"head\">Coverage Area\r\n            Counties</h4>\r\n        </div>\r\n      </div>\r\n      <div class=\"row pt-2 pb-2\">\r\n        <div class=\"col-12 \">\r\n          <div class=\"row\">\r\n            <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n              <div class=\"row m-0\" style=\"background: #dedede;\">\r\n                <div class=\"col-10\" style=\"margin-left: 0px;padding-left: 5px !important;\">\r\n                  <div class=\"form-group my-2\">\r\n                    <div class=\"custom-control custom-checkbox\">\r\n                      <label style=\"padding-top: 2px;\">Select All</label>\r\n                      <input type=\"checkbox\" style=\"width: 16px;border: 1px solid #ddd;\"\r\n                        id=\"stateCheckbox{{ coverage.state + coverageIndex }}\" [(ngModel)]=\"coverage.checked\"\r\n                        [indeterminate]=\"coverage.indeterminate\" (change)=\"onSelectAllChanged(coverage)\" />\r\n                      <label for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\"\r\n                        class=\"custom-control font-weight-bold\"></label>\r\n                      <label class=\"position-absolute\" style=\"margin-left: 88px;\"\r\n                        [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n                        {{ coverage.state | stateName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-2\" style=\"display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    height: 21px;\r\n    \">\r\n                  <img class=\"mt-2 mt-sm-2 pt-2 pointer\" [src]=\"coverage?.isShow\r\n    ? '/assets/images/icons/arrow-up.svg'\r\n    : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" (click)=\"coverage.isShow = !coverage?.isShow\" />\r\n                </div>\r\n                <span></span>\r\n              </div>\r\n              <hr class=\"mt-0\" />\r\n              <ng-container *ngIf=\"coverage?.isShow\">\r\n                <div class=\"form-group mb-1\">\r\n                  <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n                    placeholder=\"Select Counties In {{ coverage.state | stateName }}\" [(ngModel)]=\"coverage.query\" />\r\n                </div>\r\n                 <div class=\"row m-lg-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n                  <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n                    *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n                    <div class=\"form-check\">\r\n                      <input class=\"form-check-input\" type=\"checkbox\"\r\n                        [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n                        [(ngModel)]=\"county.checked\"\r\n                        (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n                      <label class=\"form-check-label\"\r\n                        [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n                        {{ county.countyName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"skip()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n        (click)=\"saveCoverage()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n</div>", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:2rem;min-height:300px}.coverage-container .form-check-label{color:#69707d}.coverage-container .head{margin-bottom:.5rem;font-size:20px;font-weight:600;color:#69707d}.coverage-container p{font-size:16px;font-weight:500;color:#6b7280;margin-bottom:7px;margin-top:25px}.coverage-container .first-section span{color:#6b7280}.coverage-container .location-inputs{display:flex;gap:1rem;margin-bottom:5rem;margin-top:20px}.coverage-container .location-inputs input{flex:1;padding:5px 15px;border:1px solid #d1d5db;border-radius:.375rem;height:45px}.coverage-container .state-selector .empty-message{width:100%;padding:1rem;background-color:#f3f4f6;text-align:center;color:#6b7280;border-radius:.375rem}.coverage-container .state-selector .custom-control{font-size:15px;display:flex;align-items:center;gap:7px;color:#69707d;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options{margin-bottom:1rem}.coverage-container .coverage-options label{font-size:.875rem;display:flex;align-items:center;gap:.25rem}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.231372549)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.coverage-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}::ng-deep .ng-select .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px}.custom-checkbox1{display:inline-block;width:15px;height:15px;border:1px solid #ccc;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2{display:inline-block;width:15px;height:15px;border:1px solid #ccc;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.right-actions{display:flex;gap:16px}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.custom-control label{padding-top:8px}@media screen and (max-width: 767px){.actions{gap:10px;display:flex;flex-direction:column-reverse}.actions button{min-width:90px}.right-actions{gap:5px;justify-content:space-between;display:flex;flex-direction:column-reverse}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UsMapComponent, selector: "us-map", inputs: ["selectedStates", "allowedStates", "isReadOnly", "filteredLocations"], outputs: ["onMapClick"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: SearchPipe, name: "SearchBy" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Step2CoverageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-coverage', standalone: false, template: "<div class=\"coverage-container\">\r\n  <div class=\"first-section\">\r\n    <h4 class=\"head\">Coverage Area</h4>\r\n    <!-- <p>Let's start with the basics. Where are you located?</p>\r\n    <span>We use this to match you with jobs nearby</span>\r\n    <div class=\"location-inputs\">\r\n      <input type=\"text\" placeholder=\"City\" [(ngModel)]=\"city\">\r\n      <input type=\"text\" placeholder=\"State\" [(ngModel)]=\"state\">\r\n    </div> -->\r\n  </div>\r\n\r\n  <div class=\"coverage-options\">\r\n    <div class=\"d-flex justify-content-between\">\r\n      <h6 class=\"text-secondary view-card fw-semibold\" style=\"font-size: 14px;\"> Where can you complete assignments?\r\n      </h6>\r\n      <div class=\"d-flex gap-1\">\r\n        <label class=\"form-check-label\">Show Map</label>\r\n        <div class=\"form-check form-switch\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr class=\"m-0 border-3\">\r\n\r\n    <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        My Current Coverage Area\r\n      </span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"cursor: pointer;\" (click)=\"skip()\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        Not Applicable\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"state-selector\">\r\n    <div class=\"row pb-2\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"position-relative\">\r\n          <!-- ng-select -->\r\n          <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n            [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n            <!-- Option Template -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.stateName }}\r\n              </span>\r\n            </ng-template>\r\n\r\n            <!-- Label Template -->\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <ng-container *ngIf=\"!isStatesLoading\">\r\n                <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"border-0 empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n      <div class=\"text-center text-secondary\" style=\"font-size: 14px;\">No States Selected yet</div>\r\n    </div>\r\n    <div class=\"coverage-options\">\r\n      <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n        <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n      <div *ngIf=\"coverages.length > 0\">\r\n        <div class=\"col-8 p-0 ms-2\">\r\n          <h4 class=\"head\">Coverage Area\r\n            Counties</h4>\r\n        </div>\r\n      </div>\r\n      <div class=\"row pt-2 pb-2\">\r\n        <div class=\"col-12 \">\r\n          <div class=\"row\">\r\n            <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n              <div class=\"row m-0\" style=\"background: #dedede;\">\r\n                <div class=\"col-10\" style=\"margin-left: 0px;padding-left: 5px !important;\">\r\n                  <div class=\"form-group my-2\">\r\n                    <div class=\"custom-control custom-checkbox\">\r\n                      <label style=\"padding-top: 2px;\">Select All</label>\r\n                      <input type=\"checkbox\" style=\"width: 16px;border: 1px solid #ddd;\"\r\n                        id=\"stateCheckbox{{ coverage.state + coverageIndex }}\" [(ngModel)]=\"coverage.checked\"\r\n                        [indeterminate]=\"coverage.indeterminate\" (change)=\"onSelectAllChanged(coverage)\" />\r\n                      <label for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\"\r\n                        class=\"custom-control font-weight-bold\"></label>\r\n                      <label class=\"position-absolute\" style=\"margin-left: 88px;\"\r\n                        [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n                        {{ coverage.state | stateName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-2\" style=\"display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    height: 21px;\r\n    \">\r\n                  <img class=\"mt-2 mt-sm-2 pt-2 pointer\" [src]=\"coverage?.isShow\r\n    ? '/assets/images/icons/arrow-up.svg'\r\n    : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" (click)=\"coverage.isShow = !coverage?.isShow\" />\r\n                </div>\r\n                <span></span>\r\n              </div>\r\n              <hr class=\"mt-0\" />\r\n              <ng-container *ngIf=\"coverage?.isShow\">\r\n                <div class=\"form-group mb-1\">\r\n                  <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n                    placeholder=\"Select Counties In {{ coverage.state | stateName }}\" [(ngModel)]=\"coverage.query\" />\r\n                </div>\r\n                 <div class=\"row m-lg-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n                  <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n                    *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n                    <div class=\"form-check\">\r\n                      <input class=\"form-check-input\" type=\"checkbox\"\r\n                        [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n                        [(ngModel)]=\"county.checked\"\r\n                        (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n                      <label class=\"form-check-label\"\r\n                        [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n                        {{ county.countyName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"skip()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n        (click)=\"saveCoverage()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n</div>", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:2rem;min-height:300px}.coverage-container .form-check-label{color:#69707d}.coverage-container .head{margin-bottom:.5rem;font-size:20px;font-weight:600;color:#69707d}.coverage-container p{font-size:16px;font-weight:500;color:#6b7280;margin-bottom:7px;margin-top:25px}.coverage-container .first-section span{color:#6b7280}.coverage-container .location-inputs{display:flex;gap:1rem;margin-bottom:5rem;margin-top:20px}.coverage-container .location-inputs input{flex:1;padding:5px 15px;border:1px solid #d1d5db;border-radius:.375rem;height:45px}.coverage-container .state-selector .empty-message{width:100%;padding:1rem;background-color:#f3f4f6;text-align:center;color:#6b7280;border-radius:.375rem}.coverage-container .state-selector .custom-control{font-size:15px;display:flex;align-items:center;gap:7px;color:#69707d;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options{margin-bottom:1rem}.coverage-container .coverage-options label{font-size:.875rem;display:flex;align-items:center;gap:.25rem}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.231372549)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.coverage-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}::ng-deep .ng-select .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px}.custom-checkbox1{display:inline-block;width:15px;height:15px;border:1px solid #ccc;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2{display:inline-block;width:15px;height:15px;border:1px solid #ccc;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.right-actions{display:flex;gap:16px}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.custom-control label{padding-top:8px}@media screen and (max-width: 767px){.actions{gap:10px}.actions button{min-width:90px}.right-actions{gap:5px;justify-content:space-between}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\n"] }]
+            args: [{ selector: 'app-coverage', standalone: false, template: "<div class=\"coverage-container\">\r\n  <div class=\"first-section\">\r\n    <h4 class=\"head\">Coverage Area</h4>\r\n    <!-- <p>Let's start with the basics. Where are you located?</p>\r\n    <span>We use this to match you with jobs nearby</span>\r\n    <div class=\"location-inputs\">\r\n      <input type=\"text\" placeholder=\"City\" [(ngModel)]=\"city\">\r\n      <input type=\"text\" placeholder=\"State\" [(ngModel)]=\"state\">\r\n    </div> -->\r\n  </div>\r\n\r\n  <div class=\"coverage-options\">\r\n    <div class=\"d-flex justify-content-between\">\r\n      <h6 class=\"text-secondary view-card fw-semibold\" style=\"font-size: 14px;\"> Where can you complete assignments?\r\n      </h6>\r\n      <div class=\"d-flex gap-1\">\r\n        <label class=\"form-check-label\">Show Map</label>\r\n        <div class=\"form-check form-switch\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr class=\"m-0 border-3\">\r\n\r\n    <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        My Current Coverage Area\r\n      </span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center\" style=\"cursor: pointer;\" (click)=\"skip()\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n      <span class=\"view-card text-secondary ms-3\" style=\"font-size: 14px;\">\r\n        Not Applicable\r\n      </span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"state-selector\">\r\n    <div class=\"row pb-2\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"position-relative\">\r\n          <!-- ng-select -->\r\n          <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n            [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n            <!-- Option Template -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.stateName }}\r\n              </span>\r\n            </ng-template>\r\n\r\n            <!-- Label Template -->\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <ng-container *ngIf=\"!isStatesLoading\">\r\n                <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n    <div class=\"border-0 empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n      <div class=\"text-center text-secondary\" style=\"font-size: 14px;\">No States Selected yet</div>\r\n    </div>\r\n    <div class=\"coverage-options\">\r\n      <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n        <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n      </div>\r\n    </div>\r\n    <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n      <div *ngIf=\"coverages.length > 0\">\r\n        <div class=\"col-8 p-0 ms-2\">\r\n          <h4 class=\"head\">Coverage Area\r\n            Counties</h4>\r\n        </div>\r\n      </div>\r\n      <div class=\"row pt-2 pb-2\">\r\n        <div class=\"col-12 \">\r\n          <div class=\"row\">\r\n            <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n              <div class=\"row m-0\" style=\"background: #dedede;\">\r\n                <div class=\"col-10\" style=\"margin-left: 0px;padding-left: 5px !important;\">\r\n                  <div class=\"form-group my-2\">\r\n                    <div class=\"custom-control custom-checkbox\">\r\n                      <label style=\"padding-top: 2px;\">Select All</label>\r\n                      <input type=\"checkbox\" style=\"width: 16px;border: 1px solid #ddd;\"\r\n                        id=\"stateCheckbox{{ coverage.state + coverageIndex }}\" [(ngModel)]=\"coverage.checked\"\r\n                        [indeterminate]=\"coverage.indeterminate\" (change)=\"onSelectAllChanged(coverage)\" />\r\n                      <label for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\"\r\n                        class=\"custom-control font-weight-bold\"></label>\r\n                      <label class=\"position-absolute\" style=\"margin-left: 88px;\"\r\n                        [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n                        {{ coverage.state | stateName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n                <div class=\"col-2\" style=\"display: flex;\r\n    justify-content: flex-end;\r\n    align-items: center;\r\n    height: 21px;\r\n    \">\r\n                  <img class=\"mt-2 mt-sm-2 pt-2 pointer\" [src]=\"coverage?.isShow\r\n    ? '/assets/images/icons/arrow-up.svg'\r\n    : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" (click)=\"coverage.isShow = !coverage?.isShow\" />\r\n                </div>\r\n                <span></span>\r\n              </div>\r\n              <hr class=\"mt-0\" />\r\n              <ng-container *ngIf=\"coverage?.isShow\">\r\n                <div class=\"form-group mb-1\">\r\n                  <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n                    placeholder=\"Select Counties In {{ coverage.state | stateName }}\" [(ngModel)]=\"coverage.query\" />\r\n                </div>\r\n                 <div class=\"row m-lg-2\" style=\"height: 160px;overflow-y: auto;padding-left: 1.6rem;\">\r\n                  <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n                    *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n                    <div class=\"form-check\">\r\n                      <input class=\"form-check-input\" type=\"checkbox\"\r\n                        [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n                        [(ngModel)]=\"county.checked\"\r\n                        (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n                      <label class=\"form-check-label\"\r\n                        [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n                        {{ county.countyName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"skip()\">\r\n        Skip\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n        (click)=\"saveCoverage()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n\r\n\r\n</div>", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:2rem;min-height:300px}.coverage-container .form-check-label{color:#69707d}.coverage-container .head{margin-bottom:.5rem;font-size:20px;font-weight:600;color:#69707d}.coverage-container p{font-size:16px;font-weight:500;color:#6b7280;margin-bottom:7px;margin-top:25px}.coverage-container .first-section span{color:#6b7280}.coverage-container .location-inputs{display:flex;gap:1rem;margin-bottom:5rem;margin-top:20px}.coverage-container .location-inputs input{flex:1;padding:5px 15px;border:1px solid #d1d5db;border-radius:.375rem;height:45px}.coverage-container .state-selector .empty-message{width:100%;padding:1rem;background-color:#f3f4f6;text-align:center;color:#6b7280;border-radius:.375rem}.coverage-container .state-selector .custom-control{font-size:15px;display:flex;align-items:center;gap:7px;color:#69707d;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options{margin-bottom:1rem}.coverage-container .coverage-options label{font-size:.875rem;display:flex;align-items:center;gap:.25rem}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.231372549)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:1rem;margin-top:70px;margin-bottom:50px}.coverage-container .navigation-buttons .back{padding:.5rem 1rem;border:1px solid #d1d5db;border-radius:.375rem;background:#fff;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next{padding:.5rem 1rem;background-color:#4077ad;color:#fff;border-radius:.375rem;cursor:pointer;min-width:18%;min-height:50px}.coverage-container .navigation-buttons .next:disabled{background-color:#d1d5db;cursor:not-allowed}::ng-deep .ng-select .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px}.custom-checkbox1{display:inline-block;width:15px;height:15px;border:1px solid #ccc;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2{display:inline-block;width:15px;height:15px;border:1px solid #ccc;vertical-align:middle;position:relative;cursor:pointer;border-radius:3px;background-color:#fff}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.right-actions{display:flex;gap:16px}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border:none;font-size:14px;cursor:pointer;border-radius:5px}button.primary{background-color:#4077ad;color:#fff;border-radius:5px}button.secondary{background-color:#d5d6da;color:#525862;border-radius:5px}button:disabled{background-color:#9ca3af;cursor:not-allowed}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.custom-control label{padding-top:8px}@media screen and (max-width: 767px){.actions{gap:10px;display:flex;flex-direction:column-reverse}.actions button{min-width:90px}.right-actions{gap:5px;justify-content:space-between;display:flex;flex-direction:column-reverse}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: UsMapLatestService }, { type: PostalCodeServices }, { type: UserCoverageAreaService }, { type: AlertService }, { type: i6.TokenService }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -28509,11 +28509,11 @@ class WorkexperienceComponent {
         this.store.nextStep();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, deps: [{ token: UserExperienceService }, { token: WorkExperienceStore }, { token: CredentialingStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i6.TokenService }, { token: i3.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3>Add Work Experience</h3>\r\n    <p class=\"hint\">\r\n      Add your prior and current work history below\r\n    </p>\r\n    <form [formGroup]=\"workexperienceForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Company Name</div>\r\n          <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n               workexperienceForm.get('companyName')?.hasError('required')\">\r\n            Company name is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Job Title</div>\r\n          <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n               workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n            Job title is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">City</div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n               workexperienceForm.get('city')?.hasError('required')\">\r\n            City is required\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n                                customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\" formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n               workexperienceForm.get('fromDate')?.hasError('required')\">\r\n              Start Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n               workexperienceForm.get('toDate')?.hasError('required')\">\r\n              To Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Job Description or duties</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n      <div class=\"upload-wrapper\">\r\n        <p class=\"upload-title\">Upload</p>\r\n        <p class=\"upload-subtitle\">Add documents below</p>\r\n        <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          Selected: {{ fileName }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n          Skip\r\n        </button>\r\n        <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n          (click)=\"saveFile()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Work Experiences Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" >\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.companyName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Company Name</strong><br />\r\n              <span class=\"job-title\">{{ exp.companyName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Job Title</strong><br />\r\n              <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>Country</strong><br />\r\n              <span class=\"job-title\">{{ exp.country }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\">{{ exp.city }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Job Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n        Add More Experiences\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{flex-direction:column-reverse;gap:5px}.right-actions{gap:15px;justify-content:space-between}.form-row{gap:14px;flex-direction:column}.pointer{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3>Add Work Experience</h3>\r\n    <p class=\"hint\">\r\n      Add your prior and current work history below\r\n    </p>\r\n    <form [formGroup]=\"workexperienceForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Company Name</div>\r\n          <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n               workexperienceForm.get('companyName')?.hasError('required')\">\r\n            Company name is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Job Title</div>\r\n          <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n               workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n            Job title is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">City</div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n               workexperienceForm.get('city')?.hasError('required')\">\r\n            City is required\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n                                customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\" formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n               workexperienceForm.get('fromDate')?.hasError('required')\">\r\n              Start Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n               workexperienceForm.get('toDate')?.hasError('required')\">\r\n              To Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Job Description or duties</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n      <div class=\"upload-wrapper\">\r\n        <p class=\"upload-title\">Upload</p>\r\n        <p class=\"upload-subtitle\">Add documents below</p>\r\n        <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          Selected: {{ fileName }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n          Skip\r\n        </button>\r\n        <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n          (click)=\"saveFile()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Work Experiences Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" >\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.companyName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Company Name</strong><br />\r\n              <span class=\"job-title\">{{ exp.companyName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Job Title</strong><br />\r\n              <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>Country</strong><br />\r\n              <span class=\"job-title\">{{ exp.country }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\">{{ exp.city }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Job Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n        Add More Experiences\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{flex-direction:column-reverse;gap:5px}.right-actions{justify-content:space-between;gap:5px;display:flex;flex-direction:column-reverse}.form-row{gap:14px;flex-direction:column}.pointer{display:none}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i10.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i10.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i11.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i11.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i1$1.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3>Add Work Experience</h3>\r\n    <p class=\"hint\">\r\n      Add your prior and current work history below\r\n    </p>\r\n    <form [formGroup]=\"workexperienceForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Company Name</div>\r\n          <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n               workexperienceForm.get('companyName')?.hasError('required')\">\r\n            Company name is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Job Title</div>\r\n          <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n               workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n            Job title is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">City</div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n               workexperienceForm.get('city')?.hasError('required')\">\r\n            City is required\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n                                customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\" formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n               workexperienceForm.get('fromDate')?.hasError('required')\">\r\n              Start Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n               workexperienceForm.get('toDate')?.hasError('required')\">\r\n              To Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Job Description or duties</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n      <div class=\"upload-wrapper\">\r\n        <p class=\"upload-title\">Upload</p>\r\n        <p class=\"upload-subtitle\">Add documents below</p>\r\n        <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          Selected: {{ fileName }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n          Skip\r\n        </button>\r\n        <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n          (click)=\"saveFile()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Work Experiences Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" >\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.companyName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Company Name</strong><br />\r\n              <span class=\"job-title\">{{ exp.companyName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Job Title</strong><br />\r\n              <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>Country</strong><br />\r\n              <span class=\"job-title\">{{ exp.country }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\">{{ exp.city }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Job Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n        Add More Experiences\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{flex-direction:column-reverse;gap:5px}.right-actions{gap:15px;justify-content:space-between}.form-row{gap:14px;flex-direction:column}.pointer{display:none}}\n"] }]
+            args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3>Add Work Experience</h3>\r\n    <p class=\"hint\">\r\n      Add your prior and current work history below\r\n    </p>\r\n    <form [formGroup]=\"workexperienceForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Company Name</div>\r\n          <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n               workexperienceForm.get('companyName')?.hasError('required')\">\r\n            Company name is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Job Title</div>\r\n          <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n               workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n            Job title is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">City</div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n               workexperienceForm.get('city')?.hasError('required')\">\r\n            City is required\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n                                customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\" formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n               workexperienceForm.get('fromDate')?.hasError('required')\">\r\n              Start Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" [maxDate]=\"maxDate\" bsDatepicker [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n               workexperienceForm.get('toDate')?.hasError('required')\">\r\n              To Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Job Description or duties</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n      <div class=\"upload-wrapper\">\r\n        <p class=\"upload-title\">Upload</p>\r\n        <p class=\"upload-subtitle\">Add documents below</p>\r\n        <button type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Documents\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          Selected: {{ fileName }}\r\n        </p>\r\n      </div>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"secondary\" (click)=\"nextStep()\">\r\n          Skip\r\n        </button>\r\n        <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n          (click)=\"saveFile()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\" >\r\n    <h3>Work Experiences Preview</h3>\r\n  </div>\r\n  <div class=\"accordion\" >\r\n\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" style=\"margin-bottom: 20px;\"\r\n      class=\"accordion-item border-0\">\r\n\r\n      <!-- HEADER (preview) -->\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button collapsed\" type=\"button\" data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\">\r\n\r\n          <!-- LEFT : TITLE -->\r\n          <span class=\"accordion-title\">\r\n            {{ exp.companyName }}\r\n          </span>\r\n\r\n          <!-- RIGHT : EDIT ICON -->\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n          </span>\r\n\r\n        </button>\r\n      </h2>\r\n\r\n\r\n      <!-- BODY -->\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse\" style=\"margin-bottom: 20px;\">\r\n        <div class=\"accordion-body\">\r\n\r\n          <!-- GRID DATA (2 or 3 columns) -->\r\n          <div class=\"detail-grid\">\r\n            <div>\r\n              <strong>Company Name</strong><br />\r\n              <span class=\"job-title\">{{ exp.companyName }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>Job Title</strong><br />\r\n              <span class=\"job-title\">{{ exp.jobTitle }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>From Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>To Date</strong><br />\r\n              <span class=\"job-title\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>Country</strong><br />\r\n              <span class=\"job-title\">{{ exp.country }}</span>\r\n            </div>\r\n            <div>\r\n              <strong>State</strong><br />\r\n              <span class=\"job-title\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n\r\n            <div>\r\n              <strong>City</strong><br />\r\n              <span class=\"job-title\">{{ exp.city }}</span>\r\n            </div>\r\n\r\n\r\n            <div *ngIf=\"exp.fileUrl\" class=\"full-width\">\r\n              <strong>Document</strong><br />\r\n              <a [href]=\"exp.fileUrl\" target=\"_blank\">\r\n                <span class=\"job-title\"> {{ exp.fileName }}</span>\r\n              </a>\r\n            </div>\r\n          </div>\r\n          <div class=\"full-width mt-3\">\r\n            <strong>Job Description</strong><br />\r\n            <span class=\"job-title\"> {{ exp.jobDescription }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary\" (click)=\"add()\" style=\"background-color: #1f4d5f;width: 200px;\">\r\n        Add More Experiences\r\n      </button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:24px 16px;min-height:300px}h3{font-size:18px;font-weight:600;margin-bottom:4px}.hint{font-size:14px;color:#6b7280;margin-bottom:24px}.row{display:flex;margin-bottom:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}input,select,textarea{width:100%;height:44px;padding:10px 12px;border:2px solid #d1d5db;border-radius:4px;font-size:13px;outline:none;box-sizing:border-box;height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container{height:45px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px}textarea{height:90px;resize:none}.error{margin-top:4px;font-size:12px;color:#dc2626}.actions{display:flex;justify-content:space-between;margin:70px 0 40px}button{height:44px;min-width:120px;border-radius:4px;border:none;font-size:14px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff}button.secondary{background-color:#f3f4f6;color:#374151}button:disabled{background-color:#9ca3af;cursor:not-allowed}.head{color:#6b7280;font-size:14px;margin-bottom:5px;font-weight:500}::ng-deep .today-highlight{color:#fff!important;background:#1e2541!important}.form-row{display:flex}.field{display:flex;flex-direction:column}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#757575;font-size:14px}.close-btn-select{width:16px;height:16px;color:#00f;display:inline-block}.upload-wrapper{margin-top:37px}.upload-title{font-weight:600;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#6c757d;margin-bottom:12px}.upload-btn{background-color:#1f4d5f;color:#fff;border:none;padding:10px 18px;border-radius:6px;font-size:14px;cursor:pointer}.upload-btn:hover{background-color:#173b4a}.file-name{margin-top:8px;font-size:13px;color:#495057}.right-actions{display:flex;gap:16px}.date-time-filter{padding-right:40px;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer}.work-preview{max-width:1000px;padding:20px;margin:15px auto;background-color:#f4f6f8;font-family:Segoe UI,Arial,sans-serif}.preview-card{position:relative;background-color:#fff;border-radius:8px;box-shadow:0 3px 8px #0000001a;padding:20px 25px;margin-bottom:20px;margin-top:25px;transition:box-shadow .2s ease}.preview-card:hover{box-shadow:0 6px 15px #00000026}.edit-btn{position:absolute;top:15px;right:15px;width:20px;height:20px;cursor:pointer}.card-top h4{margin:0;font-size:18px;color:#1f4d5f}.card-top .job-title{display:block;font-size:14px;color:#555;margin-top:2px}.card-meta{margin:10px 0;font-size:13px;color:#777;display:flex;justify-content:space-between}.card-meta .dates{font-style:italic}.job-description{font-size:14px;color:#333;line-height:1.5;margin-bottom:8px}.file-link{font-size:13px;color:#4077ad;text-decoration:underline;display:inline-block;margin-top:5px}.actions{display:flex;justify-content:space-between;margin-top:25px}button.secondary{background-color:#e0e0e0;color:#6c757dc7;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}button.primary{background-color:#4077ad;color:#fff;padding:8px 20px;border:none;border-radius:6px;cursor:pointer}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0}.form-check-input:checked{color:#fff!important;border-color:#2980b9!important;background-color:#2980b9!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:14px}::ng-deep .ng-value-label{font-size:14px}::ng-deep .bs-datepicker-head{background-color:#1e2541!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#1e2541!important}.icon-color{cursor:pointer;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.accordion-button{display:flex;align-items:center}.accordion-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.accordion-actions{display:flex;align-items:center;margin-right:12px}.edit-icon{cursor:pointer}::ng-deep .accordion-item:first-of-type>.accordion-header .accordion-button{margin-bottom:20px}.job-title{color:#6c757d;font-weight:400;font-size:14px}.preview-header{margin-left:380px}.accordion{margin:20px 100px}@media screen and (max-width: 767px){.preview-header{margin-left:0}.accordion{margin:20px 0}.actions{flex-direction:column-reverse;gap:5px}.right-actions{justify-content:space-between;gap:5px;display:flex;flex-direction:column-reverse}.form-row{gap:14px;flex-direction:column}.pointer{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: UserExperienceService }, { type: WorkExperienceStore }, { type: CredentialingStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i6.TokenService }, { type: i3.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -29892,11 +29892,11 @@ class InitialProcessComponent {
         this.destroy$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, deps: [{ token: i3$1.Router }, { token: UserDetailService }, { token: i3.FormBuilder }, { token: FileService }, { token: ProvidersService$1 }, { token: RolesService }, { token: i7.BsModalService }, { token: ProviderContractorSubCategoryService }, { token: ProviderContractorSubCategoryService }, { token: i9.AuthService }, { token: i6.TokenService }, { token: i6.RoleContextService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <span class=\"logout-wrapper\" (click)=\"logout()\">\r\n      <span class=\"logout-icon\"></span>\r\n      <span class=\"logout-text\">Logout</span>\r\n    </span>\r\n  </div>\r\n  <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n    <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n      <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n        Thanks for joining\r\n        <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n        Our members and service providers rely on accurate info in your profile to\r\n        connect you with work that suits your capabilities. Keep your profile\r\n        complete, skills updated, licenses current, photos and logos professional,\r\n        and schedule up to date.\r\n      </ul>\r\n      <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n          <div class=\"form-group form-check agree\">\r\n            <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n              [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n              class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n              required>\r\n            <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              I agree to Terms and Conditions\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Terms & Conditions is required\r\n            </div> -->\r\n          </div>\r\n          <div class=\"form-group form-check agree\">\r\n            <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy  && validatePage==1}\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n              type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n            <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              I agree to Privacy Statement\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Privacy Statement\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n        [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n        </div> -->\r\n\r\n        <div class=\"col-6\"></div>\r\n        <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n          <h6>\r\n            <button class=\"next\" (click)=\" next(2)\"\r\n              [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>&nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n          <h6 class=\"checkmark\">Signature</h6>\r\n          <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n            <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n          </div>\r\n          <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n            <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n          </div>\r\n          <h6 class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n              Clear\r\n            </button>\r\n\r\n            <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n              <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n              Upload\r\n              <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n                (change)=\"uploadSignImage($event)\">\r\n            </button> -->\r\n          </h6>\r\n\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n            class=\"invalid-feedback d-block\">\r\n            Signature is required\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 2\">\r\n      <div class=\"add-tab-view \">\r\n        <ul>\r\n          <h5>\r\n            <b>\r\n              Please choose the relevant sections in which you wish to\r\n              participate\r\n            </b>\r\n          </h5>\r\n          <br>\r\n          <b class=\"para-comma\">\r\n            Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n            you're in control of your involvement.\r\n            <br>\r\n            connect your business to others and prospective clients.\r\n          </b>\r\n        </ul>\r\n\r\n        <div class=\"row mt-4\">\r\n          <ng-container *ngFor=\"let userType of userViewRoles\">\r\n            <div class=\"card card-design text-center user-card mx-2 my-2\" \r\n              [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n              (click)=\"selectedUserRole(userType)\">\r\n              <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n              <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- <h6 class=\"inspect-add\">\r\n          <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n            Yes\r\n          </button>\r\n          &nbsp; &nbsp;\r\n          <button (click)=\"isBusiness=false;view = 4;\" class=\"add-btn btn-sm\">\r\n            No\r\n          </button>\r\n        </h6> -->\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-1.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n            <button (click)=\"next(3)\" class=\"next\" [disabled]=\"!isUserSelected\"\r\n              [ngClass]=\"!isUserSelected ? 'disabled-btn':''\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>\r\n            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n      <form [formGroup]=\"companyForm\" class=\"form\">\r\n        <div class=\"term-list \">\r\n          <ul>\r\n            <h5>\r\n              <b>\r\n                Enter your business information here.\r\n              </b>\r\n            </h5>\r\n            <br>\r\n          </ul>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12  mt-3 mb-2\">\r\n                <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n                  type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n                  formControlName=\"companyName\">\r\n                <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.companyName.errors.required\">\r\n                    Company Name is required\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.minlength\">\r\n                    Company Name must be at least 2 characters\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.maxLength\">\r\n                    Company Name must be less than 100 characters\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n                  <div>\r\n                    {{providerError}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n               <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n                  placeholder=\"Company Phone Number\" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n                  [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\r\n                  [ngClass]=\"{'is-invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\" />\r\n                <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                  (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n                <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.address1.errors.required\">\r\n                    Business Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.country.errors && validatePage == 3}\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n            <div class=\"profile-field\">\r\n        <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n          <input #uploadLogoInput type=\"file\" accept=\"image/*\" (change)=\"uploadLogo($event)\"\r\n            class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n          <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n            placeholder=\"Upload Company Logo\">\r\n\r\n          <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n            alt=\"Logo\">\r\n          <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n            <div class=\"ms-1\">\r\n              Please Upload Company Logo\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n        <div class=\"term-list pt-0\">\r\n          <h5>\r\n            <b>\r\n              Contractor Category\r\n            </b>\r\n          </h5>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12  mb-2\">\r\n                <label></label>\r\n                <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n                  placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n                  [(ngModel)]=\"selectedContractorCategories\">\r\n                </ng-select>\r\n              </div>\r\n            </div>\r\n            <accordion [isAnimated]=\"false\">\r\n              <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n                <accordion-group [isOpen]=\"true\">\r\n                  <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n                    <div class=\"w-100 mt-2\">\r\n                      <div class=\"backdrop\">\r\n                        <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                          (change)=\"selectAll($event,item?.items)\">\r\n                        <label [for]=\"item?.id\">&nbsp;{{item?.name}}</label>\r\n                      </div>\r\n                    </div>\r\n                  </button>\r\n                  <div class=\"row\">\r\n                    <div class=\"backdrop col-4 form-control-sm\" *ngFor=\"let subItem of item?.items\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n                        (change)=\"unCheckedEvent($event,item)\">\r\n                      <label [for]=\"subItem?.id\">&nbsp;{{subItem?.name}}</label>\r\n                    </div>\r\n                  </div>\r\n                </accordion-group>\r\n              </ng-container>\r\n            </accordion>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6 class=\"btn-mob\">\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n            <button class=\" next\" (click)=\"next(4)\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>\r\n            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <div class=\"add-tab \">\r\n        <ul>\r\n          <h5 class=\"p-4 pb-2\">\r\n            <b>\r\n              We need basic information's and headshot for your profile\r\n            </b>\r\n            <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n              <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n                (change)=\"changeAddressUser()\">\r\n              <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n                Copy From Provider Infromation\r\n              </label>\r\n            </div>\r\n          </h5>\r\n        </ul>\r\n        <div class=\"profile-field\">\r\n          <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n                <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                    First Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n                <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n                    Last Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.email.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n                <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n                    Emai is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n                  (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n                  placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n                <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n                    Home Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                  placeholder=\"Home Address 2\">\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.state.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" u.state.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  u.zipcode.errors  && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" u.zipcode.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.country.errors  && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" u.country.errors  && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block shadow-none\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                  name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n                  formControlName=\"phoneNumber\" [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n                <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div class=\"form-group mb-2 form\">\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n              id=\"upload\" accept=\"image/*\" placeholder=\"Upload Profile Picture\">\r\n            <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n            <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n              <div class=\"ms-1\">\r\n                Please Upload Profile Image\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>\r\n              {{userError}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n           <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n              <span *ngIf=\"showLoader\" class=\"spinner position-absolute\"></span>\r\n\r\n            </button>\r\n            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 5\">\r\n      <ul class=\"term-list ps-3\">\r\n        <h5>\r\n          <b>\r\n            Thanks, we got the basics down!\r\n          </b>\r\n        </h5>\r\n        <br>\r\n        <b class=\"para-comma\">\r\n          Account created successfully. Next step: complete your profile.\r\n          <br>\r\n          <br>\r\n          Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows.\r\n          Incomplete profiles will have limited access.\r\n          <br>\r\n          <br>\r\n          You may access your dashboard at any time, but full functionality is available only after completion.\r\n        </b>\r\n      </ul>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-lg-3 col-xl-3 col-sm-12 text-center\">\r\n          <img class=\"slider ml-3\" src=\"assets/images/icons/stepper-4.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end row\">\r\n          <div class=\"col-md-2 col-2\">\r\n            <h6 style=\"margin-right: 3rem\">\r\n            </h6>\r\n          </div>\r\n\r\n          &nbsp; &nbsp;\r\n          <div class=\"col-md-8\">\r\n            <h6>\r\n              <button (click)=\"dashboard()\" class=\"go-btn btn-sm\">\r\n                Go To Home&nbsp;&nbsp;\r\n                <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n                  src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n              </button>\r\n            </h6>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <div>test</div> -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered\">\r\n    <div class=\"modal-content terms-fixed-modal\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"modal-header\">\r\n        <h4 class=\"modal-title fw-bold title-popup\">\r\n          {{ termsAndConditionTitle }}\r\n        </h4>\r\n      </div>\r\n\r\n      <!-- SCROLLABLE CONTENT ONLY -->\r\n      <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- FOOTER (NOT SCROLLING) -->\r\n      <div>\r\n        <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n          <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n            style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n            (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n            Decline\r\n          </button>\r\n\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n            [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n            Agree\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:_ngcontent-ng-c3147387837_spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:75%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["data"], outputs: ["back"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <span class=\"logout-wrapper\" (click)=\"logout()\">\r\n      <span class=\"logout-icon\"></span>\r\n      <span class=\"logout-text\">Logout</span>\r\n    </span>\r\n  </div>\r\n  <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n    <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n      <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n        Thanks for joining\r\n        <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n        Our members and service providers rely on accurate info in your profile to\r\n        connect you with work that suits your capabilities. Keep your profile\r\n        complete, skills updated, licenses current, photos and logos professional,\r\n        and schedule up to date.\r\n      </ul>\r\n      <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n          <div class=\"form-group form-check agree\">\r\n            <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n              [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n              class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n              required>\r\n            <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              I agree to Terms and Conditions\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Terms & Conditions is required\r\n            </div> -->\r\n          </div>\r\n          <div class=\"form-group form-check agree\">\r\n            <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy  && validatePage==1}\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n              type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n            <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              I agree to Privacy Statement\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Privacy Statement\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n        [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n        </div> -->\r\n\r\n        <div class=\"col-6\"></div>\r\n        <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n          <h6>\r\n            <button class=\"next\" (click)=\" next(2)\"\r\n              [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>&nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n          <h6 class=\"checkmark\">Signature</h6>\r\n          <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n            <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n          </div>\r\n          <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n            <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n          </div>\r\n          <h6 class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n              Clear\r\n            </button>\r\n\r\n            <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n              <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n              Upload\r\n              <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n                (change)=\"uploadSignImage($event)\">\r\n            </button> -->\r\n          </h6>\r\n\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n            class=\"invalid-feedback d-block\">\r\n            Signature is required\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 2\">\r\n      <div class=\"add-tab-view \">\r\n        <ul>\r\n          <h5>\r\n            <b>\r\n              Please choose the relevant sections in which you wish to\r\n              participate\r\n            </b>\r\n          </h5>\r\n          <br>\r\n          <b class=\"para-comma\">\r\n            Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n            you're in control of your involvement.\r\n            <br>\r\n            connect your business to others and prospective clients.\r\n          </b>\r\n        </ul>\r\n\r\n        <div class=\"row mt-4\">\r\n          <ng-container *ngFor=\"let userType of userViewRoles\">\r\n            <div class=\"card card-design text-center user-card mx-2 my-2\" \r\n              [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n              (click)=\"selectedUserRole(userType)\">\r\n              <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n              <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- <h6 class=\"inspect-add\">\r\n          <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n            Yes\r\n          </button>\r\n          &nbsp; &nbsp;\r\n          <button (click)=\"isBusiness=false;view = 4;\" class=\"add-btn btn-sm\">\r\n            No\r\n          </button>\r\n        </h6> -->\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-1.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n            <button (click)=\"next(3)\" class=\"next\" [disabled]=\"!isUserSelected\"\r\n              [ngClass]=\"!isUserSelected ? 'disabled-btn':''\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>\r\n            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n      <form [formGroup]=\"companyForm\" class=\"form\">\r\n        <div class=\"term-list \">\r\n          <ul>\r\n            <h5>\r\n              <b>\r\n                Enter your business information here.\r\n              </b>\r\n            </h5>\r\n            <br>\r\n          </ul>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12  mt-3 mb-2\">\r\n                <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n                  type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n                  formControlName=\"companyName\">\r\n                <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.companyName.errors.required\">\r\n                    Company Name is required\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.minlength\">\r\n                    Company Name must be at least 2 characters\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.maxLength\">\r\n                    Company Name must be less than 100 characters\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n                  <div>\r\n                    {{providerError}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n               <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n                  placeholder=\"Company Phone Number\" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n                  [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\r\n                  [ngClass]=\"{'is-invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\" />\r\n                <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                  (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n                <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.address1.errors.required\">\r\n                    Business Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.country.errors && validatePage == 3}\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n            <div class=\"profile-field\">\r\n        <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n          <input #uploadLogoInput type=\"file\" accept=\"image/*\" (change)=\"uploadLogo($event)\"\r\n            class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n          <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n            placeholder=\"Upload Company Logo\">\r\n\r\n          <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n            alt=\"Logo\">\r\n          <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n            <div class=\"ms-1\">\r\n              Please Upload Company Logo\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n        <div class=\"term-list pt-0\">\r\n          <h5>\r\n            <b>\r\n              Contractor Category\r\n            </b>\r\n          </h5>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12  mb-2\">\r\n                <label></label>\r\n                <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n                  placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n                  [(ngModel)]=\"selectedContractorCategories\">\r\n                </ng-select>\r\n              </div>\r\n            </div>\r\n            <accordion [isAnimated]=\"false\">\r\n              <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n                <accordion-group [isOpen]=\"true\">\r\n                  <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n                    <div class=\"w-100 mt-2\">\r\n                      <div class=\"backdrop\">\r\n                        <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                          (change)=\"selectAll($event,item?.items)\">\r\n                        <label [for]=\"item?.id\">&nbsp;{{item?.name}}</label>\r\n                      </div>\r\n                    </div>\r\n                  </button>\r\n                  <div class=\"row\">\r\n                    <div class=\"backdrop col-4 form-control-sm\" *ngFor=\"let subItem of item?.items\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n                        (change)=\"unCheckedEvent($event,item)\">\r\n                      <label [for]=\"subItem?.id\">&nbsp;{{subItem?.name}}</label>\r\n                    </div>\r\n                  </div>\r\n                </accordion-group>\r\n              </ng-container>\r\n            </accordion>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6 class=\"btn-mob\">\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n            <button class=\" next\" (click)=\"next(4)\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>\r\n            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <div class=\"add-tab \">\r\n        <ul>\r\n          <h5 class=\"p-4 pb-2\">\r\n            <b>\r\n              We need basic information's and headshot for your profile\r\n            </b>\r\n            <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n              <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n                (change)=\"changeAddressUser()\">\r\n              <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n                Copy From Provider Infromation\r\n              </label>\r\n            </div>\r\n          </h5>\r\n        </ul>\r\n        <div class=\"profile-field\">\r\n          <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n                <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                    First Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n                <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n                    Last Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.email.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n                <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n                    Emai is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n                  (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n                  placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n                <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n                    Home Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                  placeholder=\"Home Address 2\">\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.state.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" u.state.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  u.zipcode.errors  && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" u.zipcode.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.country.errors  && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" u.country.errors  && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block shadow-none\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                  name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n                  formControlName=\"phoneNumber\" [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n                <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div class=\"form-group mb-2 form\">\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n              id=\"upload\" accept=\"image/*\" placeholder=\"Upload Profile Picture\">\r\n            <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n            <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n              <div class=\"ms-1\">\r\n                Please Upload Profile Image\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>\r\n              {{userError}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n           <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n              <span *ngIf=\"showLoader\" class=\"spinner position-absolute\"></span>\r\n\r\n            </button>\r\n            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 5\">\r\n      <ul class=\"term-list ps-3\">\r\n        <h5>\r\n          <b>\r\n            Thanks, we got the basics down!\r\n          </b>\r\n        </h5>\r\n        <br>\r\n        <b class=\"para-comma\">\r\n          Account created successfully. Next step: complete your profile.\r\n          <br>\r\n          <br>\r\n          Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows.\r\n          Incomplete profiles will have limited access.\r\n          <br>\r\n          <br>\r\n          You may access your dashboard at any time, but full functionality is available only after completion.\r\n        </b>\r\n      </ul>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-lg-3 col-xl-3 col-sm-12 text-center\">\r\n          <img class=\"slider ml-3\" src=\"assets/images/icons/stepper-4.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end row\">\r\n          <div class=\"col-md-2 col-2\">\r\n            <h6 style=\"margin-right: 3rem\">\r\n            </h6>\r\n          </div>\r\n\r\n          &nbsp; &nbsp;\r\n          <div class=\"col-md-8\">\r\n            <h6>\r\n              <button (click)=\"dashboard()\" class=\"go-btn btn-sm\">\r\n                Go To Home&nbsp;&nbsp;\r\n                <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n                  src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n              </button>\r\n            </h6>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <div>test</div> -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered\">\r\n    <div class=\"modal-content terms-fixed-modal\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"modal-header\">\r\n        <h4 class=\"modal-title fw-bold title-popup\">\r\n          {{ termsAndConditionTitle }}\r\n        </h4>\r\n      </div>\r\n\r\n      <!-- SCROLLABLE CONTENT ONLY -->\r\n      <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- FOOTER (NOT SCROLLING) -->\r\n      <div>\r\n        <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n          <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n            style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n            (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n            Decline\r\n          </button>\r\n\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n            [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n            Agree\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:_ngcontent-ng-c3147387837_spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.CheckboxRequiredValidator, selector: "input[type=checkbox][required][formControlName],input[type=checkbox][required][formControl],input[type=checkbox][required][ngModel]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i10.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i13.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i13.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["data"], outputs: ["back"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-initial-process', standalone: false, template: "<div class=\"container\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <span class=\"logout-wrapper\" (click)=\"logout()\">\r\n      <span class=\"logout-icon\"></span>\r\n      <span class=\"logout-text\">Logout</span>\r\n    </span>\r\n  </div>\r\n  <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n    <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n      <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n        Thanks for joining\r\n        <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n        Our members and service providers rely on accurate info in your profile to\r\n        connect you with work that suits your capabilities. Keep your profile\r\n        complete, skills updated, licenses current, photos and logos professional,\r\n        and schedule up to date.\r\n      </ul>\r\n      <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n          <div class=\"form-group form-check agree\">\r\n            <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n              [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n              class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n              required>\r\n            <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              I agree to Terms and Conditions\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Terms & Conditions is required\r\n            </div> -->\r\n          </div>\r\n          <div class=\"form-group form-check agree\">\r\n            <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy  && validatePage==1}\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n              type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n            <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              I agree to Privacy Statement\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Privacy Statement\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n        [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n        </div> -->\r\n\r\n        <div class=\"col-6\"></div>\r\n        <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n          <h6>\r\n            <button class=\"next\" (click)=\" next(2)\"\r\n              [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>&nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n          <h6 class=\"checkmark\">Signature</h6>\r\n          <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n            <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n          </div>\r\n          <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n            <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n          </div>\r\n          <h6 class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n              Clear\r\n            </button>\r\n\r\n            <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n              <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n              Upload\r\n              <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n                (change)=\"uploadSignImage($event)\">\r\n            </button> -->\r\n          </h6>\r\n\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n            class=\"invalid-feedback d-block\">\r\n            Signature is required\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 2\">\r\n      <div class=\"add-tab-view \">\r\n        <ul>\r\n          <h5>\r\n            <b>\r\n              Please choose the relevant sections in which you wish to\r\n              participate\r\n            </b>\r\n          </h5>\r\n          <br>\r\n          <b class=\"para-comma\">\r\n            Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n            you're in control of your involvement.\r\n            <br>\r\n            connect your business to others and prospective clients.\r\n          </b>\r\n        </ul>\r\n\r\n        <div class=\"row mt-4\">\r\n          <ng-container *ngFor=\"let userType of userViewRoles\">\r\n            <div class=\"card card-design text-center user-card mx-2 my-2\" \r\n              [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n              (click)=\"selectedUserRole(userType)\">\r\n              <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n              <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- <h6 class=\"inspect-add\">\r\n          <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n            Yes\r\n          </button>\r\n          &nbsp; &nbsp;\r\n          <button (click)=\"isBusiness=false;view = 4;\" class=\"add-btn btn-sm\">\r\n            No\r\n          </button>\r\n        </h6> -->\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-1.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n            <button (click)=\"next(3)\" class=\"next\" [disabled]=\"!isUserSelected\"\r\n              [ngClass]=\"!isUserSelected ? 'disabled-btn':''\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>\r\n            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n      <form [formGroup]=\"companyForm\" class=\"form\">\r\n        <div class=\"term-list \">\r\n          <ul>\r\n            <h5>\r\n              <b>\r\n                Enter your business information here.\r\n              </b>\r\n            </h5>\r\n            <br>\r\n          </ul>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12  mt-3 mb-2\">\r\n                <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n                  type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n                  formControlName=\"companyName\">\r\n                <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.companyName.errors.required\">\r\n                    Company Name is required\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.minlength\">\r\n                    Company Name must be at least 2 characters\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.maxLength\">\r\n                    Company Name must be less than 100 characters\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n                  <div>\r\n                    {{providerError}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n               <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n                  placeholder=\"Company Phone Number\" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n                  [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\r\n                  [ngClass]=\"{'is-invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\" />\r\n                <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                  (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n                <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.address1.errors.required\">\r\n                    Business Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.country.errors && validatePage == 3}\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n            <div class=\"profile-field\">\r\n        <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n          <input #uploadLogoInput type=\"file\" accept=\"image/*\" (change)=\"uploadLogo($event)\"\r\n            class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n          <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n            placeholder=\"Upload Company Logo\">\r\n\r\n          <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n            alt=\"Logo\">\r\n          <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n            <div class=\"ms-1\">\r\n              Please Upload Company Logo\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n        <div class=\"term-list pt-0\">\r\n          <h5>\r\n            <b>\r\n              Contractor Category\r\n            </b>\r\n          </h5>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12  mb-2\">\r\n                <label></label>\r\n                <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n                  placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n                  [(ngModel)]=\"selectedContractorCategories\">\r\n                </ng-select>\r\n              </div>\r\n            </div>\r\n            <accordion [isAnimated]=\"false\">\r\n              <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n                <accordion-group [isOpen]=\"true\">\r\n                  <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n                    <div class=\"w-100 mt-2\">\r\n                      <div class=\"backdrop\">\r\n                        <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                          (change)=\"selectAll($event,item?.items)\">\r\n                        <label [for]=\"item?.id\">&nbsp;{{item?.name}}</label>\r\n                      </div>\r\n                    </div>\r\n                  </button>\r\n                  <div class=\"row\">\r\n                    <div class=\"backdrop col-4 form-control-sm\" *ngFor=\"let subItem of item?.items\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n                        (change)=\"unCheckedEvent($event,item)\">\r\n                      <label [for]=\"subItem?.id\">&nbsp;{{subItem?.name}}</label>\r\n                    </div>\r\n                  </div>\r\n                </accordion-group>\r\n              </ng-container>\r\n            </accordion>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6 class=\"btn-mob\">\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n            <button class=\" next\" (click)=\"next(4)\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>\r\n            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <div class=\"add-tab \">\r\n        <ul>\r\n          <h5 class=\"p-4 pb-2\">\r\n            <b>\r\n              We need basic information's and headshot for your profile\r\n            </b>\r\n            <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n              <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n                (change)=\"changeAddressUser()\">\r\n              <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n                Copy From Provider Infromation\r\n              </label>\r\n            </div>\r\n          </h5>\r\n        </ul>\r\n        <div class=\"profile-field\">\r\n          <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n                <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                    First Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n                <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n                    Last Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.email.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n                <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n                    Emai is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n                  (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n                  placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n                <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n                    Home Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                  placeholder=\"Home Address 2\">\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.state.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" u.state.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  u.zipcode.errors  && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" u.zipcode.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.country.errors  && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" u.country.errors  && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block shadow-none\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                  name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n                  formControlName=\"phoneNumber\" [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n                <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div class=\"form-group mb-2 form\">\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n              id=\"upload\" accept=\"image/*\" placeholder=\"Upload Profile Picture\">\r\n            <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n            <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n              <div class=\"ms-1\">\r\n                Please Upload Profile Image\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>\r\n              {{userError}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n           <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n              <span *ngIf=\"showLoader\" class=\"spinner position-absolute\"></span>\r\n\r\n            </button>\r\n            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 5\">\r\n      <ul class=\"term-list ps-3\">\r\n        <h5>\r\n          <b>\r\n            Thanks, we got the basics down!\r\n          </b>\r\n        </h5>\r\n        <br>\r\n        <b class=\"para-comma\">\r\n          Account created successfully. Next step: complete your profile.\r\n          <br>\r\n          <br>\r\n          Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows.\r\n          Incomplete profiles will have limited access.\r\n          <br>\r\n          <br>\r\n          You may access your dashboard at any time, but full functionality is available only after completion.\r\n        </b>\r\n      </ul>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-lg-3 col-xl-3 col-sm-12 text-center\">\r\n          <img class=\"slider ml-3\" src=\"assets/images/icons/stepper-4.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end row\">\r\n          <div class=\"col-md-2 col-2\">\r\n            <h6 style=\"margin-right: 3rem\">\r\n            </h6>\r\n          </div>\r\n\r\n          &nbsp; &nbsp;\r\n          <div class=\"col-md-8\">\r\n            <h6>\r\n              <button (click)=\"dashboard()\" class=\"go-btn btn-sm\">\r\n                Go To Home&nbsp;&nbsp;\r\n                <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n                  src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n              </button>\r\n            </h6>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <div>test</div> -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered\">\r\n    <div class=\"modal-content terms-fixed-modal\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"modal-header\">\r\n        <h4 class=\"modal-title fw-bold title-popup\">\r\n          {{ termsAndConditionTitle }}\r\n        </h4>\r\n      </div>\r\n\r\n      <!-- SCROLLABLE CONTENT ONLY -->\r\n      <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- FOOTER (NOT SCROLLING) -->\r\n      <div>\r\n        <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n          <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n            style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n            (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n            Decline\r\n          </button>\r\n\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n            [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n            Agree\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:_ngcontent-ng-c3147387837_spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:75%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}\n"] }]
+            args: [{ selector: 'app-initial-process', standalone: false, template: "<div class=\"container\">\r\n  <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n    <span class=\"logout-wrapper\" (click)=\"logout()\">\r\n      <span class=\"logout-icon\"></span>\r\n      <span class=\"logout-text\">Logout</span>\r\n    </span>\r\n  </div>\r\n  <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n    <ng-container class=\"load-page\" [style.visibility]=\"view == 1 ? 'visible' : 'hidden' \">\r\n      <ul class=\"term-list para-comma\" [ngClass]=\"view == 1 ? '' : 'hidden-view'\">\r\n        Thanks for joining\r\n        <span class=\"brand-name\">{{ branding.displayName }}</span>.\r\n        Our members and service providers rely on accurate info in your profile to\r\n        connect you with work that suits your capabilities. Keep your profile\r\n        complete, skills updated, licenses current, photos and logos professional,\r\n        and schedule up to date.\r\n      </ul>\r\n      <div class=\"row col-12 mt-4\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <div class=\"col-md-6 col-lg-6 col-sm-12\">\r\n          <div class=\"form-group form-check agree\">\r\n            <input #acceptTerms=\"ngModel\" [ngClass]=\"{ 'is-invalid': !model.acceptTerms && validatePage==1 }\"\r\n              [(ngModel)]=\"model.acceptTerms\" type=\"checkbox\" name=\"acceptTerms\" id=\"acceptTerms\"\r\n              class=\"form-check-input\" (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\"\r\n              required>\r\n            <label for=\"acceptTerms\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n              I agree to Terms and Conditions\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.acceptTerms && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Terms & Conditions is required\r\n            </div> -->\r\n          </div>\r\n          <div class=\"form-group form-check agree\">\r\n            <input #privacy=\"ngModel\" [ngClass]=\"{ 'is-invalid':!model.privacy  && validatePage==1}\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\" [(ngModel)]=\"model.privacy\"\r\n              type=\"checkbox\" name=\"privacy\" id=\"privacy\" class=\"form-check-input\" required>\r\n            <label for=\"privacy\" class=\"form-check-label checkmark pointer\"\r\n              (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n              I agree to Privacy Statement\r\n            </label>\r\n            <!-- <div *ngIf=\"!model.privacy && validatePage==1\" class=\"invalid-feedback\">\r\n              Accept Privacy Statement\r\n            </div> -->\r\n          </div>\r\n        </div>\r\n\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 justify-content-between row footer-signature\"\r\n        [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n        <!-- <div class=\"col-md-3 col-sm-3 slider-tab\">\r\n        </div> -->\r\n\r\n        <div class=\"col-6\"></div>\r\n        <div class=\"col-md-12 col-sm-12 col-xl-3 text-end\">\r\n          <h6>\r\n            <button class=\"next\" (click)=\" next(2)\"\r\n              [ngClass]=\"(((!points || !points?.length || points.length ==0) && !fileData ) || !model.acceptTerms || !model.privacy) ? 'disabled-btn':''\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>&nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n      <ng-container>\r\n        <div class=\"term-signature col-md-6 col-lg-6 col-sm-12\" [ngClass]=\"view == 1 ? '' : 'hidden-view' \">\r\n          <h6 class=\"checkmark\">Signature</h6>\r\n          <div [ngClass]=\"{ 'd-none': signaturePadData?.publicUrl }\" class=\"sign-img mb-2\">\r\n            <canvas #canvas [width]=\"255\" [height]=\"90\"></canvas>\r\n          </div>\r\n          <div [ngClass]=\"{ 'd-none': !signaturePadData?.publicUrl }\" class=\"mb-2\">\r\n            <img [width]=\"255\" [height]=\"120\" [src]=\"signaturePadData?.publicUrl\" style=\"position: relative\" alt>\r\n          </div>\r\n          <h6 class=\"d-flex align-items-center gap-2\">\r\n            <button (click)=\"clearPad()\" class=\"btn-clear btn-sm\">\r\n              Clear\r\n            </button>\r\n\r\n            <!-- <button (click)=\"uploadImage.click()\" class=\"save-btn upload btn-sm\">\r\n              <img src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n              Upload\r\n              <input #uploadImage type=\"file\" class=\"image-upload d-none\" accept=\"image/*\"\r\n                (change)=\"uploadSignImage($event)\">\r\n            </button> -->\r\n          </h6>\r\n\r\n          <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length ==0) && !fileData\"\r\n            class=\"invalid-feedback d-block\">\r\n            Signature is required\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 2\">\r\n      <div class=\"add-tab-view \">\r\n        <ul>\r\n          <h5>\r\n            <b>\r\n              Please choose the relevant sections in which you wish to\r\n              participate\r\n            </b>\r\n          </h5>\r\n          <br>\r\n          <b class=\"para-comma\">\r\n            Choose the areas you'd like to be part of \u2014 whether it's programs, services, events, or collaborations,\r\n            you're in control of your involvement.\r\n            <br>\r\n            connect your business to others and prospective clients.\r\n          </b>\r\n        </ul>\r\n\r\n        <div class=\"row mt-4\">\r\n          <ng-container *ngFor=\"let userType of userViewRoles\">\r\n            <div class=\"card card-design text-center user-card mx-2 my-2\" \r\n              [ngClass]=\"userType.value === selectedRoleValue ? 'user-cards-active' : ''\"\r\n              (click)=\"selectedUserRole(userType)\">\r\n              <img [src]=\"userType?.img\" class=\"mb-2 mt-2\" style=\"width: 70px;height: 70px;\">\r\n              <h6 class=\"m-0 mt-2\">{{userType.name}}</h6>\r\n            </div>\r\n          </ng-container>\r\n        </div>\r\n\r\n        <!-- <h6 class=\"inspect-add\">\r\n          <button (click)=\"next(3);isBusiness=true;\" class=\"add-btn btn-sm\">\r\n            Yes\r\n          </button>\r\n          &nbsp; &nbsp;\r\n          <button (click)=\"isBusiness=false;view = 4;\" class=\"add-btn btn-sm\">\r\n            No\r\n          </button>\r\n        </h6> -->\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-1.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n            <button (click)=\"next(3)\" class=\"next\" [disabled]=\"!isUserSelected\"\r\n              [ngClass]=\"!isUserSelected ? 'disabled-btn':''\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>\r\n            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 3\">\r\n      <form [formGroup]=\"companyForm\" class=\"form\">\r\n        <div class=\"term-list \">\r\n          <ul>\r\n            <h5>\r\n              <b>\r\n                Enter your business information here.\r\n              </b>\r\n            </h5>\r\n            <br>\r\n          </ul>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12  mt-3 mb-2\">\r\n                <input [ngClass]=\"{'is-invalid': ( f.companyName.errors && validatePage == 3) || providerError}\"\r\n                  type=\"text\" class=\"form-control\" id=\"companyName\" placeholder=\"Company Name\"\r\n                  formControlName=\"companyName\">\r\n                <div *ngIf=\" f.companyName.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.companyName.errors.required\">\r\n                    Company Name is required\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.minlength\">\r\n                    Company Name must be at least 2 characters\r\n                  </div>\r\n                  <div *ngIf=\"f.companyName.errors.maxLength\">\r\n                    Company Name must be less than 100 characters\r\n                  </div>\r\n                </div>\r\n                <div *ngIf=\"providerError\" class=\"invalid-feedback\">\r\n                  <div>\r\n                    {{providerError}}\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n               <input class=\"form-control block fw-medium shadow-none\" type=\"text\" name=\"inputPhone\"\r\n                  placeholder=\"Company Phone Number\" id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\"\r\n                  [maxLength]=\"14\" (input)=\"formatPhone($event,companyForm)\"\r\n                  [ngClass]=\"{'is-invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\" />\r\n                <div *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.address1.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n                  (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n                <div *ngIf=\" f.address1.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.address1.errors.required\">\r\n                    Business Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.city.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" f.city.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.state.errors&& validatePage == 3 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" f.state.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  f.zipcode.errors&& validatePage == 3 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" f.zipcode.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-6 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  f.country.errors && validatePage == 3}\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" f.country.errors && validatePage == 3\" class=\"invalid-feedback\">\r\n                  <div *ngIf=\"f.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n            <div class=\"profile-field\">\r\n        <div class=\"form-group mb-2 form\" style=\"margin-left: 26px;margin-right: 52px;\">\r\n          <input #uploadLogoInput type=\"file\" accept=\"image/*\" (change)=\"uploadLogo($event)\"\r\n            class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n\r\n          <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\" class=\"form-control\"\r\n            placeholder=\"Upload Company Logo\">\r\n\r\n          <img #uploadImage2 class=\"upload-image\" (click)=\"uploadLogoInput.click()\" src=\"assets/images/icons/upload.svg\"\r\n            alt=\"Logo\">\r\n          <div *ngIf=\"isLogoRequired\" class=\"invalid-feedback d-block\">\r\n            <div class=\"ms-1\">\r\n              Please Upload Company Logo\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"selectedRole?.name == 'Contractor'\" style=\"padding: 0px 20px;border-radius: 5px;\">\r\n        <div class=\"term-list pt-0\">\r\n          <h5>\r\n            <b>\r\n              Contractor Category\r\n            </b>\r\n          </h5>\r\n          <div class=\"profile-field\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12  mb-2\">\r\n                <label></label>\r\n                <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n                  placeholder=\"Select Contractor Category\" (ngModelChange)=\"changeContractor($event)\"\r\n                  [(ngModel)]=\"selectedContractorCategories\">\r\n                </ng-select>\r\n              </div>\r\n            </div>\r\n            <accordion [isAnimated]=\"false\">\r\n              <ng-container *ngFor=\"let item of selectedContractorCategories;let i=index\">\r\n                <accordion-group [isOpen]=\"true\">\r\n                  <button accordion-heading class=\"w-100\" style=\"font-size: 16px;font-weight: 600;\">\r\n                    <div class=\"w-100 mt-2\">\r\n                      <div class=\"backdrop\">\r\n                        <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n                          (change)=\"selectAll($event,item?.items)\">\r\n                        <label [for]=\"item?.id\">&nbsp;{{item?.name}}</label>\r\n                      </div>\r\n                    </div>\r\n                  </button>\r\n                  <div class=\"row\">\r\n                    <div class=\"backdrop col-4 form-control-sm\" *ngFor=\"let subItem of item?.items\">\r\n                      <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n                        (change)=\"unCheckedEvent($event,item)\">\r\n                      <label [for]=\"subItem?.id\">&nbsp;{{subItem?.name}}</label>\r\n                    </div>\r\n                  </div>\r\n                </accordion-group>\r\n              </ng-container>\r\n            </accordion>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-2.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6 class=\"btn-mob\">\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n            <button class=\" next\" (click)=\"next(4)\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n            </button>\r\n            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 4\">\r\n\r\n      <div class=\"add-tab \">\r\n        <ul>\r\n          <h5 class=\"p-4 pb-2\">\r\n            <b>\r\n              We need basic information's and headshot for your profile\r\n            </b>\r\n            <div class=\"form-group form-check agree p-0 mt-3\" *ngIf=\"isBusiness\">\r\n              <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\" class=\"form-check-input mt-2\"\r\n                (change)=\"changeAddressUser()\">\r\n              <label for=\"isCopy\" class=\"form-check-label checkmark\">\r\n                Copy From Provider Infromation\r\n              </label>\r\n            </div>\r\n          </h5>\r\n        </ul>\r\n        <div class=\"profile-field\">\r\n          <form [formGroup]=\"userForm\" class=\"form pb-0\">\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.firstName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Fist Name\" formControlName=\"firstName\" id=\"firstName\">\r\n                <div *ngIf=\" u.firstName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                    First Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.lastName.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n                <div *ngIf=\" u.lastName.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.lastName.errors.required\">\r\n                    Last Name is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.email.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n                <div *ngIf=\" u.email.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.email.errors.required\">\r\n                    Emai is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-12 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.address1.errors && validatePage == 4 }\" [options]=\"options\"\r\n                  (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"form-control\"\r\n                  placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n                <div *ngIf=\" u.address1.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.address1.errors.required\">\r\n                    Home Address 1 is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input type=\"text\" class=\"form-control\" id=\"homeAddress2\" formControlName=\"address2\"\r\n                  placeholder=\"Home Address 2\">\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.city.errors && validatePage == 4}\" type=\"text\" class=\"form-control\"\r\n                  id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n                <div *ngIf=\" u.city.errors && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.city.errors.required\">City is required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.state.errors && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n                <div *ngIf=\" u.state.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.state.errors.required\">State is required</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex flex-wrap justify-content-between row\">\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [textMask]=\"{ mask: zipcodeMask }\"\r\n                  [ngClass]=\"{ 'is-invalid':  u.zipcode.errors  && validatePage == 4 }\" type=\"text\" class=\"form-control\"\r\n                  id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n                <div *ngIf=\" u.zipcode.errors  && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.zipcode.errors.required\">Zipcode is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input [ngClass]=\"{ 'is-invalid':  u.country.errors  && validatePage == 4 }\" type=\"text\"\r\n                  class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n                <div *ngIf=\" u.country.errors  && validatePage ==4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.country.errors.required\">Country is\r\n                    required</div>\r\n                </div>\r\n              </div>\r\n              <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n                <input class=\"form-control block shadow-none\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n                  name=\"inputPhone\" placeholder=\"Phone Number \" id=\"inputPhone\" autocomplete=\"off\"\r\n                  formControlName=\"phoneNumber\" [maxLength]=\"300\"\r\n                  [ngClass]=\"{'is-invalid': ( u.phoneNumber.errors && validatePage == 4)}\">\r\n                <div *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"invalid-feedback\">\r\n                  <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors.required\">\r\n                    Phone Number is required\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </form>\r\n          <div class=\"form-group mb-2 form\">\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\"\r\n              class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n            <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\" class=\"form-control\"\r\n              id=\"upload\" accept=\"image/*\" placeholder=\"Upload Profile Picture\">\r\n            <img #uploadImage1 class=\"upload-image\" (click)=\"uploadFile.click()\" type=\"file\"\r\n              src=\"assets/images/icons/upload.svg\" alt=\"Logo\">\r\n            <div *ngIf=\"isImageRequired\" class=\"invalid-feedback d-block\">\r\n              <div class=\"ms-1\">\r\n                Please Upload Profile Image\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n            <div>\r\n              {{userError}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-sm-12 pt-3 slider-tab text-center\">\r\n          <img class=\"slider-view\" src=\"assets/images/icons/stepper-3.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end\">\r\n          <h6>\r\n            <button (click)=\"previous()\" class=\"my-2 mx-1\" class=\"btn-close back-tab back-btn btn-sm\">\r\n              Back\r\n            </button>\r\n            &nbsp; &nbsp;\r\n           <button class=\"next\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n              <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\" src=\"assets/images/icons/next.svg\"\r\n                alt=\"Logo\">\r\n              <span *ngIf=\"showLoader\" class=\"spinner position-absolute\"></span>\r\n\r\n            </button>\r\n            &nbsp; &nbsp;\r\n          </h6>\r\n        </div>\r\n      </div>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 5\">\r\n      <ul class=\"term-list ps-3\">\r\n        <h5>\r\n          <b>\r\n            Thanks, we got the basics down!\r\n          </b>\r\n        </h5>\r\n        <br>\r\n        <b class=\"para-comma\">\r\n          Account created successfully. Next step: complete your profile.\r\n          <br>\r\n          <br>\r\n          Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows.\r\n          Incomplete profiles will have limited access.\r\n          <br>\r\n          <br>\r\n          You may access your dashboard at any time, but full functionality is available only after completion.\r\n        </b>\r\n      </ul>\r\n      <div class=\"footer col-12 col-sm-12 col-md-12 col-xl-12 row justify-content-around footer-view\">\r\n        <!-- <div class=\"col-md-3 col-lg-3 col-xl-3 col-sm-12 text-center\">\r\n          <img class=\"slider ml-3\" src=\"assets/images/icons/stepper-4.svg\" alt=\"Logo\">\r\n        </div> -->\r\n        <div class=\"col-5\"></div>\r\n        <div class=\"col-md-4 col-sm-12 col-xl-4 text-end row\">\r\n          <div class=\"col-md-2 col-2\">\r\n            <h6 style=\"margin-right: 3rem\">\r\n            </h6>\r\n          </div>\r\n\r\n          &nbsp; &nbsp;\r\n          <div class=\"col-md-8\">\r\n            <h6>\r\n              <button (click)=\"dashboard()\" class=\"go-btn btn-sm\">\r\n                Go To Home&nbsp;&nbsp;\r\n                <img style=\"height: 20px; width: 16px;filter: brightness(0) invert(1);\"\r\n                  src=\"assets/images/icons/next.svg\" alt=\"Logo\">\r\n              </button>\r\n            </h6>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <!-- <div>test</div> -->\r\n    </ng-container>\r\n    <ng-container *ngIf=\"view == 10\">\r\n      <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\"></app-credentialing>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n  <div class=\"modal-dialog modal-dialog-centered\">\r\n    <div class=\"modal-content terms-fixed-modal\">\r\n\r\n      <!-- HEADER -->\r\n      <div class=\"modal-header\">\r\n        <h4 class=\"modal-title fw-bold title-popup\">\r\n          {{ termsAndConditionTitle }}\r\n        </h4>\r\n      </div>\r\n\r\n      <!-- SCROLLABLE CONTENT ONLY -->\r\n      <div class=\"modal-body terms-scroll-area\" (scroll)=\"onTermsScroll($event)\">\r\n        <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n          <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-terms-conditions>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n          <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\">\r\n          </app-privacy-policy>\r\n        </ng-container>\r\n      </div>\r\n\r\n      <!-- FOOTER (NOT SCROLLING) -->\r\n      <div>\r\n        <div class=\"modal-footer text-end\" style=\"display: block;\">\r\n          <!-- YOUR BUTTONS \u2014 UNCHANGED -->\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\"\r\n            style=\"background: #d3dae6; color: #98a2b3; border: #D3DAE6 !important;\"\r\n            (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n            Decline\r\n          </button>\r\n\r\n          <button type=\"button\" class=\"btn btn-primary btn-sm px-4\" style=\"color:white;background: #4077AD;\"\r\n            [disabled]=\"!isAgreeEnabled\" (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n            Agree\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: [".brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:_ngcontent-ng-c3147387837_spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:30px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #0d6efd40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}.terms-fixed-modal{width:1080px;height:700px;display:flex;flex-direction:column}.terms-scroll-area{flex:1 1 auto;overflow-y:auto;padding:16px}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-wrapper{display:flex;align-items:center;cursor:pointer;gap:6px}.logout-icon{width:20px;height:20px;background:url(/assets/images/icons/logoutt.svg) no-repeat center;background-size:contain}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}\n"] }]
         }], ctorParameters: () => [{ type: i3$1.Router }, { type: UserDetailService }, { type: i3.FormBuilder }, { type: FileService }, { type: ProvidersService$1 }, { type: RolesService }, { type: i7.BsModalService }, { type: ProviderContractorSubCategoryService }, { type: ProviderContractorSubCategoryService }, { type: i9.AuthService }, { type: i6.TokenService }, { type: i6.RoleContextService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]