@redocly/openapi-docs 3.0.0-alpha.10

package/lib/components/common/TextField.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { FieldProps } from 'informed';
+import type { FlattenInterpolation, ThemeProps } from 'styled-components';
+import type { DropdownOption, DropdownProps } from './Dropdown';
+export declare const getInvertedInputStyles: (panelType: 'samples' | 'try-it') => FlattenInterpolation<ThemeProps<unknown>>;
+export declare const StyledInput: import("styled-components").StyledComponent<"input", any, {
+    fullWidth?: boolean | undefined;
+    inputType?: string | undefined;
+    inputActionButton?: InputActionButtonProps | undefined;
+    panel: 'samples' | 'try-it';
+}, never>;
+export interface InputActionButtonProps {
+    label: string;
+    onClick: React.EventHandler<React.SyntheticEvent>;
+}
+export interface TextFieldExtraProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    fullWidth?: boolean;
+    errorMessage?: string;
+    inputActionButton?: InputActionButtonProps;
+    panel?: 'samples' | 'try-it';
+}
+export declare const TextField: React.ForwardRefExoticComponent<TextFieldExtraProps & React.RefAttributes<HTMLInputElement>>;
+export declare function FormTextField(props: FieldProps<string, GenericObject> & TextFieldExtraProps): JSX.Element;
+export interface FormDropdownProps extends Partial<DropdownProps> {
+    options: DropdownOption[];
+    initValue?: string;
+}
+export declare const FormDropdown: import("react").ComponentType<FieldProps<string, any> & FormDropdownProps>;

package/lib/components/common/TextField.js

@@ -0,0 +1,50 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,o){void 0===o&&(o=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,o,n)}:function(e,t,r,o){void 0===o&&(o=r),e[o]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FormDropdown=exports.FormTextField=exports.TextField=exports.StyledInput=exports.getInvertedInputStyles=void 0;const informed_1=require("informed"),styled_components_1=__importStar(require("styled-components")),react_1=__importStar(require("react")),hooks_1=require("../../hooks"),form_1=require("./form"),Dropdown_1=require("./Dropdown"),getInvertedInputStyles=e=>styled_components_1.css`
+  border: var(--input-border);
+  outline: none;
+  padding: var(--input-padding);
+  border-radius: var(--input-border-radius);
+  background-color: var(--panel-${e}-input-background-color);
+  color: var(--input-text-color);
+  font-family: var(--input-font-family);
+  font-size: var(--input-font-size);
+  line-height: var(--input-line-height);
+
+  &::placeholder {
+    opacity: 0.6;
+    color: var(--input-placeholder-text-color);
+  }
+
+  &:hover {
+    color: var(--input-hover-text-color);
+    border: var(--input-hover-border);
+  }
+
+  &:focus {
+    color: var(--input-focus-text-color);
+    border: var(--input-focus-border);
+  }
+
+  &:-webkit-autofill {
+    background-color: var(--panel-${e}-input-background-color);
+  }
+`;exports.getInvertedInputStyles=getInvertedInputStyles;const TextFieldWrapper=styled_components_1.default.div`
+  display: ${({type:e})=>"hidden"===e?"none":"inline-block"};
+  ${({fullWidth:e})=>e?"width: 100%;":""}
+`,InputWrap=styled_components_1.default.div`
+  position: relative;
+`;exports.StyledInput=styled_components_1.default.input`
+  ${({panel:e})=>(0,exports.getInvertedInputStyles)(e)}
+  ${({inputType:e,inputActionButton:t})=>"password"===e||t?"padding-right: 40px;":""};
+  ${({fullWidth:e})=>e?"width: 100%;":""}
+`;const InputActionButton=styled_components_1.default.span`
+  position: absolute;
+  right: 0;
+  line-height: normal;
+
+  font-size: 0.8em;
+  padding: calc(8px / 0.8);
+  cursor: pointer;
+  text-align: center;
+  color: var(--panel-samples-text-color);
+`;function TextFieldComponent(e,t){var{fullWidth:r,errorMessage:o,type:n,inputActionButton:l,panel:i="samples"}=e,a=__rest(e,["fullWidth","errorMessage","type","inputActionButton","panel"]);const[u,p]=(0,react_1.useState)("password"===n),d=(0,react_1.useCallback)((()=>{p(!u)}),[u]);return react_1.default.createElement(TextFieldWrapper,{fullWidth:r,type:n},react_1.default.createElement(InputWrap,null,react_1.default.createElement(exports.StyledInput,Object.assign({fullWidth:r,inputActionButton:l,type:u?"password":"text",inputType:n,ref:t,panel:i},a)),l?react_1.default.createElement(InputActionButton,{onClick:l.onClick},l.label):"password"===n?react_1.default.createElement(InputActionButton,{onClick:d},u?"show":"hide"):null),o?react_1.default.createElement(form_1.FormError,null,o):null)}function FormTextField(e){const t=(0,informed_1.useField)(Object.assign({fieldType:"text"},e)),{userProps:r,render:o,fieldState:n}=t,l=t.informed;return o(react_1.default.createElement(exports.TextField,Object.assign({},r,l,{errorMessage:n.error})))}exports.TextField=(0,react_1.forwardRef)(TextFieldComponent),exports.FormTextField=FormTextField;const FormDropdownInt=({initValue:e,options:t,fieldApi:r,fieldState:o})=>{const n=t.map(((e,t)=>({value:e.title||e.value,idx:t,origValue:e.value}))),l=n.find((t=>t.origValue===e)),[i,a]=(0,react_1.useState)(null==l?void 0:l.value);(0,hooks_1.useMount)((()=>{e&&r.setValue(e)}));const u=(0,react_1.useCallback)((e=>{r.setValue(n[e.idx].origValue),a(n[e.idx].value)}),[r,n]);return react_1.default.createElement(TextFieldWrapper,{fullWidth:!0},react_1.default.createElement(Dropdown_1.Dropdown,{fullWidth:!0,variant:"dark",value:i,options:n,onChange:u}),o.error?react_1.default.createElement(form_1.FormError,null,o.error):null)};exports.FormDropdown=(0,informed_1.asField)(FormDropdownInt);
+//# sourceMappingURL=TextField.js.map

package/lib/components/common/form.d.ts

@@ -0,0 +1,17 @@
+export declare const Table: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const GroupLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormControl: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormLabel: import("styled-components").StyledComponent<"label", any, {
+    required?: boolean | undefined;
+}, never>;
+export declare const FormError: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormWarning: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenField: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TokenValue: import("styled-components").StyledComponent<"code", any, {
+    masked?: boolean | undefined;
+    length: number;
+}, never>;
+export declare const TokenShowHide: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const TokenClear: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const FormHeader: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/common/form.js

@@ -0,0 +1,65 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,o,t,r){void 0===r&&(r=t);var n=Object.getOwnPropertyDescriptor(o,t);n&&!("get"in n?!o.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return o[t]}}),Object.defineProperty(e,r,n)}:function(e,o,t,r){void 0===r&&(r=t),e[r]=o[t]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,o){Object.defineProperty(e,"default",{enumerable:!0,value:o})}:function(e,o){e.default=o}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var o={};if(null!=e)for(var t in e)"default"!==t&&Object.prototype.hasOwnProperty.call(e,t)&&__createBinding(o,e,t);return __setModuleDefault(o,e),o};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FormHeader=exports.TokenClear=exports.TokenShowHide=exports.TokenValue=exports.TokenField=exports.FormWarning=exports.FormError=exports.FormLabel=exports.FormWrapper=exports.FormControl=exports.GroupLabel=exports.Table=void 0;const styled_components_1=__importStar(require("styled-components"));function placeholder(e,o){let t="";for(let r=0;r<e;r++)t+=o;return'"'+t+'"'}exports.Table=styled_components_1.default.div`
+  display: table;
+  width: 100%;
+`,exports.GroupLabel=styled_components_1.default.div`
+  color: #969a9a;
+  font-size: 1em;
+  font-weight: normal;
+  text-align: left;
+  position: absolute;
+`,exports.FormControl=styled_components_1.default.div`
+  width: 100%;
+  font-family: var(--code-font-family);
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`,exports.FormWrapper=styled_components_1.default.div`
+  width: 100%;
+  margin-bottom: 20px;
+`,exports.FormLabel=styled_components_1.default.label`
+  padding-bottom: 6px;
+  display: block;
+  white-space: nowrap;
+  line-height: 1em;
+
+  ${({required:e})=>e&&styled_components_1.css`
+      &:after {
+        display: inline-block;
+        content: '*';
+        margin-left: 4px;
+        color: var(--color-error-500);
+      }
+    `}
+`,exports.FormError=styled_components_1.default.div`
+  color: var(--color-error-500);
+  font-size: 0.9em;
+  & pre {
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+`,exports.FormWarning=styled_components_1.default.div`
+  color: var(--color-warning-500);
+  font-size: 0.9em;
+`,exports.TokenField=styled_components_1.default.div`
+  position: relative;
+  margin-bottom: 1em;
+  display: flex;
+`,exports.TokenValue=styled_components_1.default.code`
+  flex: 1;
+  overflow-wrap: anywhere;
+  ${({masked:e,length:o})=>e&&`\n  color: transparent;\n\n  &:before {\n    content: ${placeholder(o,"*")};\n    color: white;\n    position: absolute;\n    right: 100px;\n  }\n  `||""}
+`,exports.TokenShowHide=styled_components_1.default.span`
+  padding: 0 5px;
+  cursor: pointer;
+`,exports.TokenClear=(0,styled_components_1.default)(exports.TokenShowHide)`
+  color: var(--color-error-500);
+`,exports.FormHeader=styled_components_1.default.div`
+  font-weight: bold;
+  font-size: 1.2em;
+  margin: 1em 0;
+`;
+//# sourceMappingURL=form.js.map

