@momentum-ui/web-components 2.16.13 → 2.16.15

package/dist/chunks/md-58.js

@@ -1,68 +1,77 @@
-(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[58],{118:function(e,t,d){"use strict";d.r(t),d.d(t,"Card",(function(){return r}));d(17),d(83),d(14),d(73),d(74),d(36),d(43);var r,o=d(5),a=d(6),i=d(0),n=d(2),c=d(13),m=d(1),s=i.css`:host(md-card){display:inline-block}:host(md-card) .md-card{align-content:center;align-items:stretch;display:flex;flex-flow:column nowrap;justify-content:flex-start;background:var(--md-tertiary-white-bg-color);border:var(--md-quaternary-bg-color);border-radius:.5rem;box-shadow:0 .125rem .25rem rgba(0,0,0,.16),0 0 .0625rem rgba(0,0,0,.16);color:var(--md-secondary-text-color);cursor:pointer;max-width:26.5rem;padding:calc(.5rem*2);position:relative;width:100%}:host(md-card) .md-card-header{align-content:flex-start;align-items:flex-start;display:flex;flex-flow:row nowrap;justify-content:space-between;flex:1 0 100%;margin-bottom:.5rem}:host(md-card) .md-card-header md-favorite{padding-top:calc(.5rem*.5)}:host(md-card) .md-card-header-title{display:flex;flex:1 1 100%;flex-direction:column;margin:0 .5rem}:host(md-card) .md-card-header-title h1{color:var(--md-primary-text-color);font-family:var(--brand-font-medium, "CiscoSans-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif);font-size:16px;line-height:calc(.5rem*3);margin:0}:host(md-card) .md-card-header-title h2{color:var(--md-secondary-text-color);font-size:12px;line-height:calc(.5rem*2.25)}:host(md-card) .md-card-header-actions{align-self:stretch;display:inline-flex;position:relative;z-index:1}:host(md-card) .md-card-header-actions .md-card-info-icon,:host(md-card) .md-card-header-actions .md-card-max-icon{padding-right:.5rem}:host(md-card) .md-card-header-actions md-menu-overlay::part(overlay-content){max-width:9rem}:host(md-card) .md-card .md-card-menu-icon{border-radius:calc(.5rem/2);display:inline-flex}:host(md-card) .md-card .md-card-menu-icon::part(button){padding:calc(.5rem*.25)}:host(md-card) .md-card .md-card-menu-icon:hover{background-color:var(--md-tertiary-bg-color)}:host(md-card) .md-card .md-card-menu-icon:active{background-color:var(--md-quaternary-bg-color)}:host(md-card) .md-card .md-card-menu-list-items{padding:calc(.5rem*.25)}:host(md-card) .md-card-content{background:var(--md-secondary-bg-color);border:var(--md-quaternary-bg-color);border-radius:calc(.5rem/2);height:14rem;margin-bottom:calc(.5rem*2);overflow:hidden}:host(md-card) .md-card.full-screen{display:inline-block;height:100%!important;left:0;max-width:100%;position:absolute;top:0;width:100%}:host(md-card) .md-card.full-screen .md-card-content{height:auto}:host(md-card) .md-card-footer{display:flex;flex-wrap:wrap;gap:.5rem}@media(forced-colors:active){:host(md-card) .md-card{box-shadow:none;outline:1px solid CanvasText}:host(md-card) .md-card:focus{outline:2px solid Highlight}:host(md-card) .md-card-header md-favorite{color:windowText}}`,l=function(e,t,d,r){var o,a=arguments.length,i=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,d):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,d,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(i=(a<3?o(i):a>3?o(t,d,i):o(t,d))||i);return a>3&&i&&Object.defineProperty(t,d,i),i};!function(e){let t=class extends i.LitElement{constructor(){super(...arguments),this.title="title",this.subtitle="",this.id="",this.info="",this.infoAriaLabel="Card Info",this.menuAriaLabel="Card Menu",this.menuOptions=[]}static get styles(){return[a.a,s]}handleCardClick(){this.dispatchEvent(new CustomEvent("card-click",{detail:{id:this.id},bubbles:!0,composed:!0}))}handleCardKeyDown(e){e.code!==m.b.Enter&&e.code!==m.b.Space||this.dispatchEvent(new CustomEvent("card-keydown",{detail:{id:this.id},bubbles:!0,composed:!0}))}handleCardMenuEvent(e,t){e.stopPropagation();const d=t.toLowerCase();this.dispatchEvent(new CustomEvent("card-menu-click",{detail:{id:this.id,type:d},bubbles:!0,composed:!0}))}handleCardMenuKeyDown(e,t){e.preventDefault(),this.dispatchEvent(new CustomEvent("card-menu-keydown",{detail:{id:this.id,type:t.toLowerCase(),keyCode:e.code},bubbles:!0,composed:!0}))}render(){return i.html`
-        <div
-          class="md-card"
-          id="${this.id}"
-          part="card"
-          tabindex="0"
-          @click=${()=>this.handleCardClick()}
-          @keydown=${e=>this.handleCardKeyDown(e)}
-        >
-          <div class="md-card-header">
+(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[58],{117:function(t,e,r){"use strict";r.r(e),r.d(e,"CardAiVariant",(function(){return i})),r.d(e,"CardAi",(function(){return d}));r(17),r(14);var i,d,a=r(5),o=r(6),s=r(0),c=r(2),n=s.css`:host(md-card-ai){display:inline-block}:host(md-card-ai) .content-margin{margin-left:1.5rem}:host(md-card-ai) .md-card-ai{align-content:center;align-items:stretch;display:flex;flex-flow:column nowrap;justify-content:flex-start;color:var(--md-secondary-text-color);min-width:21.875rem;max-width:26.5rem;padding:0;position:relative;width:100%}:host(md-card-ai) .md-card-ai-header{align-content:flex-start;align-items:flex-start;display:flex;flex-flow:row nowrap;justify-content:space-between;flex:1 0 100%;margin-bottom:.5rem}:host(md-card-ai) .md-card-ai-header md-icon{padding-top:calc(.5rem*.5)}:host(md-card-ai) .md-card-ai-header-title{display:flex;flex:1 1 100%;flex-direction:column;margin:0 .5rem;color:var(--md-primary-text-color)}:host(md-card-ai) .md-card-ai-header-title h3{font-weight:600}:host(md-card-ai) .md-card-ai-card-body-response,:host(md-card-ai) .md-card-ai-card-body-response-no-bottom-border-radius,:host(md-card-ai) .md-card-ai-card-body-response-with-bottom-border-radius{color:var(--md-primary-text-color);background:var(--md-secondary-bg-color);background-color:var(--md-background-tertiary);border:var(--md-quaternary-bg-color);margin-bottom:calc(.5rem*2);padding:.5rem .75rem .75rem .75rem}:host(md-card-ai) .md-card-ai-card-body-response-with-bottom-border-radius{border-radius:.5rem}:host(md-card-ai) .md-card-ai-card-body-response-no-bottom-border-radius{border-radius:.5rem .5rem 0 0}:host(md-card-ai) .md-card-ai-card-body-user-query{color:var(--md-primary-text-color);background:var(--md-secondary-bg-color);background-color:var(--card-ai-blue-bg-color);border:var(--md-quaternary-bg-color);border-radius:.5rem .5rem 0 .5rem;margin-bottom:calc(.5rem*2);padding:.5rem}:host(md-card-ai) .md-card-ai-divider{border-bottom:1px solid var(--md-primary-text-color);margin:1rem 0}:host(md-card-ai) .md-card-ai-time{font-weight:400;margin-right:.5rem}:host(md-card-ai) .md-card-ai-time-wrapper{display:flex;align-items:center}:host(md-card-ai) .md-card-ai-dot-separator{margin-right:.5rem}:host(md-card-ai) .md-card-ai-feedback{display:flex;align-items:center}:host(md-card-ai) .md-card-ai-thumbs-up{padding-right:.3125rem}:host(md-card-ai) .md-card-ai-copy-button-container{margin-left:auto}:host(md-card-ai) .md-card-ai-footer{display:flex;flex-wrap:wrap;gap:.5rem}`,m=r(12),h=function(t,e,r,i){var d,a=arguments.length,o=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,r):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,r,i);else for(var s=t.length-1;s>=0;s--)(d=t[s])&&(o=(a<3?d(o):a>3?d(e,r,o):d(e,r))||o);return a>3&&o&&Object.defineProperty(e,r,o),o};!function(t){t.USER_QUERY="user_query",t.RESPONSE="response"}(i||(i={})),function(t){let e=class extends s.LitElement{constructor(){super(...arguments),this.id="",this.title="",this.cardText="",this.timestamp="",this.summariseMoreVisible=!1,this.variant=i.RESPONSE,this.copyChecked=!1,this.thumbsUpChecked=!1,this.thumbsDownChecked=!1}static get styles(){return[o.a,n]}thumbsUpToggled(){this.thumbsDownChecked=!1,this.thumbsUpChecked=!this.thumbsUpChecked,this.dispatchEvent(new CustomEvent("thumbs-up-toggled",{detail:{id:this.id},bubbles:!0,composed:!0}))}thumbsDownToggled(){this.thumbsUpChecked=!1,this.thumbsDownChecked=!this.thumbsDownChecked,this.dispatchEvent(new CustomEvent("thumbs-down-toggled",{detail:{id:this.id},bubbles:!0,composed:!0}))}summariseMoreToggled(){this.dispatchEvent(new CustomEvent("summarise-more-toggled",{detail:{id:this.id},bubbles:!0,composed:!0}))}copyToggled(){navigator.clipboard.writeText(this.cardText),this.copyChecked=!0,setTimeout(()=>{this.copyChecked=!1},2e3)}renderHeader(){return this.variant===i.RESPONSE&&""!==this.title?s.html`
+          <div class="md-card-ai-header">
             <slot name="card-header-aside">
-              <md-favorite value="${"card-"+this.id}"></md-favorite>
+              <md-icon name="cisco-ai-assistant-color" iconSet="momentumBrandVisuals"></md-icon>
             </slot>
-            <div class="md-card-header-title">
+            <div class="md-card-ai-header-title">
               <slot name="card-header-title">
-                <h1>${this.title}</h1>
-                <h2>${this.subtitle}</h2>
+                <h3>${this.title}</h3>
               </slot>
             </div>
-            <div class="md-card-header-actions">
-              ${this.info?i.html`
-                    <md-tooltip message="${this.info}" placement="bottom">
-                      <md-button
-                        ariaLabel="${this.infoAriaLabel}"
-                        class="md-card-info-icon"
-                        color="color-none"
-                        size="size-none"
-                      >
-                        <md-icon slot="icon" name="info-circle-bold" size="16" iconSet="momentumDesign"></md-icon>
-                      </md-button>
-                    </md-tooltip>
-                  `:n.nothing}
-              ${this.menuOptions.length?i.html`
-                    <md-menu-overlay class="md-card-menu" placement="bottom-start">
-                      <md-button
-                        ariaLabel="${this.menuAriaLabel}"
-                        class="md-card-menu-icon"
-                        color="color-none"
-                        size="size-none"
-                        slot="menu-trigger"
-                      >
-                        <md-icon slot="icon" name="more-adr-bold" size="16" iconSet="momentumDesign"></md-icon>
-                      </md-button>
-                      <div class="md-card-menu-list-items" style="width: 100%;">
-                        <md-list>
-                          ${Object(c.repeat)(this.menuOptions,(e,t)=>i.html`
-                              <md-list-item
-                                class="${"menu-item-"+t}"
-                                slot="list-item"
-                                @click=${t=>this.handleCardMenuEvent(t,e)}
-                                @keydown=${t=>this.handleCardMenuKeyDown(t,e)}
-                                >${e}</md-list-item
-                              >
-                            `)}
-                        </md-list>
-                      </div>
-                    </md-menu-overlay>
-                  `:n.nothing}
-            </div>
           </div>
-          <div class="md-card-content">
-            <slot name="content"></slot>
+        `:c.nothing}renderCardText(){const t=this.timestamp?"with-bottom-border-radius":"no-bottom-border-radius",e={"md-card-ai-card-body-user-query":this.variant===i.USER_QUERY,["md-card-ai-card-body-response-"+t]:this.variant===i.RESPONSE};return""!==this.cardText?s.html`
+          <div class=${Object(m.classMap)(e)}>
+            <h3>${this.cardText}</h3>
+            ${this.renderResponseCard()}
+          </div>
+        `:c.nothing}renderThumbsUpButton(){const t=this.thumbsUpChecked?"secondary":"ghost",e=this.thumbsUpChecked?"This is helpful, selected":"This is helpful";return s.html`
+        <div class="md-card-ai-thumbs-up">
+          <md-button
+            circle
+            variant=${t}
+            size="28"
+            ariaLabel=${e}
+            @click=${this.thumbsUpToggled}
+          >
+            <md-icon slot="icon" name="like-regular" iconSet="momentumDesign"></md-icon>
+          </md-button>
+        </div>
+      `}renderThumbsDownButton(){const t=this.thumbsDownChecked?"secondary":"ghost",e=this.thumbsDownChecked?"This is not helpful, selected":"This is not helpful";return s.html`
+        <div>
+          <md-button
+            circle
+            variant=${t}
+            size="28"
+            ariaLabel=${e}
+            @click=${this.thumbsDownToggled}
+          >
+            <md-icon slot="icon" name="dislike-regular" iconSet="momentumDesign"></md-icon>
+          </md-button>
+        </div>
+      `}renderCopyButton(){const t=this.copyChecked?"secondary":"ghost",e=this.copyChecked?"Copied, selected":"Copy summary";return s.html`
+        <div class="md-card-ai-copy-button-container">
+          <md-button
+            size="32"
+            variant=${t}
+            ariaLabel=${e}
+            outline
+            @click=${this.copyToggled}
+          >
+            <md-icon
+              slot="icon"
+              name=${this.copyChecked?"check-regular":"copy-regular"}
+              iconSet="momentumDesign"
+            ></md-icon>
+            <span slot="text">${this.copyChecked?"Copied":"Copy"}</span>
+          </md-button>
+        </div>
+      `}renderResponseCard(){return this.variant===i.RESPONSE&&""!==this.timestamp?s.html`
+          <div class="md-card-ai-divider"></div>
+          <div class="md-card-ai-time-wrapper">
+            <time class="md-card-ai-time" aria-hidden="true" datetime=${this.timestamp}> ${this.timestamp} </time>
+            <span class="md-card-ai-dot-separator">&#8226;</span>
+            <div class="md-card-ai-feedback">${this.renderThumbsUpButton()} ${this.renderThumbsDownButton()}</div>
+            ${this.renderCopyButton()}
           </div>
-          <div class="md-card-footer">
-            <slot name="footer"> </slot>
+        `:c.nothing}renderFooter(){return this.variant===i.RESPONSE&&this.summariseMoreVisible?s.html`
+          <div class="md-card-ai-footer">
+            <md-button size="32" variant="ghost" outline @click=${this.summariseMoreToggled}>
+              <span slot="text">Summarise more</span>
+            </md-button>
           </div>
+        `:c.nothing}render(){return s.html`
+        <div class="md-card-ai" id="${this.id}" part="card" tabindex="0">
+          ${this.renderHeader()}
+          <div class="content-margin">${this.renderCardText()} ${this.renderFooter()}</div>
         </div>
-      `}};l([Object(i.property)({type:String})],t.prototype,"title",void 0),l([Object(i.property)({type:String})],t.prototype,"subtitle",void 0),l([Object(i.property)({type:String})],t.prototype,"id",void 0),l([Object(i.property)({type:String})],t.prototype,"info",void 0),l([Object(i.property)({type:String,attribute:"info-aria-label"})],t.prototype,"infoAriaLabel",void 0),l([Object(i.property)({type:String,attribute:"menu-aria-label"})],t.prototype,"menuAriaLabel",void 0),l([Object(i.property)({type:Array})],t.prototype,"menuOptions",void 0),t=l([Object(o.a)("md-card")],t),e.ELEMENT=t}(r||(r={}))}}]);
+      `}};h([Object(s.property)({type:String})],e.prototype,"id",void 0),h([Object(s.property)({type:String})],e.prototype,"title",void 0),h([Object(s.property)({type:String})],e.prototype,"cardText",void 0),h([Object(s.property)({type:String})],e.prototype,"timestamp",void 0),h([Object(s.property)({type:Boolean})],e.prototype,"summariseMoreVisible",void 0),h([Object(s.property)({type:String})],e.prototype,"variant",void 0),h([Object(s.internalProperty)()],e.prototype,"copyChecked",void 0),h([Object(s.internalProperty)()],e.prototype,"thumbsUpChecked",void 0),h([Object(s.internalProperty)()],e.prototype,"thumbsDownChecked",void 0),e=h([Object(a.a)("md-card-ai")],e),t.ELEMENT=e}(d||(d={}))}}]);

