@momentum-design/components 0.129.47 → 0.129.48

package/dist/browser/index.js

@@ -2082,10 +2082,16 @@
             length-unit="${le.ICON_LENGTH_UNIT}"
             name="${this.iconName}"
           ></mdc-icon>`:W}renderTitle(){return _`<div part="title-container">
-        <mdc-text part="title" type="${le.TITLE_TYPE}" tagname="${this.titleTagName}">${this.cardTitle}</mdc-text>
-        ${this.subtitle?_`<mdc-text part="subtitle" type="${le.SUBTITLE_TYPE}" tagname="${this.subtitleTagName}"
-              >${this.subtitle}</mdc-text
-            >`:W}
+        <slot name="title">
+          ${this.cardTitle?_`<mdc-text part="title" type="${le.TITLE_TYPE}" tagname="${this.titleTagName}"
+                >${this.cardTitle}</mdc-text
+              >`:W}
+        </slot>
+        <slot name="subtitle">
+          ${this.subtitle?_`<mdc-text part="subtitle" type="${le.SUBTITLE_TYPE}" tagname="${this.subtitleTagName}"
+                >${this.subtitle}</mdc-text
+              >`:W}
+        </slot>
       </div>`}}return p([u({type:String,attribute:"card-title",reflect:!0})],o.prototype,"cardTitle",2),p([u({type:String,reflect:!0})],o.prototype,"subtitle",2),p([u({type:String,attribute:"image-src",reflect:!0})],o.prototype,"imageSrc",2),p([u({type:String,attribute:"image-alt",reflect:!0})],o.prototype,"imageAlt",2),p([u({type:String,reflect:!0})],o.prototype,"variant",2),p([u({type:String,reflect:!0})],o.prototype,"orientation",2),p([u({type:String,attribute:"title-tag-name",reflect:!0})],o.prototype,"titleTagName",2),p([u({type:String,attribute:"subtitle-tag-name",reflect:!0})],o.prototype,"subtitleTagName",2),p([u({type:String,attribute:"icon-name",reflect:!0})],o.prototype,"iconName",2),o};var bT=B`
   :host {
     --mdc-card-width: 20rem;
@@ -2195,10 +2201,10 @@
   mdc-text::part(text) {
     margin: 0;
   }
-`,xf=[bt,bT];var Vn=class extends Ml(Es(j)){constructor(){super(...arguments);this.handleIconButtons=()=>{var t;(t=this.iconButtons)==null||t.forEach(r=>{r.matches(le.BUTTON)&&(r.setAttribute("variant",$t.TERTIARY),r.setAttribute("size","32"))})}}update(t){super.update(t),t.has("variant")&&this.updateFooterButtonColors(this.variant)}renderHeader(){return this.cardTitle?_`<div part="header">
+`,xf=[bt,bT];var Vn=class extends Ml(Es(j)){constructor(){super(...arguments);this.handleIconButtons=()=>{var t;(t=this.iconButtons)==null||t.forEach(r=>{r.matches(le.BUTTON)&&(r.setAttribute("variant",$t.TERTIARY),r.setAttribute("size","32"))})}}update(t){super.update(t),t.has("variant")&&this.updateFooterButtonColors(this.variant)}renderHeader(){return _`<div part="header">
       ${this.renderIcon()} ${this.renderTitle()}
       <div part="icon-button"><slot name="icon-button" @slotchange=${this.handleIconButtons}></slot></div>
-    </div>`:W}render(){return _`
+    </div>`}render(){return _`
       <slot name="image"> ${this.renderImage()} </slot>
       <div part="body">
         ${this.renderHeader()}
@@ -2231,10 +2237,10 @@
   :host([disabled])::part(image) {
     opacity: 0.5;
   }
-`,Af=[ET,...At()];var Rl=class extends Ml(ae){connectedCallback(){super.connectedCallback(),this.active=void 0,this.size=void 0}renderHeader(){return this.cardTitle?_`<div part="header">${this.renderIcon()} ${this.renderTitle()}</div>`:W}render(){return _`
+`,Af=[ET,...At()];var Rl=class extends Ml(ae){connectedCallback(){super.connectedCallback(),this.active=void 0,this.size=void 0}render(){return _`
       <slot name="image"> ${this.renderImage()} </slot>
       <div part="body">
-        ${this.renderHeader()}
+        <div part="header">${this.renderIcon()} ${this.renderTitle()}</div>
         <slot name="before-body"></slot>
         <slot name="body"></slot>
         <slot name="after-body"></slot>
@@ -2305,7 +2311,7 @@
           part="check"
           ?checked="${this.checked}"
           ?disabled="${this.disabled}"
-        ></mdc-staticcheckbox>`;default:return W}}renderHeader(){return this.cardTitle?_`<div part="header">${this.renderIcon()} ${this.renderTitle()} ${this.renderSelection()}</div>`:W}render(){return _`
+        ></mdc-staticcheckbox>`;default:return W}}renderHeader(){return _`<div part="header">${this.renderIcon()} ${this.renderTitle()} ${this.renderSelection()}</div>`}render(){return _`
       ${this.renderImage()}
       <div part="body">
         ${this.renderHeader()}
@@ -2452,10 +2458,10 @@
   :host([disabled])::part(image) {
     opacity: 0.5;
   }
-`,Mf=[CT,...At()];var ks=class extends kt(Ut(zr(Cr))){constructor(){super();this.checked=!1;this.name="";this.addEventListener("click",this.toggleChecked.bind(this)),this.addEventListener("keydown",this.handleKeyDown.bind(this)),this.addEventListener("keyup",this.toggleOnSpace.bind(this))}connectedCallback(){super.connectedCallback(),this.role=J.RADIO}getAllCardsWithinSameGroup(){return Array.from(document.querySelectorAll(`mdc-cardradio[name="${this.name}"]`))}toggleChecked(){if(this.disabled||this.checked)return;this.getAllCardsWithinSameGroup().forEach(r=>{r.checked=!1}),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}setDisabled(t){this.setAttribute("aria-disabled",`${t}`),this.tabIndex=t?-1:0}update(t){super.update(t),t.has("checked")&&this.setAttribute("aria-checked",`${this.checked}`),t.has("disabled")&&this.setDisabled(this.disabled)}updateCardRadio(t,r){t[r].focus(),t[r].toggleChecked()}handleKeyDown(t){let r=this.getActionForKeyEvent(t);if(r===Z.SPACE){t.preventDefault();return}if(this.disabled)return;let d=this.getAllCardsWithinSameGroup().filter(v=>!v.disabled),m=d.indexOf(this);if(r===Z.DOWN||Z.RIGHT===r){let v=(m+1)%d.length;this.updateCardRadio(d,v)}else if(r===Z.UP||Z.LEFT===r){let v=(m-1+d.length)%d.length;this.updateCardRadio(d,v)}r===Z.ENTER&&this.toggleChecked()}toggleOnSpace(t){this.getActionForKeyEvent(t)===Z.SPACE&&this.toggleChecked()}renderHeader(){return this.cardTitle?_`<div part="header">
+`,Mf=[CT,...At()];var ks=class extends kt(Ut(zr(Cr))){constructor(){super();this.checked=!1;this.name="";this.addEventListener("click",this.toggleChecked.bind(this)),this.addEventListener("keydown",this.handleKeyDown.bind(this)),this.addEventListener("keyup",this.toggleOnSpace.bind(this))}connectedCallback(){super.connectedCallback(),this.role=J.RADIO}getAllCardsWithinSameGroup(){return Array.from(document.querySelectorAll(`mdc-cardradio[name="${this.name}"]`))}toggleChecked(){if(this.disabled||this.checked)return;this.getAllCardsWithinSameGroup().forEach(r=>{r.checked=!1}),this.checked=!0,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}setDisabled(t){this.setAttribute("aria-disabled",`${t}`),this.tabIndex=t?-1:0}update(t){super.update(t),t.has("checked")&&this.setAttribute("aria-checked",`${this.checked}`),t.has("disabled")&&this.setDisabled(this.disabled)}updateCardRadio(t,r){t[r].focus(),t[r].toggleChecked()}handleKeyDown(t){let r=this.getActionForKeyEvent(t);if(r===Z.SPACE){t.preventDefault();return}if(this.disabled)return;let d=this.getAllCardsWithinSameGroup().filter(v=>!v.disabled),m=d.indexOf(this);if(r===Z.DOWN||Z.RIGHT===r){let v=(m+1)%d.length;this.updateCardRadio(d,v)}else if(r===Z.UP||Z.LEFT===r){let v=(m-1+d.length)%d.length;this.updateCardRadio(d,v)}r===Z.ENTER&&this.toggleChecked()}toggleOnSpace(t){this.getActionForKeyEvent(t)===Z.SPACE&&this.toggleChecked()}renderHeader(){return _`<div part="header">
       ${this.renderIcon()} ${this.renderTitle()}
       <mdc-staticradio part="check" ?checked="${this.checked}" ?disabled="${this.disabled}"></mdc-staticradio>
-    </div>`:W}render(){return _`
+    </div>`}render(){return _`
       ${this.renderImage()}
       <div part="body">
         ${this.renderHeader()}