package/lib/components/console/ActionPanel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { FormValues } from 'informed';
+import type { OperationModel } from '../../redoc-lib';
+export interface ActionPanelProps {
+    execute: () => void;
+    loading: boolean;
+    operation: OperationModel;
+    params: FormValues;
+    hasResponse: boolean;
+}
+export declare const ActionPanelComponent: ({ loading, operation, hasResponse, execute, params, }: ActionPanelProps) => JSX.Element;
+export declare const ActionPanel: React.NamedExoticComponent<ActionPanelProps>;

package/lib/components/console/ActionPanel.js

@@ -0,0 +1,4 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ActionPanel=exports.ActionPanelComponent=void 0;const react_1=__importStar(require("react")),styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme"),redoc_lib_1=require("../../redoc-lib"),Panel_1=require("../Panel"),Endpoint_1=require("../Endpoint"),shared_1=require("../shared"),utils_1=require("./utils");function formatPath(e,t,n){const r=t.path||{},o=t.query||{},a=Object.keys(o);let i=(0,utils_1.expandVariables)(e,r);return a.length&&(i+="?"+a.map((e=>{if(!o[e])return"";const t=(e=>n.find((t=>t.name===e&&"query"===t.in)))(e);return t?(0,redoc_lib_1.serializeParameterValue)(t,o[e]):`${e}=${encodeURIComponent(o[e])}`})).filter(Boolean).join("&")),i}const ActionPanelComponent=({loading:e,operation:t,hasResponse:n,execute:r,params:o={}})=>react_1.default.createElement(Panel_1.CodeHeader,null,react_1.default.createElement(Endpoint_1.PathWrapper,null,react_1.default.createElement(shared_1.HttpVerb,{type:t.httpVerb},t.httpVerb),react_1.default.createElement(Endpoint_1.Path,{wrap:"true"},formatPath(t.path,o,t.parameters))),react_1.default.createElement(SendButton,{"data-cy":"send-button",color:"primary",blinking:e,onClick:()=>!e&&r()},e?"Sending...":n?"Resend":"Send"));exports.ActionPanelComponent=ActionPanelComponent;const SendButton=(0,styled_components_1.default)(theme_1.Button)`
+  width: var(--panel-try-it-action-button-width);
+`;exports.ActionPanel=(0,react_1.memo)(exports.ActionPanelComponent);
+//# sourceMappingURL=ActionPanel.js.map

package/lib/components/console/AuthPanel/AuthPanel.d.ts

@@ -0,0 +1,13 @@
+import { Component } from 'react';
+import type { AuthPanelProps, AuthPanelState } from './types';
+import type { DropdownOption } from '../../common/Dropdown';
+export declare class AuthPanel extends Component<AuthPanelProps, AuthPanelState> {
+    static getDerivedStateFromProps(props: AuthPanelProps): AuthPanelState;
+    state: {
+        activeScheme: number;
+    };
+    handleSchemeChange: (option: DropdownOption & {
+        idx: number;
+    }) => void;
+    render(): JSX.Element | null;
+}

package/lib/components/console/AuthPanel/AuthPanel.js

@@ -0,0 +1,2 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,l){void 0===l&&(l=r);var a=Object.getOwnPropertyDescriptor(t,r);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,l,a)}:function(e,t,r,l){void 0===l&&(l=r),e[l]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.AuthPanel=void 0;const react_1=__importStar(require("react")),utils_1=require("../../../utils"),styled_1=require("../styled"),form_1=require("../../common/form"),TextField_1=require("../../common/TextField"),OpenIDConnect_1=require("../OpenIDConnect"),utils_2=require("../utils"),OAuth2Flow_1=require("../OAuth2Flow"),Labels_1=require("../../../redoc-lib/src/services/Labels"),OAuth2TokenInput_1=__importDefault(require("../OAuth2TokenInput"));class AuthPanel extends react_1.Component{constructor(){super(...arguments),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:{activeScheme:0}}),Object.defineProperty(this,"handleSchemeChange",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({activeScheme:e.idx}),(0,utils_1.toSessionStorage)("securityRequirementName",e.value)}})}static getDerivedStateFromProps(e){const t=e.operation.security.map((e=>e.schemes.map((e=>e.id)).join(" and "))),r=(0,utils_1.fromSessionStorage)("securityRequirementName"),l=t.findIndex((e=>e===r));return{activeScheme:l<0?0:l}}render(){const{securityDefaults:e}=this.props,{activeScheme:t}=this.state,r=this.props.operation.security,l=r.map((e=>e.schemes.map((e=>e.id)).join(" and "))).filter(Boolean).map(((e,t)=>({value:e,idx:t})));return 0===l.length?react_1.default.createElement(OpenIDConnect_1.Error,{message:"Cannot find security schema in the definition"}):react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(form_1.FormWrapper,null,l.length>1&&react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Security scheme: "),react_1.default.createElement(styled_1.TryItDropdown,{variant:"dark",fullWidth:!0,options:l,value:l[t].value,onChange:this.handleSchemeChange}))||null,r[t].schemes.map((t=>{var r,l,a,o,i,n,u;const s=(0,utils_1.escapeFormId)(t.id);if("apiKey"===t.type){const r=(0,utils_1.getSecurityDetailsOptions)(s,""),l={field:`auth.${s}`,fullWidth:!0,initialValue:(0,utils_2.fromCookie)(t)||(0,utils_1.fromSessionStorage)(`auth.${s}`)||(null==e?void 0:e[s]),initValue:(0,utils_2.fromCookie)(t)||(0,utils_1.fromSessionStorage)(`auth.${s}`)||(null==e?void 0:e[s]),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return react_1.default.createElement(form_1.FormControl,{key:s},react_1.default.createElement(form_1.FormLabel,null," ",t.name,": "),r?react_1.default.createElement(TextField_1.FormDropdown,Object.assign({},l,{options:r})):react_1.default.createElement(TextField_1.FormTextField,Object.assign({},l,{type:"password",panel:"try-it","data-cy":"apiKey-auth-password"})))}if("http"===t.type){if("basic"===t.scheme){const t=(0,utils_1.getSecurityDetailsOptions)(s,"username"),o={field:`auth.${s}.username`,fullWidth:!0,initialValue:(0,utils_1.fromSessionStorage)(`auth.${s}.username`)||(null===(r=null==e?void 0:e[s])||void 0===r?void 0:r.username),initValue:(0,utils_1.fromSessionStorage)(`auth.${s}.username`)||(null===(l=null==e?void 0:e[s])||void 0===l?void 0:l.username),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return react_1.default.createElement(react_1.Fragment,{key:s},react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," ",(0,Labels_1.l)("tryItAuthBasicUsername"),": "),t?react_1.default.createElement(TextField_1.FormDropdown,Object.assign({},o,{options:t})):react_1.default.createElement(TextField_1.FormTextField,Object.assign({},o,{panel:"try-it"}))),react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," ",(0,Labels_1.l)("tryItAuthBasicPassword"),": "),react_1.default.createElement(TextField_1.FormTextField,{type:"password","data-cy":"http-auth-password",fullWidth:!0,field:`auth.${s}.password`,initialValue:(0,utils_1.fromSessionStorage)(`auth.${s}.password`)||(null===(a=null==e?void 0:e[s])||void 0===a?void 0:a.password)||"",validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("bearer"===t.scheme){const t=(0,utils_1.getSecurityDetailsOptions)(s,""),r={field:`auth.${s}`,fullWidth:!0,initialValue:(0,utils_1.fromSessionStorage)(`auth.${s}`)||(null==e?void 0:e[s]),initValue:(0,utils_1.fromSessionStorage)(`auth.${s}`)||(null==e?void 0:e[s]),validate:utils_2.requiredValidator,validateOnBlur:!0,validateOnChange:!0};return react_1.default.createElement(react_1.Fragment,{key:s},react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Bearer Token: "),t?react_1.default.createElement(TextField_1.FormDropdown,Object.assign({},r,{options:t})):react_1.default.createElement(TextField_1.FormTextField,Object.assign({},r,{type:"password",placeholder:"(without 'Bearer')",panel:"try-it"}))))}}else{if("oauth2"===t.type&&t.flows&&t.flows.clientCredentials)return react_1.default.createElement(OAuth2TokenInput_1.default,{key:s,flow:t.flows.clientCredentials,server:this.props.activeServer,authCorsProxyUrl:this.props.authCorsProxyUrl,id:s,form:this.props.form,formApi:this.props.formApi,clientId:t.flows.clientCredentials["x-defaultClientId"]||t["x-defaultClientId"],defaultValues:null==e?void 0:e[s]});if("oauth2"===t.type&&t.flows&&t.flows.implicit)return react_1.default.createElement(OAuth2Flow_1.OAuth2Flow,{key:s,authorizationUrl:t.flows.implicit.authorizationUrl,authCorsProxyUrl:this.props.authCorsProxyUrl,scopes:Object.keys((null===(i=null===(o=null==t?void 0:t.flows)||void 0===o?void 0:o.implicit)||void 0===i?void 0:i.scopes)||{}),server:this.props.activeServer,id:s,form:this.props.form,formApi:this.props.formApi,clientId:t.flows.implicit["x-defaultClientId"]||t["x-defaultClientId"],flow:"implicit",defaultValues:null==e?void 0:e[s]});if("oauth2"===t.type&&t.flows&&t.flows.authorizationCode)return react_1.default.createElement(OAuth2Flow_1.OAuth2Flow,{key:s,authorizationUrl:t.flows.authorizationCode.authorizationUrl,tokenUrl:t.flows.authorizationCode.tokenUrl,authCorsProxyUrl:this.props.authCorsProxyUrl,scopes:Object.keys((null===(n=t.flows.authorizationCode)||void 0===n?void 0:n.scopes)||{}),server:this.props.activeServer,id:s,form:this.props.form,formApi:this.props.formApi,clientId:t.flows.authorizationCode["x-defaultClientId"]||t["x-defaultClientId"],flow:"authorizationCode",tokenEndpointAuthMethod:t.flows.authorizationCode["x-tokenEndpointAuthMethod"],usePkce:t.flows.authorizationCode["x-usePkce"],defaultValues:null==e?void 0:e[s]});if("oauth2"===t.type){let t=(0,utils_1.fromSessionStorage)(`auth.${s}.token`)||JSON.stringify(null===(u=null==e?void 0:e[s])||void 0===u?void 0:u.token);return t=t?JSON.parse(t):{},react_1.default.createElement(react_1.Fragment,{key:s},react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Access Token Type: "),react_1.default.createElement(TextField_1.FormTextField,{fullWidth:!0,field:`auth.${s}.token.token_type`,initialValue:t.token_type||"Bearer",panel:"try-it"})),react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Access Token: "),react_1.default.createElement(TextField_1.FormTextField,{type:"password",fullWidth:!0,field:`auth.${s}.token.access_token`,validate:utils_2.requiredValidator,initialValue:t.access_token,validateOnBlur:!0,validateOnChange:!0,panel:"try-it"})))}if("openIdConnect"===t.type)return react_1.default.createElement(OpenIDConnect_1.OpenIDConnect,{key:s,server:this.props.activeServer,authCorsProxyUrl:this.props.authCorsProxyUrl,id:s,form:this.props.form,formApi:this.props.formApi,scheme:t,clientId:t["x-defaultClientId"],defaultValues:null==e?void 0:e[s]})}}))),react_1.default.createElement("small",null,react_1.default.createElement("strong",null,"Note"),": Your credentials will be saved until the end of the browser session"))}}exports.AuthPanel=AuthPanel;
+//# sourceMappingURL=AuthPanel.js.map

package/lib/components/console/AuthPanel/index.d.ts

@@ -0,0 +1,2 @@
+export { AuthPanel } from './AuthPanel';
+export type { AuthPanelProps, AuthPanelState } from './types';

package/lib/components/console/AuthPanel/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.AuthPanel=void 0;var AuthPanel_1=require("./AuthPanel");Object.defineProperty(exports,"AuthPanel",{enumerable:!0,get:function(){return AuthPanel_1.AuthPanel}});
+//# sourceMappingURL=index.js.map

package/lib/components/console/AuthPanel/types.d.ts

@@ -0,0 +1,14 @@
+import type { FormApi, FormState } from 'informed';
+import type { OperationModel } from '../../../redoc-lib';
+import type { SecurityDetails } from '../../../types';
+export interface AuthPanelProps {
+    operation: OperationModel;
+    form: FormState;
+    formApi: FormApi;
+    activeServer: string;
+    authCorsProxyUrl: Maybe<string>;
+    securityDefaults?: Record<string, SecurityDetails | string>;
+}
+export interface AuthPanelState {
+    activeScheme: number;
+}

package/lib/components/console/AuthPanel/types.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});
+//# sourceMappingURL=types.js.map

package/lib/components/console/CodemirrorInput.d.ts

@@ -0,0 +1,39 @@
+import React, { PureComponent } from 'react';
+import { Controlled as CodeMirror } from 'react-codemirror2-react-17';
+import type { Editor } from 'codemirror';
+import type { FieldApi, FieldState } from 'informed';
+import type { LegacyRef } from 'react';
+import type { OpenAPISchema, Referenced } from '../../redoc-lib';
+import './codemirror-helpers';
+export interface CodemirrorInputBase {
+    forwardedRef?: LegacyRef<CodeMirror>;
+    mode?: string;
+    field: string;
+    initialValue: string;
+    validate: () => string | undefined;
+    schema?: Referenced<OpenAPISchema>;
+    id: string;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+}
+export interface CodemirrorInputProps extends CodemirrorInputBase {
+    fieldApi: FieldApi;
+    fieldState: FieldState<string>;
+    render: any;
+    userProps: any;
+    ref: any;
+}
+export declare class CodemirrorInput extends PureComponent<CodemirrorInputProps> {
+    editor: Editor;
+    _onKeyUp: (_cm: CodeMirror.Doc, event: {
+        key: string;
+    }) => void;
+    initEditor: (editor: Editor) => void;
+    refreshEditor: () => void;
+    showHintHandler: () => void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+declare const _default: React.ComponentType<CodemirrorInputBase>;
+export default _default;

package/lib/components/console/CodemirrorInput.js

@@ -0,0 +1,50 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,t,o){void 0===o&&(o=t);var i=Object.getOwnPropertyDescriptor(r,t);i&&!("get"in i?!r.__esModule:i.writable||i.configurable)||(i={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,o,i)}:function(e,r,t,o){void 0===o&&(o=t),e[o]=r[t]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,r){Object.defineProperty(e,"default",{enumerable:!0,value:r})}:function(e,r){e.default=r}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var r={};if(null!=e)for(var t in e)"default"!==t&&Object.prototype.hasOwnProperty.call(e,t)&&__createBinding(r,e,t);return __setModuleDefault(r,e),r};Object.defineProperty(exports,"__esModule",{value:!0}),exports.CodemirrorInput=void 0;const react_1=__importStar(require("react")),informed_1=require("informed"),react_codemirror2_react_17_1=require("react-codemirror2-react-17"),styled_components_1=require("styled-components");require("./codemirror-helpers");const types_1=require("../../types"),CodeMirrorStyles=styled_components_1.createGlobalStyle`
+  .cm-s-material.CodeMirror {
+    background-color: var(--panel-samples-controls-background-color)!important;
+    color: var(--text-color-inverse)!important;
+    font-family: var(--code-font-family);
+    line-height: 18px;
+    padding: 10px;
+  }
+
+  .CodeMirror-lint-mark-error {
+    background-size: 4px;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAGCAYAAAD+Bd/7AAAAVUlEQVR42mNgQAL/GRjigPg/EP8FYntkCX4gtoVKgvE/BoabcEVAhj6S5DUgfgFl/wFJ2gPxL6iuT1DF+kD2R5AYA5KRj6CS/FAMYvszIBltz4AFAAD9fz0YtLg13wAAAABJRU5ErkJggg==') !important;
+  }
+
+  .cm-s-material.CodeMirror-focused div.CodeMirror-selected {
+    background: rgba(255, 255, 255, 0.3) !important;
+  }
+
+  .cm-s-material .CodeMirror-code .cm-string.cm-property {
+    color: var(--code-block-tokens-property-string-color);
+  }
+
+  .cm-s-material .CodeMirror-code .cm-string {
+    color: var(--code-block-tokens-string-color);
+  }
+
+  .cm-s-material .CodeMirror-code .cm-atom {
+    color: var(--text-color-inverse);
+  }
+
+  div .cm-s-material .CodeMirror-matchingbracket {
+    outline: 1px solid grey;
+    text-decoration: none;
+  }
+
+  .react-codemirror2 {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    overflow: hidden;
+
+    flex: 1;
+  }
+
+  .CodeMirror {
+    flex: 1;
+    border-radius: var(--panel-border-radius);
+  }
+`;class CodemirrorInput extends react_1.PureComponent{constructor(){super(...arguments),Object.defineProperty(this,"editor",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_onKeyUp",{enumerable:!0,configurable:!0,writable:!0,value:(e,r)=>{/^[a-zA-Z0-9_":]$/.test(r.key)&&this.editor.execCommand("autocomplete")}}),Object.defineProperty(this,"initEditor",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.editor=e,e.on("keyup",this._onKeyUp)}}),Object.defineProperty(this,"refreshEditor",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.editor.refresh()}}),Object.defineProperty(this,"showHintHandler",{enumerable:!0,configurable:!0,writable:!0,value:()=>this.editor.showHint({completeSingle:!0})})}componentDidMount(){setTimeout((()=>{this.editor.refresh()}),0),document.addEventListener("click",this.refreshEditor)}componentWillUnmount(){document.removeEventListener("click",this.refreshEditor)}render(){const{value:e}=this.props.fieldState,{setValue:r,setTouched:t,setError:o}=this.props.fieldApi,{onChange:i,onBlur:n,forwardedRef:a}=this.props;return react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(CodeMirrorStyles,null),react_1.default.createElement(react_codemirror2_react_17_1.Controlled,{editorDidMount:this.initEditor,value:e||"",ref:a,onBeforeChange:(e,t,o)=>{r(o),i&&i(o)},onBlur:e=>{t(!1),n&&n(e)},options:{mode:this.props.mode||types_1.MediaTypes.JSON,theme:"material",matchBrackets:!0,autoCloseBrackets:!0,tabSize:2,foldGutter:!0,extraKeys:{"Cmd-Space":this.showHintHandler,"Ctrl-Space":this.showHintHandler},hintOptions:{id:this.props.id,completeSingle:!1,schema:this.props.schema},lint:{id:this.props.id,schema:this.props.schema,setError:o}}}))}}exports.CodemirrorInput=CodemirrorInput,exports.default=(0,informed_1.asField)(CodemirrorInput);
+//# sourceMappingURL=CodemirrorInput.js.map

package/lib/components/console/Console.d.ts

@@ -0,0 +1,47 @@
+import { Component } from 'react';
+import type { FormApi, FormState } from 'informed';
+import type { SecurityDetails } from '../../types';
+import type { ProStore } from '../../services';
+import type { OperationModel, Server } from '../../redoc-lib';
+import type { OpenApiResponseData } from './ResponsePanel';
+export declare type RequestAndResponseType = {
+    request: Record<string, unknown>;
+    response: OpenApiResponseData;
+};
+export interface ConsoleProps {
+    store: ProStore;
+    operation: OperationModel;
+    className?: string;
+    rootElement?: HTMLElement | null;
+    onClose?: () => void;
+    properties?: any;
+    securityDefaults?: Record<string, SecurityDetails | string>;
+    onResponse?: (arg: RequestAndResponseType) => void;
+}
+export interface ConsoleState {
+    form: FormState<any>;
+    shaking: boolean;
+    loading: boolean;
+    activeTab: number;
+    error?: Error & {
+        response?: OpenApiResponseData;
+    };
+    resolvedRawSpec?: GenericObject;
+    response?: OpenApiResponseData;
+    time?: number;
+    server: Server;
+}
+export declare class Console extends Component<ConsoleProps, ConsoleState> {
+    formApi: FormApi | undefined;
+    constructor(props: ConsoleProps);
+    setFormApi: (formApi: FormApi, { values, ...rest }?: FormState<import("informed").FormValues>) => void;
+    handleChange: ({ values, ...rest }: ConsoleState['form']) => void;
+    handleTabChange: (idx: number) => void;
+    handleServerChange: (server: Server) => void;
+    handleExecute: () => Promise<void>;
+    componentDidMount(): Promise<void>;
+    componentDidUpdate(prevProps: Readonly<ConsoleProps>): void;
+    render(): JSX.Element;
+    renderRequest(): JSX.Element;
+    renderResponse(): JSX.Element;
+}

package/lib/components/console/Console.js

@@ -0,0 +1,2 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,o){void 0===o&&(o=r);var s=Object.getOwnPropertyDescriptor(t,r);s&&!("get"in s?!t.__esModule:s.writable||s.configurable)||(s={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,o,s)}:function(e,t,r,o){void 0===o&&(o=r),e[o]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__decorate=this&&this.__decorate||function(e,t,r,o){var s,a=arguments.length,n=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,r,o);else for(var i=e.length-1;i>=0;i--)(s=e[i])&&(n=(a<3?s(n):a>3?s(t,r,n):s(t,r))||n);return a>3&&n&&Object.defineProperty(t,r,n),n},__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__awaiter=this&&this.__awaiter||function(e,t,r,o){return new(r||(r=Promise))((function(s,a){function n(e){try{l(o.next(e))}catch(e){a(e)}}function i(e){try{l(o.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?s(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(n,i)}l((o=o.apply(e,t||[])).next())}))},__rest=this&&this.__rest||function(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var s=0;for(o=Object.getOwnPropertySymbols(e);s<o.length;s++)t.indexOf(o[s])<0&&Object.prototype.propertyIsEnumerable.call(e,o[s])&&(r[o[s]]=e[o[s]])}return r},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Console=void 0;const informed_1=require("informed"),mobx_react_1=require("mobx-react"),swagger_client_1=__importDefault(require("swagger-client")),react_1=__importStar(require("react")),utils_1=require("../../utils"),redoc_lib_1=require("../../redoc-lib"),RenderHook_1=require("../../redoc-lib/src/components/RenderHook"),Labels_1=require("../../redoc-lib/src/services/Labels"),Panel_1=require("../Panel"),OAuth2_1=require("../../services/OAuth2"),helper_1=require("../common/FileUpload/helper"),OperationParameters_1=require("../OperationParameters"),hooks_1=require("../../hooks"),events_1=require("../../events"),utils_2=require("./utils"),AuthPanel_1=require("./AuthPanel"),RequestBody_1=require("./RequestBody/RequestBody"),ResponsePanel_1=require("./ResponsePanel"),ActionPanel_1=require("./ActionPanel"),ServersDropdown_1=require("./ServersDropdown"),TryItPanel_1=require("./TryItPanel"),ConsoleTabs_1=require("./ConsoleTabs"),styled_1=require("./styled");function normalizeUrlProtocol(e){return e.startsWith("//")?"https:"+e:e}const flexColumn={flex:1,display:"flex",flexDirection:"column"};let Console=class extends react_1.Component{constructor(e){super(e),Object.defineProperty(this,"formApi",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"setFormApi",{enumerable:!0,configurable:!0,writable:!0,value:(e,t=e.getState())=>{var{values:r}=t,o=__rest(t,["values"]);this.formApi=e,setTimeout((()=>{const e=Object.assign(Object.assign({},o),{values:Object.assign(Object.assign({},r),{query:(0,utils_2.unescapeQueryParams)(r.query||{})})});this.setState({form:e})}),0)}}),Object.defineProperty(this,"handleChange",{enumerable:!0,configurable:!0,writable:!0,value:e=>{var{values:t}=e,r=__rest(e,["values"]);const o=Object.assign(Object.assign({},r),{values:Object.assign(Object.assign({},t),{query:(0,utils_2.unescapeQueryParams)(t.query||{})})});this.setState({form:o}),(0,utils_2.updateStorage)(o),this.props.operation.setRequestValues(t)}}),Object.defineProperty(this,"handleTabChange",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({activeTab:e})}}),Object.defineProperty(this,"handleServerChange",{enumerable:!0,configurable:!0,writable:!0,value:e=>{this.setState({server:e}),this.props.operation.setActiveServer(e)}}),Object.defineProperty(this,"handleExecute",{enumerable:!0,configurable:!0,writable:!0,value:()=>__awaiter(this,void 0,void 0,(function*(){var e,t,r,o,s,a,n,i;const{store:l,operation:u,onResponse:c}=this.props,{values:d,invalid:p}=this.state.form;if(null===(e=this.formApi)||void 0===e||e.submitForm(),p)return this.setState({shaking:!0}),setTimeout((()=>this.setState({shaking:!1})),1e3),void(null===(r=null===(t=null==l?void 0:l.options.events)||void 0===t?void 0:t.tryItSent)||void 0===r||r.call(t,{eventType:events_1.AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"ValidationFailed",operationId:u.operationId,operationPath:u.path,operationHttpVerb:u.httpVerb,operationSummary:u.description}));const{servers:h,requestBody:_}=this.props.operation,v=_&&_.content&&_.content.active&&_.content.active.name||"";let f=d.body;if(/json/.test(v))try{f=JSON.parse(f)}catch(e){console.error(e)}this.setState({loading:!0});const m=this.state.resolvedRawSpec,y=(u.httpVerb||"").toLowerCase();if(!h)throw console.error("Servers are not specified in your OpenAPI file. You can't use Try It Out console without specifying servers. If you use OpenAPI 2, make sure you configured host and basepath"),new Error("Servers are not specified");const b=h.find((e=>this.state.server.url.endsWith(e.url.endsWith("/")?e.url.substring(0,e.url.length-1):e.url))),g=Date.now(),O=!!window.document.documentMode;let P,j=d.auth;if(d.auth){const e=Object.keys(d.auth)[0],t=(0,utils_1.unescapeFormId)(e);P=Object.assign(Object.assign({},m),{components:Object.assign(Object.assign({},null==m?void 0:m.components),{securitySchemes:Object.assign(Object.assign({},null==m?void 0:m.components.securitySchemes),{[t]:Object.assign(Object.assign({},null==m?void 0:m.components.securitySchemes[t]),{type:"openIdConnect"===(null==m?void 0:m.components.securitySchemes[t].type)?"oauth2":null==m?void 0:m.components.securitySchemes[t].type})})})}),j=Object.assign(Object.assign({},j),{[t]:j[e]})}else P=Object.assign({},m);P.servers=h;const q=l.options.corsProxyUrl;q&&h.length&&(P.servers=h.map((e=>Object.assign(Object.assign({},e),{url:q+normalizeUrlProtocol(e.url)}))),P.paths=Object.assign(Object.assign({},P.paths),{[u.path]:Object.assign(Object.assign({},P.paths[u.path]),{[y]:Object.assign(Object.assign({},P.paths[u.path][y]),{servers:void 0}),servers:void 0})}));const S=(null===(s=null===(o=null==_?void 0:_.content)||void 0===o?void 0:o.active)||void 0===s?void 0:s.name)||null;if(S&&f&&(0,helper_1.isFileUploadMime)(S)){const e=Object.values(f);f=e.length>1?e:e[0]}const C={userFetch:O&&require("cross-fetch").fetch,server:q?q+normalizeUrlProtocol(b.url):b.url,serverVariables:this.state.server.variables,spec:P,pathName:u.path,method:u.httpVerb,parameters:Object.assign(Object.assign(Object.assign(Object.assign({},d.path),d.query),d.header),d.cookie),securities:{authorized:j},requestBody:f,requestContentType:S,responseContentType:(null===(a=d.header)||void 0===a?void 0:a.Accept)||null,requestInterceptor:(0,utils_2.makeRequestInterceptor)(l.options,u,null==j?void 0:j.Authorization)};try{const e=yield swagger_client_1.default.execute(C),t=null==e?void 0:e.data;t instanceof Blob&&((0,helper_1.isFileUploadMime)(t.type)&&(e.fileInfo={rawData:t,fileName:(0,utils_2.getFileNameFromHeaders)(e.headers)}),e.data=yield t.text()),null==c||c({request:C,response:e}),this.setState({response:e,error:void 0})}catch(e){e&&e.response&&e.response.data instanceof Blob&&(e.response.data=yield e.response.data.text(),null==c||c({request:C,response:e.response})),this.setState({response:void 0,error:e})}finally{this.setState({loading:!1,activeTab:1,time:Date.now()-g}),null===(i=null===(n=null==l?void 0:l.options.events)||void 0===n?void 0:n.tryItSent)||void 0===i||i.call(n,{eventType:events_1.AnalyticsEventType.TryItSent,resource:"Redocly_OperationTryIt",action:"Sent",operationId:u.operationId,operationPath:u.path,operationHttpVerb:u.httpVerb,operationSummary:u.description})}}))}),this.state={form:{values:{path:(0,utils_2.getParameters)(e.operation.parameters,"path"),cookie:(0,utils_2.getParameters)(e.operation.parameters,"cookie"),header:(0,utils_2.getParameters)(e.operation.parameters,"header"),query:(0,utils_2.getParameters)(e.operation.parameters,"query")}},shaking:!1,loading:!1,activeTab:0,server:{}}}componentDidMount(){var e;return __awaiter(this,void 0,void 0,(function*(){const{store:t,operation:r}=this.props,o=yield t.dereferenceSpecForTryIt(r);this.setState({resolvedRawSpec:o}),null===(e=this.formApi)||void 0===e||e.setValues({})}))}componentDidUpdate(e){e.operation!==this.props.operation&&this.setState({response:void 0,error:void 0,activeTab:0})}render(){const{operation:e,className:t,rootElement:r}=this.props,{shaking:o,activeTab:s,form:a,response:n,loading:i,error:l}=this.state,u=!(!n&&!l);return react_1.default.createElement(ConsoleWrapHook,{shaking:o,className:t,rootElement:r},react_1.default.createElement(Panel_1.StyledCodeHeader,null,react_1.default.createElement(ConsoleTabs_1.ConsoleTabs,{active:s,hasResponse:u,onChange:this.handleTabChange}),this.props.onClose&&react_1.default.createElement(styled_1.CloseButton,{onClick:this.props.onClose}," ✕ ")),react_1.default.createElement(styled_1.ConsoleBody,{hidden:0!==s,"data-cy":"console-request-body"},this.renderRequest()),react_1.default.createElement(styled_1.ConsoleBody,{hidden:1!==s,"data-cy":"console-response-body"},this.renderResponse()),react_1.default.createElement(ActionPanel_1.ActionPanel,{hasResponse:u,params:a.values,operation:e,loading:i,execute:this.handleExecute}))}renderRequest(){var e;const{operation:t,store:r,properties:o,securityDefaults:s}=this.props,{form:a,resolvedRawSpec:n,server:i}=this.state,l=a.errors||{},u=l.path||l.cookie||l.header||l.query,c=n&&redoc_lib_1.JsonPointer.get(n,t.pointer);let d=a.values&&a.values.auth&&Object.keys(a.values.auth)[0];d&&a.values.auth[d]||(d=void 0),!d||void 0===a.values.auth[d].token&&void 0===a.values.auth[d].client_id&&void 0===a.values.auth[d].client_secret||a.values.auth[d].token&&a.values.auth[d].token.access_token||(d=void 0),d&&null!=a.values.auth[d].username&&(a.values.auth[d].username&&a.values.auth[d].password||(d=void 0));const p=t.parameters||[],h=null===(e=null==r?void 0:r.options.hooks)||void 0===e?void 0:e.ReplaceTryItSecurityPanel;return!n&&react_1.default.createElement(react_1.default.Fragment,null,"Loading...")||react_1.default.createElement(informed_1.Form,{onChange:this.handleChange,getApi:this.setFormApi,style:Object.assign(Object.assign({},flexColumn),{margin:0})},react_1.default.createElement(ServersDropdown_1.ServersDropdown,{operation:t,onChange:this.handleServerChange}),react_1.default.createElement(Panel_1.Accordion,{initialActiveIdx:t.security.length&&d?1:0},t.security.length&&this.formApi&&react_1.default.createElement(TryItPanel_1.TryItPanel,{header:(0,Labels_1.l)("tryItAuth"),"data-cy":"security-trigger",error:!d&&!!l.auth,success:!!d,renderChildrenHidden:!0},h?react_1.default.createElement(AuthPanelHook,{field:"auth",validate:utils_2.requiredValidator},(e=>react_1.default.createElement(RenderHook_1.RenderHook,{Hook:h,props:{server:i,operation:t,onChange:e,OAuth2:OAuth2_1.OAuth2}}))):react_1.default.createElement(AuthPanel_1.AuthPanel,{formApi:this.formApi,form:a,operation:t,activeServer:i.url,authCorsProxyUrl:r.options.authCorsProxyUrl,securityDefaults:s}))||null,t.requestBody&&this.formApi&&react_1.default.createElement(TryItPanel_1.TryItPanel,{header:(0,Labels_1.l)("tryItBody"),"data-cy":"body-trigger",error:!!l.body,renderChildrenHidden:!0},react_1.default.createElement(RequestBody_1.RequestBody,{validate:allowBodyErrors,formApi:this.formApi,body:t.requestBody,id:t.id,resolvedBody:null==c?void 0:c.requestBody,properties:o}))||null,p.length&&react_1.default.createElement(TryItPanel_1.TryItPanel,{header:(0,Labels_1.l)("tryItParameters"),"data-cy":"parameters-trigger",error:u,renderChildrenHidden:!0},react_1.default.createElement(OperationParameters_1.OperationParameters,{operation:t,values:a.values,errors:a.errors||{}}))||null))}renderResponse(){const{response:e,error:t,time:r}=this.state;return react_1.default.createElement(ResponsePanel_1.ResponsePanel,{response:e,error:t,time:r})}};function allowBodyErrors(){}function ConsoleWrapHook(e){const{shaking:t,className:r,children:o,rootElement:s}=e,[a]=(0,hooks_1.useDimensions)(s),n=(0,react_1.useContext)(redoc_lib_1.StoreContext);return react_1.default.createElement(styled_1.ConsoleWrap,{scrollYOffset:null==n?void 0:n.options.scrollYOffset,shaking:t,className:r,"data-cy":"console",fullWidth:null==a?void 0:a.width},o)}function AuthPanelHook(e){const{fieldApi:t,render:r,userProps:o}=(0,informed_1.useField)(Object.assign({},e)),{setValue:s}=t,{children:a}=o;return r(react_1.default.createElement(react_1.default.Fragment,null,a(s)))}Console=__decorate([mobx_react_1.observer],Console),exports.Console=Console;
+//# sourceMappingURL=Console.js.map

package/lib/components/console/ConsoleLazy.d.ts

@@ -0,0 +1,2 @@
+import type { ConsoleProps } from './Console';
+export declare function Console(props: ConsoleProps): JSX.Element;

package/lib/components/console/ConsoleLazy.js

@@ -0,0 +1,2 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,o,r){void 0===r&&(r=o);var n=Object.getOwnPropertyDescriptor(t,o);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[o]}}),Object.defineProperty(e,r,n)}:function(e,t,o,r){void 0===r&&(r=o),e[r]=t[o]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var o in e)"default"!==o&&Object.prototype.hasOwnProperty.call(e,o)&&__createBinding(t,e,o);return __setModuleDefault(t,e),t},__awaiter=this&&this.__awaiter||function(e,t,o,r){return new(o||(o=Promise))((function(n,i){function l(e){try{s(r.next(e))}catch(e){i(e)}}function a(e){try{s(r.throw(e))}catch(e){i(e)}}function s(e){var t;e.done?n(e.value):(t=e.value,t instanceof o?t:new o((function(e){e(t)}))).then(l,a)}s((r=r.apply(e,t||[])).next())}))};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Console=void 0;const react_1=__importStar(require("react")),hooks_1=require("../../hooks"),Panel_1=require("../Panel"),redoc_lib_1=require("../../redoc-lib"),styled_1=require("./styled");function Console(e){const[t,o]=(0,react_1.useState)({}),r=(0,react_1.useContext)(redoc_lib_1.StoreContext),[n]=(0,hooks_1.useDimensions)(e.rootElement);return(0,react_1.useEffect)((()=>{(()=>{__awaiter(this,void 0,void 0,(function*(){const e=yield Promise.resolve().then((()=>__importStar(require("./Console"))));o({Console:e.Console})}))})()}),[]),t.Console?react_1.default.createElement(t.Console,Object.assign({},e)):react_1.default.createElement(styled_1.ConsoleWrap,{scrollYOffset:null==r?void 0:r.options.scrollYOffset,className:e.className,fullWidth:null==n?void 0:n.width},react_1.default.createElement(Panel_1.CodeHeader,null,"Loading..."))}exports.Console=Console;
+//# sourceMappingURL=ConsoleLazy.js.map

package/lib/components/console/ConsoleTabs/ConsoleTabs.d.ts

@@ -0,0 +1,6 @@
+export interface ConsoleTabsProps {
+    onChange: (activeTab: number) => void;
+    active: number;
+    hasResponse: boolean;
+}
+export declare function ConsoleTabs({ onChange, active, hasResponse }: ConsoleTabsProps): JSX.Element;

package/lib/components/console/ConsoleTabs/ConsoleTabs.js

@@ -0,0 +1,2 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ConsoleTabs=void 0;const react_1=__importDefault(require("react")),styled_1=require("./styled");function ConsoleTabs({onChange:e,active:t,hasResponse:s}){return react_1.default.createElement(styled_1.TabsWrap,null,react_1.default.createElement(styled_1.Tab,{onClick:()=>e(0),active:0===t},s?"Edit Request":"Request"),react_1.default.createElement(styled_1.Tab,{onClick:()=>s&&e(1),active:1===t,disabled:!s}," ","Response"," "))}exports.ConsoleTabs=ConsoleTabs;
+//# sourceMappingURL=ConsoleTabs.js.map

package/lib/components/console/ConsoleTabs/index.d.ts

@@ -0,0 +1,2 @@
+export { ConsoleTabs } from './ConsoleTabs';
+export type { ConsoleTabsProps } from './ConsoleTabs';

package/lib/components/console/ConsoleTabs/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.ConsoleTabs=void 0;var ConsoleTabs_1=require("./ConsoleTabs");Object.defineProperty(exports,"ConsoleTabs",{enumerable:!0,get:function(){return ConsoleTabs_1.ConsoleTabs}});
+//# sourceMappingURL=index.js.map

package/lib/components/console/ConsoleTabs/styled.d.ts

@@ -0,0 +1,5 @@
+export declare const TabsWrap: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Tab: import("styled-components").StyledComponent<"button", any, {
+    active?: boolean | undefined;
+    disabled?: boolean | undefined;
+}, never>;

package/lib/components/console/ConsoleTabs/styled.js

@@ -0,0 +1,48 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(r,t,e,o){void 0===o&&(o=e);var a=Object.getOwnPropertyDescriptor(t,e);a&&!("get"in a?!t.__esModule:a.writable||a.configurable)||(a={enumerable:!0,get:function(){return t[e]}}),Object.defineProperty(r,o,a)}:function(r,t,e,o){void 0===o&&(o=e),r[o]=t[e]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(r,t){Object.defineProperty(r,"default",{enumerable:!0,value:t})}:function(r,t){r.default=t}),__importStar=this&&this.__importStar||function(r){if(r&&r.__esModule)return r;var t={};if(null!=r)for(var e in r)"default"!==e&&Object.prototype.hasOwnProperty.call(r,e)&&__createBinding(t,r,e);return __setModuleDefault(t,r),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Tab=exports.TabsWrap=void 0;const styled_components_1=__importStar(require("styled-components"));exports.TabsWrap=styled_components_1.default.div`
+  display: flex;
+  font-size: 12px;
+  button {
+    margin: 0;
+  }
+`,exports.Tab=styled_components_1.default.button`
+  outline: none;
+  border: none;
+  background-color: var(--panel-try-it-tabs-background-color);
+  text-align: center;
+  cursor: pointer;
+  color: var(--panel-try-it-tabs-text-color);
+  min-width: 80px;
+  min-height: 30px;
+  border-radius: var(--border-radius);
+  font-size: var(--panel-try-it-tabs-font-size);
+  font-family: var(--panel-try-it-tabs-font-family);
+  font-weight: var(--panel-try-it-tabs-font-weight);
+  padding: 0 10px;
+  border-bottom: 4px solid var(--panel-try-it-tabs-border-color);
+
+  &:first-child {
+    border-radius: var(--border-radius) 0 0 var(--border-radius);
+  }
+
+  &:last-child {
+    border-radius: 0 var(--border-radius) var(--border-radius) 0;
+  }
+
+  &:hover:not(:disabled) {
+    border-color: var(--panel-try-it-tabs-hover-border-color);
+    background-color: var(--panel-try-it-tabs-hover-background-color);
+  }
+
+  ${({active:r})=>r&&styled_components_1.css`
+        border-color: var(--panel-try-it-tabs-active-border-color);
+        background-color: var(--panel-try-it-tabs-active-background-color);
+      `||""}
+
+  ${({disabled:r})=>r&&styled_components_1.css`
+        cursor: default;
+        border-color: var(--panel-try-it-tabs-disables-border-color)
+        background-color: var(--panel-try-it-tabs-disabled-background-color);
+        color: var(--panel-try-it-tabs-disabled-text-color);
+      `||""}
+`;
+//# sourceMappingURL=styled.js.map

package/lib/components/console/OAuth2Flow.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { ChangeEvent, Context } from 'react';
+import type { FormApi, FormState } from 'informed';
+import type { InputActionButtonProps } from '../common/TextField';
+import type { SecurityDetails } from '../../types';
+import type { RedocProNormalizedOptions } from '../../services';
+export interface OAuth2FlowProps {
+    authorizationUrl: string;
+    tokenUrl?: string;
+    usePkce?: {
+        disableManualConfiguration: boolean;
+        hideClientSecretInput: boolean;
+    };
+    authCorsProxyUrl: Maybe<string>;
+    scopes: string[];
+    server: string;
+    id: string;
+    form: FormState;
+    formApi: FormApi;
+    flow: 'implicit' | 'authorizationCode';
+    tokenEndpointAuthMethod?: string | string[];
+    clientId?: string;
+    defaultValues?: SecurityDetails;
+}
+interface OAuth2FlowState {
+    error: string | null;
+    loading: boolean;
+    showPkceOptions: boolean;
+    codeVerifier?: string;
+    codeChallenge?: string;
+    validCodeChallenge?: string;
+}
+export declare class OAuth2Flow extends React.Component<OAuth2FlowProps, OAuth2FlowState> {
+    static contextType: Context<RedocProNormalizedOptions>;
+    context: RedocProNormalizedOptions;
+    state: OAuth2FlowState;
+    get values(): {
+        client_id: string;
+        client_secret: string;
+        scopes: string[];
+        token: {
+            access_token: string;
+            token_type: string;
+        };
+    };
+    get errors(): GenericObject;
+    get pkceInputActionButtonProps(): InputActionButtonProps | undefined;
+    componentDidMount(): void;
+    handleAuthorize(_authorizationUrl: string): void;
+    handleLogout(): void;
+    handleCancel(): void;
+    clearToken: () => void;
+    togglePkceOptions: () => void;
+    handleCodeVerifierChange: ({ target: { value: codeVerifier }, }: ChangeEvent<HTMLInputElement>) => Promise<void>;
+    render(): JSX.Element;
+}
+export {};

package/lib/components/console/OAuth2Flow.js

@@ -0,0 +1,14 @@
+"use strict";var __awaiter=this&&this.__awaiter||function(e,t,l,r){return new(l||(l=Promise))((function(i,a){function o(e){try{s(r.next(e))}catch(e){a(e)}}function n(e){try{s(r.throw(e))}catch(e){a(e)}}function s(e){var t;e.done?i(e.value):(t=e.value,t instanceof l?t:new l((function(e){e(t)}))).then(o,n)}s((r=r.apply(e,t||[])).next())}))},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.OAuth2Flow=void 0;const react_1=__importDefault(require("react")),styled_components_1=__importDefault(require("styled-components")),theme_1=require("@redocly/theme"),redoc_lib_1=require("../../redoc-lib"),LinearProgress_1=require("../common/LinearProgress"),form_1=require("../common/form"),TextField_1=require("../common/TextField"),Checkbox_1=require("../common/Checkbox"),OAuth2_1=require("../../services/OAuth2"),utils_1=require("../../utils"),utils_2=require("../../services/utils"),utils_3=require("./utils"),Scope_1=__importDefault(require("./Scope"));function requiredValidator(e){if(!e)return"Field is required"}class OAuth2Flow extends react_1.default.Component{constructor(){super(...arguments),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:{error:null,loading:!1,showPkceOptions:!1}}),Object.defineProperty(this,"clearToken",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.props.formApi.setValue(`auth.${this.props.id}.token`,"")}}),Object.defineProperty(this,"togglePkceOptions",{enumerable:!0,configurable:!0,writable:!0,value:()=>{this.setState((({showPkceOptions:e})=>({showPkceOptions:!e})))}}),Object.defineProperty(this,"handleCodeVerifierChange",{enumerable:!0,configurable:!0,writable:!0,value:({target:{value:e}})=>__awaiter(this,void 0,void 0,(function*(){const t=yield(0,OAuth2_1.deriveCodeChallenge)(e);this.setState({codeVerifier:e,validCodeChallenge:t})}))})}get values(){var e,t;return(null===(t=null===(e=this.props.form.values)||void 0===e?void 0:e.auth)||void 0===t?void 0:t[this.props.id])||{}}get errors(){var e,t;return(null===(t=null===(e=this.props.form.errors)||void 0===e?void 0:e.auth)||void 0===t?void 0:t[this.props.id])||{}}get pkceInputActionButtonProps(){if(void 0!==this.state.codeVerifier&&this.state.codeChallenge!==this.state.validCodeChallenge)return{label:"sync",onClick:()=>{this.state.codeVerifier&&this.setState({codeChallenge:this.state.validCodeChallenge})}}}componentDidMount(){if(this.props.usePkce){const e=(0,utils_2.randString)(43);(0,OAuth2_1.deriveCodeChallenge)(e).then((t=>{this.setState({codeVerifier:e,codeChallenge:t,validCodeChallenge:t})}))}}handleAuthorize(e){if(!e)return;this.props.formApi.validate();const{flow:t,usePkce:l,id:r,tokenUrl:i,authCorsProxyUrl:a,tokenEndpointAuthMethod:o}=this.props;if(!(0,utils_2.isEmptyObject)(this.errors))return;this.setState({loading:!0,error:null});const n=a?a+(0,utils_3.normalizeUrlProtocol)(e):e,s=a&&i?a+(0,utils_3.normalizeUrlProtocol)(i):i,u=this.props.formApi.getValue(`auth.${r}.scopes`),c={authorizationUrl:n.startsWith("http")?n:this.props.server+n,clientId:this.values.client_id,scopes:u,redirectUri:this.context.oAuth2RedirectURI,routingBasePath:this.context.routingBasePath,successCallback:e=>{this.props.formApi.setValue(`auth.${this.props.id}.token`,e),this.setState({loading:!1,error:null})},errorCallback:e=>{this.setState({loading:!1,error:(null==e?void 0:e.message)||"Failed to retrieve the access token"})}};"implicit"===t&&OAuth2_1.OAuth2.authorizeImplicit(c),(0,utils_3.validateTokenEndpointMethod)(o)?"authorizationCode"===t&&OAuth2_1.OAuth2.authorizeAuthorizationCode(Object.assign(Object.assign(Object.assign({},c),{tokenUrl:(null==s?void 0:s.startsWith("http"))?s:this.props.server+s,clientSecret:this.values.client_secret,extraHeaders:(0,utils_3.getOAuth2TokenEndpointAuthHeader)({authMethod:o,clientId:this.values.client_id,clientSecret:this.values.client_secret})}),l&&{codeVerifier:this.state.codeVerifier,codeChallenge:this.state.codeChallenge})):console.log(`Unsupported token endpoint auth method: ${o}`)}handleLogout(){this.clearToken(),this.setState({error:null})}handleCancel(){this.setState({loading:!1,error:null}),OAuth2_1.OAuth2.clearRedirectData(this.props.flow)}render(){const{error:e,loading:t}=this.state,{id:l,scopes:r,authorizationUrl:i,flow:a,usePkce:o,defaultValues:n}=this.props;if(!i)return react_1.default.createElement(form_1.FormError,null,"No flow info");let s=(0,utils_1.fromSessionStorage)(`auth.${l}.token`)||JSON.stringify(null==n?void 0:n.token);s=s?JSON.parse(s):"";const u=(0,utils_1.getSecurityDetailsOptions)(l,"client_id"),c={field:`auth.${l}.client_id`,fullWidth:!0,initialValue:(0,utils_1.fromSessionStorage)(`auth.${l}.client_id`)||this.props.clientId||(null==n?void 0:n.client_id),initValue:(0,utils_1.fromSessionStorage)(`auth.${l}.client_id`)||this.props.clientId||(null==n?void 0:n.client_id),placeholder:"Your OAuth2 app Client ID",validate:requiredValidator,validateOnBlur:!0,validateOnChange:!0};return react_1.default.createElement("div",null,react_1.default.createElement(form_1.FormWrapper,null,react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Client ID: "),u?react_1.default.createElement(TextField_1.FormDropdown,Object.assign({},c,{options:u})):react_1.default.createElement(TextField_1.FormTextField,Object.assign({},c,{"data-cy":"client-id-input",panel:"try-it"}))),"authorizationCode"===a&&react_1.default.createElement(react_1.default.Fragment,null,(!(null==o?void 0:o.hideClientSecretInput)||!o)&&react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null,"Client Secret:"),react_1.default.createElement(TextField_1.FormTextField,{type:"password",fullWidth:!0,field:`auth.${l}.client_secret`,initialValue:(0,utils_1.fromSessionStorage)(`auth.${l}.client_secret`)||(null==n?void 0:n.client_secret),validateOnBlur:!0,validateOnChange:!0,panel:"try-it","data-cy":"client-secret-input"})),o&&!o.disableManualConfiguration&&react_1.default.createElement(PkceOptionsWrapper,null,react_1.default.createElement(Checkbox_1.Checkbox,{id:"pkce-opitons-toggle",label:"Configure PKCE manually",checked:this.state.showPkceOptions,onChange:this.togglePkceOptions,"data-cy":"pkce-options-toggle"}),this.state.showPkceOptions&&react_1.default.createElement(PkceDetails,null,react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null,"Code Verifier"),react_1.default.createElement(TextField_1.TextField,{fullWidth:!0,value:this.state.codeVerifier,onChange:this.handleCodeVerifierChange,panel:"try-it","data-cy":"code-verifier-input"})),react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null,"Code Challenge"),react_1.default.createElement(TextField_1.TextField,{fullWidth:!0,value:this.state.codeChallenge,onChange:({target:{value:e}})=>{this.setState({codeChallenge:e})},inputActionButton:this.pkceInputActionButtonProps,panel:"try-it","data-cy":"code-challenge-input"}))))),react_1.default.createElement(TextField_1.FormTextField,{fullWidth:!0,field:`auth.${l}.token`,type:"hidden",initialValue:s,panel:"try-it"}),react_1.default.createElement(Scope_1.default,{id:l,scopes:r}),this.values.token&&this.values.token.access_token?react_1.default.createElement(form_1.FormControl,null,react_1.default.createElement(form_1.FormLabel,null," Access Token: "),react_1.default.createElement(TextField_1.TextField,{disabled:!0,type:"password",fullWidth:!0,value:this.values.token.access_token,panel:"try-it"})):null),react_1.default.createElement(ButtonsWrapper,null,this.values.token&&this.values.token.access_token?react_1.default.createElement(theme_1.Button,{fullWidth:!0,onClick:()=>{this.handleLogout()}},"Log out"):t?react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(theme_1.Button,{fullWidth:!0,onClick:()=>{this.handleCancel()}},"Cancel"),react_1.default.createElement(LinearProgress_1.LinearProgress,null)):react_1.default.createElement(theme_1.Button,{fullWidth:!0,disabled:!(0,utils_2.isEmptyObject)(this.errors),onClick:()=>{this.handleAuthorize(i)}},"Authorize")),t||e||!this.values.token||!this.values.token.access_token&&react_1.default.createElement(form_1.FormWrapper,null,react_1.default.createElement(form_1.FormControl,null,t?react_1.default.createElement(form_1.FormWarning,null,"Please, finish your authorization flow or cancel authorization."):e?react_1.default.createElement(react_1.default.Fragment,null,react_1.default.createElement(OriginalErrorMessage,null,react_1.default.createElement(form_1.FormError,null,e))):this.values.token&&this.values.token.access_token?null:react_1.default.createElement(form_1.FormWarning,null," No Access Token. Please, Authorize. "))))}}exports.OAuth2Flow=OAuth2Flow,Object.defineProperty(OAuth2Flow,"contextType",{enumerable:!0,configurable:!0,writable:!0,value:redoc_lib_1.OptionsContext});const OriginalErrorMessage=styled_components_1.default.div`
+  font-family: var(--font-family-monospaced);
+  margin-top: 10px;
+  line-height: 1;
+  padding-left: 10px;
+  border-left: 1px solid gray;
+`,ButtonsWrapper=styled_components_1.default.div`
+  margin-bottom: 15px;
+`,PkceOptionsWrapper=styled_components_1.default.div`
+  padding: 8px 0 20px;
+`,PkceDetails=styled_components_1.default.div`
+  padding: 4px 0;
+`;
+//# sourceMappingURL=OAuth2Flow.js.map