package/dist/chunks/md-59.js

@@ -1,22 +1,68 @@
-(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[59],{119:function(e,t,s){"use strict";s.r(t),s.d(t,"ChatMessage",(function(){return a}));var a,i=s(6),o=s(5),c=s(0),r=c.css`:host(:focus){box-shadow:none;outline:0!important}:host(md-chat-message) .md-chat-message{color:var(--chat-message-color,#1c1c1c);display:flex;font-size:.875rem;line-height:1.375rem;margin:.75rem 0}:host(md-chat-message) .md-chat-message_content{display:flex;flex-direction:column;padding-left:.75rem}:host(md-chat-message) .md-chat-message_heading{color:var(--chat-message-color-heading,#3b3b3b);display:flex;flex:0 1 auto;font-size:.75rem;line-height:.75rem;margin-bottom:calc(.75rem*.5)}:host(md-chat-message) .md-chat-message_title{align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:center;flex:0 1 auto}:host(md-chat-message) .md-chat-message_title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;display:block}:host(md-chat-message) .md-chat-message_time{margin-left:calc(.75rem*1.5)}@media(forced-colors:active){.md-alert__icon{background-color:Canvas}}`,l=(s(53),s(3)),n=function(e,t,s,a){var i,o=arguments.length,c=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,s):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(e,t,s,a);else for(var r=e.length-1;r>=0;r--)(i=e[r])&&(c=(o<3?i(c):o>3?i(t,s,c):i(t,s))||c);return o>3&&c&&Object.defineProperty(t,s,c),c};!function(e){let t=class extends c.LitElement{constructor(){super(...arguments),this.title="",this.src="",this.time="",this.label="Avatar",this.self=!1}static get styles(){return[i.a,r]}render(){return c.html`
-        <div class="md-chat-message">
-          <md-avatar
-            type=${Object(l.ifDefined)(this.self?"self":void 0)}
-            title=${this.self?"self":this.title}
-            label="${this.label}"
-            src=${Object(l.ifDefined)(this.self?void 0:this.src)}
-          ></md-avatar>
-
-          <div class="md-chat-message_content">
-            <div class="md-chat-message_heading">
-              <div class="md-chat-message_title">
-                <span>${this.self?"You":this.title}</span>
-              </div>
-              <div class="md-chat-message_time">${this.time}</div>
+(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[59],{118:function(e,t,d){"use strict";d.r(t),d.d(t,"Card",(function(){return r}));d(17),d(83),d(14),d(74),d(75),d(36),d(43);var r,o=d(5),a=d(6),i=d(0),n=d(2),c=d(13),m=d(1),s=i.css`:host(md-card){display:inline-block}:host(md-card) .md-card{align-content:center;align-items:stretch;display:flex;flex-flow:column nowrap;justify-content:flex-start;background:var(--md-tertiary-white-bg-color);border:var(--md-quaternary-bg-color);border-radius:.5rem;box-shadow:0 .125rem .25rem rgba(0,0,0,.16),0 0 .0625rem rgba(0,0,0,.16);color:var(--md-secondary-text-color);cursor:pointer;max-width:26.5rem;padding:calc(.5rem*2);position:relative;width:100%}:host(md-card) .md-card-header{align-content:flex-start;align-items:flex-start;display:flex;flex-flow:row nowrap;justify-content:space-between;flex:1 0 100%;margin-bottom:.5rem}:host(md-card) .md-card-header md-favorite{padding-top:calc(.5rem*.5)}:host(md-card) .md-card-header-title{display:flex;flex:1 1 100%;flex-direction:column;margin:0 .5rem}:host(md-card) .md-card-header-title h1{color:var(--md-primary-text-color);font-family:var(--brand-font-medium, "CiscoSans-Medium", "Helvetica Neue", Helvetica, Arial, sans-serif);font-size:16px;line-height:calc(.5rem*3);margin:0}:host(md-card) .md-card-header-title h2{color:var(--md-secondary-text-color);font-size:12px;line-height:calc(.5rem*2.25)}:host(md-card) .md-card-header-actions{align-self:stretch;display:inline-flex;position:relative;z-index:1}:host(md-card) .md-card-header-actions .md-card-info-icon,:host(md-card) .md-card-header-actions .md-card-max-icon{padding-right:.5rem}:host(md-card) .md-card-header-actions md-menu-overlay::part(overlay-content){max-width:9rem}:host(md-card) .md-card .md-card-menu-icon{border-radius:calc(.5rem/2);display:inline-flex}:host(md-card) .md-card .md-card-menu-icon::part(button){padding:calc(.5rem*.25)}:host(md-card) .md-card .md-card-menu-icon:hover{background-color:var(--md-tertiary-bg-color)}:host(md-card) .md-card .md-card-menu-icon:active{background-color:var(--md-quaternary-bg-color)}:host(md-card) .md-card .md-card-menu-list-items{padding:calc(.5rem*.25)}:host(md-card) .md-card-content{background:var(--md-secondary-bg-color);border:var(--md-quaternary-bg-color);border-radius:calc(.5rem/2);height:14rem;margin-bottom:calc(.5rem*2);overflow:hidden}:host(md-card) .md-card.full-screen{display:inline-block;height:100%!important;left:0;max-width:100%;position:absolute;top:0;width:100%}:host(md-card) .md-card.full-screen .md-card-content{height:auto}:host(md-card) .md-card-footer{display:flex;flex-wrap:wrap;gap:.5rem}@media(forced-colors:active){:host(md-card) .md-card{box-shadow:none;outline:1px solid CanvasText}:host(md-card) .md-card:focus{outline:2px solid Highlight}:host(md-card) .md-card-header md-favorite{color:windowText}}`,l=function(e,t,d,r){var o,a=arguments.length,i=a<3?t:null===r?r=Object.getOwnPropertyDescriptor(t,d):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,d,r);else for(var n=e.length-1;n>=0;n--)(o=e[n])&&(i=(a<3?o(i):a>3?o(t,d,i):o(t,d))||i);return a>3&&i&&Object.defineProperty(t,d,i),i};!function(e){let t=class extends i.LitElement{constructor(){super(...arguments),this.title="title",this.subtitle="",this.id="",this.info="",this.infoAriaLabel="Card Info",this.menuAriaLabel="Card Menu",this.menuOptions=[]}static get styles(){return[a.a,s]}handleCardClick(){this.dispatchEvent(new CustomEvent("card-click",{detail:{id:this.id},bubbles:!0,composed:!0}))}handleCardKeyDown(e){e.code!==m.b.Enter&&e.code!==m.b.Space||this.dispatchEvent(new CustomEvent("card-keydown",{detail:{id:this.id},bubbles:!0,composed:!0}))}handleCardMenuEvent(e,t){e.stopPropagation();const d=t.toLowerCase();this.dispatchEvent(new CustomEvent("card-menu-click",{detail:{id:this.id,type:d},bubbles:!0,composed:!0}))}handleCardMenuKeyDown(e,t){e.preventDefault(),this.dispatchEvent(new CustomEvent("card-menu-keydown",{detail:{id:this.id,type:t.toLowerCase(),keyCode:e.code},bubbles:!0,composed:!0}))}render(){return i.html`
+        <div
+          class="md-card"
+          id="${this.id}"
+          part="card"
+          tabindex="0"
+          @click=${()=>this.handleCardClick()}
+          @keydown=${e=>this.handleCardKeyDown(e)}
+        >
+          <div class="md-card-header">
+            <slot name="card-header-aside">
+              <md-favorite value="${"card-"+this.id}"></md-favorite>
+            </slot>
+            <div class="md-card-header-title">
+              <slot name="card-header-title">
+                <h1>${this.title}</h1>
+                <h2>${this.subtitle}</h2>
+              </slot>
             </div>
-            <div class="md-chat-message_text">
-              <slot name="message"></slot>
+            <div class="md-card-header-actions">
+              ${this.info?i.html`
+                    <md-tooltip message="${this.info}" placement="bottom">
+                      <md-button
+                        ariaLabel="${this.infoAriaLabel}"
+                        class="md-card-info-icon"
+                        color="color-none"
+                        size="size-none"
+                      >
+                        <md-icon slot="icon" name="info-circle-bold" size="16" iconSet="momentumDesign"></md-icon>
+                      </md-button>
+                    </md-tooltip>
+                  `:n.nothing}
+              ${this.menuOptions.length?i.html`
+                    <md-menu-overlay class="md-card-menu" placement="bottom-start">
+                      <md-button
+                        ariaLabel="${this.menuAriaLabel}"
+                        class="md-card-menu-icon"
+                        color="color-none"
+                        size="size-none"
+                        slot="menu-trigger"
+                      >
+                        <md-icon slot="icon" name="more-adr-bold" size="16" iconSet="momentumDesign"></md-icon>
+                      </md-button>
+                      <div class="md-card-menu-list-items" style="width: 100%;">
+                        <md-list>
+                          ${Object(c.repeat)(this.menuOptions,(e,t)=>i.html`
+                              <md-list-item
+                                class="${"menu-item-"+t}"
+                                slot="list-item"
+                                @click=${t=>this.handleCardMenuEvent(t,e)}
+                                @keydown=${t=>this.handleCardMenuKeyDown(t,e)}
+                                >${e}</md-list-item
+                              >
+                            `)}
+                        </md-list>
+                      </div>
+                    </md-menu-overlay>
+                  `:n.nothing}
             </div>
           </div>
+          <div class="md-card-content">
+            <slot name="content"></slot>
+          </div>
+          <div class="md-card-footer">
+            <slot name="footer"> </slot>
+          </div>
         </div>
-      `}};n([Object(c.property)({type:String})],t.prototype,"title",void 0),n([Object(c.property)({type:String})],t.prototype,"src",void 0),n([Object(c.property)({type:String})],t.prototype,"time",void 0),n([Object(c.property)({type:String})],t.prototype,"label",void 0),n([Object(c.property)({type:Boolean})],t.prototype,"self",void 0),t=n([Object(o.a)("md-chat-message")],t),e.ELEMENT=t}(a||(a={}))}}]);
+      `}};l([Object(i.property)({type:String})],t.prototype,"title",void 0),l([Object(i.property)({type:String})],t.prototype,"subtitle",void 0),l([Object(i.property)({type:String})],t.prototype,"id",void 0),l([Object(i.property)({type:String})],t.prototype,"info",void 0),l([Object(i.property)({type:String,attribute:"info-aria-label"})],t.prototype,"infoAriaLabel",void 0),l([Object(i.property)({type:String,attribute:"menu-aria-label"})],t.prototype,"menuAriaLabel",void 0),l([Object(i.property)({type:Array})],t.prototype,"menuOptions",void 0),t=l([Object(o.a)("md-card")],t),e.ELEMENT=t}(r||(r={}))}}]);