/*!
 * Copyright © 2018 Splunk Inc.
 * SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
 * in part without a valid written license from Splunk Inc. is PROHIBITED.
 */(()=>{"use strict";var e={5135:(e,t,n)=>{t.useCSPViolationObserver=void 0;const a=n(9497);t.useCSPViolationObserver=(e,t="none")=>{const[n,o]=(0,a.useState)(t);return(0,a.useEffect)((()=>{const n=t=>{t.blockedURI!==e&&t.blockedURI!==`${e}/`||"enforce"!==t.disposition?t.blockedURI!==e&&t.blockedURI!==`${e}/`||"report"!==t.disposition||o("warning"):o("error")};return document.addEventListener("securitypolicyviolation",n),o(t),()=>{document.removeEventListener("securitypolicyviolation",n)}}),[e]),n}},4008:function(e,t,n){var a=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=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,a,o)}:function(e,t,n,a){void 0===a&&(a=n),e[a]=t[n]}),o=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=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)&&a(t,e,n);return o(t,e),t},r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.AdvancedConfigButton=void 0;const l=i(n(9497)),s=i(n(23)),u=r(n(232)),c=n(6649),d=r(n(6643)),p=n(3563),m=r(n(6379)),g=r(n(7020)),f=r(n(9250)),v=(0,u.default)(f.default)`
    margin-top: 0;
    padding: 0;
    // adjust bottom margin according to theme
    margin-bottom: ${p.variables.spacingMedium};
    width: 100%;

    // remove top margin of the first component in control group
    &:first-child {
        margin-top: 0;
    }

    // remove bottom margin of the last component in control group
    &:last-child {
        margin-bottom: 0;
    }
    // remove top padding on label of the first control group
    [data-test='label']:first-of-type {
        padding-top: 0;
    }
`,h=(0,u.default)(m.default)`
    display: flex;
    > span {
        display: flex;
        width: 35px;
    }
`,b=(0,u.default)(g.default)`
    color: ${p.variables.contentColorActive} !important;
    &:hover {
        background-color: ${p.variables.interactiveColorOverlayDrag} !important;
    }
`;t.AdvancedConfigButton=({label:e="",onClick:t})=>l.default.createElement(h,{"data-test":`${e}-advanced-config-button-tooltip`,content:(0,c._)("Advanced configurations")},l.default.createElement(b,{"data-test":`${e}-advanced-config-button`,icon:l.default.createElement(d.default,{"data-test":`${e}-advanced-config-button-icon`}),appearance:"subtle",onClick:t}));const y=({"data-test":e,children:n,isAdvanced:a=!1,label:o,hideLabel:i,labelPosition:r,labelWidth:s,tooltip:u,help:c,style:d,error:p,controlsLayout:m,onClick:g,onAdvancedConfigButtonClick:f})=>l.default.createElement(v,{"data-test":null!=e?e:"control-group",label:o,hideLabel:i,labelPosition:r,labelWidth:s,tooltip:u,help:c,error:p,style:d,onClick:g,controlsLayout:m},a?l.Children.toArray(n).filter(Boolean).map((e=>(0,l.cloneElement)(e,{style:{flex:1}}))):n,a?l.default.createElement(t.AdvancedConfigButton,{label:o,onClick:f}):null);y.propTypes={style:s.object,isAdvanced:s.bool,onClick:s.func,onAdvancedConfigButtonClick:s.func},t.default=y},962:function(e,t,n){var a=this&&this.__createBinding||(Object.create?function(e,t,n,a){void 0===a&&(a=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,a,o)}:function(e,t,n,a){void 0===a&&(a=n),e[a]=t[n]}),o=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),i=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)&&a(t,e,n);return o(t,e),t},r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.CSPMessage=void 0;const l=i(n(9497)),s=n(6649),u=r(n(6447)),c=r(n(451)),d=r(n(5711));t.CSPMessage=({type:e})=>{const{cspMessageLink:t}=l.useContext(d.default);return l.createElement(u.default,{appearance:"fill",type:e,"data-test":`csp-message-${e}`},(0,s._)("External image URLs must now have their domains listed in the Dashboards Trusted Domains List by working with your administrator. Alternatively, you can upload the image directly into the dashboard. "),t&&l.createElement(c.default,{to:t,openInNewContext:!0},(0,s._)("Learn more")))}},137:function(e,t,n){var a=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.MessageContainer=void 0;const o=a(n(232));t.MessageContainer=o.default.div`
    margin-top: 10px;
`},6195:e=>{e.exports=require("@babel/runtime/helpers/defineProperty")},8855:e=>{e.exports=require("@splunk/react-icons/Cross")},6643:e=>{e.exports=require("@splunk/react-icons/SlidersDoubleHorizontal")},7020:e=>{e.exports=require("@splunk/react-ui/Button")},9250:e=>{e.exports=require("@splunk/react-ui/ControlGroup")},451:e=>{e.exports=require("@splunk/react-ui/Link")},6447:e=>{e.exports=require("@splunk/react-ui/Message")},4082:e=>{e.exports=require("@splunk/react-ui/Text")},6379:e=>{e.exports=require("@splunk/react-ui/Tooltip")},3563:e=>{e.exports=require("@splunk/themes")},6649:e=>{e.exports=require("@splunk/ui-utils/i18n")},7464:e=>{e.exports=require("@splunk/visualization-context/FeatureFlagContext")},5711:e=>{e.exports=require("@splunk/visualization-context/MessageContext")},4793:e=>{e.exports=require("lodash")},23:e=>{e.exports=require("prop-types")},9497:e=>{e.exports=require("react")},232:e=>{e.exports=require("styled-components")}},t={};function n(a){var o=t[a];if(void 0!==o)return o.exports;var i=t[a]={exports:{}};return e[a].call(i.exports,i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};(()=>{n.r(a),n.d(a,{default:()=>Q});var e=n(9497),t=n.n(e),o=n(23),i=n.n(o);const r=require("@splunk/visualization-context/ImageContext");var l=n.n(r),s=n(4008),u=n.n(s),c=n(6195),d=n.n(c),p=n(232),m=n.n(p),g=n(6649),f=n(6447),v=n.n(f),h=n(4082),b=n.n(h);const y=require("@splunk/react-ui/Image");var x=n.n(y),C=n(7464),k=n.n(C),R=n(4793),_=n(962);const I=m().div`
    padding-bottom: 5px;
    width: 100%;
    text-align: center;
`,w={marginBottom:10},U={width:"100%"},E=m().span`
    font-size: smaller;
    font-style: italic;
`,O=(0,g._)("Note: Uploaded image files can be accessed and deleted by others in your organization"),P=(0,R.memoize)(((e,t)=>{const n=e.slice();if(t)-1===n.indexOf("svg")&&n.push("svg");else{const e=n.indexOf("svg");e>-1&&n.splice(e,1)}return n}),((e,t)=>`${t}-${e.join("-")}`));class D extends e.Component{constructor(e){super(e),d()(this,"violationHandler",(e=>{e.blockedURI!==this.state.urlValue&&e.blockedURI!==`${this.state.urlValue}/`||"enforce"!==e.disposition?e.blockedURI!==this.state.urlValue&&e.blockedURI!==`${this.state.urlValue}/`||"report"!==e.disposition||this.setState({violationType:"warning"}):this.setState({violationType:"error"})})),d()(this,"checkImage",(e=>{if(!e)return;const t=new Image;t.onload=()=>{this.props.handleImageUpload({src:e})},t.onerror=()=>{this.setState((e=>e.urlValue?{validUrl:!1}:void 0))},t.src=e})),d()(this,"handleURLChange",((e,{value:t})=>{this.setState({urlValue:t,validUrl:!0,violationType:"none"})})),d()(this,"handleTextKeyDown",(e=>{"Enter"===e.key&&(e.preventDefault(),this.checkImage(this.state.urlValue))})),d()(this,"handleBlur",(e=>{var t;null!==(t=this.inputRef.current)&&void 0!==t&&t.contains(e.relatedTarget)||this.checkImage(this.state.urlValue)})),d()(this,"trackInputRef",(e=>{this.inputRef.current=e,e&&e.addEventListener("focusout",this.handleBlur)})),d()(this,"handleOnImageChange",(({filename:e,imageDataURI:t})=>{e&&t?this.props.handleImageUpload({filename:e,imageDataURI:t}):this.props.handleImageUpload({filename:null,imageDataURI:null})})),this.state={urlValue:"",validUrl:!0,violationType:"none"},this.inputRef=t().createRef()}componentDidMount(){document.addEventListener("securitypolicyviolation",this.violationHandler)}componentWillUnmount(){document.removeEventListener("securitypolicyviolation",this.violationHandler),this.inputRef.current&&this.inputRef.current.removeEventListener("focusout",this.handleBlur)}render(){const{enableImageFileUpload:e,enableSVGImageUpload:n,enableSvgHttpDownloader:a,enableGallerySharingWarning:o}=this.context||{},i=P(this.props.validImageTypes,n),r=i.indexOf("svg")<0||this.props.svgRenderAsDom&&i.indexOf("svg")>-1&&a||!this.props.svgRenderAsDom&&i.indexOf("svg")>-1,l="none"!==this.state.violationType?t().createElement(_.CSPMessage,{type:this.state.violationType}):t().createElement(v(),{appearance:"fill",type:"error"},(0,g._)("We can't find an image with this URL. Please enter a new URL."));return t().createElement(I,null,r&&t().createElement(b(),{canClear:!0,value:this.state.urlValue,onChange:this.handleURLChange,onKeyDown:this.handleTextKeyDown,style:w,elementRef:this.trackInputRef}),this.state.validUrl?e&&t().createElement(t().Fragment,null,t().createElement(x(),{style:U,defaultFilename:null,defaultImageDataURI:null,onImageChange:this.handleOnImageChange,allowExtensions:i}),o&&t().createElement(E,{"data-test":"gallery-sharing-warning"},O)):l)}}d()(D,"contextType",k()),D.propTypes={handleImageUpload:i().func,validImageTypes:i().array,svgRenderAsDom:i().bool},D.defaultProps={handleImageUpload:()=>{},validImageTypes:["gif","jpeg","jpg","png","webp"],svgRenderAsDom:!1};const S=D;var M=n(8855),j=n.n(M),T=n(7020),q=n.n(T),L=n(3563),$=n(5135),A=n(137);const V=t().createElement(j(),null),B=m().div`
    width: 100%;
    padding-bottom: 5px;
`,W=m().div`
    border: 1px solid ${L.variables.borderColor};
    position: relative;
    min-height: 30px;
    height: auto;
`,z=m().div`
    background-color: ${L.variables.backgroundColorPage};
    color: ${L.variables.contentColorDefault};
    opacity: 0.9;
    position: absolute;
    width: 100%;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
`,H=m().div`
    margin-left: ${L.variables.spacingMedium};
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
`,F=m()(q()).attrs({"data-test":"image-remove-button"})`
    flex-grow: 0;
    color: ${L.variables.contentColorActive} !important;
    &:hover {
        background-color: ${L.variables.actionColorBackgroundSecondaryHover} !important;
    }
`,G=m().img`
    ${L.mixins.reset("block")};
    margin: 0 auto;
    max-width: 100%;
    max-height: 180px;
`,K=({filename:e=null,imageDataURI:n=null,onImageRemove:a=R.noop,overrideCSPViolation:o})=>{const i=(0,$.useCSPViolationObserver)(n,o);return t().createElement(B,null,t().createElement(W,null,t().createElement(z,null,t().createElement(H,null,e),t().createElement(F,{"aria-label":(0,g._)("Remove image"),appearance:"subtle",icon:V,onClick:a})),t().createElement(G,{alt:e,src:n})),"none"!==i&&t().createElement(A.MessageContainer,null,t().createElement(_.CSPMessage,{type:i})))};K.propTypes={filename:i().string,imageDataURI:i().string,onImageRemove:i().func,overrideCSPViolation:i().string};const N=K,J=({onChange:n,name:a,value:o,labelPosition:i="top",labelWidth:r,label:s,validMediaTypes:c,svgRenderAsDom:d,overrideCSPViolation:p})=>{const m=(0,e.useContext)(l()),[g,f]=(0,e.useState)(null),[v,h]=(0,e.useState)(null),b=(0,e.useCallback)((async(e,t)=>{try{const o=await m.upload(t,{name:e},null,c);n(null,a,o)}catch(e){console.warn(e)}}),[m,c,n,a]),y=(0,e.useCallback)((({src:e,filename:t,imageDataURI:o})=>e?n(null,a,e):null!==t&&null!==o?b(t,o):n(null,a,null)),[b,n,a]),x=(0,e.useCallback)((e=>n(e,a,null)),[n,a]);return(0,e.useEffect)((()=>{(async()=>{if(o){const e=await(async(e,t)=>null!=e&&e.isResourceURL(t)?e.getByURL(t):{dataURI:t,metaData:{name:t}})(m,o);f(e.dataURI),h(e.metaData.name)}})()}),[o,m]),t().createElement(u(),{label:s,labelPosition:i,labelWidth:r},o?t().createElement(N,{filename:v,imageDataURI:g,onImageRemove:x,overrideCSPViolation:p}):t().createElement(S,{svgRenderAsDom:d,validImageTypes:c,handleImageUpload:y}))};J.propTypes={onChange:i().func.isRequired,name:i().string.isRequired,label:i().string.isRequired,value:i().string,labelPosition:i().oneOf(["top","left"]),labelWidth:i().number,validMediaTypes:i().array,svgRenderAsDom:i().bool,overrideCSPViolation:i().string};const Q=J})(),module.exports=a})();
//# sourceMappingURL=ImageEditor.js.map