<template>
|
<template if:true={showModal}>
|
<section
|
role="dialog"
|
tabindex="-1"
|
aria-labelledby="modal-heading-01"
|
aria-modal="true"
|
aria-describedby="modal-content-id-1"
|
class="slds-modal slds-fade-in-open"
|
>
|
<div class="slds-modal__container">
|
<header class="slds-modal__header">
|
<lightning-button-icon
|
class="slds-modal__close"
|
title="Close"
|
icon-name="utility:close"
|
icon-class="slds-button_icon-inverse"
|
onclick={handleDialogClose}
|
></lightning-button-icon>
|
|
<template if:true={hasHeaderString}>
|
<h2 class="slds-text-heading_medium slds-hyphenate header-string">
|
{header}
|
</h2>
|
</template>
|
<template if:false={hasHeaderString}>
|
<h2 class="slds-text-heading_medium slds-hyphenate header-slot">
|
<slot name="header"></slot>
|
</h2>
|
</template>
|
|
<p class="slds-m-top_x-small modal-hidden">
|
<slot name="tagline" onslotchange={handleSlotTaglineChange}></slot>
|
</p>
|
</header>
|
<div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
|
<slot></slot>
|
</div>
|
|
<footer class="slds-modal__footer modal-hidden">
|
<slot name="footer" onslotchange={handleSlotFooterChange}></slot>
|
</footer>
|
</div>
|
</section>
|
<div class="slds-backdrop slds-backdrop_open"></div>
|
</template>
|
</template>
|
