@digi-frontend/dgate-api-documentation 1.0.92 → 1.0.93

package/dist/src/layout/docsComponents/DocsContent/OverviewPage/index.js

@@ -1,2 +1,2 @@
-import{j as s}from"../../../../../_virtual/jsx-runtime.js";import e from"../../../../components/SVGLoader/SVGLoader.js";import i from"../../../../assets/icons/arrowRightGray.svg.js";import n from"../../../../assets/icons/arrow-down.svg.js";import t from"../../../../assets/icons/newCopyIcon.svg.js";import a from"../../../../assets/icons/arrow-up.svg.js";import{useSectionToggle as r,SectionEnum as l}from"../../../../context/SectionToggleContext.js";import{useState as o,useEffect as d}from"react";const c=({data:c,setActiveItemData:p,setActiveType:m,onProductNavigate:v,apis:h})=>{var j,u,x,N;const{toggleSection:I}=r(),[g,O]=o((null===(u=null===(j=null==c?void 0:c.servers)||void 0===j?void 0:j[0])||void 0===u?void 0:u.url)||""),[E,S]=o(!1);d((()=>{var s,e;O((null===(e=null===(s=null==c?void 0:c.servers)||void 0===s?void 0:s[0])||void 0===e?void 0:e.url)||"")}),[c]);return s.jsxs("div",{className:"api-details-page",children:[s.jsx("h2",{className:"welcome",children:"Welcome to"}),s.jsx("h1",{className:"api-title",children:null==c?void 0:c.title}),s.jsxs("p",{className:"api-version",children:["API Version: ",s.jsx("span",{children:null==c?void 0:c.version})]}),s.jsxs("div",{className:"custom-url-input",children:[s.jsx("label",{className:"input-label",children:"API Base URL"}),s.jsxs("div",{className:"url-container",children:[s.jsxs("div",{className:"typeDdl",onClick:()=>S((s=>!s)),children:[s.jsx("span",{className:"url-text",children:g||"-"}),s.jsxs("div",{className:"icon-container",children:[s.jsx("span",{className:"icon",role:"button",tabIndex:0,onClick:s=>{s.stopPropagation(),navigator.clipboard.writeText(g)},children:0!==g.length&&s.jsx(e,{src:t})}),0!==g.length&&s.jsx(e,{src:E?a:n})]})]}),E&&0!==g.length&&s.jsx("div",{className:"urlList",children:null===(x=null==c?void 0:c.servers)||void 0===x?void 0:x.map(((e,i)=>s.jsxs("div",{className:"url-item",onClick:()=>{O(e.url),S(!1)},children:[s.jsx("input",{type:"radio",name:"api-method",checked:g===e.url,readOnly:!0}),s.jsx("span",{children:e.url})]},i)))})]})]}),s.jsx("p",{className:"api-desc",children:`${c.description||"No Description"}`}),v&&s.jsxs("div",{className:"api-product-tag",children:["Product with this API"," ",s.jsx("span",{className:"product-tag",role:"button",tabIndex:-1,onClick:()=>v(c.associatedProduct.productId),children:c.associatedProduct.name})]}),s.jsx("h3",{className:"section-title",children:"Endpoints"}),Object.entries(null==c?void 0:c.tags).map((([n,t])=>s.jsxs("div",{className:"endpoint-group",children:[s.jsx("h4",{className:"tag-title",children:n}),s.jsx("div",{className:"endpoint-list",children:t.map(((t,a)=>{var r,o,d;return s.jsxs("div",{className:"endpoint-card",onClick:()=>(s=>{p(Object.assign(Object.assign({},s),{api:Object.assign({id:c.apiSpecId,title:c.title,description:c.description,version:c.version},c)})),m("ENDPOINT"),Object.entries((null==c?void 0:c.tags)||{}).findIndex((([,e])=>e.some((e=>e.id===s.id))));const e=Object.entries(c.tags).sort((([s],[e])=>"default"===s?1:"default"===e?-1:s.localeCompare(e))).findIndex((([e,i])=>i.find((e=>e.id===s.id))));I(c.apiSpecId,[{type:l.API_SECTION,setTo:!0},{type:l.ENDPOINTS_SECTION,setTo:!0},{type:l.TAG_SECTION,setTo:!0,index:e},{type:l.RESOURCE,setTo:!0,id:s.id}],{resetOthers:!0,filterKeys:[l.OVERVIEW]})})(t),children:[s.jsxs("div",{children:[s.jsxs("div",{className:"endpoint-card-header",children:[s.jsx("span",{className:`method-label ${t.method.toLowerCase()}`,children:t.method}),s.jsx("div",{className:"title-wrapper",children:s.jsxs("h5",{children:[(t.summary||"Endpoint Name").slice(0,40),(null!==(o=null===(r=t.summary)||void 0===r?void 0:r.length)&&void 0!==o?o:0)>40&&"..."]})})]}),s.jsxs("div",{className:"endpoint-meta",children:[s.jsx("p",{children:t.path}),s.jsx("p",{className:"description",children:null!==(d=t.description)&&void 0!==d?d:"No Description "})]})]}),s.jsx("div",{className:"endpoint-arrow",children:s.jsx(e,{src:i})})]},`${n}-${a}`)}))})]},n))),(null===(N=c.apiVersions)||void 0===N?void 0:N.length)>0&&s.jsxs("div",{className:"versions-section",children:[s.jsx("h4",{children:"API Versions"}),s.jsx("div",{className:"version-list",children:c.apiVersions.map(((e,i)=>{var n;return s.jsx("button",{className:"version-btn",onClick:()=>(s=>{if(s.apiSpecId===c.apiSpecId)return void m("OVERVIEW");const e=c.apiVersions.find((e=>e.apiSpecId===s.apiSpecId));if(!e)return;const i=h.find((s=>s.apiSpecId===e.apiSpecId));p(i),m("OVERVIEW"),I(i.apiSpecId,[{type:l.API_SECTION,setTo:!0},{type:l.OVERVIEW,setTo:!0}],{resetOthers:!0,filterKeys:[l.OVERVIEW,l.API_SECTION,l.ENDPOINTS_SECTION,l.TAG_SECTION]})})(e),children:(null===(n=e.metaData)||void 0===n?void 0:n.version)||"N/A"},i)}))})]})]})};export{c as OverviewPage};
+import{j as s}from"../../../../../_virtual/jsx-runtime.js";import e from"../../../../components/SVGLoader/SVGLoader.js";import i from"../../../../assets/icons/arrowRightGray.svg.js";import n from"../../../../assets/icons/arrow-down.svg.js";import t from"../../../../assets/icons/newCopyIcon.svg.js";import a from"../../../../assets/icons/arrow-up.svg.js";import{useSectionToggle as r,SectionEnum as l}from"../../../../context/SectionToggleContext.js";import{useState as o,useEffect as d}from"react";import{copyToClipboard as c}from"../../../../utils/index.js";const p=({data:p,setActiveItemData:m,setActiveType:v,onProductNavigate:h,apis:j})=>{var u,x,N,I;const{toggleSection:g}=r(),[O,E]=o((null===(x=null===(u=null==p?void 0:p.servers)||void 0===u?void 0:u[0])||void 0===x?void 0:x.url)||""),[S,f]=o(!1);d((()=>{var s,e;E((null===(e=null===(s=null==p?void 0:p.servers)||void 0===s?void 0:s[0])||void 0===e?void 0:e.url)||"")}),[p]);return s.jsxs("div",{className:"api-details-page",children:[s.jsx("h2",{className:"welcome",children:"Welcome to"}),s.jsx("h1",{className:"api-title",children:null==p?void 0:p.title}),s.jsxs("p",{className:"api-version",children:["API Version: ",s.jsx("span",{children:null==p?void 0:p.version})]}),s.jsxs("div",{className:"custom-url-input",children:[s.jsx("label",{className:"input-label",children:"API Base URL"}),s.jsxs("div",{className:"url-container",children:[s.jsxs("div",{className:"type-ddl",onClick:()=>f((s=>!s)),children:[s.jsx("span",{className:"url-text",children:O||"-"}),s.jsxs("div",{className:"icon-container",children:[0!==O.length&&s.jsx(e,{className:"icon",role:"button",tabIndex:0,onClick:s=>{s.stopPropagation(),c(O)},src:t}),0!==O.length&&s.jsx(e,{src:S?a:n})]})]}),S&&0!==O.length&&s.jsx("div",{className:"url-list",children:null===(N=null==p?void 0:p.servers)||void 0===N?void 0:N.map(((e,i)=>s.jsxs("div",{className:"url-item",onClick:()=>{E(e.url),f(!1)},children:[s.jsx("input",{type:"radio",name:"api-method",checked:O===e.url,readOnly:!0}),s.jsx("span",{children:e.url})]},i)))})]})]}),s.jsx("p",{className:"api-desc",children:`${p.description||"No Description"}`}),h&&s.jsxs("div",{className:"api-product-tag",children:["Product with this API"," ",s.jsx("span",{className:"product-tag",role:"button",tabIndex:-1,onClick:()=>h(p.associatedProduct.productId),children:p.associatedProduct.name})]}),s.jsx("h3",{className:"section-title",children:"Endpoints"}),Object.entries(null==p?void 0:p.tags).map((([n,t])=>s.jsxs("div",{className:"endpoint-group",children:[s.jsx("h4",{className:"tag-title",children:n}),s.jsx("div",{className:"endpoint-list",children:t.map(((t,a)=>{var r,o,d;return s.jsxs("div",{className:"endpoint-card",onClick:()=>(s=>{m(Object.assign(Object.assign({},s),{api:Object.assign({id:p.apiSpecId,title:p.title,description:p.description,version:p.version},p)})),v("ENDPOINT"),Object.entries((null==p?void 0:p.tags)||{}).findIndex((([,e])=>e.some((e=>e.id===s.id))));const e=Object.entries(p.tags).sort((([s],[e])=>"default"===s?1:"default"===e?-1:s.localeCompare(e))).findIndex((([e,i])=>i.find((e=>e.id===s.id))));g(p.apiSpecId,[{type:l.API_SECTION,setTo:!0},{type:l.ENDPOINTS_SECTION,setTo:!0},{type:l.TAG_SECTION,setTo:!0,index:e},{type:l.RESOURCE,setTo:!0,id:s.id}],{resetOthers:!0,filterKeys:[l.OVERVIEW]})})(t),children:[s.jsxs("div",{children:[s.jsxs("div",{className:"endpoint-card-header",children:[s.jsx("span",{className:`method-label ${t.method.toLowerCase()}`,children:t.method}),s.jsx("div",{className:"title-wrapper",children:s.jsxs("h5",{children:[(t.summary||"Endpoint Name").slice(0,40),(null!==(o=null===(r=t.summary)||void 0===r?void 0:r.length)&&void 0!==o?o:0)>40&&"..."]})})]}),s.jsxs("div",{className:"endpoint-meta",children:[s.jsx("p",{children:t.path}),s.jsx("p",{className:"description",children:null!==(d=t.description)&&void 0!==d?d:"No Description "})]})]}),s.jsx("div",{className:"endpoint-arrow",children:s.jsx(e,{src:i})})]},`${n}-${a}`)}))})]},n))),(null===(I=p.apiVersions)||void 0===I?void 0:I.length)>0&&s.jsxs("div",{className:"versions-section",children:[s.jsx("h4",{children:"API Versions"}),s.jsx("div",{className:"version-list",children:p.apiVersions.map(((e,i)=>{var n;return s.jsx("button",{className:"version-btn",onClick:()=>(s=>{if(s.apiSpecId===p.apiSpecId)return void v("OVERVIEW");const e=p.apiVersions.find((e=>e.apiSpecId===s.apiSpecId));if(!e)return;const i=j.find((s=>s.apiSpecId===e.apiSpecId));m(i),v("OVERVIEW"),g(i.apiSpecId,[{type:l.API_SECTION,setTo:!0},{type:l.OVERVIEW,setTo:!0}],{resetOthers:!0,filterKeys:[l.OVERVIEW,l.API_SECTION,l.ENDPOINTS_SECTION,l.TAG_SECTION]})})(e),children:(null===(n=e.metaData)||void 0===n?void 0:n.version)||"N/A"},i)}))})]})]})};export{p as OverviewPage};
 //# sourceMappingURL=index.js.map

