@momentum-ui/web-components 2.14.16 → 2.14.18

package/dist/chunks/md-54.js

@@ -1,5 +1,98 @@
-(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[54],{111:function(t,e,o){"use strict";o.r(e),o.d(e,"ButtonGroup",(function(){return s}));var s,n=o(1),r=o(7),i=o(5),d=o(0),l=d.css`:host(:focus){box-shadow:none;outline:0!important}:host(md-button-group){display:flex}:host(md-button-group) .md-button-group{align-content:flex-start;align-items:center;display:inline-flex;flex-flow:row nowrap;justify-content:flex-start;background:var(--button-group-bg-color,#dedede);border-radius:var(--button-group-border-radius,.25rem);font-size:12px;padding:var(--button-group-indent,.125rem);transition:background .2s ease;border:1px solid var(--button-group-outline-border)}:host(md-button-group) .md-button-group:hover{background:var(--button-group-bg-color-hover,#ccc)}:host(md-button-group) .md-button-group:active{background:var(--button-group-bg-color-pressed,#b2b2b2)}:host(md-button-group) .md-button-group ::slotted(button){align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:center;background:0 0;border:0;border-radius:var(--button-group-border-radius,.25rem);color:var(--button-group-color,#545454);cursor:pointer;height:1.875rem;margin:0 var(--button-group-indent,.125rem);outline:0;padding:.25rem .75rem}:host(md-button-group) .md-button-group ::slotted(button):first-child{margin-left:0}:host(md-button-group) .md-button-group ::slotted(button):last-child{margin-right:0}:host(md-button-group) .md-button-group ::slotted(:hover){background:var(--button-group-color-hover,none);color:var(--button-group-color-active,#121212)}:host(md-button-group) .md-button-group ::slotted([selected]){background:var(--button-group-bg-color-active,#fff);box-shadow:0 2px 4px rgba(0,0,0,.1),0 0 1px rgba(0,0,0,.18);color:var(--button-group-color-active,#121212)}:host([focus-visible]:not([disabled])) .md-button-group{box-shadow:0 0 0 .125rem var(--md-default-focus-outline-color,#005e7d)}:host([disabled]) .md-button-group{opacity:.5;pointer-events:none}@media(forced-colors:active){:host(md-button-group) .md-button-group{outline:1px solid CanvasText;background:Canvas}:host(md-button-group) .md-button-group ::slotted([selected]){forced-color-adjust:none;outline:1px solid Highlight;background:Highlight;color:HighlightText}:host([focus-visible]:not([disabled])) .md-button-group{outline:2px solid Highlight}}`,u=function(t,e,o,s){var n,r=arguments.length,i=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(t,e,o,s);else for(var d=t.length-1;d>=0;d--)(n=t[d])&&(i=(r<3?n(i):r>3?n(e,o,i):n(e,o))||i);return r>3&&i&&Object.defineProperty(e,o,i),i};!function(t){let e=class extends(Object(r.e)(Object(r.a)(d.LitElement))){constructor(){super(...arguments),this.active=0,this.tabIndex=0,this._disabled=!1}get disabled(){return this._disabled}set disabled(t){const e=this._disabled;this._disabled=t,this.setAttribute("aria-disabled",""+t),this.tabIndex=t?-1:0,this.requestUpdate("disabled",e)}get slotElement(){return this.buttonSlot}static get styles(){return[i.a,l]}firstUpdated(t){super.firstUpdated(t),this.setAttribute("role","group")}setButtonTabIndex(){this.slotted.forEach(t=>t.tabIndex=-1)}updated(t){super.updated(t),t.has("slotted")&&(this.setButtonTabIndex(),this.setFirstActive())}get selectedBtnValue(){return this.slotted[this.active].value}notifySelectedChange(){this.dispatchEvent(new CustomEvent("button-group-change",{detail:{selected:this.selectedBtnValue},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("focus-visible",{composed:!0,bubbles:!0}))}setSelected(t){var e,o;const s=this.findSelectedBtnIndex();-1!==s&&s!==t&&(null===(e=this.slotted[s])||void 0===e||e.toggleAttribute("selected",!1)),null===(o=this.slotted[t])||void 0===o||o.toggleAttribute("selected",!0)}setFirstActive(){-1===this.findSelectedBtnIndex()&&this.setSelected(this.active)}findBtnIndex(t){const e=t.composedPath();return this.slotted.findIndex(t=>e.includes(t))}findSelectedBtnIndex(){return this.slotted.findIndex(t=>t.hasAttribute("selected"))}isBtnDisabled(t){return this.slotted[t].disabled}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("click",this.handleClick)}switchBtnOnArrowPress(t,e=1){const o=this.getAvailableSelectedIndex(t,e);-1!==o&&(this.active=o,this.setSelected(o),this.notifySelectedChange())}getAvailableSelectedIndex(t,e=1){const o=this.slotted.length;for(let s=0,n=t;s<o;s+=1,n+=e){n<0?n=o-1:n>=o&&(n=0);const t=this.slotted[n];if(this.isFocusable(t))return n}return-1}isFocusable(t){return!t.hasAttribute("disabled")&&!t.hasAttribute("hidden")}handleClick(t){const e=this.findBtnIndex(t);-1!==e&&(this.isBtnDisabled(e)||(this.active=e,this.setSelected(e),this.notifySelectedChange()))}handleKeyDown(t){const{code:e}=t;switch(e){case n.b.Enter:case n.b.Space:this.isBtnDisabled(this.active)||(this.setSelected(this.active),this.notifySelectedChange());break;case n.b.ArrowLeft:0===this.active?this.switchBtnOnArrowPress(this.slotted.length-1,-1):this.switchBtnOnArrowPress(this.active-1,-1);break;case n.b.ArrowRight:this.active===this.slotted.length-1?this.switchBtnOnArrowPress(0):this.switchBtnOnArrowPress(this.active+1)}}render(){return d.html`
-        <div role="group" class="md-button-group" part="button-group">
-          <slot name="button"></slot>
+(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[54],{112:function(e,t,i){"use strict";i.r(t),i.d(t,"playbackSpeeds",(function(){return p})),i.d(t,"defaultLabelMap",(function(){return c})),i.d(t,"AudioPlayer",(function(){return m}));i(17),i(14),i(42);var o=i(1),a=i(5),l=i(6),n=i(0),s=i(2),r=i(4),d=n.css`:host(md-audio-player){display:block}.md-audio-player{background:var(--audio-player-background-body,#ededed);box-shadow:inset 0 0 1.25rem rgba(176,176,176,.25);border-radius:1.875rem;height:3.75rem;color:var(--audio-player-font-color,#121212);flex-direction:column;justify-content:center;display:flex;padding:0 1.25rem;font-size:14px}.inner-container{display:flex;gap:.625rem;align-items:center;justify-items:center}.timeline-container{flex:1;z-index:0}.timeline-container md-tooltip{display:unset}md-button::part(button){vertical-align:text-bottom}md-button::part(button):focus::after{outline:0;box-shadow:none}md-button::part(button):focus-visible{box-shadow:0 0 0 .125rem var(--aido-player-focus-ring-color,#007aa3)}.timeline{background:var(--audio-player-background-timeline,#ccc);cursor:pointer;height:.375rem;width:100%;border-radius:.25rem;position:relative}.progress-bar{background:var(--audio-player-background-progress-bar,#3b3b3b);height:100%;width:0;transition:.25s;border-radius:.25rem;position:absolute;z-index:2}.buffer-bar{background:var(--audio-player-background-buffer-bar,#b2b2b2);height:100%;width:0;transition:.25s;border-radius:.25rem;position:absolute;top:0;opacity:.6}.text-container{display:flex;justify-content:space-between}.play-btn{cursor:pointer}.play-btn md-icon{vertical-align:sub}.volume-container{height:1.75rem;border-radius:1.875rem;display:flex;align-items:center;justify-content:center;transition:.25s}.volume-container md-icon{cursor:pointer}.volume-container:hover{background:var(--audio-player-background-body,#ededed);box-shadow:inset 0 0 1.25rem rgba(176,176,176,.25);padding:0 .9375rem}.volume-container:hover .volume{width:5rem;margin-right:.625rem}.volume{cursor:pointer;height:.375rem;width:0;overflow:hidden;border-radius:.625rem;transition:.25s;background:var(--audio-player-background-timeline,#ccc)}.volume-slider{background:var(--audio-player-background-progress-bar,#3b3b3b);height:100%;width:24%}.speed-icon-container{position:relative}#speed-btn{cursor:pointer}.speed-popup{display:none;position:absolute;z-index:1;bottom:-.375rem;right:4.75rem;height:100%;width:100%;justify-content:center;align-items:flex-end}.speed-popup.popup-open{display:flex}.speed-popup ul{list-style:none;padding:.375rem 0;text-align:left;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--audio-player-background-speed-popup,#fff);box-shadow:0 .25rem .5rem rgba(0,0,0,.2),0 0 .0625rem rgba(0,0,0,.12);border-radius:.5rem}.speed-popup ul li{padding:.125rem .75rem .125rem .75rem;color:var(--audio-player-font-color,#121212);width:10rem;height:1.875rem;cursor:pointer;transition:background .1s ease;display:inline-flex;justify-content:space-between;align-items:center}.speed-popup ul li:hover{background:var(--audio-player-background-speed-popup-hover,#f7f7f7)}.speed-popup-selected-speed{background:var(--audio-player-background-speed-popup-hover,#f7f7f7)}@media(forced-colors:active){.md-audio-player{outline:1px solid transparent!important}.buffer-bar{forced-color-adjust:none;opacity:.3;background-color:GrayText}.progress-bar{forced-color-adjust:none;background-color:Highlight}.volume{forced-color-adjust:none;background-color:HighlightText;outline:1px solid Highlight;outline-offset:-1px}.volume-slider{forced-color-adjust:none;background-color:Highlight}.speed-popup ul{outline:1px solid Highlight}.speed-popup ul li:hover{forced-color-adjust:none;color:Canvas;background:Highlight}#speed-popup-menu>.speed-popup-selected-speed{forced-color-adjust:none;color:Canvas;background:Highlight}}`,u=function(e,t,i,o){var a,l=arguments.length,n=l<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var s=e.length-1;s>=0;s--)(a=e[s])&&(n=(l<3?a(n):l>3?a(t,i,n):a(t,i))||n);return l>3&&n&&Object.defineProperty(t,i,n),n};const p=[{value:.25,label:"0.25"},{value:.5,label:"0.50"},{value:.75,label:"0.75"},{value:1,label:"Normal"},{value:1.25,label:"1.25"},{value:1.5,label:"1.50"},{value:1.75,label:"1.75"},{value:2,label:"2"}],c={playBtn:{ariaLabel:"Play",tooltipText:"Play"},pauseBtn:{ariaLabel:"Pause",tooltipText:"Pause"},duration:{ariaLabel:"Duration:",tooltipText:"Duration"},timeline:{ariaLabel:"Audio Seekbar",tooltipText:"Audio Seekbar"},volumeBtn:{ariaLabel:"Mute / Unmute Audio",tooltipText:"Mute / Unmute"},volumeSlider:{ariaLabel:"Volume level",tooltipText:"Volume level"},playbackSpeedBtn:{ariaLabel:"Playback speed",tooltipText:"Playback speed"}};var m;!function(e){let t=class extends n.LitElement{constructor(){super(),this.src="",this.events=[],this.isPlaying=!1,this.isMuted=!1,this.duration=0,this.volume=100,this.currentTime=0,this.showSpeedPopup=!1,this.playbackSpeed=1,this.volumeExpanded=!1,this.bufferedRange=0,this.selectedPlaybackSpeed=this.playbackSpeed,this.currentlySelectingPlaybackSpeed=!1,this.onOutsideClick=e=>{let t=!1;const i=e.composedPath();i.length&&(t=!!i.find(e=>"speed-btn"===e.id),t||(this.showSpeedPopup=!1))},this.handleKeyDown=e=>{const{code:t}=e;switch(t){case o.b.ArrowLeft:this.volumeExpanded?this.setVolumeKeydown(this.volume-.01):this.setTimeKeydown(this.currentTime-1);break;case o.b.ArrowRight:this.volumeExpanded?this.setVolumeKeydown(this.volume+.01):this.setTimeKeydown(this.currentTime+1);break;case o.b.ArrowUp:if(this.showSpeedPopup){this.currentlySelectingPlaybackSpeed=!0;const t=p.findIndex(e=>e.value===this.selectedPlaybackSpeed),i=Math.max(0,t-1);this.selectedPlaybackSpeed=p[i].value,e.preventDefault(),this.currentlySelectingPlaybackSpeed=!1}break;case o.b.ArrowDown:if(this.showSpeedPopup){this.currentlySelectingPlaybackSpeed=!0;const t=p.findIndex(e=>e.value===this.selectedPlaybackSpeed),i=Math.min(p.length-1,t+1);this.selectedPlaybackSpeed=p[i].value,e.preventDefault(),this.currentlySelectingPlaybackSpeed=!1}break;case o.b.Enter:this.showSpeedPopup&&(this.setPlaybackSpeed(this.selectedPlaybackSpeed),e.preventDefault())}},this.audio=new Audio,this.setAudioEventListeners(),this.labelMap=c}firstUpdated(e){super.firstUpdated(e),e.has("src")&&(this.audio.src=this.src)}updated(e){super.updated(e),e.has("src")&&(this.audio.src=this.src)}connectedCallback(){super.connectedCallback(),this.requestUpdate("src"),document.addEventListener("click",this.onOutsideClick),document.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this.onOutsideClick),document.removeEventListener("keydown",this.handleKeyDown),this.audio.pause(),this.isPlaying=!1}setAudioEventListeners(){this.audio.onloadeddata=()=>{this.duration=this.audio.duration,this.audio.volume=.75},this.audio.onerror=()=>{this.audio.src&&this.dispatchEvent(new CustomEvent("playback-error",{composed:!0,bubbles:!0}))},this.audio.onended=()=>{this.audio.currentTime=0,this.isPlaying=!1},this.audio.ontimeupdate=()=>{this.currentTime=this.audio.currentTime},this.audio.onvolumechange=()=>{this.volume=this.audio.volume},this.audio.onprogress=()=>{this.audio.buffered.length>0&&(this.bufferedRange=this.audio.buffered.end(this.audio.buffered.length-1))}}togglePlay(){this.isPlaying=!this.isPlaying,this.isPlaying?(this.audio.play(),this.dispatchEvent(new CustomEvent("play-clicked",{composed:!0,bubbles:!0}))):this.audio.pause()}toTimecode(e){const t=Math.floor(e);return`${Math.floor(t/60)}:${String(t%60).padStart(2,"0")}`}setTime(e){const t=this.getBarPercentage(e,"timeline"),i=Math.floor(t*this.duration);this.audio.currentTime=i}setVolumeElement(e){this.volumeElement="volume"===e.target.className?e.target:e.target.parentElement}handleVolumeChange(e){let t=!1;this.setVolumeElement(e),this.setVolume(e);const i=e=>{t||(t=!0),this.volumeExpanded?this.setVolume(e):a()},o=()=>{a()},a=()=>{t=!1,window.removeEventListener("mousemove",i),window.removeEventListener("mouseup",o)};window.addEventListener("mousemove",i),window.addEventListener("mouseup",o),e.preventDefault()}getVolumeFromSlider(e){if(null===this.volumeElement)return 0;const t=this.volumeElement.getBoundingClientRect(),i=e.clientX-t.x;return Math.max(0,Math.min(1,i/t.width))}setVolume(e){const t=this.getVolumeFromSlider(e);this.audio.volume=t}getBarPercentage(e,t){const i=(e.target.className===t?e.target:e.target.parentElement).getBoundingClientRect();return(e.clientX-i.x)/i.width}toggleSoundMute(){this.isMuted=!this.isMuted,this.audio.muted=this.isMuted}toggleSpeedPopup(){this.showSpeedPopup=!this.showSpeedPopup}setTimeKeydown(e){e>this.duration?(this.currentTime=this.duration,this.audio.currentTime=this.duration):e<0?(this.currentTime=0,this.audio.currentTime=0):(this.currentTime=e,this.audio.currentTime=e)}setVolumeKeydown(e){e>1?(this.volume=1,this.audio.volume=1):e<0?(this.isMuted||this.toggleSoundMute(),this.volume=0,this.audio.volume=0):(this.isMuted&&this.toggleSoundMute(),this.volume=e,this.audio.volume=e)}get popupClassMap(){return{"popup-open":this.showSpeedPopup}}setPlaybackSpeed(e){this.playbackSpeed=e,this.selectedPlaybackSpeed=e,this.audio.playbackRate=this.playbackSpeed,this.showSpeedPopup=!1}toggleVolumeExpand(e){this.volumeExpanded=e}static get styles(){return[l.a,d]}render(){return n.html`
+        <div class="md-audio-player">
+          <div class="inner-container">
+            <div class="play-container">
+              <md-tooltip
+                placement="top"
+                message="${this.isPlaying?this.labelMap.pauseBtn.tooltipText:this.labelMap.playBtn.tooltipText}"
+              >
+                <md-button
+                  hasRemoveStyle
+                  class="play-btn"
+                  @click="${this.togglePlay}"
+                  aria-label="${this.isPlaying?this.labelMap.pauseBtn.ariaLabel:this.labelMap.playBtn.ariaLabel}"
+                >
+                  ${this.isPlaying?n.html` <md-icon slot="icon" name="pause-bold" size="16" iconSet="momentumDesign"></md-icon> `:n.html` <md-icon slot="icon" name="play-bold" size="16" iconSet="momentumDesign"></md-icon> `}
+                </md-button>
+              </md-tooltip>
+            </div>
+            <div class="text-container">
+              <md-tooltip placement="top" message="${this.labelMap.duration.tooltipText}">
+                <span
+                  class="duration"
+                  aria-label="${this.labelMap.duration.ariaLabel} ${this.toTimecode(this.currentTime)}/${this.toTimecode(this.duration)}"
+                >
+                  ${this.toTimecode(this.currentTime)} / ${this.toTimecode(this.duration)}
+                </span>
+              </md-tooltip>
+            </div>
+            <div class="timeline-container">
+              <md-tooltip placement="top" message="${this.labelMap.timeline.tooltipText}">
+                <div class="timeline" @click="${this.setTime}" aria-label="${this.labelMap.timeline.ariaLabel}">
+                  <div class="progress-bar" style="width: ${this.currentTime/this.duration*100}%"></div>
+                  <div class="buffer-bar" style="width: ${this.bufferedRange/this.duration*100}%"></div>
+                </div>
+              </md-tooltip>
+            </div>
+            <div
+              class="volume-container"
+              @mouseleave="${()=>this.toggleVolumeExpand(!1)}"
+              @mouseenter="${()=>this.toggleVolumeExpand(!0)}"
+              aria-label="${this.labelMap.volumeSlider.ariaLabel}"
+            >
+              <md-tooltip
+                placement="top"
+                message="${this.labelMap.volumeSlider.tooltipText} ${Math.trunc(100*this.volume)}%"
+              >
+                <div
+                  class="volume"
+                  @mousedown="${this.handleVolumeChange}"
+                  aria-label="${this.labelMap.volumeSlider.ariaLabel} ${Math.trunc(100*this.volume)}%"
+                >
+                  <div class="volume-slider" style="width: ${this.isMuted?0:100*this.volume}%"></div>
+                </div>
+              </md-tooltip>
+              <md-tooltip placement="top" message="${this.labelMap.volumeBtn.tooltipText}">
+                <md-button
+                  hasRemoveStyle
+                  class="volume-btn"
+                  aria-label="${this.labelMap.volumeBtn.ariaLabel}"
+                  @click="${this.toggleSoundMute}"
+                >
+                  ${this.isMuted?n.html`
+                        <md-icon slot="icon" name="speaker-muted-bold" size="16" iconSet="momentumDesign"></md-icon>
+                      `:n.html` <md-icon slot="icon" name="speaker-bold" size="16" iconSet="momentumDesign"></md-icon> `}
+                </md-button>
+              </md-tooltip>
+            </div>
+            <div class="speed-icon-container" aria-label="${this.labelMap.playbackSpeedBtn.ariaLabel}">
+              <md-tooltip placement="top" message="${this.labelMap.playbackSpeedBtn.tooltipText}">
+                <md-button hasRemoveStyle id="speed-btn" @click="${this.toggleSpeedPopup}">
+                  <md-icon slot="icon" name="too-fast-bold" size="16" iconSet="momentumDesign"></md-icon>
+                </md-button>
+              </md-tooltip>
+              <div class="speed-popup ${Object(r.classMap)(this.popupClassMap)}">
+                <ul id="speed-popup-menu">
+                  ${p.map(e=>{const t=this.selectedPlaybackSpeed==e.value&&!this.currentlySelectingPlaybackSpeed;return n.html`
+                      <li
+                        class=${t?"speed-popup-selected-speed":""}
+                        @click="${()=>this.setPlaybackSpeed(e.value)}"
+                      >
+                        <span>${e.label}</span>
+                        ${this.playbackSpeed==e.value?n.html`
+                              <md-icon
+                                slot="icon"
+                                color="md-blue-60"
+                                name="check-bold"
+                                size="16"
+                                iconSet="momentumDesign"
+                              ></md-icon>
+                            `:s.nothing}
+                      </li>
+                    `})}
+                </ul>
+              </div>
+            </div>
+          </div>
         </div>
-      `}};u([Object(d.property)({type:Number,reflect:!0})],e.prototype,"active",void 0),u([Object(d.property)({type:Number,reflect:!0})],e.prototype,"tabIndex",void 0),u([Object(d.query)("slot[name='button']")],e.prototype,"buttonSlot",void 0),u([Object(d.property)({type:Boolean,reflect:!0})],e.prototype,"disabled",null),e=u([Object(r.f)("md-button-group")],e),t.ELEMENT=e}(s||(s={}))}}]);
+      `}};u([Object(n.property)({type:String})],t.prototype,"src",void 0),u([Object(n.property)({type:Object})],t.prototype,"labelMap",void 0),u([Object(n.internalProperty)()],t.prototype,"events",void 0),u([Object(n.internalProperty)()],t.prototype,"audio",void 0),u([Object(n.internalProperty)()],t.prototype,"volumeElement",void 0),u([Object(n.internalProperty)()],t.prototype,"isPlaying",void 0),u([Object(n.internalProperty)()],t.prototype,"isMuted",void 0),u([Object(n.internalProperty)()],t.prototype,"duration",void 0),u([Object(n.internalProperty)()],t.prototype,"volume",void 0),u([Object(n.internalProperty)()],t.prototype,"currentTime",void 0),u([Object(n.internalProperty)()],t.prototype,"showSpeedPopup",void 0),u([Object(n.internalProperty)()],t.prototype,"playbackSpeed",void 0),u([Object(n.internalProperty)()],t.prototype,"volumeExpanded",void 0),u([Object(n.internalProperty)()],t.prototype,"bufferedRange",void 0),u([Object(n.internalProperty)()],t.prototype,"selectedPlaybackSpeed",void 0),u([Object(n.internalProperty)()],t.prototype,"currentlySelectingPlaybackSpeed",void 0),t=u([Object(a.a)("md-audio-player")],t),e.ELEMENT=t}(m||(m={}))}}]);

package/dist/chunks/md-55.js

@@ -1,77 +1,11 @@
-(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[55],{113: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(15);var i,d,a=r(6),o=r(5),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-icon name="cisco-ai-assistant-color" iconSet="momentumBrandVisuals"></md-icon>
-            </slot>
-            <div class="md-card-ai-header-title">
-              <slot name="card-header-title">
-                <h3>${this.title}</h3>
-              </slot>
-            </div>
-          </div>
-        `: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>
-        `: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>
-      `}};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={}))}}]);
+(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[55],{113:function(e,r,t){"use strict";t.r(r),t.d(r,"Breadcrumb",(function(){return a}));var a,n=t(6),s=t(5),o=t(0),c=o.css`:host(:focus){box-shadow:none;outline:0!important}:host(md-breadcrumb) .md-breadcrumb ul{align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:flex-start;margin:0;padding:.5625rem .875rem .5625rem;list-style:none}:host(md-breadcrumb) .md-breadcrumb li{display:flex;text-transform:capitalize;font-size:.875rem}:host(md-breadcrumb) .md-breadcrumb li:not(:first-child)::before{display:flex;margin:0 .75rem;color:var(--breadcrumb-color-slash,#949494);content:"/"}:host(md-breadcrumb) .md-breadcrumb a{color:var(--breadcrumb-color,#00a0d1)}:host(md-breadcrumb) .md-breadcrumb a[aria-current=page]{pointer-events:none;cursor:default;color:var(--breadcrumb-color-current,#292929)}`,i=t(13),l=t(3),b=function(e,r,t,a){var n,s=arguments.length,o=s<3?r:null===a?a=Object.getOwnPropertyDescriptor(r,t):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,r,t,a);else for(var c=e.length-1;c>=0;c--)(n=e[c])&&(o=(s<3?n(o):s>3?n(r,t,o):n(r,t))||o);return s>3&&o&&Object.defineProperty(r,t,o),o};!function(e){let r=class extends o.LitElement{constructor(){super(...arguments),this.label="Breadcrumb",this.navCrumbs=[]}static get styles(){return[n.a,c]}setLastAnchorCurrent(){this.anchors&&this.anchors.length&&this.anchors[this.anchors.length-1].setAttribute("aria-current","page")}firstUpdated(e){super.firstUpdated(e),this.setLastAnchorCurrent()}update(e){super.update(e),e.has("navCrumbs")&&this.setLastAnchorCurrent()}handleClick(e){const r=e.target;if(this.anchors&&this.anchors.length){const e=Array.from(this.anchors).indexOf(r);-1!==e&&(this.navCrumbs=[...this.navCrumbs.splice(0,e+1)])}}render(){return o.html`
+        <nav aria-label="${Object(l.ifDefined)(this.label?this.label:void 0)}" class="md-breadcrumb">
+          <ul @click=${e=>this.handleClick(e)}>
+            ${Object(i.repeat)(this.navCrumbs,e=>e.link,e=>o.html`
+                <li>
+                  <a href="${e.link}"> ${e.label} </a>
+                </li>
+              `)}
+          </ul>
+        </nav>
+      `}};b([Object(o.property)({type:String,attribute:"aria-label"})],r.prototype,"label",void 0),b([Object(o.property)({type:Array,attribute:"nav-crumbs",reflect:!0})],r.prototype,"navCrumbs",void 0),b([Object(o.queryAll)("a[href]")],r.prototype,"anchors",void 0),r=b([Object(s.a)("md-breadcrumb")],r),e.ELEMENT=r}(a||(a={}))}}]);

package/dist/chunks/md-56.js

@@ -1,68 +1,5 @@
-(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[56],{112:function(e,t,d){"use strict";d.r(t),d.d(t,"Card",(function(){return r}));d(17),d(79),d(15),d(70),d(71),d(33),d(41);var r,o=d(6),a=d(5),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-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>
+(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[56],{114:function(t,e,o){"use strict";o.r(e),o.d(e,"ButtonGroup",(function(){return s}));var s,n=o(1),r=o(7),i=o(6),d=o(0),l=d.css`:host(:focus){box-shadow:none;outline:0!important}:host(md-button-group){display:flex}:host(md-button-group) .md-button-group{align-content:flex-start;align-items:center;display:inline-flex;flex-flow:row nowrap;justify-content:flex-start;background:var(--button-group-bg-color);border-radius:var(--button-group-border-radius,.25rem);font-size:12px;padding:var(--button-group-indent,.125rem);transition:background .2s ease;border:1px solid var(--button-group-outline-border)}:host(md-button-group) .md-button-group:hover{background:var(--button-group-bg-color-hover)}:host(md-button-group) .md-button-group:active{background:var(--button-group-bg-color-pressed)}:host(md-button-group) .md-button-group ::slotted(button){align-content:center;align-items:center;display:flex;flex-flow:row nowrap;justify-content:center;background:0 0;border:0;border-radius:var(--button-group-border-radius,.25rem);color:var(--button-group-color);cursor:pointer;height:1.875rem;margin:0 var(--button-group-indent,.125rem);outline:0;padding:.25rem .75rem}:host(md-button-group) .md-button-group ::slotted(button):first-child{margin-left:0}:host(md-button-group) .md-button-group ::slotted(button):last-child{margin-right:0}:host(md-button-group) .md-button-group ::slotted(:hover){background:var(--button-group-color-hover,none);color:var(--button-group-color-active)}:host(md-button-group) .md-button-group ::slotted([selected]){background:var(--button-group-bg-color-active);box-shadow:0 2px 4px rgba(0,0,0,.1),0 0 1px rgba(0,0,0,.18);color:var(--button-group-color-active)}:host([focus-visible]:not([disabled])) .md-button-group{box-shadow:0 0 0 .125rem var(--md-default-focus-outline-color)}:host([disabled]) .md-button-group{opacity:.5;pointer-events:none}@media(forced-colors:active){:host(md-button-group) .md-button-group{outline:1px solid CanvasText;background:Canvas}:host(md-button-group) .md-button-group ::slotted([selected]){forced-color-adjust:none;outline:1px solid Highlight;background:Highlight;color:HighlightText}:host([focus-visible]:not([disabled])) .md-button-group{outline:2px solid Highlight}}`,u=function(t,e,o,s){var n,r=arguments.length,i=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,o):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(t,e,o,s);else for(var d=t.length-1;d>=0;d--)(n=t[d])&&(i=(r<3?n(i):r>3?n(e,o,i):n(e,o))||i);return r>3&&i&&Object.defineProperty(e,o,i),i};!function(t){let e=class extends(Object(r.e)(Object(r.a)(d.LitElement))){constructor(){super(...arguments),this.active=0,this.tabIndex=0,this._disabled=!1}get disabled(){return this._disabled}set disabled(t){const e=this._disabled;this._disabled=t,this.setAttribute("aria-disabled",""+t),this.tabIndex=t?-1:0,this.requestUpdate("disabled",e)}get slotElement(){return this.buttonSlot}static get styles(){return[i.a,l]}firstUpdated(t){super.firstUpdated(t),this.setAttribute("role","group")}setButtonTabIndex(){this.slotted.forEach(t=>t.tabIndex=-1)}updated(t){super.updated(t),t.has("slotted")&&(this.setButtonTabIndex(),this.setFirstActive())}get selectedBtnValue(){return this.slotted[this.active].value}notifySelectedChange(){this.dispatchEvent(new CustomEvent("button-group-change",{detail:{selected:this.selectedBtnValue},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent("focus-visible",{composed:!0,bubbles:!0}))}setSelected(t){var e,o;const s=this.findSelectedBtnIndex();-1!==s&&s!==t&&(null===(e=this.slotted[s])||void 0===e||e.toggleAttribute("selected",!1)),null===(o=this.slotted[t])||void 0===o||o.toggleAttribute("selected",!0)}setFirstActive(){-1===this.findSelectedBtnIndex()&&this.setSelected(this.active)}findBtnIndex(t){const e=t.composedPath();return this.slotted.findIndex(t=>e.includes(t))}findSelectedBtnIndex(){return this.slotted.findIndex(t=>t.hasAttribute("selected"))}isBtnDisabled(t){return this.slotted[t].disabled}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("click",this.handleClick)}switchBtnOnArrowPress(t,e=1){const o=this.getAvailableSelectedIndex(t,e);-1!==o&&(this.active=o,this.setSelected(o),this.notifySelectedChange())}getAvailableSelectedIndex(t,e=1){const o=this.slotted.length;for(let s=0,n=t;s<o;s+=1,n+=e){n<0?n=o-1:n>=o&&(n=0);const t=this.slotted[n];if(this.isFocusable(t))return n}return-1}isFocusable(t){return!t.hasAttribute("disabled")&&!t.hasAttribute("hidden")}handleClick(t){const e=this.findBtnIndex(t);-1!==e&&(this.isBtnDisabled(e)||(this.active=e,this.setSelected(e),this.notifySelectedChange()))}handleKeyDown(t){const{code:e}=t;switch(e){case n.b.Enter:case n.b.Space:this.isBtnDisabled(this.active)||(this.setSelected(this.active),this.notifySelectedChange());break;case n.b.ArrowLeft:0===this.active?this.switchBtnOnArrowPress(this.slotted.length-1,-1):this.switchBtnOnArrowPress(this.active-1,-1);break;case n.b.ArrowRight:this.active===this.slotted.length-1?this.switchBtnOnArrowPress(0):this.switchBtnOnArrowPress(this.active+1)}}render(){return d.html`
+        <div role="group" class="md-button-group" part="button-group">
+          <slot name="button"></slot>
         </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={}))}}]);
