@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/loading-spinner/loading-spinner.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-spinner.styles.js","sourceRoot":"","sources":["../../../components/loading-spinner/loading-spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,8/JAA8/J,CAAC;AACjhK,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::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}@keyframes loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}@keyframes spinner-circle-animation{0%,25%{stroke-dashoffset:280;transform:rotate(0)}50%,75%{stroke-dashoffset:75;transform:rotate(45deg)}100%{stroke-dashoffset:280;transform:rotate(360deg)}}:host{display:inline-block;--spinner-stroke-dasharray: 282.743px;--spinner-large-stroke-width: 10;--spinner-small-stroke-width: 14;--spinner-large-width: 4.5rem;--spinner-small-width: 1.5rem;font-family:var(--cre8-typography-label-small-font-family);font-size:var(--cre8-typography-label-small-font-size);font-weight:var(--cre8-typography-label-small-font-weight);line-height:var(--cre8-typography-label-small-line-height);text-decoration:var(--cre8-typography-label-small-text-decoration);text-transform:var(--cre8-typography-label-small-text-transform)}.cre8-c-spinner,.cre8-c-spinner--large{--spinner-height: var(--spinner-large-width);--spinner-width: var(--spinner-large-width);--icon-color: var(--cre8-color-content-brand)}.cre8-c-spinner .cre8-c-spinner__icon,.cre8-c-spinner--large .cre8-c-spinner__icon{display:block}.cre8-c-spinner .cre8-c-spinner__label,.cre8-c-spinner--large .cre8-c-spinner__label{display:block;margin-top:var(--cre8-spacing-8)}.cre8-c-spinner--small{--spinner-height: var(--spinner-small-width);--spinner-width: var(--spinner-small-width);--icon-color: var(--cre8-color-content-brand);display:flex;align-items:center}.cre8-c-spinner--small .cre8-c-spinner__label{display:inline-block;margin-left:var(--cre8-spacing-8);margin-top:0;vertical-align:.35rem}.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-content-brand-knockout);--label-color: var(--cre8-color-content-brand-knockout)}.cre8-c-spinner--secondary.cre8-c-spinner--inverse.cre8-c-spinner--neutral{--icon-color: var(--cre8-color-button-secondary-neutral-inverse-content-active);--label-color: var(--cre8-color-button-secondary-neutral-inverse-content-active)}.cre8-c-spinner--neutral{--icon-color: var(--cre8-color-button-secondary-neutral-content-active)}.cre8-c-spinner--primary.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-button-primary-inverse-content-active)}.cre8-c-spinner--secondary.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-button-secondary-inverse-content-active)}.cre8-c-spinner--tertiary.cre8-c-spinner--inverse{--icon-color: var(--cre8-color-button-tertiary-inverse-content-active)}.cre8-c-spinner__label{color:var(--label-color, var(--cre8-color-content-default))}.cre8-c-spinner__hidden-label{display:none}.cre8-c-spinner__icon{height:var(--spinner-height, 1em);width:var(--spinner-width, 1em)}.cre8-c-spinner__icon circle{fill:rgba(0,0,0,0);stroke:var(--icon-color, inherit);stroke-dasharray:var(--spinner-stroke-dasharray);stroke-linecap:round;stroke-width:var(--spinner-large-stroke-width);transform-origin:50% 50%}.cre8-c-spinner__icon-small circle{stroke-width:var(--spinner-small-stroke-width)}.cre8-c-spinner--indeterminate .cre8-c-spinner__icon{animation:loading 2s linear 0s infinite}.cre8-c-spinner--indeterminate .cre8-c-spinner__icon circle{animation-duration:1.4s;animation-iteration-count:infinite;animation-name:spinner-circle-animation;animation-timing-function:ease-in-out}.cre8-c-spinner--determinate .cre8-c-spinner__icon{overflow:hidden;transform:rotate(-90deg);transform-origin:center center}`;\nexport default styles;\n"]}

package/lib/components/logo/logo.js

@@ -1,29 +1,32 @@
-import { css as n, html as h } from "lit";
-import { property as o } from "lit/decorators.js";
-import { Cre8Element as m } from "../cre8-element.js";
-const p = n`*,::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}.cre8-c-logo{display:flex}`;
-var f = Object.defineProperty, c = (a, t, d, x) => {
-  for (var e = void 0, i = a.length - 1, l; i >= 0; i--)
-    (l = a[i]) && (e = l(t, d, e) || e);
-  return e && f(t, d, e), e;
+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;
 };
-const s = class s extends m {
-  render() {
-    const t = this.componentClassNames("cre8-c-logo", {});
-    return h`
-      <a href="${this.href}" class="${t}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './logo.styles.js';
+/**
+ * @slot - The logo element
+ */
+export class Cre8Logo extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-logo', {});
+        return html `
+      <a href="${this.href}" class="${componentClassName}">
        
       </a>
     `;
