@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
1 lines • 32.5 kB
JavaScript
var SLDS;!function(){"use strict";var e,t={1594:function(e){e.exports=React},3540:function(e,t,l){l.r(t),l.d(t,{CardWithDataTable:function(){return Y},CardWithTiles:function(){return G},NestedCards:function(){return K},WrappedCards:function(){return Q},default:function(){return X},examples:function(){return $},states:function(){return Z}});var a=l(1594),s=l.n(a),n=l(6466),r=l(8522),i=l(3011),o=l(942),c=l.n(o),d=l(4187),m=l.n(d),u=l(806),b=l(6955),h=l(5006),p=l(3589),E=l(885),y=l(538);function f(e){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f(e)}function g(){return g=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var a in l)({}).hasOwnProperty.call(l,a)&&(e[a]=l[a])}return e},g.apply(null,arguments)}function v(e,t,l){return(t=function(e){var t=function(e){if("object"!=f(e)||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var l=t.call(e,"string");if("object"!=f(l))return l;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(e)}(e);return"symbol"==f(t)?t:t+""}(t))in e?Object.defineProperty(e,t,{value:l,enumerable:!0,configurable:!0,writable:!0}):e[t]=l,e}var w=s().createContext({isActionableMode:!1});m().string,m().node;var x=function(e){var t=c()("slds-table",{"slds-table_cell-buffer":e.hasCellBuffer,"slds-table_header-hidden":e.hasHiddenHeader,"slds-no-row-hover":e.hasNoRowHover,"slds-no-cell-focus":e.hasNoCellFocus,"slds-table_bordered":e.isBordered,"slds-table_col-bordered":e.isColBordered,"slds-table_edit":e.isEditable,"slds-table_fixed-layout":e.isFixedLayout,"slds-max-medium-table_stacked-horizontal":e.isResponsive,"slds-max-medium-table_stacked":e.isResponsiveStacked,"slds-table_resizable-cols":e.isResizable,"slds-table_striped":e.isStriped,"slds-tree slds-table_tree":"treegrid"===e.type,"slds-table_header-fixed":e.hasFixedHeader});return s().createElement("table",g({"aria-multiselectable":"multiple"===e.selectionType?"true":null,className:t,role:function(){var t=null;switch(e.type){case"advanced":t="grid";break;case"treegrid":t="treegrid"}return t}(),style:e.style},e.ariaLabelledBy&&v({},"aria-labelledby",e.ariaLabelledBy),e.ariaLabel&&v({},"aria-label",e.ariaLabel)),e.children)};x.displayName="Table",x.propTypes={ariaLabel:m().string,ariaLabelledBy:m().string,children:m().node,hasCellBuffer:m().bool,hasHiddenHeader:m().bool,hasNoCellFocus:m().bool,hasNoRowHover:m().bool,isBordered:m().bool,isColBordered:m().bool,isEditable:m().bool,isFixedLayout:m().bool,isResizable:m().bool,isResponsive:m().bool,isResponsiveStacked:m().bool,isStriped:m().bool,selectionType:m().oneOf(["multiple","single"]),style:m().object,type:m().oneOf(["advanced","base","treegrid"]).isRequired,hasFixedHeader:m().bool};var _=function(e){return s().createElement("thead",{className:e.isHidden?"slds-assistive-text":null},e.children)};_.displayName="THead",_.propTypes={children:m().node,isHidden:m().bool};var N=function(e){return s().createElement("tr",{className:"slds-line-height_reset"},e.children)};N.displayName="THeadTr",N.propTypes={children:m().node};var A=function(e){var t,l=(0,a.useContext)(w).isActionableMode,n=c()({"slds-has-button-menu":e.hasMenu,"slds-has-focus":e.hasFocus,"slds-is-resizable":e.isResizable,"slds-text-align_right":e.isRightAligned,"slds-is-sortable":e.isSortable,"slds-is-sorted":"ascending"===e.sortDirection||"descending"===e.sortDirection,"slds-is-sorted_asc":"ascending"===e.sortDirection,"slds-is-sorted_desc":"descending"===e.sortDirection,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":l});return s().createElement("th",{"aria-sort":(t=null,e.isSortable&&(t=e.sortDirection||"none"),t),className:n,scope:!e.isDataTable&&"col",role:e.isDataTable&&"cell",style:e.style},e.isDataTable,e.children)};A.displayName="ColumnTh",A.propTypes={"aria-label":m().string,children:m().node,hasFocus:m().bool,hasMenu:m().bool,isResizable:m().bool,isRightAligned:m().bool,isSortable:m().bool,sortDirection:m().oneOf(["ascending","descending","none"]),style:m().object,hasWrap:m().bool,isDataTable:m().bool};var T=function(e){return s().createElement("div",{className:c()("slds-truncate",{"slds-assistive-text":e.isAssistiveText,"slds-cell-fixed":e.isFixedCell}),id:e.id,title:e.columnName},e.columnName)};T.displayName="ColumnHeader",T.propTypes={columnName:m().string.isRequired,id:m().string,isAssistiveText:m().bool,isFixedCell:m().bool},T.defaultProps={columnName:"Column Name",isDataTable:m().bool};var C=function(e){var t=u.Ay.uniqueId("cell-resize-handle-");return s().createElement("div",{className:"slds-resizable"},s().createElement("input",{"aria-label":e.label,className:"slds-resizable__input slds-assistive-text",id:t,max:"1000",min:"20",tabIndex:e.tabIndex,type:"range"}),s().createElement("span",{className:"slds-resizable__handle"},s().createElement("span",{className:"slds-resizable__divider"})))};C.displayName="ResizeControl",C.propTypes={label:m().string.isRequired,tabIndex:m().oneOf(["0","-1"])};var R=function(e){var t=(0,a.useContext)(w).isActionableMode,l=t?"0":"-1",n=function(){return s().createElement("div",{className:"slds-grid slds-grid_vertical-align-center slds-has-flexi-truncate"},e.columnHeaderIcons?function(){var t=e.columnHeaderIcons.filter(function(t){return t.column===e.columnName.toLowerCase()});if(t.length)return t[0].icon}():null,s().createElement("span",{className:"slds-truncate",title:e.columnName},e.columnName),e.isSortable&&s().createElement(y.UtilityIcon,{assistiveText:!1,className:"slds-icon-text-default slds-is-sortable__icon ",symbol:"arrowdown",title:!1}))};return s().createElement(s().Fragment,null,e.isSortable?s().createElement("a",{className:"slds-th__action slds-text-link_reset",href:"#",role:"button",tabIndex:l,onClick:function(e){return e.preventDefault()}},s().createElement("span",{className:"slds-assistive-text"},"Sort by: "),n()):s().createElement("div",{className:"slds-th__action"},n()),e.sortDirection&&s().createElement("span",{className:"slds-assistive-text","aria-live":"polite","aria-atomic":"true"},"Sorted ",e.sortDirection),e.hasMenu&&s().createElement(b.A,{"aria-haspopup":"true",assistiveText:"Show ".concat(e.columnName," column actions"),className:"slds-th__action-button slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"chevrondown",tabIndex:t?"0":"-1",title:"Show ".concat(e.columnName," column actions")}),e.isResizable&&s().createElement(C,{label:e.columnName+" column width"||0,tabIndex:l}))};R.displayName="InteractiveColumnHeader",R.propTypes={columnName:m().string.isRequired,columnHeaderIcons:m().array,hasMenu:m().bool,isResizable:m().bool,isSortable:m().bool,sortDirection:m().oneOf(["ascending","descending"])},R.defaultProps={isResizable:!0,isSortable:!0};var S=function(e){var t=(0,a.useContext)(w).isActionableMode;return s().createElement(s().Fragment,null,s().createElement("div",{className:"slds-th__action slds-th__action_form"},s().createElement(p.Checkbox,{tabIndex:t?"0":"-1",labelId:"check-select-all-label",label:"Select All",hideLabel:!0,checked:!!e.checked||null,groupId:"column-group-header",isDataTable:!0})))};S.displayName="SelectAllColumnHeader",S.propTypes={checked:m().bool};var k=function(e){var t=e.hasErrorColumn?"2rem":"3.25rem",l=e.mainColumnWidth||null;return s().createElement(_,{isHidden:e.isHidden},s().createElement(N,null,e.hasErrorColumn?s().createElement(A,{style:{width:"3.75rem"}},s().createElement(T,{columnName:"Errors",isAssistiveText:!0})):null,!e.hasNoRowSelection&&s().createElement(A,{isDataTable:!e.hasSingleRowSelect||!e.isHidden,isRightAligned:!e.hasErrorColumn||null,style:{width:t}},e.hasSingleRowSelect||e.isHidden?s().createElement(T,{columnName:"Choose a row to select",id:"column-group-header",isAssistiveText:!0}):s().createElement(S,{checked:e.selectAll})),e.columns.map(function(t,a){return s().createElement(A,{key:a,"aria-label":t,hasFocus:0===a?e.hasFocus:null,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===a?e.sortDirection:null,style:{width:0===a&&e.singleColumnWidth?e.singleColumnWidth:l}},s().createElement(R,{columnName:t,columnHeaderIcons:e.columnHeaderIcons,hasMenu:e.hasMenus,isResizable:e.isResizable&&!e.isHidden,isSortable:e.isSortable&&!e.isHidden,sortDirection:0===a?e.sortDirection:null}))}),e.hasRowLevelActions&&s().createElement(A,{style:{width:"3.25rem"}},s().createElement(T,{columnName:"Actions",isAssistiveText:!0}))))};k.displayName="AdvancedDataTableHead",k.propTypes={columnHeaderIcons:m().array,columns:m().array.isRequired,hasErrorColumn:m().bool,hasFocus:m().bool,hasMenus:m().bool,hasNoRowSelection:m().bool,hasRowLevelActions:m().bool,hasSingleRowSelect:m().bool,isHidden:m().bool,isResizable:m().bool,isSortable:m().bool,mainColumnWidth:m().string,selectAll:m().bool,singleColumnWidth:m().string,sortDirection:m().oneOf(["ascending","descending","none"])},k.defaultProps={hasRowLevelActions:!0,isResizable:!0,isSortable:!0};var L=function(e){return s().createElement("tbody",null,e.children)};L.displayName="TBody",L.propTypes={children:m().node};var I=function(e){return s().createElement("tr",{"aria-expanded":e.isExpanded,"aria-level":e.level,"aria-posinset":e.positionWithinLevel,"aria-selected":e.isSelected,"aria-setsize":e.numberOfItemsAtLevel,className:c()("slds-hint-parent",{"slds-align-top":e.isTopAligned,"slds-is-selected":e.isSelected}),tabIndex:e.tabIndex},e.children)};I.displayName="TBodyTr",I.propTypes={children:m().node,isExpanded:m().bool,isSelected:m().bool,isTopAligned:m().bool,level:m().string,positionWithinLevel:m().string,numberOfItemsAtLevel:m().string,tabIndex:m().oneOf(["0","-1"])};var H=function(e){var t=(0,a.useContext)(w).isActionableMode,l=c()({"slds-has-focus":e.hasFocus,"slds-cell-edit":e.isEditable,"slds-is-edited":e.isEdited,"slds-cell-error":e.isErrorCell,"slds-text-align_right":e.isRightAligned,"slds-cell-shrink":e.isShrunken,"slds-has-error":e.hasError,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return s().createElement("td",{"aria-readonly":e.isLocked,"aria-selected":e.isEditing,"aria-describedby":function(){if(e.isEdited)return"unsaved-cell-notification"}()||null,className:l||null,"data-label":e["data-label"],role:function(){var t=null;switch(e.type){case"advanced":case"treegrid":t="gridcell"}return t}(),style:e.style,tabIndex:e.tabIndex},e.children)};H.displayName="Td",H.propTypes={children:m().node,"data-label":m().string,hasError:m().bool,hasFocus:m().bool,isEditable:m().bool,isEdited:m().bool,isEditing:m().bool,isErrorCell:m().bool,isLocked:m().bool,isRightAligned:m().bool,isShrunken:m().bool,style:m().object,tabIndex:m().oneOf(["0","-1"]),type:m().oneOf(["advanced","base","treegrid"]).isRequired,hasWrap:m().bool};var D=function(e){var t=(0,a.useContext)(w).isActionableMode,l=c()({"slds-cell-edit":e.isEditable,"slds-has-focus":e.hasFocus,"slds-tree__item":"treegrid"===e.type,"slds-is-hovered":e.isItemHovered,"slds-cell-wrap":e.hasWrap,"slds-cell_action-mode":t});return s().createElement("th",{className:l||null,"data-label":e["data-label"],scope:"row",tabIndex:e.tabIndex},e.children)};D.displayName="RowTh",D.propTypes={children:m().node,"data-label":m().string,hasFocus:m().bool,isEditable:m().bool,tabIndex:m().oneOf(["0","-1"]),type:m().oneOf(["base","advanced","treegrid"]),isItemHovered:m().bool,hasWrap:m().bool};var O=function(e){return s().createElement(s().Fragment,null,e.hasSingleRowSelect?s().createElement(E.Radio,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"radio-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"radio-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}):s().createElement(p.Checkbox,{checked:e.checked,groupId:"column-group-header",hideLabel:!0,id:"checkbox-0".concat(e.index),label:"Select item ".concat(e.index),labelId:"check-button-label-0".concat(e.index),tabIndex:e.inputTabIndex,isDataTable:!0}))};O.displayName="SelectRowCell",O.propTypes={checked:m().bool,hasSingleRowSelect:m().bool,index:m().number.isRequired,inputTabIndex:m().oneOf(["0","-1"])};var z=function(e){var t=e.rowName,l=(0,a.useContext)(w).isActionableMode;return s().createElement(b.A,{assistiveText:"More actions for ".concat(t),"aria-haspopup":"true",className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint slds-button__icon_small",symbol:"down",tabIndex:l?"0":"-1",title:"More actions for ".concat(t)})};z.displayName="RowActionsCell",z.propTypes={rowName:m().string.isRequired};var P=function(e){var t=(0,a.useContext)(w).isActionableMode;return s().createElement(s().Fragment,null,s().createElement(b.A,{"aria-hidden":e.hasError?null:"true",assistiveText:"Item ".concat(e.index," has errors"),className:c()("slds-button_icon-error slds-m-horizontal_xxx-small",{"slds-hidden":!e.hasError}),id:"error-0"+e.index,symbol:"error",tabIndex:t?"0":"-1",title:"Item ".concat(e.index," has errors")}),s().createElement("span",{className:"slds-row-number slds-text-body_small slds-text-color_weak"}))};P.displayName="ErrorCell",P.propTypes={hasError:m().bool,index:m().number.isRequired};var M=function(e){var t=e.hasWrap,l=e.cellText,n=e.cellLink,r=(0,a.useContext)(w).isActionableMode;return s().createElement("div",{className:c()(t?"slds-line-clamp":"slds-truncate"),title:l},n?s().createElement("a",{href:"#",tabIndex:r?"0":"-1",onClick:function(e){e.preventDefault()}},l):l)};M.displayName="ReadOnlyCell",M.propTypes={cellLink:m().bool,cellText:m().string.isRequired,hasWrap:m().bool};var F=function(e){var t=(0,a.useContext)(w).isActionableMode;return s().createElement(s().Fragment,null,s().createElement("span",{className:"slds-grid slds-grid_align-spread"},e.cellLink?s().createElement("a",{className:"slds-truncate",href:"#",id:"link-0".concat(e.index),tabIndex:t?"0":"-1",title:e.cellText,onClick:function(e){return e.preventDefault()}},e.cellText):s().createElement("span",{className:"slds-truncate",title:e.cellText},e.cellText),s().createElement(b.A,{assistiveText:e.buttonText,className:"slds-cell-edit__button slds-m-left_x-small",disabled:e.isLocked,iconClassName:c()("slds-button__icon_hint",{"slds-button__icon_edit":!e.isLocked,"slds-button__icon_lock slds-button__icon_small":e.isLocked}),symbol:e.isLocked?"lock":"edit",tabIndex:t?"0":"-1",title:e.buttonText})),e.showEdit&&s().createElement(q,{isRequired:e.isRequired,hasError:e.hasError}),e.isEdited&&s().createElement("span",{id:"unsaved-cell-notification",class:"slds-hide"},"Unsaved"))};F.displayName="EditableCell",F.propTypes={buttonText:m().string.isRequired,cellLink:m().bool,cellText:m().string.isRequired,hasError:(0,u.VY)("showEdit",m().bool),index:m().number,isLocked:m().bool,isRequired:(0,u.VY)("showEdit",m().bool),showEdit:m().bool};var q=function(e){return s().createElement(h.Popover,{className:"slds-popover slds-popover_edit",style:{position:"absolute",top:"0",left:"0.0625rem"}},s().createElement("div",{className:c()("slds-form-element slds-grid slds-wrap",{"slds-has-error":e.hasError})},s().createElement("label",{className:"slds-form-element__label slds-form-element__label_edit slds-no-flex",htmlFor:"company-01"},e.isRequired?s().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},"*"):null,s().createElement("span",{className:"slds-assistive-text"},"Company")),s().createElement("div",{className:"slds-form-element__control slds-grow"},s().createElement("input",{"aria-describedby":e.hasError?"error-message-01":null,className:"slds-input",defaultValue:"Acme Enterprises",id:"company-01",required:e.isRequired,type:"text"})),e.hasError?s().createElement("div",{id:"error-message-01",className:"slds-form-element__help"},"This field is required"):null))};q.displayName="EditPopover",q.propTypes={hasError:m().bool,isRequired:m().bool};var B=l(8542),W=l(302),V=l(4310),j=s().createElement("button",{className:"slds-button slds-button_neutral"},"New"),J=s().createElement(x,{isFixedLayout:!0,isBordered:!0,hasNoRowHover:!0,hasCellBuffer:!0,type:"advanced",ariaLabel:"Example table in a Card"},s().createElement(_,null,s().createElement(N,null,s().createElement(A,null,s().createElement(T,{columnName:"Name"})),s().createElement(A,null,s().createElement(T,{columnName:"Company"})),s().createElement(A,null,s().createElement(T,{columnName:"Title"})),s().createElement(A,null,s().createElement(T,{columnName:"Email"})))),s().createElement(L,null,s().createElement(I,null,s().createElement(D,null,s().createElement(M,{cellLink:!0,cellText:"Amy Choi"})),s().createElement(H,{type:"advanced"},s().createElement(M,{cellText:"Company One"})),s().createElement(H,{type:"advanced"},s().createElement(M,{cellText:"Director of Operations"})),s().createElement(H,{type:"advanced"},s().createElement(M,{cellText:"adam@company.com"}))))),U=s().createElement("ul",{className:"slds-grid slds-wrap slds-grid_pull-padded"},s().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},s().createElement(n.TileMedia,{actions:!0,className:"slds-card__tile",media:s().createElement(r.StandardIcon,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),s().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},s().createElement(n.TileMedia,{actions:!0,className:"slds-card__tile",media:s().createElement(r.StandardIcon,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"})),s().createElement("li",{className:"slds-p-horizontal_small slds-size_1-of-1 slds-medium-size_1-of-3"},s().createElement(n.TileMedia,{actions:!0,className:"slds-card__tile",media:s().createElement(r.StandardIcon,{className:"slds-icon_small",symbol:"contact",assistiveText:"Contact"}),title:"Related Record Title 1"}))),Y=function(e){return s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Contacts (1)",href:!0,symbol:"contact",action:j}),s().createElement(i.bw,null,J),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts")))},G=function(e){return s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Contacts (3)",href:!0,symbol:"contact",action:j}),s().createElement(i.bw,{hasPadding:!0},U),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts")))},K=function(e){return s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Outer Card Header",href:!0,symbol:"contact",action:j}),s().createElement(i.bw,{hasPadding:!0},s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Contacts",href:!0,symbol:"contact",action:j}),s().createElement(i.bw,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))),s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Contacts",href:!0,symbol:"contact",action:j}),s().createElement(i.bw,{hasPadding:!0},"This is a card inside an `slds-card` to show how styling is removed when cards are nested inside each other."),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))),s().createElement(i.Ay,{hasCardBoundary:!0},s().createElement(i.aR,{title:"Contacts",href:!0,symbol:"contact",action:j}),s().createElement(i.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))),s().createElement(i.Ay,{hasCardBoundary:!0},s().createElement(i.aR,{title:"Contacts",href:!0,symbol:"contact",action:j}),s().createElement(i.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts")))))},Q=function(e){return s().createElement("div",{className:"slds-card-wrapper"},s().createElement("header",null,s().createElement("h2",{className:"slds-text-heading_medium"},"Outer card wrapper header")),s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Contacts",href:!0,symbol:"contact",action:j}),s().createElement(i.bw,null,"This is a card inside an `slds-card-wrapper` to show how styling is removed when cards are nested inside."),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))),s().createElement(i.Ay,{hasCardBoundary:!0},s().createElement(i.aR,{title:"Contacts",href:!0,symbol:"contact",action:j}),s().createElement(i.bw,{hasPadding:!0},"This is a card inside an `slds-card-wrapper` to illustrate how `slds-card_boundary` adds a rounded border when desired."),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Contacts"))))},X=[{id:"default",label:"Default",element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Accounts",href:!0,symbol:"account",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(i.bw,{hasPadding:!0},"Anything can go into the card body"),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))}],Z=[{id:"empty",label:"Empty",element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Card Header",href:!0,symbol:"contact",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(i.bw,null),s().createElement(i.wL,null))},{id:"empty-illustration",label:"Empty with illustration",element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Tasks",href:!0,symbol:"task"}),s().createElement(i.bw,{hasPadding:!0},s().createElement(V.Illustration,null,s().createElement(W.hn,null),s().createElement(V.IllustrationText,{heading:"No new tasks",message:"Nothing needs your attention right now. Check back later."}))))},{id:"loading",label:"Loading",element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Tasks",href:!0,symbol:"task"}),s().createElement(i.bw,{hasPadding:!0},s().createElement(B.Spinner,{className:"slds-spinner_small"})))}],$=[{id:"related-list-table",label:"With data-table",element:s().createElement(Y,null)},{id:"related-list-tiles",label:"With tiles",element:s().createElement(G,null)},{id:"nested-cards",label:"Nested cards",element:s().createElement(K,null)},{id:"with-no-header",label:"With no header",element:s().createElement(i.Ay,null,s().createElement(i.bw,{hasPadding:!0},"Anything can go into the card body"),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"visibly-hidden-card-header",label:"Visibly hidden card header",element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Card Header",href:!0,className:"slds-assistive-text"}),s().createElement(i.bw,{hasPadding:!0},"Anything can go into the card body"),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"body-has-no-padding",label:"Body with no padding",element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Accounts",href:!0,symbol:"account"}),s().createElement(i.bw,null,"Card Body"))},{id:"body-has-padding",label:"Body with padding",element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Accounts",href:!0,symbol:"account"}),s().createElement(i.bw,{hasPadding:!0},"Card Body with Padding"))},{id:"has-no-footer",label:"No footer",element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),s().createElement(i.bw,{hasPadding:!0},"Card Body"),s().createElement(i.wL,null))},{id:"has-footer",label:"Has footer",element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Accounts",href:!0,showIcon:!0,symbol:"account"}),s().createElement(i.bw,{hasPadding:!0},"Card Body"),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-no-boundary",label:"Nested with no boundary",element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Outer Card Header",href:!0,symbol:"account"}),s().createElement(i.bw,{hasPadding:!0},s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Card Header",href:!0,symbol:"account"}),s().createElement(i.bw,{hasPadding:!0},"This is a nested card with no styling (default)"),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"nested-with-boundary",label:"Nested with boundary",element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Outer Card Header",href:!0,symbol:"account"}),s().createElement(i.bw,{hasPadding:!0},s().createElement(i.Ay,{hasCardBoundary:!0},s().createElement(i.aR,{title:"Card Header",href:!0,symbol:"account"}),s().createElement(i.bw,{hasPadding:!0},"This is a card inside an `slds-card` to illustrate how `slds-card_boundary` adds a rounded border when desired."),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"with-long-truncated-title",label:"With long truncated title",demoStyles:"max-width: 360px;",storybookStyles:!0,element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Card Header Title With Exceptionally Long Title",href:!0,symbol:"account",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(i.bw,{hasPadding:!0},"Anything can go into the card body"),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))},{id:"styling-hooks",label:"Styling Hooks",demoStyles:"\n --slds-c-card-color-background: #f3f3f3;\n --slds-c-card-radius-border: 8px;\n --slds-c-card-shadow: rgba(0,0,0,.15) 0 4px 8px, rgba(0,0,0,.05) 0 2px 4px;\n --slds-c-card-spacing-block-start: 1.5rem;\n --slds-c-card-spacing-block-end: 0.5rem;\n --slds-c-card-spacing-inline: 1rem;\n --slds-c-card-title-font-size: 1.5rem;\n --slds-c-card-header-spacing-block-start: 0;\n --slds-c-card-header-spacing-inline-start: 1.5rem;\n --slds-c-card-header-spacing-inline-end: 1.5rem;\n --slds-c-card-body-spacing-inline-start: 1.5rem;\n --slds-c-card-body-spacing-inline-end: 1.5rem;\n --slds-c-card-body-spacing-block-end: 1rem;\n --slds-c-card-footer-spacing-block-start: 0.5rem;\n --slds-c-card-footer-spacing-block-end: 0;\n --slds-c-card-footer-spacing-inline-start: 1.5rem;\n --slds-c-card-footer-spacing-inline-end: 1.5rem;\n --slds-c-card-footer-font-size: 0.75rem;\n --slds-c-card-footer-text-align: right;\n ",storybookStyles:!0,element:s().createElement(i.Ay,null,s().createElement(i.aR,{title:"Accounts",href:!0,symbol:"account",action:s().createElement("button",{className:"slds-button slds-button_neutral"},"New")}),s().createElement(i.bw,null,"Anything can go into the card body"),s().createElement(i.wL,null,"View All ",s().createElement("span",{className:"slds-assistive-text"},"Accounts")))}]},4310:function(e,t,l){l.d(t,{Illustration:function(){return u},IllustrationText:function(){return b}});var a=l(1594),s=l.n(a),n=l(942),r=l.n(n),i=l(302),o=l(3352),c=l(4042),d=l(6491),m=l(7283),u=function(e){return s().createElement("div",{className:r()("slds-illustration",e.large?"slds-illustration_large":"slds-illustration_small")},e.children)},b=function(e){return s().createElement("div",{className:"slds-text-longform"},e.heading&&s().createElement("h3",{className:"slds-text-heading_medium"},e.heading),e.message&&e.secondaryCTA&&s().createElement("p",{className:"slds-text-body_regular"},e.message," ",s().createElement("a",{href:"#",className:"slds-truncate",title:e.secondaryCTA,onClick:function(e){return e.preventDefault()}},e.secondaryCTA)),e.message&&!e.secondaryCTA&&s().createElement("p",{className:"slds-text-body_regular"},e.message))};i.ch,i.TJ,i.Le,i.hn,i.uT,o.o,o.M,c.m,c.r,d.eq,d.CL,d._2,d.Ui,d.pq,m.k5,m.II,m.R1,m.yx,m.lN,m.is,i.ch},6466:function(e,t,l){l.d(t,{TileMedia:function(){return d}});var a=l(1594),s=l.n(a),n=l(8347),r=l(6955),i=l(3589),o=l(942),c=l.n(o),d=function(e){return s().createElement("article",{className:c()("slds-tile slds-media",e.className,e.actions?"slds-hint-parent":null)},e.media?s().createElement("div",{className:"slds-media__figure"},e.media):null,s().createElement("div",{className:"slds-media__body"},e.actions?s().createElement("div",{className:"slds-grid slds-grid_align-spread slds-has-flexi-truncate"},s().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title||"Title")),s().createElement("div",{className:"slds-shrink-none"},s().createElement(r.A,{className:"slds-button_icon-border-filled slds-button_icon-x-small",iconClassName:"slds-button__icon_hint",symbol:"down","aria-haspopup":"true",assistiveText:"More options",title:"More options"}))):s().createElement("h3",{className:"slds-tile__title slds-truncate",title:e.title||"Title"},s().createElement("a",{href:"#",onClick:function(e){return e.preventDefault()}},e.title||"Title")),s().createElement("div",{className:"slds-tile__detail"},e.children?e.children:s().createElement(m,null))))},m=function(e){return s().createElement("dl",{className:"slds-list_horizontal slds-wrap"},s().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"First Label"},"First Label:"),s().createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for first label"},"Description for first label"),s().createElement("dt",{className:"slds-item_label slds-text-color_weak slds-truncate",title:"Second Label"},"Second Label:"),s().createElement("dd",{className:"slds-item_detail slds-truncate",title:"Description for second label"},"Description for second label"))};n.A;i.Checkbox,n.A,n.A,n.A}},l={};function a(e){var s=l[e];if(void 0!==s)return s.exports;var n=l[e]={exports:{}};return t[e](n,n.exports,a),n.exports}a.m=t,a.amdO={},e=[],a.O=function(t,l,s,n){if(!l){var r=1/0;for(d=0;d<e.length;d++){l=e[d][0],s=e[d][1],n=e[d][2];for(var i=!0,o=0;o<l.length;o++)(!1&n||r>=n)&&Object.keys(a.O).every(function(e){return a.O[e](l[o])})?l.splice(o--,1):(i=!1,n<r&&(r=n));if(i){e.splice(d--,1);var c=s();void 0!==c&&(t=c)}}return t}n=n||0;for(var d=e.length;d>0&&e[d-1][2]>n;d--)e[d]=e[d-1];e[d]=[l,s,n]},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,{a:t}),t},a.d=function(e,t){for(var l in t)a.o(t,l)&&!a.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:t[l]})},a.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.j=1367,function(){var e={518:0,1117:0,1252:0,1367:0,1494:0,1578:0,1974:0,2033:0,2274:0,2782:0,3140:0,4268:0,4583:0,4723:0,4924:0,6671:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0,8525:0};a.O.j=function(t){return 0===e[t]};var t=function(t,l){var s,n,r=l[0],i=l[1],o=l[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(s in i)a.o(i,s)&&(a.m[s]=i[s]);if(o)var d=o(a)}for(t&&t(l);c<r.length;c++)n=r[c],a.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return a.O(d)},l=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];l.forEach(t.bind(null,0)),l.push=t.bind(null,l.push.bind(l))}(),a.nc=void 0;var s=a.O(void 0,[6790],function(){return a(3540)});s=a.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/cards/base/example.jsx.js"]=s}();