1!function(){try{("undefined"!==typeof window?window:"undefined"!==typeof global?global:"undefined"!==typeof self?self:{}).__faroBundleId_undefined="17550702746887c08d02d8e"}catch(e){}}(),(self.webpackChunkappsmith=self.webpackChunkappsmith||[]).push([[3361],{63361:(e,t,i)=>{i.r(t),i.d(t,{default:()=>X});var o=i(93876),r=i.n(o),l=i(65008),s=i.n(l),p=i(18267),n=i(55743),a=i(40026),d=i(63259),h=i(63251),c=i(50785),u=i(14171),b=i(9162),g=i(49255),T=i(31653),x=i(43567),m=i(34869),y=i(35298),v=i.n(y),S=i(7956),E=i.n(S),f=i(92875),O=i.n(f),I=i(98004),P=i(60274),w=i(17463),C=i(48651),N=(i(86865),i(88172)),_=i(6490),R=i(87446),L=i.n(R),D=i(29819),$=i(10380),G=i(65983);const A={shouldSort:!0,threshold:.5,location:0,minMatchCharLength:3,findAllMatches:!0,keys:["label","value"]},V=C.l.ofType(),J=(0,I.Ay)(V)` 2 div { 3 flex: 1 1 auto; 4 } 5 span { 6 width: 100%; 7 position: relative; 8 9 & > div { 10 height: 100%; 11 } 12 } 13 &&&& .${P.n56} { 14 display: flex; 15 width: 100%; 16 height: 100%; 17 align-items: center; 18 justify-content: space-between; 19 box-shadow: none; 20 background: white; 21 min-height: 36px; 22 padding-left: 12px; 23 border: 1.2px solid 24 ${e=>e.hasError?_.J.DANGER_SOLID:_.J.GREY_3}; 25 ${e=>e.isValid?`\n &:hover {\n border: 1.2px solid ${_.J.GREY_5};\n }\n &:focus {\n border: 1.2px solid ${_.J.GREEN_SOLID};\n outline: 0;\n }\n `:""}; 26 } 27 28 &&&&& .${P.HSU} .${P.n56} { 29 outline: 0; 30 ${e=>e.hasError?`border: 1.2px solid ${_.J.DANGER_SOLID};`:`\n border: 1.2px solid ${_.J.GREEN_SOLID};\n box-shadow: 0px 0px 0px 2px ${_.J.GREEN_SOLID_HOVER};\n `} 31 } 32 &&&&& .${P.F4C} { 33 background-color: ${_.J.GREY_1}; 34 border: 1.2px solid ${_.J.GREY_3}; 35 .${P.Dz5} { 36 color: ${_.J.GREY_7}; 37 } 38 } 39 .${P.Dz5} { 40 text-overflow: ellipsis; 41 text-align: left; 42 overflow: hidden; 43 display: -webkit-box; 44 -webkit-line-clamp: 1; 45 -webkit-box-orient: vertical; 46 color: ${e=>e.isSelected?_.J.GREY_10:_.J.GREY_6}; 47 } 48 && { 49 .${P.kb2} { 50 width: fit-content; 51 color: ${_.J.SLATE_GRAY}; 52 } 53 } 54`,B=(0,I.Ay)(w.tW)` 55 &&& > { 56 span { 57 height: 100%; 58 max-width: 100%; 59 60 & > span { 61 height: 100%; 62 } 63 64 .dropdown-icon { 65 width: 20px; 66 67 svg { 68 width: 20px; 69 height: 20px; 70 } 71 } 72 } 73 } 74`,W=I.DU` 75${e=>{let{dropDownWidth:t,id:i,parentWidth:o}=e;return`\n .select-popover-width-${i} {\n min-width: ${o>t?o:t}px;\n\n & .${P.rsK} {\n width: ${o>t?o:t}px;\n }\n }\n`}} 76 .select-popover-wrapper { 77 width: auto; 78 box-shadow: 0 6px 20px 0px rgba(0, 0, 0, 0.15) !important; 79 border-radius: 0; 80 background: white; 81 82 & .${P.rsK} { 83 padding: 12px 12px 8px 12px; 84 min-width: 180px; 85 86 & > .${P.kb2} { 87 &:first-child { 88 left: 12px; 89 top: 14px; 90 margin: 9px; 91 color: ${_.J.GREY_7}; 92 93 & > svg { 94 width: 14px; 95 height: 14px; 96 } 97 } 98 } 99 & > .${P._H3} { 100 &:last-child { 101 right: 13px; 102 top: 13px; 103 104 .${P.n56} { 105 min-height: 34px; 106 min-width: 35px; 107 margin: 0px; 108 color: ${_.J.GREY_6} !important; 109 110 &:hover { 111 color: ${_.J.GREY_10} !important; 112 background: ${_.J.GREY_2}; 113 border-radius: 0; 114 } 115 } 116 } 117 } 118 .${P.bOq} { 119 height: 36px; 120 border: 1.2px solid ${_.J.GREY_3}; 121 color: ${_.J.GREY_10}; 122 &:focus { 123 border: 1.2px solid ${_.J.GREEN_SOLID}; 124 box-shadow: 0px 0px 0px 2px ${_.J.GREEN_SOLID_HOVER}; 125 } 126 } 127 } 128 && .${P.scu} { 129 margin-top: -3px; 130 max-width: 100%; 131 max-height: auto; 132 min-width: 0px !important; 133 } 134 &&&& .${P.ya8} { 135 min-height: 38px; 136 padding: 9px 12px; 137 color: ${_.J.GREY_8}; 138 &:hover{ 139 background: ${_.J.GREEN_SOLID_LIGHT_HOVER}; 140 } 141 &.is-focused{ 142 background: ${_.J.GREEN_SOLID_LIGHT_HOVER}; 143 } 144 &.${P.HcD} { 145 background: ${_.J.GREEN_SOLID_LIGHT_HOVER}; 146 color: ${_.J.GREY_10}; 147 position:relative; 148 } 149 } 150 } 151`,F=I.Ay.div` 152 ${N.Rq} 153 ${$.zx} 154`;class M extends g.Component{constructor(){super(...arguments),this.state={activeItemIndex:-1},this.componentDidMount=()=>{this.setState({activeItemIndex:this.props.selectedIndex})},this.componentDidUpdate=e=>{e.selectedIndex!==this.props.selectedIndex&&this.setState({activeItemIndex:this.props.selectedIndex})}
154,this.handleActiveItemChange=e=>{const t=r()(this.props.options,["label",null===e||void 0===e?void 0:e.label]);this.setState({activeItemIndex:t})},this.onItemSelect=e=>{this.props.onOptionSelected(e)},this.isOptionSelected=e=>r()(this.props.options,(t=>t.value===e.value))===this.props.selectedIndex,this.serverSideSearch=v()((e=>{this.props.onFilterChange(e)}),800),this.renderSingleSelectItem=(e,t)=>{if(!t.modifiers.matchesPredicate)return null;const i=this.isOptionSelected(e),o=t.modifiers.active;return(0,G.jsx)(w.Dr,{active:i,className:`single-select ${o&&"is-focused"}`,onClick:t.handleClick,tabIndex:0,text:e.label},e.value)}}render(){const e=O()(),{compactMode:t,disabled:i,isLoading:o,labelAlignment:r,labelPosition:l,labelStyle:s,labelText:p,labelTextColor:n,labelTextSize:a,labelWidth:d}=this.props,h=E()(this.props.options)?void 0:this.props.options[this.state.activeItemIndex||-1],c=!E()(this.props.options)&&void 0!==this.props.selectedIndex&&this.props.selectedIndex>-1?this.props.options[this.props.selectedIndex].label:void 0,u=c||(this.props.placeholder||"-- Select --");return(0,G.jsxs)(F,{compactMode:t,"data-testid":"select-container",labelPosition:l,children:[(0,G.jsx)(W,{dropDownWidth:this.props.dropDownWidth,id:e,parentWidth:this.props.width-x.zU}),p&&(0,G.jsx)($.Ay,{alignment:r,className:"select-label",color:n,compact:t,disabled:i,fontSize:a,fontStyle:s,loading:o,position:l,text:p,width:d}),(0,G.jsx)(B,{compactMode:t,fill:!0,labelPosition:l,children:(0,G.jsx)(J,{activeItem:h,className:o?P.w24:"",disabled:i,filterable:this.props.isFilterable,hasError:this.props.hasError,isSelected:!E()(this.props.options)&&void 0!==this.props.selectedIndex&&this.props.selectedIndex>-1,isValid:this.props.isValid,itemListPredicate:this.props.serverSideFiltering?void 0:this.itemListPredicate,itemRenderer:this.renderSingleSelectItem,items:this.props.options,noResults:(0,G.jsx)(w.Dr,{disabled:!0,text:"No Results Found"}),onActiveItemChange:this.handleActiveItemChange,onItemSelect:this.onItemSelect,onQueryChange:this.props.serverSideFiltering?this.serverSideSearch:void 0,popoverProps:{boundary:"window",minimal:!0,usePortal:!0,modifiers:{preventOverflow:{enabled:!1}},popoverClassName:`select-popover-wrapper select-popover-width-${e}`},children:(0,G.jsx)(w.$n,{disabled:this.props.disabled,rightIcon:(0,G.jsx)(D.In,{className:"dropdown-icon",fillColor:this.props.disabled?_.J.GREY_7:_.J.GREY_10,name:"dropdown"}),text:u})})})]})}itemListPredicate(e,t){const i=new(L())(t,A);return e?i.search(e):t}}const k=M;var U=i(1384);function H(e){return"string"===typeof e?{isValid:!0,parsed:e.trim()}:void 0===e||null===e?{isValid:!1,parsed:"",messages:[{name:"TypeError",message:"This value does not evaluate to type: string"}]}:{isValid:!0,parsed:e}}class Y extends m.Ay{constructor(){super(...arguments),this.onOptionSelected=e=>{let t=!0;this.props.isDirty||this.props.updateWidgetMetaProperty("isDirty",!0),this.props.selectedOptionValue&&(t=!(this.props.selectedOptionValue===e.value)),t&&this.props.updateWidgetMetaProperty("value",e.value,{triggerPropertyName:"onOptionChange",dynamicString:this.props.onOptionChange,event:{type:d.Bx.ON_OPTION_CHANGE}})},this.changeSelectedOption=()=>{var e,t,i;const o=r()(this.props.options,{value:null!==(e=this.props.selectedOptionValue)&&void 0!==e?e:this.props.defaultOptionValue}),l=null===(t=this.props.options)||void 0===t||null===(i=t[o])||void 0===i?void 0:i.value;this.props.updateWidgetMetaProperty("value",l)},this.onFilterChange=e=>{this.props.updateWidgetMetaProperty("filterText",e),super.executeAction({triggerPropertyName:"onFilterUpdate",dynamicString:this.props.onFilterUpdate,event:{type:d.Bx.ON_FILTER_UPDATE}})}}static getConfig(){return{name:"Select",iconSVG:U.A,needsMeta:!0,hideCard:!0,isDeprecated:!0,replacement:"SELECT_WIDGET",tags:[h.xT.SELECT]}}static getDefaults(){return{rows:7,columns:20,placeholderText:"Select option",labelText:"Label",labelPosition:a.G5.Left,labelAlignment:p.C.LEFT,labelWidth:5,selectionType:"SINGLE_SELECT",options:[{label:"Blue",value:"BLUE"},{label:"Green",value:"GREEN"},{label:"Red",value:"RED"}],serverSideFiltering:!1,widgetName:"Select",defaultOptionValue:"GREEN",version:1,isFilterable:!1,isRequired:!1,isDisabled:!1,animateLoading:!0}}static getMethods(){return{getSnipingModeUpdates:e=>[{propertyPath:"options",propertyValue:e.data,isDynamicPropertyPath:!0}],getEditorCallouts:()=>[{message:(0,b.aB)(Y.getConfig().name)}]}}static getAutocompleteDefinitions(){return{"!doc":"Select is used to capture user input/s from a specified list of permitted inputs. A Select can capture a single choice","!url":"https://docs.appsmith.com/widget-reference/dropdown",isVisible:x.C0.isVisible,filterText:{"!type":"string","!doc":"The filter text for Server side filtering"},selectedOptionValue:{"!type":"string","!doc":"The value selected in a single select dropdown","!url":"https://docs.appsmith.com/widget-reference/dropdown"},selectedOptionLabel:{"!type":"string","!doc":"The selected option label in a single select dropdown","!url":"https://docs.appsmith.com/widget-reference/dropdown"},isDisabled:"bool",options:"[$__dropdownOption__$]"}}static getPropertyPaneConfig(){return[{sectionName:"General",children:[{helpText:"Allows users to select a single option. Values must be unique",propertyName:"options",label:"Options",controlType:"INPUT_TEXT",placeholderText:'[{ "label": "Option1", "value": "Option2" }]',isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.ARRAY,params:{unique:["value"],children:{type:c.b.OBJECT,params:{required:!0,allowedKeys:[{name:"label",type:c.b.TEXT,params:{default:"",required:!0}},{name:"value",type:c.b.TEXT,params:{default:""}}]}}}},evaluationSubstitutionType:u.m.SMART_SUBSTITUTE}
154,{helpText:"Selects the option with value by default",propertyName:"defaultOptionValue",label:"Default Option",controlType:"INPUT_TEXT",placeholderText:"GREEN",isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.FUNCTION,params:{fn:H,expected:{type:"value or Array of values",example:"option1 | ['option1', 'option2']",autocompleteDataType:T.$.STRING}}},dependencies:["selectionType"]},{helpText:"Sets a Placeholder Text",propertyName:"placeholderText",label:"Placeholder",controlType:"INPUT_TEXT",placeholderText:"Enter placeholder text",isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.TEXT}},{propertyName:"isRequired",label:"Required",helpText:"Makes input to the widget mandatory",controlType:"SWITCH",isJSConvertible:!0,isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.BOOLEAN}},{helpText:"Controls the visibility of the widget",propertyName:"isVisible",label:"Visible",controlType:"SWITCH",isJSConvertible:!0,isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.BOOLEAN}},{propertyName:"isDisabled",label:"Disabled",helpText:"Disables input to this widget",controlType:"SWITCH",isJSConvertible:!0,isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.BOOLEAN}},{propertyName:"animateLoading",label:"Animate loading",controlType:"SWITCH",helpText:"Controls the loading of the widget",defaultValue:!0,isJSConvertible:!0,isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.BOOLEAN}},{propertyName:"isFilterable",label:"Filterable",helpText:"Makes the dropdown list filterable",controlType:"SWITCH",isJSConvertible:!0,isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.BOOLEAN}},{helpText:"Enables server side filtering of the data",propertyName:"serverSideFiltering",label:"Server side filtering",controlType:"SWITCH",isJSConvertible:!0,isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.BOOLEAN}}]},{sectionName:"Label",children:[{helpText:"Sets the label text of the widget",propertyName:"labelText",label:"Text",controlType:"INPUT_TEXT",placeholderText:"Enter label text",isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.TEXT}},{helpText:"Sets the label position of the widget",propertyName:"labelPosition",label:"Position",controlType:"DROP_DOWN",options:[{label:"Left",value:a.G5.Left},{label:"Top",value:a.G5.Top},{label:"Auto",value:a.G5.Auto}],defaultValue:a.G5.Top,isBindProperty:!1,isTriggerProperty:!1,validation:{type:c.b.TEXT}},{helpText:"Sets the label alignment of the widget",propertyName:"labelAlignment",label:"Alignment",controlType:"LABEL_ALIGNMENT_OPTIONS",fullWidth:!1,options:[{startIcon:"align-left",value:p.C.LEFT},{startIcon:"align-right",value:p.C.RIGHT}],isBindProperty:!1,isTriggerProperty:!1,validation:{type:c.b.TEXT},hidden:e=>e.labelPosition!==a.G5.Left,dependencies:["labelPosition"]},{helpText:"Sets the label width of the widget as the number of columns",propertyName:"labelWidth",label:"Width (in columns)",controlType:"NUMERIC_INPUT",isJSConvertible:!0,isBindProperty:!0,isTriggerProperty:!1,min:0,validation:{type:c.b.NUMBER,params:{natural:!0}},hidden:e=>e.labelPosition!==a.G5.Left,dependencies:["labelPosition"]}]},{sectionName:"Styles",children:[{propertyName:"labelTextColor",label:"Label text color",controlType:"COLOR_PICKER",isJSConvertible:!0,isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.TEXT}},{propertyName:"labelTextSize",label:"Label text size",controlType:"DROP_DOWN",defaultValue:"0.875rem",options:[{label:"S",value:"0.875rem",subText:"0.875rem"},{label:"M",value:"1rem",subText:"1rem"},{label:"L",value:"1.25rem",subText:"1.25rem"},{label:"XL",value:"1.875rem",subText:"1.875rem"},{label:"XXL",value:"3rem",subText:"3rem"},{label:"3XL",value:"3.75rem",subText:"3.75rem"}],isJSConvertible:!0,isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.TEXT}},{propertyName:"labelStyle",label:"Label Font Style",controlType:"BUTTON_GROUP",options:[{startIcon:"text-bold",value:"BOLD"},{startIcon:"text-italic",value:"ITALIC"}],isJSConvertible:!0,isBindProperty:!0,isTriggerProperty:!1,validation:{type:c.b.TEXT}}]},{sectionName:"Actions",children:[{helpText:"when a user selects an option",propertyName:"onOptionChange",label:"onOptionChange",controlType:"ACTION_SELECTOR",isJSConvertible:!0,isBindProperty:!0,isTriggerProperty:!0},{helpText:"Trigger an action on change of filterText",hidden:e=>!e.serverSideFiltering,dependencies:["serverSideFiltering"],propertyName:"onFilterUpdate",label:"onFilterUpdate",controlType:"ACTION_SELECTOR",isJSConvertible:!0,isBindProperty:!0,isTriggerProperty:!0}]}]}static getDerivedPropertiesMap(){return{isValid:"{{this.isRequired ? !!this.selectedOptionValue || this.selectedOptionValue === 0 : true}}",selectedOptionLabel:"{{(()=>{const index = _.findIndex(this.options, { value: this.value }); return this.options[index]?.label; })()}}",selectedOptionValue:"{{(()=>{const index = _.findIndex(this.options, { value: this.value }); return this.options[index]?.value; })()}}"}}static getDefaultPropertiesMap(){return{defaultValue:"defaultOptionValue",value:"defaultOptionValue"}}static getMetaPropertiesMap(){return{defaultValue:void 0,value:void 0}}static getStylesheetConfig(){return{accentColor:"{{appsmith.theme.colors.primaryColor}}",borderRadius:"{{appsmith.theme.borderRadius.appBorderRadius}}",boxShadow:"none"}}componentDidMount(){this.changeSelectedOption()}componentDidUpdate(e){e.defaultOptionValue===this.props.defaultOptionValue&&e.option===this.props.option||this.changeSelectedOption()}getWidgetView(){var e;const t=s()(this.props.options)?this.props.options:[],i="isValid"in this.props&&!this.props.isValid&&!!this.props.isDirty,o=n.AE/100*(null!==(e=this.props.mainCanvasWidth)&&void 0!==e?e:h.kB.MOBILE.maxWidth),l=r()(this.props.options,{value:this.props.selectedOptionValue}),{componentHeight:p,componentWidth:a}=this.props;return(0,G.jsx)(k,{accentColor:this.props.accentColor,backgroundColor:this.props.backgroundColor,borderRadius:this.props.borderRadius,boxSh
154adow:this.props.boxShadow,compactMode:(0,x.pm)(p),disabled:this.props.isDisabled,dropDownWidth:o,hasError:i,height:p,isFilterable:this.props.isFilterable,isLoading:this.props.isLoading,isValid:this.props.isValid,labelAlignment:this.props.labelAlignment,labelPosition:this.props.labelPosition,labelStyle:this.props.labelStyle,labelText:this.props.labelText,labelTextColor:this.props.labelTextColor,labelTextSize:this.props.labelTextSize,labelWidth:this.props.labelComponentWidth,onFilterChange:this.onFilterChange,onOptionSelected:this.onOptionSelected,options:t,placeholder:this.props.placeholderText,selectedIndex:l>-1?l:void 0,serverSideFiltering:this.props.serverSideFiltering,widgetId:this.props.widgetId,width:a})}}Y.type="DROP_DOWN_WIDGET";const X=Y}}]); 155//# sourceMappingURL=3361.aea0dace.chunk.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.