-  }
-};
-s.styles = [p];
-let r = s;
-c([
-  o()
-], r.prototype, "href");
-customElements.get("cre8-logo") === void 0 && customElements.define("cre8-logo", r);
-export {
-  r as Cre8Logo,
-  r as default
-};
+    }
+}
+Cre8Logo.styles = [styles];
+__decorate([
+    property()
+], Cre8Logo.prototype, "href", void 0);
+if (customElements.get('cre8-logo') === undefined) {
+    customElements.define('cre8-logo', Cre8Logo);
+}
+export default Cre8Logo;
+//# sourceMappingURL=logo.js.map

package/lib/components/logo/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.js","sourceRoot":"","sources":["../../../components/logo/logo.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IASvC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;QAEvE,OAAO,IAAI,CAAA;iBACA,IAAI,CAAC,IAAI,YAAY,kBAAkB;;;KAGnD,CAAC;IACJ,CAAC;;AAhBQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;sCACO;AAapB,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './logo.styles.js';\n\n/**\n * @slot - The logo element\n */\nexport class Cre8Logo extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Logo link\n   */\n  @property()\n      href?: string;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-logo', {});\n\n      return html`\n      <a href=\"${this.href}\" class=\"${componentClassName}\">\n       \n      </a>\n    `;\n  }\n}\n\nif (customElements.get('cre8-logo') === undefined) {\n    customElements.define('cre8-logo', Cre8Logo);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-logo': Cre8Logo;\n  }\n}\n\nexport default Cre8Logo;\n"]}

package/lib/components/logo/logo.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::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}.cre8-c-logo{display:flex}`;
+export default styles;
+//# sourceMappingURL=logo.styles.js.map

package/lib/components/logo/logo.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.styles.js","sourceRoot":"","sources":["../../../components/logo/logo.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,oyDAAoyD,CAAC;AACvzD,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::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}.cre8-c-logo{display:flex}`;\nexport default styles;\n"]}

package/lib/components/main/main.js

@@ -1,27 +1,30 @@
-import { css as n, html as h } from "lit";
-import { property as m } from "lit/decorators.js";
-import { Cre8Element as o } from "../cre8-element.js";
-const p = n`*,::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:flex;flex-direction:column;flex:1 0 auto}.cre8-c-main--full-height{display:flex;flex-direction:column;flex:1;height:100%}`;
-var f = Object.defineProperty, c = (a, t, l, x) => {
-  for (var e = void 0, r = a.length - 1, d; r >= 0; r--)
-    (d = a[r]) && (e = d(t, l, e) || e);
-  return e && f(t, l, e), e;
-};
-const s = class s extends o {
-  render() {
-    const t = this.componentClassNames("cre8-c-main", {
-      "cre8-c-main--full-height": this.fullHeight === !0
-    });
-    return h`<main class=${t}><slot></slot></main>`;
-  }
-};
-s.styles = [p];
-let i = s;
-c([
-  m({ type: Boolean, reflect: !0 })
-], i.prototype, "fullHeight");
-customElements.get("cre8-main") === void 0 && customElements.define("cre8-main", i);
-export {
-  i as Cre8Main,
-  i as default
+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 } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './main.styles.js';
+/**
+ * @slot - The main content
+ */
+export class Cre8Main extends Cre8Element {
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-main', {
+            'cre8-c-main--full-height': this.fullHeight === true,
+        });
+        return html `<main class=${componentClassName}><slot></slot></main>`;
+    }
+}
+Cre8Main.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Main.prototype, "fullHeight", void 0);
+if (customElements.get('cre8-main') === undefined) {
+    customElements.define('cre8-main', Cre8Main);
+}
+export default Cre8Main;
+//# sourceMappingURL=main.js.map

