@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 37.9 kB
JavaScript
var SLDS;!function(){"use strict";var e,t={1594:function(e){e.exports=React},7472:function(e,t,s){s.r(t),s.d(t,{ComposerOverflowMenu:function(){return U},Context:function(){return Y},DockedComposerPanel:function(){return H},Footer:function(){return V},default:function(){return J},examples:function(){return Z},states:function(){return W}});var l=s(1594),a=s.n(l),n=s(2937),i=s(6955),o=s(4760),r=s(1766),d=s(1412),c=s(4187),m=s.n(c),u=s(8347),b=s(5159),_=s(3964),p=s(6185),E=(s(5786),s(538)),N=s(2711),h=s(5526),f=s(942),v=s.n(f),g=s(806);function x(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var s=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=s){var l,a,n,i,o=[],r=!0,d=!1;try{if(n=(s=s.call(e)).next,0===t){if(Object(s)!==s)return;r=!1}else for(;!(r=(l=n.call(s)).done)&&(o.push(l.value),o.length!==t);r=!0);}catch(e){d=!0,a=e}finally{try{if(!r&&null!=s.return&&(i=s.return(),Object(i)!==i))return}finally{if(d)throw a}}return o}}(e,t)||function(e,t){if(e){if("string"==typeof e)return y(e,t);var s={}.toString.call(e).slice(8,-1);return"Object"===s&&e.constructor&&(s=e.constructor.name),"Map"===s||"Set"===s?Array.from(e):"Arguments"===s||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(s)?y(e,t):void 0}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function y(e,t){(null==t||t>e.length)&&(t=e.length);for(var s=0,l=Array(t);s<t;s++)l[s]=e[s];return l}var C=function(e){return a().createElement(N.ZS,{labelId:e.labelId,labelContent:e.label,inlineMessage:e.inlineMessage,hasError:e.hasError,errorId:e.errorId,hasFauxLabel:!0},a().createElement("div",{className:v()("slds-rich-text-editor slds-grid slds-grid_vertical slds-nowrap",e.isToolbarOnly&&"slds-rich-text-editor_toolbar-only",e.className),"aria-label":e.disabledLabel},e.children))};C.propTypes={children:m().node.isRequired,errorId:m().string,hasError:m().bool,inlineMessage:m().string,labelContent:m().string,labelId:m().string};var I=function(e){return a().createElement("div",{role:"toolbar","aria-label":e.disabledLabel,className:v()("slds-rich-text-editor__toolbar slds-shrink-none",e.isToolbarOnly&&"slds-rich-text-editor__toolbar_detached",e.className)},e.children)},w=function(e){var t=e.listboxData,s=e.id;return a().createElement(p.Ay,{id:s,snapshot:t,type:"plain",count:3,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};w.propTypes={listboxData:m().object.isRequired,id:m().string};var A=function(e){var t=e.listboxData,s=e.id;return a().createElement(p.Ay,{id:s,snapshot:t,type:"plain",count:6,hideIcons:!0,className:"slds-dropdown_fluid slds-dropdown_left"})};A.propTypes={listboxData:m().object.isRequired,id:m().string};var k=function(e){var t=x((0,l.useState)(g.Ay.uniqueId("example-unique-id-")),1)[0],s=x((0,l.useState)(g.Ay.uniqueId("example-unique-id-")),1)[0],n=x((0,l.useState)(g.Ay.uniqueId("example-unique-id-")),1)[0],i=x((0,l.useState)(g.Ay.uniqueId("example-unique-id-")),1)[0];return a().createElement("div",{className:"slds-grid slds-rich-text-editor__spacing-wrapper",role:"group","aria-label":"Format font family & size"},a().createElement("div",{className:"slds-rich-text-editor__select"},a().createElement(b.Ay,{id:t,"aria-controls":s,label:"Choose a Font",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_x-small",inputIconPosition:"right",rightInputIcon:a().createElement(E.UtilityIcon,{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:a().createElement(w,{listboxData:_.kz,id:s}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Font"})),a().createElement("div",{className:"slds-rich-text-editor__select"},a().createElement(b.Ay,{id:n,"aria-controls":i,label:"Choose a Font Size",hideLabel:!0,inputContainerClassName:"slds-rich-text-editor__select_xx-small",inputIconPosition:"right",rightInputIcon:a().createElement(E.UtilityIcon,{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:a().createElement(A,{listboxData:_.TU,id:i}),resultsType:"listbox",hasInteractions:!0,selectOnly:!0,value:"Size",tabIndex:"-1"})))},S=function(e){return a().createElement(d.ButtonGroupList,{"aria-label":"Format text"},a().createElement("li",null,a().createElement(i.A,{className:"slds-button_icon-border-filled",symbol:"bold",tabIndex:e.tabIndexSetting,"aria-describedby":e.hasTooltip?"bold":null,disabled:e.disabledButtons,assistiveText:"Bold"})),a().createElement("li",null,a().createElement(i.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"italic",disabled:e.disabledButtons,assistiveText:"Italic"})),a().createElement("li",null,a().createElement(i.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"underline",disabled:e.disabledButtons,assistiveText:"Underline"})),a().createElement("li",null,a().createElement(i.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"strikethrough",disabled:e.disabledButtons,assistiveText:"Strike Through"})))},T=function(e){return a().createElement(d.ButtonGroupList,{"aria-label":"Format background & text color"},a().createElement("li",null,a().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},a().createElement(u.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_background_color"}),a().createElement(u.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),a().createElement("span",{className:"slds-assistive-text"},"Background Color"))),a().createElement("li",null,a().createElement("button",{tabIndex:"-1",disabled:e.disabledButtons,className:"slds-button slds-button_icon slds-button_icon-more slds-button_icon-more-filled","aria-haspopup":"true"},a().createElement(u.A,{className:"slds-button__icon",sprite:"utility",symbol:"text_color"}),a().createElement(u.A,{className:"slds-button__icon slds-button__icon_x-small",sprite:"utility",symbol:"down"}),a().createElement("span",{className:"slds-assistive-text"},"Text Color"))))},L=function(e){return a().createElement(d.ButtonGroupList,{"aria-label":"Format body"},a().createElement("li",null,a().createElement(i.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextbulletedlist",disabled:e.disabledButtons,assistiveText:"Bulleted List"})),a().createElement("li",null,a().createElement(i.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextnumberedlist",disabled:e.disabledButtons,assistiveText:"Numbered List"})),a().createElement("li",null,a().createElement(i.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextindent",disabled:e.disabledButtons,assistiveText:"Indent"})),a().createElement("li",null,a().createElement(i.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"richtextoutdent",disabled:e.disabledButtons,assistiveText:"Outdent"})))},j=function(e){return a().createElement(d.ButtonGroupList,{"aria-label":"Align text"},a().createElement("li",null,a().createElement(i.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"left_align_text",disabled:e.disabledButtons,assistiveText:"Left Align Text"})),a().createElement("li",null,a().createElement(i.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"center_align_text",disabled:e.disabledButtons,assistiveText:"Center Align Text"})),a().createElement("li",null,a().createElement(i.A,{tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"right_align_text",disabled:e.disabledButtons,assistiveText:"Right Align Text"})))},B=function(e){return a().createElement(d.ButtonGroupList,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Insert content"},a().createElement("li",{role:e.overflow?"presentation":null},a().createElement(i.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"emoji",disabled:e.disabledButtons,assistiveText:"Add Emoji"})),a().createElement("li",{role:e.overflow?"presentation":null},a().createElement(i.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"image",disabled:e.disabledButtons,assistiveText:"Add Image"})),a().createElement("li",{role:e.overflow?"presentation":null},a().createElement(i.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"link",disabled:e.disabledButtons,assistiveText:"Add Link"})))},z=function(e){return a().createElement(d.ButtonGroupList,{role:e.overflow?"presentation":null,"aria-label":e.overflow?null:"Remove Formatting"},a().createElement("li",{role:e.overflow?"presentation":null},a().createElement(i.A,{role:e.overflow?"menuitem":null,tabIndex:"-1",className:"slds-button_icon-border-filled",symbol:"remove_formatting",disabled:e.disabledButtons,assistiveText:"Remove Formatting"})))},O=function(e){return a().createElement("div",{className:v()(e.text?"slds-rich-text-editor__output":"slds-rich-text-editor__textarea","slds-grid")},e.text?a().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-grow"},e.text):a().createElement("div",{"aria-describedby":e["aria-describedby"],"aria-label":e.labelId?null:e.label||"Compose text","aria-labelledby":e.labelId,contentEditable:e.disabled?null:"true",suppressContentEditableWarning:!0,className:"slds-rich-text-area__content slds-text-color_weak slds-grow"},e.placeholder))},P=s(7705),D=s(3106),F="dialog-heading-id-1",M="dialog-content-id-1",q=[{entity:"email",title:"Agenda for next week"},{entity:"call",title:"Lei Chan"},{entity:"task",title:"August 14 Meeting Notes"}],V=function(e){return a().createElement("div",{className:"slds-col_bump-left slds-text-align_right"},a().createElement("button",{className:"slds-button slds-button_brand"},"Action"))},R=function(e){return a().createElement("div",{className:"slds-col_bump-left slds-grid slds-grid_vertical-align-center"},a().createElement("div",{className:"slds-grid slds-m-right_small",role:"toolbar"},a().createElement("ul",{className:"slds-grid","aria-label":"Insert content"},a().createElement("li",null,a().createElement(i.A,{className:"slds-button_icon-small",symbol:"link",assistiveText:"Attach File",title:"Attach File"})),a().createElement("li",null,a().createElement(i.A,{className:"slds-button_icon-small",symbol:"insert_template",assistiveText:"Insert Template",title:"Insert Template",tabIndex:"-1"})),a().createElement("li",null,a().createElement(i.A,{className:"slds-button_icon-small",symbol:"insert_tag_field",assistiveText:"Insert HTML",title:"Insert HTML",tabIndex:"-1"}))),a().createElement(i.A,{className:"slds-button_icon-small",symbol:"preview",assistiveText:"Preview",title:"Preview",tabIndex:"-1"})),a().createElement("button",{className:"slds-button slds-button_brand"},"Send"))},H=function(e){return a().createElement("section",{className:v()("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:F,"aria-describedby":e.nestedDialog?null:M},a().createElement("header",{className:"slds-docked-composer__header slds-grid slds-shrink-none","aria-live":"assertive"},a().createElement("div",{className:"slds-media slds-media_center slds-no-space"},a().createElement("div",{className:"slds-media__figure slds-m-right_x-small"},a().createElement("span",{className:"slds-icon_container"},a().createElement(u.A,{className:"slds-icon slds-icon_small slds-icon-text-default",sprite:"standard",symbol:e.headerSymbol||"call"}))),a().createElement("div",{className:"slds-media__body"},e.dialogClosed?a().createElement("span",{className:"slds-assistive-text"},"Minimized"):null,a().createElement("h2",{className:"slds-truncate",id:F,title:e.header||"Header"},e.header||"Header"))),a().createElement("div",{className:"slds-col_bump-left slds-shrink-none"},a().createElement(i.A,{className:"slds-button_icon",symbol:"minimize_window",assistiveText:"Minimize Composer Panel",title:"Minimize window"}),a().createElement(i.A,{className:"slds-button_icon",symbol:"expand_alt",assistiveText:"Expand Composer Panel",title:"Expand Composer"}),a().createElement(i.A,{className:"slds-button_icon",symbol:"close",assistiveText:"Close Composer Panel",title:"Close"}))),a().createElement("div",{className:v()("slds-docked-composer__body",e.bodyClassName),id:M},e.children),e.footer?a().createElement("footer",{className:v()("slds-docked-composer__footer slds-shrink-none",e.footerClassName)},e.footer):null)},U=function(e){return a().createElement("div",{className:"slds-docked-composer slds-docked-composer_overflow"},a().createElement("button",{className:"slds-button slds-button_icon slds-docked-composer_overflow__button","aria-haspopup":"true"},a().createElement(u.A,{className:"slds-button__icon",sprite:"utility",symbol:"standard_objects"}),a().createElement("span",{className:"slds-text-body_small slds-m-left_xx-small"},"3"," ",a().createElement("span",{className:"slds-assistive-text"},"other docked composer panels"))),a().createElement(o.Menu,{className:"slds-dropdown_left slds-dropdown_bottom slds-dropdown_medium slds-nubbin_bottom-left"},a().createElement(o.MenuList,{className:"slds-dropdown_length-with-icon-7"},g.Ay.times(q.length,function(e){return a().createElement(o.MenuItem,{key:e,title:q[e].title},a().createElement("span",{className:"slds-icon_container slds-icon-standard-"+q[e].entity+" slds-m-right_x-small"},a().createElement(u.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:q[e].entity}),a().createElement("span",{className:"slds-assistive-text"},q[e].entity)),q[e].title)}))))},G=function(e){return a().createElement(P.NC,{listboxClassName:"slds-dropdown slds-dropdown_fluid",vertical:!0,id:e.id},a().createElement(P.Oh,null,a().createElement(P.q9,{id:e.listboxOptionId,entityTitle:"Acme",entityMeta:!0})))},Y=function(e){return a().createElement("div",{className:"demo-only demo-only_viewport",style:{height:"500px",minWidth:"615px",overflowX:"auto"}},e.children)},J=[{id:"default",label:"Default",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",footer:a().createElement(V,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))}],W=[{id:"single-composer-open",label:"Open",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",footer:a().createElement(V,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))},{id:"single-composer-focused",label:"Focused",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open slds-has-focus",footer:a().createElement(V,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))},{id:"single-composer-closed",label:"Closed",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{dialogClosed:!0,footer:a().createElement(V,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))},{id:"single-composer-closed-focused",label:"Closed Focused",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-has-focus",dialogClosed:!0,footer:a().createElement(V,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))},{id:"single-composer-popout",label:"Popout",element:a().createElement(r.Backdrop,null,a().createElement(r.Modal,{className:"slds-docked-composer-modal","aria-labelledby":F,"aria-describedby":M,closeButton:!1},a().createElement(r.ModalContent,{id:"modal-content-id"},a().createElement(H,{footer:a().createElement(V,null),nestedDialog:!0},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))))},{id:"multiple-composer-overflow",label:"With Overflow Menu",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(U,null),a().createElement(H,{className:"slds-is-open",footer:a().createElement(V,null)},a().createElement("div",{className:"slds-align_absolute-center"},"Docked Composer Panel Body ",a().createElement("br",null)," This area consumes the feature")))}],Z=[{id:"task",label:"Log a Task",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",bodyClassName:"slds-docked-composer__body_form",header:"New Task",headerSymbol:"task",footer:a().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Save")},a().createElement("fieldset",{className:"slds-form-element slds-form_compound"},a().createElement("legend",{className:"slds-assistive-text"},"Log new task"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("div",{className:"slds-form-element__group"},a().createElement("div",{className:"slds-form-element__row"},a().createElement("div",{className:"slds-form-element slds-size_1-of-1"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Subject"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("input",{className:"slds-input",type:"text",id:"text-input-01"})))),a().createElement("div",{className:"slds-form-element__row"},a().createElement("div",{className:"slds-form-element slds-size_1-of-2"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-02"},"Assigned To"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("input",{className:"slds-input",type:"text",id:"text-input-02"}))),a().createElement("div",{className:"slds-form-element slds-size_1-of-2"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-03"},"Due Dates"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("input",{className:"slds-input",type:"text",id:"text-input-03"})))),a().createElement("div",{className:"slds-form-element__row"},a().createElement(P.H_,{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().createElement(G,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})}),a().createElement(P.H_,{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().createElement(G,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})})))))))},{id:"voice-composer-queued",label:"Voice - Queued",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Connecting...",footer:a().createElement("button",{className:"slds-button slds-button_destructive slds-size_1-of-1"},"End Call")},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Connecting..."))))},{id:"voice-composer-ringing",label:"Voice - Ringing",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Dialing...",footer:a().createElement("button",{className:"slds-button slds-button_destructive slds-size_1-of-1"},"End Call")},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Dialing..."))))},{id:"voice-composer-connected",label:"Voice - Connected",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",header:"Lei Chan - Call in Progress",footer:a().createElement("button",{className:"slds-button slds-button_destructive slds-col_bump-left"},"End Call")},a().createElement("div",{className:"slds-docked-composer__lead"},a().createElement("div",{className:"slds-media"},a().createElement("div",{className:"slds-media__figure"},a().createElement("span",{className:"slds-avatar slds-avatar_medium"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"}))),a().createElement("div",{className:"slds-media__body"},a().createElement("p",{className:"slds-text-heading_medium"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")))),a().createElement("p",{className:"slds-col_bump-left slds-text-heading_large"},"5:37")),a().createElement("div",{className:"slds-docked-composer__toolbar"},a().createElement(i.A,{className:"slds-button_icon-border-filled slds-button_icon-small",symbol:"unmuted",assistiveText:"Mute Yourself",title:"Mute Yourself","aria-pressed":"false"})),a().createElement("label",{className:"slds-assistive-text",htmlFor:"composer-text-input-1"},"Take notes"),a().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().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Cancelling..."},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Cancelling..."))))},{id:"voice-composer-busy",label:"Voice - Busy",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Busy",footer:[a().createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:g.Ay.uniqueId("follow-up-")},"Follow-Up Later"),a().createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:g.Ay.uniqueId("call-again-")},"Call Again")]},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Busy"))))},{id:"voice-composer-failed",label:"Voice - Call Failed",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - Call Failed",footer:[a().createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:g.Ay.uniqueId("follow-up-")},"Edit Phone Number"),a().createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:g.Ay.uniqueId("call-again-")},"Call Again")]},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"Call Failed"))))},{id:"voice-composer-no-answer",label:"Voice - No Answer",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center",header:"Lei Chan - No Answer",footer:[a().createElement("button",{className:"slds-button slds-button_neutral slds-size_1-of-2",key:g.Ay.uniqueId("follow-up-")},"Follow-Up Later"),a().createElement("button",{className:"slds-button slds-button_brand slds-size_1-of-2",key:g.Ay.uniqueId("call-again-")},"Call Again")]},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"No Answer"))))},{id:"voice-composer-call-finished",label:"Voice - Call Finished",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",header:"Lei Chan - Call Finished",footer:a().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Finish Notes")},a().createElement("div",{className:"slds-docked-composer__lead"},a().createElement("div",{className:"slds-media"},a().createElement("div",{className:"slds-media__figure"},a().createElement("span",{className:"slds-avatar slds-avatar_medium"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"}))),a().createElement("div",{className:"slds-media__body"},a().createElement("p",{className:"slds-text-heading_medium"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation"))))),a().createElement("div",{className:"slds-docked-composer__toolbar"},a().createElement(i.A,{className:"slds-button_icon-border-filled slds-button_icon-small",symbol:"unmuted",assistiveText:"Mute Yourself",title:"Mute Yourself","aria-pressed":"false"})),a().createElement("label",{className:"slds-assistive-text",htmlFor:"composer-text-input-1"},"Take notes"),a().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().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",bodyClassName:"slds-align_absolute-center slds-size_1-of-1",header:"Lei Chan - Incoming Call...",footer:a().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Finish Notes")},a().createElement("div",{className:"slds-text-align_center slds-align-middle"},a().createElement("span",{className:"slds-avatar slds-avatar_large"},a().createElement("img",{alt:"",src:"/assets/images/avatar2.jpg",title:"Lei Chan avatar"})),a().createElement("h3",{className:"slds-text-heading_large"},"Lei Chan"),a().createElement("ul",{className:"slds-list_horizontal slds-has-dividers_right slds-text-body_small"},a().createElement("li",{className:"slds-item"},"VP of Sales"),a().createElement("li",{className:"slds-item "},"Acme Corporation")),a().createElement("p",{className:"slds-text-heading_medium slds-m-top_medium"},"(416) 555-1234")),a().createElement("div",{className:"slds-p-horizontal_x-small slds-text-align_left slds-size_1-of-1"},a().createElement("h3",{className:"slds-m-bottom_x-small"},"Recent Activity"),a().createElement("ul",{className:"slds-has-dividers_around-space"},a().createElement("li",{className:"slds-item slds-theme_shade slds-grid"},a().createElement("span",{className:"slds-icon_container slds-icon-standard-task slds-m-right_x-small"},a().createElement(u.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"task"}),a().createElement("span",{className:"slds-assistive-text"},"Task")),"Discussed New Pricing Models",a().createElement("span",{className:"slds-col_bump-left"},"Yesterday")),a().createElement("li",{className:"slds-item slds-theme_shade slds-grid"},a().createElement("span",{className:"slds-icon_container slds-icon-standard-email slds-m-right_x-small"},a().createElement(u.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"email"}),a().createElement("span",{className:"slds-assistive-text"},"Email")),"Re: Updated Proposals",a().createElement("span",{className:"slds-col_bump-left"},"4 Hours Ago")),a().createElement("li",{className:"slds-item slds-theme_shade slds-grid"},a().createElement("span",{className:"slds-icon_container slds-icon-standard-note slds-m-right_x-small"},a().createElement(u.A,{className:"slds-icon slds-icon_small",sprite:"standard",symbol:"note"}),a().createElement("span",{className:"slds-assistive-text"},"Note")),"Discuss Slides for Nov EBC",a().createElement("span",{className:"slds-col_bump-left"},"2 Days Ago"))))))},{id:"voice-composer-call-logged",label:"Voice - Log a Call",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",bodyClassName:"slds-docked-composer__body_form",header:"Lei Chan",footer:a().createElement("button",{className:"slds-button slds-button_brand slds-col_bump-left"},"Save")},a().createElement("fieldset",{className:"slds-form-element slds-form_compound"},a().createElement("legend",{className:"slds-assistive-text"},"Log a call"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("div",{className:"slds-form-element__group"},a().createElement("div",{className:"slds-form-element__row"},a().createElement("div",{className:"slds-form-element slds-size_1-of-1"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"text-input-01"},"Subject"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("input",{className:"slds-input",type:"text",id:"text-input-01"})))),a().createElement("div",{className:"slds-form-element__row"},a().createElement("div",{className:"slds-form-element slds-size_1-of-1"},a().createElement("label",{className:"slds-form-element__label",htmlFor:"textarea-input-01"},"Comments"),a().createElement("div",{className:"slds-form-element__control"},a().createElement("textarea",{className:"slds-textarea",id:"textarea-input-01"})))),a().createElement("div",{className:"slds-form-element__row"},a().createElement(P.H_,{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().createElement(G,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})}),a().createElement(P.H_,{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().createElement(G,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})})))))))},{id:"email",label:"Email Composer",element:a().createElement("div",{className:"slds-docked_container"},a().createElement(H,{className:"slds-is-open",header:"New Email",headerSymbol:"email",footer:a().createElement(R,null)},a().createElement("div",{className:"slds-email-composer"},a().createElement(P.H_,{id:"recipients-to",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"To",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-01",listbox:a().createElement(G,{id:"listbox-id-01",listboxOptionId:"listbox-option-id-1"})},a().createElement(D.IK,null,a().createElement(D.j9,null,a().createElement(D.$P,{label:"jrogers@cloudhub.com",tabIndex:"0"},a().createElement(n.Avatar,{className:"slds-avatar_x-small slds-pill__icon_container"},a().createElement("img",{alt:"Person name",src:"/assets/images/avatar2.jpg",title:"User avatar"})))))),a().createElement(P.H_,{id:"recipients-bcc",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"Bcc",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-02",listbox:a().createElement(G,{id:"listbox-id-02",listboxOptionId:"listbox-option-id-2"})}),a().createElement(P.H_,{id:"recipients-cc",formClassName:"slds-email-composer__combobox",selectedOptionsInline:!0,label:"Cc",placeholder:" ",autocomplete:!0,"aria-controls":"listbox-id-03",listbox:a().createElement(G,{id:"listbox-id-03",listboxOptionId:"listbox-option-id-3"})}),a().createElement(N.ZS,{labelContent:"Enter subject",hasHiddenLabel:!0,inputId:"input-subject-01"},a().createElement(h.A,{id:"input-subject-01",className:"slds-input_bare",placeholder:"Enter Subject"})),a().createElement(C,null,a().createElement(I,null,a().createElement(k,null),a().createElement(S,{tabIndexSetting:"-1"}),a().createElement(T,null),a().createElement(L,null),a().createElement(j,null),a().createElement(B,null),a().createElement(z,null)),a().createElement(O,{placeholder:"Compose Email..."})))))}]}},s={};function l(e){var a=s[e];if(void 0!==a)return a.exports;var n=s[e]={exports:{}};return t[e](n,n.exports,l),n.exports}l.m=t,l.amdO={},e=[],l.O=function(t,s,a,n){if(!s){var i=1/0;for(c=0;c<e.length;c++){s=e[c][0],a=e[c][1],n=e[c][2];for(var o=!0,r=0;r<s.length;r++)(!1&n||i>=n)&&Object.keys(l.O).every(function(e){return l.O[e](s[r])})?s.splice(r--,1):(o=!1,n<i&&(i=n));if(o){e.splice(c--,1);var d=a();void 0!==d&&(t=d)}}return t}n=n||0;for(var c=e.length;c>0&&e[c-1][2]>n;c--)e[c]=e[c-1];e[c]=[s,a,n]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},l.d=function(e,t){for(var s in t)l.o(t,s)&&!l.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:t[s]})},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=6263,function(){var e={518:0,1117:0,1252:0,1578:0,1974:0,2033:0,2274:0,2782:0,3140:0,4268:0,4583:0,4723:0,4924:0,6263:0,6671:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0};l.O.j=function(t){return 0===e[t]};var t=function(t,s){var a,n,i=s[0],o=s[1],r=s[2],d=0;if(i.some(function(t){return 0!==e[t]})){for(a in o)l.o(o,a)&&(l.m[a]=o[a]);if(r)var c=r(l)}for(t&&t(s);d<i.length;d++)n=i[d],l.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return l.O(c)},s=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];s.forEach(t.bind(null,0)),s.push=t.bind(null,s.push.bind(s))}(),l.nc=void 0;var a=l.O(void 0,[6790],function(){return l(7472)});a=l.O(a),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/docked-composer/base/example.jsx.js"]=a}();