package/dist/src/layout/docsComponents/DocsContent/OverviewPage/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/layout/docsComponents/DocsContent/OverviewPage/index.tsx"],"sourcesContent":["import './style.scss'\nimport SVGLoader from '../../../../components/SVGLoader/SVGLoader'\nimport {\n  arrowDown,\n  arrowRightGray,\n  arrowUp,\n  newCopyIcon,\n} from '../../../../assets/icons/index'\nimport { EndpointData, OverviewData } from 'src/layout/docsLayout'\nimport { SectionEnum, useSectionToggle } from '../../../../../src/context/SectionToggleContext'\nimport React, { useEffect, useState } from 'react'\n\nexport const OverviewPage = ({\n  data,\n  setActiveItemData,\n  setActiveType,\n  onProductNavigate,\n  apis,\n}: {\n  data: OverviewData\n  setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>\n  setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>\n  onProductNavigate?: (productId: number) => void\n  apis: OverviewData[]\n}) => {\n  const { toggleSection } = useSectionToggle()\n  const [selectedUrl, setSelectedUrl] = useState(data?.servers?.[0]?.url || '')\n  const [isUrlDropdownOpen, setIsUrlDropdownOpen] = useState<boolean>(false)\n\n  useEffect(() => {\n    setSelectedUrl(data?.servers?.[0]?.url || '')\n  }, [data])\n  const handleVersionClick = (verObj) => {\n    if (verObj.apiSpecId === data.apiSpecId) {\n      setActiveType('OVERVIEW')\n      return\n    }\n\n    const matchedVersion = data.apiVersions.find((v) => v.apiSpecId === verObj.apiSpecId)\n\n    if (!matchedVersion) {\n      return\n    }\n\n    const matchedApi = apis.find((api) => api.apiSpecId === matchedVersion.apiSpecId)\n    setActiveItemData(matchedApi)\n\n    setActiveType('OVERVIEW')\n    toggleSection(\n      matchedApi.apiSpecId,\n      [\n        { type: SectionEnum.API_SECTION, setTo: true },\n        { type: SectionEnum.OVERVIEW, setTo: true },\n      ],\n      {\n        resetOthers: true,\n        filterKeys: [\n          SectionEnum.OVERVIEW,\n          SectionEnum.API_SECTION,\n          SectionEnum.ENDPOINTS_SECTION,\n          SectionEnum.TAG_SECTION,\n        ],\n      }\n    )\n  }\n\n  const handleClick = (endpoint) => {\n    setActiveItemData({\n      ...endpoint,\n      api: {\n        id: data.apiSpecId,\n        title: data.title,\n        description: data.description,\n        version: data.version,\n        ...data,\n      },\n    })\n    setActiveType('ENDPOINT')\n    const tagEntries = Object.entries(data?.tags || {})\n    const sectionIndex = tagEntries.findIndex(([, endpoints]) =>\n      endpoints.some((e) => e.id === endpoint.id)\n    )\n\n    const tagSectionIndex = Object.entries(data.tags)\n      .sort(([a], [b]) => (a === 'default' ? 1 : b === 'default' ? -1 : a.localeCompare(b)))\n      .findIndex(([_, tagData]) => tagData.find((t) => t.id === endpoint.id))\n\n    toggleSection(\n      data.apiSpecId,\n      [\n        { type: SectionEnum.API_SECTION, setTo: true },\n        { type: SectionEnum.ENDPOINTS_SECTION, setTo: true },\n        { type: SectionEnum.TAG_SECTION, setTo: true, index: tagSectionIndex },\n        { type: SectionEnum.RESOURCE, setTo: true, id: endpoint.id },\n      ],\n      { resetOthers: true, filterKeys: [SectionEnum.OVERVIEW] }\n    )\n  }\n\n  return (\n    <div className=\"api-details-page\">\n      <h2 className=\"welcome\">Welcome to</h2>\n      <h1 className=\"api-title\">{data?.title}</h1>\n      <p className=\"api-version\">\n        API Version: <span>{data?.version}</span>\n      </p>\n\n      <div className=\"custom-url-input\">\n        <label className=\"input-label\">API Base URL</label>\n        <div className=\"url-container\">\n          <div className=\"typeDdl\" onClick={() => setIsUrlDropdownOpen((prev) => !prev)}>\n            <span className=\"url-text\">{selectedUrl || '-'}</span>\n            <div className=\"icon-container\">\n              <span\n                className=\"icon\"\n                role=\"button\"\n                tabIndex={0}\n                onClick={(e) => {\n                  e.stopPropagation()\n                  navigator.clipboard.writeText(selectedUrl)\n                }}\n              >\n                {selectedUrl.length !== 0 && <SVGLoader src={newCopyIcon} />}\n              </span>\n              {selectedUrl.length !== 0 && (\n                <SVGLoader src={!isUrlDropdownOpen ? arrowDown : arrowUp} />\n              )}\n            </div>\n          </div>\n          {isUrlDropdownOpen && selectedUrl.length !== 0 && (\n            <div className=\"urlList\">\n              {data?.servers?.map((server, index) => (\n                <div\n                  key={index}\n                  className=\"url-item\"\n                  onClick={() => {\n                    setSelectedUrl(server.url)\n                    setIsUrlDropdownOpen(false)\n                  }}\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"api-method\"\n                    checked={selectedUrl === server.url}\n                    readOnly\n                  />\n                  <span>{server.url}</span>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n\n      <p className=\"api-desc\">{`${data.description || 'No Description'}`}</p>\n      {onProductNavigate && (\n        <div className=\"api-product-tag\">\n          Product with this API{' '}\n          <span\n            className=\"product-tag\"\n            role=\"button\"\n            tabIndex={-1}\n            onClick={() => onProductNavigate(data.associatedProduct.productId)}\n          >\n            {data.associatedProduct.name}\n          </span>\n        </div>\n      )}\n\n      <h3 className=\"section-title\">Endpoints</h3>\n\n      {Object.entries(data?.tags).map(([tag, endpoints]) => (\n        <div className=\"endpoint-group\" key={tag}>\n          <h4 className=\"tag-title\">{tag}</h4>\n          <div className=\"endpoint-list\">\n            {endpoints.map((endpoint, idx) => (\n              <div\n                className=\"endpoint-card\"\n                onClick={() => handleClick(endpoint)}\n                key={`${tag}-${idx}`}\n              >\n                <div>\n                  <div className=\"endpoint-card-header\">\n                    <span className={`method-label ${endpoint.method.toLowerCase()}`}>\n                      {endpoint.method}\n                    </span>\n                    <div className=\"title-wrapper\">\n                      <h5>\n                        {(endpoint.summary || 'Endpoint Name').slice(0, 40)}\n                        {(endpoint.summary?.length ?? 0) > 40 && '...'}\n                      </h5>\n                    </div>\n                  </div>\n                  <div className=\"endpoint-meta\">\n                    <p>{endpoint.path}</p>\n                    <p className=\"description\">{endpoint.description ?? 'No Description '}</p>\n                  </div>\n                </div>\n\n                <div className=\"endpoint-arrow\">\n                  <SVGLoader src={arrowRightGray} />\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      ))}\n\n      {data.apiVersions?.length > 0 && (\n        <div className=\"versions-section\">\n          <h4>API Versions</h4>\n          <div className=\"version-list\">\n            {data.apiVersions.map((verObj, index) => (\n              <button\n                key={index}\n                className=\"version-btn\"\n                onClick={() => handleVersionClick(verObj)}\n              >\n                {verObj.metaData?.version || 'N/A'}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["OverviewPage","data","setActiveItemData","setActiveType","onProductNavigate","apis","toggleSection","useSectionToggle","selectedUrl","setSelectedUrl","useState","_b","_a","servers","url","isUrlDropdownOpen","setIsUrlDropdownOpen","useEffect","_jsxs","className","_jsx","children","title","version","onClick","prev","jsx","role","tabIndex","e","stopPropagation","navigator","clipboard","writeText","length","SVGLoader","src","newCopyIcon","arrowUp","arrowDown","_c","map","server","index","type","name","checked","readOnly","description","associatedProduct","productId","Object","entries","tags","tag","endpoints","endpoint","idx","jsxs","assign","api","id","apiSpecId","findIndex","some","tagSectionIndex","sort","a","b","localeCompare","_","tagData","find","t","SectionEnum","API_SECTION","setTo","ENDPOINTS_SECTION","TAG_SECTION","RESOURCE","resetOthers","filterKeys","OVERVIEW","handleClick","method","toLowerCase","summary","slice","path","arrowRightGray","_d","apiVersions","verObj","matchedVersion","v","matchedApi","handleVersionClick","metaData"],"mappings":"mfAYa,MAAAA,EAAe,EAC1BC,OACAC,oBACAC,gBACAC,oBACAC,uBAQA,MAAMC,cAAEA,GAAkBC,KACnBC,EAAaC,GAAkBC,GAA2B,QAAlBC,EAAgB,QAAhBC,EAAAX,aAAA,EAAAA,EAAMY,eAAU,IAAAD,OAAA,EAAAA,EAAA,UAAE,IAAAD,OAAA,EAAAA,EAAEG,MAAO,KACnEC,EAAmBC,GAAwBN,GAAkB,GAEpEO,GAAU,aACRR,GAAiC,QAAlBE,EAAa,UAAbV,aAAA,EAAAA,EAAMY,eAAO,IAAAD,OAAA,EAAAA,EAAG,UAAE,IAAAD,OAAA,EAAAA,EAAEG,MAAO,MACzC,CAACb,IAoEJ,OACEiB,OAAK,MAAA,CAAAC,UAAU,6BACbC,EAAAA,IAAI,KAAA,CAAAD,UAAU,UAAyBE,SAAA,eACvCD,YAAID,UAAU,YAAWE,SAAEpB,aAAI,EAAJA,EAAMqB,QACjCJ,EAAAA,KAAA,IAAA,CAAGC,UAAU,cACEE,SAAA,CAAA,gBAAAD,EAAAA,IAAA,OAAA,CAAAC,SAAOpB,aAAA,EAAAA,EAAMsB,aAG5BL,OAAK,MAAA,CAAAC,UAAU,mBACbE,SAAA,CAAAD,EAAAA,IAAA,QAAA,CAAOD,UAAU,cAAaE,SAAA,iBAC9BH,OAAA,MAAA,CAAKC,UAAU,gBACbE,SAAA,CAAAH,EAAAA,KAAA,MAAA,CAAKC,UAAU,UAAUK,QAAS,IAAMR,GAAsBS,IAAUA,IAAKJ,SAAA,CAC3ED,EAAAA,IAAM,OAAA,CAAAD,UAAU,WAAYE,SAAAb,GAAe,MAC3CU,EAAAA,KAAA,MAAA,CAAKC,UAAU,iBACbE,SAAA,CAAAD,EAAAM,IAAA,OAAA,CACEP,UAAU,OACVQ,KAAK,SACLC,SAAU,EACVJ,QAAUK,IACRA,EAAEC,kBACFC,UAAUC,UAAUC,UAAUzB,aAGR,IAAvBA,EAAY0B,QAAgBd,EAACM,IAAAS,EAAU,CAAAC,IAAKC,MAEvB,IAAvB7B,EAAY0B,QACXd,MAACe,GAAUC,IAAMrB,EAAgCuB,EAAZC,UAI1CxB,GAA4C,IAAvBP,EAAY0B,QAChCd,MAAA,MAAA,CAAKD,UAAU,UACZE,SAAa,QAAbmB,EAAAvC,eAAAA,EAAMY,eAAO,IAAA2B,OAAA,EAAAA,EAAEC,KAAI,CAACC,EAAQC,IAC3BzB,EAAAA,KAAA,MAAA,CAEEC,UAAU,WACVK,QAAS,KACPf,EAAeiC,EAAO5B,KACtBE,GAAqB,IAGvBK,SAAA,CAAAD,EAAAA,IAAA,QAAA,CACEwB,KAAK,QACLC,KAAK,aACLC,QAAStC,IAAgBkC,EAAO5B,IAChCiC,cAEF3B,EAAAM,IAAA,OAAA,CAAAL,SAAOqB,EAAO5B,QAbT6B,aAqBjBvB,EAAAA,IAAA,IAAA,CAAGD,UAAU,WAAYE,SAAA,GAAGpB,EAAK+C,aAAe,qBAC/C5C,GACCc,EAAAA,KAAA,MAAA,CAAKC,UAAU,kBACSE,SAAA,CAAA,wBAAA,IACtBD,EACEM,IAAA,OAAA,CAAAP,UAAU,cACVQ,KAAK,SACLC,UAAW,EACXJ,QAAS,IAAMpB,EAAkBH,EAAKgD,kBAAkBC,WAEvD7B,SAAApB,EAAKgD,kBAAkBJ,UAK9BzB,EAAAA,IAAI,KAAA,CAAAD,UAAU,gBAAeE,SAAA,cAE5B8B,OAAOC,QAAQnD,aAAA,EAAAA,EAAMoD,MAAMZ,KAAI,EAAEa,EAAKC,KACrCrC,EAAAA,KAAA,MAAA,CAAKC,UAAU,iBACbE,SAAA,CAAAD,EAAAM,IAAA,KAAA,CAAIP,UAAU,YAAaE,SAAAiC,IAC3BlC,EAAAM,IAAA,MAAA,CAAKP,UAAU,gBACZE,SAAAkC,EAAUd,KAAI,CAACe,EAAUC,eAAQ,OAChCvC,EAAAwC,KAAA,MAAA,CACEvC,UAAU,gBACVK,QAAS,IAhHH,CAACgC,IACnBtD,EACKiD,OAAAQ,OAAAR,OAAAQ,OAAA,CAAA,EAAAH,GACH,CAAAI,IACET,OAAAQ,OAAA,CAAAE,GAAI5D,EAAK6D,UACTxC,MAAOrB,EAAKqB,MACZ0B,YAAa/C,EAAK+C,YAClBzB,QAAStB,EAAKsB,SACXtB,MAGPE,EAAc,YACKgD,OAAOC,SAAQnD,eAAAA,EAAMoD,OAAQ,CAAE,GAClBU,WAAU,GAAIR,KAC5CA,EAAUS,MAAMnC,GAAMA,EAAEgC,KAAOL,EAASK,OAG1C,MAAMI,EAAkBd,OAAOC,QAAQnD,EAAKoD,MACzCa,MAAK,EAAEC,IAAKC,KAAc,YAAND,EAAkB,EAAU,YAANC,GAAmB,EAAID,EAAEE,cAAcD,KACjFL,WAAU,EAAEO,EAAGC,KAAaA,EAAQC,MAAMC,GAAMA,EAAEZ,KAAOL,EAASK,OAErEvD,EACEL,EAAK6D,UACL,CACE,CAAElB,KAAM8B,EAAYC,YAAaC,OAAO,GACxC,CAAEhC,KAAM8B,EAAYG,kBAAmBD,OAAO,GAC9C,CAAEhC,KAAM8B,EAAYI,YAAaF,OAAO,EAAMjC,MAAOsB,GACrD,CAAErB,KAAM8B,EAAYK,SAAUH,OAAO,EAAMf,GAAIL,EAASK,KAE1D,CAAEmB,aAAa,EAAMC,WAAY,CAACP,EAAYQ,aAmFrBC,CAAY3B,GAASnC,SAAA,CAGpCH,EACEwC,KAAA,MAAA,CAAArC,SAAA,CAAAH,OAAA,MAAA,CAAKC,UAAU,uBAAsBE,SAAA,CACnCD,EAAAA,IAAM,OAAA,CAAAD,UAAW,gBAAgBqC,EAAS4B,OAAOC,gBAAehE,SAC7DmC,EAAS4B,SAEZhE,EAAAA,IAAA,MAAA,CAAKD,UAAU,gBAAeE,SAC5BH,EACGwC,KAAA,KAAA,CAAArC,SAAA,EAACmC,EAAS8B,SAAW,iBAAiBC,MAAM,EAAG,KACtB,QAAxB5E,EAAgB,QAAhBC,EAAA4C,EAAS8B,eAAO,IAAA1E,OAAA,EAAAA,EAAEsB,cAAM,IAAAvB,EAAAA,EAAI,GAAK,IAAM,cAI/CO,EAAAA,KAAK,MAAA,CAAAC,UAAU,gBACbE,SAAA,CAAAD,EAAAA,IAAA,IAAA,CAAAC,SAAImC,EAASgC,OACbpE,EAAAM,IAAA,IAAA,CAAGP,UAAU,cAAaE,SAA0B,QAAxBmB,EAAAgB,EAASR,mBAAe,IAAAR,EAAAA,EAAA,0BAIxDpB,EAAKM,IAAA,MAAA,CAAAP,UAAU,iBACbE,SAAAD,EAAAA,IAACe,EAAS,CAACC,IAAKqD,QArBb,GAAGnC,KAAOG,YAPcH,MAoCpB,QAAlBoC,EAAAzF,EAAK0F,mBAAa,IAAAD,OAAA,EAAAA,EAAAxD,QAAS,GAC1BhB,EAAAA,KAAK,MAAA,CAAAC,UAAU,6BACbC,EAAqBM,IAAA,KAAA,CAAAL,SAAA,iBACrBD,aAAKD,UAAU,eACZE,SAAApB,EAAK0F,YAAYlD,KAAI,CAACmD,EAAQjD,WAAU,OACvCvB,MAAA,SAAA,CAEED,UAAU,cACVK,QAAS,IAxLI,CAACoE,IAC1B,GAAIA,EAAO9B,YAAc7D,EAAK6D,UAE5B,YADA3D,EAAc,YAIhB,MAAM0F,EAAiB5F,EAAK0F,YAAYnB,MAAMsB,GAAMA,EAAEhC,YAAc8B,EAAO9B,YAE3E,IAAK+B,EACH,OAGF,MAAME,EAAa1F,EAAKmE,MAAMZ,GAAQA,EAAIE,YAAc+B,EAAe/B,YACvE5D,EAAkB6F,GAElB5F,EAAc,YACdG,EACEyF,EAAWjC,UACX,CACE,CAAElB,KAAM8B,EAAYC,YAAaC,OAAO,GACxC,CAAEhC,KAAM8B,EAAYQ,SAAUN,OAAO,IAEvC,CACEI,aAAa,EACbC,WAAY,CACVP,EAAYQ,SACZR,EAAYC,YACZD,EAAYG,kBACZH,EAAYI,gBA4JSkB,CAAmBJ,GAAOvE,UAEzB,QAAfT,EAAAgF,EAAOK,gBAAQ,IAAArF,OAAA,EAAAA,EAAEW,UAAW,OAJxBoB"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/layout/docsComponents/DocsContent/OverviewPage/index.tsx"],"sourcesContent":["import './style.scss'\nimport SVGLoader from '../../../../components/SVGLoader/SVGLoader'\nimport { arrowDown, arrowRightGray, arrowUp, newCopyIcon } from '../../../../assets/icons/index'\nimport { EndpointData, OverviewData } from 'src/layout/docsLayout'\nimport { SectionEnum, useSectionToggle } from '../../../../../src/context/SectionToggleContext'\nimport React, { useEffect, useState } from 'react'\nimport { copyToClipboard } from '../../../../utils'\n\nexport const OverviewPage = ({\n  data,\n  setActiveItemData,\n  setActiveType,\n  onProductNavigate,\n  apis,\n}: {\n  data: OverviewData\n  setActiveItemData: React.Dispatch<React.SetStateAction<OverviewData | EndpointData>>\n  setActiveType: React.Dispatch<React.SetStateAction<'OVERVIEW' | 'ENDPOINT'>>\n  onProductNavigate?: (productId: number) => void\n  apis: OverviewData[]\n}) => {\n  const { toggleSection } = useSectionToggle()\n  const [selectedUrl, setSelectedUrl] = useState(data?.servers?.[0]?.url || '')\n  const [isUrlDropdownOpen, setIsUrlDropdownOpen] = useState<boolean>(false)\n\n  useEffect(() => {\n    setSelectedUrl(data?.servers?.[0]?.url || '')\n  }, [data])\n  const handleVersionClick = (verObj) => {\n    if (verObj.apiSpecId === data.apiSpecId) {\n      setActiveType('OVERVIEW')\n      return\n    }\n\n    const matchedVersion = data.apiVersions.find((v) => v.apiSpecId === verObj.apiSpecId)\n\n    if (!matchedVersion) {\n      return\n    }\n\n    const matchedApi = apis.find((api) => api.apiSpecId === matchedVersion.apiSpecId)\n    setActiveItemData(matchedApi)\n\n    setActiveType('OVERVIEW')\n    toggleSection(\n      matchedApi.apiSpecId,\n      [\n        { type: SectionEnum.API_SECTION, setTo: true },\n        { type: SectionEnum.OVERVIEW, setTo: true },\n      ],\n      {\n        resetOthers: true,\n        filterKeys: [\n          SectionEnum.OVERVIEW,\n          SectionEnum.API_SECTION,\n          SectionEnum.ENDPOINTS_SECTION,\n          SectionEnum.TAG_SECTION,\n        ],\n      }\n    )\n  }\n\n  const handleClick = (endpoint) => {\n    setActiveItemData({\n      ...endpoint,\n      api: {\n        id: data.apiSpecId,\n        title: data.title,\n        description: data.description,\n        version: data.version,\n        ...data,\n      },\n    })\n    setActiveType('ENDPOINT')\n    const tagEntries = Object.entries(data?.tags || {})\n    const sectionIndex = tagEntries.findIndex(([, endpoints]) =>\n      endpoints.some((e) => e.id === endpoint.id)\n    )\n\n    const tagSectionIndex = Object.entries(data.tags)\n      .sort(([a], [b]) => (a === 'default' ? 1 : b === 'default' ? -1 : a.localeCompare(b)))\n      .findIndex(([_, tagData]) => tagData.find((t) => t.id === endpoint.id))\n\n    toggleSection(\n      data.apiSpecId,\n      [\n        { type: SectionEnum.API_SECTION, setTo: true },\n        { type: SectionEnum.ENDPOINTS_SECTION, setTo: true },\n        { type: SectionEnum.TAG_SECTION, setTo: true, index: tagSectionIndex },\n        { type: SectionEnum.RESOURCE, setTo: true, id: endpoint.id },\n      ],\n      { resetOthers: true, filterKeys: [SectionEnum.OVERVIEW] }\n    )\n  }\n\n  return (\n    <div className=\"api-details-page\">\n      <h2 className=\"welcome\">Welcome to</h2>\n      <h1 className=\"api-title\">{data?.title}</h1>\n      <p className=\"api-version\">\n        API Version: <span>{data?.version}</span>\n      </p>\n\n      <div className=\"custom-url-input\">\n        <label className=\"input-label\">API Base URL</label>\n        <div className=\"url-container\">\n          <div className=\"type-ddl\" onClick={() => setIsUrlDropdownOpen((prev) => !prev)}>\n            <span className=\"url-text\">{selectedUrl || '-'}</span>\n            <div className=\"icon-container\">\n              {selectedUrl.length !== 0 && (\n                <SVGLoader\n                  className=\"icon\"\n                  role=\"button\"\n                  tabIndex={0}\n                  onClick={(e) => {\n                    e.stopPropagation()\n                    copyToClipboard(selectedUrl)\n                  }}\n                  src={newCopyIcon}\n                />\n              )}\n              {selectedUrl.length !== 0 && (\n                <SVGLoader src={!isUrlDropdownOpen ? arrowDown : arrowUp} />\n              )}\n            </div>\n          </div>\n          {isUrlDropdownOpen && selectedUrl.length !== 0 && (\n            <div className=\"url-list\">\n              {data?.servers?.map((server, index) => (\n                <div\n                  key={index}\n                  className=\"url-item\"\n                  onClick={() => {\n                    setSelectedUrl(server.url)\n                    setIsUrlDropdownOpen(false)\n                  }}\n                >\n                  <input\n                    type=\"radio\"\n                    name=\"api-method\"\n                    checked={selectedUrl === server.url}\n                    readOnly\n                  />\n                  <span>{server.url}</span>\n                </div>\n              ))}\n            </div>\n          )}\n        </div>\n      </div>\n\n      <p className=\"api-desc\">{`${data.description || 'No Description'}`}</p>\n      {onProductNavigate && (\n        <div className=\"api-product-tag\">\n          Product with this API{' '}\n          <span\n            className=\"product-tag\"\n            role=\"button\"\n            tabIndex={-1}\n            onClick={() => onProductNavigate(data.associatedProduct.productId)}\n          >\n            {data.associatedProduct.name}\n          </span>\n        </div>\n      )}\n\n      <h3 className=\"section-title\">Endpoints</h3>\n\n      {Object.entries(data?.tags).map(([tag, endpoints]) => (\n        <div className=\"endpoint-group\" key={tag}>\n          <h4 className=\"tag-title\">{tag}</h4>\n          <div className=\"endpoint-list\">\n            {endpoints.map((endpoint, idx) => (\n              <div\n                className=\"endpoint-card\"\n                onClick={() => handleClick(endpoint)}\n                key={`${tag}-${idx}`}\n              >\n                <div>\n                  <div className=\"endpoint-card-header\">\n                    <span className={`method-label ${endpoint.method.toLowerCase()}`}>\n                      {endpoint.method}\n                    </span>\n                    <div className=\"title-wrapper\">\n                      <h5>\n                        {(endpoint.summary || 'Endpoint Name').slice(0, 40)}\n                        {(endpoint.summary?.length ?? 0) > 40 && '...'}\n                      </h5>\n                    </div>\n                  </div>\n                  <div className=\"endpoint-meta\">\n                    <p>{endpoint.path}</p>\n                    <p className=\"description\">{endpoint.description ?? 'No Description '}</p>\n                  </div>\n                </div>\n\n                <div className=\"endpoint-arrow\">\n                  <SVGLoader src={arrowRightGray} />\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n      ))}\n\n      {data.apiVersions?.length > 0 && (\n        <div className=\"versions-section\">\n          <h4>API Versions</h4>\n          <div className=\"version-list\">\n            {data.apiVersions.map((verObj, index) => (\n              <button\n                key={index}\n                className=\"version-btn\"\n                onClick={() => handleVersionClick(verObj)}\n              >\n                {verObj.metaData?.version || 'N/A'}\n              </button>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["OverviewPage","data","setActiveItemData","setActiveType","onProductNavigate","apis","toggleSection","useSectionToggle","selectedUrl","setSelectedUrl","useState","_b","_a","servers","url","isUrlDropdownOpen","setIsUrlDropdownOpen","useEffect","_jsxs","className","children","_jsx","jsx","title","version","onClick","prev","jsxs","length","SVGLoader","role","tabIndex","e","stopPropagation","copyToClipboard","src","newCopyIcon","arrowUp","arrowDown","_c","map","server","index","type","name","checked","readOnly","description","associatedProduct","productId","Object","entries","tags","tag","endpoints","endpoint","idx","assign","api","id","apiSpecId","findIndex","some","tagSectionIndex","sort","a","b","localeCompare","_","tagData","find","t","SectionEnum","API_SECTION","setTo","ENDPOINTS_SECTION","TAG_SECTION","RESOURCE","resetOthers","filterKeys","OVERVIEW","handleClick","method","toLowerCase","summary","slice","path","arrowRightGray","_d","apiVersions","verObj","matchedVersion","v","matchedApi","handleVersionClick","metaData"],"mappings":"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"}

package/dist/styles.css

@@ -39,6 +39,29 @@
   grid-row: 2;
   grid-column: 2;
   background-color: white;
+}.containerTitleDrawer {
+  height: 64px;
+  min-height: 64px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  background-color: #f1f2f6;
+  padding: 0 30px 0 30px;
+  width: 100%;
+}
+.containerTitleDrawer span {
+  color: #12131a;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  letter-spacing: 0em;
+}
+.containerTitleDrawer svg path {
+  stroke: #000 !important;
+}
+.containerTitleDrawer .closeIcon {
+  cursor: pointer;
 }.apiInfoForm {
   display: grid;
   padding: 1.25rem 1.875rem;
@@ -157,176 +180,6 @@
   content: "*";
   color: red;
   transform: translateX(0.125rem);
-}.livePreviewContainer .titleContainer {
-  margin-top: 1.875rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  max-width: 100%;
-  gap: 1.25rem;
-}
-.livePreviewContainer .titleContainer p.apiName {
-  font-size: 40px;
-  line-height: 30px;
-  font-weight: 500;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  word-break: break-all;
-}
-.livePreviewContainer .titleContainer .livePreviewChip {
-  background-color: #ebecf2;
-  color: #12131a;
-}
-.livePreviewContainer .description_preview {
-  word-break: break-all;
-}
-
-.requestAccordion,
-.responseAccordion {
-  background-color: #f4c5c5;
-  border: 1px solid #da3f3f;
-  border-radius: 0.3125rem !important;
-  box-shadow: none !important;
-  margin-bottom: 0 !important;
-  cursor: default !important;
-  margin-top: 0.625rem;
-}
-.requestAccordion :global(.accordion-header),
-.responseAccordion :global(.accordion-header) {
-  background-color: #f4c5c5;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 0 !important;
-  padding: 0 !important;
-  height: 4.0625rem !important;
-  border-radius: 0.3125rem !important;
-}
-.requestAccordion :global(.accordion-details.expanded),
-.responseAccordion :global(.accordion-details.expanded) {
-  border-top: 1px solid #000 !important;
-  padding: 1.25rem !important;
-  padding: 0 !important;
-  background-color: #f4c5c5;
-}
-.requestAccordion :global(.accordion-details.expanded) :global(.jsonField) div textarea,
-.responseAccordion :global(.accordion-details.expanded) :global(.jsonField) div textarea {
-  border-top-right-radius: 0;
-  border-top-left-radius: 0;
-  height: 10rem;
-}
-.requestAccordion :global(.accordion-details.expanded .textArea .containerTextArea),
-.responseAccordion :global(.accordion-details.expanded .textArea .containerTextArea) {
-  display: flex;
-}
-.requestAccordion :global(.accordion-details.expanded .textArea .containerTextArea .inputField),
-.responseAccordion :global(.accordion-details.expanded .textArea .containerTextArea .inputField) {
-  height: 100%;
-  padding: 1.25rem;
-}
-.requestAccordion .accordionContent,
-.responseAccordion .accordionContent {
-  max-width: 100%;
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;
-  padding-top: 0.9375rem;
-}
-.requestAccordion .accordionContent ol,
-.responseAccordion .accordionContent ol {
-  padding-left: 1.7rem;
-}
-.requestAccordion .accordionContent ol li,
-.responseAccordion .accordionContent ol li {
-  max-width: 100%;
-  word-break: break-all;
-}
-.requestAccordion .requestAccordionSummary,
-.requestAccordion .responseAccordionSummary,
-.responseAccordion .requestAccordionSummary,
-.responseAccordion .responseAccordionSummary {
-  width: 100%;
-  cursor: pointer;
-  display: flex;
-  justify-content: space-between;
-  font-weight: 700;
-  font-size: 1.125rem;
-  line-height: 1.5rem;
-  display: flex;
-  align-items: center;
-  margin-inline: 0.625rem 1.25rem;
-}
-.requestAccordion .responseAccordionSummary_title,
-.requestAccordion .requestAccordionSummary_title,
-.requestAccordion .responseAccordionSummary,
-.responseAccordion .responseAccordionSummary_title,
-.responseAccordion .requestAccordionSummary_title,
-.responseAccordion .responseAccordionSummary {
-  display: flex;
-  align-items: center;
-}
-.requestAccordion .responseAccordionSummary_title svg,
-.requestAccordion .requestAccordionSummary_title svg,
-.requestAccordion .responseAccordionSummary svg,
-.responseAccordion .responseAccordionSummary_title svg,
-.responseAccordion .requestAccordionSummary_title svg,
-.responseAccordion .responseAccordionSummary svg {
-  transition: rotate 0.2s ease-in-out;
-}
-.requestAccordion .responseAccordionSummary_title .expanded,
-.requestAccordion .requestAccordionSummary_title .expanded,
-.requestAccordion .responseAccordionSummary .expanded,
-.responseAccordion .responseAccordionSummary_title .expanded,
-.responseAccordion .requestAccordionSummary_title .expanded,
-.responseAccordion .responseAccordionSummary .expanded {
-  rotate: 180deg;
-}
-.requestAccordion :global(.accordion-details) :global(.textArea .inputField),
-.responseAccordion :global(.accordion-details) :global(.textArea .inputField) {
-  padding: 0;
-  border: none;
-}
-.requestAccordion :global(.accordion-header .iconContainer .dropdownIcon),
-.responseAccordion :global(.accordion-header .iconContainer .dropdownIcon) {
-  display: none !important;
-}
-.requestAccordion :global(.accordion-header),
-.responseAccordion :global(.accordion-header) {
-  cursor: default;
-}
-
-.responseAccordion .responseAccordionSummary {
-  display: flex;
-  align-items: center;
-}
-.responseAccordion .responseAccordionSummary :global(.multiSelectGroup .optionsList) {
-  width: 8rem !important;
-  min-width: 8rem !important;
-}
-.responseAccordion .responseAccordionSummary :global(.multiSelectGroup) {
-  width: 8rem;
-  margin-left: auto;
-}
-.responseAccordion .responseAccordionSummary :global(.multiSelectGroup) :global(.selectDisplay) {
-  height: 2.0625rem !important;
-  min-height: 2.0625rem !important;
-  padding: 0;
-  padding-left: 0.625rem;
-}
-.responseAccordion :global(.accordion-header) {
-  overflow: visible;
-  cursor: default;
-}
-.responseAccordion .statusCodeOptionContainer {
-  display: grid;
-  grid-template-columns: min-content min-content;
-  align-items: center;
-  gap: 0.625rem;
-}
-.responseAccordion .statusCodeOptionContainer .statusCodeOptionCircle {
-  width: 0.625rem;
-  aspect-ratio: 1/1;
-  border-radius: 100%;
 }.methodAccordion {
   border: none !important;
   box-shadow: none !important;
@@ -658,29 +511,6 @@
 }
 .methodAccordion.readOnly .methodSummaryContainer .methodExpandArrowContainer {
   background-color: #ebecf2;
-}.containerTitleDrawer {
-  height: 64px;
-  min-height: 64px;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  background-color: #f1f2f6;
-  padding: 0 30px 0 30px;
-  width: 100%;
-}
-.containerTitleDrawer span {
-  color: #12131a;
-  font-weight: 600;
-  font-size: 18px;
-  line-height: 25px;
-  letter-spacing: 0em;
-}
-.containerTitleDrawer svg path {
-  stroke: #000 !important;
-}
-.containerTitleDrawer .closeIcon {
-  cursor: pointer;
 }.tooltip-custom-wrapper {
   display: flex;
 }
@@ -894,29 +724,199 @@
 .common-dialog .confirmation-dialog-header .icon.error path {
   stroke: #da3f3f;
 }
-.common-dialog .confirmation-dialog-header .icon.error line {
-  stroke: #da3f3f;
+.common-dialog .confirmation-dialog-header .icon.error line {
+  stroke: #da3f3f;
+}
+.common-dialog .confirmation-dialog-header .icon.error line + path {
+  fill: #da3f3f;
+}
+.common-dialog .confirmation-title {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.875rem;
+  text-align: center;
+  margin-bottom: 0.625rem;
+}
+.common-dialog .confirmation-title.error-title {
+  color: #da3f3f;
+}
+.common-dialog .confirmation-title.warning-title {
+  color: #faad14;
+}
+.common-dialog .confirmation-dialog-footer {
+  display: flex;
+  gap: 1.25rem;
+  margin-top: 1.875rem;
+}.livePreviewContainer .titleContainer {
+  margin-top: 1.875rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  max-width: 100%;
+  gap: 1.25rem;
+}
+.livePreviewContainer .titleContainer p.apiName {
+  font-size: 40px;
+  line-height: 30px;
+  font-weight: 500;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-all;
+}
+.livePreviewContainer .titleContainer .livePreviewChip {
+  background-color: #ebecf2;
+  color: #12131a;
+}
+.livePreviewContainer .description_preview {
+  word-break: break-all;
+}
+
+.requestAccordion,
+.responseAccordion {
+  background-color: #f4c5c5;
+  border: 1px solid #da3f3f;
+  border-radius: 0.3125rem !important;
+  box-shadow: none !important;
+  margin-bottom: 0 !important;
+  cursor: default !important;
+  margin-top: 0.625rem;
+}
+.requestAccordion :global(.accordion-header),
+.responseAccordion :global(.accordion-header) {
+  background-color: #f4c5c5;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 !important;
+  padding: 0 !important;
+  height: 4.0625rem !important;
+  border-radius: 0.3125rem !important;
+}
+.requestAccordion :global(.accordion-details.expanded),
+.responseAccordion :global(.accordion-details.expanded) {
+  border-top: 1px solid #000 !important;
+  padding: 1.25rem !important;
+  padding: 0 !important;
+  background-color: #f4c5c5;
+}
+.requestAccordion :global(.accordion-details.expanded) :global(.jsonField) div textarea,
+.responseAccordion :global(.accordion-details.expanded) :global(.jsonField) div textarea {
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  height: 10rem;
+}
+.requestAccordion :global(.accordion-details.expanded .textArea .containerTextArea),
+.responseAccordion :global(.accordion-details.expanded .textArea .containerTextArea) {
+  display: flex;
+}
+.requestAccordion :global(.accordion-details.expanded .textArea .containerTextArea .inputField),
+.responseAccordion :global(.accordion-details.expanded .textArea .containerTextArea .inputField) {
+  height: 100%;
+  padding: 1.25rem;
+}
+.requestAccordion .accordionContent,
+.responseAccordion .accordionContent {
+  max-width: 100%;
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+  padding-top: 0.9375rem;
+}
+.requestAccordion .accordionContent ol,
+.responseAccordion .accordionContent ol {
+  padding-left: 1.7rem;
+}
+.requestAccordion .accordionContent ol li,
+.responseAccordion .accordionContent ol li {
+  max-width: 100%;
+  word-break: break-all;
+}
+.requestAccordion .requestAccordionSummary,
+.requestAccordion .responseAccordionSummary,
+.responseAccordion .requestAccordionSummary,
+.responseAccordion .responseAccordionSummary {
+  width: 100%;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  font-weight: 700;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  display: flex;
+  align-items: center;
+  margin-inline: 0.625rem 1.25rem;
+}
+.requestAccordion .responseAccordionSummary_title,
+.requestAccordion .requestAccordionSummary_title,
+.requestAccordion .responseAccordionSummary,
+.responseAccordion .responseAccordionSummary_title,
+.responseAccordion .requestAccordionSummary_title,
+.responseAccordion .responseAccordionSummary {
+  display: flex;
+  align-items: center;
+}
+.requestAccordion .responseAccordionSummary_title svg,
+.requestAccordion .requestAccordionSummary_title svg,
+.requestAccordion .responseAccordionSummary svg,
+.responseAccordion .responseAccordionSummary_title svg,
+.responseAccordion .requestAccordionSummary_title svg,
+.responseAccordion .responseAccordionSummary svg {
+  transition: rotate 0.2s ease-in-out;
+}
+.requestAccordion .responseAccordionSummary_title .expanded,
+.requestAccordion .requestAccordionSummary_title .expanded,
+.requestAccordion .responseAccordionSummary .expanded,
+.responseAccordion .responseAccordionSummary_title .expanded,
+.responseAccordion .requestAccordionSummary_title .expanded,
+.responseAccordion .responseAccordionSummary .expanded {
+  rotate: 180deg;
+}
+.requestAccordion :global(.accordion-details) :global(.textArea .inputField),
+.responseAccordion :global(.accordion-details) :global(.textArea .inputField) {
+  padding: 0;
+  border: none;
+}
+.requestAccordion :global(.accordion-header .iconContainer .dropdownIcon),
+.responseAccordion :global(.accordion-header .iconContainer .dropdownIcon) {
+  display: none !important;
+}
+.requestAccordion :global(.accordion-header),
+.responseAccordion :global(.accordion-header) {
+  cursor: default;
+}
+
+.responseAccordion .responseAccordionSummary {
+  display: flex;
+  align-items: center;
+}
+.responseAccordion .responseAccordionSummary :global(.multiSelectGroup .optionsList) {
+  width: 8rem !important;
+  min-width: 8rem !important;
 }
-.common-dialog .confirmation-dialog-header .icon.error line + path {
-  fill: #da3f3f;
+.responseAccordion .responseAccordionSummary :global(.multiSelectGroup) {
+  width: 8rem;
+  margin-left: auto;
 }
-.common-dialog .confirmation-title {
-  font-size: 1.5rem;
-  font-weight: 500;
-  line-height: 1.875rem;
-  text-align: center;
-  margin-bottom: 0.625rem;
+.responseAccordion .responseAccordionSummary :global(.multiSelectGroup) :global(.selectDisplay) {
+  height: 2.0625rem !important;
+  min-height: 2.0625rem !important;
+  padding: 0;
+  padding-left: 0.625rem;
 }
-.common-dialog .confirmation-title.error-title {
-  color: #da3f3f;
+.responseAccordion :global(.accordion-header) {
+  overflow: visible;
+  cursor: default;
 }
-.common-dialog .confirmation-title.warning-title {
-  color: #faad14;
+.responseAccordion .statusCodeOptionContainer {
+  display: grid;
+  grid-template-columns: min-content min-content;
+  align-items: center;
+  gap: 0.625rem;
 }
-.common-dialog .confirmation-dialog-footer {
-  display: flex;
-  gap: 1.25rem;
-  margin-top: 1.875rem;
+.responseAccordion .statusCodeOptionContainer .statusCodeOptionCircle {
+  width: 0.625rem;
+  aspect-ratio: 1/1;
+  border-radius: 100%;
 }.json-editor-container {
   overflow: hidden;
   border-bottom-right-radius: 0.3125rem;
@@ -1110,6 +1110,111 @@
   --alert-natural: #c4d3f1;
 }
 
+.drawerItemContainer {
+  display: flex;
+  flex-direction: column;
+}
+.drawerItemContainer .title {
+  color: #000;
+  font-weight: 600;
+  font-size: 24px;
+  line-height: 35px;
+  margin-bottom: 3px;
+  margin-top: 1.5rem;
+}
+.drawerItemContainer .text {
+  color: #000;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 25px;
+}
+.drawerItemContainer .color-green {
+  color: var(--color-success);
+}
+.drawerItemContainer .color-red {
+  color: var(--color-error);
+}:root {
+  --white: #fff;
+  --Gray-5: #f1f2f6;
+  --Gray-10: #ebecf2;
+  --Gray-20: #d8dae5;
+  --Gray-30: #babdcc;
+  --Gray-40: #9a9eb2;
+  --Gray-50: #828699;
+  --Gray-60: #696c80;
+  --Gray-100: #12131a;
+  --black: #000;
+  --primary-static: #4d75d8;
+  --primary-hover: #7c9bea;
+  --primary-active: #2c4fa4;
+  --primary-disabled: #9a9eb2;
+  --secondary-static: #40e0d0;
+  --secondary-hover: #9efcf2;
+  --secondary-active: #2fa599;
+  --error-static: #da3f3f;
+  --error-hover: #e75d5d;
+  --error-active: #bb3232;
+  --success-static: #3aaa35;
+  --success-hover: #5cda56;
+  --success-active: #2a8a25;
+  --info-static: #c6c6c6;
+  --info-hover: #e4e4e4;
+  --info-active: #979797;
+  --warning-static: #faad14;
+  --warning-hover: #f9be4a;
+  --warning-active: #db9711;
+  --action-static: #142452;
+  --action-hover: #21387d;
+  --action-active: #000000;
+  --color-info-primary: #3a6cd1;
+  --primary-font-color: #142452;
+  --placeholder-font-color: #babdcc;
+  --warning-font-color: #ce2828;
+  --alert-error: #da3f3f;
+  --alert-light-error: #f4c5c5;
+  --alert-success: #3aaa35;
+  --alert-light-success: #c4e5c2;
+  --alert-info: #8eaaf1;
+  --alert-light-info: #c4d3f1;
+  --alert-warning: #faad14;
+  --alert-light-warning: #fde6b8;
+  --border-focus: #3a6cd1;
+  --tooltip-background-color: #202f5b;
+  --text-color-primary: #142452;
+  --text-color-secondary: #ffff;
+  --text-color-neutral: #828699;
+  --text-color-tertiary: #808080;
+  --text-color-note: #242424;
+  --text-color-quaternary: #142452;
+  --text-color-disabled: #ffff;
+  --background-color-white-primary: #fff;
+  --background-color-light-primary: #8eaaf1;
+  --background-color-white-secondary: #fff;
+  --background-color-primary-dark: #142452;
+  --background-color-gray-5: #f1f2f6;
+  --background-color-gray-30: #ebecf2;
+  --background-color-tertiary-light: #2c4fa4;
+  --background-color-gray-10: #f1f2f6;
+  --background-color-gray-40: #ebecf2;
+  --background-color-light-blue: #dfe7f8;
+  --border-color-primary: #babdcc;
+  --border-color-secondary: #d8dae5;
+  --border-color-neutral: #ebecf2;
+  --border-color-tertiary: #ebecf2;
+  --border-color-gray: #ebecf2;
+  --border-color-hover: #142452;
+  --border-color-active: #3a6cd1;
+  --icon-color-main: #142452;
+  --icon-color-secondary: #000;
+  --icon-color-quaternary: #babdcc;
+  --icon-color-disabled: #9a9eb2;
+  --link-btn-primary-color: #3a6cd1;
+  --button-color-static: #4d75d8;
+  --button-color-hover: #7c9bea;
+  --button-color-active: #2c4fa4;
+  --alert-natural: #c4d3f1;
+}
+
 #EnumButton {
   display: flex;
   justify-content: center;
@@ -1297,111 +1402,6 @@ div.endBtnIcon {
 .tableSectionContainer .descArrow path,
 .tableSectionContainer .defaultSortArrow path {
   fill: var(--Gray-50);
-}:root {
-  --white: #fff;
-  --Gray-5: #f1f2f6;
-  --Gray-10: #ebecf2;
-  --Gray-20: #d8dae5;
-  --Gray-30: #babdcc;
-  --Gray-40: #9a9eb2;
-  --Gray-50: #828699;
-  --Gray-60: #696c80;
-  --Gray-100: #12131a;
-  --black: #000;
-  --primary-static: #4d75d8;
-  --primary-hover: #7c9bea;
-  --primary-active: #2c4fa4;
-  --primary-disabled: #9a9eb2;
-  --secondary-static: #40e0d0;
-  --secondary-hover: #9efcf2;
-  --secondary-active: #2fa599;
-  --error-static: #da3f3f;
-  --error-hover: #e75d5d;
-  --error-active: #bb3232;
-  --success-static: #3aaa35;
-  --success-hover: #5cda56;
-  --success-active: #2a8a25;
-  --info-static: #c6c6c6;
-  --info-hover: #e4e4e4;
-  --info-active: #979797;
-  --warning-static: #faad14;
-  --warning-hover: #f9be4a;
-  --warning-active: #db9711;
-  --action-static: #142452;
-  --action-hover: #21387d;
-  --action-active: #000000;
-  --color-info-primary: #3a6cd1;
-  --primary-font-color: #142452;
-  --placeholder-font-color: #babdcc;
-  --warning-font-color: #ce2828;
-  --alert-error: #da3f3f;
-  --alert-light-error: #f4c5c5;
-  --alert-success: #3aaa35;
-  --alert-light-success: #c4e5c2;
-  --alert-info: #8eaaf1;
-  --alert-light-info: #c4d3f1;
-  --alert-warning: #faad14;
-  --alert-light-warning: #fde6b8;
-  --border-focus: #3a6cd1;
-  --tooltip-background-color: #202f5b;
-  --text-color-primary: #142452;
-  --text-color-secondary: #ffff;
-  --text-color-neutral: #828699;
-  --text-color-tertiary: #808080;
-  --text-color-note: #242424;
-  --text-color-quaternary: #142452;
-  --text-color-disabled: #ffff;
-  --background-color-white-primary: #fff;
-  --background-color-light-primary: #8eaaf1;
-  --background-color-white-secondary: #fff;
-  --background-color-primary-dark: #142452;
-  --background-color-gray-5: #f1f2f6;
-  --background-color-gray-30: #ebecf2;
-  --background-color-tertiary-light: #2c4fa4;
-  --background-color-gray-10: #f1f2f6;
-  --background-color-gray-40: #ebecf2;
-  --background-color-light-blue: #dfe7f8;
-  --border-color-primary: #babdcc;
-  --border-color-secondary: #d8dae5;
-  --border-color-neutral: #ebecf2;
-  --border-color-tertiary: #ebecf2;
-  --border-color-gray: #ebecf2;
-  --border-color-hover: #142452;
-  --border-color-active: #3a6cd1;
-  --icon-color-main: #142452;
-  --icon-color-secondary: #000;
-  --icon-color-quaternary: #babdcc;
-  --icon-color-disabled: #9a9eb2;
-  --link-btn-primary-color: #3a6cd1;
-  --button-color-static: #4d75d8;
-  --button-color-hover: #7c9bea;
-  --button-color-active: #2c4fa4;
-  --alert-natural: #c4d3f1;
-}
-
-.drawerItemContainer {
-  display: flex;
-  flex-direction: column;
-}
-.drawerItemContainer .title {
-  color: #000;
-  font-weight: 600;
-  font-size: 24px;
-  line-height: 35px;
-  margin-bottom: 3px;
-  margin-top: 1.5rem;
-}
-.drawerItemContainer .text {
-  color: #000;
-  font-weight: 400;
-  font-size: 24px;
-  line-height: 25px;
-}
-.drawerItemContainer .color-green {
-  color: var(--color-success);
-}
-.drawerItemContainer .color-red {
-  color: var(--color-error);
 }.api-docs-api-tree {
   width: 100%;
   max-width: 12.5rem;
@@ -1969,14 +1969,14 @@ div.endBtnIcon {
 .api-details-page .custom-url-input .url-container {
   position: relative;
 }
-.api-details-page .custom-url-input .typeDdl {
+.api-details-page .custom-url-input .type-ddl {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
   background-color: #edf1fb;
-  border: 0.0625rem solid #fff;
+  border: 1px solid #fff;
   border-radius: 0.375rem;
   padding: 0.5rem 1rem;
 }
@@ -2002,7 +2002,10 @@ div.endBtnIcon {
   width: 1.75rem;
   height: 1.75rem;
 }
-.api-details-page .custom-url-input .urlList {
+.api-details-page .custom-url-input .icon-container .icon:focus {
+  outline: none;
+}
+.api-details-page .custom-url-input .url-list {
   position: absolute;
   top: 100%;
   left: 0;
@@ -2010,8 +2013,8 @@ div.endBtnIcon {
   z-index: 10;
   background: white;
   border: 1px solid #ccc;
-  border-radius: 6px;
-  max-height: 200px;
+  border-radius: 0.375rem;
+  max-height: 12.5rem;
   overflow-y: auto;
 }
 .api-details-page .custom-url-input .url-item {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digi-frontend/dgate-api-documentation",
-  "version": "1.0.92",
+  "version": "1.0.93",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "types": "dist/types/index.d.ts",

package/src/layout/docsComponents/DocsContent/OverviewPage/index.tsx

@@ -1,14 +1,10 @@
 import './style.scss'
 import SVGLoader from '../../../../components/SVGLoader/SVGLoader'
-import {
-  arrowDown,
-  arrowRightGray,
-  arrowUp,
-  newCopyIcon,
-} from '../../../../assets/icons/index'
+import { arrowDown, arrowRightGray, arrowUp, newCopyIcon } from '../../../../assets/icons/index'
 import { EndpointData, OverviewData } from 'src/layout/docsLayout'
 import { SectionEnum, useSectionToggle } from '../../../../../src/context/SectionToggleContext'
 import React, { useEffect, useState } from 'react'
+import { copyToClipboard } from '../../../../utils'
 
 export const OverviewPage = ({
   data,
@@ -108,27 +104,28 @@ export const OverviewPage = ({
       <div className="custom-url-input">
         <label className="input-label">API Base URL</label>
         <div className="url-container">
-          <div className="typeDdl" onClick={() => setIsUrlDropdownOpen((prev) => !prev)}>
+          <div className="type-ddl" onClick={() => setIsUrlDropdownOpen((prev) => !prev)}>
             <span className="url-text">{selectedUrl || '-'}</span>
             <div className="icon-container">
-              <span
-                className="icon"
-                role="button"
-                tabIndex={0}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  navigator.clipboard.writeText(selectedUrl)
-                }}
-              >
-                {selectedUrl.length !== 0 && <SVGLoader src={newCopyIcon} />}
-              </span>
+              {selectedUrl.length !== 0 && (
+                <SVGLoader
+                  className="icon"
+                  role="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    copyToClipboard(selectedUrl)
+                  }}
+                  src={newCopyIcon}
+                />
+              )}
               {selectedUrl.length !== 0 && (
                 <SVGLoader src={!isUrlDropdownOpen ? arrowDown : arrowUp} />
               )}
             </div>
           </div>
           {isUrlDropdownOpen && selectedUrl.length !== 0 && (
-            <div className="urlList">
+            <div className="url-list">
               {data?.servers?.map((server, index) => (
                 <div
                   key={index}

package/src/layout/docsComponents/DocsContent/OverviewPage/style.scss

@@ -42,17 +42,18 @@
       position: relative;
     }
 
-    .typeDdl {
+    .type-ddl {
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: space-between;
       width: 100%;
       background-color: #edf1fb;
-      border: 0.0625rem solid #fff;
+      border: 1px solid #fff;
       border-radius: 0.375rem;
       padding: 0.5rem 1rem;
     }
+
     .url-text {
       flex: 1;
       padding-right: 0.75rem;
@@ -65,18 +66,24 @@
       opacity: 0.5;
       color: #000000;
     }
+
     .icon-container {
       display: flex;
       align-items: center;
       gap: 0.75rem;
+
       .icon {
         display: inline-block;
         width: 1.75rem;
         height: 1.75rem;
+
+        &:focus {
+          outline: none;
+        }
       }
     }
 
-    .urlList {
+    .url-list {
       position: absolute;
       top: 100%;
       left: 0;
@@ -84,8 +91,8 @@
       z-index: 10;
       background: white;
       border: 1px solid #ccc;
-      border-radius: 6px;
-      max-height: 200px;
+      border-radius: 0.375rem;
+      max-height: 12.5rem;
       overflow-y: auto;
     }
 
@@ -95,6 +102,7 @@
       align-items: center;
       gap: 0.5rem;
       cursor: pointer;
+
       &:hover {
         background-color: #f5f5f5;
       }

package/variables.txt

@@ -1 +1 @@
-export APP_VERSION=1.0.91
+export APP_VERSION=1.0.92