@redocly/reference-docs 2.43.4 → 2.43.6

package/lib-browser/components/common/CheckboxList.d.ts

@@ -0,0 +1,25 @@
+import type { ChangeEvent } from 'react';
+import { Component } from 'react';
+import type { FieldContext } from 'informed';
+declare type FieldValue = string[];
+interface CheckboxListComponentState {
+    collapsed: boolean;
+}
+export interface CheckboxListComponentProps {
+    items: string[];
+    maxDisplayedItems?: number;
+    validateOnChange?: boolean;
+    showControls?: boolean;
+    trimItemsLength?: boolean;
+}
+export declare class CheckboxListComponent extends Component<FieldContext<FieldValue> & CheckboxListComponentProps, CheckboxListComponentState> {
+    state: CheckboxListComponentState;
+    onCheckBoxClick(event: ChangeEvent<Omit<HTMLInputElement, 'type'>>): void;
+    private isFieldChecked;
+    private toggle;
+    private selectAll;
+    private clearAll;
+    render(): JSX.Element;
+}
+export declare const CheckboxList: import("react").ComponentType<import("informed").FieldProps<FieldValue, any> & CheckboxListComponentProps>;
+export {};

package/lib-browser/components/common/CheckboxList.js

@@ -0,0 +1,7 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Component}from"react";import{asField}from"informed";import{styled}from"../../redoc-lib";import{SampleControls,SamplesControlButton}from"../../redoc-lib/src/common-elements";import{FormError}from"./form";import{Checkbox}from"./Checkbox";const DEFAULT_MAX_ITEMS=11;export class CheckboxListComponent extends Component{constructor(){super(...arguments),Object.defineProperty(this,"state",{enumerable:!0,configurable:!0,writable:!0,value:{collapsed:!0}})}onCheckBoxClick(e){const t=e.target.value,o=e.target.checked;this.props.fieldApi.setTouched(!0);const s=this.props.fieldApi.getValue()||[];let l;if(o)l=[...s,t];else{const e=s.indexOf(t);l=[...s.slice(0,e),...s.slice(e+1)]}this.props.fieldApi.setValue(l)}isFieldChecked(e){return this.props.fieldApi.getValue().includes(e)}toggle(){this.setState({collapsed:!this.state.collapsed})}selectAll(){this.props.fieldApi.setValue(this.props.items)}clearAll(){this.props.fieldApi.setValue([])}render(){const{items:e,fieldApi:t,validateOnChange:o,maxDisplayedItems:s,showControls:l,trimItemsLength:i}=this.props,{collapsed:r}=this.state,n=t.getError(),c=s||11,a=i&&this.state.collapsed?e.slice(0,c):e;return _jsxs("div",{children:[l?_jsxs(ControlButtonsWrapper,{children:[_jsx(SamplesControlButton,Object.assign({onClick:()=>{this.selectAll()}},{children:"Select all"}),void 0),_jsx(SamplesControlButton,Object.assign({onClick:()=>{this.clearAll()}},{children:"Clear"}),void 0)]},void 0):null,_jsxs("div",{children:[a.map((e=>_jsx(Checkbox,{fullWidth:!0,id:e,value:e,checked:this.isFieldChecked(e),label:e,onChange:e=>{this.onCheckBoxClick(e),o&&t.validate()}},e))),e.length>c&&i?_jsx(ToggleButton,Object.assign({onClick:()=>{this.toggle()}},{children:r?"Show all":"Collapse"}),void 0):null]},void 0),n?_jsx(FormError,{children:n},void 0):""]},void 0)}}export const CheckboxList=asField(CheckboxListComponent);const ControlButtonsWrapper=styled(SampleControls)`
+  opacity: 1;
+  text-align: left;
+`,ToggleButton=styled(SamplesControlButton)`
+  float: right;
+`;
+//# sourceMappingURL=CheckboxList.js.map

package/lib-browser/components/common/ClearButton/ClearButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { ClearButtonProps } from './types';
+export declare const ClearButton: import("react").NamedExoticComponent<ClearButtonProps>;

package/lib-browser/components/common/ClearButton/ClearButton.js

