{"version":3,"sources":["../src/elements/alert.ts","../src/styles/elements/alert.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesBase } from '../styles/elements/alert';\nimport { EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\n\nexport const overlayPositions = ['fixed', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'] as const;\nexport enum EnumOverlayPositions {\n FIXED = 'fixed',\n TOP_FULL = 'top-full',\n BOTTOM_FULL = 'bottom-full',\n TOP_RIGHT = 'top-right',\n TOP_LEFT = 'top-left',\n BOTTOM_RIGHT = 'bottom-right',\n BOTTOM_LEFT = 'bottom-left'\n}\nexport type TypeOverlayPositions = typeof overlayPositions[number];\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {TypeDirection} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.\n * @prop {TypeVariants} variant - The style of the alert.\n * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.\n * @prop {boolean} filled - Determines if the alert uses the filled style.\n *\n * @slot icon - The icon of the alert.\n * @slot default - The contents of the alert.\n *\n * @event kemet-opened - Fires when alert is opened.\n * @event kemet-closed - Fires when alert is closed.\n *\n * @csspart close - Container for the close button.\n * @csspart message - Container for the alert message.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n * @cssproperty --kemet-alert-border - The border around the alert.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n static styles = [stylesBase];\n\n @property({ type: Boolean, reflect: true })\n opened: boolean;\n\n @property({ type: Boolean, reflect: true })\n reveal: boolean;\n\n @property({ type: Boolean, reflect: true })\n closable: boolean;\n\n @property({ type: String, reflect: true })\n status: TypeStatus = EnumStatuses.Standard;\n\n @property({ type: String, reflect: true, attribute: 'border-status' })\n borderStatus: string;\n\n @property({ type: Boolean, reflect: true })\n hidden: boolean;\n\n @property({ type: String, reflect: true })\n overlay: string;\n\n @property({ type: String, reflect: true })\n rounded: TypeRoundedSizes;\n\n @property({ type: Boolean, reflect: true })\n filled: boolean;\n\n shouldUpdate(prevProps: Map) {\n if (prevProps.has('opened') && !prevProps.get('opened')) {\n this.hidden = false;\n this.reveal = true;\n }\n\n return true;\n }\n\n firstUpdated() {\n this.handleMotion();\n }\n\n updated(prevProps: Map) {\n if (!prevProps.get('opened') && this.opened === true) {\n emitEvent(this, 'kemet-opened', this);\n } else {\n emitEvent(this, 'kemet-closed', this);\n }\n }\n\n render() {\n return html`\n \n
\n \n
\n
\n ${this.makeCloseBtn()}\n
\n `;\n }\n\n makeCloseBtn() {\n if (this.closable) {\n return html` { this.opened = false; }}>`;\n }\n\n return null;\n }\n\n handleMotion() {\n this.addEventListener('transitionend', () => {\n if (!this.opened) {\n this.hidden = true;\n }\n });\n\n this.addEventListener('animationend', () => {\n this.reveal = false;\n });\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-alert': KemetAlert\n }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n :host {\n --kemet-alert-padding: 1rem;\n --kemet-alert-border-thickness: 4px;\n --kemet-alert-status-color: inherit;\n --kemet-alert-align-items: center;\n --kemet-alert-border: 1px solid rgb(var(--kemet-alert-status-color));\n --kemet-alert-radius: 0;\n --kemet-alert-color: inherit;\n --kemet-alert-background-color: transparent;\n\n color: var(--kemet-alert-color);\n display: flex;\n grid-template-columns: auto 1fr auto;\n gap: var(--kemet-alert-padding);\n align-items: var(--kemet-alert-align-items);\n opacity: 0;\n padding: var(--kemet-alert-padding);\n border: var(--kemet-alert-border);\n transition: opacity 300ms ease;\n border-radius: var(--kemet-alert-radius);\n background-color: var(--kemet-alert-background-color);\n }\n\n :host([opened]) {\n opacity: 1;\n }\n\n :host([filled]) {\n --kemet-alert-border: 2px solid rgb(var(--kemet-color-white));\n --kemet-alert-color: rgb(var(--kemet-color-white));\n --kemet-alert-background-color: rgb(var(--kemet-alert-status-color));\n }\n\n :host([filled][status=standard]) {\n --kemet-alert-color: rgb(var(--kemet-color-background));\n }\n\n :host([border-status=\"top\"]) {\n border-top: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n }\n\n :host([border-status=\"right\"]) {\n border-right: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n }\n\n :host([border-status=\"bottom\"]) {\n border-bottom: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n }\n\n :host([border-status=\"left\"]) {\n border-left: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n }\n\n :host([status=\"standard\"]) {\n --kemet-alert-status-color: var(--kemet-color-text);\n }\n\n :host([status=\"primary\"]) {\n --kemet-alert-status-color: var(--kemet-color-primary);\n }\n\n :host([status=\"success\"]) {\n --kemet-alert-status-color: var(--kemet-color-success);\n }\n\n :host([status=\"warning\"]) {\n --kemet-alert-status-color: var(--kemet-color-warning);\n }\n\n :host([status=\"error\"]) {\n --kemet-alert-status-color: var(--kemet-color-error);\n }\n\n :host([hidden]) {\n display: none;\n }\n\n :host([reveal]) {\n animation: fadeIn 300ms ease forwards;\n }\n\n :host([overlay]) {\n position: fixed;\n }\n\n :host([overlay*=\"full\"]) {\n width: 100%;\n }\n\n :host([overlay*=\"top\"]) {\n top: 0;\n }\n\n :host([overlay*=\"bottom\"]) {\n bottom: 0;\n }\n\n :host([overlay*=\"left\"]) {\n left: 0;\n }\n\n :host([overlay*=\"right\"]) {\n right: 0;\n }\n\n :host([rounded]) {\n --kemet-alert-radius: var(--kemet-border-radius-md);\n }\n\n :host([rounded=\"sm\"]) {\n --kemet-alert-radius: var(--kemet-border-radius-sm);\n }\n\n :host([rounded=\"md\"]) {\n --kemet-alert-radius: var(--kemet-border-radius-md);\n }\n\n :host([rounded=\"lg\"]) {\n --kemet-alert-radius: var(--kemet-border-radius-lg);\n }\n\n :host([rounded=\"xl\"]) {\n --kemet-alert-radius: var(--kemet-border-radius-xl);\n }\n\n :host([rounded=\"circle\"]) {\n --kemet-alert-radius: var(--kemet-border-radius-circle);\n }\n\n :host([rounded=\"pill\"]) {\n --kemet-alert-radius: var(--kemet-border-radius-pill);\n }\n\n [part=message] {\n display: flex;\n gap: 0.75rem;\n align-items: center;\n }\n\n .close {\n cursor: pointer;\n margin-left: auto;\n }\n\n :host(:not([filled])) ::slotted(kemet-icon-bootstrap) {\n color: rgb(var(--kemet-alert-status-color));\n }\n\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n`;\n"],"mappings":"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","names":["EnumOverlayPositions"]}