var SLDS;!function(){"use strict";var e,t,l,n={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},4471:function(e,t,l){l.r(t),l.d(t,{getContents:function(){return Ee},getElement:function(){return he}});var n=l(1594),i=l.n(n),a=l(5671),o=l(6547),r=l(3212),s=l(1374),d=l(9741),m=l(5619),c=l(6955),u=l(2711),p=l(5526),f=l(3589),h=l(7412),E=l.n(h),b=l(942),g=l.n(b);function S(e){return S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},S(e)}function y(e,t){var l=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),l.push.apply(l,n)}return l}function v(e){for(var t=1;t<arguments.length;t++){var l=null!=arguments[t]?arguments[t]:{};t%2?y(Object(l),!0).forEach(function(t){A(e,t,l[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(l)):y(Object(l)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(l,t))})}return e}function A(e,t,l){return(t=function(e){var t=function(e){if("object"!=S(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=S(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==S(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}var _=function(e){return i().createElement("textarea",v(v({},e),{},{id:e.id||"textarea-id-01",className:g()("slds-textarea",e.className),placeholder:e.placeholder}))};_.propTypes={id:E().string,className:E().string,placeholder:E().string},_.defaultProps={placeholder:"Placeholder text…"},u.ZS,u.ZS,u.ZS,u.ZS,u.GN,u.qz;var C=l(2937),z=l(885),x=function(e){var t=e.children;return i().createElement("div",{className:"slds-form-element__row"},t)};x.propTypes={children:E().node.isRequired};var w=function(e){var t=e.isStacked,l=e.isHorizontal,n=e.isEditing,a=e.isRequired,o=e.isAddress,r=e.hasTooltip,s=e.hasError,d=e.errorId,m=e.inlineMessage,c=e.labelContent,p=e.children;return i().createElement(u.LB,{hasCompoundFields:!0,isAddress:o,isStacked:t,isHorizontal:l,isEditing:n,isRequired:a,hasTooltip:r,hasError:s,errorId:d,inlineMessage:m,label:c},p)};w.propTypes={children:E().node.isRequired,isStacked:E().bool,isHorizontal:E().bool,isEditing:E().bool,isRequired:E().bool,isAddress:E().bool,hasTooltip:E().bool,hasError:E().bool,errorId:E().string,inlineMessage:E().string,labelContent:E().string};var I=l(806);function k(e,t){for(var l=0;l<t.length;l++){var n=t[l];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,N(n.key),n)}}function N(e){var t=function(e){if("object"!=L(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=L(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==L(t)?t:t+""}function T(e,t){return T=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e},T(e,t)}function q(){try{var e=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(e){}return(q=function(){return!!e})()}function Z(e){return Z=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(e){return e.__proto__||Object.getPrototypeOf(e)},Z(e)}function L(e){return L="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},L(e)}var P=function(e){return i().createElement("div",{className:"slds-form__row"},e.children)};P.propTypes={children:E().node};var V=function(e){return i().createElement("div",{className:"slds-form__item",role:"listitem"},e.children)};V.propTypes={children:E().node};var F=function(e){var t=e.isRequired,l=e.hasTooltip,n=e.type,a=e.label,o=e.value,r=e.avatar,s=e.link,d=e.timestamp,m=e.hasInlineEdit,p=e.isHorizontal,f=e.isStacked,h=e.column;return i().createElement(u.ZS,{isViewMode:!0,labelContent:a,isEditable:m,hasHint:!0,isRequired:t,hasTooltip:l,isHorizontal:p,isStacked:f,column:h},i().createElement(u.vS,{isLongform:"textarea"===n},r&&i().createElement(C.eu,{className:"slds-avatar_x-small slds-avatar_circle slds-m-right_xx-small"},i().createElement("img",{alt:o,src:r,title:o})),s?i().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},"object"===L(o)?o.map(function(e){return i().createElement(i().Fragment,{key:e},e,i().createElement("br",null))}):o):"object"===L(o)&&"richtext"!==n&&"checkbox"!==n?o.map(function(e){return i().createElement(i().Fragment,{key:e},e,i().createElement("br",null))}):o,d&&i().createElement(i().Fragment,null,", ",d)),m&&i().createElement(c.A,{iconClassName:"slds-button__icon_hint",symbol:"edit",assistiveText:"Edit: ".concat(a),title:"Edit: ".concat(a)}))};F.propTypes={isRequired:E().bool,hasTooltip:E().bool,type:E().string,label:E().string,avatar:E().string,link:E().bool,timestamp:E().string,hasInlineEdit:E().bool,isHorizontal:E().bool,isStacked:E().bool,column:E().number};var B=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t,l){return t=Z(t),function(e,t){if(t&&("object"==L(t)||"function"==typeof t))return t;if(void 0!==t)throw new TypeError("Derived constructors may only return object or undefined");return function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e)}(e,q()?Reflect.construct(t,l||[],Z(e).constructor):t.apply(e,l))}(this,t,arguments)}return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),Object.defineProperty(e,"prototype",{writable:!1}),t&&T(e,t)}(t,e),l=t,(n=[{key:"render",value:function(){var e=this.props,t=e.snapshot,l=e.isViewMode,n=e.direction,a=e.hasInlineEdit,o=e.isDeprecated;return i().createElement("div",{className:g()("slds-form",o&&"slds-form_".concat(n)),role:"list"},l?t.rows.map(function(e){return i().createElement(P,{key:I.Ay.uniqueId(e.fields.length)},Object.keys(e.fields).map(function(t){return i().createElement(V,{key:e.fields[t].label},e.fields[t].type&&i().createElement(F,{type:e.fields[t].type,label:e.fields[t].label,value:e.fields[t].value,isRequired:e.fields[t].isRequired,hasTooltip:e.fields[t].hasTooltip,avatar:e.fields[t].avatar,link:e.fields[t].link,timestamp:e.fields[t].timestamp,hasInlineEdit:a,isHorizontal:!o&&"horizontal"===n,isStacked:!o&&"stacked"===n,column:e.fields[t].column}))}))}):t.rows.map(function(e,t){return i().createElement(P,{key:I.Ay.uniqueId("detail-row-".concat(t,"-"))},Object.keys(e.fields).map(function(t){return i().createElement(V,{key:e.fields[t].label},e.fields[t].component&&e.fields[t].component)}))}))}}])&&k(l.prototype,n),Object.defineProperty(l,"prototype",{writable:!1}),l;var l,n}(n.Component);B.propTypes={snapshot:E().object,isViewMode:E().bool,direction:E().string,hasInlineEdit:E().bool,isDeprecated:E().bool};var R=B,D=l(1069),O=l(274),M=l(5159),j=l(6185),H=l(538),U={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:i().createElement(u.ZS,{inputId:"stacked-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0,isStacked:!0},i().createElement(p.A,{id:"stacked-form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:i().createElement(M.Ay,{id:"stacked-combobox-id-01",label:"Team Name","aria-controls":"stacked-listbox-id-01",autocomplete:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:i().createElement(c.A,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:i().createElement(j.Ay,{id:"stacked-listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:i().createElement(H.eX,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:i().createElement(D.L,{labelContent:"Security Assessment Required?",isEditing:!0,isStacked:!0})},{type:"picklist",label:"Status",component:i().createElement(M.Ay,{id:"stacked-combobox-id-02",label:"Status","aria-controls":"stacked-listbox-id-02",readonly:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:i().createElement(H.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:i().createElement(j.Ay,{id:"stacked-listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"checkbox-group",label:"Personalization Settings",value:"Disable end user personalization",component:i().createElement(u.LB,{label:"App Personalization Settings",isEditing:!0,isStacked:!0},i().createElement(f.Sc,{label:"Disable end user personalization",name:"default",checked:!0}),i().createElement(f.Sc,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:i().createElement(u.ZS,{labelContent:"SLA Serial Number",inputId:"stacked-form-element-id-02",hasTooltip:!0,isEditing:!0,isStacked:!0},i().createElement(p.A,{id:"stacked-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:i().createElement(u.ZS,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"stacked-form-element-id-03",hasRightIcon:!0,isEditing:!0,isStacked:!0},i().createElement(p.A,{id:"stacked-form-element-id-03",defaultValue:"1/1/2018"}),i().createElement(c.A,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",component:i().createElement(w,{labelContent:"Location",isEditing:!0,isStacked:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-2"},i().createElement(u.ZS,{labelContent:"Longitude",inputId:"stacked-location-longitude-01"},i().createElement(p.A,{id:"stacked-location-longitude-01",defaultValue:"10.283"}))),i().createElement("div",{className:"slds-size_1-of-2"},i().createElement(u.ZS,{labelContent:"Latitude",inputId:"stacked-location-latitude-01"},i().createElement(p.A,{id:"stacked-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:i().createElement(O.KF,{isEditing:!0,isStacked:!0,dataSet:O.Wz,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:i().createElement(w,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-1"},i().createElement(u.ZS,{labelContent:"Billing Street",inputId:"stacked-form-element-id-04"},i().createElement(_,{id:"stacked-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Billing City",inputId:"stacked-form-element-id-05"},i().createElement(p.A,{id:"stacked-form-element-id-05",defaultValue:"Burlington",required:!0}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Billing State/Province",inputId:"stacked-form-element-id-06"},i().createElement(p.A,{id:"stacked-form-element-id-06",defaultValue:"NC",required:!0})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Billing Zip/Postal Code",inputId:"stacked-form-element-id-07"},i().createElement(p.A,{id:"stacked-form-element-id-07",defaultValue:"27215",required:!0}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Billing Country",inputId:"stacked-form-element-id-08"},i().createElement(p.A,{id:"stacked-form-element-id-08",defaultValue:"USA",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:i().createElement(w,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-1"},i().createElement(u.ZS,{labelContent:"Shipping Street",inputId:"stacked-form-element-id-09"},i().createElement(_,{id:"stacked-form-element-id-09",defaultValue:"312 Constitution Place"})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Shipping City",inputId:"stacked-form-element-id-10"},i().createElement(p.A,{id:"stacked-form-element-id-10",defaultValue:"Austin"}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Shipping State/Province",inputId:"stacked-form-element-id-11"},i().createElement(p.A,{id:"stacked-form-element-id-11",defaultValue:"TX"})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Shipping Zip/Postal Code",inputId:"stacked-form-element-id-12"},i().createElement(p.A,{id:"stacked-form-element-id-12",defaultValue:"78767"}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Shipping Country",inputId:"stacked-form-element-id-13"},i().createElement(p.A,{id:"stacked-form-element-id-13",defaultValue:"USA"})))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:i().createElement(u.ZS,{labelContent:"Description",inputId:"stacked-form-element-id-14",isStacked:!0,isEditing:!0,column:1},i().createElement(_,{id:"stacked-form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},X={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:i().createElement(u.ZS,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},i().createElement(p.A,{id:"horizontal-form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:i().createElement(M.Ay,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-01",isEditing:!0,autocomplete:!0,inputIconPosition:"right",rightInputIcon:i().createElement(c.A,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:i().createElement(j.Ay,{id:"horizontal-listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:i().createElement(H.eX,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:i().createElement(D.L,{labelContent:"Security Assessment Required?",isHorizontal:!0,isEditing:!0})},{type:"picklist",label:"Status",component:i().createElement(M.Ay,{isHorizontal:!0,id:"horizontal-combobox-id-02",label:"Status","aria-controls":"horizontal-listbox-id-02",readonly:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:i().createElement(H.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:i().createElement(j.Ay,{id:"horizontal-listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"checkbox-group",label:"Personalization Settings",value:"Disable end user personalization",component:i().createElement(u.LB,{isHorizontal:!0,label:"App Personalization Settings",isEditing:!0},i().createElement(f.Sc,{label:"Disable end user personalization",name:"default",checked:!0}),i().createElement(f.Sc,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:i().createElement(u.ZS,{isHorizontal:!0,labelContent:"SLA Serial Number",inputId:"horizontal-form-element-id-02",hasTooltip:!0,isEditing:!0},i().createElement(p.A,{id:"horizontal-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:i().createElement(u.ZS,{isHorizontal:!0,isEditing:!0,formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"horizontal-form-element-id-03",hasRightIcon:!0},i().createElement(p.A,{id:"horizontal-form-element-id-03",defaultValue:"1/1/2018"}),i().createElement(c.A,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:i().createElement(u.ZS,{isHorizontal:!0,labelContent:"Description",inputId:"horizontal-form-element-id-14",isEditing:!0,column:1},i().createElement(_,{id:"horizontal-form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",component:i().createElement(w,{labelContent:"Location",isEditing:!0,isHorizontal:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-2"},i().createElement(u.ZS,{labelContent:"Longitude",inputId:"horizontal-location-longitude-01"},i().createElement(p.A,{id:"horizontal-location-longitude-01",defaultValue:"10.283"}))),i().createElement("div",{className:"slds-size_1-of-2"},i().createElement(u.ZS,{labelContent:"Latitude",inputId:"horizontal-location-latitude-01"},i().createElement(p.A,{id:"horizontal-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:i().createElement(O.KF,{isStacked:!0,isEditing:!0,dataSet:O.Wz,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:i().createElement(w,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-1"},i().createElement(u.ZS,{labelContent:"Billing Street",inputId:"horizontal-form-element-id-04"},i().createElement(_,{id:"horizontal-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Billing City",inputId:"horizontal-form-element-id-05"},i().createElement(p.A,{id:"horizontal-form-element-id-05",defaultValue:"Burlington",required:!0}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Billing State/Province",inputId:"horizontal-form-element-id-06"},i().createElement(p.A,{id:"horizontal-form-element-id-06",defaultValue:"NC",required:!0})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Billing Zip/Postal Code",inputId:"horizontal-form-element-id-07"},i().createElement(p.A,{id:"horizontal-form-element-id-07",defaultValue:"27215",required:!0}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Billing Country",inputId:"horizontal-form-element-id-08"},i().createElement(p.A,{id:"horizontal-form-element-id-08",defaultValue:"USA",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:i().createElement(w,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-1"},i().createElement(u.ZS,{labelContent:"Shipping Street",inputId:"horizontal-form-element-id-09"},i().createElement(_,{id:"horizontal-form-element-id-09",defaultValue:"312 Constitution Place"})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Shipping City",inputId:"horizontal-form-element-id-10"},i().createElement(p.A,{id:"horizontal-form-element-id-10",defaultValue:"Austin"}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Shipping State/Province",inputId:"horizontal-form-element-id-11"},i().createElement(p.A,{id:"horizontal-form-element-id-11",defaultValue:"TX"})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Shipping Zip/Postal Code",inputId:"horizontal-form-element-id-12"},i().createElement(p.A,{id:"horizontal-form-element-id-12",defaultValue:"78767"}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Shipping Country",inputId:"horizontal-form-element-id-13"},i().createElement(p.A,{id:"horizontal-form-element-id-13",defaultValue:"USA"})))))}]}]},J={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",component:i().createElement(u.ZS,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isEditing:!0},i().createElement(p.A,{id:"horizontal-form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers"}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:i().createElement(M.Ay,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-01",isEditing:!0,autocomplete:!0,inputIconPosition:"right",rightInputIcon:i().createElement(c.A,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:i().createElement(j.Ay,{id:"horizontal-listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"text",label:"Account Name",value:"",isRequired:!0,component:i().createElement(u.ZS,{isRequired:!0,isHorizontal:!0,labelContent:"Account Name",inputId:"horizontal-form-element-id-02",isEditing:!0,hasError:!0,errorId:"horizontal-form-element-error-id-01",inlineMessage:"Complete this field"},i().createElement(p.A,{id:"horizontal-form-element-id-02",defaultValue:""}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:i().createElement(w,{labelContent:"Date and Time",isAddress:!0,isEditing:!0,isRequired:!0,isHorizontal:!0,hasError:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_3-of-6"},i().createElement(u.ZS,{isEditing:!0,labelContent:"Date",inputId:"horizontal-form-element-id-03",hasRightIcon:!0,hasError:!0,errorId:"horizontal-form-element-error-id-04",inlineMessage:"Complete this field"},i().createElement(p.A,{id:"horizontal-form-element-id-03"}),i().createElement(c.A,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))),i().createElement("div",{className:"slds-size_3-of-6"},i().createElement(M.Ay,{id:"horizontal-combobox-id-03","aria-controls":"stacked-listbox-id-03",autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",hasError:!0,rightInputIcon:i().createElement(H.eX,{symbol:"clock",className:"slds-icon slds-icon_x-small slds-icon-text-default slds-icon-text-error",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:i().createElement(j.Ay,{className:"slds-dropdown_fluid slds-dropdown_left",id:"stacked-listbox-id-03",snapshot:{option1:{name:"7:00am"},option2:{name:"8:00am"},option3:{name:"9:00am"},option4:{name:"10:00am"},option5:{name:"11:00am"},option6:{name:"12:00pm"}},type:"plain",count:6,visualSelection:!0}),resultsType:"listbox",hasInteractions:!0,hasFocus:!1}))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:i().createElement(u.ZS,{isHorizontal:!0,labelContent:"Description",inputId:"horizontal-form-element-id-14",isEditing:!0,hasError:!0,errorId:"horizontal-form-element-error-id-04",inlineMessage:"Complete this field",column:1},i().createElement(_,{id:"horizontal-form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:i().createElement(w,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isHorizontal:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-1"},i().createElement(u.ZS,{labelContent:"Billing Street",inputId:"horizontal-form-element-id-04"},i().createElement(_,{id:"horizontal-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_3-of-6"},i().createElement(u.ZS,{labelContent:"Billing City",inputId:"horizontal-form-element-id-05",hasError:!0,errorId:"horizontal-form-element-error-id-02",inlineMessage:"Complete this field"},i().createElement(p.A,{id:"horizontal-form-element-id-05",required:!0}))),i().createElement("div",{className:"slds-size_3-of-6"},i().createElement(u.ZS,{labelContent:"Billing State/Province",inputId:"horizontal-form-element-id-06",hasError:!0,errorId:"horizontal-form-element-error-id-03",inlineMessage:"Complete this field"},i().createElement(p.A,{id:"horizontal-form-element-id-06",required:!0})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_3-of-6"},i().createElement(u.ZS,{labelContent:"Billing Zip/Postal Code",inputId:"horizontal-form-element-id-07"},i().createElement(p.A,{id:"horizontal-form-element-id-07",defaultValue:"27215",required:!0}))),i().createElement("div",{className:"slds-size_3-of-6"},i().createElement(u.ZS,{labelContent:"Billing Country",inputId:"horizontal-form-element-id-08",hasError:!0,errorId:"horizontal-form-element-error-id-04",inlineMessage:"Complete this field"},i().createElement(p.A,{id:"horizontal-form-element-id-08",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:i().createElement(w,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isHorizontal:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-1"},i().createElement(u.ZS,{labelContent:"Shipping Street",inputId:"horizontal-form-element-id-09"},i().createElement(_,{id:"horizontal-form-element-id-09",defaultValue:"312 Constitution Place"})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Shipping City",inputId:"horizontal-form-element-id-10"},i().createElement(p.A,{id:"horizontal-form-element-id-10",defaultValue:"Austin"}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Shipping State/Province",inputId:"horizontal-form-element-id-11"},i().createElement(p.A,{id:"horizontal-form-element-id-11",defaultValue:"TX"})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Shipping Zip/Postal Code",inputId:"horizontal-form-element-id-12"},i().createElement(p.A,{id:"horizontal-form-element-id-12",defaultValue:"78767"}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Shipping Country",inputId:"horizontal-form-element-id-13"},i().createElement(p.A,{id:"horizontal-form-element-id-13",defaultValue:"USA"})))))}]}]},W={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,column:1,component:i().createElement(u.ZS,{inputId:"form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},i().createElement(p.A,{id:"form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))}]},{fields:[{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,column:1,component:i().createElement(M.Ay,{id:"combobox-id-01",label:"Team Name","aria-controls":"listbox-id-01",autocomplete:!0,inputIconPosition:"right",rightInputIcon:i().createElement(c.A,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:i().createElement(j.Ay,{id:"listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:i().createElement(H.eX,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),column:1,component:i().createElement(D.L,{labelContent:"Security Assessment Required?",isEditing:!0})}]},{fields:[{type:"picklist",label:"Status",column:1,component:i().createElement(M.Ay,{id:"combobox-id-02",label:"Status","aria-controls":"listbox-id-02",readonly:!0,inputIconPosition:"right",rightInputIcon:i().createElement(H.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:i().createElement(j.Ay,{id:"listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"text",label:"Reference Image",value:"The URL for the image is https://www.google.com/imgres?imgurl=https%3A%2F%2Fis1-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple128%2Fv4%2F50%2F98%2Fb6%2F5098b62e-b26d-6d0e-bda4-26a85c42fe1f%2FAppIcon-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-3.png%2F246x0w.jpg&imgrefurl=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fflower%2Fid1279174518%3Fmt%3D8&docid=2fZCCC_Ugr43lM&tbnid=9soMHOA780_ooM%3A&vet=10ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA..i&w=246&h=246&bih=1320&biw=1280&q=flower&ved=0ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA&iact=mrc&uact=8",column:1,component:i().createElement(u.ZS,{labelContent:"Reference Image",inputId:"form-element-id-15",isStacked:!0,isEditing:!0},i().createElement(_,{id:"form-element-id-15",defaultValue:"The URL for the image is https://www.google.com/imgres?imgurl=https%3A%2F%2Fis1-ssl.mzstatic.com%2Fimage%2Fthumb%2FPurple128%2Fv4%2F50%2F98%2Fb6%2F5098b62e-b26d-6d0e-bda4-26a85c42fe1f%2FAppIcon-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-3.png%2F246x0w.jpg&imgrefurl=https%3A%2F%2Fitunes.apple.com%2Fus%2Fapp%2Fflower%2Fid1279174518%3Fmt%3D8&docid=2fZCCC_Ugr43lM&tbnid=9soMHOA780_ooM%3A&vet=10ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA..i&w=246&h=246&bih=1320&biw=1280&q=flower&ved=0ahUKEwiJzc206-PcAhVYIjQIHcJsB3YQMwjxASgAMAA&iact=mrc&uact=8"}))}]},{fields:[{type:"richtext",label:"Rich Text Output",column:1,value:i().createElement("div",{className:"slds-rich-text-editor__output"},i().createElement("p",null,"Here's a big image"),i().createElement("p",null,i().createElement("img",{src:"/assets/images/themes/oneSalesforce/banner-group-public-default.png",alt:""})))}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,column:1,component:i().createElement(u.ZS,{labelContent:"SLA Serial Number",inputId:"form-element-id-02",hasTooltip:!0,isEditing:!0},i().createElement(p.A,{id:"form-element-id-02",defaultValue:"5367"}))}]},{fields:[{type:"date",label:"SLA Expiration Date",value:"1/1/2018",column:1,component:i().createElement(u.ZS,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"form-element-id-03",hasRightIcon:!0},i().createElement(p.A,{id:"form-element-id-03",defaultValue:"1/1/2018"}),i().createElement(c.A,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",column:1,component:i().createElement(w,{labelContent:"Location",isEditing:!0,isHorizontal:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-2"},i().createElement(u.ZS,{labelContent:"Longitude",inputId:"location-longitude-01"},i().createElement(p.A,{id:"location-longitude-01",defaultValue:"10.283"}))),i().createElement("div",{className:"slds-size_1-of-2"},i().createElement(u.ZS,{labelContent:"Latitude",inputId:"location-latitude-01"},i().createElement(p.A,{id:"location-latitude-01",defaultValue:"54.293"})))))}]},{fields:[{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",column:1,component:i().createElement(O.KF,{dataSet:O.Wz,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,column:1,component:i().createElement(w,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-1"},i().createElement(u.ZS,{labelContent:"Billing Street",inputId:"form-element-id-04"},i().createElement(_,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Billing City",inputId:"form-element-id-05"},i().createElement(p.A,{id:"form-element-id-05",defaultValue:"Burlington",required:!0}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Billing State/Province",inputId:"form-element-id-06"},i().createElement(p.A,{id:"form-element-id-06",defaultValue:"NC",required:!0})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},i().createElement(p.A,{id:"form-element-id-07",defaultValue:"27215",required:!0}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Billing Country",inputId:"form-element-id-08"},i().createElement(p.A,{id:"form-element-id-08",defaultValue:"USA",required:!0})))))}]},{fields:[{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,column:1,component:i().createElement(w,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-1"},i().createElement(u.ZS,{labelContent:"Shipping Street",inputId:"form-element-id-09"},i().createElement(_,{id:"form-element-id-09",defaultValue:"312 Constitution Place"})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Shipping City",inputId:"form-element-id-10"},i().createElement(p.A,{id:"form-element-id-10",defaultValue:"Austin"}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Shipping State/Province",inputId:"form-element-id-11"},i().createElement(p.A,{id:"form-element-id-11",defaultValue:"TX"})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Shipping Zip/Postal Code",inputId:"form-element-id-12"},i().createElement(p.A,{id:"form-element-id-12",defaultValue:"78767"}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Shipping Country",inputId:"form-element-id-13"},i().createElement(p.A,{id:"form-element-id-13",defaultValue:"USA"})))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:i().createElement(u.ZS,{labelContent:"Description",inputId:"form-element-id-14",isStacked:!0,isEditing:!0},i().createElement(_,{id:"form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},G={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:i().createElement(u.ZS,{inputId:"form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},i().createElement(p.A,{id:"form-element-id-01",readOnly:!0,defaultValue:"Jack Rogers",required:!0}))},{type:"lookup",label:"Team Name",value:"Salesforce Lightning Design System",link:!0,component:i().createElement(M.Ay,{id:"combobox-id-01",label:"Team Name","aria-controls":"listbox-id-01",autocomplete:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:i().createElement(c.A,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:i().createElement(j.Ay,{id:"listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:"False",component:i().createElement(D.L,{labelContent:"Security Assessment Required?",isEditing:!0})},{type:"picklist",label:"Status",component:i().createElement(M.Ay,{id:"combobox-id-02",label:"Status",value:"In Progress","aria-controls":"listbox-id-02",readonly:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:i().createElement(H.eX,{symbol:"down",className:"slds-icon slds-icon_x-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:i().createElement(j.Ay,{id:"listbox-id-02",snapshot:{},type:"plain",count:2,visualSelection:!0}),resultsType:"listbox"})}]},{fields:[{type:"checkbox-group",label:"Personalization Settings",value:"Disable end user personalization",component:i().createElement(u.LB,{label:"App Personalization Settings",isEditing:!0},i().createElement(f.Sc,{label:"Disable end user personalization",name:"default",checked:!0}),i().createElement(f.Sc,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:i().createElement(u.ZS,{labelContent:"SLA Serial Number",inputId:"form-element-id-02",hasTooltip:!0,isEditing:!0},i().createElement(p.A,{id:"form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:i().createElement(u.ZS,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"form-element-id-03",hasRightIcon:!0,isEditing:!0},i().createElement(p.A,{id:"form-element-id-03",defaultValue:"1/1/2018"}),i().createElement(c.A,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date"}))}]},{fields:[{type:"location",label:"Location",value:"10.283, 54.293",component:i().createElement(u.LB,{label:"Location",isEditing:!0,hasCompoundFields:!0,isDeprecated:!0},i().createElement("div",{className:"slds-form-element__group"},i().createElement("div",{className:"slds-form-element__row"},i().createElement(u.ZS,{formElementClassName:"slds-size_1-of-2",labelContent:"Longitude",inputId:"location-longitude-01"},i().createElement(p.A,{id:"location-longitude-01",defaultValue:"10.283"})),i().createElement(u.ZS,{formElementClassName:"slds-size_1-of-2",labelContent:"Latitude",inputId:"location-latitude-01"},i().createElement(p.A,{id:"location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:i().createElement(O.KF,{isEditing:!0,dataSet:O.Wz,isResponsive:!0,isStacked:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:i().createElement(u.LB,{label:"Billing Address",isRequired:!0,isEditing:!0,isStacked:!0,isAddress:!0,hasTooltip:!0,hasCompoundFields:!0,isDeprecated:!0},i().createElement("div",{className:"slds-form-element__group"},i().createElement("div",{className:"slds-form-element__row"},i().createElement(u.ZS,{formElementClassName:"slds-size_1-of-1",labelContent:"Billing Street",inputId:"form-element-id-04"},i().createElement(_,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0}))),i().createElement("div",{className:"slds-form-element__row"},i().createElement(u.ZS,{formElementClassName:"slds-size_4-of-6",labelContent:"Billing City",inputId:"form-element-id-05"},i().createElement(p.A,{id:"form-element-id-05",defaultValue:"Burlington",required:!0})),i().createElement(u.ZS,{formElementClassName:"slds-size_2-of-6",labelContent:"Billing State/Province",inputId:"form-element-id-06"},i().createElement(p.A,{id:"form-element-id-06",defaultValue:"NC",required:!0}))),i().createElement("div",{className:"slds-form-element__row"},i().createElement(u.ZS,{formElementClassName:"slds-size_4-of-6",labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},i().createElement(p.A,{id:"form-element-id-07",defaultValue:"27215",required:!0})),i().createElement(u.ZS,{formElementClassName:"slds-size_2-of-6",labelContent:"Billing Country",inputId:"form-element-id-08"},i().createElement(p.A,{id:"form-element-id-08",defaultValue:"USA",required:!0})))))},{type:"address",label:"Shipping Address",value:["312 Constitution Place","Austin, TX 78767","USA"],link:!0,component:i().createElement(u.LB,{label:"Shipping Address",isEditing:!0,isStacked:!0,isAddress:!0,hasCompoundFields:!0,isDeprecated:!0},i().createElement("div",{className:"slds-form-element__group"},i().createElement("div",{className:"slds-form-element__row"},i().createElement(u.ZS,{formElementClassName:"slds-size_1-of-1",labelContent:"Shipping Street",inputId:"form-element-id-09"},i().createElement(_,{id:"form-element-id-09",defaultValue:"312 Constitution Place"}))),i().createElement("div",{className:"slds-form-element__row"},i().createElement(u.ZS,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping City",inputId:"form-element-id-10"},i().createElement(p.A,{id:"form-element-id-10",defaultValue:"Austin"})),i().createElement(u.ZS,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping State/Province",inputId:"form-element-id-11"},i().createElement(p.A,{id:"form-element-id-11",defaultValue:"TX"}))),i().createElement("div",{className:"slds-form-element__row"},i().createElement(u.ZS,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping Zip/Postal Code",inputId:"form-element-id-12"},i().createElement(p.A,{id:"form-element-id-12",defaultValue:"78767"})),i().createElement(u.ZS,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping Country",inputId:"form-element-id-13"},i().createElement(p.A,{id:"form-element-id-13",defaultValue:"USA"})))))}]},{fields:[{type:"textarea",label:"Description",value:["Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."],column:1,component:i().createElement(u.ZS,{labelContent:"Description",inputId:"form-element-id-14",isStacked:!0,isEditing:!0,column:1},i().createElement(_,{id:"form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},Q="Stacked",K=("".concat(Q," - Default"),"".concat(Q),"".concat(Q," - Edit Mode"),"".concat(Q),[{id:"stacked-single-column",label:"".concat(Q," - 1 column Read Only"),context:"".concat(Q),element:i().createElement(R,{direction:"stacked",snapshot:W,isViewMode:!0})},{id:"stacked-single-column-in-narrow-container",label:"".concat(Q," - 1 column - In narrow container"),context:"".concat(Q),demoStyles:"max-width: 280px;",storybookStyles:!0,element:i().createElement(R,{direction:"stacked",snapshot:U})},{id:"deprecated-view-stacked",label:"".concat(Q," - View Mode (Deprecated)"),context:"Deprecated",element:i().createElement(R,{direction:"stacked",snapshot:G,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-stacked",label:"Deprecated - Stacked form layout - Edit Mode",context:"Deprecated",element:i().createElement(R,{direction:"stacked",snapshot:G,isDeprecated:!0})},{id:"simple-stacked",label:"".concat(Q," - Simple form layout"),context:"".concat(Q),element:i().createElement("div",{className:"slds-form"},i().createElement(u.ZS,{labelContent:"Text Input",inputId:"stacked-input-id-01",isStacked:!0},i().createElement(p.A,{id:"stacked-input-id-01",placeholder:"Placeholder text…"})),i().createElement(u.ZS,{labelContent:"Textarea Input",inputId:"stacked-input-id-02",isStacked:!0},i().createElement(_,{id:"stacked-input-id-02",placeholder:"Placeholder text…"})),i().createElement(u.LB,{label:"Checkbox Group Label",isStacked:!0},i().createElement(f.Sc,{label:"All opportunities owned by you",name:"default"}),i().createElement(f.Sc,{label:"All contacts in the account owned by you",name:"default"})),i().createElement(u.LB,{label:"Radio Group Label",isStacked:!0},i().createElement(z.sx,{label:"Lead generation",name:"options"}),i().createElement(z.sx,{label:"Education leads",name:"options"})))},{id:"stacked",label:"".concat(Q," - View Mode"),context:"".concat(Q),element:i().createElement(R,{direction:"stacked",snapshot:U,isViewMode:!0,hasInlineEdit:!0})}]),Y="Horizontal",$=("".concat(Y," - Default"),"".concat(Y),[{id:"edit-horizontal",label:"".concat(Y," - Edit Mode"),context:"".concat(Y),element:i().createElement(R,{direction:"horizontal",snapshot:X})},{id:"form-element-horizontal-edit-error",label:"".concat(Y," - (Edit Mode with Error)"),context:"".concat(Y),element:i().createElement(R,{direction:"horizontal",snapshot:J})}]),ee=[{id:"horizontal-single-column",label:"".concat(Y," - 1 column - Read Only Mode"),context:"".concat(Y),element:i().createElement(R,{direction:"horizontal",snapshot:W,isViewMode:!0})},{id:"deprecated-view-horizontal",label:"".concat(Y," - View Mode (Deprecated)"),context:"Deprecated",element:i().createElement(R,{direction:"horizontal",snapshot:G,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-horizontal",label:"".concat(Y," - Edit Mode (Deprecated)"),context:"Deprecated",element:i().createElement(R,{direction:"horizontal",snapshot:G,isDeprecated:!0})},{id:"simple-horizontal",label:"".concat(Y," - Simple form layout"),context:"".concat(Y),element:i().createElement("div",{className:"slds-form"},i().createElement(u.ZS,{labelContent:"Text Input",inputId:"horizontal-input-id-01",isHorizontal:!0},i().createElement(p.A,{id:"horizontal-input-id-01",placeholder:"Placeholder text…"})),i().createElement(u.ZS,{labelContent:"Textarea Input",inputId:"horizontal-input-id-02",isHorizontal:!0},i().createElement(_,{id:"horizontal-input-id-02",placeholder:"Placeholder text…"})),i().createElement(u.LB,{label:"Checkbox Group Label",isHorizontal:!0},i().createElement(f.Sc,{label:"All opportunities owned by you",name:"default"}),i().createElement(f.Sc,{label:"All contacts in the account owned by you",name:"default"})),i().createElement(u.LB,{label:"Radio Group Label",isHorizontal:!0},i().createElement(z.sx,{label:"Lead generation",name:"options"}),i().createElement(z.sx,{label:"Education leads",name:"options"})))},{id:"horizontal",label:"".concat(Y," - View Mode"),element:i().createElement(R,{direction:"horizontal",snapshot:X,isViewMode:!0,hasInlineEdit:!0})}];E().bool,E().bool;var te="Compound",le=[{id:"compound-default",label:"".concat(te," - Default"),context:"".concat(te),element:i().createElement(w,{labelContent:"Location"},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-2"},i().createElement(u.ZS,{labelContent:"Latitude",inputId:"input-01"},i().createElement(p.A,{id:"input-01"}))),i().createElement("div",{className:"slds-size_1-of-2"},i().createElement(u.ZS,{labelContent:"Longitude",inputId:"input-02"},i().createElement(p.A,{id:"input-02"})))))}],ne=("".concat(te," - Required"),"".concat(te),u.ZS,p.A,u.ZS,p.A,"".concat(te," - Help text icon with tooltip"),"".concat(te),u.ZS,p.A,u.ZS,p.A,"".concat(te," - Error"),"".concat(te),u.ZS,p.A,u.ZS,p.A,"".concat(te," - Form Layout (Required)"),"".concat(te),"".concat(te," - Form Layout (Required with Tooltip Help)"),"".concat(te),u.LB,u.ZS,p.A,u.ZS,p.A,"".concat(te," - Form Layout"),"".concat(te),"Address"),ie=[{id:"address-default",label:"".concat(ne," - Default"),context:"".concat(ne),element:i().createElement(w,{labelContent:"Billing Address",isAddress:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-1"},i().createElement(u.ZS,{labelContent:"Billing Street",inputId:"form-element-id-01"},i().createElement(_,{id:"form-element-id-01",defaultValue:"525 S. Lexington Ave",required:!0})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Billing City",inputId:"form-element-id-02"},i().createElement(p.A,{id:"form-element-id-02",defaultValue:"Burlington",required:!0}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Billing State/Province",inputId:"form-element-id-03"},i().createElement(p.A,{id:"form-element-id-03",defaultValue:"NC",required:!0})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-04"},i().createElement(p.A,{id:"form-element-id-04",defaultValue:"27215",required:!0}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Billing Country",inputId:"form-element-id-05"},i().createElement(p.A,{id:"form-element-id-05",defaultValue:"USA",required:!0})))))},{id:"help-text",label:"".concat(ne," - Help text icon with tooltip"),context:"".concat(ne),element:i().createElement(w,{labelContent:"Billing Address",isAddress:!0,hasTooltip:!0},i().createElement(x,null,i().createElement("div",{className:"slds-size_1-of-1"},i().createElement(u.ZS,{labelContent:"Billing Street",inputId:"form-element-id-06"},i().createElement(_,{id:"form-element-id-06",defaultValue:"525 S. Lexington Ave",required:!0})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Billing City",inputId:"form-element-id-07"},i().createElement(p.A,{id:"form-element-id-07",defaultValue:"Burlington",required:!0}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Billing State/Province",inputId:"form-element-id-08"},i().createElement(p.A,{id:"form-element-id-08",defaultValue:"NC",required:!0})))),i().createElement(x,null,i().createElement("div",{className:"slds-size_4-of-6"},i().createElement(u.ZS,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-09"},i().createElement(p.A,{id:"form-element-id-09",defaultValue:"27215",required:!0}))),i().createElement("div",{className:"slds-size_2-of-6"},i().createElement(u.ZS,{labelContent:"Billing Country",inputId:"form-element-id-10"},i().createElement(p.A,{id:"form-element-id-10",defaultValue:"USA",required:!0})))))}],ae=("".concat(ne," - Required"),"".concat(ne),u.ZS,u.ZS,p.A,u.ZS,p.A,u.ZS,p.A,u.ZS,p.A,"".concat(ne," - Error"),"".concat(ne),u.ZS,u.ZS,p.A,u.ZS,p.A,u.ZS,p.A,u.ZS,p.A,l(9285)),oe=a.XB.a,re=a.XB.code,se=a.XB.em,de=a.XB.h2,me=a.XB.h3,ce=a.XB.h4,ue=a.XB.h5,pe=a.XB.p,fe=a.XB.strong,he=function(){return(0,n.createElement)(a.Ay,{},(0,n.createElement)("div",{className:"doc lead"},"A Form Element contains an HTML input element paired with a label."),(0,n.createElement)(o.A,{exampleOnly:!0},(0,n.createElement)(u.ZS,{labelContent:"Form Label",inputId:"form-element-showcase-01",isRequired:!0},(0,n.createElement)(p.A,{id:"form-element-showcase-01",placeholder:"Placeholder text…",required:!0}))),de({id:"About-Form-Elements"},"About Form Elements"),pe({},"The Form Element is initialized with ",re({},"slds-form-element")," and is made up of three primary pieces; a label (",re({},"slds-form-element__label"),"), a form control container (",re({},"slds-form-element__control"),"), and a form input element, i.e. ",re({},"<input>"),"."),me({id:"Form-Label"},"Form Label"),pe({},"A form label should use either the ",re({},"<label>")," or ",re({},"<legend>")," elements with the class ",re({},"slds-form-element__label"),". Use ",re({},"<legend>")," when you have a ",oe({href:"/components/form-element/#Compound"},"compound form"),"."),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("label",{className:"slds-form-element__label",htmlFor:"unique-id-of-input"},"Form label")),me({id:"Form-Control"},"Form Control"),pe({},"A form control is a ",re({},"div")," with the class ",re({},"slds-form-element__control"),". The control is required to maintain the structure of the Form Element."),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)("div",{className:"slds-form-element__control"},"Any form type goes here")),me({id:"Form-Input-Elements"},"Form Input Elements"),pe({},"There are many types of input elements that can be used in the Form Element, including ",oe({href:"/components/input"},"inputs"),", ",oe({href:"/components/textarea"},"text areas"),", ",oe({href:"/components/checkbox"},"checkboxes"),", and ",oe({href:"/components/radio-group"},"radio buttons"),". Visit the individual component pages for in-depth details of their specific states and visuals."),me({id:"Accessibility"},"Accessibility"),pe({},"All form elements marked as required with an * must have an accompanying legend."),pe({},"Example:\n",(0,n.createElement)(d.A,null)),pe({},"Labels must have the ",re({},"for")," attribute applied, and its value must match the ID of the associated form element, like ",re({},'<input id="unique-id-of-input" />'),". This association ensures that assistive technology informs users about what information to enter where."),me({id:"Mobile"},"Mobile"),(0,n.createElement)(ae.s9,{patternSpecificText:"form elements will have an increased size of label and info icon"}),(0,n.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for form elements"},(0,n.createElement)(u.ZS,{labelContent:"Form Label",inputId:"form-element-showcase-01",isRequired:!0},(0,n.createElement)(p.A,{id:"form-element-showcase-01",placeholder:"Placeholder text…",required:!0}))),de({id:"Base"},"Base"),(0,n.createElement)(s.A,{title:"Form Element - Base"},(0,n.createElement)(o.A,null,(0,n.createElement)(u.ZS,{labelContent:"Form Label",inputId:"form-element-01"},(0,n.createElement)(p.A,{id:"form-element-01",placeholder:"Placeholder text…"})))),de({id:"States"},"States"),me({id:"View-ModeStatic"},"View Mode/Static"),pe({},"If a form element requires a view mode or static state, instead of ",re({},"slds-form-element__label")," being a ",re({},"<label>")," element, we want to change the element to a ",re({},"<span>"),". This is because the form is no longer a form but a statically read name and value pair."),pe({},"The string inside of ",re({},"slds-form-element__control")," needs to be wrapped in a ",re({},"<div>")," as well, with the class ",re({},"slds-form-element__static")," applied to it."),pe({},"In addition to the structural changes — if the form element is standalone, you can ",se({},"optionally")," apply ",re({},"slds-form-element__readonly"),". The class will help spacing and separation between other form elements. This class is ",fe({},se({},"required"))," if the form element is in the context of a larger form composition."),(0,n.createElement)(s.A,{title:"Form Element - Readonly"},(0,n.createElement)(o.A,null,(0,n.createElement)(u.ZS,{labelContent:"Status",isViewMode:!0},(0,n.createElement)(u.vS,null,"In Progress")))),me({id:"Inline-Edit"},"Inline Edit"),pe({},"If the form element has inline editable capabilities, the form element will ",fe({},se({},"require"))," the class ",re({},"slds-form-element_edit"),". This will apply styles that help handle the structure of the additional elements, such as the button icon to switch the element out of view mode and into edit mode."),pe({},"In addition, we want to provide an interaction hint by increasing the contrast of the button icon on hover by adding ",re({},"slds-hint-parent")," to the form element. The button icon will also require the class ",re({},"slds-button__icon_hint"),". This will notify the form element that this is the element we want to provide an interaction hint for. For more implementation details, please refer to ",oe({href:"/components/button-icons/#Hint-on-hover"},"Button icon with hint on hover")),(0,n.createElement)(s.A,{title:"Form Element - Inline Edit"},(0,n.createElement)(o.A,null,(0,n.createElement)(u.ZS,{labelContent:"Status",isViewMode:!0,isEditable:!0,hasHint:!0},(0,n.createElement)(u.vS,null,"In Progress"),(0,n.createElement)(c.A,{iconClassName:"slds-button__icon_hint",symbol:"edit",assistiveText:"Edit: Status",title:"Edit: Status"})))),me({id:"Help-Text-Icon"},"Help Text Icon"),pe({},"A form element can have help text that will display in a tooltip when hovering or focusing on an icon."),pe({},"The icon comes in the form of a button icon so it can receive focus when a user tabs through a form with multiple form elements."),pe({},"The button icon is ",fe({},se({},"required"))," to be wrapped in a ",re({},"<div>")," with the class ",re({},"slds-form-element__icon")," and should be placed outside of the ",re({},"<label>")," element."),(0,n.createElement)(s.A,{title:"Form Element - Help Text Icon"},(0,n.createElement)(o.A,null,(0,n.createElement)(u.ZS,{labelContent:"Status",inputId:"form-element-help-01",hasTooltip:!0},(0,n.createElement)(p.A,{id:"form-element-help-01",placeholder:"Placeholder text…"})))),(0,n.createElement)(ae.Rl,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"form elements with a help text icon"}),(0,n.createElement)(o.A,{frameOnly:!0,frameTitle:"Example mobile styles for form elements with help text icon"},(0,n.createElement)(u.ZS,{labelContent:"Status",inputId:"form-element-help-01m",hasTooltip:!0},(0,n.createElement)(p.A,{id:"form-element-help-01m",placeholder:"Placeholder text…"}))),ce({id:"Showing-tooltip"},"Showing tooltip"),pe({},"The help text icon uses a tooltip to show the help text information. Please see ",oe({href:"/components/tooltips/"},"Tooltips")," for implementation details.\nTo give help text information the attribute ",re({},"fieldLevelMessage"),' can be used on the FormElement element.\n<Example title="Form Element - Help Text Icon - Showing tooltip">'),(0,n.createElement)(o.A,{demoStyles:"padding-top: 4rem;"},(0,n.createElement)(u.ZS,{labelContent:"Status",inputId:"tooltip-showing-form-element-help-01",hasTooltip:!0,showTooltip:!0},(0,n.createElement)(p.A,{id:"tooltip-showing-form-element-help-01",placeholder:"Placeholder text…"}))),pe({},"</Example>"),me({id:"Feedback"},"Feedback"),pe({},"A form element can have various methods of feedback, such as a required denotation or an inline error message."),ce({id:"Required"},"Required"),pe({},"When a form element is required, an ",re({},"<abbr>")," should be injected before the ",re({},"<input>")," and within the ",re({},"<label>")," and have the class ",re({},"slds-required"),"."),pe({},"The ",re({},"<input>")," element should also have the HTML attribute ",re({},"required")," or ",re({},'required=""'),". Similarly, if it is disabled, it should have the ",re({},"disabled")," or ",re({},'disabled=""')," attribute. Do not use true/false values inside the ",re({},"required")," or ",re({},"disabled")," attributes because the mere presence of these attributes signifies the field is required or disabled."),(0,n.createElement)(s.A,{title:"Form Element - Required"},(0,n.createElement)(o.A,null,(0,n.createElement)(u.ZS,{labelContent:"Form Label",inputId:"form-element-03",isRequired:!0},(0,n.createElement)(p.A,{id:"form-element-03",placeholder:"Placeholder text…",required:!0})))),ce({id:"Error"},"Error"),pe({},"If an error has occurred while submitting a form, the form element with an error should provide feedback. The ",re({},"slds-has-error")," class is placed on the ",re({},'<div class="slds-form-element">')," element. Then, the error message for the user is placed in a ",re({},"<div>")," with the ",re({},"slds-form-element__help")," class."),(0,n.createElement)(m.A,{type:"a11y",header:"Accessibility requirement"},(0,n.createElement)("p",null,"When a form element displays feedback notifying the user of an error, the error string should be linked to the element by adding the"," ",(0,n.createElement)("code",null,"aria-describedby")," attribute to the ",(0,n.createElement)("code",null,"<input>"),". The `aria-describedby` attribute must reference the id of the error message. This configuration allows screen readers to read the associated error message when the invalid field is focused.")),(0,n.createElement)(s.A,{title:"Form Element - Error"},(0,n.createElement)(o.A,null,(0,n.createElement)(u.ZS,{hasError:!0,labelContent:"Form Label",inputId:"form-element-05",errorId:"form-error-01",isRequired:!0,inlineMessage:"Enter a value."},(0,n.createElement)(p.A,{id:"form-element-05",placeholder:"Placeholder text…",required:!0,"aria-describedby":"form-error-01"})))),de({id:"Layout-Variations"},"Layout Variations"),pe({},"If your form has more than one form element, you can switch the direction of ",re({},"slds-form-element__label")," and ",re({},"slds-form-element__control")," by applying ",re({},"slds-form-element_stacked")," for stacked labels and ",re({},"slds-form-element_horizontal")," for left-aligned labels. For optimal spacing and layout, ensure the ",re({},"slds-form-element")," class is present on each element within the form."),me({id:"Stacked"},"Stacked"),pe({},"To vertically stack ",(0,n.createElement)("code",null,"<label>")," and ",(0,n.createElement)("code",null,"<input>")," pairs, place ",re({},"slds-form-element_stacked")," on the ",re({},"div")," with the class of ",re({},"slds-form-element")," for optimal spacing."),(0,n.createElement)(s.A,{title:"Form Layout - Stacked"},(0,n.createElement)(o.A,null,(0,I.NO)(K,"simple-stacked"))),me({id:"Horizontal"},"Horizontal"),pe({},"To horizontally align a ",re({},"<label>")," and ",re({},"<input>"),", use the ",re({},"slds-form-element_horizontal")," class on the ",re({},"div")," with the class of ",re({},"slds-form-element"),". The ",re({},"slds-form-element__label")," takes up 33% of the width, and the ",re({},"slds-form-element__control")," uses the remaining 66%."),(0,n.createElement)(s.A,{title:"Form Layout - Horizontal"},(0,n.createElement)(o.A,null,(0,I.NO)(ee,"simple-horizontal"))),ce({id:"Single-Column-Support"},"Single Column Support"),pe({},"When using ",re({},"slds-form-element_horizontal"),", you might find that the 33/66% distribution of the label to control might be too much in a single column form when displayed in a larger region. Another scenario where single column support would be useful is when a form element spans 100% while the other form elements in your form are 50/50 split. To reduce the distribution and/or align with 50/50 split form elements, adding the class ",re({},"slds-form-element_1-col")," to ",re({},"slds-form-element")," will re-distribute the layout."),ue({id:"Standalone"},"Standalone"),(0,n.createElement)(s.A,{title:"Form Layout - Horizontal - Single Column standalone"},(0,n.createElement)(o.A,null,(0,n.createElement)(u.ZS,{isHorizontal:!0,labelContent:"Description",inputId:"single-form-element-id-01",isEditing:!0,column:1},(0,n.createElement)(_,{id:"single-form-element-id-01",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."})))),ue({id:"With-5050-split"},"With 50/50 split"),(0,n.createElement)(s.A,{title:"Form Layout - Horizontal - Single Column combo"},(0,n.createElement)(o.A,null,(0,n.createElement)("div",{className:"slds-form",role:"list"},(0,n.createElement)(P,null,(0,n.createElement)(V,null,(0,n.createElement)(u.ZS,{isHorizontal:!0,labelContent:"Label",inputId:"single-form-element-id-02",isEditing:!0},(0,n.createElement)(p.A,{id:"single-form-element-id-02",placeholder:"Placeholder text…"}))),(0,n.createElement)(V,null,(0,n.createElement)(u.ZS,{isHorizontal:!0,labelContent:"Label",inputId:"single-form-element-id-03",isEditing:!0},(0,n.createElement)(p.A,{id:"single-form-element-id-03",placeholder:"Placeholder text…"})))),(0,n.createElement)(P,null,(0,n.createElement)(V,null,(0,n.createElement)(u.ZS,{isHorizontal:!0,labelContent:"Description",inputId:"single-form-element-id-04",isEditing:!0,column:1},(0,n.createElement)(_,{id:"single-form-element-id-04",placeholder:"Placeholder text…",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))))))),ce({id:"Error-state"},"Error state"),pe({},"When in the horizontal layout, error messages will appear underneath the related input."),(0,n.createElement)(o.A,null,(0,I.NO)($,"form-element-horizontal-edit-error")),me({id:"Compound"},"Compound"),pe({},"A compound form is a grouping of several form elements described by a label/title. The compound form should be implemented as a ",re({},"<fieldset>"),", where the label/title is implemented as a ",re({},"<legend>")," element."),pe({},"The ",re({},"<fieldset>")," ",fe({},se({},"requires"))," the class ",re({},"slds-form-element_compound"),". This class handles the layout and wrapping of the form elements that are grouped together."),pe({},"The ",re({},"<legend>")," element ",fe({},se({},"requires"))," the class ",re({},"slds-form-element__legend"),". Legend elements can only accept a limited amount of CSS properties so this class is there to help manage its layout."),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)(u.LB,{hasCompoundFields:!0,label:"Fieldset Label"},"...")),ce({id:"Rows"},"Rows"),pe({},"Each row of a compound field should be wrapped in a ",re({},"<div>")," with the class ",re({},"slds-form-element__row"),"."),ce({id:"Fields"},"Fields"),pe({},"Each field inside of a compound row can be explicitly sized by using a sizing class, e.g. ",re({},"slds-size_1-of-2"),"."),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)(x,null,(0,n.createElement)("div",{className:"slds-size_1-of-2"},"..."))),(0,n.createElement)(s.A,{title:"Form Layout - Compound"},(0,n.createElement)(o.A,{demoStyles:"max-width: 400px;"},(0,I.NO)(le))),ce({id:"Address"},"Address"),pe({},"Though an address form is utilizing the ",re({},"slds-form-element_compound")," class, we need to also add the ",re({},"slds-form-element_address")," class to the component. We modify some of the behavior of an address form with this class."),(0,n.createElement)(s.A,{title:"Form Layout - Compound - Address"},(0,n.createElement)(o.A,{demoStyles:"max-width: 400px;"},(0,I.NO)(ie))),de({id:"Usage-Examples"},"Usage Examples"),me({id:"Record-Form"},"Record Form"),pe({},"A record form is a series of rows created by ",re({},"slds-form__row"),". Inside of each row contains up to 2 inline-editable form element. Each item inside of ",re({},"slds-form__row")," is required to be wrapped in a ",re({},"<div>")," with the class ",re({},"slds-form__item"),"."),(0,n.createElement)(m.A,{type:"a11y",header:"Accessibility Requirement"},(0,n.createElement)("p",null,"Due to the nature of how the record form is composed, we need to notify screen readers that this is a list by adding ",(0,n.createElement)("code",null,'role="list"')," to the"," ",(0,n.createElement)("code",null,"slds-form")," element. Every column inside of each row should get"," ",(0,n.createElement)("code",null,'role="listitem"')," to identify itself as items of the list.")),ce({id:"View-Mode"},"View Mode"),pe({},"When in view/readonly mode, it is ",se({},"required")," to have the class ",re({},"slds-form-element_readonly")," on the ",re({},"slds-form-element")," element. This class will provide styles for scanability and spacing."),pe({},"If inline-edit mode is enabled, you will also need to add ",re({},"slds-form-element_edit")," to the ",re({},"slds-form-element")," to accommodate the space for the edit button icon."),ue({id:"Stacked-Alignment"},"Stacked Alignment"),pe({},"When you want the form elements inside of your record form to be stacked. Each ",re({},"slds-form-element")," should also get the class ",re({},"slds-form-element_stacked"),"."),(0,n.createElement)(s.A,{title:"Form Element - Record Detail - View Mode"},(0,n.createElement)(o.A,null,(0,n.createElement)(R,{snapshot:U,isViewMode:!0,hasInlineEdit:!0,direction:"stacked"}))),ue({id:"Horizontal-Alignment"},"Horizontal Alignment"),pe({},"By adding the class ",re({},"slds-form-element_horizontal")," to every ",re({},"slds-form-element"),", your form can switch from stacked to left-aligned, horizontal labels in order to reduce vertical space."),(0,n.createElement)(s.A,{title:"Form Element - Record Detail - View Mode - Horizontal"},(0,n.createElement)(o.A,null,(0,n.createElement)(R,{snapshot:X,isViewMode:!0,hasInlineEdit:!0,direction:"horizontal"}))),ce({id:"Edit-Mode"},"Edit Mode"),pe({},"When a form switches to edit mode, we need to replace all readonly form elements with their semantic field type form element. The structure remains the same:"),(0,n.createElement)(r.A,{toggleCode:!1},(0,n.createElement)(u.ZS,{labelContent:"My Label",inputId:"unique-form-element-id"},"...")),pe({},"The form content found inside of ",re({},"slds-form-element__control")," should be replaced with the appropriate field type of the view/readonly state."),ue({id:"Stacked-Alignment-2"},"Stacked Alignment"),(0,n.createElement)(s.A,{title:"Form Element - Record Detail - Edit Mode"},(0,n.createElement)(o.A,null,(0,n.createElement)(R,{snapshot:U,direction:"stacked"}))),ue({id:"Horizontal-Alignment-2"},"Horizontal Alignment"),(0,n.createElement)(s.A,{title:"Form Element - Record Detail - Edit Mode - Horizontal"},(0,n.createElement)(o.A,null,(0,n.createElement)(R,{snapshot:X,direction:"horizontal"}))))},Ee=function(){return(0,a.Qr)(he())}},5206:function(e){e.exports=ReactDOM}},i={};function a(e){var t=i[e];if(void 0!==t)return t.exports;var l=i[e]={id:e,exports:{}};return n[e](l,l.exports,a),l.exports}a.m=n,a.amdO={},e=[],a.O=function(t,l,n,i){if(!l){var o=1/0;for(m=0;m<e.length;m++){l=e[m][0],n=e[m][1],i=e[m][2];for(var r=!0,s=0;s<l.length;s++)(!1&i||o>=i)&&Object.keys(a.O).every(function(e){return a.O[e](l[s])})?l.splice(s--,1):(r=!1,i<o&&(o=i));if(r){e.splice(m--,1);var d=n();void 0!==d&&(t=d)}}return t}i=i||0;for(var m=e.length;m>0&&e[m-1][2]>i;m--)e[m]=e[m-1];e[m]=[l,n,i]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},l=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},a.t=function(e,n){if(1&n&&(e=this(e)),8&n)return e;if("object"==typeof e&&e){if(4&n&&e.__esModule)return e;if(16&n&&"function"==typeof e.then)return e}var i=Object.create(null);a.r(i);var o={};t=t||[null,l({}),l([]),l(l)];for(var r=2&n&&e;("object"==typeof r||"function"==typeof r)&&!~t.indexOf(r);r=l(r))Object.getOwnPropertyNames(r).forEach(function(t){o[t]=function(){return e[t]}});return o.default=function(){return e},a.d(i,o),i},a.d=function(e,t){for(var l in t)a.o(t,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},a.e=function(){return Promise.resolve()},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=6006,function(){var e={6006:0};a.O.j=function(t){return 0===e[t]};var t=function(t,l){var n,i,o=l[0],r=l[1],s=l[2],d=0;if(o.some(function(t){return 0!==e[t]})){for(n in r)a.o(r,n)&&(a.m[n]=r[n]);if(s)var m=s(a)}for(t&&t(l);d<o.length;d++)i=o[d],a.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return a.O(m)},l=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),a.nc=void 0;var o=a.O(void 0,[3540],function(){return a(4471)});o=a.O(o),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/form-element/docs.mdx.js"]=o}();