+      `}};u([Object(d.property)({type:Number,reflect:!0})],e.prototype,"active",void 0),u([Object(d.property)({type:Number,reflect:!0})],e.prototype,"tabIndex",void 0),u([Object(d.query)("slot[name='button']")],e.prototype,"buttonSlot",void 0),u([Object(d.property)({type:Boolean,reflect:!0})],e.prototype,"disabled",null),e=u([Object(r.f)("md-button-group")],e),t.ELEMENT=e}(s||(s={}))}}]);

package/dist/chunks/md-57.js

@@ -1,22 +1,77 @@
-(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[57],{114:function(e,t,s){"use strict";s.r(t),s.d(t,"ChatMessage",(function(){return a}));var a,i=s(5),o=s(6),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(50),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>
-            </div>
-            <div class="md-chat-message_text">
-              <slot name="message"></slot>
+(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[57],{115: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-icon name="cisco-ai-assistant-color" iconSet="momentumBrandVisuals"></md-icon>
+            </slot>
+            <div class="md-card-ai-header-title">
+              <slot name="card-header-title">
+                <h3>${this.title}</h3>
+              </slot>
             </div>
           </div>
+        `: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>
+        `: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>
-      `}};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={}))}}]);
+      `}};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-58.js

@@ -1,14 +1,68 @@
-(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[58],{89:function(e,t,i){"use strict";i.r(t),i.d(t,"Checkbox",(function(){return s}));var s,c=i(1),n=i(7),a=i(5),d=i(6),o=i(0),r=i(62),h=function(e,t,i,s){var c,n=arguments.length,a=n<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,s);else for(var d=e.length-1;d>=0;d--)(c=e[d])&&(a=(n<3?c(a):n>3?c(t,i,a):c(t,i))||a);return n>3&&a&&Object.defineProperty(t,i,a),a};!function(e){let t=class extends(Object(n.a)(o.LitElement)){constructor(){super(...arguments),this.autofocus=!1,this._checked=!1,this._indeterminate=!1,this._disabled=!1,this.label="",this.tabIndex=0}get checked(){return this._checked}set checked(e){const t=this._checked;this._checked=e,this.indeterminate||this.setAttribute("aria-checked",""+e),this.requestUpdate("checked",t)}get indeterminate(){return this._indeterminate}set indeterminate(e){const t=this._indeterminate;this._indeterminate=e,this.setAttribute("aria-checked","mixed"),this.requestUpdate("indeterminate",t)}get disabled(){return this._disabled}set disabled(e){const t=this._disabled;this._disabled=e,this.setAttribute("aria-disabled",""+e),this.tabIndex=e?-1:0,this.requestUpdate("disabled",t)}static get styles(){return[a.a,r.a]}toggleCheckbox(){this.checked=!this.checked}isCheckboxActive(){return this.disabled||this.indeterminate}handleClick(e){this.isCheckboxActive()?e.stopPropagation():(this.toggleCheckbox(),this.handleChange(e))}handleKeyDown(e){const{code:t}=e;t!==c.b.Space&&t!==c.b.Enter||(e.preventDefault(),this.isCheckboxActive()?e.stopPropagation():(this.toggleCheckbox(),this.handleChange(e)))}handleChange(e){this.dispatchEvent(new CustomEvent("checkbox-change",{bubbles:!0,composed:!0,detail:{sourceEvent:e}}))}firstUpdated(e){super.firstUpdated(e),this.setAttribute("role","checkbox"),this.label&&this.setAttribute("aria-label",this.label)}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("click",this.handleClick)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("click",this.handleClick)}update(e){super.update(e),e.has("indeterminate")&&(this.checked=!1)}updated(e){super.updated(e),e.has("indeterminate")&&(this.input.indeterminate=this.indeterminate)}render(){return o.html`
-        <input
-          class="checkbox-input"
-          type="checkbox"
-          part="checkbox-input"
-          ?checked=${this.checked}
-          ?disabled=${this.disabled}
-          ?autofocus=${this.autofocus}
-          aria-hidden="true"
-        />
-        <label part="checkbox-label" class="checkbox-label">
-          <slot></slot>
-        </label>
-      `}};h([Object(o.property)({type:Boolean,reflect:!0})],t.prototype,"autofocus",void 0),h([Object(o.property)({type:Boolean,reflect:!0})],t.prototype,"checked",null),h([Object(o.property)({type:Boolean,reflect:!0})],t.prototype,"indeterminate",null),h([Object(o.property)({type:Boolean,reflect:!0})],t.prototype,"disabled",null),h([Object(o.property)({type:String})],t.prototype,"label",void 0),h([Object(o.property)({type:Number,reflect:!0})],t.prototype,"tabIndex",void 0),h([Object(o.query)(".checkbox-input")],t.prototype,"input",void 0),t=h([Object(d.a)("md-checkbox")],t),e.ELEMENT=t}(s||(s={}))}}]);
+(window["momentum-web-components-[id]"]=window["momentum-web-components-[id]"]||[]).push([[58],{116:function(e,t,d){"use strict";d.r(t),d.d(t,"Card",(function(){return r}));d(17),d(81),d(14),d(72),d(73),d(35),d(42);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-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>
+      `}};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={}))}}]);