@@ -0,0 +1,2 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{memo}from"react";const ClearButtonComponent=({className:t,style:e,handleClear:o})=>_jsx("button",Object.assign({className:t,style:e,onClick:o},{children:"✕"}),void 0);export const ClearButton=memo(ClearButtonComponent);
+//# sourceMappingURL=ClearButton.js.map

package/lib-browser/components/common/ClearButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './styled';
+export * from './types';

package/lib-browser/components/common/ClearButton/index.js

@@ -0,0 +1,2 @@
+export*from"./styled";export*from"./types";
+//# sourceMappingURL=index.js.map

package/lib-browser/components/common/ClearButton/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ClearButton: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("./types").ClearButtonProps>, any, {}, never>;

package/lib-browser/components/common/ClearButton/styled.js

@@ -0,0 +1,16 @@
+import styled from"styled-components";import{ClearButton as ClearButtonComponent}from"./ClearButton";export const ClearButton=styled(ClearButtonComponent)`
+  z-index: 1;
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #89949f;
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    color: #fff;
+  }
+`;
+//# sourceMappingURL=styled.js.map

package/lib-browser/components/common/ClearButton/types.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+export interface ClearButtonProps {
+    className?: string;
+    style?: React.CSSProperties;
+    handleClear?: () => void;
+}

package/lib-browser/components/common/ClearButton/types.js

@@ -0,0 +1,2 @@
+export{};
+//# sourceMappingURL=types.js.map

package/lib-browser/components/common/Dropdown/Dropdown.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DropdownProps } from './types';
+export declare const Dropdown: import("react").NamedExoticComponent<DropdownProps>;

package/lib-browser/components/common/Dropdown/Dropdown.js