package/lib/components/main/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../components/main/main.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,WAAW;IAUvC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAC/D,0BAA0B,EAAE,IAAI,CAAC,UAAU,KAAK,IAAI;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA,eAAe,kBAAkB,uBAAuB,CAAC;IACxE,CAAC;;AAfQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAOvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAClB;AAW3B,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './main.styles.js';\n\n/**\n * @slot - The main content\n */\nexport class Cre8Main extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Full height variant\n   * 1) Sets the height to 100%\n   */\n  @property({ type: Boolean, reflect: true })\n      fullHeight?: boolean;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-main', {\n          'cre8-c-main--full-height': this.fullHeight === true,\n      });\n\n      return html`<main class=${componentClassName}><slot></slot></main>`;\n  }\n}\n\nif (customElements.get('cre8-main') === undefined) {\n    customElements.define('cre8-main', Cre8Main);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-main': Cre8Main;\n  }\n}\n\nexport default Cre8Main;\n"]}

package/lib/components/main/main.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::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:flex;flex-direction:column;flex:1 0 auto}.cre8-c-main--full-height{display:flex;flex-direction:column;flex:1;height:100%}`;
+export default styles;
+//# sourceMappingURL=main.styles.js.map

package/lib/components/main/main.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.styles.js","sourceRoot":"","sources":["../../../components/main/main.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,i5DAAi5D,CAAC;AACp6D,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::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:flex;flex-direction:column;flex:1 0 auto}.cre8-c-main--full-height{display:flex;flex-direction:column;flex:1;height:100%}`;\nexport default styles;\n"]}

package/lib/components/modal/modal.js

