@salesforce-ux/design-system/__internal/chunked/showcase/ui/components/docked-composer/base/example.jsx.js

Salesforce Lightning Design System

var SLDS=SLDS||{};SLDS["__internal/chunked/showcase/ui/components/docked-composer/base/example.jsx.js"]=function(e){function l(l){for(var a,n,o=l[0],m=l[1],i=l[2],r=0,u=[];r<o.length;r++)n=o[r],s[n]&&u.push(s[n][0]),s[n]=0;for(a in m)Object.prototype.hasOwnProperty.call(m,a)&&(e[a]=m[a]);for(c&&c(l);u.length;)u.shift()();return d.push.apply(d,i||[]),t()}function t(){for(var e,l=0;l<d.length;l++){for(var t=d[l],a=!0,o=1;o<t.length;o++){var m=t[o];0!==s[m]&&(a=!1)}a&&(d.splice(l--,1),e=n(n.s=t[0]))}return e}var a={},s={111:0,7:0,8:0,15:0,16:0,22:0,32:0,38:0,42:0,45:0,54:0,58:0,59:0,63:0,64:0,67:0,71:0,75:0,77:0,80:0,84:0,87:0,88:0,93:0,99:0,100:0,104:0,106:0,114:0,117:0,118:0,122:0,124:0,125:0,126:0,127:0,128:0,129:0,133:0,138:0,144:0,152:0,163:0,167:0,170:0,171:0,178:0,181:0,182:0},d=[];function n(l){if(a[l])return a[l].exports;var t=a[l]={i:l,l:!1,exports:{}};return e[l].call(t.exports,t,t.exports,n),t.l=!0,t.exports}n.m=e,n.c=a,n.d=function(e,l,t){n.o(e,l)||Object.defineProperty(e,l,{configurable:!1,enumerable:!0,get:t})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var l=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(l,"a",l),l},n.o=function(e,l){return Object.prototype.hasOwnProperty.call(e,l)},n.p="/assets/scripts/bundle/";var o=this.webpackJsonpSLDS___internal_chunked_showcase=this.webpackJsonpSLDS___internal_chunked_showcase||[],m=o.push.bind(o);o.push=l,o=o.slice();for(var i=0;i<o.length;i++)l(o[i]);var c=m;return d.push([179,0]),t()}({0:function(e,l){e.exports=React},179:function(e,l,t){"use strict";Object.defineProperty(l,"__esModule",{value:!0}),l.examples=l.states=l.Context=l.ComposerOverflowMenu=l.DockedComposerPanel=l.Footer=void 0;var a=b(t(0)),s=t(18),d=b(t(2)),n=t(10),o=t(21),m=t(68),i=t(7),c=t(9),r=t(15),u=t(19),f=b(t(4)),_=b(t(1)),p=b(t(5));function b(e){return e&&e.__esModule?e:{default:e}}var E=[{entity:"email",title:"Agenda for next week"},{entity:"call",title:"Lei Chan"},{entity:"task",title:"August 14 Meeting Notes"}],N=l.Footer=function(e){return a.default.createElement("div",{className:"slds-col_bump-left slds-text-align_right"},a.default.createElement("button",{className:"slds-button slds-button_brand"},"Action"))},h=l.DockedComposerPanel=function(e){return a.default.createElement("section",{className:(0,_.default)("slds-docked-composer slds-grid slds-grid_vertical",e.className,e.dialogClosed?"slds-is-closed":null),role:e.nestedDialog?null:"dialog","aria-labelledby":e.nestedDialog?null:"dialog-heading-id-1","aria-describedby":e.nestedDialog?null:"dialog-content-id-1"},a.default.createElement("header",{className:"slds-docked-composer__header slds-grid slds-shrink-none","aria-live":"assertive"},a.default.createElement("div",{className:"slds-media slds-media_center slds-no-space"},a.default.createElement("div",{className:"slds-media__figure slds-m-right_x-small"},a.default.createElement("span",{className:"slds-icon_container"},a.default.createElement(f.default,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"standard",symbol:e.headerSymbol||"call"}))),a.default.createElement("div",{className:"slds-media__body"},e.dialogClosed?a.default.createElement("span",{className:"slds-assistive-text"},"Minimized"):null,a.default.createElement("h2",{className:"slds-truncate",id:"dialog-heading-id-1",title:e.header||"Header"},e.header||"Header"))),a.default.createElement("div",{className:"slds-col_bump-left slds-shrink-none"},a.default.createElement(d.default,{className:"slds-button_icon",symbol:"minimize_window",assistiveText:"Minimize Composer Panel",title:"Minimize window"}),a.default.createElement(d.default,{className:"slds-button_icon",symbol:"expand_alt",assistiveText:"Expand Composer Panel",title:"Expand Composer"}),a.default.createElement(d.default,{className:"slds-button_icon",symbol:"close",assistiveText:"Close Composer Panel",title:"Close"}))),a.default.createElement("div",{className:(0,_.default)("slds-docked-composer__body",e.bodyClassName),id:"dialog-content-id-1"},e.children),e.footer?a.default.createElement("footer",{className:(0,_.default)("slds-docked-composer__footer slds-shrink-none",e.footerClassName)},e.footer):null)},g=l.ComposerOverflowMenu=function(e){return a.default.createElement("div",{className:"slds-docked-composer slds-docked-composer_overflow"},a.default.createElement("button",{className:"slds-button slds-button_icon slds-docked-composer_overflow__button","aria-haspopup":"true"},a.default.createElement(f.default,{className:"slds-button__icon",sprite:"utility",symbol:"standard_objects"}),a.default.createElement("span",{className:"slds-text-body_small slds-m-left_xx-small"},"3"," ",a.default.createElement("span",{className:"slds-assistive-text"},"other docked composer panels"))),a.default.createElement(n.Menu,{className:"slds-dropdown_left slds-dropdown_bottom slds-dropdown_medium slds-nubbin_bottom-left"},a.default.createElement(n.MenuList,{className:"slds-dropdown_length-with-icon-7"},p.default.times(E.length,function(e){return a.default.createElement(n.MenuItem,{key:e,title:E[e].title},a.default.createElement("span",{className:"slds-icon_container slds-icon-standard-"+E[e].entity+" slds-m-right_x-small"},a.default.createElement(f.default,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:E[e].entity}),a.default.createElement("span",{className:"slds-assistive-text"},E[e].entity)),E[e].title)}))))},v=function(e){return a.default.createElement(r.Listbox,{className:"slds-dropdown slds-dropdown_fluid",vertical:!0,id:e.id},a.default.createElement(r.ListboxItem,null,a.default.createElement(r.EntityOption,{id:e.listboxOptionId,entityTitle:"Acme",entityMeta:!0})))};l.Context=function(e){return a.default.createElement("div",{style:{height:"500px",minWidth:"615px",overflowX:"auto"}},e.children)};l.default=a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",footer:a.default.createElement(N,null)},a.default.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a.default.createElement("br",null)," This area consumes the feature")));l.states=[{id:"single-composer-open",label:"Open",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",footer:a.default.createElement(N,null)},a.default.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a.default.createElement("br",null)," This area consumes the feature")))},{id:"single-composer-focused",label:"Focused",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open slds-has-focus",footer:a.default.createElement(N,null)},a.default.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a.default.createElement("br",null)," This area consumes the feature")))},{id:"single-composer-closed",label:"Closed",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{dialogClosed:!0,footer:a.default.createElement(N,null)},a.default.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a.default.createElement("br",null)," This area consumes the feature")))},{id:"single-composer-closed-focused",label:"Closed Focused",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-has-focus",dialogClosed:!0,footer:a.default.createElement(N,null)},a.default.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a.default.createElement("br",null)," This area consumes the feature")))},{id:"single-composer-popout",label:"Popout",element:a.default.createElement("div",null,a.default.createElement(o.Modal,{className:"slds-docked-composer-modal","aria-labelledby":"dialog-heading-id-1","aria-describedby":"dialog-content-id-1"},a.default.createElement(o.ModalContent,{id:"modal-content-id"},a.default.createElement(h,{footer:a.default.createElement(N,null),nestedDialog:!0},a.default.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a.default.createElement("br",null)," This area consumes the feature")))),a.default.createElement("div",{className:"slds-backdrop slds-backdrop_open"}))},{id:"multiple-composer-overflow",label:"With Overflow Menu",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(g,null),a.default.createElement(h,{className:"slds-is-open",footer:a.default.createElement(N,null)},a.default.createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a.default.createElement("br",null)," This area consumes the feature")))}],l.examples=[{id:"task",label:"Log a Task",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",bodyClassName:"slds-docked-composer__body_form",header:"New Task",headerSymbol:"task",footer:a.default.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Save")},a.default.createElement("fieldset",{className:"slds-form-element slds-form_compound"},a.default.createElement("legend",{className:"slds-assistive-text"},"Log new task"),a.default.createElement("div",{className:"slds-form-element__control"},a.default.createElement("div",{className:"slds-form-element__group"},a.default.createElement("div",{className:"slds-form-element__row"},a.default.createElement("div",{className:"slds-form-element slds-size_1-of-1"},a.default.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Subject"),a.default.createElement("div",{className:"slds-form-element__control"},a.default.createElement("input",{className:"slds-input",type:"text",id:"text-input-01"})))),a.default.createElement("div",{className:"slds-form-element__row"},a.default.createElement("div",{className:"slds-form-element slds-size_1-of-2"},a.default.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-02"},"Assigned To"),a.default.createElement("div",{className:"slds-form-element__control"},a.default.createElement("input",{className:"slds-input",type:"text",id:"text-input-02"}))),a.default.createElement("div",{className:"slds-form-element slds-size_1-of-2"},a.default.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-03"},"Due Dates"),a.default.createElement("div",{className:"slds-form-element__control"},a.default.createElement("input",{className:"slds-input",type:"text",id:"text-input-03"})))),a.default.createElement("div",{className:"slds-form-element__row"},a.default.createElement(r.ComboboxContainer,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Leads",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-01",listbox:a.default.createElement(v,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})}),a.default.createElement(r.ComboboxContainer,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Accounts",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-02",listbox:a.default.createElement(v,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})})))))))},{id:"voice-composer-queued",label:"Voice - Queued",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Connecting...",footer:a.default.createElement("button",{className:"slds-button slds-button_destructive slds-size_1-of-1"},"End Call")},a.default.createElement("div",{className:"slds-text-align_center slds-align-middle"},a.default.createElement("span",{className:"slds-avatar slds-avatar_large"},a.default.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a.default.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a.default.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a.default.createElement("li",{className:"slds-item"},"VP of Sales"),a.default.createElement("li",{className:"slds-item "},"Acme Corporation")),a.default.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Connecting..."))))},{id:"voice-composer-ringing",label:"Voice - Ringing",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Dialing...",footer:a.default.createElement("button",{className:"slds-button slds-button_destructive slds-size_1-of-1"},"End Call")},a.default.createElement("div",{className:"slds-text-align_center slds-align-middle"},a.default.createElement("span",{className:"slds-avatar slds-avatar_large"},a.default.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a.default.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a.default.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a.default.createElement("li",{className:"slds-item"},"VP of Sales"),a.default.createElement("li",{className:"slds-item "},"Acme Corporation")),a.default.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Dialing..."))))},{id:"voice-composer-connected",label:"Voice - Connected",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",header:"Lei Chan - Call in Progress",footer:a.default.createElement("button",{className:"slds-button slds-button_destructive slds-col_bump-left"},"End Call")},a.default.createElement("div",{className:"slds-docked-composer__lead"},a.default.createElement("div",{className:"slds-media"},a.default.createElement("div",{className:"slds-media__figure"},a.default.createElement("span",{className:"slds-avatar slds-avatar_medium"},a.default.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"}))),a.default.createElement("div",{className:"slds-media__body"},a.default.createElement("p",{className:"slds-text-heading_medium"},"Lei Chan"),a.default.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a.default.createElement("li",{className:"slds-item"},"VP of Sales"),a.default.createElement("li",{className:"slds-item "},"Acme Corporation")))),a.default.createElement("p",{className:"slds-col_bump-left slds-text-heading_large"},"5:37")),a.default.createElement("div",{className:"slds-docked-composer__toolbar"},a.default.createElement(d.default,{className:"slds-button_icon-border-filled slds-button_icon-small",symbol:"unmuted",assistiveText:"Mute Yourself",title:"Mute Yourself","aria-pressed":"false"})),a.default.createElement("label",{className:"slds-assistive-text",htmlFor:"composer-text-input-1"},"Take notes"),a.default.createElement("textarea",{id:"composer-text-input-1",className:"slds-docked-composer__input slds-input_bare slds-text-longform slds-grow",placeholder:"Jot down notes here..."})))},{id:"voice-composer-cancelled",label:"Voice - Cancelled",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Cancelling..."},a.default.createElement("div",{className:"slds-text-align_center slds-align-middle"},a.default.createElement("span",{className:"slds-avatar slds-avatar_large"},a.default.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a.default.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a.default.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a.default.createElement("li",{className:"slds-item"},"VP of Sales"),a.default.createElement("li",{className:"slds-item "},"Acme Corporation")),a.default.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Cancelling..."))))},{id:"voice-composer-busy",label:"Voice - Busy",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Busy",footer:[a.default.createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:p.default.uniqueId("follow-up-")},"Follow-Up Later"),a.default.createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:p.default.uniqueId("call-again-")},"Call Again")]},a.default.createElement("div",{className:"slds-text-align_center slds-align-middle"},a.default.createElement("span",{className:"slds-avatar slds-avatar_large"},a.default.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a.default.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a.default.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a.default.createElement("li",{className:"slds-item"},"VP of Sales"),a.default.createElement("li",{className:"slds-item "},"Acme Corporation")),a.default.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Busy"))))},{id:"voice-composer-failed",label:"Voice - Call Failed",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Call Failed",footer:[a.default.createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:p.default.uniqueId("follow-up-")},"Edit Phone Number"),a.default.createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:p.default.uniqueId("call-again-")},"Call Again")]},a.default.createElement("div",{className:"slds-text-align_center slds-align-middle"},a.default.createElement("span",{className:"slds-avatar slds-avatar_large"},a.default.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a.default.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a.default.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a.default.createElement("li",{className:"slds-item"},"VP of Sales"),a.default.createElement("li",{className:"slds-item "},"Acme Corporation")),a.default.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Call Failed"))))},{id:"voice-composer-no-answer",label:"Voice - No Answer",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - No Answer",footer:[a.default.createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:p.default.uniqueId("follow-up-")},"Follow-Up Later"),a.default.createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:p.default.uniqueId("call-again-")},"Call Again")]},a.default.createElement("div",{className:"slds-text-align_center slds-align-middle"},a.default.createElement("span",{className:"slds-avatar slds-avatar_large"},a.default.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a.default.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a.default.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a.default.createElement("li",{className:"slds-item"},"VP of Sales"),a.default.createElement("li",{className:"slds-item "},"Acme Corporation")),a.default.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"No Answer"))))},{id:"voice-composer-call-finished",label:"Voice - Call Finished",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",header:"Lei Chan - Call Finished",footer:a.default.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Finish Notes")},a.default.createElement("div",{className:"slds-docked-composer__lead"},a.default.createElement("div",{className:"slds-media"},a.default.createElement("div",{className:"slds-media__figure"},a.default.createElement("span",{className:"slds-avatar slds-avatar_medium"},a.default.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"}))),a.default.createElement("div",{className:"slds-media__body"},a.default.createElement("p",{className:"slds-text-heading_medium"},"Lei Chan"),a.default.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a.default.createElement("li",{className:"slds-item"},"VP of Sales"),a.default.createElement("li",{className:"slds-item "},"Acme Corporation"))))),a.default.createElement("div",{className:"slds-docked-composer__toolbar"},a.default.createElement(d.default,{className:"slds-button_icon-border-filled slds-button_icon-small",symbol:"unmuted",assistiveText:"Mute Yourself",title:"Mute Yourself","aria-pressed":"false"})),a.default.createElement("label",{className:"slds-assistive-text",htmlFor:"composer-text-input-1"},"Take notes"),a.default.createElement("textarea",{id:"composer-text-input-1",className:"slds-docked-composer__input slds-input_bare slds-text-longform slds-grow",placeholder:"Jot down notes here..."})))},{id:"voice-composer-call-incoming",label:"Voice - Call Incoming",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center slds-size_1-of-1",header:"Lei Chan - Incoming Call...",footer:a.default.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Finish Notes")},a.default.createElement("div",{className:"slds-text-align_center slds-align-middle"},a.default.createElement("span",{className:"slds-avatar slds-avatar_large"},a.default.createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a.default.createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a.default.createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a.default.createElement("li",{className:"slds-item"},"VP of Sales"),a.default.createElement("li",{className:"slds-item "},"Acme Corporation")),a.default.createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"(416) 555-1234")),a.default.createElement("div",{className:"slds-p-horizontal_x-small slds-text-align_left slds-size_1-of-1"},a.default.createElement("h3",{className:"slds-m-bottom_x-small"},"Recent Activity"),a.default.createElement("ul",{className:"slds-has-dividers_around-space"},a.default.createElement("li",{className:"slds-item slds-theme_shade slds-grid"},a.default.createElement("span",{className:"slds-icon_container slds-icon-standard-task slds-m-right_x-small"},a.default.createElement(f.default,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"task"}),a.default.createElement("span",{className:"slds-assistive-text"},"Task")),"Discussed New Pricing Models",a.default.createElement("span",{className:"slds-col_bump-left"},"Yesterday")),a.default.createElement("li",{className:"slds-item slds-theme_shade slds-grid"},a.default.createElement("span",{className:"slds-icon_container slds-icon-standard-email slds-m-right_x-small"},a.default.createElement(f.default,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"email"}),a.default.createElement("span",{className:"slds-assistive-text"},"Email")),"Re: Updated Proposals",a.default.createElement("span",{className:"slds-col_bump-left"},"4 Hours Ago")),a.default.createElement("li",{className:"slds-item slds-theme_shade slds-grid"},a.default.createElement("span",{className:"slds-icon_container slds-icon-standard-note slds-m-right_x-small"},a.default.createElement(f.default,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"note"}),a.default.createElement("span",{className:"slds-assistive-text"},"Note")),"Discuss Slides for Nov EBC",a.default.createElement("span",{className:"slds-col_bump-left"},"2 Days Ago"))))))},{id:"voice-composer-call-logged",label:"Voice - Log a Call",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",bodyClassName:"slds-docked-composer__body_form",header:"Lei Chan",footer:a.default.createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Save")},a.default.createElement("fieldset",{className:"slds-form-element slds-form_compound"},a.default.createElement("legend",{className:"slds-assistive-text"},"Log a call"),a.default.createElement("div",{className:"slds-form-element__control"},a.default.createElement("div",{className:"slds-form-element__group"},a.default.createElement("div",{className:"slds-form-element__row"},a.default.createElement("div",{className:"slds-form-element slds-size_1-of-1"},a.default.createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Subject"),a.default.createElement("div",{className:"slds-form-element__control"},a.default.createElement("input",{className:"slds-input",type:"text",id:"text-input-01"})))),a.default.createElement("div",{className:"slds-form-element__row"},a.default.createElement("div",{className:"slds-form-element slds-size_1-of-1"},a.default.createElement("label",{className:"slds-form-element__label",htmlFor:"textarea-input-01"},"Comments"),a.default.createElement("div",{className:"slds-form-element__control"},a.default.createElement("textarea",{className:"slds-textarea",id:"textarea-input-01"})))),a.default.createElement("div",{className:"slds-form-element__row"},a.default.createElement(r.ComboboxContainer,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Leads",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-01",listbox:a.default.createElement(v,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})}),a.default.createElement(r.ComboboxContainer,{formClassName:"slds-size_1-of-2",autocomplete:!0,label:"Name",placeholder:"Search Accounts",inputIcon:"right",inputIconRightSymbol:"search",objectSwitcher:!0,objectSwitcherInline:!0,"aria-controls":"listbox-id-02",listbox:a.default.createElement(v,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})})))))))},{id:"email",label:"Email Composer",element:a.default.createElement("div",{className:"slds-docked_container"},a.default.createElement(h,{className:"slds-is-open",header:"New Email",headerSymbol:"email",footer:a.default.createElement(function(e){return a.default.createElement("div",{className:"slds-col_bump-left slds-grid slds-grid_vertical-align-center"},a.default.createElement("div",{className:"slds-grid slds-m-right_small",role:"toolbar"},a.default.createElement("ul",{className:"slds-grid","aria-label":"Insert content"},a.default.createElement("li",null,a.default.createElement(d.default,{className:"slds-button_icon-small",symbol:"link",assistiveText:"Attach File",title:"Attach File"})),a.default.createElement("li",null,a.default.createElement(d.default,{className:"slds-button_icon-small",symbol:"insert_template",assistiveText:"Insert Template",title:"Insert Template",tabIndex:"-1"})),a.default.createElement("li",null,a.default.createElement(d.default,{className:"slds-button_icon-small",symbol:"insert_tag_field",assistiveText:"Insert HTML",title:"Insert HTML",tabIndex:"-1"}))),a.default.createElement(d.default,{className:"slds-button_icon-small",symbol:"preview",assistiveText:"Preview",title:"Preview",tabIndex:"-1"})),a.default.createElement("button",{className:"slds-button slds-button_brand"},"Send"))},null)},a.default.createElement("div",{className:"slds-email-composer"},a.default.createElement(r.ComboboxContainer,{id:"recipients-to",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"To",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-01",listbox:a.default.createElement(v,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})},a.default.createElement(u.ListboxPills,null,a.default.createElement(u.ListboxPillsItem,null,a.default.createElement(u.ListboxPill,{label:"jrogers@cloudhub.com",tabIndex:"0"},a.default.createElement(s.Avatar,{className:"slds-avatar_x-small slds-pill__icon_container"},a.default.createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"})))))),a.default.createElement(r.ComboboxContainer,{id:"recipients-bcc",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"Bcc",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-02",listbox:a.default.createElement(v,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})}),a.default.createElement(r.ComboboxContainer,{id:"recipients-cc",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"Cc",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-03",listbox:a.default.createElement(v,{id:"listbox-id-03",listboxOptionId:"listbox-option-id-3"})}),a.default.createElement(i.FormElement,{labelContent:"Enter subject",hasHiddenLabel:!0,inputId:"input-subject-01"},a.default.createElement(c.Input,{id:"input-subject-01",className:"slds-input_bare",placeholder:"Enter Subject"})),a.default.createElement(m.RichTextEditor,null,a.default.createElement(m.RteToolbar,null,a.default.createElement(m.RteFormatFont,null),a.default.createElement(m.RteFormatText,{tabIndexSetting:"-1"}),a.default.createElement(m.RteFormatColor,null),a.default.createElement(m.RteFormatBody,null),a.default.createElement(m.RteAlignText,null),a.default.createElement(m.RteInsertContent,null),a.default.createElement(m.RteClearFormatting,null)),a.default.createElement(m.RteTextarea,{placeholder:"Compose Email..."})))))}]}});