@orangelogic/design-system 2.78.0 → 2.79.0-ci.2

package/library/components/typeface.js

@@ -1,11 +1,11 @@
 import d from "./grid.js";
 import m from "./grid-item.js";
-import { C as x } from "../chunks/icon-button.C3eqeQl9.js";
+import { C as x } from "../chunks/icon-button.BuhCp--_.js";
 import h from "./line-clamp.js";
 import g from "./space.js";
-import { C as w } from "../chunks/typography.oDzoLbZS.js";
+import { C as w } from "../chunks/typography.DJC_UXgs.js";
 import { n as a, C as u } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as _ } from "../chunks/component.styles.DMSLciL5.js";
+import { c as _ } from "../chunks/component.styles.CRO4Odto.js";
 import { c as v } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as S } from "../chunks/i18n.BUW7B9hr.js";
 import { i as $, x as r } from "../chunks/lit-element.jLBm65_O.js";
@@ -13,52 +13,7 @@ import { o as y } from "../chunks/if-defined.BRoBj_Rp.js";
 import { o as b } from "../chunks/style-map.llVFPd__.js";
 import { n as p } from "../chunks/when.Dr1es41R.js";
 import { c as C } from "../chunks/capitalize.CNStXZBq.js";
-const D = $`
-  :host {
-    --typeface-font-family: var(--cx-font-sans);
-    --typeface-font-style: normal;
-    --typeface-font-weight: var(--cx-font-weight-normal);
-
-    display: block;
-    width: 100%;
-  }
-
-  .typeface__name,
-  .typeface__preview-text,
-  .typeface__static-text,
-  .typeface__description {
-    color: var(--color);
-    overflow-wrap: break-word;
-  }
-
-  .typeface__name,
-  .typeface__preview-text,
-  .typeface__static-text {
-    --font-family: var(--typeface-font-family);
-    --font-style: var(--typeface-font-style);
-    --font-weight: var(--typeface-font-weight);
-  }
-
-  .typeface__preview-text {
-    --font-size: var(--cx-font-size-4x-large);
-    text-align: var(--text-align, left);
-  }
-
-  .typeface__preview-text::part(base) {
-    line-height: 1.5;
-    padding-right: var(--cx-spacing-x-large);
-  }
-
-  .typeface__static-text {
-    --font-size: var(--cx-font-size-medium-large);
-    --line-height: 1;
-  }
-
-  .typeface__description {
-    flex-basis: 120px;
-    font-family: var(--cx-font-sans);
-  }
-`;
+const D = $`:host{--typeface-font-family:var(--cx-font-sans);--typeface-font-style:normal;--typeface-font-weight:var(--cx-font-weight-normal);width:100%;display:block}.typeface__name,.typeface__preview-text,.typeface__static-text,.typeface__description{color:var(--color);overflow-wrap:break-word}.typeface__name,.typeface__preview-text,.typeface__static-text{--font-family:var(--typeface-font-family);--font-style:var(--typeface-font-style);--font-weight:var(--typeface-font-weight)}.typeface__preview-text{--font-size:var(--cx-font-size-4x-large);text-align:var(--text-align,left)}.typeface__preview-text::part(base){padding-right:var(--cx-spacing-x-large);line-height:1.5}.typeface__static-text{--font-size:var(--cx-font-size-medium-large);--line-height:1}.typeface__description{font-family:var(--cx-font-sans);flex-basis:120px}`;
 var z = Object.defineProperty, I = Object.getOwnPropertyDescriptor, e = (o, c, s, n) => {
   for (var i = n > 1 ? void 0 : n ? I(c, s) : c, l = o.length - 1, f; l >= 0; l--)
     (f = o[l]) && (i = (n ? f(c, s, i) : f(i)) || i);
@@ -73,89 +28,35 @@ let t = class extends u {
   }
   render() {
     const o = this.variant === "compact" ? "6" : "5";
-    return r`<div
-      class="typeface"
-      style=${b({
+    return r`<div class="typeface" style=${b({
       "--typeface-font-family": `"${this.fontFamily.replace(/"/g, '\\"')}"`,
       "--typeface-font-style": this.fontStyle,
       "--typeface-font-weight": this.fontWeight
-    })}
-    >
-      ${p(
+    })}>${p(
       this.variant === "detailed",
-      () => r`<cx-typography class="typeface__name">
-            ${this.fontFamily}-${this.fontWeight}
-          </cx-typography>`
-    )}
-      <cx-grid
-        columns=${o}
-        wrap="wrap"
-        column-spacing="var(--cx-spacing-medium)"
-        row-spacing="var(--cx-spacing-medium)"
-        use-flex-gap
-        use-container
-      >
-        ${p(
+      () => r`<cx-typography class="typeface__name">${this.fontFamily}-${this.fontWeight}</cx-typography>`
+    )}<cx-grid columns=${o} wrap="wrap" column-spacing="var(--cx-spacing-medium)" row-spacing="var(--cx-spacing-medium)" use-flex-gap use-container>${p(
       this.variant === "compact",
       () => r`<cx-grid-item xs=${o} md="1"></cx-grid-item>`
-    )}
-        <cx-grid-item xs=${o} md="2">
-          <cx-line-clamp lines="1">
-            <cx-typography class="typeface__preview-text">
-              ${this.previewText}
-            </cx-typography>
-          </cx-line-clamp>
-        </cx-grid-item>
-        <cx-grid-item xs=${o} md="2">
-          <cx-typography class="typeface__static-text">
+    )}<cx-grid-item xs=${o} md="2"><cx-line-clamp lines="1"><cx-typography class="typeface__preview-text">${this.previewText}</cx-typography></cx-line-clamp></cx-grid-item><cx-grid-item xs=${o} md="2"><cx-typography class="typeface__static-text">
             ABCDEFGHIJKLMNOPQRSTUVWXYZ
