@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/utility-nav/utility-nav.js

@@ -1,39 +1,46 @@
-import { css as m, html as p } from "lit";
-import { property as d } from "lit/decorators.js";
-import { Cre8Element as c } from "../cre8-element.js";
-const h = 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{margin-left:auto}.cre8-c-utility-nav--inverted{--cre8-utility-nav-link-color: var(--cre8-color-content-knockout)}.cre8-c-utility-nav__list{display:flex;margin:-1rem 0 0 -1rem;padding:0;list-style:none}.cre8-c-utility-nav__list ::slotted(cre8-utility-nav-item){margin-left:1rem;margin-top:1rem}`;
-var f = Object.defineProperty, o = (s, r, l, x) => {
-  for (var e = void 0, i = s.length - 1, n; i >= 0; i--)
-    (n = s[i]) && (e = n(r, l, e) || e);
-  return e && f(r, l, 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 a = class a extends c {
-  constructor() {
-    super(...arguments), this.navAriaLabel = "utility";
-  }
-  render() {
-    const r = this.componentClassNames("cre8-c-utility-nav", {
-      "cre8-c-utility-nav--inverted": this.inverted === !0
-    });
-    return p`
-      <nav aria-label="${this.navAriaLabel}" class="${r}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './utility-nav.styles.js';
+/**
+ * @slot - The utility nav items
+ */
+export class Cre8UtilityNav extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+       * aria-label attribute to designate at name for the nav. Can be override by user
+       */
+        this.navAriaLabel = 'utility';
+    }
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-utility-nav', {
+            'cre8-c-utility-nav--inverted': this.inverted === true,
+        });
+        return html `
+      <nav aria-label="${this.navAriaLabel}" class="${componentClassName}">
         <ul class="cre8-c-utility-nav__list">
           <slot></slot>
         </ul>
       </nav>
     `;
-  }
-};
-a.styles = [h];
-let t = a;
-o([
-  d({ type: Boolean, reflect: !0 })
-], t.prototype, "inverted");
-o([
-  d()
-], t.prototype, "navAriaLabel");
-customElements.get("cre8-utility-nav") === void 0 && customElements.define("cre8-utility-nav", t);
-export {
-  t as Cre8UtilityNav,
-  t as default
-};
+    }
+}
+Cre8UtilityNav.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8UtilityNav.prototype, "inverted", void 0);
+__decorate([
+    property()
+], Cre8UtilityNav.prototype, "navAriaLabel", void 0);
+if (customElements.get('cre8-utility-nav') === undefined) {
+    customElements.define('cre8-utility-nav', Cre8UtilityNav);
+}
+export default Cre8UtilityNav;
+//# sourceMappingURL=utility-nav.js.map

package/lib/components/utility-nav/utility-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility-nav.js","sourceRoot":"","sources":["../../../components/utility-nav/utility-nav.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,yBAAyB,CAAC;AAE7C;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,WAAW;IAA/C;;QAUI;;SAEC;QAEC,iBAAY,GAAW,SAAS,CAAC;IAevC,CAAC;IAbC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE;YACtE,8BAA8B,EAAE,IAAI,CAAC,QAAQ,KAAK,IAAI;SACzD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;yBACQ,IAAI,CAAC,YAAY,YAAY,kBAAkB;;;;;KAKnE,CAAC;IACJ,CAAC;;AA3BQ,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAOvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACpB;AAMnB;IADH,QAAQ,EAAE;oDAC0B;AAiBvC,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC9D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["import { html,  } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './utility-nav.styles.js';\n\n/**\n * @slot - The utility nav items\n */\nexport class Cre8UtilityNav extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Inverted variant\n   * 1) Used for dark backgrounds\n   */\n  @property({ type: Boolean, reflect: true })\n      inverted?: boolean;\n\n    /**\n   * aria-label attribute to designate at name for the nav. Can be override by user\n   */\n  @property()\n      navAriaLabel: string = 'utility';\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-utility-nav', {\n          'cre8-c-utility-nav--inverted': this.inverted === true,\n      });\n\n      return html`\n      <nav aria-label=\"${this.navAriaLabel}\" class=\"${componentClassName}\">\n        <ul class=\"cre8-c-utility-nav__list\">\n          <slot></slot>\n        </ul>\n      </nav>\n    `;\n  }\n}\n\nif (customElements.get('cre8-utility-nav') === undefined) {\n    customElements.define('cre8-utility-nav', Cre8UtilityNav);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-utility-nav': Cre8UtilityNav;\n  }\n}\n\nexport default Cre8UtilityNav;\n"]}