@@ -0,0 +1,16 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{memo}from"react";import styled from"../../../redoc-lib/src/styled-components";import{ClearButton}from"../ClearButton";const ArrowSvg=({className:e,style:o})=>_jsx("svg",Object.assign({className:e,style:o,xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"},{children:_jsx("polyline",{points:"6 9 12 15 18 9"},void 0)}),void 0),ArrowIcon=styled(ArrowSvg)`
+  position: absolute;
+  pointer-events: none;
+  z-index: 1;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  right: 8px;
+  margin: auto;
+  text-align: center;
+  polyline {
+    color: ${e=>"dark"===e.variant&&"white"};
+  }
+`,DropdownComponent=e=>{const{options:o,onChange:t,handleClear:n,clearable:s,placeholder:r,value:a="",className:i,variant:l="light"}=e;return _jsxs("div",Object.assign({className:i+" dropdown-wrapper"},{children:[_jsx(ArrowIcon,{variant:l},void 0),s&&(null==a?void 0:a.length)>0&&_jsx(ClearButton,{handleClear:n},void 0),_jsxs("select",Object.assign({onChange:e=>{const{selectedIndex:n}=e.target;t(o[r||!a?n-1:n])},value:a,className:"dropdown-select"},{children:[r&&_jsx("option",Object.assign({disabled:!0,hidden:!0,value:r},{children:r}),void 0),!a&&!r&&_jsx("option",{disabled:!0},void 0),o.map((({idx:e,value:o,title:t},n)=>_jsx("option",Object.assign({value:o,className:"dropdown-option"},{children:t||o}),e||o+n)))]}),void 0),_jsx("label",{children:a},void 0)]}),void 0)};export const Dropdown=memo(DropdownComponent);
+//# sourceMappingURL=Dropdown.js.map

package/lib-browser/components/common/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+export * from './styled';
+export * from './types';

package/lib-browser/components/common/Dropdown/index.js

@@ -0,0 +1,2 @@
+export*from"./styled";export*from"./types";
+//# sourceMappingURL=index.js.map

package/lib-browser/components/common/Dropdown/styled.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+export declare const Dropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("./types").DropdownProps>, any, {
+    dense?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    variant?: "light" | "dark" | undefined;
+}, never>;
+export declare const SimpleDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("./types").DropdownProps>, any, {
+    dense?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    variant?: "light" | "dark" | undefined;
+}, never>;
+export declare const CollapsingDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("./types").DropdownProps>, any, {
+    dense?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    variant?: "light" | "dark" | undefined;
+} & {
+    active?: boolean | undefined;
+}, never>;
+export declare const VersionDropdown: import("styled-components").StyledComponent<import("react").NamedExoticComponent<import("./types").DropdownProps>, any, {
+    dense?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+    variant?: "light" | "dark" | undefined;
+}, never>;

package/lib-browser/components/common/Dropdown/styled.js

@@ -0,0 +1,125 @@
+import styled,{css}from"styled-components";import{Dropdown as DropdownComponent}from"./Dropdown";const darkDropdownStyle=css`
+  background-color: ${({theme:o})=>o.rightPanel.panelControlsBackgroundColor};
+  border-color: ${({theme:o})=>o.rightPanel.panelControlsBackgroundColor};
+  color: ${({theme:o})=>o.colors.text.light};
+
+  &,
+  &:hover,
+  &:focus-within {
+    border: none;
+    box-shadow: none;
+  }
+`;export const Dropdown=styled(DropdownComponent)`
+  box-sizing: border-box;
+  outline: none;
+  display: inline-block;
+  border-radius: ${({theme:o})=>o.shape.borderRadius};
+  vertical-align: bottom;
+  position: relative;
+  width: ${({fullWidth:o})=>o?"100%":"auto"};
+  cursor: pointer;
+  text-transform: none;
+
+  label {
+    box-sizing: border-box;
+    min-width: 90px;
+    height: ${({dense:o})=>o?"26px":"36px"};
+    outline: none;
+    display: inline-block;
+    color: ${({theme:o})=>o.colors.text.primary};
+    border-radius: ${({theme:o})=>o.shape.borderRadius};
+    padding: ${({dense:o})=>o?"2px 24px 2px 8px":"8px 26px 8px 10px"};
+    vertical-align: bottom;
+    width: ${({fullWidth:o})=>o?"100%":"auto"};
+    text-transform: none;
+    line-height: inherit;
+    font-size: 14px;
+    font-family: inherit;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    &,
+    &:hover,
+    &:focus-within {
+      border: 1px solid ${({theme:o})=>o.colors.border.light};
+      box-shadow: none;
+    }
+
+    ${({variant:o})=>"dark"===o?darkDropdownStyle:""};
+  }
+
+  .dropdown-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    border: none;
+    appearance: none;
+    cursor: pointer;
+
+    color: ${({theme:o})=>o.colors.text.primary};
+    line-height: inherit;
+    font-size: 14px;
+    font-family: inherit;
+    padding: ${({dense:o})=>o?"2px 24px 2px 8px":"8px 26px 8px 10px"};
+    ${({variant:o})=>"dark"===o?darkDropdownStyle:""};
+  }
+`;export const SimpleDropdown=styled(Dropdown)`
+  svg {
+    top: 60%;
+    transform: translateY(-60%);
+  }
+  label {
+    padding: 0 26px 0 4px;
+    border: none;
+    background: transparent;
+    font-size: 14px;
+    font-weight: 400;
+    appearance: none;
+    height: auto;
+
+    &:hover,
+    &:focus-within {
+      border: none;
+      box-shadow: none;
+    }
+  }
+`;export const CollapsingDropdown=styled(Dropdown)`
+  svg {
+    top: 60%;
+    transform: translateY(-60%);
+  }
+  label {
+    ${darkDropdownStyle};
+
+    height: 40px;
+    border-radius: 0 ${({theme:o})=>o.shape.borderRadius} 0 0;
+    margin: 0 0 -4px;
+    transition: none;
+    min-width: auto;
+    background: ${({theme:o,active:e})=>e?o.colors.border.dark:"none"};
+    & {
+      border-bottom: 4px solid
+        ${({active:o,theme:e})=>o?e.colors.accent.main:"transparent"};
+
+      &[open],
+      &:focus-within,
+      &:hover {
+        background: ${({theme:o})=>o.colors.border.dark};
+        border-bottom: 4px solid
+          ${({active:o,theme:e})=>o?e.colors.accent.main:"transparent"};
+      }
+    }
+  }
+`;export const VersionDropdown=styled(Dropdown)`
+  width: 90%;
+  label {
+    width: 100%;
+    font-weight: 600;
+    color: ${({theme:o})=>o.colors.text.primary};
+  }
+`;
+//# sourceMappingURL=styled.js.map

package/lib-browser/components/common/Dropdown/types.d.ts

@@ -0,0 +1,26 @@
+import type React from 'react';
+export interface DropdownOption {
+    idx?: number;
+    value: string;
+    title?: string;
+    serverUrl?: string;
+    label?: string;
+}
+export interface DropdownProps {
+    options: DropdownOption[];
+    onChange: (option: DropdownOption) => void;
+    handleClear?: () => void;
+    clearable?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    placeholder?: string;
+    value?: string;
+    dense?: boolean;
+    fullWidth?: boolean;
+    variant?: 'dark' | 'light';
+}
+export interface ArrowIconProps {
+    className?: string;
+    variant?: 'light' | 'dark';
+    style?: React.CSSProperties;
+}

package/lib-browser/components/common/Dropdown/types.js

@@ -0,0 +1,2 @@
+export{};
+//# sourceMappingURL=types.js.map

package/lib-browser/components/common/FileUpload/FileUpload.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { SchemaModel } from '../../../redoc-lib/src/services/models/Schema';
+import type { UploadFileType } from '../../../models';
+export interface FileUploadProps {
+    schema: SchemaModel | GenericObject;
+    contentName: string;
+    onChange(key: string, file: UploadFileType): void;
+    name: string;
+}
+export declare const FileUpload: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange"> & FileUploadProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib-browser/components/common/FileUpload/FileUpload.js

@@ -0,0 +1,2 @@
+import{__rest}from"tslib";import{jsx as _jsx}from"react/jsx-runtime";import{forwardRef}from"react";import{useField}from"informed";import{getFileToUpload}from"./helper";export const FileUpload=forwardRef(((e,a)=>{var t=__rest(e,[]);const{schema:o,contentName:r,onChange:i,name:l}=t,m=__rest(t,["schema","contentName","onChange","name"]),{render:n}=useField(Object.assign({field:l},m));return n(_jsx("input",{"data-cy":"file-upload-input",type:"file",id:t.id,className:t.className,name:t.name,onChange:async e=>{const a=await getFileToUpload(e.target.files,o);i(r,a)},multiple:t.multiple,accept:t.accept,ref:a},void 0))}));FileUpload.displayName="FileUpload";
+//# sourceMappingURL=FileUpload.js.map

package/lib-browser/components/common/FileUpload/helper.d.ts

@@ -0,0 +1,12 @@
+import type { SchemaModel } from '../../../redoc-lib';
+import type { UploadFileType } from '../../../models';
+/**
+ * Convert request body mime-type to accept value for file upload input in browser
+ */
+export declare function mimeTypeToAccept(mimeType: string): string | undefined;
+export declare function isFileUploadMime(mimeType: string): boolean;
+export declare function isMultipartFileUploadProperty(schema: SchemaModel): boolean;
+export declare function isRootFileUpload(schema: SchemaModel | GenericObject, mimeType: string): boolean;
+export declare function fileToBase64(file: File): Promise<string>;
+export declare function getIsBase64({ format, contentEncoding, contentMediaType, }: SchemaModel | GenericObject): boolean;
+export declare function getFileToUpload(rawFiles: FileList, schema: SchemaModel | GenericObject): Promise<UploadFileType>;

package/lib-browser/components/common/FileUpload/helper.js

@@ -0,0 +1,2 @@
+import{DefinitionTypes,FileUploadFormats}from"../../../models";const FILE_UPLOAD_FORMATS=Object.values(FileUploadFormats),FILE_UPLOAD_MIME_TYPES=["application/octet-stream","application/pdf","application/gzip","application/zip"],COMMON_FILE_UPLOAD_PREFIXES=["image/","audio/","video/"];export function mimeTypeToAccept(e){if(COMMON_FILE_UPLOAD_PREFIXES.some((t=>e.startsWith(t))))return e}export function isFileUploadMime(e){return!!FILE_UPLOAD_MIME_TYPES.includes(e)||COMMON_FILE_UPLOAD_PREFIXES.some((t=>e.startsWith(t)))}export function isMultipartFileUploadProperty(e){const t="array"===e.type?e.items:e;if(!t||!t.type||"any"===(null==t?void 0:t.type))return!0;const i=t.contentMediaType||"",o=t.format||t.contentEncoding||(isFileUploadMime(i)?"binary":"");return t.type===DefinitionTypes.STRING&&FILE_UPLOAD_FORMATS.includes(o)}export function isRootFileUpload(e,t){if(!e||!e.type||"any"===e.type)return isFileUploadMime(t);const i=e.format||e.contentEncoding||"";return e.type===DefinitionTypes.STRING&&FILE_UPLOAD_FORMATS.includes(i)}export function fileToBase64(e){return new Promise(((t,i)=>{const o=new FileReader;o.onload=()=>{const e=o.result.replace(/data:.*\/.*;base64,/g,"");t(e)},o.onerror=()=>i(o.error),o.readAsDataURL(e)}))}export function getIsBase64({format:e,contentEncoding:t,contentMediaType:i}){return[e,t,i].includes(FileUploadFormats.BASE64)}export async function getFileToUpload(e,t){const i=Object.values(e);let o=1===i.length?i[0]:i;return t.type===DefinitionTypes.STRING&&getIsBase64(t)?o=await fileToBase64(i[0]):t.type===DefinitionTypes.ARRAY&&t.items&&(o=getIsBase64(t.items)?await Promise.all(i.map((async e=>await fileToBase64(e)))):i),o}
+//# sourceMappingURL=helper.js.map

package/lib-browser/components/common/FileUpload/index.d.ts

@@ -0,0 +1 @@
+export * from './FileUpload';

package/lib-browser/components/common/FileUpload/index.js

@@ -0,0 +1,2 @@
+export*from"./FileUpload";
+//# sourceMappingURL=index.js.map

package/lib-browser/components/common/LinearProgress.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LinearProgress: () => JSX.Element;

package/lib-browser/components/common/LinearProgress.js

@@ -0,0 +1,104 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{styled}from"../../redoc-lib";const LoadingLine=styled.div`
+  position: relative;
+  height: 4px;
+  display: block;
+  width: 100%;
+  background-color: ${({theme:e})=>e.colors.accent.light};
+  border-radius: ${({theme:e})=>e.shape.borderRadius};
+  background-clip: padding-box;
+  margin: 0.5rem 0 1rem 0;
+  overflow: hidden;
+
+  .determinate {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    background-color: ${({theme:e})=>e.colors.accent.main};
+    transition: width 0.3s linear;
+  }
+  .indeterminate {
+    background-color: ${({theme:e})=>e.colors.accent.main};
+  }
+  .indeterminate:before {
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  }
+  .indeterminate:after {
+    content: '';
+    position: absolute;
+    background-color: inherit;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    will-change: left, right;
+    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
+    -webkit-animation-delay: 1.15s;
+    animation-delay: 1.15s;
+  }
+
+  @-webkit-keyframes indeterminate {
+    0% {
+      left: -35%;
+      right: 100%;
+    }
+    60% {
+      left: 100%;
+      right: -90%;
+    }
+    100% {
+      left: 100%;
+      right: -90%;
+    }
+  }
+  @keyframes indeterminate {
+    0% {
+      left: -35%;
+      right: 100%;
+    }
+    60% {
+      left: 100%;
+      right: -90%;
+    }
+    100% {
+      left: 100%;
+      right: -90%;
+    }
+  }
+  @-webkit-keyframes indeterminate-short {
+    0% {
+      left: -200%;
+      right: 100%;
+    }
+    60% {
+      left: 107%;
+      right: -8%;
+    }
+    100% {
+      left: 107%;
+      right: -8%;
+    }
+  }
+  @keyframes indeterminate-short {
+    0% {
+      left: -200%;
+      right: 100%;
+    }
+    60% {
+      left: 107%;
+      right: -8%;
+    }
+    100% {
+      left: 107%;
+      right: -8%;
+    }
+  }
+`;export const LinearProgress=()=>_jsx(LoadingLine,{children:_jsx("div",{className:"indeterminate"},void 0)},void 0);
+//# sourceMappingURL=LinearProgress.js.map

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

@@ -0,0 +1,25 @@
+import type { FieldProps } from 'informed';
+import type { EventHandler, InputHTMLAttributes, SyntheticEvent } from 'react';
+import type { DropdownOption, DropdownProps } from './Dropdown';
+export declare const invertedInputStyles: import("styled-components").FlattenInterpolation<import("styled-components").ThemeProps<import("../../services/extendTheme").ProTheme>>;
+export declare const StyledInput: import("styled-components").StyledComponent<"input", import("../../services/extendTheme").ProTheme, {
+    fullWidth?: boolean | undefined;
+    inputType?: string | undefined;
+    inputActionButton?: InputActionButtonProps | undefined;
+}, never>;
+export interface InputActionButtonProps {
+    label: string;
+    onClick: EventHandler<SyntheticEvent>;
+}
+export interface TextFieldExtraProps extends InputHTMLAttributes<HTMLInputElement> {
+    fullWidth?: boolean;
+    errorMessage?: string;
+    inputActionButton?: InputActionButtonProps;
+}
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldExtraProps & import("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-browser/components/common/TextField.js

@@ -0,0 +1,37 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{asField,useField}from"informed";import{forwardRef,useCallback,useState}from"react";import styled,{css,mediaCSS}from"../../redoc-lib/src/styled-components";import{useMount}from"../../hooks";import{FormError}from"./form";import{Dropdown}from"./Dropdown";export const invertedInputStyles=css`
+  border: none;
+  outline: none;
+  padding: 8px;
+  border-radius: ${({theme:e})=>e.shape.borderRadius};
+  background-color: ${({theme:e})=>e.rightPanel.panelControlsBackgroundColor};
+  ${({theme:e})=>mediaCSS({color:e.colors.text.light,fontFamily:e.typography.code.fontFamily,fontSize:e.typography.fontSize})}
+
+  &::placeholder {
+    opacity: 0.6;
+    color: ${({theme:e})=>e.colors.text.light};
+  }
+
+  &:-webkit-autofill {
+    background-color: ${({theme:e})=>e.rightPanel.panelBackgroundColor};
+  }
+`;const TextFieldWrapper=styled.div`
+  display: ${({type:e})=>"hidden"===e?"none":"inline-block"};
+  ${({fullWidth:e})=>e?"width: 100%;":""}
+`,InputWrap=styled.div`
+  position: relative;
+`;export const StyledInput=styled.input`
+  ${invertedInputStyles}
+  ${({inputType:e,inputActionButton:t})=>"password"===e||t?"padding-right: 40px;":""};
+  ${({fullWidth:e})=>e?"width: 100%;":""}
+`;const InputActionButton=styled.span`
+  position: absolute;
+  right: 0;
+  line-height: normal;
+
+  font-size: 0.8em;
+  padding: calc(8px / 0.8);
+  cursor: pointer;
+  text-align: center;
+  ${({theme:e})=>mediaCSS({color:e.rightPanel.textColor})}
+`;function TextFieldComponent(e,t){const{fullWidth:o,errorMessage:r,type:i}=e,[n,l]=useState("password"===i),s=useCallback((()=>{l(!n)}),[n]);return _jsxs(TextFieldWrapper,Object.assign({fullWidth:o,type:i},{children:[_jsxs(InputWrap,{children:[_jsx(StyledInput,Object.assign({},e,{type:n?"password":"text",inputType:i,ref:t}),void 0),e.inputActionButton?_jsx(InputActionButton,Object.assign({onClick:e.inputActionButton.onClick},{children:e.inputActionButton.label}),void 0):"password"===i?_jsx(InputActionButton,Object.assign({onClick:s},{children:n?"show":"hide"}),void 0):null]},void 0),r?_jsx(FormError,{children:r},void 0):null]}),void 0)}export const TextField=forwardRef(TextFieldComponent);export function FormTextField(e){const t=useField(Object.assign({fieldType:"text"},e)),{userProps:o,render:r,fieldState:i}=t,n=t.informed;return r(_jsx(TextField,Object.assign({},o,n,{errorMessage:i.error}),void 0))}const FormDropdownInt=({initValue:e,options:t,fieldApi:o,fieldState:r})=>{const i=t.map(((e,t)=>({value:e.title||e.value,idx:t,origValue:e.value}))),n=i.find((t=>t.origValue===e)),[l,s]=useState(null==n?void 0:n.value);useMount((()=>{e&&o.setValue(e)}));const d=useCallback((e=>{o.setValue(i[e.idx].origValue),s(i[e.idx].value)}),[o,i]);return _jsxs(TextFieldWrapper,Object.assign({fullWidth:!0},{children:[_jsx(Dropdown,{fullWidth:!0,variant:"dark",value:l,options:i,onChange:d},void 0),r.error?_jsx(FormError,{children:r.error},void 0):null]}),void 0)};export const FormDropdown=asField(FormDropdownInt);
+//# sourceMappingURL=TextField.js.map

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

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

package/lib-browser/components/common/form.js

@@ -0,0 +1,65 @@
+import styled,{css}from"../../redoc-lib/src/styled-components";export const Table=styled.div`
+  display: table;
+  width: 100%;
+`;export const GroupLabel=styled.div`
+  color: #969a9a;
+  font-size: 1em;
+  font-weight: normal;
+  text-align: left;
+  position: absolute;
+`;export const FormControl=styled.div`
+  width: 100%;
+  font-family: ${({theme:o})=>o.typography.code.fontFamily};
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;export const FormWrapper=styled.div`
+  width: 100%;
+  margin-bottom: 20px;
+`;export const FormLabel=styled.label`
+  padding-bottom: 6px;
+  display: block;
+  white-space: nowrap;
+  line-height: 1em;
+
+  ${({required:o,theme:e})=>o&&css`
+      &:after {
+        display: inline-block;
+        content: '*';
+        margin-left: 4px;
+        color: ${e.colors.error.main};
+      }
+    `}
+`;export const FormError=styled.div`
+  color: ${({theme:o})=>o.colors.error.main};
+  font-size: 0.9em;
+  & pre {
+    word-break: break-word;
+    white-space: pre-wrap;
+  }
+`;export const FormWarning=styled.div`
+  color: ${({theme:o})=>o.colors.warning.main};
+  font-size: 0.9em;
+`;function placeholder(o,e){let t="";for(let r=0;r<o;r++)t+=e;return'"'+t+'"'}export const TokenField=styled.div`
+  position: relative;
+  margin-bottom: 1em;
+  display: flex;
+`;export const TokenValue=styled.code`
+  flex: 1;
+  overflow-wrap: anywhere;
+  ${({masked:o,length:e})=>o&&`\n  color: transparent;\n\n  &:before {\n    content: ${placeholder(e,"*")};\n    color: white;\n    position: absolute;\n    right: 100px;\n  }\n  `||""}
+`;export const TokenShowHide=styled.span`
+  padding: 0 5px;
+  cursor: pointer;
+`;export const TokenClear=styled(TokenShowHide)`
+  color: ${({theme:o})=>o.colors.error.main};
+`;export const FormHeader=styled.div`
+  font-weight: bold;
+  font-size: 1.2em;
+  margin: 1em 0;
+`;
+//# sourceMappingURL=form.js.map

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

@@ -0,0 +1,12 @@
+/// <reference types="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: import("react").NamedExoticComponent<ActionPanelProps>;

package/lib-browser/components/console/ActionPanel.js

@@ -0,0 +1,6 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{memo}from"react";import{serializeParameterValue,styled}from"../../redoc-lib";import{CodeHeader}from"../Panel";import{Path,PathWrapper}from"../Endpoint";import{HttpVerb,Button}from"../shared";import{expandVariables}from"./utils";function formatPath(e,t,n){const r=t.path||{},o=t.query||{},a=Object.keys(o);let i=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?serializeParameterValue(t,o[e]):`${e}=${encodeURIComponent(o[e])}`})).filter(Boolean).join("&")),i}export const ActionPanelComponent=({loading:e,operation:t,hasResponse:n,execute:r,params:o={}})=>_jsxs(TryItHeader,{children:[_jsxs(PathWrapper,{children:[_jsx(HttpVerb,Object.assign({type:t.httpVerb},{children:t.httpVerb}),void 0),_jsx(Path,Object.assign({wrap:"true"},{children:formatPath(t.path,o,t.parameters)}),void 0)]},void 0),_jsx(SendButton,Object.assign({"data-cy":"send-button",color:"primary",blinking:e,onClick:()=>!e&&r()},{children:e?"Sending...":n?"Resend":"Send"}),void 0)]},void 0);const SendButton=styled(Button)`
+  width: ${({theme:e})=>e.components.tryItSendButton.fullWidth?"100%":"auto"};
+`,TryItHeader=styled(CodeHeader)`
+  ${({theme:e})=>e.components.tryItSendButton.fullWidth?"\n    flex-direction: column;\n    align-items: flex-start;":""};
+`;export const ActionPanel=memo(ActionPanelComponent);
+//# sourceMappingURL=ActionPanel.js.map