fonteva-design-guide
Version:
## Dev, Build and Test
72 lines (70 loc) • 3.22 kB
HTML
<template>
<div role="dialog" data-name="pfm-drawer" class={classes} style="display: none;">
<div class="slds-modal__container">
<header class="slds-modal__header pfm-drawer__header">
<div class="pfm-drawer__header-content">
<template if:true={hasCustomHeader}>
<slot name="header"></slot>
</template>
<template if:true={hasTitle}>
<c-pfm-text type="heading" size="medium" weight="bold" align="left">
<slot name="title"></slot>
</c-pfm-text>
</template>
<template if:false={hasTitle}>
</template>
<div class="pfm-drawer_actions">
<template if:true={hasCustomActions}>
<div class="slds-border_right slds-m-right_large slds-p-horizontal_large">
<slot name="actions"></slot>
</div>
</template>
<c-pfm-button
type="link"
icon="utility:close"
icon-size="x-small"
aria-label={closeLabel}
data-name="closeButtonDrawerX"
onclick={closeHandler}
disable-loader
></c-pfm-button>
</div>
</div>
<template if:true={hasTag}>
<div class="pfm-drawer_header-tag">
<slot name="tag"></slot>
</div>
</template>
</header>
<div class={contentClasses}>
<slot name="content"> </slot>
</div>
<footer class="slds-modal__footer">
<template if:true={hasFooter}>
<slot name="footer"></slot>
</template>
<template if:false={hasFooter}>
<c-pfm-button
type="outline"
name="closeButtonDrawer"
onsubmit={closeHandler}
data-name="closeButtonDrawer"
label={closeLabel}
additional-classes={additionalCloseClasses}
></c-pfm-button>
<c-pfm-button
type="default"
name="saveButtonDrawer"
onsubmit={saveHandler}
data-name="saveButtonDrawer"
label={saveLabel}
additional-classes={additionalSaveClasses}
></c-pfm-button>
</template>
</footer>
<c-pfm-loader identifier="drawerLoader" size="medium"></c-pfm-loader>
</div>
</div>
<div class={bdClasses} onclick={closeHandler} data-name="pfmBackdrop"></div>
</template>