@covalent/components 11.12.1 → 11.13.1

package/icon-lockup/icon-lockup.d.ts

@@ -35,6 +35,12 @@ export declare class CovalentIconLockup extends LitElement {
      * If false, the icon is displayed before the text.
      */
     trailingIcon: boolean;
+    /**
+     * Icon size per scale. Scales not listed fall back to the
+     * corresponding typography line-height CSS variable.
+     */
+    private readonly ICON_SIZE_MAP;
+    private get iconSize();
     /**
      * Tracks if the icon slot has content.
      */

package/icon-lockup.js

@@ -1,14 +1,14 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./query-assigned-elements-8EurZY45.js"),l=require("./property-DYTC_2-m.js"),u=require("./state-C3HoXfoa.js"),p=require("./class-map-DTzB8z-1.js");require("./typography.js");require("./icon.js");const v='.filled{font-variation-settings:"FILL" 1}.hidden{display:none}.icon-lockup{align-items:center;display:flex;gap:4px;max-width:100%}.icon-lockup cv-typography{flex:1 0 0}.icon-lockup--primary,.icon-lockup--loading{color:var(--cv-theme-primary)}.icon-lockup--positive{color:var(--cv-theme-positive)}.icon-lockup--negative{color:var(--cv-theme-negative)}.icon-lockup--caution{color:var(--cv-theme-caution)}.text{font-feature-settings:"liga" off,"clig" off;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trailing-icon{flex-direction:row-reverse}';var h=Object.defineProperty,y=Object.getOwnPropertyDescriptor,e=(s,o,c,i)=>{for(var t=i>1?void 0:i?y(o,c):o,a=s.length-1,r;a>=0;a--)(r=s[a])&&(t=(i?r(o,c,t):r(t))||t);return i&&t&&h(o,c,t),t};exports.CovalentIconLockup=class extends n.s{constructor(){super(...arguments),this.covalentIcon=!1,this.filledIcon=!1,this.icon="",this.scale="body1",this.state="neutral",this.trailingIcon=!1,this._hasIconSlot=!1}checkIconSlot(){var c;const o=(c=this.shadowRoot)==null?void 0:c.querySelector('slot[name="icon"]');this._hasIconSlot=o&&o.assignedNodes().length>0}iconTemplate(){const o={"covalent-icon":this.covalentIcon,filled:this.filledIcon,hidden:this._hasIconSlot};return n.x`<slot name="icon"></slot>
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("./query-assigned-elements-8EurZY45.js"),i=require("./property-DYTC_2-m.js"),u=require("./state-C3HoXfoa.js"),p=require("./class-map-DTzB8z-1.js");require("./typography.js");require("./icon.js");const v='.filled{font-variation-settings:"FILL" 1}.hidden{display:none}.icon-lockup{align-items:center;display:flex;gap:4px;max-width:100%;color:var(--cv-theme-on-surface)}.icon-lockup cv-typography{flex:1 0 0}.icon-lockup cv-icon.covalent-icon{--mdc-icon-font: "covalent-icons"}.icon-lockup--primary,.icon-lockup--loading{color:var(--cv-theme-primary)}.icon-lockup--positive{color:var(--cv-theme-positive)}.icon-lockup--negative{color:var(--cv-theme-negative)}.icon-lockup--caution{color:var(--cv-theme-caution)}.text{font-feature-settings:"liga" off,"clig" off;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trailing-icon{flex-direction:row-reverse}';var h=Object.defineProperty,d=Object.getOwnPropertyDescriptor,e=(s,o,n,l)=>{for(var t=l>1?void 0:l?d(o,n):o,a=s.length-1,r;a>=0;a--)(r=s[a])&&(t=(l?r(o,n,t):r(t))||t);return l&&t&&h(o,n,t),t};exports.CovalentIconLockup=class extends c.s{constructor(){super(...arguments),this.covalentIcon=!1,this.filledIcon=!1,this.icon="",this.scale="body1",this.state="neutral",this.trailingIcon=!1,this.ICON_SIZE_MAP={headline1:"96px",headline2:"80px",headline3:"64px",headline4:"48px",headline5:"32px",subtitle1:"24px",subtitle2:"20px",button:"20px"},this._hasIconSlot=!1}get iconSize(){return this.ICON_SIZE_MAP[this.scale]??`var(--cv-typography-${this.scale}-line-height, 16px)`}checkIconSlot(){var n;const o=(n=this.shadowRoot)==null?void 0:n.querySelector('slot[name="icon"]');this._hasIconSlot=o&&o.assignedNodes().length>0}iconTemplate(){const o={"covalent-icon":this.covalentIcon,filled:this.filledIcon,hidden:this._hasIconSlot};return c.x`<slot name="icon"></slot>
       <cv-icon
         class=${p.o(o)}
-        style="${`font-size: var(--cv-typography-${this.scale}-line-height, 16px)`}"
+        style="${`font-size: ${this.iconSize}`}"
       >
         ${this.icon}
-      </cv-icon>`}render(){const o={"icon-lockup":!0,[`icon-lockup--${this.state}`]:this.state,"trailing-icon":this.trailingIcon};return n.x`
+      </cv-icon>`}render(){const o={"icon-lockup":!0,[`icon-lockup--${this.state}`]:this.state,"trailing-icon":this.trailingIcon};return c.x`
       <cv-typography class=${p.o(o)} scale="${this.scale}">
         ${this.iconTemplate()}
         <div class="text"><slot></slot></div>
       </cv-typography>
-    `}updated(o){super.updated(o),this.checkIconSlot()}};exports.CovalentIconLockup.styles=[n.i`
-      ${n.r(v)}
-    `];e([l.n({type:Boolean,reflect:!0})],exports.CovalentIconLockup.prototype,"covalentIcon",2);e([l.n({type:Boolean,reflect:!0})],exports.CovalentIconLockup.prototype,"filledIcon",2);e([l.n({type:String})],exports.CovalentIconLockup.prototype,"icon",2);e([l.n({type:String})],exports.CovalentIconLockup.prototype,"scale",2);e([l.n({type:String})],exports.CovalentIconLockup.prototype,"state",2);e([l.n({type:Boolean})],exports.CovalentIconLockup.prototype,"trailingIcon",2);e([u.t()],exports.CovalentIconLockup.prototype,"_hasIconSlot",2);exports.CovalentIconLockup=e([n.e("cv-icon-lockup")],exports.CovalentIconLockup);const d=exports.CovalentIconLockup;exports.default=d;
+    `}updated(o){super.updated(o),this.checkIconSlot()}};exports.CovalentIconLockup.styles=[c.i`
+      ${c.r(v)}
+    `];e([i.n({type:Boolean,reflect:!0})],exports.CovalentIconLockup.prototype,"covalentIcon",2);e([i.n({type:Boolean,reflect:!0})],exports.CovalentIconLockup.prototype,"filledIcon",2);e([i.n({type:String})],exports.CovalentIconLockup.prototype,"icon",2);e([i.n({type:String})],exports.CovalentIconLockup.prototype,"scale",2);e([i.n({type:String})],exports.CovalentIconLockup.prototype,"state",2);e([i.n({type:Boolean})],exports.CovalentIconLockup.prototype,"trailingIcon",2);e([u.t()],exports.CovalentIconLockup.prototype,"_hasIconSlot",2);exports.CovalentIconLockup=e([c.e("cv-icon-lockup")],exports.CovalentIconLockup);const I=exports.CovalentIconLockup;exports.default=I;

package/icon-lockup.mjs

@@ -1,18 +1,30 @@
-import { r as v, i as f, s as u, x as p, e as y } from "./query-assigned-elements-D930kELM.mjs";
+import { r as v, i as u, s as f, x as p, e as d } from "./query-assigned-elements-D930kELM.mjs";
 import { n } from "./property-DJzm_oB9.mjs";
-import { t as d } from "./state-B_tK3mBm.mjs";
+import { t as y } from "./state-B_tK3mBm.mjs";
 import { o as h } from "./class-map-DPUylGZM.mjs";
 import "./typography.mjs";
 import "./icon.mjs";
-const g = '.filled{font-variation-settings:"FILL" 1}.hidden{display:none}.icon-lockup{align-items:center;display:flex;gap:4px;max-width:100%}.icon-lockup cv-typography{flex:1 0 0}.icon-lockup--primary,.icon-lockup--loading{color:var(--cv-theme-primary)}.icon-lockup--positive{color:var(--cv-theme-positive)}.icon-lockup--negative{color:var(--cv-theme-negative)}.icon-lockup--caution{color:var(--cv-theme-caution)}.text{font-feature-settings:"liga" off,"clig" off;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trailing-icon{flex-direction:row-reverse}';
-var m = Object.defineProperty, I = Object.getOwnPropertyDescriptor, e = (t, i, l, s) => {
-  for (var c = s > 1 ? void 0 : s ? I(i, l) : i, r = t.length - 1, a; r >= 0; r--)
-    (a = t[r]) && (c = (s ? a(i, l, c) : a(c)) || c);
-  return s && c && m(i, l, c), c;
+const g = '.filled{font-variation-settings:"FILL" 1}.hidden{display:none}.icon-lockup{align-items:center;display:flex;gap:4px;max-width:100%;color:var(--cv-theme-on-surface)}.icon-lockup cv-typography{flex:1 0 0}.icon-lockup cv-icon.covalent-icon{--mdc-icon-font: "covalent-icons"}.icon-lockup--primary,.icon-lockup--loading{color:var(--cv-theme-primary)}.icon-lockup--positive{color:var(--cv-theme-positive)}.icon-lockup--negative{color:var(--cv-theme-negative)}.icon-lockup--caution{color:var(--cv-theme-caution)}.text{font-feature-settings:"liga" off,"clig" off;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.trailing-icon{flex-direction:row-reverse}';
+var m = Object.defineProperty, I = Object.getOwnPropertyDescriptor, e = (t, i, s, l) => {
+  for (var c = l > 1 ? void 0 : l ? I(i, s) : i, a = t.length - 1, r; a >= 0; a--)
+    (r = t[a]) && (c = (l ? r(i, s, c) : r(c)) || c);
+  return l && c && m(i, s, c), c;
 };
-let o = class extends u {
+let o = class extends f {
   constructor() {
-    super(...arguments), this.covalentIcon = !1, this.filledIcon = !1, this.icon = "", this.scale = "body1", this.state = "neutral", this.trailingIcon = !1, this._hasIconSlot = !1;
+    super(...arguments), this.covalentIcon = !1, this.filledIcon = !1, this.icon = "", this.scale = "body1", this.state = "neutral", this.trailingIcon = !1, this.ICON_SIZE_MAP = {
+      headline1: "96px",
+      headline2: "80px",
+      headline3: "64px",
+      headline4: "48px",
+      headline5: "32px",
+      subtitle1: "24px",
+      subtitle2: "20px",
+      button: "20px"
+    }, this._hasIconSlot = !1;
+  }
+  get iconSize() {
+    return this.ICON_SIZE_MAP[this.scale] ?? `var(--cv-typography-${this.scale}-line-height, 16px)`;
   }
   /**
    * Checks if there is content in the icon slot and updates `hasIconSlot`.
@@ -37,7 +49,7 @@ let o = class extends u {
     return p`<slot name="icon"></slot>
       <cv-icon
         class=${h(t)}
-        style="${`font-size: var(--cv-typography-${this.scale}-line-height, 16px)`}"
+        style="${`font-size: ${this.iconSize}`}"
       >
         ${this.icon}
       </cv-icon>`;
@@ -64,7 +76,7 @@ let o = class extends u {
   }
 };
 o.styles = [
-  f`
+  u`
       ${v(g)}
     `
 ];
@@ -87,13 +99,13 @@ e([
   n({ type: Boolean })
 ], o.prototype, "trailingIcon", 2);
 e([
-  d()
+  y()
 ], o.prototype, "_hasIconSlot", 2);
 o = e([
-  y("cv-icon-lockup")
+  d("cv-icon-lockup")
 ], o);
-const L = o;
+const b = o;
 export {
   o as CovalentIconLockup,
-  L as default
+  b as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@covalent/components",
-  "version": "11.12.1",
+  "version": "11.13.1",
   "description": "a catalog of material components for covalent",
   "main": "./index.js",
   "module": "./index.mjs",