package/lib/components/utility-nav/utility-nav.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{margin-left:auto}.cre8-c-utility-nav--inverted{--cre8-utility-nav-link-color: var(--cre8-color-content-knockout)}.cre8-c-utility-nav__list{display:flex;margin:-1rem 0 0 -1rem;padding:0;list-style:none}.cre8-c-utility-nav__list ::slotted(cre8-utility-nav-item){margin-left:1rem;margin-top:1rem}`;
+export default styles;
+//# sourceMappingURL=utility-nav.styles.js.map

package/lib/components/utility-nav/utility-nav.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility-nav.styles.js","sourceRoot":"","sources":["../../../components/utility-nav/utility-nav.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,qjEAAqjE,CAAC;AACxkE,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{margin-left:auto}.cre8-c-utility-nav--inverted{--cre8-utility-nav-link-color: var(--cre8-color-content-knockout)}.cre8-c-utility-nav__list{display:flex;margin:-1rem 0 0 -1rem;padding:0;list-style:none}.cre8-c-utility-nav__list ::slotted(cre8-utility-nav-item){margin-left:1rem;margin-top:1rem}`;\nexport default styles;\n"]}

package/lib/components/utility-nav-item/utility-nav-item.js

@@ -1,65 +1,86 @@
-import { css as m, nothing as o, html as i } from "lit";
-import { ifDefined as c } from "lit-html/directives/if-defined.js";
-import { property as a } from "lit/decorators.js";
-import { Cre8Element as f } from "../cre8-element.js";
-const y = 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}.cre8-c-utility-nav__item{margin:0;padding:0}.cre8-c-utility-nav__link{display:flex;font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform);border:none;background:none;appearance:none;padding:0;text-align:left;color:var(--cre8-utility-nav-link-color, var(--cre8-color-content-brand));cursor:pointer;transition:color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-utility-nav__link:hover,.cre8-c-utility-nav__link:focus{color:var(--cre8-color-content-brand-hover)}cre8-icon-legacy{--cre8-icon-height: 1.5rem;--cre8-icon-width: 1.5rem}.cre8-c-utility-nav__text+cre8-icon-legacy{margin-left:0.5rem}cre8-icon-legacy+.cre8-c-utility-nav__text{margin-left:0.5rem}`;
-var g = Object.defineProperty, n = (d, r, h, u) => {
-  for (var t = void 0, s = d.length - 1, p; s >= 0; s--)
-    (p = d[s]) && (t = p(r, h, t) || t);
-  return t && g(r, h, t), t;
+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 f {
-  constructor() {
-    super(...arguments), this.iconPosition = void 0;
-  }
-  render() {
-    const r = this.componentClassNames("cre8-c-utility-nav__item", {});
-    return this.href ? i`
-        <li class="${r}">
+import { html, nothing, } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './utility-nav-item.styles.js';
+export class Cre8UtilityNavItem extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        /**
+         * Icon position
+         * <cre8-text-passage size="sm">
+         * <ul>
+         * <li>**before** places the icon before the text</li>
+         * <li>**after** places the icon after the text</li>
+         * </ul>
+         * </cre8-text-passage>
+         */
+        this.iconPosition = undefined;
+    }
+    render() {
+        const componentClassName = this.componentClassNames('cre8-c-utility-nav__item', {});
+        if (this.href) {
+            return html `
+        <li class="${componentClassName}">
           <a href="${this.href}" class="cre8-c-utility-nav__link">
-            ${this.iconPosition === "before" ? i`<cre8-icon-legacy aria-hidden="true" name="${c(this.iconName)}"></cre8-icon-legacy>` : o}
+            ${this.iconPosition === 'before'
+                ? html `<cre8-icon-legacy aria-hidden="true" name="${ifDefined(this.iconName)}"></cre8-icon-legacy>`
+                : nothing}
             <span
-              class="${this.hideText ? "cre8-u-is-vishidden cre8-c-utility-nav__text" : "cre8-c-utility-nav__text"}"
+              class="${this.hideText ? 'cre8-u-is-vishidden cre8-c-utility-nav__text' : 'cre8-c-utility-nav__text'}"
             >
               ${this.text}
             </span>
-            ${this.iconPosition === "after" ? i`<cre8-icon-legacy aria-hidden="true" name="${c(this.iconName)}"></cre8-icon-legacy>` : o}
+            ${this.iconPosition === 'after'
+                ? html `<cre8-icon-legacy aria-hidden="true" name="${ifDefined(this.iconName)}"></cre8-icon-legacy>`
+                : nothing}
           </a>
         </li>
-      ` : i`
-        <li class="${r}">
+      `;
+        }
+        return html `
+        <li class="${componentClassName}">
           <button class="cre8-c-utility-nav__link">
-            ${this.iconPosition === "before" ? i`<cre8-icon-legacy aria-hidden="true" name="${c(this.iconName)}"></cre8-icon-legacy>` : o}
+            ${this.iconPosition === 'before'
+            ? html `<cre8-icon-legacy aria-hidden="true" name="${ifDefined(this.iconName)}"></cre8-icon-legacy>`
+            : nothing}
             <span
-              class="${this.hideText ? "cre8-u-is-vishidden cre8-c-utility-nav__text" : "cre8-c-utility-nav__text"}"
+              class="${this.hideText ? 'cre8-u-is-vishidden cre8-c-utility-nav__text' : 'cre8-c-utility-nav__text'}"
             >
               ${this.text}
             </span>
-            ${this.iconPosition === "after" ? i`<cre8-icon-legacy aria-hidden="true" name="${c(this.iconName)}"></cre8-icon-legacy>` : o}
+            ${this.iconPosition === 'after'
+            ? html `<cre8-icon-legacy aria-hidden="true" name="${ifDefined(this.iconName)}"></cre8-icon-legacy>`
+            : nothing}
           </button>
         </li>
       `;
-  }
-};
-l.styles = [y];
-let e = l;
-n([
-  a({ type: Boolean, reflect: !0 })
-], e.prototype, "hideText");
-n([
-  a()
-], e.prototype, "href");
-n([
-  a()
-], e.prototype, "iconName");
-n([
-  a()
-], e.prototype, "iconPosition");
-n([
-  a()
-], e.prototype, "text");
-customElements.get("cre8-utility-nav-item") === void 0 && customElements.define("cre8-utility-nav-item", e);
-export {
-  e as Cre8UtilityNavItem,
-  e as default
-};
+    }
+}
+Cre8UtilityNavItem.styles = [styles];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8UtilityNavItem.prototype, "hideText", void 0);
+__decorate([
+    property()
+], Cre8UtilityNavItem.prototype, "href", void 0);
+__decorate([
+    property()
+], Cre8UtilityNavItem.prototype, "iconName", void 0);
+__decorate([
+    property()
+], Cre8UtilityNavItem.prototype, "iconPosition", void 0);
+__decorate([
+    property()
+], Cre8UtilityNavItem.prototype, "text", void 0);
+if (customElements.get('cre8-utility-nav-item') === undefined) {
+    customElements.define('cre8-utility-nav-item', Cre8UtilityNavItem);
+}
+export default Cre8UtilityNavItem;
+//# sourceMappingURL=utility-nav-item.js.map

