npm - @salesforce-ux/design-system - Versions diffs - 2.17.2 → 2.17.3 - Mend

@salesforce-ux/design-system 2.17.2 → 2.17.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (963) hide show

package/__internal/chunked/docs/ui/components/form-element/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/form-element/docs.mdx.js"]=function(e){function t(t){for(var l,o,s=t[0],r=t[1],d=t[2],c=0,u=[];c<s.length;c++)o=s[c],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&u.push(n[o][0]),n[o]=0;for(l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);for(m&&m(t);u.length;)u.shift()();return i.push.apply(i,d\|\|[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],l=!0,s=1;s<a.length;s++){var r=a[s];0!==n[r]&&(l=!1)}l&&(i.splice(t--,1),e=o(o.s=a[0]))}return e}var l={},n={39:0},i=[];function o(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,o),a.l=!0,a.exports}o.m=e,o.c=l,o.d=function(e,t,a){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(o.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(a,l,function(t){return e[t]}.bind(null,l));return a},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=s.push.bind(s);s.push=t,s=s.slice();for(var d=0;d<s.length;d++)t(s[d]);var m=r;return i.push([652,0]),a()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},652:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return W})),a.d(t,"getContents",(function(){return Q}));var l=a(0),n=a.n(l),i=a(4),o=a(2),s=a(25),r=a(15),d=a(14),m=a(7),c=a(8),u=a(16),p=a(29),b=a(42),f=(a(46),a(5),a(33)),h=a(3),E=a.n(h),g=function(e){var t=e.children;return n.a.createElement("div",{className:"slds-form-element__row"},t)};g.propTypes={children:E.a.node.isRequired};var v=function(e){var t=e.isStacked,a=e.isHorizontal,l=e.isEditing,i=e.isRequired,o=e.isAddress,s=e.hasTooltip,r=e.hasError,d=e.errorId,m=e.inlineMessage,u=e.labelContent,p=e.children;return n.a.createElement(c.a,{hasCompoundFields:!0,isAddress:o,isStacked:t,isHorizontal:a,isEditing:l,isRequired:i,hasTooltip:s,hasError:r,errorId:d,inlineMessage:m,label:u},p)};v.propTypes={children:E.a.node.isRequired,isStacked:E.a.bool,isHorizontal:E.a.bool,isEditing:E.a.bool,isRequired:E.a.bool,isAddress:E.a.bool,hasTooltip:E.a.bool,hasError:E.a.bool,errorId:E.a.string,inlineMessage:E.a.string,labelContent:E.a.string};var y=a(51),C=a(75),S=a(34),_=a(22),z=a(23),x=a(11),A={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{inputId:"stacked-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.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:n.a.createElement(_.b,{id:"stacked-combobox-id-01",label:"Team Name","aria-controls":"stacked-listbox-id-01",autocomplete:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{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:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isEditing:!0,isStacked:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{id:"stacked-combobox-id-02",label:"Status","aria-controls":"stacked-listbox-id-02",readonly:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{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:n.a.createElement(c.a,{label:"App Personalization Settings",isEditing:!0,isStacked:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"stacked-form-element-id-02",hasTooltip:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.a,{id:"stacked-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{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},n.a.createElement(u.a,{id:"stacked-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{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:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"stacked-location-longitude-01"},n.a.createElement(u.a,{id:"stacked-location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"stacked-location-latitude-01"},n.a.createElement(u.a,{id:"stacked-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(S.j,{isEditing:!0,isStacked:!0,dataSet:S.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"stacked-form-element-id-04"},n.a.createElement(b.a,{id:"stacked-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"stacked-form-element-id-05"},n.a.createElement(u.a,{id:"stacked-form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"stacked-form-element-id-06"},n.a.createElement(u.a,{id:"stacked-form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"stacked-form-element-id-07"},n.a.createElement(u.a,{id:"stacked-form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"stacked-form-element-id-08"},n.a.createElement(u.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:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"stacked-form-element-id-09"},n.a.createElement(b.a,{id:"stacked-form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"stacked-form-element-id-10"},n.a.createElement(u.a,{id:"stacked-form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"stacked-form-element-id-11"},n.a.createElement(u.a,{id:"stacked-form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"stacked-form-element-id-12"},n.a.createElement(u.a,{id:"stacked-form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"stacked-form-element-id-13"},n.a.createElement(u.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:n.a.createElement(c.b,{labelContent:"Description",inputId:"stacked-form-element-id-14",isStacked:!0,isEditing:!0,column:1},n.a.createElement(b.a,{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."}))}]}]},w={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.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:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-01",isEditing:!0,autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{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:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isHorizontal:!0,isEditing:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-02",label:"Status","aria-controls":"horizontal-listbox-id-02",readonly:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{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:n.a.createElement(c.a,{isHorizontal:!0,label:"App Personalization Settings",isEditing:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"SLA Serial Number",inputId:"horizontal-form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{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},n.a.createElement(u.a,{id:"horizontal-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{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:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"horizontal-form-element-id-14",isEditing:!0,column:1},n.a.createElement(b.a,{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:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isHorizontal:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"horizontal-location-longitude-01"},n.a.createElement(u.a,{id:"horizontal-location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"horizontal-location-latitude-01"},n.a.createElement(u.a,{id:"horizontal-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(S.j,{isStacked:!0,isEditing:!0,dataSet:S.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"horizontal-form-element-id-04"},n.a.createElement(b.a,{id:"horizontal-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"horizontal-form-element-id-05"},n.a.createElement(u.a,{id:"horizontal-form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"horizontal-form-element-id-06"},n.a.createElement(u.a,{id:"horizontal-form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"horizontal-form-element-id-07"},n.a.createElement(u.a,{id:"horizontal-form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"horizontal-form-element-id-08"},n.a.createElement(u.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:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"horizontal-form-element-id-09"},n.a.createElement(b.a,{id:"horizontal-form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"horizontal-form-element-id-10"},n.a.createElement(u.a,{id:"horizontal-form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"horizontal-form-element-id-11"},n.a.createElement(u.a,{id:"horizontal-form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"horizontal-form-element-id-12"},n.a.createElement(u.a,{id:"horizontal-form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"horizontal-form-element-id-13"},n.a.createElement(u.a,{id:"horizontal-form-element-id-13",defaultValue:"USA"})))))}]}]},I={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",component:n.a.createElement(c.b,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isEditing:!0},n.a.createElement(u.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:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-01",isEditing:!0,autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{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:n.a.createElement(c.b,{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"},n.a.createElement(u.a,{id:"horizontal-form-element-id-02",defaultValue:""}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{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},n.a.createElement(u.a,{id:"horizontal-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{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:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"horizontal-form-element-id-14",isEditing:!0,column:1},n.a.createElement(b.a,{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."}))}]}]},k={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,column:1,component:n.a.createElement(c.b,{inputId:"form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.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:n.a.createElement(_.b,{id:"combobox-id-01",label:"Team Name","aria-controls":"listbox-id-01",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),column:1,component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isEditing:!0})}]},{fields:[{type:"picklist",label:"Status",column:1,component:n.a.createElement(_.b,{id:"combobox-id-02",label:"Status","aria-controls":"listbox-id-02",readonly:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{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:n.a.createElement(c.b,{labelContent:"Reference Image",inputId:"form-element-id-15",isStacked:!0,isEditing:!0},n.a.createElement(b.a,{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:n.a.createElement("div",{className:"slds-rich-text-editor__output"},n.a.createElement("p",null,"Here's a big image"),n.a.createElement("p",null,n.a.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:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"5367"}))}]},{fields:[{type:"date",label:"SLA Expiration Date",value:"1/1/2018",column:1,component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"form-element-id-03",hasRightIcon:!0},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{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:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isHorizontal:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"location-longitude-01"},n.a.createElement(u.a,{id:"location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"location-latitude-01"},n.a.createElement(u.a,{id:"location-latitude-01",defaultValue:"54.293"})))))}]},{fields:[{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",column:1,component:n.a.createElement(S.j,{dataSet:S.b,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:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-04"},n.a.createElement(b.a,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-06"},n.a.createElement(u.a,{id:"form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-08"},n.a.createElement(u.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:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"form-element-id-09"},n.a.createElement(b.a,{id:"form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"form-element-id-11"},n.a.createElement(u.a,{id:"form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"form-element-id-12"},n.a.createElement(u.a,{id:"form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"form-element-id-13"},n.a.createElement(u.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:n.a.createElement(c.b,{labelContent:"Description",inputId:"form-element-id-14",isStacked:!0,isEditing:!0},n.a.createElement(b.a,{id:"form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},N={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{inputId:"form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.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:n.a.createElement(_.b,{id:"combobox-id-01",label:"Team Name","aria-controls":"listbox-id-01",autocomplete:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{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:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isEditing:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{id:"combobox-id-02",label:"Status",value:"In Progress","aria-controls":"listbox-id-02",readonly:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{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:n.a.createElement(c.a,{label:"App Personalization Settings",isEditing:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"form-element-id-03",hasRightIcon:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{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:n.a.createElement(c.a,{label:"Location",isEditing:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Longitude",inputId:"location-longitude-01"},n.a.createElement(u.a,{id:"location-longitude-01",defaultValue:"10.283"})),n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Latitude",inputId:"location-latitude-01"},n.a.createElement(u.a,{id:"location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(S.j,{isEditing:!0,dataSet:S.b,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:n.a.createElement(c.a,{label:"Billing Address",isRequired:!0,isEditing:!0,isStacked:!0,isAddress:!0,hasTooltip:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Billing Street",inputId:"form-element-id-04"},n.a.createElement(b.a,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Billing City",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"Burlington",required:!0})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Billing State/Province",inputId:"form-element-id-06"},n.a.createElement(u.a,{id:"form-element-id-06",defaultValue:"NC",required:!0}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"27215",required:!0})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Billing Country",inputId:"form-element-id-08"},n.a.createElement(u.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:n.a.createElement(c.a,{label:"Shipping Address",isEditing:!0,isStacked:!0,isAddress:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Shipping Street",inputId:"form-element-id-09"},n.a.createElement(b.a,{id:"form-element-id-09",defaultValue:"312 Constitution Place"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping City",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"Austin"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping State/Province",inputId:"form-element-id-11"},n.a.createElement(u.a,{id:"form-element-id-11",defaultValue:"TX"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping Zip/Postal Code",inputId:"form-element-id-12"},n.a.createElement(u.a,{id:"form-element-id-12",defaultValue:"78767"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping Country",inputId:"form-element-id-13"},n.a.createElement(u.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:n.a.createElement(c.b,{labelContent:"Description",inputId:"form-element-id-14",isStacked:!0,isEditing:!0,column:1},n.a.createElement(b.a,{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=("".concat("Stacked"," - Default"),"".concat("Stacked"),y.c,"".concat("Stacked"," - Edit Mode"),"".concat("Stacked"),y.c,[{id:"stacked-single-column",label:"".concat("Stacked"," - 1 column Read Only"),context:"".concat("Stacked"),element:n.a.createElement(y.c,{direction:"stacked",snapshot:k,isViewMode:!0})},{id:"deprecated-view-stacked",label:"".concat("Stacked"," - View Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"stacked",snapshot:N,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-stacked",label:"Deprecated - Stacked form layout - Edit Mode",context:"Deprecated",element:n.a.createElement(y.c,{direction:"stacked",snapshot:N,isDeprecated:!0})},{id:"simple-stacked",label:"".concat("Stacked"," - Simple form layout"),context:"".concat("Stacked"),element:n.a.createElement("div",{className:"slds-form"},n.a.createElement(c.b,{labelContent:"Text Input",inputId:"stacked-input-id-01",isStacked:!0},n.a.createElement(u.a,{id:"stacked-input-id-01",placeholder:"Placeholder text…"})),n.a.createElement(c.b,{labelContent:"Textarea Input",inputId:"stacked-input-id-02",isStacked:!0},n.a.createElement(b.a,{id:"stacked-input-id-02",placeholder:"Placeholder text…"})),n.a.createElement(c.a,{label:"Checkbox Group Label",isStacked:!0},n.a.createElement(p.a,{label:"All opportunities owned by you",name:"default"}),n.a.createElement(p.a,{label:"All contacts in the account owned by you",name:"default"})),n.a.createElement(c.a,{label:"Radio Group Label",isStacked:!0},n.a.createElement(f.c,{label:"Lead generation",name:"options"}),n.a.createElement(f.c,{label:"Education leads",name:"options"})))},{id:"stacked",label:"".concat("Stacked"," - View Mode"),context:"".concat("Stacked"),element:n.a.createElement(y.c,{direction:"stacked",snapshot:A,isViewMode:!0,hasInlineEdit:!0})}]),j=("".concat("Horizontal"," - Default"),"".concat("Horizontal"),y.c,[{id:"edit-horizontal",label:"".concat("Horizontal"," - Edit Mode"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:w})},{id:"form-element-horizontal-edit-error",label:"".concat("Horizontal"," - (Edit Mode with Error)"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:I})}]),T=[{id:"horizontal-single-column",label:"".concat("Horizontal"," - 1 column - Read Only Mode"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:k,isViewMode:!0})},{id:"deprecated-view-horizontal",label:"".concat("Horizontal"," - View Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"horizontal",snapshot:N,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-horizontal",label:"".concat("Horizontal"," - Edit Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"horizontal",snapshot:N,isDeprecated:!0})},{id:"simple-horizontal",label:"".concat("Horizontal"," - Simple form layout"),context:"".concat("Horizontal"),element:n.a.createElement("div",{className:"slds-form"},n.a.createElement(c.b,{labelContent:"Text Input",inputId:"horizontal-input-id-01",isHorizontal:!0},n.a.createElement(u.a,{id:"horizontal-input-id-01",placeholder:"Placeholder text…"})),n.a.createElement(c.b,{labelContent:"Textarea Input",inputId:"horizontal-input-id-02",isHorizontal:!0},n.a.createElement(b.a,{id:"horizontal-input-id-02",placeholder:"Placeholder text…"})),n.a.createElement(c.a,{label:"Checkbox Group Label",isHorizontal:!0},n.a.createElement(p.a,{label:"All opportunities owned by you",name:"default"}),n.a.createElement(p.a,{label:"All contacts in the account owned by you",name:"default"})),n.a.createElement(c.a,{label:"Radio Group Label",isHorizontal:!0},n.a.createElement(f.c,{label:"Lead generation",name:"options"}),n.a.createElement(f.c,{label:"Education leads",name:"options"})))},{id:"horizontal",label:"".concat("Horizontal"," - View Mode"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:w,isViewMode:!0,hasInlineEdit:!0})}],O=function(e){var t=e.hasTooltip,a=e.isRequired;return n.a.createElement(n.a.Fragment,null,n.a.createElement(c.a,{hasCompoundFields:!0,hasTooltip:t,isRequired:a,isDeprecated:!0,label:"Location"},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Latitude",inputId:"input-10"},n.a.createElement(u.a,{id:"input-10"})),n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Longitude",inputId:"input-11"},n.a.createElement(u.a,{id:"input-11"}))))),n.a.createElement(c.a,{hasCompoundFields:!0,label:"Shipping Address",isAddress:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Shipping Street",inputId:"input-12"},n.a.createElement(u.a,{id:"input-12"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping City",inputId:"input-13"},n.a.createElement(u.a,{id:"input-13"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping State/Province",inputId:"input-14"},n.a.createElement(u.a,{id:"input-14",defaultValue:"MT"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping Zip/Postal Code",inputId:"input-15"},n.a.createElement(u.a,{id:"input-15"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping Country",inputId:"input-16"},n.a.createElement(u.a,{id:"input-16",defaultValue:"Canada"}))))))};O.propTypes={hasTooltip:E.a.bool,isRequired:E.a.bool};var V=[{id:"compound-default",label:"".concat("Compound"," - Default"),context:"".concat("Compound"),element:n.a.createElement(v,{labelContent:"Location"},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"input-01"},n.a.createElement(u.a,{id:"input-01"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"input-02"},n.a.createElement(u.a,{id:"input-02"})))))}],L=("".concat("Compound"," - Required"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Help text icon with tooltip"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Error"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Form Layout (Required)"),"".concat("Compound"),"".concat("Compound"," - Form Layout (Required with Tooltip Help)"),"".concat("Compound"),c.a,c.b,u.a,c.b,u.a,"".concat("Compound"," - Form Layout"),"".concat("Compound"),[{id:"address-default",label:"".concat("Address"," - Default"),context:"".concat("Address"),element:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-01"},n.a.createElement(b.a,{id:"form-element-id-01",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-02"},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-03"},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-04"},n.a.createElement(u.a,{id:"form-element-id-04",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"USA",required:!0})))))},{id:"help-text",label:"".concat("Address"," - Help text icon with tooltip"),context:"".concat("Address"),element:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,hasTooltip:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-06"},n.a.createElement(b.a,{id:"form-element-id-06",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-08"},n.a.createElement(u.a,{id:"form-element-id-08",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-09"},n.a.createElement(u.a,{id:"form-element-id-09",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"USA",required:!0})))))}]),F=("".concat("Address"," - Required"),"".concat("Address"),c.b,b.a,c.b,u.a,c.b,u.a,c.b,u.a,c.b,u.a,"".concat("Address"," - Error"),"".concat("Address"),c.b,b.a,c.b,u.a,c.b,u.a,c.b,u.a,c.b,u.a,a(1)),P=a(35),R=i.c.a,D=i.c.code,H=i.c.em,B=i.c.h2,M=i.c.h3,U=i.c.h4,J=i.c.h5,Z=i.c.p,G=i.c.strong,W=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"A Form Element contains an HTML input element paired with a label."),Object(l.createElement)(o.a,{exampleOnly:!0},Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-showcase-01",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-showcase-01",placeholder:"Placeholder text…",required:!0}))),B({id:"About-Form-Elements"},"About Form Elements"),Z({},"The Form Element is initialized with ",D({},"slds-form-element")," and is made up of three primary pieces; a label (",D({},"slds-form-element__label"),"), a form control container (",D({},"slds-form-element__control"),"), and a form input element, i.e. ",D({},"<input>"),"."),M({id:"Form-Label"},"Form Label"),Z({},"A form label should use either the ",D({},"<label>")," or ",D({},"<legend>")," elements with the class ",D({},"slds-form-element__label"),". Use ",D({},"<legend>")," when you have a ",R({href:"/components/form-element/#Compound"},"compound form"),"."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)("label",{className:"slds-form-element__label",htmlFor:"unique-id-of-input"},"Form label")),M({id:"Form-Control"},"Form Control"),Z({},"A form control is a ",D({},"div")," with the class ",D({},"slds-form-element__control"),". The control is required to maintain the structure of the Form Element."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-form-element__control"},"Any form type goes here")),M({id:"Form-Input-Elements"},"Form Input Elements"),Z({},"There are many types of input elements that can be used in the Form Element, including ",R({href:"/components/input"},"inputs"),", ",R({href:"/components/textarea"},"text areas"),", ",R({href:"/components/checkbox"},"checkboxes"),", and ",R({href:"/components/radio-group"},"radio buttons"),". Visit the individual component pages for in-depth details of their specific states and visuals."),M({id:"Accessibility"},"Accessibility"),Z({},"Labels must have the ",D({},"for")," attribute applied, and its value must match the ID of the associated form element, like ",D({},'<input id="unique-id-of-input" />'),". This association ensures that assistive technology informs users about what information to enter where."),M({id:"Mobile"},"Mobile"),Object(l.createElement)(P.a,{patternSpecificText:"form elements will have an increased size of label and info icon"}),Object(l.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for form elements"},Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-showcase-01",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-showcase-01",placeholder:"Placeholder text…",required:!0}))),B({id:"Base"},"Base"),Object(l.createElement)(r.a,{title:"Form Element - Base"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-01"},Object(l.createElement)(u.a,{id:"form-element-01",placeholder:"Placeholder text…"})))),B({id:"States"},"States"),M({id:"View-ModeStatic"},"View Mode/Static"),Z({},"If a form element requires a view mode or static state, instead of ",D({},"slds-form-element__label")," being a ",D({},"<label>")," element, we want to change the element to a ",D({},"<span>"),". This is because the form is no longer a form but a statically read name and value pair."),Z({},"The string inside of ",D({},"slds-form-element__control")," needs to be wrapped in a ",D({},"<div>")," as well, with the class ",D({},"slds-form-element__static")," applied to it."),Z({},"In addition to the structural changes — if the form element is standalone, you can ",H({},"optionally")," apply ",D({},"slds-form-element__readonly"),". The class will help spacing and separation between other form elements. This class is ",G({},H({},"required"))," if the form element is in the context of a larger form composition."),Object(l.createElement)(r.a,{title:"Form Element - Readonly"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Status",isViewMode:!0},Object(l.createElement)(c.f,null,"In Progress")))),M({id:"Inline-Edit"},"Inline Edit"),Z({},"If the form element has inline editable capabilities, the form element will ",G({},H({},"require"))," the class ",D({},"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."),Z({},"In addition, we want to provide an interaction hint by increasing the contrast of the button icon on hover by adding ",D({},"slds-hint-parent")," to the form element. The button icon will also require the class ",D({},"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 ",R({href:"/components/button-icons/#Hint-on-hover"},"Button icon with hint on hover")),Object(l.createElement)(r.a,{title:"Form Element - Inline Edit"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Status",isViewMode:!0,isEditable:!0,hasHint:!0},Object(l.createElement)(c.f,null,"In Progress"),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_hint",symbol:"edit",assistiveText:"Edit: Status",title:"Edit: Status"})))),M({id:"Help-Text-Icon"},"Help Text Icon"),Z({},"A form element can have help text that will display in a tooltip when hovering or focusing on an icon."),Z({},"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."),Z({},"The button icon is ",G({},H({},"required"))," to be wrapped in a ",D({},"<div>")," with the class ",D({},"slds-form-element__icon")," and should be placed outside of the ",D({},"<label>")," element."),Object(l.createElement)(r.a,{title:"Form Element - Help Text Icon"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Status",inputId:"form-element-help-01",hasTooltip:!0},Object(l.createElement)(u.a,{id:"form-element-help-01",placeholder:"Placeholder text…"})))),Object(l.createElement)(P.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"form elements with a help text icon"}),Object(l.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for form elements with help text icon"},Object(l.createElement)(c.b,{labelContent:"Status",inputId:"form-element-help-01m",hasTooltip:!0},Object(l.createElement)(u.a,{id:"form-element-help-01m",placeholder:"Placeholder text…"}))),U({id:"Showing-tooltip"},"Showing tooltip"),Z({},"The help text icon uses a tooltip to show the help text information. Please see ",R({href:"/components/tooltips/"},"Tooltips")," for implementation details."),Object(l.createElement)(r.a,{title:"Form Element - Help Text Icon - Showing tooltip"},Object(l.createElement)(o.a,{demoStyles:"padding-top: 4rem;"},Object(l.createElement)(c.b,{labelContent:"Status",inputId:"tooltip-showing-form-element-help-01",hasTooltip:!0,showTooltip:!0},Object(l.createElement)(u.a,{id:"tooltip-showing-form-element-help-01",placeholder:"Placeholder text…"})))),M({id:"Feedback"},"Feedback"),Z({},"A form element can have various methods of feedback, such as a required denotation or an inline error message."),U({id:"Required"},"Required"),Z({},"When a form element is required, an ",D({},"<abbr>")," should be injected before the ",D({},"<input>")," and within the ",D({},"<label>")," and have the class ",D({},"slds-required"),"."),Z({},"The ",D({},"<input>")," element should also have the HTML attribute ",D({},"required")," or ",D({},'required=""'),". Similarly, if it is disabled, it should have the ",D({},"disabled")," or ",D({},'disabled=""')," attribute. Do not use true/false values inside the ",D({},"required")," or ",D({},"disabled")," attributes because the mere presence of these attributes signifies the field is required or disabled."),Object(l.createElement)(r.a,{title:"Form Element - Required"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-03",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-03",placeholder:"Placeholder text…",required:!0})))),U({id:"Error"},"Error"),Z({},"If an error has occurred while submitting a form, the form element with an error should provide feedback. The ",D({},"slds-has-error")," class is placed on the ",D({},'<div class="slds-form-element">')," element. Then, the error message for the user is placed in a ",D({},"<div>")," with the ",D({},"slds-form-element__help")," class."),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility requirement"},Object(l.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"," ",Object(l.createElement)("code",null,"aria-describedby")," attribute to the ",Object(l.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.")),Object(l.createElement)(r.a,{title:"Form Element - Error"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{hasError:!0,labelContent:"Form Label",inputId:"form-element-05",errorId:"form-error-01",isRequired:!0,inlineMessage:"Enter a value."},Object(l.createElement)(u.a,{id:"form-element-05",placeholder:"Placeholder text…",required:!0,"aria-describedby":"form-error-01"})))),B({id:"Layout-Variations"},"Layout Variations"),Z({},"If your form has more than one form element, you can switch the direction of ",D({},"slds-form-element__label")," and ",D({},"slds-form-element__control")," by applying ",D({},"slds-form-element_stacked")," for stacked labels and ",D({},"slds-form-element_horizontal")," for left-aligned labels. For optimal spacing and layout, ensure the ",D({},"slds-form-element")," class is present on each element within the form."),M({id:"Stacked"},"Stacked"),Z({},"To vertically stack ",Object(l.createElement)("code",null,"<label>")," and ",Object(l.createElement)("code",null,"<input>")," pairs, place ",D({},"slds-form-element_stacked")," on the ",D({},"div")," with the class of ",D({},"slds-form-element")," for optimal spacing."),Object(l.createElement)(r.a,{title:"Form Layout - Stacked"},Object(l.createElement)(o.a,null,Object(F.f)(q,"simple-stacked"))),M({id:"Horizontal"},"Horizontal"),Z({},"To horizontally align a ",D({},"<label>")," and ",D({},"<input>"),", use the ",D({},"slds-form-element_horizontal")," class on the ",D({},"div")," with the class of ",D({},"slds-form-element"),". The ",D({},"slds-form-element__label")," takes up 33% of the width, and the ",D({},"slds-form-element__control")," uses the remaining 66%."),Object(l.createElement)(r.a,{title:"Form Layout - Horizontal"},Object(l.createElement)(o.a,null,Object(F.f)(T,"simple-horizontal"))),U({id:"Single-Column-Support"},"Single Column Support"),Z({},"When using ",D({},"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 ",D({},"slds-form-element_1-col")," to ",D({},"slds-form-element")," will re-distribute the layout."),J({id:"Standalone"},"Standalone"),Object(l.createElement)(r.a,{title:"Form Layout - Horizontal - Single Column standalone"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"single-form-element-id-01",isEditing:!0,column:1},Object(l.createElement)(b.a,{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."})))),J({id:"With-5050-split"},"With 50/50 split"),Object(l.createElement)(r.a,{title:"Form Layout - Horizontal - Single Column combo"},Object(l.createElement)(o.a,null,Object(l.createElement)("div",{className:"slds-form",role:"list"},Object(l.createElement)(y.b,null,Object(l.createElement)(y.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Label",inputId:"single-form-element-id-02",isEditing:!0},Object(l.createElement)(u.a,{id:"single-form-element-id-02",placeholder:"Placeholder text…"}))),Object(l.createElement)(y.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Label",inputId:"single-form-element-id-03",isEditing:!0},Object(l.createElement)(u.a,{id:"single-form-element-id-03",placeholder:"Placeholder text…"})))),Object(l.createElement)(y.b,null,Object(l.createElement)(y.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"single-form-element-id-04",isEditing:!0,column:1},Object(l.createElement)(b.a,{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."}))))))),U({id:"Error-state"},"Error state"),Z({},"When in the horizontal layout, error messages will appear underneath the related input."),Object(l.createElement)(o.a,null,Object(F.f)(j,"form-element-horizontal-edit-error")),M({id:"Compound"},"Compound"),Z({},"A compound form is a grouping of several form elements described by a label/title. The compound form should be implemented as a ",D({},"<fieldset>"),", where the label/title is implemented as a ",D({},"<legend>")," element."),Z({},"The ",D({},"<fieldset>")," ",G({},H({},"requires"))," the class ",D({},"slds-form-element_compound"),". This class handles the layout and wrapping of the form elements that are grouped together."),Z({},"The ",D({},"<legend>")," element ",G({},H({},"requires"))," the class ",D({},"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."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)(c.a,{hasCompoundFields:!0,label:"Fieldset Label"},"...")),U({id:"Rows"},"Rows"),Z({},"Each row of a compound field should be wrapped in a ",D({},"<div>")," with the class ",D({},"slds-form-element__row"),"."),U({id:"Fields"},"Fields"),Z({},"Each field inside of a compound row can be explicitly sized by using a sizing class, e.g. ",D({},"slds-size_1-of-2"),"."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)(g,null,Object(l.createElement)("div",{className:"slds-size_1-of-2"},"..."))),Object(l.createElement)(r.a,{title:"Form Layout - Compound"},Object(l.createElement)(o.a,{demoStyles:"max-width: 400px;"},Object(F.f)(V))),U({id:"Address"},"Address"),Z({},"Though an address form is utilizing the ",D({},"slds-form-element_compound")," class, we need to also add the ",D({},"slds-form-element_address")," class to the component. We modify some of the behavior of an address form with this class."),Object(l.createElement)(r.a,{title:"Form Layout - Compound - Address"},Object(l.createElement)(o.a,{demoStyles:"max-width: 400px;"},Object(F.f)(L))),B({id:"Usage-Examples"},"Usage Examples"),M({id:"Record-Form"},"Record Form"),Z({},"A record form is a series of rows created by ",D({},"slds-form__row"),". Inside of each row contains up to 2 inline-editable form element. Each item inside of ",D({},"slds-form__row")," is required to be wrapped in a ",D({},"<div>")," with the class ",D({},"slds-form__item"),"."),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility Requirement"},Object(l.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 ",Object(l.createElement)("code",null,'role="list"')," to the"," ",Object(l.createElement)("code",null,"slds-form")," element. Every column inside of each row should get"," ",Object(l.createElement)("code",null,'role="listitem"')," to identify itself as items of the list.")),U({id:"View-Mode"},"View Mode"),Z({},"When in view/readonly mode, it is ",H({},"required")," to have the class ",D({},"slds-form-element_readonly")," on the ",D({},"slds-form-element")," element. This class will provide styles for scanability and spacing."),Z({},"If inline-edit mode is enabled, you will also need to add ",D({},"slds-form-element_edit")," to the ",D({},"slds-form-element")," to accommodate the space for the edit button icon."),J({id:"Stacked-Alignment"},"Stacked Alignment"),Z({},"When you want the form elements inside of your record form to be stacked. Each ",D({},"slds-form-element")," should also get the class ",D({},"slds-form-element_stacked"),"."),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - View Mode"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:A,isViewMode:!0,hasInlineEdit:!0,direction:"stacked"}))),J({id:"Horizontal-Alignment"},"Horizontal Alignment"),Z({},"By adding the class ",D({},"slds-form-element_horizontal")," to every ",D({},"slds-form-element"),", your form can switch from stacked to left-aligned, horizontal labels in order to reduce vertical space."),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - View Mode - Horizontal"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:w,isViewMode:!0,hasInlineEdit:!0,direction:"horizontal"}))),U({id:"Edit-Mode"},"Edit Mode"),Z({},"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:"),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)(c.b,{labelContent:"My Label",inputId:"unique-form-element-id"},"...")),Z({},"The form content found inside of ",D({},"slds-form-element__control")," should be replaced with the appropriate field type of the view/readonly state."),J({id:"Stacked-Alignment-2"},"Stacked Alignment"),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - Edit Mode"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:A,direction:"stacked"}))),J({id:"Horizontal-Alignment-2"},"Horizontal Alignment"),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - Edit Mode - Horizontal"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:w,direction:"horizontal"}))))},Q=function(){return Object(i.a)(W())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/form-element/docs.mdx.js"]=function(e){function t(t){for(var l,o,s=t[0],r=t[1],d=t[2],c=0,u=[];c<s.length;c++)o=s[c],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&u.push(n[o][0]),n[o]=0;for(l in r)Object.prototype.hasOwnProperty.call(r,l)&&(e[l]=r[l]);for(m&&m(t);u.length;)u.shift()();return i.push.apply(i,d\|\|[]),a()}function a(){for(var e,t=0;t<i.length;t++){for(var a=i[t],l=!0,s=1;s<a.length;s++){var r=a[s];0!==n[r]&&(l=!1)}l&&(i.splice(t--,1),e=o(o.s=a[0]))}return e}var l={},n={39:0},i=[];function o(t){if(l[t])return l[t].exports;var a=l[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,o),a.l=!0,a.exports}o.m=e,o.c=l,o.d=function(e,t,a){o.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,t){if(1&t&&(e=o(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(o.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var l in e)o.d(a,l,function(t){return e[t]}.bind(null,l));return a},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="/assets/scripts/bundle/";var s=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=s.push.bind(s);s.push=t,s=s.slice();for(var d=0;d<s.length;d++)t(s[d]);var m=r;return i.push([653,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},653:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return W})),a.d(t,"getContents",(function(){return Q}));var l=a(0),n=a.n(l),i=a(4),o=a(2),s=a(26),r=a(15),d=a(14),m=a(7),c=a(8),u=a(17),p=a(30),b=a(43),f=(a(47),a(5),a(34)),h=a(3),E=a.n(h),g=function(e){var t=e.children;return n.a.createElement("div",{className:"slds-form-element__row"},t)};g.propTypes={children:E.a.node.isRequired};var v=function(e){var t=e.isStacked,a=e.isHorizontal,l=e.isEditing,i=e.isRequired,o=e.isAddress,s=e.hasTooltip,r=e.hasError,d=e.errorId,m=e.inlineMessage,u=e.labelContent,p=e.children;return n.a.createElement(c.a,{hasCompoundFields:!0,isAddress:o,isStacked:t,isHorizontal:a,isEditing:l,isRequired:i,hasTooltip:s,hasError:r,errorId:d,inlineMessage:m,label:u},p)};v.propTypes={children:E.a.node.isRequired,isStacked:E.a.bool,isHorizontal:E.a.bool,isEditing:E.a.bool,isRequired:E.a.bool,isAddress:E.a.bool,hasTooltip:E.a.bool,hasError:E.a.bool,errorId:E.a.string,inlineMessage:E.a.string,labelContent:E.a.string};var y=a(52),C=a(76),S=a(35),_=a(23),z=a(24),x=a(11),A={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{inputId:"stacked-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.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:n.a.createElement(_.b,{id:"stacked-combobox-id-01",label:"Team Name","aria-controls":"stacked-listbox-id-01",autocomplete:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{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:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isEditing:!0,isStacked:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{id:"stacked-combobox-id-02",label:"Status","aria-controls":"stacked-listbox-id-02",readonly:!0,isEditing:!0,isStacked:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{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:n.a.createElement(c.a,{label:"App Personalization Settings",isEditing:!0,isStacked:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"stacked-form-element-id-02",hasTooltip:!0,isEditing:!0,isStacked:!0},n.a.createElement(u.a,{id:"stacked-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{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},n.a.createElement(u.a,{id:"stacked-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{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:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"stacked-location-longitude-01"},n.a.createElement(u.a,{id:"stacked-location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"stacked-location-latitude-01"},n.a.createElement(u.a,{id:"stacked-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(S.j,{isEditing:!0,isStacked:!0,dataSet:S.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"stacked-form-element-id-04"},n.a.createElement(b.a,{id:"stacked-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"stacked-form-element-id-05"},n.a.createElement(u.a,{id:"stacked-form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"stacked-form-element-id-06"},n.a.createElement(u.a,{id:"stacked-form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"stacked-form-element-id-07"},n.a.createElement(u.a,{id:"stacked-form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"stacked-form-element-id-08"},n.a.createElement(u.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:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"stacked-form-element-id-09"},n.a.createElement(b.a,{id:"stacked-form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"stacked-form-element-id-10"},n.a.createElement(u.a,{id:"stacked-form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"stacked-form-element-id-11"},n.a.createElement(u.a,{id:"stacked-form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"stacked-form-element-id-12"},n.a.createElement(u.a,{id:"stacked-form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"stacked-form-element-id-13"},n.a.createElement(u.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:n.a.createElement(c.b,{labelContent:"Description",inputId:"stacked-form-element-id-14",isStacked:!0,isEditing:!0,column:1},n.a.createElement(b.a,{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."}))}]}]},w={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.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:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-01",isEditing:!0,autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{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:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isHorizontal:!0,isEditing:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-02",label:"Status","aria-controls":"horizontal-listbox-id-02",readonly:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{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:n.a.createElement(c.a,{isHorizontal:!0,label:"App Personalization Settings",isEditing:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"SLA Serial Number",inputId:"horizontal-form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"horizontal-form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{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},n.a.createElement(u.a,{id:"horizontal-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{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:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"horizontal-form-element-id-14",isEditing:!0,column:1},n.a.createElement(b.a,{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:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isHorizontal:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"horizontal-location-longitude-01"},n.a.createElement(u.a,{id:"horizontal-location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"horizontal-location-latitude-01"},n.a.createElement(u.a,{id:"horizontal-location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(S.j,{isStacked:!0,isEditing:!0,dataSet:S.b,isResponsive:!0})}]},{fields:[{type:"address",label:"Billing Address",value:["525 S. Lexington Ave","Burlington, NC 27215","USA"],link:!0,isRequired:!0,hasTooltip:!0,component:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"horizontal-form-element-id-04"},n.a.createElement(b.a,{id:"horizontal-form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"horizontal-form-element-id-05"},n.a.createElement(u.a,{id:"horizontal-form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"horizontal-form-element-id-06"},n.a.createElement(u.a,{id:"horizontal-form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"horizontal-form-element-id-07"},n.a.createElement(u.a,{id:"horizontal-form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"horizontal-form-element-id-08"},n.a.createElement(u.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:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"horizontal-form-element-id-09"},n.a.createElement(b.a,{id:"horizontal-form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"horizontal-form-element-id-10"},n.a.createElement(u.a,{id:"horizontal-form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"horizontal-form-element-id-11"},n.a.createElement(u.a,{id:"horizontal-form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"horizontal-form-element-id-12"},n.a.createElement(u.a,{id:"horizontal-form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"horizontal-form-element-id-13"},n.a.createElement(u.a,{id:"horizontal-form-element-id-13",defaultValue:"USA"})))))}]}]},I={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",component:n.a.createElement(c.b,{isHorizontal:!0,inputId:"horizontal-form-element-id-01",labelContent:"Assigned To",isEditing:!0},n.a.createElement(u.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:n.a.createElement(_.b,{isHorizontal:!0,id:"horizontal-combobox-id-01",label:"Team Name","aria-controls":"horizontal-listbox-id-01",isEditing:!0,autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{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:n.a.createElement(c.b,{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"},n.a.createElement(u.a,{id:"horizontal-form-element-id-02",defaultValue:""}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{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},n.a.createElement(u.a,{id:"horizontal-form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{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:n.a.createElement(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"horizontal-form-element-id-14",isEditing:!0,column:1},n.a.createElement(b.a,{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."}))}]}]},k={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,column:1,component:n.a.createElement(c.b,{inputId:"form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.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:n.a.createElement(_.b,{id:"combobox-id-01",label:"Team Name","aria-controls":"listbox-id-01",autocomplete:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{id:"listbox-id-01",snapshot:{},type:"entity",count:2}),resultsType:"listbox",value:"Salesforce Lightning Design System"})}]},{fields:[{type:"checkbox",label:"Security Assessment Required?",value:n.a.createElement(x.a,{symbol:"steps",size:"x-small",useCurrentColor:!0,assistiveText:"False",title:"False"}),column:1,component:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isEditing:!0})}]},{fields:[{type:"picklist",label:"Status",column:1,component:n.a.createElement(_.b,{id:"combobox-id-02",label:"Status","aria-controls":"listbox-id-02",readonly:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{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:n.a.createElement(c.b,{labelContent:"Reference Image",inputId:"form-element-id-15",isStacked:!0,isEditing:!0},n.a.createElement(b.a,{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:n.a.createElement("div",{className:"slds-rich-text-editor__output"},n.a.createElement("p",null,"Here's a big image"),n.a.createElement("p",null,n.a.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:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"5367"}))}]},{fields:[{type:"date",label:"SLA Expiration Date",value:"1/1/2018",column:1,component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"form-element-id-03",hasRightIcon:!0},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{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:n.a.createElement(v,{labelContent:"Location",isEditing:!0,isHorizontal:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"location-longitude-01"},n.a.createElement(u.a,{id:"location-longitude-01",defaultValue:"10.283"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"location-latitude-01"},n.a.createElement(u.a,{id:"location-latitude-01",defaultValue:"54.293"})))))}]},{fields:[{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",column:1,component:n.a.createElement(S.j,{dataSet:S.b,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:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,isEditing:!0,isRequired:!0,hasTooltip:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-04"},n.a.createElement(b.a,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-06"},n.a.createElement(u.a,{id:"form-element-id-06",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-08"},n.a.createElement(u.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:n.a.createElement(v,{labelContent:"Shipping Address",isAddress:!0,isEditing:!0,isStacked:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Shipping Street",inputId:"form-element-id-09"},n.a.createElement(b.a,{id:"form-element-id-09",defaultValue:"312 Constitution Place"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping City",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"Austin"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping State/Province",inputId:"form-element-id-11"},n.a.createElement(u.a,{id:"form-element-id-11",defaultValue:"TX"})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Zip/Postal Code",inputId:"form-element-id-12"},n.a.createElement(u.a,{id:"form-element-id-12",defaultValue:"78767"}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Shipping Country",inputId:"form-element-id-13"},n.a.createElement(u.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:n.a.createElement(c.b,{labelContent:"Description",inputId:"form-element-id-14",isStacked:!0,isEditing:!0},n.a.createElement(b.a,{id:"form-element-id-14",defaultValue:"Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Etiam porta sem malesuada magna mollis euismod."}))}]}]},N={rows:[{fields:[{type:"text",label:"Assigned To",value:"Jack Rogers",avatar:"/assets/images/avatar1.jpg",isRequired:!0,link:!0,component:n.a.createElement(c.b,{inputId:"form-element-id-01",labelContent:"Assigned To",isRequired:!0,isEditing:!0},n.a.createElement(u.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:n.a.createElement(_.b,{id:"combobox-id-01",label:"Team Name","aria-controls":"listbox-id-01",autocomplete:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(m.b,{className:"slds-input__icon slds-input__icon_right",symbol:"clear",title:"Clear the text input",assistiveText:"Clear the text input"}),results:n.a.createElement(z.e,{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:n.a.createElement(C.a,{labelContent:"Security Assessment Required?",isEditing:!0})},{type:"picklist",label:"Status",component:n.a.createElement(_.b,{id:"combobox-id-02",label:"Status",value:"In Progress","aria-controls":"listbox-id-02",readonly:!0,isEditing:!0,inputIconPosition:"right",rightInputIcon:n.a.createElement(x.a,{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:n.a.createElement(z.e,{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:n.a.createElement(c.a,{label:"App Personalization Settings",isEditing:!0},n.a.createElement(p.a,{label:"Disable end user personalization",name:"default",checked:!0}),n.a.createElement(p.a,{label:"Don't automatically create temporary tabs",name:"default"}))},{type:"",label:"",value:""}]},{fields:[{type:"text",label:"SLA Serial Number",value:"5367",hasTooltip:!0,component:n.a.createElement(c.b,{labelContent:"SLA Serial Number",inputId:"form-element-id-02",hasTooltip:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"5367"}))},{type:"date",label:"SLA Expiration Date",value:"1/1/2018",component:n.a.createElement(c.b,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open",labelContent:"Date",inputId:"form-element-id-03",hasRightIcon:!0,isEditing:!0},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"1/1/2018"}),n.a.createElement(m.b,{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:n.a.createElement(c.a,{label:"Location",isEditing:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Longitude",inputId:"location-longitude-01"},n.a.createElement(u.a,{id:"location-longitude-01",defaultValue:"10.283"})),n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Latitude",inputId:"location-latitude-01"},n.a.createElement(u.a,{id:"location-latitude-01",defaultValue:"54.293"})))))},{type:"multiselect",label:"Selected Languages",value:"Arabic, Chinese, English, German",component:n.a.createElement(S.j,{isEditing:!0,dataSet:S.b,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:n.a.createElement(c.a,{label:"Billing Address",isRequired:!0,isEditing:!0,isStacked:!0,isAddress:!0,hasTooltip:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Billing Street",inputId:"form-element-id-04"},n.a.createElement(b.a,{id:"form-element-id-04",defaultValue:"525 S. Lexington Ave",required:!0}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Billing City",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"Burlington",required:!0})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Billing State/Province",inputId:"form-element-id-06"},n.a.createElement(u.a,{id:"form-element-id-06",defaultValue:"NC",required:!0}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"27215",required:!0})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Billing Country",inputId:"form-element-id-08"},n.a.createElement(u.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:n.a.createElement(c.a,{label:"Shipping Address",isEditing:!0,isStacked:!0,isAddress:!0,hasCompoundFields:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Shipping Street",inputId:"form-element-id-09"},n.a.createElement(b.a,{id:"form-element-id-09",defaultValue:"312 Constitution Place"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping City",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"Austin"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping State/Province",inputId:"form-element-id-11"},n.a.createElement(u.a,{id:"form-element-id-11",defaultValue:"TX"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping Zip/Postal Code",inputId:"form-element-id-12"},n.a.createElement(u.a,{id:"form-element-id-12",defaultValue:"78767"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping Country",inputId:"form-element-id-13"},n.a.createElement(u.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:n.a.createElement(c.b,{labelContent:"Description",inputId:"form-element-id-14",isStacked:!0,isEditing:!0,column:1},n.a.createElement(b.a,{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=("".concat("Stacked"," - Default"),"".concat("Stacked"),y.c,"".concat("Stacked"," - Edit Mode"),"".concat("Stacked"),y.c,[{id:"stacked-single-column",label:"".concat("Stacked"," - 1 column Read Only"),context:"".concat("Stacked"),element:n.a.createElement(y.c,{direction:"stacked",snapshot:k,isViewMode:!0})},{id:"deprecated-view-stacked",label:"".concat("Stacked"," - View Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"stacked",snapshot:N,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-stacked",label:"Deprecated - Stacked form layout - Edit Mode",context:"Deprecated",element:n.a.createElement(y.c,{direction:"stacked",snapshot:N,isDeprecated:!0})},{id:"simple-stacked",label:"".concat("Stacked"," - Simple form layout"),context:"".concat("Stacked"),element:n.a.createElement("div",{className:"slds-form"},n.a.createElement(c.b,{labelContent:"Text Input",inputId:"stacked-input-id-01",isStacked:!0},n.a.createElement(u.a,{id:"stacked-input-id-01",placeholder:"Placeholder text…"})),n.a.createElement(c.b,{labelContent:"Textarea Input",inputId:"stacked-input-id-02",isStacked:!0},n.a.createElement(b.a,{id:"stacked-input-id-02",placeholder:"Placeholder text…"})),n.a.createElement(c.a,{label:"Checkbox Group Label",isStacked:!0},n.a.createElement(p.a,{label:"All opportunities owned by you",name:"default"}),n.a.createElement(p.a,{label:"All contacts in the account owned by you",name:"default"})),n.a.createElement(c.a,{label:"Radio Group Label",isStacked:!0},n.a.createElement(f.c,{label:"Lead generation",name:"options"}),n.a.createElement(f.c,{label:"Education leads",name:"options"})))},{id:"stacked",label:"".concat("Stacked"," - View Mode"),context:"".concat("Stacked"),element:n.a.createElement(y.c,{direction:"stacked",snapshot:A,isViewMode:!0,hasInlineEdit:!0})}]),j=("".concat("Horizontal"," - Default"),"".concat("Horizontal"),y.c,[{id:"edit-horizontal",label:"".concat("Horizontal"," - Edit Mode"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:w})},{id:"form-element-horizontal-edit-error",label:"".concat("Horizontal"," - (Edit Mode with Error)"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:I})}]),T=[{id:"horizontal-single-column",label:"".concat("Horizontal"," - 1 column - Read Only Mode"),context:"".concat("Horizontal"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:k,isViewMode:!0})},{id:"deprecated-view-horizontal",label:"".concat("Horizontal"," - View Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"horizontal",snapshot:N,isViewMode:!0,hasInlineEdit:!0,isDeprecated:!0})},{id:"deprecated-edit-horizontal",label:"".concat("Horizontal"," - Edit Mode (Deprecated)"),context:"Deprecated",element:n.a.createElement(y.c,{direction:"horizontal",snapshot:N,isDeprecated:!0})},{id:"simple-horizontal",label:"".concat("Horizontal"," - Simple form layout"),context:"".concat("Horizontal"),element:n.a.createElement("div",{className:"slds-form"},n.a.createElement(c.b,{labelContent:"Text Input",inputId:"horizontal-input-id-01",isHorizontal:!0},n.a.createElement(u.a,{id:"horizontal-input-id-01",placeholder:"Placeholder text…"})),n.a.createElement(c.b,{labelContent:"Textarea Input",inputId:"horizontal-input-id-02",isHorizontal:!0},n.a.createElement(b.a,{id:"horizontal-input-id-02",placeholder:"Placeholder text…"})),n.a.createElement(c.a,{label:"Checkbox Group Label",isHorizontal:!0},n.a.createElement(p.a,{label:"All opportunities owned by you",name:"default"}),n.a.createElement(p.a,{label:"All contacts in the account owned by you",name:"default"})),n.a.createElement(c.a,{label:"Radio Group Label",isHorizontal:!0},n.a.createElement(f.c,{label:"Lead generation",name:"options"}),n.a.createElement(f.c,{label:"Education leads",name:"options"})))},{id:"horizontal",label:"".concat("Horizontal"," - View Mode"),element:n.a.createElement(y.c,{direction:"horizontal",snapshot:w,isViewMode:!0,hasInlineEdit:!0})}],O=function(e){var t=e.hasTooltip,a=e.isRequired;return n.a.createElement(n.a.Fragment,null,n.a.createElement(c.a,{hasCompoundFields:!0,hasTooltip:t,isRequired:a,isDeprecated:!0,label:"Location"},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Latitude",inputId:"input-10"},n.a.createElement(u.a,{id:"input-10"})),n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-2",labelContent:"Longitude",inputId:"input-11"},n.a.createElement(u.a,{id:"input-11"}))))),n.a.createElement(c.a,{hasCompoundFields:!0,label:"Shipping Address",isAddress:!0,isDeprecated:!0},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_1-of-1",labelContent:"Shipping Street",inputId:"input-12"},n.a.createElement(u.a,{id:"input-12"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping City",inputId:"input-13"},n.a.createElement(u.a,{id:"input-13"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping State/Province",inputId:"input-14"},n.a.createElement(u.a,{id:"input-14",defaultValue:"MT"}))),n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(c.b,{formElementClassName:"slds-size_4-of-6",labelContent:"Shipping Zip/Postal Code",inputId:"input-15"},n.a.createElement(u.a,{id:"input-15"})),n.a.createElement(c.b,{formElementClassName:"slds-size_2-of-6",labelContent:"Shipping Country",inputId:"input-16"},n.a.createElement(u.a,{id:"input-16",defaultValue:"Canada"}))))))};O.propTypes={hasTooltip:E.a.bool,isRequired:E.a.bool};var V=[{id:"compound-default",label:"".concat("Compound"," - Default"),context:"".concat("Compound"),element:n.a.createElement(v,{labelContent:"Location"},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Latitude",inputId:"input-01"},n.a.createElement(u.a,{id:"input-01"}))),n.a.createElement("div",{className:"slds-size_1-of-2"},n.a.createElement(c.b,{labelContent:"Longitude",inputId:"input-02"},n.a.createElement(u.a,{id:"input-02"})))))}],L=("".concat("Compound"," - Required"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Help text icon with tooltip"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Error"),"".concat("Compound"),c.b,u.a,c.b,u.a,"".concat("Compound"," - Form Layout (Required)"),"".concat("Compound"),"".concat("Compound"," - Form Layout (Required with Tooltip Help)"),"".concat("Compound"),c.a,c.b,u.a,c.b,u.a,"".concat("Compound"," - Form Layout"),"".concat("Compound"),[{id:"address-default",label:"".concat("Address"," - Default"),context:"".concat("Address"),element:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-01"},n.a.createElement(b.a,{id:"form-element-id-01",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-02"},n.a.createElement(u.a,{id:"form-element-id-02",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-03"},n.a.createElement(u.a,{id:"form-element-id-03",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-04"},n.a.createElement(u.a,{id:"form-element-id-04",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-05"},n.a.createElement(u.a,{id:"form-element-id-05",defaultValue:"USA",required:!0})))))},{id:"help-text",label:"".concat("Address"," - Help text icon with tooltip"),context:"".concat("Address"),element:n.a.createElement(v,{labelContent:"Billing Address",isAddress:!0,hasTooltip:!0},n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_1-of-1"},n.a.createElement(c.b,{labelContent:"Billing Street",inputId:"form-element-id-06"},n.a.createElement(b.a,{id:"form-element-id-06",defaultValue:"525 S. Lexington Ave",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing City",inputId:"form-element-id-07"},n.a.createElement(u.a,{id:"form-element-id-07",defaultValue:"Burlington",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing State/Province",inputId:"form-element-id-08"},n.a.createElement(u.a,{id:"form-element-id-08",defaultValue:"NC",required:!0})))),n.a.createElement(g,null,n.a.createElement("div",{className:"slds-size_4-of-6"},n.a.createElement(c.b,{labelContent:"Billing Zip/Postal Code",inputId:"form-element-id-09"},n.a.createElement(u.a,{id:"form-element-id-09",defaultValue:"27215",required:!0}))),n.a.createElement("div",{className:"slds-size_2-of-6"},n.a.createElement(c.b,{labelContent:"Billing Country",inputId:"form-element-id-10"},n.a.createElement(u.a,{id:"form-element-id-10",defaultValue:"USA",required:!0})))))}]),F=("".concat("Address"," - Required"),"".concat("Address"),c.b,b.a,c.b,u.a,c.b,u.a,c.b,u.a,c.b,u.a,"".concat("Address"," - Error"),"".concat("Address"),c.b,b.a,c.b,u.a,c.b,u.a,c.b,u.a,c.b,u.a,a(1)),P=a(36),R=i.c.a,D=i.c.code,H=i.c.em,B=i.c.h2,M=i.c.h3,U=i.c.h4,J=i.c.h5,Z=i.c.p,G=i.c.strong,W=function(){return Object(l.createElement)(i.b,{},Object(l.createElement)("div",{className:"doc lead"},"A Form Element contains an HTML input element paired with a label."),Object(l.createElement)(o.a,{exampleOnly:!0},Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-showcase-01",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-showcase-01",placeholder:"Placeholder text…",required:!0}))),B({id:"About-Form-Elements"},"About Form Elements"),Z({},"The Form Element is initialized with ",D({},"slds-form-element")," and is made up of three primary pieces; a label (",D({},"slds-form-element__label"),"), a form control container (",D({},"slds-form-element__control"),"), and a form input element, i.e. ",D({},"<input>"),"."),M({id:"Form-Label"},"Form Label"),Z({},"A form label should use either the ",D({},"<label>")," or ",D({},"<legend>")," elements with the class ",D({},"slds-form-element__label"),". Use ",D({},"<legend>")," when you have a ",R({href:"/components/form-element/#Compound"},"compound form"),"."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)("label",{className:"slds-form-element__label",htmlFor:"unique-id-of-input"},"Form label")),M({id:"Form-Control"},"Form Control"),Z({},"A form control is a ",D({},"div")," with the class ",D({},"slds-form-element__control"),". The control is required to maintain the structure of the Form Element."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)("div",{className:"slds-form-element__control"},"Any form type goes here")),M({id:"Form-Input-Elements"},"Form Input Elements"),Z({},"There are many types of input elements that can be used in the Form Element, including ",R({href:"/components/input"},"inputs"),", ",R({href:"/components/textarea"},"text areas"),", ",R({href:"/components/checkbox"},"checkboxes"),", and ",R({href:"/components/radio-group"},"radio buttons"),". Visit the individual component pages for in-depth details of their specific states and visuals."),M({id:"Accessibility"},"Accessibility"),Z({},"Labels must have the ",D({},"for")," attribute applied, and its value must match the ID of the associated form element, like ",D({},'<input id="unique-id-of-input" />'),". This association ensures that assistive technology informs users about what information to enter where."),M({id:"Mobile"},"Mobile"),Object(l.createElement)(P.a,{patternSpecificText:"form elements will have an increased size of label and info icon"}),Object(l.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for form elements"},Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-showcase-01",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-showcase-01",placeholder:"Placeholder text…",required:!0}))),B({id:"Base"},"Base"),Object(l.createElement)(r.a,{title:"Form Element - Base"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-01"},Object(l.createElement)(u.a,{id:"form-element-01",placeholder:"Placeholder text…"})))),B({id:"States"},"States"),M({id:"View-ModeStatic"},"View Mode/Static"),Z({},"If a form element requires a view mode or static state, instead of ",D({},"slds-form-element__label")," being a ",D({},"<label>")," element, we want to change the element to a ",D({},"<span>"),". This is because the form is no longer a form but a statically read name and value pair."),Z({},"The string inside of ",D({},"slds-form-element__control")," needs to be wrapped in a ",D({},"<div>")," as well, with the class ",D({},"slds-form-element__static")," applied to it."),Z({},"In addition to the structural changes — if the form element is standalone, you can ",H({},"optionally")," apply ",D({},"slds-form-element__readonly"),". The class will help spacing and separation between other form elements. This class is ",G({},H({},"required"))," if the form element is in the context of a larger form composition."),Object(l.createElement)(r.a,{title:"Form Element - Readonly"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Status",isViewMode:!0},Object(l.createElement)(c.f,null,"In Progress")))),M({id:"Inline-Edit"},"Inline Edit"),Z({},"If the form element has inline editable capabilities, the form element will ",G({},H({},"require"))," the class ",D({},"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."),Z({},"In addition, we want to provide an interaction hint by increasing the contrast of the button icon on hover by adding ",D({},"slds-hint-parent")," to the form element. The button icon will also require the class ",D({},"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 ",R({href:"/components/button-icons/#Hint-on-hover"},"Button icon with hint on hover")),Object(l.createElement)(r.a,{title:"Form Element - Inline Edit"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Status",isViewMode:!0,isEditable:!0,hasHint:!0},Object(l.createElement)(c.f,null,"In Progress"),Object(l.createElement)(m.b,{iconClassName:"slds-button__icon_hint",symbol:"edit",assistiveText:"Edit: Status",title:"Edit: Status"})))),M({id:"Help-Text-Icon"},"Help Text Icon"),Z({},"A form element can have help text that will display in a tooltip when hovering or focusing on an icon."),Z({},"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."),Z({},"The button icon is ",G({},H({},"required"))," to be wrapped in a ",D({},"<div>")," with the class ",D({},"slds-form-element__icon")," and should be placed outside of the ",D({},"<label>")," element."),Object(l.createElement)(r.a,{title:"Form Element - Help Text Icon"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Status",inputId:"form-element-help-01",hasTooltip:!0},Object(l.createElement)(u.a,{id:"form-element-help-01",placeholder:"Placeholder text…"})))),Object(l.createElement)(P.b,{docsLink:"#Mobile",header:"Mobile context changes",elementName:"form elements with a help text icon"}),Object(l.createElement)(o.a,{frameOnly:!0,frameTitle:"Example mobile styles for form elements with help text icon"},Object(l.createElement)(c.b,{labelContent:"Status",inputId:"form-element-help-01m",hasTooltip:!0},Object(l.createElement)(u.a,{id:"form-element-help-01m",placeholder:"Placeholder text…"}))),U({id:"Showing-tooltip"},"Showing tooltip"),Z({},"The help text icon uses a tooltip to show the help text information. Please see ",R({href:"/components/tooltips/"},"Tooltips")," for implementation details."),Object(l.createElement)(r.a,{title:"Form Element - Help Text Icon - Showing tooltip"},Object(l.createElement)(o.a,{demoStyles:"padding-top: 4rem;"},Object(l.createElement)(c.b,{labelContent:"Status",inputId:"tooltip-showing-form-element-help-01",hasTooltip:!0,showTooltip:!0},Object(l.createElement)(u.a,{id:"tooltip-showing-form-element-help-01",placeholder:"Placeholder text…"})))),M({id:"Feedback"},"Feedback"),Z({},"A form element can have various methods of feedback, such as a required denotation or an inline error message."),U({id:"Required"},"Required"),Z({},"When a form element is required, an ",D({},"<abbr>")," should be injected before the ",D({},"<input>")," and within the ",D({},"<label>")," and have the class ",D({},"slds-required"),"."),Z({},"The ",D({},"<input>")," element should also have the HTML attribute ",D({},"required")," or ",D({},'required=""'),". Similarly, if it is disabled, it should have the ",D({},"disabled")," or ",D({},'disabled=""')," attribute. Do not use true/false values inside the ",D({},"required")," or ",D({},"disabled")," attributes because the mere presence of these attributes signifies the field is required or disabled."),Object(l.createElement)(r.a,{title:"Form Element - Required"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{labelContent:"Form Label",inputId:"form-element-03",isRequired:!0},Object(l.createElement)(u.a,{id:"form-element-03",placeholder:"Placeholder text…",required:!0})))),U({id:"Error"},"Error"),Z({},"If an error has occurred while submitting a form, the form element with an error should provide feedback. The ",D({},"slds-has-error")," class is placed on the ",D({},'<div class="slds-form-element">')," element. Then, the error message for the user is placed in a ",D({},"<div>")," with the ",D({},"slds-form-element__help")," class."),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility requirement"},Object(l.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"," ",Object(l.createElement)("code",null,"aria-describedby")," attribute to the ",Object(l.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.")),Object(l.createElement)(r.a,{title:"Form Element - Error"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{hasError:!0,labelContent:"Form Label",inputId:"form-element-05",errorId:"form-error-01",isRequired:!0,inlineMessage:"Enter a value."},Object(l.createElement)(u.a,{id:"form-element-05",placeholder:"Placeholder text…",required:!0,"aria-describedby":"form-error-01"})))),B({id:"Layout-Variations"},"Layout Variations"),Z({},"If your form has more than one form element, you can switch the direction of ",D({},"slds-form-element__label")," and ",D({},"slds-form-element__control")," by applying ",D({},"slds-form-element_stacked")," for stacked labels and ",D({},"slds-form-element_horizontal")," for left-aligned labels. For optimal spacing and layout, ensure the ",D({},"slds-form-element")," class is present on each element within the form."),M({id:"Stacked"},"Stacked"),Z({},"To vertically stack ",Object(l.createElement)("code",null,"<label>")," and ",Object(l.createElement)("code",null,"<input>")," pairs, place ",D({},"slds-form-element_stacked")," on the ",D({},"div")," with the class of ",D({},"slds-form-element")," for optimal spacing."),Object(l.createElement)(r.a,{title:"Form Layout - Stacked"},Object(l.createElement)(o.a,null,Object(F.f)(q,"simple-stacked"))),M({id:"Horizontal"},"Horizontal"),Z({},"To horizontally align a ",D({},"<label>")," and ",D({},"<input>"),", use the ",D({},"slds-form-element_horizontal")," class on the ",D({},"div")," with the class of ",D({},"slds-form-element"),". The ",D({},"slds-form-element__label")," takes up 33% of the width, and the ",D({},"slds-form-element__control")," uses the remaining 66%."),Object(l.createElement)(r.a,{title:"Form Layout - Horizontal"},Object(l.createElement)(o.a,null,Object(F.f)(T,"simple-horizontal"))),U({id:"Single-Column-Support"},"Single Column Support"),Z({},"When using ",D({},"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 ",D({},"slds-form-element_1-col")," to ",D({},"slds-form-element")," will re-distribute the layout."),J({id:"Standalone"},"Standalone"),Object(l.createElement)(r.a,{title:"Form Layout - Horizontal - Single Column standalone"},Object(l.createElement)(o.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"single-form-element-id-01",isEditing:!0,column:1},Object(l.createElement)(b.a,{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."})))),J({id:"With-5050-split"},"With 50/50 split"),Object(l.createElement)(r.a,{title:"Form Layout - Horizontal - Single Column combo"},Object(l.createElement)(o.a,null,Object(l.createElement)("div",{className:"slds-form",role:"list"},Object(l.createElement)(y.b,null,Object(l.createElement)(y.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Label",inputId:"single-form-element-id-02",isEditing:!0},Object(l.createElement)(u.a,{id:"single-form-element-id-02",placeholder:"Placeholder text…"}))),Object(l.createElement)(y.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Label",inputId:"single-form-element-id-03",isEditing:!0},Object(l.createElement)(u.a,{id:"single-form-element-id-03",placeholder:"Placeholder text…"})))),Object(l.createElement)(y.b,null,Object(l.createElement)(y.a,null,Object(l.createElement)(c.b,{isHorizontal:!0,labelContent:"Description",inputId:"single-form-element-id-04",isEditing:!0,column:1},Object(l.createElement)(b.a,{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."}))))))),U({id:"Error-state"},"Error state"),Z({},"When in the horizontal layout, error messages will appear underneath the related input."),Object(l.createElement)(o.a,null,Object(F.f)(j,"form-element-horizontal-edit-error")),M({id:"Compound"},"Compound"),Z({},"A compound form is a grouping of several form elements described by a label/title. The compound form should be implemented as a ",D({},"<fieldset>"),", where the label/title is implemented as a ",D({},"<legend>")," element."),Z({},"The ",D({},"<fieldset>")," ",G({},H({},"requires"))," the class ",D({},"slds-form-element_compound"),". This class handles the layout and wrapping of the form elements that are grouped together."),Z({},"The ",D({},"<legend>")," element ",G({},H({},"requires"))," the class ",D({},"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."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)(c.a,{hasCompoundFields:!0,label:"Fieldset Label"},"...")),U({id:"Rows"},"Rows"),Z({},"Each row of a compound field should be wrapped in a ",D({},"<div>")," with the class ",D({},"slds-form-element__row"),"."),U({id:"Fields"},"Fields"),Z({},"Each field inside of a compound row can be explicitly sized by using a sizing class, e.g. ",D({},"slds-size_1-of-2"),"."),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)(g,null,Object(l.createElement)("div",{className:"slds-size_1-of-2"},"..."))),Object(l.createElement)(r.a,{title:"Form Layout - Compound"},Object(l.createElement)(o.a,{demoStyles:"max-width: 400px;"},Object(F.f)(V))),U({id:"Address"},"Address"),Z({},"Though an address form is utilizing the ",D({},"slds-form-element_compound")," class, we need to also add the ",D({},"slds-form-element_address")," class to the component. We modify some of the behavior of an address form with this class."),Object(l.createElement)(r.a,{title:"Form Layout - Compound - Address"},Object(l.createElement)(o.a,{demoStyles:"max-width: 400px;"},Object(F.f)(L))),B({id:"Usage-Examples"},"Usage Examples"),M({id:"Record-Form"},"Record Form"),Z({},"A record form is a series of rows created by ",D({},"slds-form__row"),". Inside of each row contains up to 2 inline-editable form element. Each item inside of ",D({},"slds-form__row")," is required to be wrapped in a ",D({},"<div>")," with the class ",D({},"slds-form__item"),"."),Object(l.createElement)(d.a,{type:"a11y",header:"Accessibility Requirement"},Object(l.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 ",Object(l.createElement)("code",null,'role="list"')," to the"," ",Object(l.createElement)("code",null,"slds-form")," element. Every column inside of each row should get"," ",Object(l.createElement)("code",null,'role="listitem"')," to identify itself as items of the list.")),U({id:"View-Mode"},"View Mode"),Z({},"When in view/readonly mode, it is ",H({},"required")," to have the class ",D({},"slds-form-element_readonly")," on the ",D({},"slds-form-element")," element. This class will provide styles for scanability and spacing."),Z({},"If inline-edit mode is enabled, you will also need to add ",D({},"slds-form-element_edit")," to the ",D({},"slds-form-element")," to accommodate the space for the edit button icon."),J({id:"Stacked-Alignment"},"Stacked Alignment"),Z({},"When you want the form elements inside of your record form to be stacked. Each ",D({},"slds-form-element")," should also get the class ",D({},"slds-form-element_stacked"),"."),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - View Mode"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:A,isViewMode:!0,hasInlineEdit:!0,direction:"stacked"}))),J({id:"Horizontal-Alignment"},"Horizontal Alignment"),Z({},"By adding the class ",D({},"slds-form-element_horizontal")," to every ",D({},"slds-form-element"),", your form can switch from stacked to left-aligned, horizontal labels in order to reduce vertical space."),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - View Mode - Horizontal"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:w,isViewMode:!0,hasInlineEdit:!0,direction:"horizontal"}))),U({id:"Edit-Mode"},"Edit Mode"),Z({},"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:"),Object(l.createElement)(s.a,{toggleCode:!1},Object(l.createElement)(c.b,{labelContent:"My Label",inputId:"unique-form-element-id"},"...")),Z({},"The form content found inside of ",D({},"slds-form-element__control")," should be replaced with the appropriate field type of the view/readonly state."),J({id:"Stacked-Alignment-2"},"Stacked Alignment"),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - Edit Mode"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:A,direction:"stacked"}))),J({id:"Horizontal-Alignment-2"},"Horizontal Alignment"),Object(l.createElement)(r.a,{title:"Form Element - Record Detail - Edit Mode - Horizontal"},Object(l.createElement)(o.a,null,Object(l.createElement)(y.c,{snapshot:w,direction:"horizontal"}))))},Q=function(){return Object(i.a)(W())}}});

package/__internal/chunked/docs/ui/components/global-header/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/global-header/docs.mdx.js"]=function(e){function t(t){for(var a,s,l=t[0],r=t[1],c=t[2],d=0,m=[];d<l.length;d++)s=l[d],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);for(u&&u(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),o()}function o(){for(var e,t=0;t<i.length;t++){for(var o=i[t],a=!0,l=1;l<o.length;l++){var r=o[l];0!==n[r]&&(a=!1)}a&&(i.splice(t--,1),e=s(s.s=o[0]))}return e}var a={},n={40:0},i=[];function s(t){if(a[t])return a[t].exports;var o=a[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,s),o.l=!0,o.exports}s.m=e,s.c=a,s.d=function(e,t,o){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:o})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(s.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(o,a,function(t){return e[t]}.bind(null,a));return o},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var u=r;return i.push([654,0]),o()}({0:function(e,t){e.exports=React},19:function(e,t){e.exports=ReactDOM},20:function(e,t){e.exports=JSBeautify},654:function(e,t,o){"use strict";o.r(t),o.d(t,"getElement",(function(){return ke})),o.d(t,"getContents",(function(){return Pe}));var a=o(0),n=o.n(a),i=o(4),s=o(2),l=o(25),r=o(15),c=o(14),u=o(5),d=o.n(u),m=o(3),b=o.n(m),f=o(7),p=o(46),h=o(38),y={item1:{username:"Val Handerly",avatar:"/assets/images/avatar2.jpg",title:"mentioned you",message:"@jrogers Could I please have a review on my presentation deck",timestamp:"10 hours ago",unread:!0},item2:{username:"Jon Rogers",avatar:"/assets/images/avatar3.jpg",title:"commented on your post",message:"I totally agree with your sentiment",timestamp:"13 hours ago",unread:!0},item3:{username:"Rebecca Stone",avatar:"/assets/images/avatar2.jpg",title:"mentioned you",message:"@jrogers Here's the conversation I mentioned to you",timestamp:"1 day ago",unread:!1}};function g(e){return(g="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})(e)}function v(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function _(e,t){return(_=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function E(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,a=j(e);if(t){var n=j(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return w(this,o)}}function w(e,t){return!t\|\|"object"!==g(t)&&"function"!=typeof t?O(e):t}function O(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function j(e){return(j=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var x=function(e){return n.a.createElement("li",{className:d()("slds-global-header__notification",e.unread&&"slds-global-header__notification_unread",e.className),key:e.index},n.a.createElement("div",{className:"slds-media slds-has-flexi-truncate slds-p-around_x-small"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement(p.a,{className:"slds-avatar_small"},n.a.createElement("img",{alt:e.username,src:e.avatar,title:"".concat(e.username," avatar")}))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("div",{className:"slds-grid slds-grid_align-spread"},n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-text-link_reset slds-has-flexi-truncate"},n.a.createElement("h3",{className:"slds-truncate",title:"".concat(e.username," ").concat(e.title)},n.a.createElement("strong",null,"".concat(e.username," ").concat(e.title))),n.a.createElement("p",{className:"slds-truncate",title:e.message},e.message),n.a.createElement("p",{className:"slds-m-top_x-small slds-text-color_weak"},e.timestamp,e.unread&&n.a.createElement("abbr",{className:"slds-text-link slds-m-horizontal_xxx-small",title:"unread"},"●")))))))},N=function(e){!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}}),t&&_(e,t)}(s,e);var t,o,a,i=E(s);function s(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(e=i.call(this)).renderNotificationItems=e.renderNotificationItems.bind(O(e)),e}return t=s,(o=[{key:"renderNotificationItems",value:function(e){var t=y[e];return n.a.createElement(x,{key:e,index:e,avatar:t.avatar,username:t.username,title:t.title,message:t.message,timestamp:t.timestamp,unread:t.unread})}},{key:"render",value:function(){return n.a.createElement(h.a,{className:"slds-popover_large slds-nubbin_top-right",bodyClassName:"slds-p-around_none",headerTitle:"Notifications",closeButton:!0,style:{position:"absolute",top:"calc(100% + 12px)",right:"-12px"}},n.a.createElement("ul",null,Object.keys(y).map(this.renderNotificationItems)))}}])&&v(t.prototype,o),a&&v(t,a),s}(a.Component),S=o(98);function T(e){return(T="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})(e)}function C(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function k(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function P(e,t){return(P=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function I(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,a=R(e);if(t){var n=R(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return F(this,o)}}function F(e,t){return!t\|\|"object"!==T(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function R(e){return(R=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var D=function(e){!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}}),t&&P(e,t)}(s,e);var t,o,a,i=I(s);function s(){return C(this,s),i.apply(this,arguments)}return t=s,(o=[{key:"render",value:function(){return n.a.createElement(h.a,{className:"slds-nubbin_top slds-dynamic-menu",bodyClassName:"slds-p-horizontal_none",title:"My Favorites",footer:n.a.createElement(S.a,null),style:{position:"absolute",left:"-8rem",top:"36px"}},n.a.createElement(S.b,{length:this.props.numberOfFavorites}))}}])&&k(t.prototype,o),a&&k(t,a),s}(a.Component),A=o(9),M=o(32);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})(e)}function q(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function B(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function V(e,t){return(V=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function H(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,a=W(e);if(t){var n=W(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return G(this,o)}}function G(e,t){return!t\|\|"object"!==L(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function W(e){return(W=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var U=function(e){!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}}),t&&V(e,t)}(s,e);var t,o,a,i=H(s);function s(){return q(this,s),i.apply(this,arguments)}return t=s,(o=[{key:"render",value:function(){return n.a.createElement(A.f,{className:"slds-dropdown_right slds-nubbin_top-right",style:{right:"-1rem"}},n.a.createElement(A.h,null,n.a.createElement(A.g,{iconLeft:n.a.createElement(M.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_small",symbol:"event"}),tabIndex:"0"},"New Event"),n.a.createElement(A.g,{iconLeft:n.a.createElement(M.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_small",symbol:"note"}),tabIndex:"0"},"New Note"),n.a.createElement(A.g,{iconLeft:n.a.createElement(M.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_small",symbol:"email"}),tabIndex:"0"},"New Email")))}}])&&B(t.prototype,o),a&&B(t,a),s}(a.Component);function J(e){return(J="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})(e)}function z(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function Y(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function K(e,t){return(K=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function Q(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,a=X(e);if(t){var n=X(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return $(this,o)}}function $(e,t){return!t\|\|"object"!==J(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function X(e){return(X=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var Z=function(e){return n.a.createElement("div",{className:"slds-global-actions__favorites slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement("div",{className:"slds-button-group"},n.a.createElement(f.b,{className:d()("slds-global-actions__favorites-action slds-button_icon slds-button_icon-border slds-button_icon-small",{"slds-is-disabled":e.favoritesDisabled,"slds-is-selected":e.favoritesClicked}),disabled:e.favoritesDisabled,"aria-pressed":e.favoritesClicked?"true":"false",symbol:"favorite",title:"Toggle Favorites",assistiveText:"Toggle Favorite",onClick:function(){return e.toggleFavorite()}}),n.a.createElement(f.b,{className:d()("slds-global-actions__favorites-more slds-button_icon slds-button_icon-border slds-button_icon-small"),iconClassName:"slds-button__icon_small",symbol:"down",title:"View Favorites",assistiveText:"View Favorites"})),e.showFavoritesPopup&&n.a.createElement(D,{numberOfFavorites:2}))};Z.propTypes={favoritesDisabled:b.a.bool,favoritesClicked:b.a.bool,showFavoritesPopup:b.a.bool};var ee=function(e){return n.a.createElement("div",{className:d()("slds-dropdown-trigger slds-dropdown-trigger_click",e.showTaskMenu&&"slds-is-open")},n.a.createElement(f.b,{className:"slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__task slds-global-actions__item-action","aria-haspopup":"true",symbol:"add",title:"Global Actions",assistiveText:"Global Actions"}),e.showTaskMenu&&n.a.createElement(U,null))};ee.propTypes={showTaskMenu:b.a.bool};var te=function(){return n.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement(f.b,{className:"slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__help slds-global-actions__item-action",iconClassName:"slds-global-header__icon","aria-haspopup":"true",symbol:"question",title:"Help and Training",assistiveText:"Help and Training"}))},oe=function(){return n.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement(f.b,{className:"slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__setup slds-global-actions__item-action",iconClassName:"slds-global-header__icon","aria-haspopup":"true",symbol:"setup",title:"Setup",assistiveText:"Setup"}))},ae=function(e){var t=e.notificationCount?"".concat(e.notificationCount," new notifications"):"no new notifications";return n.a.createElement("div",{className:d()("slds-dropdown-trigger slds-dropdown-trigger_click",e.showNotificationPopup&&"slds-is-open")},n.a.createElement(f.b,{className:d()("slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__notifications slds-global-actions__item-action",{"slds-incoming-notification":e.showNotification&&e.notificationCount}),iconClassName:"slds-global-header__icon",symbol:"notification",title:t,assistiveText:t,"aria-live":"assertive","aria-atomic":"true"}),n.a.createElement("span",{"aria-hidden":"true",className:d()("slds-notification-badge",e.notificationCount&&"slds-incoming-notification",e.showNotification&&"slds-show-notification")},e.notificationCount),e.showNotificationPopup&&n.a.createElement(N,null))};ae.propTypes={notificationCount:b.a.oneOfType([b.a.string,b.a.number]),showNotificationPopup:b.a.bool};var ne=function(){return n.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement("button",{className:"slds-button slds-global-actions__avatar slds-global-actions__item-action",title:"person name","aria-haspopup":"true"},n.a.createElement("span",{className:"slds-avatar slds-avatar_circle slds-avatar_medium"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))},ie=function(e){!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}}),t&&K(e,t)}(s,e);var t,o,a,i=Q(s);function s(){return z(this,s),i.apply(this,arguments)}return t=s,(o=[{key:"render",value:function(){var e=this.props,t=e.toggleFavorite,o=e.favoritesClicked,a=e.favoritesDisabled,i=e.showFavoritesPopup,s=e.showNotification,l=e.notificationCount,r=e.showNotificationPopup,c=e.showTaskMenu;return n.a.createElement("ul",{className:"slds-global-actions"},n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(Z,{toggleFavorite:t,favoritesClicked:o,favoritesDisabled:a,showFavoritesPopup:i})),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(ee,{showTaskMenu:c})),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(te,null)),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(oe,null)),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(ae,{showNotification:s,notificationCount:l,showNotificationPopup:r})),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(ne,null)))}}])&&Y(t.prototype,o),a&&Y(t,a),s}(n.a.Component);ie.propTypes={favoritesClicked:b.a.bool,favoritesDisabled:b.a.bool,showFavoritesPopup:b.a.bool,showNotification:b.a.bool,notificationCount:b.a.oneOfType([b.a.string,b.a.number]),showNotificationPopup:b.a.bool,showTaskMenu:b.a.bool};var se=ie;function le(e){return(le="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})(e)}function re(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function ce(e,t){return(ce=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function ue(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,a=be(e);if(t){var n=be(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return de(this,o)}}function de(e,t){return!t\|\|"object"!==le(t)&&"function"!=typeof t?me(e):t}function me(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function be(e){return(be=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var fe=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement("a",{href:"#",className:"slds-assistive-text slds-assistive-text_focus",onClick:function(e){return e.preventDefault()}},"Skip to Navigation"),n.a.createElement("a",{href:"#",className:"slds-assistive-text slds-assistive-text_focus",onClick:function(e){return e.preventDefault()}},"Skip to Main Content"))},pe=function(){return n.a.createElement("div",{className:"slds-global-header__logo"},n.a.createElement("span",{className:"slds-assistive-text"},"Salesforce"))},he=function(e){!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}}),t&&ce(e,t)}(s,e);var t,o,a,i=ue(s);function s(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(e=i.call(this)).toggleFavorite=e.toggleFavorite.bind(me(e)),e.showNotification=e.showNotification.bind(me(e)),e.showIncomingNotification=e.showIncomingNotification.bind(me(e)),e.state={favoritesClicked:!1,showNotification:!1,notificationCount:0},e}return t=s,(o=[{key:"toggleFavorite",value:function(){this.setState({favoritesClicked:!this.state.favoritesClicked})}},{key:"showNotification",value:function(){this.setState({showNotification:!this.state.showNotification,notificationCount:1})}},{key:"showIncomingNotification",value:function(){this.setState({notificationCount:++this.state.notificationCount})}},{key:"render",value:function(){var e=this;return n.a.createElement("header",{className:d()("slds-global-header_container",this.props.className)},n.a.createElement(fe,null),n.a.createElement("div",{className:"slds-global-header slds-grid slds-grid_align-spread"},n.a.createElement("div",{className:"slds-global-header__item"},n.a.createElement(pe,null)),!this.props.playground&&n.a.createElement("div",{className:"slds-global-header__item slds-global-header__item_search"},this.props.globalSearch),n.a.createElement("div",{className:"slds-global-header__item"},n.a.createElement(se,{toggleFavorite:this.toggleFavorite,favoritesClicked:this.state.favoritesClicked,favoritesDisabled:this.props.favoritesDisabled,showFavoritesPopup:this.props.showFavoritesPopup,showNotification:this.state.showNotification,notificationCount:this.state.notificationCount,showNotificationPopup:this.props.showNotificationPopup,showTaskMenu:this.props.showTaskMenu}))),this.props.playground&&n.a.createElement("div",{className:"slds-button-group slds-m-around_medium"},n.a.createElement("button",{className:"slds-button slds-button_neutral",onClick:function(){return e.showNotification()}},"Toggle Notification"),n.a.createElement("button",{className:"slds-button slds-button_neutral",onClick:function(){return e.showIncomingNotification()}},"Increase count")))}}])&&re(t.prototype,o),a&&re(t,a),s}(a.Component),ye=o(22),ge=o(52),ve=o(23),_e=o(11),Ee={option0:{name:"Recent Items",label:!0},option1:{name:"Salesforce - 1,000 Licenses",entityMeta:!0,entityType:"Opportunity",entityField:"Propecting"},option2:{name:"Art Vandelay",entityMeta:!0,entityType:"Contact",entityField:"avandelay@vandelay.com"},option3:{name:"Vandelay Industries",entityMeta:!0,entityType:"Account",entityField:"San Francisco"},option4:{name:"Salesforce UK 2016 Events",entityMeta:!0,entityType:"Event",entityField:"$20,000"},option5:{name:"H.E. Pennypacker",entityMeta:!0,entityType:"Lead",entityField:"Nursing"}},we={option1:{term:"Salesforce",beforeTerm:"",afterTerm:".com",entityMeta:!0,entityType:"Account",entityLocation:"San Francisco, CA"},option2:{term:"Salesforce",beforeTerm:"",afterTerm:".org",entityMeta:!0,entityType:"Account",entityLocation:"New York, NY"},option3:{term:"Salesforce",beforeTerm:"",afterTerm:"HQ",entityMeta:!0,entityType:"Account",entityLocation:"San Francisco, CA"}},Oe=o(1),je=i.c.a,xe=i.c.code,Ne=i.c.h2,Se=i.c.h3,Te=i.c.h4,Ce=i.c.p,ke=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"lead doc"},"The global header is the anchor for the Salesforce platform and spans all other parts of the UI. The functionality in the header is applicable across all contexts in the Salesforce ecosystem (internal or 3rd party)."),Object(a.createElement)(s.a,{isViewport:!0,exampleOnly:!0,demoStyles:"position: relative; height: 20.25rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-1",comboboxID:"primary-search-combobox-id-1",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-1","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-search-combobox-id-1",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasInteractions:!0})})),Ne({id:"About-Global-Header"},"About Global Header"),Se({id:"Structure"},"Structure"),Ce({},"The global header is made up of 3 distinct sections, the logo, the global search, and the global actions. Each section is wrapped in a ",xe({},"<div>")," with the class name ",xe({},"slds-global-header__item"),". The search region gets the modifier class ",xe({},"slds-global-header__item_search"),". This class provides particular styling to handle the search box."),Object(a.createElement)(r.a,{title:"global header layout"},Object(a.createElement)(l.a,null,Object(a.createElement)("header",{className:"slds-global-header_container"},Object(a.createElement)("div",{className:"slds-global-header"},Object(a.createElement)("div",{className:"slds-global-header__item"},"..."),Object(a.createElement)("div",{className:"slds-global-header__item slds-global-header__item_search"},"..."),Object(a.createElement)("div",{className:"slds-global-header__item"},"..."))))),Ce({},"In most scenarios, you will want to fix the global header to the top of the viewport. To achieve this, wrap the global header component in a ",xe({},"<div>")," with the class name ",xe({},"slds-global-header_container"),"."),Object(a.createElement)(r.a,{title:"global header container"},Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)("header",{className:"slds-global-header_container"},Object(a.createElement)("div",{className:"slds-global-header"},"...")))),Se({id:"Accessibility"},"Accessibility"),Ce({},"For screen reading users, we need to provide a way to navigate over the global header and directly to content regions. For this scenario, we provide two links above the global header that provides navigation to landmarks within the app. These links are visually hidden by default but become visible when focused."),Object(a.createElement)(r.a,{title:"global header jump links"},Object(a.createElement)(l.a,null,Object(a.createElement)("header",{className:"slds-global-header_container"},Object(a.createElement)("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-assistive-text slds-assistive-text_focus"},"Skip to Navigation"),Object(a.createElement)("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-assistive-text slds-assistive-text_focus"},"Skip to Main Content"),Object(a.createElement)("div",{className:"slds-global-header"},"...")))),Ne({id:"Base"},"Base"),Object(a.createElement)(r.a,{title:"base global header"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 21.25rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-1",comboboxID:"primary-search-combobox-id-1",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-1","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-search-combobox-id-1",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasInteractions:!0})}))),Ne({id:"Logo"},"Logo"),Ce({},"The logo region is a ",xe({},"<div>")," with the class name ",xe({},"slds-global-header__logo")," wrapped around a span with assistive text for the logo. This inner span has the class name ",xe({},"slds-assistive-text")," and is required to meet accessibility guidelines. The logo is applied as a background image to the div with CSS. This allows us to constrain the dimensions of the logo by a max-height of 40px and a max-width of 200px."),Object(a.createElement)(s.a,{isViewport:!0,toggleCode:!1,demoStyles:"padding: 0.5rem 0; min-height: 3.5rem;"},Object(a.createElement)("div",{className:"slds-global-header__item"},Object(a.createElement)(pe,null))),Ne({id:"Global-Search"},"Global Search"),Ce({},"The global search component is used for application wide search. The form element is implemented as a ",je({href:"/components/combobox"},"Combobox"),", please refer to the accessibility guidelines on the Combobox component page for implementation guidance."),Se({id:"Default"},"Default"),Object(a.createElement)(r.a,{title:"Global Header Search Default State"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 5.5rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-2",comboboxID:"primary-search-combobox-id-2",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-2","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-search-combobox-id-2",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1})})}))),Se({id:"Focused-and-expanded"},"Focused and expanded"),Object(a.createElement)(r.a,{title:"Global Header Search Expanded State"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 21rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-3",comboboxID:"primary-search-combobox-id-3",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-3","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-search-combobox-id-3",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasFocus:!0,isOpen:!0})}))),Se({id:"Active-and-typing"},"Active and typing"),Object(a.createElement)(r.a,{title:"Global Header Search Active State"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 21rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-4",comboboxID:"primary-search-combobox-id-4",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",value:"salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-4",term:"salesforce",snapshot:we,type:"entity",count:6}),resultsType:"listbox","aria-activedescendant":"option0",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-search-combobox-id-4",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasFocus:!0,isOpen:!0})}))),Ne({id:"Global-Actions-Bar"},"Global Actions Bar"),Ce({},"The global actions bar holds application wide task actions that will persist with the user through their experience."),Ce({},"The global actions bar is located in the right region of the global header."),Object(a.createElement)(s.a,{isViewport:!0,exampleOnly:!0,demoStyles:"position: relative; height: 3.125rem;"},Object(a.createElement)(he,null)),Se({id:"Favorites"},"Favorites"),Ce({},'The favorites action is used to "favorite" a commonly used page within a user\'s experience. When a user "favorites" a page by pressing the favorites action, the button icon changes color with a small animation to confirm your selection.'),Te({id:"Not-pressed"},"Not pressed"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(Z,null)))),Te({id:"Pressed"},"Pressed"),Ce({},"When pressed, apply the class ",xe({},"slds-is-selected")," to the ",xe({},"slds-global-actions__favorites-action")," button element."),Object(a.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(a.createElement)("p",null,"When the favorites action is pressed, we need to toggle the"," ",Object(a.createElement)("code",null,"aria-pressed")," attribute to"," ",Object(a.createElement)("code",null,"true"),". This will inform a screen reader that the button has been pressed.")),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(Z,{favoritesClicked:!0})))),Te({id:"Disabled"},"Disabled"),Ce({},"If the favorites action needs to become disabled, apply the ",xe({},"disabled")," attribute and the class ",xe({},"slds-is-disabled")," to the button with ",xe({},'class="slds-global-actions_favorites-action"'),"."),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(Z,{favoritesDisabled:!0})))),Te({id:"Favorites-popover"},"Favorites popover"),Ce({},"The favorites popover is invoked when a user clicks on the dropdown arrow action icon inside of the favorites button group. The favorites popover is implemented as a ",je({href:"/components/dynamic-menu/"},"Popover - Dynamic Menu Variant")," component, please refer to the accessibility guidelines on the Popover component page for implementation guidance."),Object(a.createElement)(s.a,{demoStyles:" display: flex; justify-content: flex-end; align-items: flex-start; height: 16rem; min-width: 400px; "},Object(a.createElement)(se,{showFavoritesPopup:!0})),Se({id:"Task"},"Task"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(ee,null)))),Te({id:"Task-menu"},"Task menu"),Ce({},"When the global task action is invoked, a menu inside of a dropdown becomes visible. Please refer to the accessibility section of the ",je({href:"/components/menus"},"Menus component")," for implementation guidelines."),Object(a.createElement)(s.a,{demoStyles:" display: flex; justify-content: flex-end; align-items: flex-start; height: 16rem; min-width: 400px; "},Object(a.createElement)(se,{showTaskMenu:!0})),Se({id:"Help"},"Help"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(te,null)))),Se({id:"Setup"},"Setup"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(oe,null)))),Se({id:"Notifications"},"Notifications"),Ce({},"Notifications are a way to notify a user about a global change within the application. This is commonly used to communicate a Chatter mention/reply or a status update on an opportunity pipeline."),Object(a.createElement)(s.a,{isViewport:!0,exampleOnly:!0,demoStyles:"position: relative; height: 7.5rem;"},Object(a.createElement)(he,{playground:!0})),Te({id:"No-notifications"},"No notifications"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(ae,null)))),Te({id:"New-notifications"},"New notifications"),Ce({},"When a notification is coming through, we want to apply the ",xe({},"slds-incoming-notification")," class to both the ",xe({},"slds-global-actions__notifications")," button, as well as the ",xe({},"slds-notification-badge"),". This will initiate the animation that there is a new incoming notification. A notification badge will also need to receive the ",xe({},"slds-show-notification")," class, this ensures the badge becomes visible for the incoming animation to work. The ",xe({},"slds-show-notification")," class should also be applied if a user has unread notifications upon their return to their application."),Object(a.createElement)(c.a,{type:"a11y",header:"Accessibility Note"},Object(a.createElement)("p",null,"The notification badge is hidden from screen readers by add the attribute"," ",Object(a.createElement)("code",null,'aria-hidden="true"'),' so the badge doesn\'t have to be inside the button itself. Since the badge count is hidden, we need to add the count number to the button text via some hidden assistive text. The assistive text string should be updated with number of new notifications, such as "3 new notification". If there are no notifications, the assistive text should read "No notifications". The button element also requires'," ",Object(a.createElement)("code",null,'aria-live="assertive"')," to announce any count updates.")),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(ae,{showNotification:!0,notificationCount:"1"})))),Te({id:"Notification-Popover"},"Notification Popover"),Ce({},"The notification popover is invoked when a user clicks on the notification action icon. The notification popover is implemented as a ",je({href:"/components/popovers"},"Popover component"),", please refer to the accessibility guidelines on the Popover component page for implementation guidance."),Object(a.createElement)(s.a,{exampleOnly:!0,demoStyles:" display: flex; justify-content: flex-end; align-items: flex-start; height: 25rem; min-width: 400px; "},Object(a.createElement)(se,{showNotification:!0,notificationCount:"3",showNotificationPopup:!0})),Object(a.createElement)(l.a,null,Object(a.createElement)(N,null)),Te({id:"Unread-notifications"},"Unread notifications"),Ce({},"When a notification item is unread, add the class ",xe({},"slds-global-header__notification_unread")," to the ",xe({},"slds-global-header__notification")," list item. This will provide the unread styles. In addition to adding the class name, please add a dot indicator, ",xe({},'<abbr class="slds-text-link slds-m-horizontal_xxx-small" title="unread">●</abbr>'),", to provide visual affordance that the item is unread."))},Pe=function(){return Object(i.a)(ke())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/global-header/docs.mdx.js"]=function(e){function t(t){for(var a,s,l=t[0],r=t[1],c=t[2],d=0,m=[];d<l.length;d++)s=l[d],Object.prototype.hasOwnProperty.call(n,s)&&n[s]&&m.push(n[s][0]),n[s]=0;for(a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);for(u&&u(t);m.length;)m.shift()();return i.push.apply(i,c\|\|[]),o()}function o(){for(var e,t=0;t<i.length;t++){for(var o=i[t],a=!0,l=1;l<o.length;l++){var r=o[l];0!==n[r]&&(a=!1)}a&&(i.splice(t--,1),e=s(s.s=o[0]))}return e}var a={},n={40:0},i=[];function s(t){if(a[t])return a[t].exports;var o=a[t]={i:t,l:!1,exports:{}};return e[t].call(o.exports,o,o.exports,s),o.l=!0,o.exports}s.m=e,s.c=a,s.d=function(e,t,o){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:o})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(s.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)s.d(o,a,function(t){return e[t]}.bind(null,a));return o},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],r=l.push.bind(l);l.push=t,l=l.slice();for(var c=0;c<l.length;c++)t(l[c]);var u=r;return i.push([655,0]),o()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},21:function(e,t){e.exports=JSBeautify},655:function(e,t,o){"use strict";o.r(t),o.d(t,"getElement",(function(){return ke})),o.d(t,"getContents",(function(){return Pe}));var a=o(0),n=o.n(a),i=o(4),s=o(2),l=o(26),r=o(15),c=o(14),u=o(5),d=o.n(u),m=o(3),b=o.n(m),f=o(7),p=o(47),h=o(39),y={item1:{username:"Val Handerly",avatar:"/assets/images/avatar2.jpg",title:"mentioned you",message:"@jrogers Could I please have a review on my presentation deck",timestamp:"10 hours ago",unread:!0},item2:{username:"Jon Rogers",avatar:"/assets/images/avatar3.jpg",title:"commented on your post",message:"I totally agree with your sentiment",timestamp:"13 hours ago",unread:!0},item3:{username:"Rebecca Stone",avatar:"/assets/images/avatar2.jpg",title:"mentioned you",message:"@jrogers Here's the conversation I mentioned to you",timestamp:"1 day ago",unread:!1}};function g(e){return(g="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})(e)}function v(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function _(e,t){return(_=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function E(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,a=j(e);if(t){var n=j(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return w(this,o)}}function w(e,t){return!t\|\|"object"!==g(t)&&"function"!=typeof t?O(e):t}function O(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function j(e){return(j=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var x=function(e){return n.a.createElement("li",{className:d()("slds-global-header__notification",e.unread&&"slds-global-header__notification_unread",e.className),key:e.index},n.a.createElement("div",{className:"slds-media slds-has-flexi-truncate slds-p-around_x-small"},n.a.createElement("div",{className:"slds-media__figure"},n.a.createElement(p.a,{className:"slds-avatar_small"},n.a.createElement("img",{alt:e.username,src:e.avatar,title:"".concat(e.username," avatar")}))),n.a.createElement("div",{className:"slds-media__body"},n.a.createElement("div",{className:"slds-grid slds-grid_align-spread"},n.a.createElement("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-text-link_reset slds-has-flexi-truncate"},n.a.createElement("h3",{className:"slds-truncate",title:"".concat(e.username," ").concat(e.title)},n.a.createElement("strong",null,"".concat(e.username," ").concat(e.title))),n.a.createElement("p",{className:"slds-truncate",title:e.message},e.message),n.a.createElement("p",{className:"slds-m-top_x-small slds-text-color_weak"},e.timestamp,e.unread&&n.a.createElement("abbr",{className:"slds-text-link slds-m-horizontal_xxx-small",title:"unread"},"●")))))))},N=function(e){!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}}),t&&_(e,t)}(s,e);var t,o,a,i=E(s);function s(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(e=i.call(this)).renderNotificationItems=e.renderNotificationItems.bind(O(e)),e}return t=s,(o=[{key:"renderNotificationItems",value:function(e){var t=y[e];return n.a.createElement(x,{key:e,index:e,avatar:t.avatar,username:t.username,title:t.title,message:t.message,timestamp:t.timestamp,unread:t.unread})}},{key:"render",value:function(){return n.a.createElement(h.a,{className:"slds-popover_large slds-nubbin_top-right",bodyClassName:"slds-p-around_none",headerTitle:"Notifications",closeButton:!0,style:{position:"absolute",top:"calc(100% + 12px)",right:"-12px"}},n.a.createElement("ul",null,Object.keys(y).map(this.renderNotificationItems)))}}])&&v(t.prototype,o),a&&v(t,a),s}(a.Component),S=o(99);function T(e){return(T="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})(e)}function C(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function k(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function P(e,t){return(P=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function I(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,a=R(e);if(t){var n=R(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return F(this,o)}}function F(e,t){return!t\|\|"object"!==T(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function R(e){return(R=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var D=function(e){!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}}),t&&P(e,t)}(s,e);var t,o,a,i=I(s);function s(){return C(this,s),i.apply(this,arguments)}return t=s,(o=[{key:"render",value:function(){return n.a.createElement(h.a,{className:"slds-nubbin_top slds-dynamic-menu",bodyClassName:"slds-p-horizontal_none",title:"My Favorites",footer:n.a.createElement(S.a,null),style:{position:"absolute",left:"-8rem",top:"36px"}},n.a.createElement(S.b,{length:this.props.numberOfFavorites}))}}])&&k(t.prototype,o),a&&k(t,a),s}(a.Component),A=o(9),M=o(33);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})(e)}function q(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function B(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function V(e,t){return(V=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function H(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,a=W(e);if(t){var n=W(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return G(this,o)}}function G(e,t){return!t\|\|"object"!==L(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function W(e){return(W=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var U=function(e){!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}}),t&&V(e,t)}(s,e);var t,o,a,i=H(s);function s(){return q(this,s),i.apply(this,arguments)}return t=s,(o=[{key:"render",value:function(){return n.a.createElement(A.f,{className:"slds-dropdown_right slds-nubbin_top-right",style:{right:"-1rem"}},n.a.createElement(A.h,null,n.a.createElement(A.g,{iconLeft:n.a.createElement(M.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_small",symbol:"event"}),tabIndex:"0"},"New Event"),n.a.createElement(A.g,{iconLeft:n.a.createElement(M.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_small",symbol:"note"}),tabIndex:"0"},"New Note"),n.a.createElement(A.g,{iconLeft:n.a.createElement(M.a,{containerClassName:"slds-m-right_x-small",className:"slds-icon_small",symbol:"email"}),tabIndex:"0"},"New Email")))}}])&&B(t.prototype,o),a&&B(t,a),s}(a.Component);function J(e){return(J="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})(e)}function z(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function Y(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function K(e,t){return(K=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function Q(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,a=X(e);if(t){var n=X(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return $(this,o)}}function $(e,t){return!t\|\|"object"!==J(t)&&"function"!=typeof t?function(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}(e):t}function X(e){return(X=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var Z=function(e){return n.a.createElement("div",{className:"slds-global-actions__favorites slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement("div",{className:"slds-button-group"},n.a.createElement(f.b,{className:d()("slds-global-actions__favorites-action slds-button_icon slds-button_icon-border slds-button_icon-small",{"slds-is-disabled":e.favoritesDisabled,"slds-is-selected":e.favoritesClicked}),disabled:e.favoritesDisabled,"aria-pressed":e.favoritesClicked?"true":"false",symbol:"favorite",title:"Toggle Favorites",assistiveText:"Toggle Favorite",onClick:function(){return e.toggleFavorite()}}),n.a.createElement(f.b,{className:d()("slds-global-actions__favorites-more slds-button_icon slds-button_icon-border slds-button_icon-small"),iconClassName:"slds-button__icon_small",symbol:"down",title:"View Favorites",assistiveText:"View Favorites"})),e.showFavoritesPopup&&n.a.createElement(D,{numberOfFavorites:2}))};Z.propTypes={favoritesDisabled:b.a.bool,favoritesClicked:b.a.bool,showFavoritesPopup:b.a.bool};var ee=function(e){return n.a.createElement("div",{className:d()("slds-dropdown-trigger slds-dropdown-trigger_click",e.showTaskMenu&&"slds-is-open")},n.a.createElement(f.b,{className:"slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__task slds-global-actions__item-action","aria-haspopup":"true",symbol:"add",title:"Global Actions",assistiveText:"Global Actions"}),e.showTaskMenu&&n.a.createElement(U,null))};ee.propTypes={showTaskMenu:b.a.bool};var te=function(){return n.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement(f.b,{className:"slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__help slds-global-actions__item-action",iconClassName:"slds-global-header__icon","aria-haspopup":"true",symbol:"question",title:"Help and Training",assistiveText:"Help and Training"}))},oe=function(){return n.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement(f.b,{className:"slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__setup slds-global-actions__item-action",iconClassName:"slds-global-header__icon","aria-haspopup":"true",symbol:"setup",title:"Setup",assistiveText:"Setup"}))},ae=function(e){var t=e.notificationCount?"".concat(e.notificationCount," new notifications"):"no new notifications";return n.a.createElement("div",{className:d()("slds-dropdown-trigger slds-dropdown-trigger_click",e.showNotificationPopup&&"slds-is-open")},n.a.createElement(f.b,{className:d()("slds-button_icon slds-button_icon-container slds-button_icon-small slds-global-actions__notifications slds-global-actions__item-action",{"slds-incoming-notification":e.showNotification&&e.notificationCount}),iconClassName:"slds-global-header__icon",symbol:"notification",title:t,assistiveText:t,"aria-live":"assertive","aria-atomic":"true"}),n.a.createElement("span",{"aria-hidden":"true",className:d()("slds-notification-badge",e.notificationCount&&"slds-incoming-notification",e.showNotification&&"slds-show-notification")},e.notificationCount),e.showNotificationPopup&&n.a.createElement(N,null))};ae.propTypes={notificationCount:b.a.oneOfType([b.a.string,b.a.number]),showNotificationPopup:b.a.bool};var ne=function(){return n.a.createElement("div",{className:"slds-dropdown-trigger slds-dropdown-trigger_click"},n.a.createElement("button",{className:"slds-button slds-global-actions__avatar slds-global-actions__item-action",title:"person name","aria-haspopup":"true"},n.a.createElement("span",{className:"slds-avatar slds-avatar_circle slds-avatar_medium"},n.a.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"}))))},ie=function(e){!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}}),t&&K(e,t)}(s,e);var t,o,a,i=Q(s);function s(){return z(this,s),i.apply(this,arguments)}return t=s,(o=[{key:"render",value:function(){var e=this.props,t=e.toggleFavorite,o=e.favoritesClicked,a=e.favoritesDisabled,i=e.showFavoritesPopup,s=e.showNotification,l=e.notificationCount,r=e.showNotificationPopup,c=e.showTaskMenu;return n.a.createElement("ul",{className:"slds-global-actions"},n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(Z,{toggleFavorite:t,favoritesClicked:o,favoritesDisabled:a,showFavoritesPopup:i})),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(ee,{showTaskMenu:c})),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(te,null)),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(oe,null)),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(ae,{showNotification:s,notificationCount:l,showNotificationPopup:r})),n.a.createElement("li",{className:"slds-global-actions__item"},n.a.createElement(ne,null)))}}])&&Y(t.prototype,o),a&&Y(t,a),s}(n.a.Component);ie.propTypes={favoritesClicked:b.a.bool,favoritesDisabled:b.a.bool,showFavoritesPopup:b.a.bool,showNotification:b.a.bool,notificationCount:b.a.oneOfType([b.a.string,b.a.number]),showNotificationPopup:b.a.bool,showTaskMenu:b.a.bool};var se=ie;function le(e){return(le="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})(e)}function re(e,t){for(var o=0;o<t.length;o++){var a=t[o];a.enumerable=a.enumerable\|\|!1,a.configurable=!0,"value"in a&&(a.writable=!0),Object.defineProperty(e,a.key,a)}}function ce(e,t){return(ce=Object.setPrototypeOf\|\|function(e,t){return e.__proto__=t,e})(e,t)}function ue(e){var t=function(){if("undefined"==typeof Reflect\|\|!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var o,a=be(e);if(t){var n=be(this).constructor;o=Reflect.construct(a,arguments,n)}else o=a.apply(this,arguments);return de(this,o)}}function de(e,t){return!t\|\|"object"!==le(t)&&"function"!=typeof t?me(e):t}function me(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function be(e){return(be=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__\|\|Object.getPrototypeOf(e)})(e)}var fe=function(){return n.a.createElement(n.a.Fragment,null,n.a.createElement("a",{href:"#",className:"slds-assistive-text slds-assistive-text_focus",onClick:function(e){return e.preventDefault()}},"Skip to Navigation"),n.a.createElement("a",{href:"#",className:"slds-assistive-text slds-assistive-text_focus",onClick:function(e){return e.preventDefault()}},"Skip to Main Content"))},pe=function(){return n.a.createElement("div",{className:"slds-global-header__logo"},n.a.createElement("span",{className:"slds-assistive-text"},"Salesforce"))},he=function(e){!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}}),t&&ce(e,t)}(s,e);var t,o,a,i=ue(s);function s(){var e;return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,s),(e=i.call(this)).toggleFavorite=e.toggleFavorite.bind(me(e)),e.showNotification=e.showNotification.bind(me(e)),e.showIncomingNotification=e.showIncomingNotification.bind(me(e)),e.state={favoritesClicked:!1,showNotification:!1,notificationCount:0},e}return t=s,(o=[{key:"toggleFavorite",value:function(){this.setState({favoritesClicked:!this.state.favoritesClicked})}},{key:"showNotification",value:function(){this.setState({showNotification:!this.state.showNotification,notificationCount:1})}},{key:"showIncomingNotification",value:function(){this.setState({notificationCount:++this.state.notificationCount})}},{key:"render",value:function(){var e=this;return n.a.createElement("header",{className:d()("slds-global-header_container",this.props.className)},n.a.createElement(fe,null),n.a.createElement("div",{className:"slds-global-header slds-grid slds-grid_align-spread"},n.a.createElement("div",{className:"slds-global-header__item"},n.a.createElement(pe,null)),!this.props.playground&&n.a.createElement("div",{className:"slds-global-header__item slds-global-header__item_search"},this.props.globalSearch),n.a.createElement("div",{className:"slds-global-header__item"},n.a.createElement(se,{toggleFavorite:this.toggleFavorite,favoritesClicked:this.state.favoritesClicked,favoritesDisabled:this.props.favoritesDisabled,showFavoritesPopup:this.props.showFavoritesPopup,showNotification:this.state.showNotification,notificationCount:this.state.notificationCount,showNotificationPopup:this.props.showNotificationPopup,showTaskMenu:this.props.showTaskMenu}))),this.props.playground&&n.a.createElement("div",{className:"slds-button-group slds-m-around_medium"},n.a.createElement("button",{className:"slds-button slds-button_neutral",onClick:function(){return e.showNotification()}},"Toggle Notification"),n.a.createElement("button",{className:"slds-button slds-button_neutral",onClick:function(){return e.showIncomingNotification()}},"Increase count")))}}])&&re(t.prototype,o),a&&re(t,a),s}(a.Component),ye=o(23),ge=o(53),ve=o(24),_e=o(11),Ee={option0:{name:"Recent Items",label:!0},option1:{name:"Salesforce - 1,000 Licenses",entityMeta:!0,entityType:"Opportunity",entityField:"Propecting"},option2:{name:"Art Vandelay",entityMeta:!0,entityType:"Contact",entityField:"avandelay@vandelay.com"},option3:{name:"Vandelay Industries",entityMeta:!0,entityType:"Account",entityField:"San Francisco"},option4:{name:"Salesforce UK 2016 Events",entityMeta:!0,entityType:"Event",entityField:"$20,000"},option5:{name:"H.E. Pennypacker",entityMeta:!0,entityType:"Lead",entityField:"Nursing"}},we={option1:{term:"Salesforce",beforeTerm:"",afterTerm:".com",entityMeta:!0,entityType:"Account",entityLocation:"San Francisco, CA"},option2:{term:"Salesforce",beforeTerm:"",afterTerm:".org",entityMeta:!0,entityType:"Account",entityLocation:"New York, NY"},option3:{term:"Salesforce",beforeTerm:"",afterTerm:"HQ",entityMeta:!0,entityType:"Account",entityLocation:"San Francisco, CA"}},Oe=o(1),je=i.c.a,xe=i.c.code,Ne=i.c.h2,Se=i.c.h3,Te=i.c.h4,Ce=i.c.p,ke=function(){return Object(a.createElement)(i.b,{},Object(a.createElement)("div",{className:"lead doc"},"The global header is the anchor for the Salesforce platform and spans all other parts of the UI. The functionality in the header is applicable across all contexts in the Salesforce ecosystem (internal or 3rd party)."),Object(a.createElement)(s.a,{isViewport:!0,exampleOnly:!0,demoStyles:"position: relative; height: 20.25rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-1",comboboxID:"primary-search-combobox-id-1",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-1","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-search-combobox-id-1",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasInteractions:!0})})),Ne({id:"About-Global-Header"},"About Global Header"),Se({id:"Structure"},"Structure"),Ce({},"The global header is made up of 3 distinct sections, the logo, the global search, and the global actions. Each section is wrapped in a ",xe({},"<div>")," with the class name ",xe({},"slds-global-header__item"),". The search region gets the modifier class ",xe({},"slds-global-header__item_search"),". This class provides particular styling to handle the search box."),Object(a.createElement)(r.a,{title:"global header layout"},Object(a.createElement)(l.a,null,Object(a.createElement)("header",{className:"slds-global-header_container"},Object(a.createElement)("div",{className:"slds-global-header"},Object(a.createElement)("div",{className:"slds-global-header__item"},"..."),Object(a.createElement)("div",{className:"slds-global-header__item slds-global-header__item_search"},"..."),Object(a.createElement)("div",{className:"slds-global-header__item"},"..."))))),Ce({},"In most scenarios, you will want to fix the global header to the top of the viewport. To achieve this, wrap the global header component in a ",xe({},"<div>")," with the class name ",xe({},"slds-global-header_container"),"."),Object(a.createElement)(r.a,{title:"global header container"},Object(a.createElement)(l.a,{toggleCode:!1},Object(a.createElement)("header",{className:"slds-global-header_container"},Object(a.createElement)("div",{className:"slds-global-header"},"...")))),Se({id:"Accessibility"},"Accessibility"),Ce({},"For screen reading users, we need to provide a way to navigate over the global header and directly to content regions. For this scenario, we provide two links above the global header that provides navigation to landmarks within the app. These links are visually hidden by default but become visible when focused."),Object(a.createElement)(r.a,{title:"global header jump links"},Object(a.createElement)(l.a,null,Object(a.createElement)("header",{className:"slds-global-header_container"},Object(a.createElement)("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-assistive-text slds-assistive-text_focus"},"Skip to Navigation"),Object(a.createElement)("a",{href:"#",onClick:function(e){return e.preventDefault()},className:"slds-assistive-text slds-assistive-text_focus"},"Skip to Main Content"),Object(a.createElement)("div",{className:"slds-global-header"},"...")))),Ne({id:"Base"},"Base"),Object(a.createElement)(r.a,{title:"base global header"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 21.25rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-1",comboboxID:"primary-search-combobox-id-1",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-1","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",hasInteractions:!0,comboboxAriaControls:"primary-search-combobox-id-1",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasInteractions:!0})}))),Ne({id:"Logo"},"Logo"),Ce({},"The logo region is a ",xe({},"<div>")," with the class name ",xe({},"slds-global-header__logo")," wrapped around a span with assistive text for the logo. This inner span has the class name ",xe({},"slds-assistive-text")," and is required to meet accessibility guidelines. The logo is applied as a background image to the div with CSS. This allows us to constrain the dimensions of the logo by a max-height of 40px and a max-width of 200px."),Object(a.createElement)(s.a,{isViewport:!0,toggleCode:!1,demoStyles:"padding: 0.5rem 0; min-height: 3.5rem;"},Object(a.createElement)("div",{className:"slds-global-header__item"},Object(a.createElement)(pe,null))),Ne({id:"Global-Search"},"Global Search"),Ce({},"The global search component is used for application wide search. The form element is implemented as a ",je({href:"/components/combobox"},"Combobox"),", please refer to the accessibility guidelines on the Combobox component page for implementation guidance."),Se({id:"Default"},"Default"),Object(a.createElement)(r.a,{title:"Global Header Search Default State"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 5.5rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-2",comboboxID:"primary-search-combobox-id-2",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-2","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-search-combobox-id-2",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1})})}))),Se({id:"Focused-and-expanded"},"Focused and expanded"),Object(a.createElement)(r.a,{title:"Global Header Search Expanded State"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 21rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-3",comboboxID:"primary-search-combobox-id-3",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-3","aria-label":"Recent Items",snapshot:Ee,type:"entity",count:6}),resultsType:"listbox",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-search-combobox-id-3",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasFocus:!0,isOpen:!0})}))),Se({id:"Active-and-typing"},"Active and typing"),Object(a.createElement)(r.a,{title:"Global Header Search Active State"},Object(a.createElement)(s.a,{isViewport:!0,demoStyles:"position: relative; height: 21rem;"},Object(a.createElement)(he,{globalSearch:Object(a.createElement)(ye.a,{id:Oe.d.uniqueId("combobox-id-"),"aria-controls":"search-listbox-id-4",comboboxID:"primary-search-combobox-id-4",autocomplete:!0,inputContainerClassName:"slds-global-search__form-element",label:"Search Salesforce",hideLabel:!0,placeholder:"Search Salesforce",value:"salesforce",results:Object(a.createElement)(ve.e,{id:"search-listbox-id-4",term:"salesforce",snapshot:we,type:"entity",count:6}),resultsType:"listbox","aria-activedescendant":"option0",addon:Object(a.createElement)(ge.b,{id:Oe.d.uniqueId("objectswitcher-combobox-id-"),value:"Accounts",addonPosition:"start",comboboxAriaControls:"primary-search-combobox-id-4",listboxId:Oe.d.uniqueId("objectswitcher-listbox-id-")}),addonPosition:"start",comboboxPosition:"end",inputIconPosition:"left",leftInputIcon:Object(a.createElement)(_e.a,{symbol:"search",className:"slds-icon slds-icon_xx-small slds-icon-text-default",containerClassName:"slds-input__icon slds-input__icon_left",title:!1,assistiveText:!1}),hasFocus:!0,isOpen:!0})}))),Ne({id:"Global-Actions-Bar"},"Global Actions Bar"),Ce({},"The global actions bar holds application wide task actions that will persist with the user through their experience."),Ce({},"The global actions bar is located in the right region of the global header."),Object(a.createElement)(s.a,{isViewport:!0,exampleOnly:!0,demoStyles:"position: relative; height: 3.125rem;"},Object(a.createElement)(he,null)),Se({id:"Favorites"},"Favorites"),Ce({},'The favorites action is used to "favorite" a commonly used page within a user\'s experience. When a user "favorites" a page by pressing the favorites action, the button icon changes color with a small animation to confirm your selection.'),Te({id:"Not-pressed"},"Not pressed"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(Z,null)))),Te({id:"Pressed"},"Pressed"),Ce({},"When pressed, apply the class ",xe({},"slds-is-selected")," to the ",xe({},"slds-global-actions__favorites-action")," button element."),Object(a.createElement)(c.a,{type:"a11y",header:"Accessibility Requirement"},Object(a.createElement)("p",null,"When the favorites action is pressed, we need to toggle the"," ",Object(a.createElement)("code",null,"aria-pressed")," attribute to"," ",Object(a.createElement)("code",null,"true"),". This will inform a screen reader that the button has been pressed.")),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(Z,{favoritesClicked:!0})))),Te({id:"Disabled"},"Disabled"),Ce({},"If the favorites action needs to become disabled, apply the ",xe({},"disabled")," attribute and the class ",xe({},"slds-is-disabled")," to the button with ",xe({},'class="slds-global-actions_favorites-action"'),"."),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(Z,{favoritesDisabled:!0})))),Te({id:"Favorites-popover"},"Favorites popover"),Ce({},"The favorites popover is invoked when a user clicks on the dropdown arrow action icon inside of the favorites button group. The favorites popover is implemented as a ",je({href:"/components/dynamic-menu/"},"Popover - Dynamic Menu Variant")," component, please refer to the accessibility guidelines on the Popover component page for implementation guidance."),Object(a.createElement)(s.a,{demoStyles:" display: flex; justify-content: flex-end; align-items: flex-start; height: 16rem; min-width: 400px; "},Object(a.createElement)(se,{showFavoritesPopup:!0})),Se({id:"Task"},"Task"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(ee,null)))),Te({id:"Task-menu"},"Task menu"),Ce({},"When the global task action is invoked, a menu inside of a dropdown becomes visible. Please refer to the accessibility section of the ",je({href:"/components/menus"},"Menus component")," for implementation guidelines."),Object(a.createElement)(s.a,{demoStyles:" display: flex; justify-content: flex-end; align-items: flex-start; height: 16rem; min-width: 400px; "},Object(a.createElement)(se,{showTaskMenu:!0})),Se({id:"Help"},"Help"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(te,null)))),Se({id:"Setup"},"Setup"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(oe,null)))),Se({id:"Notifications"},"Notifications"),Ce({},"Notifications are a way to notify a user about a global change within the application. This is commonly used to communicate a Chatter mention/reply or a status update on an opportunity pipeline."),Object(a.createElement)(s.a,{isViewport:!0,exampleOnly:!0,demoStyles:"position: relative; height: 7.5rem;"},Object(a.createElement)(he,{playground:!0})),Te({id:"No-notifications"},"No notifications"),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(ae,null)))),Te({id:"New-notifications"},"New notifications"),Ce({},"When a notification is coming through, we want to apply the ",xe({},"slds-incoming-notification")," class to both the ",xe({},"slds-global-actions__notifications")," button, as well as the ",xe({},"slds-notification-badge"),". This will initiate the animation that there is a new incoming notification. A notification badge will also need to receive the ",xe({},"slds-show-notification")," class, this ensures the badge becomes visible for the incoming animation to work. The ",xe({},"slds-show-notification")," class should also be applied if a user has unread notifications upon their return to their application."),Object(a.createElement)(c.a,{type:"a11y",header:"Accessibility Note"},Object(a.createElement)("p",null,"The notification badge is hidden from screen readers by add the attribute"," ",Object(a.createElement)("code",null,'aria-hidden="true"'),' so the badge doesn\'t have to be inside the button itself. Since the badge count is hidden, we need to add the count number to the button text via some hidden assistive text. The assistive text string should be updated with number of new notifications, such as "3 new notification". If there are no notifications, the assistive text should read "No notifications". The button element also requires'," ",Object(a.createElement)("code",null,'aria-live="assertive"')," to announce any count updates.")),Object(a.createElement)(s.a,null,Object(a.createElement)("ul",{className:"slds-global-actions"},Object(a.createElement)("li",{className:"slds-global-actions__item"},Object(a.createElement)(ae,{showNotification:!0,notificationCount:"1"})))),Te({id:"Notification-Popover"},"Notification Popover"),Ce({},"The notification popover is invoked when a user clicks on the notification action icon. The notification popover is implemented as a ",je({href:"/components/popovers"},"Popover component"),", please refer to the accessibility guidelines on the Popover component page for implementation guidance."),Object(a.createElement)(s.a,{exampleOnly:!0,demoStyles:" display: flex; justify-content: flex-end; align-items: flex-start; height: 25rem; min-width: 400px; "},Object(a.createElement)(se,{showNotification:!0,notificationCount:"3",showNotificationPopup:!0})),Object(a.createElement)(l.a,null,Object(a.createElement)(N,null)),Te({id:"Unread-notifications"},"Unread notifications"),Ce({},"When a notification item is unread, add the class ",xe({},"slds-global-header__notification_unread")," to the ",xe({},"slds-global-header__notification")," list item. This will provide the unread styles. In addition to adding the class name, please add a dot indicator, ",xe({},'<abbr class="slds-text-link slds-m-horizontal_xxx-small" title="unread">●</abbr>'),", to provide visual affordance that the item is unread."))},Pe=function(){return Object(i.a)(ke())}}});