@tmorrow/cre8-wc 1.2.4 → 1.2.5

package/lib/components/modal/modal.js

@@ -1,901 +1,193 @@
-import { css as m, html as i } from "lit";
-import { query as p, property as a } from "lit/decorators.js";
-import { Cre8Element as g } from "../cre8-element.js";
-import "../icon/icon.js";
-import "@a11y/focus-trap";
-const h = m`.cre8-u-content-knockout-brand {
-  color: var(----cre8-color-content-knockout-brand);
-}
-
-.cre8-u-is-hidden {
-  display: none !important;
-  visibility: hidden !important;
-}
-
-.cre8-u-is-vishidden {
-  position: absolute !important;
-  overflow: hidden;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-}
-
-@media all and (min-width: 23.4375rem) {
-  .cre8-u-hide-sm {
-    display: none !important;
-  }
-}
-@media all and (min-width: 35rem) {
-  .cre8-u-hide-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (min-width: 48rem) {
-  .cre8-u-hide-md {
-    display: none !important;
-  }
-}
-@media all and (min-width: 60rem) {
-  .cre8-u-hide-lg {
-    display: none !important;
-  }
-}
-@media all and (min-width: 75rem) {
-  .cre8-u-hide-xl {
-    display: none !important;
-  }
-}
-@media all and (max-width: 23.4375rem) {
-  .cre8-u-show-sm {
-    display: none !important;
-  }
-}
-@media all and (max-width: 35rem) {
-  .cre8-u-show-sm-2 {
-    display: none !important;
-  }
-}
-@media all and (max-width: 48rem) {
-  .cre8-u-show-md {
-    display: none !important;
-  }
-}
-@media all and (max-width: 60rem) {
-  .cre8-u-show-lg {
-    display: none !important;
-  }
-}
-@media all and (max-width: 75rem) {
-  .cre8-u-show-xl {
-    display: none !important;
-  }
-}
-.cre8-u-margin-none {
-  margin: 0 !important;
-}
-
-.cre8-u-margin-sm {
-  margin: size(1) !important;
-}
-
-.cre8-u-margin-md {
-  margin: size(2) !important;
-}
-
-.cre8-u-margin-lg {
-  margin: size(3) !important;
-}
-
-.cre8-u-margin-xl {
-  margin: size(4) !important;
-}
-
-.cre8-u-margin-xxl {
-  margin: size(8) !important;
-}
-
-.cre8-u-margin-top-none {
-  margin-top: 0 !important;
-}
-
-.cre8-u-margin-top-sm {
-  margin-top: size(1) !important;
-}
-
-.cre8-u-margin-top-md {
-  margin-top: size(2) !important;
-}
-
-.cre8-u-margin-top-lg {
-  margin-top: size(3) !important;
-}
-
-.cre8-u-margin-top-xl {
-  margin-top: size(4) !important;
-}
-
-.cre8-u-margin-top-xxl {
-  margin-top: size(8) !important;
-}
-
-.cre8-u-margin-right-none {
-  margin-right: 0 !important;
-}
-
-.cre8-u-margin-right-sm {
-  margin-right: size(1) !important;
-}
-
-.cre8-u-margin-right-md {
-  margin-right: size(2) !important;
-}
-
-.cre8-u-margin-right-lg {
-  margin-right: size(3) !important;
-}
-
-.cre8-u-margin-right-xl {
-  margin-right: size(4) !important;
-}
-
-.cre8-u-margin-right-xxl {
-  margin-right: size(8) !important;
-}
-
-.cre8-u-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-
-.cre8-u-margin-bottom-sm {
-  margin-bottom: size(1) !important;
-}
-
-.cre8-u-margin-bottom-md {
-  margin-bottom: size(2) !important;
-}
-
-.cre8-u-margin-bottom-lg {
-  margin-bottom: size(3) !important;
-}
-
-.cre8-u-margin-bottom-xl {
-  margin-bottom: size(4) !important;
-}
-
-.cre8-u-margin-bottom-xxl {
-  margin-bottom: size(8) !important;
-}
-
-.cre8-u-margin-bottom-xl-xxl {
-  margin-bottom: size(4) !important;
-}
-
-@media all and (min-width: 768px) {
-  .cre8-u-margin-bottom-xl-xxl {
-    margin-bottom: size(8) !important;
-  }
-}
-.cre8-u-margin-left-none {
-  margin-left: 0 !important;
-}
-
-.cre8-u-margin-left-sm {
-  margin-left: size(1) !important;
-}
-
-.cre8-u-margin-left-md {
-  margin-left: size(2) !important;
-}
-
-.cre8-u-margin-left-lg {
-  margin-left: size(3) !important;
-}
-
-.cre8-u-margin-left-xl {
-  margin-left: size(4) !important;
-}
-
-.cre8-u-margin-left-xxl {
-  margin-left: size(8) !important;
-}
-
-.cre8-u-padding-none {
-  padding: 0 !important;
-}
-
-.cre8-u-padding-sm {
-  padding: size(1) !important;
-}
-
-.cre8-u-padding-md {
-  padding: size(2) !important;
-}
-
-.cre8-u-padding-lg {
-  padding: size(3) !important;
-}
-
-.cre8-u-padding-xl {
-  padding: size(4) !important;
-}
-
-.cre8-u-padding-xxl {
-  padding: size(8) !important;
-}
-
-.cre8-u-padding-top-none {
-  padding-top: 0 !important;
-}
-
-.cre8-u-padding-top-sm {
-  padding-top: size(1) !important;
-}
-
-.cre8-u-padding-top-md {
-  padding-top: size(2) !important;
-}
-
-.cre8-u-padding-top-lg {
-  padding-top: size(3) !important;
-}
-
-.cre8-u-padding-top-xl {
-  padding-top: size(4) !important;
-}
-
-.cre8-u-padding-top-xxl {
-  padding-top: size(8) !important;
-}
-
-.cre8-u-padding-right-none {
-  padding-right: 0 !important;
-}
-
-.cre8-u-padding-right-sm {
-  padding-right: size(1) !important;
-}
-
-.cre8-u-padding-right-md {
-  padding-right: size(2) !important;
-}
-
-.cre8-u-padding-right-lg {
-  padding-right: size(3) !important;
-}
-
-.cre8-u-padding-right-xl {
-  padding-right: size(4) !important;
-}
-
-.cre8-u-padding-right-xxl {
-  padding-right: size(8) !important;
-}
-
-.cre8-u-padding-bottom-none {
-  padding-bottom: 0 !important;
-}
-
-.cre8-u-padding-bottom-sm {
-  padding-bottom: size(1) !important;
-}
-
-.cre8-u-padding-bottom-md {
-  padding-bottom: size(2) !important;
-}
-
-.cre8-u-padding-bottom-lg {
-  padding-bottom: size(3) !important;
-}
-
-.cre8-u-padding-bottom-xl {
-  padding-bottom: size(4) !important;
-}
-
-.cre8-u-padding-bottom-xxl {
-  padding-bottom: size(8) !important;
-}
-
-.cre8-u-padding-left-none {
-  padding-left: 0 !important;
-}
-
-.cre8-u-padding-left-sm {
-  padding-left: size(1) !important;
-}
-
-.cre8-u-padding-left-md {
-  padding-left: size(2) !important;
-}
-
-.cre8-u-padding-left-lg {
-  padding-left: size(3) !important;
-}
-
-.cre8-u-padding-left-xl {
-  padding-left: size(4) !important;
-}
-
-.cre8-u-padding-left-xxl {
-  padding-left: size(8) !important;
-}
-
-.cre8-u-display-flex {
-  display: flex !important;
-}
-
-.cre8-u-display-block {
-  display: block !important;
-}
-
-body {
-  font-family: var(--cre8-typography-body-default-font-family);
-  font-size: var(--cre8-typography-body-default-font-size);
-  font-weight: var(--cre8-typography-body-default-font-weight);
-  line-height: var(--cre8-typography-body-default-line-height);
-  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-decoration: var(--cre8-typography-body-default-text-decoration);
-  text-transform: var(--cre8-typography-body-default-text-transform);
-  display: flex;
-  flex-direction: column;
-  padding: 0;
-  margin: 0;
-  color: var(--cre8-color-content-default);
-  background: var(--background-default);
-}
-
-@media all and (min-width: 60rem) {
-  .page-container {
-    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
-  }
-}
-.band__inner {
-  margin-left: 2rem;
-  margin-right: 2rem;
-}
-
-@media all and (min-width: 60rem) {
-  .band__inner {
-    margin-right: 0;
-  }
-}
-img {
-  max-width: 100%;
-  height: auto;
-}
-
-/**
- * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
- */
-*,
-::slotted(*),
-*:before,
-*:after {
-  box-sizing: border-box;
-}
-
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*
-=======
-Animations
-=======
-*/
-:host {
-  --cre8-z-index-1: 1;
-  --cre8-z-index-50: 50;
-  --cre8-z-index-100: 100;
-  --cre8-z-index-200: 200;
-  --cre8-z-index-1030: 1030;
-  --cre8-anim-fade-quick: 0.35s;
-  --cre8-anim-ease: ease;
-}
-
-@keyframes fadeIn {
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes slideIn {
-  100% {
-    transform: translateX(0);
-  }
-}
-@keyframes slideInFwd {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideOutRight {
-  100% {
-    width: 272px;
-    height: 272px;
-  }
-}
-@keyframes slideUp {
-  100% {
-    transform: translateY(0);
-  }
-}
-@media (width >= 481px) {
-  @keyframes slideInFwd {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 417px;
-      height: 417px;
-    }
-  }
-}
-@media (width >= 48rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 330px;
-      height: 330px;
-    }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 330px;
-      height: 330px;
-      transform: translateX(calc(100vw - 45px));
-    }
-  }
-}
-@media (width >= 60rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 460px;
-      height: 460px;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import svgError from '@tmorrow/cre8-wc/icons/System/Regular/Error.svg?raw';
+import svgWarningFilled from '@tmorrow/cre8-wc/icons/System/Filled/Warning.svg?raw';
+import svgCheckCircle from '@tmorrow/cre8-wc/icons/System/Filled/Check.svg?raw';
+import svgInfoFilled from '@tmorrow/cre8-wc/icons/System/Filled/Info.svg?raw';
+import svgHelp from '@tmorrow/cre8-wc/icons/System/Regular/Help.svg?raw';
+import svgClose from '@tmorrow/cre8-wc/icons/System/Regular/Close.svg?raw';
+import { Cre8Element } from '../cre8-element';
+import '../icon/icon.js';
+import '@a11y/focus-trap';
+import styles from './modal.styles.js';
+/**
+ * Modal component should be used in all modal situations.
+ * It is natuarally composable and can even have a custom header and remove the close button.
+ * (note: adding `slot="header"` will insert the given element into the header section of the modal,
+ * same for `slot="footer"` and no given slot name will inset it into the body)
+ *
+ * If it is desired to create a utility modal. Cre8Modal requires a status value (see props table below,
+ * and a UtilityModalTitle since all utility modals have a cre8-heading)
+ * @slot - The component content
+ */
+export class Cre8Modal extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Close Button Text
+         */
+        this.closeButtonText = 'close';
+        /**
+         * Close Button Icon
+         */
+        this.closeButtonIcon = 'close';
+        /*
+        * Maps modal icons and modal status variants to what the alt text of the related icon should be
+        * see: (https://digital.#.com/patterns-and-Components/informational-display/alerts-and-notifications#query=alerts)
+        * this provides the recommendated alt text of different statuses
+        */
+        this.mapStatusToIconModal = (status) => {
+            switch (status) {
+                case 'error':
+                    return html `<cre8-icon class="cre8-modal-icon" svg=${svgError} aria-hidden='true'></cre8-icon>`;
+                case 'success':
+                    return html `<cre8-icon class="cre8-modal-icon" svg=${svgCheckCircle} aria-hidden='true'></cre8-icon>`;
+                case 'warning':
+                    return html `<cre8-icon class="cre8-modal-icon" svg=${svgWarningFilled} aria-hidden='true'></cre8-icon>`;
+                case 'help':
+                    return html `<cre8-icon class="cre8-modal-icon" svg=${svgHelp} aria-hidden='true'></cre8-icon>`;
+                case 'info':
+                    return html `<cre8-icon class="cre8-modal-icon" svg=${svgInfoFilled} aria-hidden='true'></cre8-icon>`;
+                default:
+                    return null;
+            }
+        };
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 460px;
-      height: 460px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * Handle keydown
+     * 1) Close the modal when escape is hit when the user is focused within the modal
+     */
+    handleKeydown(e) {
+        if (e.code === 'Escape' && !this.notDismissible) {
+            this.handleCloseModal(); /* 2 */
+        }
     }
-  }
-}
-@media (width >= 75rem) {
-  @keyframes slideInFwd {
-    100% {
-      width: 592px;
-      height: 591px;
+    /**
+     * Handle on close
+     * 1) On close, set the modal to not active and dispatch event telling the parent the modal was closed.
+     */
+    handleCloseModal() {
+        this.isActive = false;
+        this.dispatch({
+            eventName: 'close-modal',
+            detailObj: {
+                isActive: this.isActive,
+            },
+        });
     }
-  }
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 45px));
+    /**
+     * Handle "click outside"
+     * 1) onClick of the area around the modal window, close the modal.
+     */
+    handleOnClickOutside(e) {
+        const eventTarget = e.target;
+        if (this.isActive && this._modalWindow && eventTarget.classList.contains('cre8-c-modal') && !this.notDismissible) {
+            this.handleCloseModal();
+        }
     }
-  }
-}
-@media (width >= 87.5rem) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 120px));
+    /**
+     * Lifecycle method to focus on modal
+     * 1) If there is a changed property, and this.isActive === true, then focus on the modal window.
+     * 2) Disable the body from scrolling behind while the modal is open.
+     */
+    updated(changedProperties) {
+        if (this.isActive === true) {
+            setTimeout(() => {
+                this._modalWindow.focus();
+            }, 200);
+        } /* 1 */
+        if (changedProperties.has('isActive')) {
+            const body = document.querySelector('body');
+            if (this.isActive) {
+                body.style.overflow = 'hidden';
+            }
+            else {
+                body.style.removeProperty('overflow');
+            }
+        } /* 2 */
     }
-  }
-}
-@media (width >= 2200px) {
-  @keyframes slideOutRight {
-    100% {
-      width: 592px;
-      height: 591px;
-      transform: translateX(calc(100vw - 592px));
-    }
-  }
-}
-span.ripple {
-  position: absolute;
-  border-radius: 50%;
-  transform: scale(0);
-  animation: ripple 600ms linear;
-  background-color: var(--ripple-bg-color);
-}
-
-@keyframes ripple {
-  to {
-    transform: scale(4);
-    opacity: 1;
-  }
-}
-:root {
-  --size-base-unit: 0.5rem;
-}
-
-/**
- * RTL support for values logical properties can't automatically adjust for
- * 1) Percentage based horizontal translate values need to be flipped
- * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
- * 3) Inverse items that have 45degs
- */
-[dir=rtl] {
-  --rtlTranslateX: 50%;
-  /* 1 */
-  --rtlGradientToRight: 270deg;
-  /* 2 */
-  --rtlRotate45Inverse: -45deg;
-  /* 3 */
-}
-
-/**
- * Visible focus outline for elements on a light background
- */
-/**
- * Visible focus outline for elements with an error status
- */
-/**
- * Visible focus outline for elements on a dark background
- */
-/**
-* Focus state for themes that need a dashed outline for focus
-* state
-**/
-/**
- * Invisible focus outline for elements that need a more visible
- * focus state for high-contrast mode
- */
-/**
- * Visually hidden from display
- */
-/*------------------------------------*\\
- #MODAL
-\\*------------------------------------*/
-:host {
-  display: block;
-}
-
-/**
- * 1) Modal Composable Component
- */
-.cre8-c-modal {
-  position: fixed;
-  height: 100vh;
-  width: 100vw;
-  top: 0;
-  left: 0;
-  display: none;
-  justify-content: center;
-  align-items: center;
-  background: rgba(0, 0, 0, 0.25);
-  z-index: 1000;
-}
-
-.cre8-c-modal.cre8-is-active {
-  display: flex;
-  visibility: visible;
-  opacity: 1;
-}
-
-/**
- * Modal Focus Trap for Window (keeps focus in modal until closed)
- */
-.cre8-c-modal__focus-trap {
-  display: contents;
-}
-
-/**
- * Modal Window
- */
-.cre8-c-modal__window {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  position: fixed;
-  background: var(--cre8-color-bg-default);
-  width: 34rem;
-  max-width: 100%;
-  border-radius: var(--cre8-border-radius-container);
-  overflow: hidden;
-  overflow-y: auto;
-  /**
-   * Modal Window for mobile user screen widths
-   */
-}
-@media all and (max-width: 768px) {
-  .cre8-c-modal__window {
-    position: inherit;
-    height: 100%;
-    width: 100%;
-  }
-}
-.cre8-c-modal__window:focus-visible {
-  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);
-  outline-offset: 0.125rem;
-}
-
-/**
- * Modal Window Header
- */
-.cre8-c-modal__header {
-  display: flex;
-  padding: 2rem 3rem 1rem;
-  align-items: center;
-  /**
-   * Modal Header with Error state
-   * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon
-   */
-}
-.cre8-c-modal--error .cre8-c-modal__header .cre8-modal-icon {
-  color: var(--cre8-color-content-error-icon);
-  /* 1 */
-}
-.cre8-c-modal__header {
-  /**
-   * Modal Header with Warning state
-   * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon
-   */
-}
-.cre8-c-modal--warning .cre8-c-modal__header .cre8-modal-icon {
-  color: var(--cre8-color-content-warning-icon);
-  /* 1 */
-}
-.cre8-c-modal__header {
-  /**
-   * Modal Header with Success state
-   * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon
-   */
-}
-.cre8-c-modal--success .cre8-c-modal__header .cre8-modal-icon {
-  color: var(--cre8-color-content-success-icon);
-  /* 1 */
-}
-.cre8-c-modal__header {
-  /**
-   * Modal Header with Info or Help State
-   * 1) Icon fill prop is a custom property of cre8-icon-legacy that apply the color as a fill to the whole icon
-   */
-}
-.cre8-c-modal--info .cre8-c-modal__header .cre8-modal-icon, .cre8-c-modal--help .cre8-c-modal__header .cre8-modal-icon {
-  color: var(--cre8-color-content-info-icon);
-  /* 1 */
-}
-
-/**
- * Modal Heading
- */
-.cre8-c-modal__header-inner {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-}
-.cre8-c-modal__header-inner cre8-icon .cre8-modal-icon {
-  height: 2rem;
-  width: 2rem;
-}
-
-/**
- * Modal Window Body
- */
-.cre8-c-modal__body {
-  max-height: 240px;
-  overflow: auto;
-  padding: 0 3rem;
-  /**
-   * Modal Window Body for mobile user screen widths
-   */
-}
-@media all and (max-width: 768px) {
-  .cre8-c-modal__body {
-    height: 100%;
-    max-height: max-content;
-  }
-}
-
-/**
- * Modal Window Footer
- */
-.cre8-c-modal__footer {
-  padding: 1.5rem 3rem calc(100vh - 95dvh);
-}
-
-/**
- * Modal Window Close button
- */
-.cre8-c-modal__close-button {
-  margin-left: auto;
-}`;
-var u = Object.defineProperty, r = (l, e, o, b) => {
-  for (var n = void 0, d = l.length - 1, c; d >= 0; d--)
-    (c = l[d]) && (n = c(e, o, n) || n);
-  return n && u(e, o, n), n;
-};
-const C = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM8 14.7692C6.66117 14.7692 5.35241 14.3722 4.23922 13.6284C3.12603 12.8846 2.2584 11.8274 1.74605 10.5905C1.2337 9.35356 1.09965 7.99249 1.36084 6.67939C1.62203 5.36629 2.26674 4.16012 3.21343 3.21343C4.16013 2.26674 5.36629 1.62203 6.67939 1.36084C7.99249 1.09965 9.35356 1.2337 10.5905 1.74605C11.8274 2.25839 12.8846 3.12602 13.6284 4.23922C14.3722 5.35241 14.7692 6.66117 14.7692 8C14.7672 9.79468 14.0534 11.5153 12.7843 12.7843C11.5153 14.0534 9.79469 14.7672 8 14.7692ZM7.38462 8.61538V4.30769C7.38462 4.14448 7.44945 3.98796 7.56486 3.87255C7.68027 3.75714 7.83679 3.69231 8 3.69231C8.16321 3.69231 8.31974 3.75714 8.43514 3.87255C8.55055 3.98796 8.61539 4.14448 8.61539 4.30769V8.61538C8.61539 8.77859 8.55055 8.93512 8.43514 9.05053C8.31974 9.16593 8.16321 9.23077 8 9.23077C7.83679 9.23077 7.68027 9.16593 7.56486 9.05053C7.44945 8.93512 7.38462 8.77859 7.38462 8.61538ZM8.92308 11.3846C8.92308 11.5672 8.86894 11.7456 8.76751 11.8974C8.66608 12.0492 8.52192 12.1676 8.35325 12.2374C8.18458 12.3073 7.99898 12.3256 7.81992 12.29C7.64086 12.2543 7.47638 12.1664 7.34729 12.0373C7.21819 11.9082 7.13028 11.7438 7.09466 11.5647C7.05904 11.3856 7.07732 11.2 7.14719 11.0314C7.21706 10.8627 7.33537 10.7185 7.48717 10.6171C7.63897 10.5157 7.81743 10.4615 8 10.4615C8.24482 10.4615 8.4796 10.5588 8.65271 10.7319C8.82583 10.905 8.92308 11.1398 8.92308 11.3846Z"/>
-</svg>
-`, f = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7714 12.5776L9.52528 1.73028C9.36919 1.46453 9.14637 1.24418 8.87889 1.09107C8.61141 0.937966 8.30856 0.857422 8.00036 0.857422C7.69216 0.857422 7.38931 0.937966 7.12182 1.09107C6.85434 1.24418 6.63152 1.46453 6.47543 1.73028L0.229326 12.5776C0.079145 12.8346 0 13.127 0 13.4247C0 13.7224 0.079145 14.0147 0.229326 14.2718C0.383411 14.5391 0.605857 14.7607 0.873837 14.9137C1.14182 15.0667 1.44568 15.1457 1.75425 15.1425H14.2465C14.5548 15.1454 14.8584 15.0663 15.1261 14.9133C15.3938 14.7603 15.616 14.5389 15.77 14.2718C15.9204 14.0149 15.9997 13.7226 16 13.4249C16.0002 13.1272 15.9214 12.8348 15.7714 12.5776ZM7.42896 6.57146C7.42896 6.41992 7.48916 6.27458 7.59632 6.16742C7.70347 6.06026 7.84881 6.00006 8.00036 6.00006C8.1519 6.00006 8.29724 6.06026 8.4044 6.16742C8.51155 6.27458 8.57176 6.41992 8.57176 6.57146V9.42846C8.57176 9.58 8.51155 9.72534 8.4044 9.8325C8.29724 9.93966 8.1519 9.99986 8.00036 9.99986C7.84881 9.99986 7.70347 9.93966 7.59632 9.8325C7.48916 9.72534 7.42896 9.58 7.42896 9.42846V6.57146ZM8.00036 12.8569C7.83084 12.8569 7.66513 12.8066 7.52418 12.7124C7.38323 12.6182 7.27337 12.4844 7.2085 12.3278C7.14363 12.1711 7.12665 11.9988 7.15973 11.8325C7.1928 11.6663 7.27443 11.5136 7.3943 11.3937C7.51416 11.2738 7.66688 11.1922 7.83314 11.1591C7.9994 11.1261 8.17174 11.143 8.32835 11.2079C8.48497 11.2728 8.61883 11.3826 8.71301 11.5236C8.80719 11.6645 8.85746 11.8302 8.85746 11.9998C8.85746 12.2271 8.76715 12.4451 8.60642 12.6058C8.44568 12.7666 8.22767 12.8569 8.00036 12.8569Z"/>
-</svg>
-`, w = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM11.5123 6.58923L7.20462 10.8969C7.14746 10.9541 7.07959 10.9995 7.00489 11.0305C6.93018 11.0615 6.8501 11.0774 6.76923 11.0774C6.68836 11.0774 6.60828 11.0615 6.53358 11.0305C6.45887 10.9995 6.391 10.9541 6.33385 10.8969L4.48769 9.05077C4.37222 8.9353 4.30735 8.77868 4.30735 8.61538C4.30735 8.45208 4.37222 8.29547 4.48769 8.18C4.60317 8.06453 4.75978 7.99966 4.92308 7.99966C5.08638 7.99966 5.24299 8.06453 5.35846 8.18L6.76923 9.59154L10.6415 5.71846C10.6987 5.66128 10.7666 5.61593 10.8413 5.58499C10.916 5.55404 10.9961 5.53812 11.0769 5.53812C11.1578 5.53812 11.2378 5.55404 11.3126 5.58499C11.3873 5.61593 11.4551 5.66128 11.5123 5.71846C11.5695 5.77564 11.6148 5.84351 11.6458 5.91822C11.6767 5.99292 11.6927 6.07299 11.6927 6.15384C11.6927 6.2347 11.6767 6.31477 11.6458 6.38947C11.6148 6.46418 11.5695 6.53205 11.5123 6.58923Z"/>
-</svg>
-`, x = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8 0C6.41775 0 4.87103 0.469192 3.55544 1.34824C2.23985 2.22729 1.21447 3.47672 0.608967 4.93853C0.00346628 6.40034 -0.15496 8.00887 0.153721 9.56072C0.462403 11.1126 1.22433 12.538 2.34315 13.6569C3.46197 14.7757 4.88743 15.5376 6.43928 15.8463C7.99113 16.155 9.59966 15.9965 11.0615 15.391C12.5233 14.7855 13.7727 13.7602 14.6518 12.4446C15.5308 11.129 16 9.58225 16 8C15.9978 5.87895 15.1542 3.84542 13.6544 2.34562C12.1546 0.845814 10.121 0.00223986 8 0ZM7.69231 3.69231C7.87488 3.69231 8.05334 3.74644 8.20514 3.84787C8.35694 3.9493 8.47526 4.09347 8.54512 4.26214C8.61499 4.43081 8.63327 4.61641 8.59765 4.79547C8.56203 4.97453 8.47412 5.139 8.34502 5.2681C8.21593 5.39719 8.05145 5.48511 7.87239 5.52072C7.69333 5.55634 7.50773 5.53806 7.33906 5.46819C7.17039 5.39833 7.02623 5.28002 6.9248 5.12822C6.82337 4.97642 6.76923 4.79795 6.76923 4.61538C6.76923 4.37057 6.86649 4.13578 7.0396 3.96267C7.21271 3.78956 7.44749 3.69231 7.69231 3.69231ZM8.61539 12.3077C8.28897 12.3077 7.97591 12.178 7.7451 11.9472C7.51429 11.7164 7.38462 11.4033 7.38462 11.0769V8C7.22141 8 7.06488 7.93516 6.94947 7.81976C6.83407 7.70435 6.76923 7.54782 6.76923 7.38461C6.76923 7.2214 6.83407 7.06488 6.94947 6.94947C7.06488 6.83406 7.22141 6.76923 7.38462 6.76923C7.71104 6.76923 8.02409 6.8989 8.2549 7.12971C8.48572 7.36053 8.61539 7.67358 8.61539 8V11.0769C8.7786 11.0769 8.93512 11.1418 9.05053 11.2572C9.16594 11.3726 9.23077 11.5291 9.23077 11.6923C9.23077 11.8555 9.16594 12.012 9.05053 12.1274C8.93512 12.2429 8.7786 12.3077 8.61539 12.3077Z"/>
-</svg>
-`, v = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.92308 12C8.92308 12.1826 8.86894 12.361 8.76751 12.5128C8.66608 12.6646 8.52192 12.7829 8.35325 12.8528C8.18458 12.9227 7.99898 12.941 7.81992 12.9053C7.64086 12.8697 7.47638 12.7818 7.34729 12.6527C7.21819 12.5236 7.13028 12.3591 7.09466 12.1801C7.05904 12.001 7.07732 11.8154 7.14719 11.6468C7.21706 11.4781 7.33537 11.3339 7.48717 11.2325C7.63897 11.1311 7.81743 11.0769 8 11.0769C8.24482 11.0769 8.4796 11.1742 8.65271 11.3473C8.82583 11.5204 8.92308 11.7552 8.92308 12ZM8 3.69231C6.30308 3.69231 4.92308 4.93461 4.92308 6.46154V6.76923C4.92308 6.93244 4.98791 7.08896 5.10332 7.20437C5.21873 7.31978 5.37525 7.38461 5.53846 7.38461C5.70167 7.38461 5.8582 7.31978 5.97361 7.20437C6.08901 7.08896 6.15385 6.93244 6.15385 6.76923V6.46154C6.15385 5.61538 6.98231 4.92308 8 4.92308C9.01769 4.92308 9.84616 5.61538 9.84616 6.46154C9.84616 7.30769 9.01769 8 8 8C7.83679 8 7.68027 8.06483 7.56486 8.18024C7.44945 8.29565 7.38462 8.45217 7.38462 8.61538V9.23077C7.38462 9.39398 7.44945 9.5505 7.56486 9.66591C7.68027 9.78132 7.83679 9.84615 8 9.84615C8.16321 9.84615 8.31974 9.78132 8.43514 9.66591C8.55055 9.5505 8.61539 9.39398 8.61539 9.23077V9.17538C10.0185 8.91769 11.0769 7.79846 11.0769 6.46154C11.0769 4.93461 9.69692 3.69231 8 3.69231ZM16 8C16 9.58225 15.5308 11.129 14.6518 12.4446C13.7727 13.7602 12.5233 14.7855 11.0615 15.391C9.59966 15.9965 7.99113 16.155 6.43928 15.8463C4.88743 15.5376 3.46197 14.7757 2.34315 13.6569C1.22433 12.538 0.462403 11.1126 0.153721 9.56072C-0.15496 8.00887 0.00346628 6.40034 0.608967 4.93853C1.21447 3.47672 2.23985 2.22729 3.55544 1.34824C4.87103 0.469192 6.41775 0 8 0C10.121 0.00223986 12.1546 0.845814 13.6544 2.34562C15.1542 3.84542 15.9978 5.87895 16 8ZM14.7692 8C14.7692 6.66117 14.3722 5.35241 13.6284 4.23922C12.8846 3.12602 11.8274 2.25839 10.5905 1.74605C9.35356 1.2337 7.99249 1.09965 6.67939 1.36084C5.36629 1.62203 4.16013 2.26674 3.21343 3.21343C2.26674 4.16012 1.62203 5.36629 1.36084 6.67939C1.09965 7.99249 1.2337 9.35356 1.74605 10.5905C2.2584 11.8274 3.12603 12.8846 4.23922 13.6284C5.35241 14.3722 6.66117 14.7692 8 14.7692C9.79469 14.7672 11.5153 14.0534 12.7843 12.7843C14.0534 11.5153 14.7672 9.79468 14.7692 8Z"/>
-</svg>
-`, y = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.7656 14.6336C15.8399 14.708 15.8988 14.7962 15.9391 14.8933C15.9793 14.9904 16 15.0945 16 15.1996C16 15.3047 15.9793 15.4088 15.9391 15.5059C15.8988 15.603 15.8399 15.6912 15.7656 15.7656C15.6912 15.8399 15.603 15.8988 15.5059 15.9391C15.4088 15.9793 15.3047 16 15.1996 16C15.0945 16 14.9904 15.9793 14.8933 15.9391C14.7962 15.8988 14.708 15.8399 14.6336 15.7656L8 9.13094L1.36637 15.7656C1.21626 15.9157 1.01268 16 0.8004 16C0.588121 16 0.384536 15.9157 0.234432 15.7656C0.0843276 15.6155 4.18453e-09 15.4119 0 15.1996C-4.18453e-09 14.9873 0.0843276 14.7837 0.234432 14.6336L6.86906 8L0.234432 1.36637C0.0843276 1.21626 0 1.01268 0 0.8004C0 0.588121 0.0843276 0.384536 0.234432 0.234432C0.384536 0.0843276 0.588121 0 0.8004 0C1.01268 0 1.21626 0.0843276 1.36637 0.234432L8 6.86906L14.6336 0.234432C14.7837 0.0843276 14.9873 -4.18453e-09 15.1996 0C15.4119 4.18453e-09 15.6155 0.0843276 15.7656 0.234432C15.9157 0.384536 16 0.588121 16 0.8004C16 1.01268 15.9157 1.21626 15.7656 1.36637L9.13094 8L15.7656 14.6336Z"/>
-</svg>
-`, s = class s extends g {
-  constructor() {
-    super(...arguments), this.closeButtonText = "close", this.closeButtonIcon = "close", this.mapStatusToIconModal = (e) => {
-      switch (e) {
-        case "error":
-          return i`<cre8-icon class="cre8-modal-icon" svg=${C} aria-hidden='true'></cre8-icon>`;
-        case "success":
-          return i`<cre8-icon class="cre8-modal-icon" svg=${w} aria-hidden='true'></cre8-icon>`;
-        case "warning":
-          return i`<cre8-icon class="cre8-modal-icon" svg=${f} aria-hidden='true'></cre8-icon>`;
-        case "help":
-          return i`<cre8-icon class="cre8-modal-icon" svg=${v} aria-hidden='true'></cre8-icon>`;
-        case "info":
-          return i`<cre8-icon class="cre8-modal-icon" svg=${x} aria-hidden='true'></cre8-icon>`;
-        default:
-          return null;
-      }
-    };
-  }
-  /**
-   * Handle keydown
-   * 1) Close the modal when escape is hit when the user is focused within the modal
-   */
-  handleKeydown(e) {
-    e.code === "Escape" && !this.notDismissible && this.handleCloseModal();
-  }
-  /**
-   * Handle on close
-   * 1) On close, set the modal to not active and dispatch event telling the parent the modal was closed.
-   */
-  handleCloseModal() {
-    this.isActive = !1, this.dispatch({
-      eventName: "close-modal",
-      detailObj: {
-        isActive: this.isActive
-      }
-    });
-  }
-  /**
-   * Handle "click outside"
-   * 1) onClick of the area around the modal window, close the modal.
-   */
-  handleOnClickOutside(e) {
-    const o = e.target;
-    this.isActive && this._modalWindow && o.classList.contains("cre8-c-modal") && !this.notDismissible && this.handleCloseModal();
-  }
-  /**
-   * Lifecycle method to focus on modal
-   * 1) If there is a changed property, and this.isActive === true, then focus on the modal window.
-   * 2) Disable the body from scrolling behind while the modal is open.
-   */
-  updated(e) {
-    if (this.isActive === !0 && setTimeout(() => {
-      this._modalWindow.focus();
-    }, 200), e.has("isActive")) {
-      const o = document.querySelector("body");
-      this.isActive ? o.style.overflow = "hidden" : o.style.removeProperty("overflow");
+    /**
+     * Lifecycle method on removal from the DOM
+     * Removed body overflow and handle close (isActive set to false)
+     */
+    disconnectedCallback() {
+        this.isActive = false;
+        const body = document.querySelector('body');
+        body.style.removeProperty('overflow');
     }
-  }
-  /**
-   * Lifecycle method on removal from the DOM
-   * Removed body overflow and handle close (isActive set to false)
-   */
-  disconnectedCallback() {
-    this.isActive = !1, document.querySelector("body").style.removeProperty("overflow");
-  }
-  render() {
-    const e = this.componentClassNames("cre8-c-modal", {
-      "cre8-is-active": this.isActive,
-      "cre8-c-modal--error": this.status === "error",
-      "cre8-c-modal--warning": this.status === "warning",
-      "cre8-c-modal--success": this.status === "success",
-      "cre8-c-modal--info": this.status === "info",
-      "cre8-c-modal--help": this.status === "help"
-    });
-    return i`
-    <div class="${e}" @click="${this.handleOnClickOutside}" @keydown=${this.handleKeydown}>
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-modal', {
+            'cre8-is-active': this.isActive,
+            'cre8-c-modal--error': this.status === 'error',
+            'cre8-c-modal--warning': this.status === 'warning',
+            'cre8-c-modal--success': this.status === 'success',
+            'cre8-c-modal--info': this.status === 'info',
+            'cre8-c-modal--help': this.status === 'help',
+        });
+        return html `
+    <div class="${componentClassNames}" @click="${this.handleOnClickOutside}" @keydown=${this.handleKeydown}>
     <focus-trap class="cre8-c-modal__focus-trap" ?inactive=${!this.isActive}>
         <div class="cre8-c-modal__window" role="dialog" aria-label=${this.ariaLabel} tabindex=${this.isActive ? 0 : -1}>
         <div class="cre8-c-modal__header">
-            ${this.status ? i`<div class="cre8-c-modal__header-inner">
+            ${this.status
+            ? html `<div class="cre8-c-modal__header-inner">
                 ${this.mapStatusToIconModal(this.status)}
-                <cre8-heading type="title-large" ?brandColor=${!0}>${this.utilityModalTitle}</cre8-heading>
-                </div>` : i`<slot name="header"></slot>`}
-        ${this.notDismissible ? "" : i`<cre8-button
+                <cre8-heading type="title-large" ?brandColor=${true}>${this.utilityModalTitle}</cre8-heading>
+                </div>`
+            : html `<slot name="header"></slot>`}
+        ${!this.notDismissible
+            ? html `<cre8-button
                 class="cre8-c-modal__close-button"
                 variant="tertiary"
-                svg=${y}
+                svg=${svgClose}
                 iconPosition="after"
                 ?inverted=${!this.status}
                 @click=${this.handleCloseModal}
-                ></cre8-button>`}
+                ></cre8-button>`
+            : ''}
         </div>
         <div class="cre8-c-modal__body">
             <slot></slot>
         </div>
-        ${this.slotNotEmpty("footer") && i`<div class="cre8-c-modal__footer"><slot name="footer"></slot></div>`}
+        ${this.slotNotEmpty('footer') && html `<div class="cre8-c-modal__footer"><slot name="footer"></slot></div>`}
         </div>
     </focus-trap>
     </div>
 `;
-  }
-};
-s.styles = [h];
-let t = s;
-r([
-  p(".cre8-c-modal__window")
-], t.prototype, "_modalWindow");
-r([
-  a({ type: Boolean, reflect: !0 })
-], t.prototype, "isActive");
-r([
-  a()
-], t.prototype, "status");
-r([
-  a()
-], t.prototype, "utilityModalTitle");
-r([
-  a({ type: Boolean, reflect: !0 })
-], t.prototype, "notDismissible");
-r([
-  a()
-], t.prototype, "closeButtonText");
-r([
-  a()
-], t.prototype, "closeButtonIcon");
-r([
-  a()
-], t.prototype, "ariaLabel");
-customElements.get("cre8-modal") === void 0 && customElements.define("cre8-modal", t);
-export {
-  t as Cre8Modal
-};
+    }
+}
+Cre8Modal.styles = [styles];
+__decorate([
+    query('.cre8-c-modal__window')
+], Cre8Modal.prototype, "_modalWindow", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Modal.prototype, "isActive", void 0);
+__decorate([
+    property()
+], Cre8Modal.prototype, "status", void 0);
+__decorate([
+    property()
+], Cre8Modal.prototype, "utilityModalTitle", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Modal.prototype, "notDismissible", void 0);
+__decorate([
+    property()
+], Cre8Modal.prototype, "closeButtonText", void 0);
+__decorate([
+    property()
+], Cre8Modal.prototype, "closeButtonIcon", void 0);
+__decorate([
+    property()
+], Cre8Modal.prototype, "ariaLabel", void 0);
+if (customElements.get('cre8-modal') === undefined) {
+    customElements.define('cre8-modal', Cre8Modal);
+}
+//# sourceMappingURL=modal.js.map