package/lib/components/utility-nav-item/utility-nav-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility-nav-item.js","sourceRoot":"","sources":["../../../components/utility-nav-item/utility-nav-item.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,GAAI,MAAM,KAAK,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,8BAA8B,CAAC;AAElD,MAAM,OAAO,kBAAmB,SAAQ,WAAW;IAAnD;;QAsBE;;;;;;;;WAQG;QAEC,iBAAY,GAAwB,SAAS,CAAC;IAgDpD,CAAC;IAxCC,MAAM;QACF,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAAC,0BAA0B,EAAE,EAAE,CAAC,CAAC;QAEpF,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,OAAO,IAAI,CAAA;qBACA,kBAAkB;qBAClB,IAAI,CAAC,IAAI;cAChB,IAAI,CAAC,YAAY,KAAK,QAAQ;gBACpC,CAAC,CAAC,IAAI,CAAA,8CAA8C,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,uBAAuB;gBACnG,CAAC,CAAC,OAAO;;uBAEM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,0BAA0B;;gBAElG,IAAI,CAAC,IAAI;;cAEX,IAAI,CAAC,YAAY,KAAK,OAAO;gBACnC,CAAC,CAAC,IAAI,CAAA,8CAA8C,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,uBAAuB;gBACnG,CAAC,CAAC,OAAO;;;OAGV,CAAC;QACF,CAAC;QACD,OAAO,IAAI,CAAA;qBACI,kBAAkB;;cAEzB,IAAI,CAAC,YAAY,KAAK,QAAQ;YACpC,CAAC,CAAC,IAAI,CAAA,8CAA8C,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,uBAAuB;YACnG,CAAC,CAAC,OAAO;;uBAEM,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,8CAA8C,CAAC,CAAC,CAAC,0BAA0B;;gBAElG,IAAI,CAAC,IAAI;;cAEX,IAAI,CAAC,YAAY,KAAK,OAAO;YACnC,CAAC,CAAC,IAAI,CAAA,8CAA8C,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,uBAAuB;YACnG,CAAC,CAAC,OAAO;;;OAGV,CAAC;IACN,CAAC;;AA9EQ,yBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAOvB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACpB;AAMnB;IADH,QAAQ,EAAE;gDACO;AAMd;IADH,QAAQ,EAAE;oDACW;AAYlB;IADH,QAAQ,EAAE;wDACuC;AAM9C;IADH,QAAQ,EAAE;gDACO;AA4CpB,IAAI,cAAc,CAAC,GAAG,CAAC,uBAAuB,CAAC,KAAK,SAAS,EAAE,CAAC;IAC5D,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,kBAAkB,CAAC,CAAC;AACvE,CAAC;AAQD,eAAe,kBAAkB,CAAC","sourcesContent":["import { html, nothing,  } from 'lit';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './utility-nav-item.styles.js';\n\nexport class Cre8UtilityNavItem extends Cre8Element {\n    static styles = [styles];\n\n  /**\n   * Hide text toggle\n   * 1) Visually hides the text so screenreaders can still read for accessibility when set to true.\n   */\n  @property({ type: Boolean, reflect: true })\n      hideText?: boolean;\n\n  /**\n   * URL of the utility nav item\n   */\n  @property()\n      href?: string;\n\n  /**\n   * Icon name\n   */\n  @property()\n      iconName?: string;\n\n  /**\n   * Icon position\n   * <cre8-text-passage size=\"sm\">\n   * <ul>\n   * <li>**before** places the icon before the text</li>\n   * <li>**after** places the icon after the text</li>\n   * </ul>\n   * </cre8-text-passage>\n   */\n  @property()\n      iconPosition?: 'before' | 'after' = undefined;\n\n  /**\n   * Text of the utility nav item\n   */\n  @property()\n      text?: string;\n\n  render() {\n      const componentClassName = this.componentClassNames('cre8-c-utility-nav__item', {});\n\n      if (this.href) {\n          return html`\n        <li class=\"${componentClassName}\">\n          <a href=\"${this.href}\" class=\"cre8-c-utility-nav__link\">\n            ${this.iconPosition === 'before'\n        ? html`<cre8-icon-legacy aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\"></cre8-icon-legacy>`\n        : nothing}\n            <span\n              class=\"${this.hideText ? 'cre8-u-is-vishidden cre8-c-utility-nav__text' : 'cre8-c-utility-nav__text'}\"\n            >\n              ${this.text}\n            </span>\n            ${this.iconPosition === 'after'\n        ? html`<cre8-icon-legacy aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\"></cre8-icon-legacy>`\n        : nothing}\n          </a>\n        </li>\n      `;\n      }\n      return html`\n        <li class=\"${componentClassName}\">\n          <button class=\"cre8-c-utility-nav__link\">\n            ${this.iconPosition === 'before'\n        ? html`<cre8-icon-legacy aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\"></cre8-icon-legacy>`\n        : nothing}\n            <span\n              class=\"${this.hideText ? 'cre8-u-is-vishidden cre8-c-utility-nav__text' : 'cre8-c-utility-nav__text'}\"\n            >\n              ${this.text}\n            </span>\n            ${this.iconPosition === 'after'\n        ? html`<cre8-icon-legacy aria-hidden=\"true\" name=\"${ifDefined(this.iconName)}\"></cre8-icon-legacy>`\n        : nothing}\n          </button>\n        </li>\n      `;\n  }\n}\n\nif (customElements.get('cre8-utility-nav-item') === undefined) {\n    customElements.define('cre8-utility-nav-item', Cre8UtilityNavItem);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-utility-nav-item': Cre8UtilityNavItem;\n  }\n}\n\nexport default Cre8UtilityNavItem;\n"]}

package/lib/components/utility-nav-item/utility-nav-item.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-utility-nav__item{margin:0;padding:0}.cre8-c-utility-nav__link{display:flex;font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform);border:none;background:none;appearance:none;padding:0;text-align:left;color:var(--cre8-utility-nav-link-color, var(--cre8-color-content-brand));cursor:pointer;transition:color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-utility-nav__link:hover,.cre8-c-utility-nav__link:focus{color:var(--cre8-color-content-brand-hover)}cre8-icon-legacy{--cre8-icon-height: 1.5rem;--cre8-icon-width: 1.5rem}.cre8-c-utility-nav__text+cre8-icon-legacy{margin-left:0.5rem}cre8-icon-legacy+.cre8-c-utility-nav__text{margin-left:0.5rem}`;
+export default styles;
+//# sourceMappingURL=utility-nav-item.styles.js.map

package/lib/components/utility-nav-item/utility-nav-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utility-nav-item.styles.js","sourceRoot":"","sources":["../../../components/utility-nav-item/utility-nav-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,suFAAsuF,CAAC;AACzvF,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-utility-nav__item{margin:0;padding:0}.cre8-c-utility-nav__link{display:flex;font-family:var(--cre8-typography-label-default-font-family);font-size:var(--cre8-typography-label-default-font-size);font-weight:var(--cre8-typography-label-default-font-weight);line-height:var(--cre8-typography-label-default-line-height);text-decoration:var(--cre8-typography-label-default-text-decoration);text-transform:var(--cre8-typography-label-default-text-transform);border:none;background:none;appearance:none;padding:0;text-align:left;color:var(--cre8-utility-nav-link-color, var(--cre8-color-content-brand));cursor:pointer;transition:color var(--cre8-anim-fade-quick) var(--cre8-anim-ease)}.cre8-c-utility-nav__link:hover,.cre8-c-utility-nav__link:focus{color:var(--cre8-color-content-brand-hover)}cre8-icon-legacy{--cre8-icon-height: 1.5rem;--cre8-icon-width: 1.5rem}.cre8-c-utility-nav__text+cre8-icon-legacy{margin-left:0.5rem}cre8-icon-legacy+.cre8-c-utility-nav__text{margin-left:0.5rem}`;\nexport default styles;\n"]}