-          </cx-typography>
-          <cx-typography class="typeface__static-text">
+          </cx-typography><cx-typography class="typeface__static-text">
             abcdefghijklmnopqrstuvwxyz
-          </cx-typography>
-          <cx-typography class="typeface__static-text">
+          </cx-typography><cx-typography class="typeface__static-text">
             1234567890!@#$%^&*()-=/:;.,”
-          </cx-typography>
-        </cx-grid-item>
-        <cx-grid-item xs=${o} md="1">
-          <cx-space
-            direction="horizontal"
-            align-items="center"
-            justify-content="space-between"
-            wrap="nowrap"
-          >
-            ${p(
+          </cx-typography></cx-grid-item><cx-grid-item xs=${o} md="1"><cx-space direction="horizontal" align-items="center" justify-content="space-between" wrap="nowrap">${p(
       this.variant === "detailed",
-      () => r`
-                <div class="typeface__description">
-                  <cx-typography>${this.fontFamily}</cx-typography>
-                  <cx-typography>Weight: ${this.fontWeight}</cx-typography>
-                  <cx-typography>
-                    Style: ${C(this.fontStyle)}
-                  </cx-typography>
-                </div>
-              `
+      () => r`<div class="typeface__description"><cx-typography>${this.fontFamily}</cx-typography><cx-typography>Weight: ${this.fontWeight}</cx-typography><cx-typography>
+                    Style: ${C(this.fontStyle)}</cx-typography></div>`
     )}
             ${p(
       this.canDownload && this.fontSrc,
-      () => r`
-                <cx-icon-button
-                  name=${y(
+      () => r`<cx-icon-button name=${y(
         this.downloadIconSrc ? void 0 : this.downloadIconName
-      )}
-                  src=${y(this.downloadIconSrc || void 0)}
-                  class="typeface__download"
-                  label=${this.localize.term("download")}
-                  @click=${this.handleDownload}
-                >
+      )} src=${y(this.downloadIconSrc || void 0)} class="typeface__download" label=${this.localize.term("download")} @click=${this.handleDownload}>
                   Download
-                </cx-icon-button>
-              `
-    )}
-          </cx-space>
-        </cx-grid-item>
-      </cx-grid>
-    </div>`;
+                </cx-icon-button>`
+    )}</cx-space></cx-grid-item></cx-grid></div>`;
   }
 };
 t.styles = [_, D];