@@ -1,146 +1,195 @@
-import { css as m, html as i } from "lit";
-import { query as h, 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 = m`*,::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;
+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;
 };
-const l = class l extends y {
-  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=${g} aria-hidden='true'></cre8-icon>`;
-        case "success":
-          return i`<cre8-icon class="cre8-modal-icon" svg=${v} 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=${u} aria-hidden='true'></cre8-icon>`;
-        case "info":
-          return i`<cre8-icon class="cre8-modal-icon" svg=${p} 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");
+import { html, } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import svgError from '../../icons/System/Regular/Error.svg?raw';
+import svgWarningFilled from '../../icons/System/Filled/Warning.svg?raw';
+import svgCheckCircle from '../../icons/System/Filled/Check.svg?raw';
+import svgInfoFilled from '../../icons/System/Filled/Info.svg?raw';
+import svgHelp from '../../icons/System/Regular/Help.svg?raw';
+import { Cre8Element } from '../cre8-element';
+import '../icon/icon.js';
+import '@a11y/focus-trap';
+import styles from './modal.styles.js';
+import '../../icons/System/Regular/Close.svg?raw';
+/**
+ * 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;
+            }
+        };
     }
-  }
-  /**
-   * 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}>
+    /**
+     * 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 */
+        }
+    }
+    /**
+     * 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,
+            },
+        });
+    }
+    /**
+     * 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();
+        }
+    }
+    /**
+     * 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 */
+    }
+    /**
+     * 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');
+    }
+    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"
                 text="${this.closeButtonText}"
-                ?hideText=${!0}
+                ?hideText=${true}
                 iconName="close"
                 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>
 `;
-  }
-};
-l.styles = [w];
-let t = l;
-r([
-  h(".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

package/lib/components/modal/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","sourceRoot":"","sources":["../../../components/modal/modal.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues, html, } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport svgError from '../../icons/System/Regular/Error.svg?raw';\nimport svgWarningFilled from '../../icons/System/Filled/Warning.svg?raw';\nimport svgCheckCircle from '../../icons/System/Filled/Check.svg?raw';\nimport svgInfoFilled from '../../icons/System/Filled/Info.svg?raw';\nimport svgHelp from '../../icons/System/Regular/Help.svg?raw';\nimport { Cre8Element } from '../cre8-element';\nimport '../icon/icon.js';\nimport '@a11y/focus-trap';\nimport styles from './modal.styles.js';\nimport '../../icons/System/Regular/Close.svg?raw';\n\n/**\n * Modal component should be used in all modal situations.\n * It is natuarally composable and can even have a custom header and remove the close button.\n * (note: adding `slot=\"header\"` will insert the given element into the header section of the modal,\n * same for `slot=\"footer\"` and no given slot name will inset it into the body)\n *\n * If it is desired to create a utility modal. Cre8Modal requires a status value (see props table below,\n * and a UtilityModalTitle since all utility modals have a cre8-heading)\n * @slot - The component content\n */\nexport class Cre8Modal extends Cre8Element {\n    static styles = [styles];\n\n    /**\n     * Query the modal window\n     */\n    @query('.cre8-c-modal__window')\n    _modalWindow: HTMLDivElement;\n\n    /**\n     * Is Active attribute\n     */\n    @property({ type: Boolean, reflect: true })\n    isActive?: boolean;\n\n    /**\n     * Status Types\n     * <cre8-text-passage size=\"sm\">\n     * <ul>\n     * <li>**default (no value)** renders a default modal</li>\n     * <li>**error** renders an error modal</li>\n     * <li>**warning** renders a warning modal</li>\n     * <li>**success** renders a success modal</li>\n     * <li>**info** renders an info modal</li>\n     * <li>**help** renders an help modal</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property()\n    status?: 'error' | 'warning' | 'success' | 'info' | 'help';\n\n    /**\n     * Utility Modal Heading (String)\n     */\n    @property()\n    utilityModalTitle: string;\n\n    /**\n     * Not dismissible modal\n     */\n    @property({ type: Boolean, reflect: true })\n    notDismissible?: boolean;\n\n    /**\n     * Close Button Text\n     */\n    @property()\n    closeButtonText: string = 'close';\n\n    /**\n     * Close Button Icon\n     */\n    @property()\n    closeButtonIcon: string = 'close';\n\n    /**\n     * Modal Aria Label - This is required for accessibility and provides context of the entire modal!\n     */\n    @property()\n    ariaLabel: string;\n\n    /**\n     * Handle keydown\n     * 1) Close the modal when escape is hit when the user is focused within the modal\n     */\n    handleKeydown(e: KeyboardEvent) {\n        if (e.code === 'Escape' && !this.notDismissible) {\n            this.handleCloseModal(); /* 2 */\n        }\n    }\n\n    /**\n     * Handle on close\n     * 1) On close, set the modal to not active and dispatch event telling the parent the modal was closed.\n     */\n    handleCloseModal() {\n        this.isActive = false;\n        this.dispatch({\n            eventName: 'close-modal',\n            detailObj: {\n                isActive: this.isActive,\n            },\n        });\n    }\n\n    /**\n     * Handle \"click outside\"\n     * 1) onClick of the area around the modal window, close the modal.\n     */\n\n    handleOnClickOutside(e: Event) {\n        const eventTarget = e.target as HTMLElement;\n        if (this.isActive && this._modalWindow && eventTarget.classList.contains('cre8-c-modal') && !this.notDismissible) {\n            this.handleCloseModal();\n        }\n    }\n\n    /**\n     * Lifecycle method to focus on modal\n     * 1) If there is a changed property, and this.isActive === true, then focus on the modal window.\n     * 2) Disable the body from scrolling behind while the modal is open.\n     */\n\n    updated(changedProperties: PropertyValues<this>) {\n        if (this.isActive === true) {\n            setTimeout(() => {\n                this._modalWindow.focus();\n            }, 200);\n        } /* 1 */\n\n        if (changedProperties.has('isActive')) {\n            const body = document.querySelector('body');\n            if (this.isActive) {\n                body.style.overflow = 'hidden';\n            } else {\n                body.style.removeProperty('overflow');\n            }\n        } /* 2 */\n    }\n\n    /*\n    * Maps modal icons and modal status variants to what the alt text of the related icon should be\n    * see: (https://digital.#.com/patterns-and-Components/informational-display/alerts-and-notifications#query=alerts)\n    * this provides the recommendated alt text of different statuses\n    */\n    mapStatusToIconModal = (status: string) => {\n        switch (status) {\n            case 'error':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgError} aria-hidden='true'></cre8-icon>`;\n            case 'success':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgCheckCircle} aria-hidden='true'></cre8-icon>`;\n            case 'warning':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgWarningFilled} aria-hidden='true'></cre8-icon>`;\n            case 'help':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgHelp} aria-hidden='true'></cre8-icon>`;\n            case 'info':\n                return html`<cre8-icon class=\"cre8-modal-icon\" svg=${svgInfoFilled} aria-hidden='true'></cre8-icon>`;\n            default:\n                return null;\n        }\n    };\n\n    /**\n     * Lifecycle method on removal from the DOM\n     * Removed body overflow and handle close (isActive set to false)\n     */\n    disconnectedCallback() {\n        this.isActive = false;\n        const body = document.querySelector('body');\n        body.style.removeProperty('overflow');\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-modal', {\n            'cre8-is-active': this.isActive,\n            'cre8-c-modal--error': this.status === 'error',\n            'cre8-c-modal--warning': this.status === 'warning',\n            'cre8-c-modal--success': this.status === 'success',\n            'cre8-c-modal--info': this.status === 'info',\n            'cre8-c-modal--help': this.status === 'help',\n        });\n\n        return html`\n    <div class=\"${componentClassNames}\" @click=\"${this.handleOnClickOutside}\" @keydown=${this.handleKeydown}>\n    <focus-trap class=\"cre8-c-modal__focus-trap\" ?inactive=${!this.isActive}>\n        <div class=\"cre8-c-modal__window\" role=\"dialog\" aria-label=${this.ariaLabel} tabindex=${this.isActive ? 0 : -1}>\n        <div class=\"cre8-c-modal__header\">\n            ${this.status\n                ? html`<div class=\"cre8-c-modal__header-inner\">\n                ${this.mapStatusToIconModal(this.status)}\n                <cre8-heading type=\"title-large\" ?brandColor=${true}>${this.utilityModalTitle}</cre8-heading>\n                </div>`\n                : html`<slot name=\"header\"></slot>`}\n        ${!this.notDismissible\n                ? html`<cre8-button\n                class=\"cre8-c-modal__close-button\"\n                variant=\"tertiary\"\n                text=\"${this.closeButtonText}\"\n                ?hideText=${true}\n                iconName=\"close\"\n                iconPosition=\"after\"\n                ?inverted=${!this.status}\n                @click=${this.handleCloseModal}\n                ></cre8-button>`\n                : ''}\n        </div>\n        <div class=\"cre8-c-modal__body\">\n            <slot></slot>\n        </div>\n        ${this.slotNotEmpty('footer') && html`<div class=\"cre8-c-modal__footer\"><slot name=\"footer\"></slot></div>`}\n        </div>\n    </focus-trap>\n    </div>\n`;\n    }\n}\n\nif (customElements.get('cre8-modal') === undefined) {\n    customElements.define('cre8-modal', Cre8Modal);\n}\n\nexport interface CloseModalEvent extends CustomEvent<{ isActive: boolean }> {\n    type: 'close-modal';\n    currentTarget: Cre8Modal;\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-modal': Cre8Modal;\n    }\n}\n"]}

package/lib/components/modal/modal.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::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}`;
+export default styles;
+//# sourceMappingURL=modal.styles.js.map

package/lib/components/modal/modal.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.styles.js","sourceRoot":"","sources":["../../../components/modal/modal.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,m9GAAm9G,CAAC;AACt+G,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::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}`;\nexport default styles;\n"]}