"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[9638],{"./src/components/SecretInput/SecretInput.story.tsx":function(L,x,r){r.r(x),r.d(x,{basic:function(){return N},default:function(){return X},secretIsConfigured:function(){return U}});var n=r("../../node_modules/react/index.js"),s=r("./src/components/Button/Button.tsx"),g=r("./src/components/Input/Input.tsx"),i=r("./src/components/Layout/Stack/Stack.tsx"),d=Object.defineProperty,E=Object.defineProperties,y=Object.getOwnPropertyDescriptors,O=Object.getOwnPropertySymbols,C=Object.prototype.hasOwnProperty,w=Object.prototype.propertyIsEnumerable,I=(a,e,l)=>e in a?d(a,e,{enumerable:!0,configurable:!0,writable:!0,value:l}):a[e]=l,v=(a,e)=>{for(var l in e||(e={}))C.call(e,l)&&I(a,l,e[l]);if(O)for(var l of O(e))w.call(e,l)&&I(a,l,e[l]);return a},A=(a,e)=>E(a,y(e)),o=(a,e)=>{var l={};for(var R in a)C.call(a,R)&&e.indexOf(R)<0&&(l[R]=a[R]);if(a!=null&&O)for(var R of O(a))e.indexOf(R)<0&&w.call(a,R)&&(l[R]=a[R]);return l};const p="configured",m="Reset",h=a=>{var e=a,{isConfigured:l,onReset:R}=e,$=o(e,["isConfigured","onReset"]);return n.createElement(i.B,null,!l&&n.createElement(g.p,A(v({},$),{type:"password"})),l&&n.createElement(n.Fragment,null,n.createElement(g.p,A(v({},$),{type:"text",disabled:!0,value:p})),n.createElement(s.$n,{onClick:R,variant:"secondary"},m)))};try{h.displayName="SecretInput",h.__docgenInfo={description:"",displayName:"SecretInput",props:{width:{defaultValue:null,description:"Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.",name:"width",required:!1,type:{name:"number"}},prefix:{defaultValue:null,description:"Show an icon as a prefix in the input",name:"prefix",required:!1,type:{name:"ReactNode"}},invalid:{defaultValue:null,description:"Show an invalid state around the input",name:"invalid",required:!1,type:{name:"boolean"}},suffix:{defaultValue:null,description:"Show an icon as a suffix in the input",name:"suffix",required:!1,type:{name:"ReactNode"}},loading:{defaultValue:null,description:"Show a loading indicator as a suffix in the input",name:"loading",required:!1,type:{name:"boolean"}},addonBefore:{defaultValue:null,description:"Add a component as an addon before the input",name:"addonBefore",required:!1,type:{name:"ReactNode"}},addonAfter:{defaultValue:null,description:"Add a component as an addon after the input",name:"addonAfter",required:!1,type:{name:"ReactNode"}},isConfigured:{defaultValue:null,description:"TRUE if the secret was already configured. (It is needed as often the backend doesn't send back the actual secret, only the information that it was configured)",name:"isConfigured",required:!0,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/SecretInput/SecretInput.tsx#SecretInput"]={docgenInfo:h.__docgenInfo,name:"SecretInput",path:"src/components/SecretInput/SecretInput.tsx#SecretInput"})}catch{}var c=r("../../node_modules/react/jsx-runtime.js"),b=r("../../node_modules/@mdx-js/react/lib/index.js"),t=r("../../node_modules/@storybook/blocks/dist/index.mjs");function u(a){const e=Object.assign({h1:"h1",p:"p",strong:"strong",em:"em",ul:"ul",li:"li",h3:"h3",pre:"pre",code:"code"},(0,b.RP)(),a.components);return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(e.h1,{id:"secret-input",children:"Secret Input"}),`
`,(0,c.jsxs)(e.p,{children:["Used for secret/password input. It has 2 states: ",(0,c.jsx)(e.strong,{children:(0,c.jsx)(e.em,{children:"configured"})})," and ",(0,c.jsx)(e.strong,{children:(0,c.jsx)(e.em,{children:"not configured"})}),"."]}),`
`,(0,c.jsxs)(e.ul,{children:[`
`,(0,c.jsx)(e.li,{children:`If configured it will disable the input and add a reset button that will
clear the input and make it accessible.`}),`
`,(0,c.jsx)(e.li,{children:"In non configured state it behaves like a normal password input."}),`
`]}),`
`,(0,c.jsx)(e.p,{children:`This is used for passwords or anything that is encrypted on the server and is
later returned encrypted to the user (like datasource passwords).`}),`
`,(0,c.jsx)(e.h3,{id:"usage",children:"Usage"}),`
`,(0,c.jsx)(e.pre,{children:(0,c.jsx)(e.code,{className:"language-tsx",children:`import {SecretInput} from '@grafana/ui';

<SecretInput
  value={...}
  isConfigured={...}
  onChange={...}
  onReset={...}
/>
`})}),`
`,(0,c.jsx)(t.ov,{of:h})]})}function _(a={}){const{wrapper:e}=Object.assign({},(0,b.RP)(),a.components);return e?(0,c.jsx)(e,Object.assign({},a,{children:(0,c.jsx)(u,a)})):u(a)}var S=_,f=Object.defineProperty,D=Object.defineProperties,B=Object.getOwnPropertyDescriptors,T=Object.getOwnPropertySymbols,V=Object.prototype.hasOwnProperty,K=Object.prototype.propertyIsEnumerable,W=(a,e,l)=>e in a?f(a,e,{enumerable:!0,configurable:!0,writable:!0,value:l}):a[e]=l,j=(a,e)=>{for(var l in e||(e={}))V.call(e,l)&&W(a,l,e[l]);if(T)for(var l of T(e))K.call(e,l)&&W(a,l,e[l]);return a},M=(a,e)=>D(a,B(e)),k,Y,H,F,P,z,X={title:"Forms/SecretInput",component:h,parameters:{docs:{page:S},controls:{exclude:["prefix","suffix","addonBefore","addonAfter","type","disabled","invalid","loading","before","after"]}},args:{width:50,placeholder:"Enter your secret..."},argTypes:{width:{control:{type:"range",min:10,max:200,step:10}}}};const G=a=>{const[e,l]=(0,n.useState)("");return n.createElement(h,{width:a.width,value:e,isConfigured:a.isConfigured,placeholder:a.placeholder,onChange:R=>l(R.target.value.trim()),onReset:()=>l("")})},N=G.bind({});N.args={isConfigured:!1};const U=G.bind({});U.args={isConfigured:!0},N.parameters=M(j({},N.parameters),{docs:M(j({},(k=N.parameters)==null?void 0:k.docs),{source:j({originalSource:`args => {
  const [secret, setSecret] = useState('');
  return <SecretInput width={args.width} value={secret} isConfigured={args.isConfigured} placeholder={args.placeholder} onChange={(event: ChangeEvent<HTMLInputElement>) => setSecret(event.target.value.trim())} onReset={() => setSecret('')} />;
}`},(H=(Y=N.parameters)==null?void 0:Y.docs)==null?void 0:H.source)})}),U.parameters=M(j({},U.parameters),{docs:M(j({},(F=U.parameters)==null?void 0:F.docs),{source:j({originalSource:`args => {
  const [secret, setSecret] = useState('');
  return <SecretInput width={args.width} value={secret} isConfigured={args.isConfigured} placeholder={args.placeholder} onChange={(event: ChangeEvent<HTMLInputElement>) => setSecret(event.target.value.trim())} onReset={() => setSecret('')} />;
}`},(z=(P=U.parameters)==null?void 0:P.docs)==null?void 0:z.source)})})},"../grafana-data/src/types/dataFrame.ts":function(L,x,r){r.d(x,{Bc:function(){return s},LE:function(){return g},PU:function(){return n}});var n=(d=>(d.time="time",d.number="number",d.string="string",d.boolean="boolean",d.trace="trace",d.geo="geo",d.enum="enum",d.other="other",d.frame="frame",d.nestedFrames="nestedFrames",d))(n||{});const s="Value",g="Time",i="Metric"},"./src/components/Input/Input.tsx":function(L,x,r){r.d(x,{n:function(){return b},p:function(){return c}});var n=r("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),s=r("../../node_modules/react/index.js"),g=r("../../node_modules/react-use/lib/useMeasure.js"),i=r("./src/themes/ThemeContext.tsx"),d=r("./src/themes/stylesFactory.ts"),E=r("./src/components/Forms/commonStyles.ts"),y=r("./src/components/Spinner/Spinner.tsx"),O=Object.defineProperty,C=Object.defineProperties,w=Object.getOwnPropertyDescriptors,I=Object.getOwnPropertySymbols,v=Object.prototype.hasOwnProperty,A=Object.prototype.propertyIsEnumerable,o=(t,u,_)=>u in t?O(t,u,{enumerable:!0,configurable:!0,writable:!0,value:_}):t[u]=_,p=(t,u)=>{for(var _ in u||(u={}))v.call(u,_)&&o(t,_,u[_]);if(I)for(var _ of I(u))A.call(u,_)&&o(t,_,u[_]);return t},m=(t,u)=>C(t,w(u)),h=(t,u)=>{var _={};for(var S in t)v.call(t,S)&&u.indexOf(S)<0&&(_[S]=t[S]);if(t!=null&&I)for(var S of I(t))u.indexOf(S)<0&&A.call(t,S)&&(_[S]=t[S]);return _};const c=s.forwardRef((t,u)=>{const _=t,{className:S,addonAfter:f,addonBefore:D,prefix:B,suffix:T,invalid:V,loading:K,width:W=0}=_,j=h(_,["className","addonAfter","addonBefore","prefix","suffix","invalid","loading","width"]),[M,k]=(0,g.A)(),[Y,H]=(0,g.A)(),F=(0,i.$j)(),P=b({theme:F,invalid:!!V,width:W});return s.createElement("div",{className:(0,n.cx)(P.wrapper,S),"data-testid":"input-wrapper"},!!D&&s.createElement("div",{className:P.addon},D),s.createElement("div",{className:P.inputWrapper},B&&s.createElement("div",{className:P.prefix,ref:M},B),s.createElement("input",m(p({ref:u,className:P.input},j),{style:{paddingLeft:B?k.width+12:void 0,paddingRight:T||K?H.width+12:void 0}})),(T||K)&&s.createElement("div",{className:P.suffix,ref:Y},K&&s.createElement(y.y,{className:P.loadingIndicator,inline:!0}),T)),!!f&&s.createElement("div",{className:P.addon},f))});c.displayName="Input";const b=(0,d.N)(({theme:t,invalid:u=!1,width:_})=>{const S="28px",f=(0,n.AH)({position:"absolute",top:0,zIndex:1,display:"flex",alignItems:"center",justifyContent:"center",flexGrow:0,flexShrink:0,fontSize:t.typography.size.md,height:"100%",minWidth:S,color:t.colors.text.secondary});return{wrapper:(0,n.cx)((0,n.AH)({label:"input-wrapper",display:"flex",width:_?t.spacing(_):"100%",height:t.spacing(t.components.height.md),borderRadius:t.shape.radius.default,"&:hover":{"> .prefix, .suffix, .input":{borderColor:u?t.colors.error.border:t.colors.primary.border},"input[type='number']":{appearance:"textfield"},"input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button":{WebkitAppearance:"inner-spin-button !important",opacity:1}}})),inputWrapper:(0,n.AH)({label:"input-inputWrapper",position:"relative",flexGrow:1,zIndex:1,"&:not(:first-child):last-child":{"> input":{borderLeft:"none",borderTopLeftRadius:0,borderBottomLeftRadius:0}},"&:first-child:not(:last-child)":{"> input":{borderRight:"none",borderTopRightRadius:0,borderBottomRightRadius:0}},"&:not(:first-child):not(:last-child)":{"> input":{borderRight:"none",borderTopRightRadius:0,borderBottomRightRadius:0,borderTopLeftRadius:0,borderBottomLeftRadius:0}},input:{"&:not(:first-child)":{paddingLeft:S},"&:not(:last-child)":{paddingRight:S},"&[readonly]":{cursor:"default"}}}),input:(0,n.cx)((0,E.gm)(t),(0,E.Xb)(t,u),(0,n.AH)({label:"input-input",position:"relative",zIndex:0,flexGrow:1,borderRadius:t.shape.radius.default,height:"100%",width:"100%"})),inputDisabled:(0,n.AH)({backgroundColor:t.colors.action.disabledBackground,color:t.colors.action.disabledText,border:`1px solid ${t.colors.action.disabledBackground}`,"&:focus":{boxShadow:"none"}}),addon:(0,n.AH)({label:"input-addon",display:"flex",justifyContent:"center",alignItems:"center",flexGrow:0,flexShrink:0,position:"relative","&:first-child":{borderTopRightRadius:0,borderBottomRightRadius:0,"> :last-child":{borderTopRightRadius:0,borderBottomRightRadius:0}},"&:last-child":{borderTopLeftRadius:0,borderBottomLeftRadius:0,"> :first-child":{borderTopLeftRadius:0,borderBottomLeftRadius:0}},"> *:focus":{zIndex:2}}),prefix:(0,n.cx)(f,(0,n.AH)({label:"input-prefix",paddingLeft:t.spacing(1),paddingRight:t.spacing(.5),borderRight:"none",borderTopRightRadius:0,borderBottomRightRadius:0})),suffix:(0,n.cx)(f,(0,n.AH)({label:"input-suffix",paddingLeft:t.spacing(1),paddingRight:t.spacing(1),marginBottom:"-2px",borderLeft:"none",borderTopLeftRadius:0,borderBottomLeftRadius:0,right:0})),loadingIndicator:(0,n.AH)({"& + *":{marginLeft:t.spacing(.5)}})}});try{c.displayName="Input",c.__docgenInfo={description:"",displayName:"Input",props:{width:{defaultValue:null,description:"Sets the width to a multiple of 8px. Should only be used with inline forms. Setting width of the container is preferred in other cases.",name:"width",required:!1,type:{name:"number"}},prefix:{defaultValue:null,description:"Show an icon as a prefix in the input",name:"prefix",required:!1,type:{name:"ReactNode"}},invalid:{defaultValue:null,description:"Show an invalid state around the input",name:"invalid",required:!1,type:{name:"boolean"}},suffix:{defaultValue:null,description:"Show an icon as a suffix in the input",name:"suffix",required:!1,type:{name:"ReactNode"}},loading:{defaultValue:null,description:"Show a loading indicator as a suffix in the input",name:"loading",required:!1,type:{name:"boolean"}},addonBefore:{defaultValue:null,description:"Add a component as an addon before the input",name:"addonBefore",required:!1,type:{name:"ReactNode"}},addonAfter:{defaultValue:null,description:"Add a component as an addon after the input",name:"addonAfter",required:!1,type:{name:"ReactNode"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Input/Input.tsx#Input"]={docgenInfo:c.__docgenInfo,name:"Input",path:"src/components/Input/Input.tsx#Input"})}catch{}},"./src/components/Layout/Stack/Stack.tsx":function(L,x,r){r.d(x,{B:function(){return v}});var n=r("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),s=r("../../node_modules/react/index.js"),g=r("./src/themes/ThemeContext.tsx"),i=r("./src/components/Layout/utils/responsiveness.tsx"),d=Object.defineProperty,E=Object.getOwnPropertySymbols,y=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable,C=(o,p,m)=>p in o?d(o,p,{enumerable:!0,configurable:!0,writable:!0,value:m}):o[p]=m,w=(o,p)=>{for(var m in p||(p={}))y.call(p,m)&&C(o,m,p[m]);if(E)for(var m of E(p))O.call(p,m)&&C(o,m,p[m]);return o},I=(o,p)=>{var m={};for(var h in o)y.call(o,h)&&p.indexOf(h)<0&&(m[h]=o[h]);if(o!=null&&E)for(var h of E(o))p.indexOf(h)<0&&O.call(o,h)&&(m[h]=o[h]);return m};const v=s.forwardRef((o,p)=>{const m=o,{gap:h=1,alignItems:c,justifyContent:b,direction:t,wrap:u,children:_,grow:S,shrink:f,basis:D,flex:B}=m,T=I(m,["gap","alignItems","justifyContent","direction","wrap","children","grow","shrink","basis","flex"]),V=(0,g.of)(A,h,c,b,t,u,S,f,D,B);return s.createElement("div",w({ref:p,className:V.flex},T),_)});v.displayName="Stack";const A=(o,p,m,h,c,b,t,u,_,S)=>({flex:(0,n.AH)([{display:"flex"},(0,i.Y)(o,c,f=>({flexDirection:f})),(0,i.Y)(o,b,f=>({flexWrap:f})),(0,i.Y)(o,m,f=>({alignItems:f})),(0,i.Y)(o,h,f=>({justifyContent:f})),(0,i.Y)(o,p,f=>({gap:o.spacing(f)})),(0,i.Y)(o,t,f=>({flexGrow:f})),(0,i.Y)(o,u,f=>({flexShrink:f})),(0,i.Y)(o,_,f=>({flexBasis:f})),(0,i.Y)(o,S,f=>({flex:f}))])});try{v.displayName="Stack",v.__docgenInfo={description:"",displayName:"Stack",props:{gap:{defaultValue:null,description:"",name:"gap",required:!1,type:{name:"ResponsiveProp<ThemeSpacingTokens>"}},alignItems:{defaultValue:null,description:"",name:"alignItems",required:!1,type:{name:"ResponsiveProp<AlignItems>"}},justifyContent:{defaultValue:null,description:"",name:"justifyContent",required:!1,type:{name:"ResponsiveProp<JustifyContent>"}},direction:{defaultValue:null,description:"",name:"direction",required:!1,type:{name:"ResponsiveProp<Direction>"}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"ResponsiveProp<Wrap>"}},grow:{defaultValue:null,description:"Sets the property `flex-grow`",name:"grow",required:!1,type:{name:"ResponsiveProp<number>"}},shrink:{defaultValue:null,description:"Sets the property `flex-shrink`",name:"shrink",required:!1,type:{name:"ResponsiveProp<number>"}},basis:{defaultValue:null,description:"Sets the property `flex-basis`",name:"basis",required:!1,type:{name:"ResponsiveProp<FlexBasis>"}},flex:{defaultValue:null,description:"Sets the property `flex`",name:"flex",required:!1,type:{name:"ResponsiveProp<Flex>"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/Stack/Stack.tsx#Stack"]={docgenInfo:v.__docgenInfo,name:"Stack",path:"src/components/Layout/Stack/Stack.tsx#Stack"})}catch{}},"./src/components/Layout/utils/responsiveness.tsx":function(L,x,r){r.d(x,{Y:function(){return s}});function n(g,i,d,E){const y=i[E];if(y!=null)return{[g.breakpoints.up(E)]:d(y)}}function s(g,i,d){return i==null?null:typeof i!="object"||!("xs"in i)?d(i):[n(g,i,d,"xs"),n(g,i,d,"sm"),n(g,i,d,"md"),n(g,i,d,"lg"),n(g,i,d,"xl"),n(g,i,d,"xxl")]}try{s.displayName="getResponsiveStyle",s.__docgenInfo={description:"Function that converts a ResponsiveProp object into CSS",displayName:"getResponsiveStyle",props:{}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Layout/utils/responsiveness.tsx#getResponsiveStyle"]={docgenInfo:s.__docgenInfo,name:"getResponsiveStyle",path:"src/components/Layout/utils/responsiveness.tsx#getResponsiveStyle"})}catch{}},"./src/components/Spinner/Spinner.tsx":function(L,x,r){r.d(x,{y:function(){return O}});var n=r("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),s=r("../../node_modules/react/index.js"),g=r("../../node_modules/react-inlinesvg/esm/index.js"),i=r("./src/themes/ThemeContext.tsx"),d=r("./src/types/icon.ts"),E=r("./src/components/Icon/Icon.tsx"),y=r("./src/components/Icon/utils.ts");const O=({className:I,inline:v=!1,iconClassName:A,style:o,size:p="md"})=>{const m=(0,i.of)(C),h=(0,i.of)(w,p);if(typeof p!="string"||!(0,d.rJ)(p)){const c=(0,y.Wj)(),b="spinner",t=(0,y.Xi)(b,"default"),u=`${c}${t}/${b}.svg`;return s.createElement("div",{"data-testid":"Spinner",style:o,className:(0,n.cx)({[m.inline]:v},h.wrapper,I)},s.createElement(g.A,{src:u,width:p,height:p,className:(0,n.cx)("fa-spin",h.icon,I),style:o}))}return s.createElement("div",{"data-testid":"Spinner",style:o,className:(0,n.cx)({[m.inline]:v},I)},s.createElement(E.I,{className:(0,n.cx)("fa-spin",A),name:"spinner",size:p,"aria-label":"loading spinner"}))},C=I=>({inline:(0,n.AH)({display:"inline-block"})}),w=(I,v)=>({wrapper:(0,n.AH)({fontSize:typeof v=="string"?v:`${v}px`}),icon:(0,n.AH)({display:"inline-block",fill:"currentColor",flexShrink:0,label:"Icon",lineHeight:0,verticalAlign:"middle"})});try{O.displayName="Spinner",O.__docgenInfo={description:"",displayName:"Spinner",props:{className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"string"}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties"}},iconClassName:{defaultValue:null,description:"",name:"iconClassName",required:!1,type:{name:"string"}},inline:{defaultValue:{value:"false"},description:"",name:"inline",required:!1,type:{name:"boolean"}},size:{defaultValue:{value:"md"},description:"",name:"size",required:!1,type:{name:"string | number"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/Spinner/Spinner.tsx#Spinner"]={docgenInfo:O.__docgenInfo,name:"Spinner",path:"src/components/Spinner/Spinner.tsx#Spinner"})}catch{}},"./src/themes/stylesFactory.ts":function(L,x,r){r.d(x,{N:function(){return g}});var n=r("../../node_modules/micro-memoize/dist/micro-memoize.js"),s=r.n(n);function g(i){return s()(i)}},"./src/types/icon.ts":function(L,x,r){r.d(x,{GO:function(){return i},SS:function(){return d},rJ:function(){return g}});var n=r("../grafana-data/src/types/icon.ts"),s=r("../grafana-data/src/types/dataFrame.ts");const g=y=>["xs","sm","md","lg","xl","xxl","xxxl"].includes(y),i=()=>Object.keys(n.az);function d(y){return E(y?.type)}function E(y){if(y)switch(y){case s.PU.time:return"clock-nine";case s.PU.string:return"font";case s.PU.number:return"calculator-alt";case s.PU.boolean:return"toggle-on";case s.PU.trace:return"info-circle";case s.PU.enum:return"list-ol";case s.PU.geo:return"map-marker";case s.PU.other:return"brackets-curly"}return"question-circle"}}}]);
