@tmorrow/cre8-wc 1.0.25 → 1.1.1

package/lib/components/modal/modal.js

@@ -1,193 +1,28 @@
-import { css as h, html as t } from "lit";
-import { query as m, property as s } from "lit/decorators.js";
-import { d as p, e as u, f, b as v, g as y } from "../../icon-DImqxDiW.js";
-import { Cre8Element as g } from "../cre8-element.js";
+import { css as h, html as i } from "lit";
+import { query as m, property as a } from "lit/decorators.js";
+import { d as p, e as u, f, b as v, g } from "../../icon-D22g8aWB.js";
+import { Cre8Element as y } from "../cre8-element.js";
 import "@a11y/focus-trap";
-const w = h`@import '../../design-tokens/core/scss/theming/component';
-
-/*------------------------------------*\
- #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: calc(8px * 68);
-  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:$cre8-breakpoint-md) {
-    position: inherit;
-    height: 100%;
-    width: 100%;
-  }
-
-  &:focus-visible {
-    @includefocus();
-  }
-}
-
-/**
- * Modal Window Header
- */
-.cre8-c-modal__header {
-  display: flex;
-  padding: calc(8px * 4) calc(8px * 6) calc(8px * 2);
-  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-modal-icon {
-      fill: var(--cre8-color-content-error-icon); /* 1 */
-    }
-  }
-
-  /**
-   * 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-modal-icon {
-      fill: var(--cre8-color-content-warning-icon); /* 1 */
-    }
-  }
-
-  /**
-   * 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-modal-icon {
-      fill: var(--cre8-color-content-success-icon); /* 1 */
-    }
-  }
-
-  /**
-   * 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--help & {
-    .cre8-modal-icon {
-      fill: var(--cre8-color-content-info-icon); /* 1 */
-    }
-  }
-}
-
-/**
- * Modal Heading
- */
-.cre8-c-modal__header-inner {
-  display: flex;
-  align-items: center;
-  gap: calc(8px * 2);
-
-  cre8-icon {
-    .cre8-modal-icon {
-      height: calc(8px * 4);
-      width: calc(8px * 4);
-    }
-  }
-}
-
-/**
- * Modal Window Body
- */
-.cre8-c-modal__body {
-  max-height: 240px; // Prevent modal from getting too big based on content
-  overflow: auto; // Force scrolling based on long amounts of content
-  padding: 0 calc(8px * 6);
-
-  /**
-   * Modal Window Body for mobile user screen widths
-   */
-  @media all and (max-width:$cre8-breakpoint-md) {
-    height: 100%;
-    max-height: max-content;
-  }
-}
-
-/**
- * Modal Window Footer
- */
-.cre8-c-modal__footer {
- padding: calc(8px * 3) calc(8px * 6) calc(100vh - 95dvh); // Ensure footer slot isn't cut off on certain devices
-}
-
-/**
- * Modal Window Close button
- */
-.cre8-c-modal__close-button {
-  margin-left: auto;
-}
-`;
-var b = Object.defineProperty, i = (n, e, c, _) => {
-  for (var a = void 0, r = n.length - 1, d; r >= 0; r--)
-    (d = n[r]) && (a = d(e, c, a) || a);
-  return a && b(e, c, a), a;
+const w = h`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}: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}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@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}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.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,.25);z-index:1000}.cre8-c-modal.cre8-is-active{display:flex;visibility:visible;opacity:1}.cre8-c-modal__focus-trap{display:contents}.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}@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}.cre8-c-modal__header{display:flex;padding:2rem 3rem 1rem;align-items:center}.cre8-c-modal--error .cre8-c-modal__header .cre8-modal-icon{color:var(--cre8-color-content-error-icon)}.cre8-c-modal--warning .cre8-c-modal__header .cre8-modal-icon{color:var(--cre8-color-content-warning-icon)}.cre8-c-modal--success .cre8-c-modal__header .cre8-modal-icon{color:var(--cre8-color-content-success-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)}.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}.cre8-c-modal__body{max-height:240px;overflow:auto;padding:0 3rem}@media all and (max-width: 768px){.cre8-c-modal__body{height:100%;max-height:max-content}}.cre8-c-modal__footer{padding:1.5rem 3rem calc(100vh - 95dvh)}.cre8-c-modal__close-button{margin-left:auto}`;
+var x = Object.defineProperty, r = (d, e, o, _) => {
+  for (var s = void 0, c = d.length - 1, n; c >= 0; c--)
+    (n = d[c]) && (s = n(e, o, s) || s);
+  return s && x(e, o, s), s;
 };
-const l = class l extends g {
+const l = class l extends y {
   constructor() {
     super(...arguments), this.closeButtonText = "close", this.closeButtonIcon = "close", this.mapStatusToIconModal = (e) => {
       switch (e) {
         case "error":
-          return t`<cre8-icon class="cre8-modal-icon" svg=${y} aria-hidden='true'></cre8-icon>`;
+          return i`<cre8-icon class="cre8-modal-icon" svg=${g} aria-hidden='true'></cre8-icon>`;
         case "success":
-          return t`<cre8-icon class="cre8-modal-icon" svg=${v} aria-hidden='true'></cre8-icon>`;
+          return i`<cre8-icon class="cre8-modal-icon" svg=${v} aria-hidden='true'></cre8-icon>`;
         case "warning":
-          return t`<cre8-icon class="cre8-modal-icon" svg=${f} aria-hidden='true'></cre8-icon>`;
+          return i`<cre8-icon class="cre8-modal-icon" svg=${f} aria-hidden='true'></cre8-icon>`;
         case "help":
-          return t`<cre8-icon class="cre8-modal-icon" svg=${u} aria-hidden='true'></cre8-icon>`;
+          return i`<cre8-icon class="cre8-modal-icon" svg=${u} aria-hidden='true'></cre8-icon>`;
         case "info":
-          return t`<cre8-icon class="cre8-modal-icon" svg=${p} aria-hidden='true'></cre8-icon>`;
+          return i`<cre8-icon class="cre8-modal-icon" svg=${p} aria-hidden='true'></cre8-icon>`;
         default:
           return null;
       }
@@ -217,8 +52,8 @@ const l = class l extends g {
    * 1) onClick of the area around the modal window, close the modal.
    */
   handleOnClickOutside(e) {
-    const c = e.target;
-    this.isActive && this._modalWindow && c.classList.contains("cre8-c-modal") && !this.notDismissible && this.handleCloseModal();
+    const o = e.target;
+    this.isActive && this._modalWindow && o.classList.contains("cre8-c-modal") && !this.notDismissible && this.handleCloseModal();
   }
   /**
    * Lifecycle method to focus on modal
@@ -229,8 +64,8 @@ const l = class l extends g {
     if (this.isActive === !0 && setTimeout(() => {
       this._modalWindow.focus();
     }, 200), e.has("isActive")) {
-      const c = document.querySelector("body");
-      this.isActive ? c.style.overflow = "hidden" : c.style.removeProperty("overflow");
+      const o = document.querySelector("body");
+      this.isActive ? o.style.overflow = "hidden" : o.style.removeProperty("overflow");
     }
   }
   /**
@@ -249,16 +84,16 @@ const l = class l extends g {
       "cre8-c-modal--info": this.status === "info",
       "cre8-c-modal--help": this.status === "help"
     });
-    return t`
+    return i`
     <div class="${e}" @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 ? t`<div class="cre8-c-modal__header-inner">
+            ${this.status ? i`<div class="cre8-c-modal__header-inner">
                 ${this.mapStatusToIconModal(this.status)}
                 <cre8-heading type="title-large" ?brandColor=${!0}>${this.utilityModalTitle}</cre8-heading>
-                </div>` : t`<slot name="header"></slot>`}
-        ${this.notDismissible ? "" : t`<cre8-button
+                </div>` : i`<slot name="header"></slot>`}
+        ${this.notDismissible ? "" : i`<cre8-button
                 class="cre8-c-modal__close-button"
                 variant="tertiary"
                 text="${this.closeButtonText}"
@@ -272,7 +107,7 @@ const l = class l extends g {
         <div class="cre8-c-modal__body">
             <slot></slot>
         </div>
-        ${this.slotNotEmpty("footer") && t`<div class="cre8-c-modal__footer"><slot name="footer"></slot></div>`}
+        ${this.slotNotEmpty("footer") && i`<div class="cre8-c-modal__footer"><slot name="footer"></slot></div>`}
         </div>
     </focus-trap>
     </div>
@@ -280,32 +115,32 @@ const l = class l extends g {
   }
 };
 l.styles = [w];
-let o = l;
-i([
+let t = l;
+r([
   m(".cre8-c-modal__window")
-], o.prototype, "_modalWindow");
-i([
-  s({ type: Boolean, reflect: !0 })
-], o.prototype, "isActive");
-i([
-  s()
-], o.prototype, "status");
-i([
-  s()
-], o.prototype, "utilityModalTitle");
-i([
-  s({ type: Boolean, reflect: !0 })
-], o.prototype, "notDismissible");
-i([
-  s()
-], o.prototype, "closeButtonText");
-i([
-  s()
-], o.prototype, "closeButtonIcon");
-i([
-  s()
-], o.prototype, "ariaLabel");
-customElements.get("cre8-modal") === void 0 && customElements.define("cre8-modal", o);
+], 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 {
-  o as Cre8Modal
+  t as Cre8Modal
 };

package/lib/components/modal/modal.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.styles.d.ts","sourceRoot":"","sources":["../../../components/modal/modal.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAqKX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"modal.styles.d.ts","sourceRoot":"","sources":["../../../components/modal/modal.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAy9G,CAAC;AACt+G,eAAe,MAAM,CAAC"}