npm - @salesforce-ux/design-system - Versions diffs - 2.25.2 → 2.25.4 - Mend

@salesforce-ux/design-system 2.25.2 → 2.25.4

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 (754) hide show

package/__internal/chunked/docs/ui/components/files/docs.mdx.js CHANGED Viewed

	@@ -1 +1 @@
1	- var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/files/docs.mdx.js"]=function(e){function t(t){for(var i,s,r=t[0],o=t[1],c=t[2],m=0,h=[];m<r.length;m++)s=r[m],Object.prototype.hasOwnProperty.call(l,s)&&l[s]&&h.push(l[s][0]),l[s]=0;for(i in o)Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i]);for(d&&d(t);h.length;)h.shift()();return n.push.apply(n,c\|\|[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],i=!0,r=1;r<a.length;r++){var o=a[r];0!==l[o]&&(i=!1)}i&&(n.splice(t--,1),e=s(s.s=a[0]))}return e}var i={},l={38:0},n=[];function s(t){if(i[t])return i[t].exports;var a=i[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=i,s.d=function(e,t,a){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},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 a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(a,i,function(t){return e[t]}.bind(null,i));return a},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 r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return n.push([787,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},787:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return g}));var i=a(0),l=a.n(i),n=a(4),s=a(2),r=(a(28),a(45),a(14),a(1)),o=a(53),c=[{id:"default",label:"Default",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))}],d=[{id:"attachment-file-no-image",label:"File with no image",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"image",title:"Image Title"}))},{id:"attachment-file-no-title",label:"File with no title",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,noCaption:!0,symbol:"pdf",hasImage:!0}))},{id:"attachment-file-truncate-title",label:"File with truncating title",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{title:"super-super-long-file-name-that-will-truncate.pdf",symbol:"pdf",isCard:!0,hasCrop:!0,hasTitleCard:!0,hasActions:!0}))},{id:"attachment-file-with-actions",label:"File with actions",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasActions:!0,hasImage:!0}))},{id:"attachment-file-with-no-title-actions",label:"File with no title + actions",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,symbol:"pdf",title:"Proposal.pdf",hasActions:!0,iconColor:"white",hasScrim:!0,noCaption:!0,hasImage:!0}))},{id:"attachment-file-external-icon",label:"File with external icon",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",isExternalSource:!0}))},{id:"attachment-file-loading-with-title",label:"File in loading state with title",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,sprite:"utility",symbol:"image",isLoading:!0}))},{id:"attachment-file-loading-no-title",label:"File in loading state without title",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,isLoading:!0,noCaption:!0}))},{id:"multi-attachments",label:"Less than 3 file attachments",element:l.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded"},l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0})),l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf"})))},{id:"multi-attachments-overflow",label:"Greater than 3 file attachments",element:l.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded"},l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0})),l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3 slds-medium-show"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf"})),l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,title:"+22",hasImage:!0,hasOverlay:!0})))},{id:"link-attachment",label:"Link attachment",element:l.a.createElement(o.a,{articleTitle:"Maui By Air The Best Way Around The Island",articleDescription:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."})},{id:"crop-4-by-3",label:"Crop 4 x 3",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,has4x3Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))},{id:"crop-16-by-9",label:"Crop 16 x 9",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))},{id:"crop-1-by-1",label:"Crop 1 by 1",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,has1x1Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))}],m=n.c.code,h=n.c.h2,p=n.c.h3,f=n.c.h4,u=n.c.p,b=n.c.strong,y=function(){return Object(i.createElement)(n.b,{},Object(i.createElement)("div",{className:"doc lead"},"Files are a representation of content uploaded as an attachment."),Object(i.createElement)(s.a,{exampleOnly:!0},Object(r.f)(d,"attachment-file-with-actions")),h({id:"About-Files"},"About Files"),u({},"A figure component is a self-contained unit of content, such as an image with an optional caption. The figure component should NOT be used with icons or logos. A figure can optionally be cropped to a specific ratio such as 16x9, 4x3 and 1x1 with the use of ",m({},".slds-image__crop")," and passing in a ratio class such as ",m({},".slds-image__crop_16-by-9"),"."),p({id:"Accessibility"},"Accessibility"),u({},"Every ",m({},"<img>")," you add to your site needs to have an ",m({},"alt")," attribute. If the image is informational, set the ",m({},"alt")," equal to a descriptive alternative for that image. If the image is decorative or redundant to adjacent text, set ",m({},'alt=""'),", which conveys to assistive technology users that the image isn’t necessary for understanding the page. Avoid using generic strings like ",b({},"photo"),", ",b({},"image"),", or ",b({},"icon")," as alt values, as they don’t communicate valuable content to the user."),h({id:"Base"},"Base"),Object(i.createElement)(s.a,null,Object(r.f)(c)),h({id:"States"},"States"),p({id:"File-with-no-image"},"File with no image"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-no-image")),p({id:"File-with-no-title"},"File with no title"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-no-title")),p({id:"File-with-actions"},"File with actions"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-with-actions")),p({id:"File-with-no-title-+-actions"},"File with no title + actions"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-with-no-title-actions")),p({id:"File-with-external-icon"},"File with external icon"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-external-icon")),p({id:"File-in-loading-state-with-title"},"File in loading state with title"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-loading-with-title")),p({id:"File-in-loading-state-without-title"},"File in loading state without title"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-loading-no-title")),p({id:"3-file-attachments"},"< 3 file attachments"),Object(i.createElement)(s.a,null,Object(r.f)(d,"multi-attachments")),p({id:"3-file-attachments-2"},"> 3 file attachments"),Object(i.createElement)(s.a,null,Object(r.f)(d,"multi-attachments-overflow")),h({id:"Modifiers"},"Modifiers"),p({id:"Ratio"},"Ratio"),f({id:".slds-file__crop_4-by-3"},".slds-file__crop_4-by-3"),Object(i.createElement)(s.a,null,Object(r.f)(d,"crop-4-by-3")),f({id:".slds-file__crop_16-by-9"},".slds-file__crop_16-by-9"),Object(i.createElement)(s.a,null,Object(r.f)(d,"crop-16-by-9")),f({id:".slds-file__crop_1-by-1"},".slds-file__crop_1-by-1"),Object(i.createElement)(s.a,null,Object(r.f)(d,"crop-1-by-1")))},g=function(){return Object(n.a)(y())}}});
1	+ var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/files/docs.mdx.js"]=function(e){function t(t){for(var i,s,r=t[0],o=t[1],c=t[2],m=0,h=[];m<r.length;m++)s=r[m],Object.prototype.hasOwnProperty.call(l,s)&&l[s]&&h.push(l[s][0]),l[s]=0;for(i in o)Object.prototype.hasOwnProperty.call(o,i)&&(e[i]=o[i]);for(d&&d(t);h.length;)h.shift()();return n.push.apply(n,c\|\|[]),a()}function a(){for(var e,t=0;t<n.length;t++){for(var a=n[t],i=!0,r=1;r<a.length;r++){var o=a[r];0!==l[o]&&(i=!1)}i&&(n.splice(t--,1),e=s(s.s=a[0]))}return e}var i={},l={38:0},n=[];function s(t){if(i[t])return i[t].exports;var a=i[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,s),a.l=!0,a.exports}s.m=e,s.c=i,s.d=function(e,t,a){s.o(e,t)\|\|Object.defineProperty(e,t,{enumerable:!0,get:a})},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 a=Object.create(null);if(s.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(a,i,function(t){return e[t]}.bind(null,i));return a},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 r=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs\|\|[],o=r.push.bind(r);r.push=t,r=r.slice();for(var c=0;c<r.length;c++)t(r[c]);var d=o;return n.push([787,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},787:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return y})),a.d(t,"getContents",(function(){return g}));var i=a(0),l=a.n(i),n=a(4),s=a(2),r=(a(29),a(45),a(14),a(1)),o=a(53),c=[{id:"default",label:"Default",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))}],d=[{id:"attachment-file-no-image",label:"File with no image",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"image",title:"Image Title"}))},{id:"attachment-file-no-title",label:"File with no title",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,noCaption:!0,symbol:"pdf",hasImage:!0}))},{id:"attachment-file-truncate-title",label:"File with truncating title",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{title:"super-super-long-file-name-that-will-truncate.pdf",symbol:"pdf",isCard:!0,hasCrop:!0,hasTitleCard:!0,hasActions:!0}))},{id:"attachment-file-with-actions",label:"File with actions",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasActions:!0,hasImage:!0}))},{id:"attachment-file-with-no-title-actions",label:"File with no title + actions",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,symbol:"pdf",title:"Proposal.pdf",hasActions:!0,iconColor:"white",hasScrim:!0,noCaption:!0,hasImage:!0}))},{id:"attachment-file-external-icon",label:"File with external icon",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",isExternalSource:!0}))},{id:"attachment-file-loading-with-title",label:"File in loading state with title",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,sprite:"utility",symbol:"image",isLoading:!0}))},{id:"attachment-file-loading-no-title",label:"File in loading state without title",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,isLoading:!0,noCaption:!0}))},{id:"multi-attachments",label:"Less than 3 file attachments",element:l.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded"},l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0})),l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf"})))},{id:"multi-attachments-overflow",label:"Greater than 3 file attachments",element:l.a.createElement("ul",{className:"slds-grid slds-grid_pull-padded"},l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0})),l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3 slds-medium-show"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf"})),l.a.createElement("li",{className:"slds-p-horizontal_xx-small slds-size_1-of-2 slds-medium-size_1-of-3"},l.a.createElement(o.b,{isCard:!0,hasCrop:!0,title:"+22",hasImage:!0,hasOverlay:!0})))},{id:"link-attachment",label:"Link attachment",element:l.a.createElement(o.a,{articleTitle:"Maui By Air The Best Way Around The Island",articleDescription:"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt."})},{id:"crop-4-by-3",label:"Crop 4 x 3",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,has4x3Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))},{id:"crop-16-by-9",label:"Crop 16 x 9",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,has16x9Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))},{id:"crop-1-by-1",label:"Crop 1 by 1",element:l.a.createElement("div",{style:{width:"20rem"}},l.a.createElement(o.b,{isCard:!0,has1x1Crop:!0,hasTitleCard:!0,symbol:"pdf",title:"Proposal.pdf",hasImage:!0}))}],m=n.c.code,h=n.c.h2,p=n.c.h3,f=n.c.h4,u=n.c.p,b=n.c.strong,y=function(){return Object(i.createElement)(n.b,{},Object(i.createElement)("div",{className:"doc lead"},"Files are a representation of content uploaded as an attachment."),Object(i.createElement)(s.a,{exampleOnly:!0},Object(r.f)(d,"attachment-file-with-actions")),h({id:"About-Files"},"About Files"),u({},"A figure component is a self-contained unit of content, such as an image with an optional caption. The figure component should NOT be used with icons or logos. A figure can optionally be cropped to a specific ratio such as 16x9, 4x3 and 1x1 with the use of ",m({},".slds-image__crop")," and passing in a ratio class such as ",m({},".slds-image__crop_16-by-9"),"."),p({id:"Accessibility"},"Accessibility"),u({},"Every ",m({},"<img>")," you add to your site needs to have an ",m({},"alt")," attribute. If the image is informational, set the ",m({},"alt")," equal to a descriptive alternative for that image. If the image is decorative or redundant to adjacent text, set ",m({},'alt=""'),", which conveys to assistive technology users that the image isn’t necessary for understanding the page. Avoid using generic strings like ",b({},"photo"),", ",b({},"image"),", or ",b({},"icon")," as alt values, as they don’t communicate valuable content to the user."),h({id:"Base"},"Base"),Object(i.createElement)(s.a,null,Object(r.f)(c)),h({id:"States"},"States"),p({id:"File-with-no-image"},"File with no image"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-no-image")),p({id:"File-with-no-title"},"File with no title"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-no-title")),p({id:"File-with-actions"},"File with actions"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-with-actions")),p({id:"File-with-no-title-+-actions"},"File with no title + actions"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-with-no-title-actions")),p({id:"File-with-external-icon"},"File with external icon"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-external-icon")),p({id:"File-in-loading-state-with-title"},"File in loading state with title"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-loading-with-title")),p({id:"File-in-loading-state-without-title"},"File in loading state without title"),Object(i.createElement)(s.a,null,Object(r.f)(d,"attachment-file-loading-no-title")),p({id:"3-file-attachments"},"< 3 file attachments"),Object(i.createElement)(s.a,null,Object(r.f)(d,"multi-attachments")),p({id:"3-file-attachments-2"},"> 3 file attachments"),Object(i.createElement)(s.a,null,Object(r.f)(d,"multi-attachments-overflow")),h({id:"Modifiers"},"Modifiers"),p({id:"Ratio"},"Ratio"),f({id:".slds-file__crop_4-by-3"},".slds-file__crop_4-by-3"),Object(i.createElement)(s.a,null,Object(r.f)(d,"crop-4-by-3")),f({id:".slds-file__crop_16-by-9"},".slds-file__crop_16-by-9"),Object(i.createElement)(s.a,null,Object(r.f)(d,"crop-16-by-9")),f({id:".slds-file__crop_1-by-1"},".slds-file__crop_1-by-1"),Object(i.createElement)(s.a,null,Object(r.f)(d,"crop-1-by-1")))},g=function(){return Object(n.a)(y())}}});

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([716,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},716: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(27),r=a(15),d=a(14),m=a(7),c=a(8),u=a(17),p=a(31),b=a(46),f=(a(49),a(5),a(35)),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(56),C=a(80),S=a(36),_=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(38),R=i.c.a,D=i.c.code,H=i.c.em,M=i.c.h2,B=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}))),M({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>"),"."),B({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")),B({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")),B({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."),B({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."),B({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}))),M({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…"})))),M({id:"States"},"States"),B({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")))),B({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"})))),B({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.\nTo give help text information the attribute ",D({},"fieldLevelMessage"),' can be used on the FormElement element.\n<Example 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…"}))),Z({},"</Example>"),B({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"})))),M({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."),B({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"))),B({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")),B({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))),M({id:"Usage-Examples"},"Usage Examples"),B({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([716,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},716: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(27),r=a(15),d=a(14),m=a(7),c=a(8),u=a(17),p=a(32),b=a(46),f=(a(49),a(5),a(36)),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(56),C=a(80),S=a(37),_=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(38),R=i.c.a,D=i.c.code,H=i.c.em,M=i.c.h2,B=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}))),M({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>"),"."),B({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")),B({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")),B({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."),B({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."),B({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}))),M({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…"})))),M({id:"States"},"States"),B({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")))),B({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"})))),B({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.\nTo give help text information the attribute ",D({},"fieldLevelMessage"),' can be used on the FormElement element.\n<Example 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…"}))),Z({},"</Example>"),B({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"})))),M({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."),B({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"))),B({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")),B({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))),M({id:"Usage-Examples"},"Usage Examples"),B({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())}}});