import*as t from"lit/directives/style-map.js";import*as e from"lit";import*as r from"@momentum-ui/utils/lib/getColorValue";import*as a from"lit/directives/if-defined.js";import*as o from"lit/directives/class-map.js";import*as i from"mobx";import*as s from"lit/decorators.js";import*as d from"@momentum-ui/icons/data/momentumUiIconsNames.json";import*as n from"luxon";var l,p,c={1156(e,r,a){var o,i;e.exports=(o={styleMap:()=>t.styleMap},i={},a.d(i,o),i)},2927(t,r,a){var o,i;t.exports=(o={LitElement:()=>e.LitElement,css:()=>e.css,html:()=>e.html,nothing:()=>e.nothing},i={},a.d(i,o),i)},3496(t,e,a){var o,i;t.exports=(o={default:()=>r.default},i={},a.d(i,o),i)},3517(t,e,r){var o,i;t.exports=(o={ifDefined:()=>a.ifDefined},i={},r.d(i,o),i)},4955(t,e,r){var a,i;t.exports=(a={classMap:()=>o.classMap},i={},r.d(i,a),i)},4980(t,e,r){var a,o;t.exports=(a={action:()=>i.action,observable:()=>i.observable},o={},r.d(o,a),o)},7540(t,e,r){r.d(e,{h:()=>h,o:()=>m}),r(5983),r(1821),r(9613);var a=r(9609),o=r(4084),i=r(2927),s=r(8899),d=r(4955),n=r(9642),l=r(513),p=function(t,e,r,a){var o,i=arguments.length,s=i<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,r):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,r,a);else for(var d=t.length-1;d>=0;d--)(o=t[d])&&(s=(i<3?o(s):i>3?o(e,r,s):o(e,r))||s);return i>3&&s&&Object.defineProperty(e,r,s),s};const c="hh:mm:ss";var m,h;!function(t){t.DEFAULT="default",t.ACTIVE="active",t.INACTIVE="inactive"}(m||(m={})),function(t){let e=class extends i.LitElement{constructor(){super(...arguments),this.state=m.DEFAULT,this.identifier=void 0,this.header=void 0,this.info=void 0,this.data=void 0,this.createdTime=0,this.active=!1,this.expandable=!1,this.expandAriaLabel="Expand for more details",this.renderedData=""}connectedCallback(){super.connectedCallback(),this.checkForExtraInfoSlot()}disconnectedCallback(){super.disconnectedCallback(),this.clearInterval()}clearInterval(){this.interval&&(clearInterval(this.interval),this.interval=void 0)}static get styles(){return[o.A,l.A]}get isCardActive(){return this.state===m.ACTIVE}willUpdate(t){super.willUpdate(t),(t.has("active")||t.has("data")||t.has("createdTime"))&&this.calculateRenderedData()}expandCardToggled(){var t;this.state=this.isCardActive?m.DEFAULT:m.ACTIVE,this.dispatchEvent(new CustomEvent("expand-card-toggled",{detail:{identifier:null!==(t=this.identifier)&&void 0!==t?t:"",active:this.isCardActive},bubbles:!0,composed:!0}))}checkForExtraInfoSlot(){var t;(null===(t=this.extraInfoSlot)||void 0===t?void 0:t.assignedNodes().length)>0?this.setAttribute("has-extra-info",""):this.removeAttribute("has-extra-info")}handleExtraInfoSlotChange(t){this.checkForExtraInfoSlot()}get cardClassMap(){return{"md-card-v2":!0,[`md-card--${this.state}`]:!0}}get contentClassMap(){return{"md-card-v2-content":!0,inactive:this.state===m.INACTIVE}}get footerExpandClassMap(){return{"md-card-v2-footer-expand":!0,hidden:!this.expandable}}get expandCardHandler(){return this.expandable?this.expandCardToggled:null}renderHeader(){return i.html`
        <div class="md-card-v2-header-title">
          <h3>${this.header}</h3>
          ${this.info?i.html`
                <md-tooltip message="${this.info}" placement="top">
                  <md-button ariaLabel="${this.header}, ${this.data}, ${this.info}" size="20" variant="ghost" circle>
                    <md-icon slot="icon" name="info-badge-filled" iconSet="momentumDesign"></md-icon>
                  </md-button>
                </md-tooltip>
              `:i.nothing}
        </div>
      `}renderExpandButton(){return i.html`
        <div class="${(0,d.classMap)(this.footerExpandClassMap)}">
          <md-button ariaLabel="${this.expandAriaLabel}" circle size="28">
            <md-icon
              slot="icon"
              iconSet="momentumDesign"
              name=${this.isCardActive?"arrow-circle-up-bold":"arrow-circle-down-bold"}
              size="18"
            ></md-icon>
          </md-button>
        </div>
      `}renderFooter(){return i.html`
        <div class="md-card-v2-footer">
          <div class="md-card-v2-footer-content">
            <slot name="card-footer-content"></slot>
          </div>
          ${this.renderExpandButton()}
        </div>
      `}calculateRenderedData(){this.clearInterval(),!this.active&&this.data?this.renderedData=this.data:this.active&&this.createdTime>0&&(this.renderedData=n.Duration.fromMillis(Date.now()-this.createdTime).toFormat(c),this.interval=window.setInterval(()=>{this.renderedData=n.Duration.fromMillis(Date.now()-this.createdTime).toFormat(c)},1e3))}render(){return i.html`
        <div class="${(0,d.classMap)(this.cardClassMap)}" @click=${this.expandCardHandler}>
          <div class="md-card-v2-header">${this.renderHeader()}</div>
          <div class="${(0,d.classMap)(this.contentClassMap)}">
            <h2>${this.renderedData}</h2>
            <div class="md-card-v2-content-extra-info">
              <slot name="card-extra-info" @slotchange=${this.handleExtraInfoSlotChange}></slot>
            </div>
          </div>
          ${this.renderFooter()}
        </div>
      `}};p([(0,s.property)({type:String})],e.prototype,"state",void 0),p([(0,s.property)({type:String})],e.prototype,"identifier",void 0),p([(0,s.property)({type:String})],e.prototype,"header",void 0),p([(0,s.property)({type:String})],e.prototype,"info",void 0),p([(0,s.property)({type:String})],e.prototype,"data",void 0),p([(0,s.property)({type:Number})],e.prototype,"createdTime",void 0),p([(0,s.property)({type:Boolean})],e.prototype,"active",void 0),p([(0,s.property)({type:Boolean,reflect:!0})],e.prototype,"expandable",void 0),p([(0,s.property)({type:String,attribute:"expand-aria-label"})],e.prototype,"expandAriaLabel",void 0),p([(0,s.query)('slot[name="card-extra-info"]')],e.prototype,"extraInfoSlot",void 0),p([(0,s.state)()],e.prototype,"interval",void 0),p([(0,s.state)()],e.prototype,"renderedData",void 0),e=p([(0,a.w)("md-card-v2")],e),t.ELEMENT=e}(h||(h={}))},8899(t,e,r){var a,o;t.exports=(a={property:()=>s.property,query:()=>s.query,state:()=>s.state},o={},r.d(o,a),o)},9500(t,e,r){var a,o;t.exports=(a={default:()=>d.default},o={},r.d(o,a),o)},9642(t,e,r){var a,o;t.exports=(a={Duration:()=>n.Duration},o={},r.d(o,a),o)}},m={};function h(t){var e=m[t];if(void 0!==e)return e.exports;var r=m[t]={exports:{}};return c[t](r,r.exports,h),r.exports}h.m=c,l=[],h.O=(t,e,r,a)=>{if(!e){var o=1/0;for(n=0;n<l.length;n++){for(var[e,r,a]=l[n],i=!0,s=0;s<e.length;s++)(!1&a||o>=a)&&Object.keys(h.O).every(t=>h.O[t](e[s]))?e.splice(s--,1):(i=!1,a<o&&(o=a));if(i){l.splice(n--,1);var d=r();void 0!==d&&(t=d)}}return t}a=a||0;for(var n=l.length;n>0&&l[n-1][2]>a;n--)l[n]=l[n-1];l[n]=[e,r,a]},h.d=(t,e)=>{for(var r in e)h.o(e,r)&&!h.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:e[r]})},h.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);export{h as __webpack_require__};p={502:0,1521:0,1745:0,4545:0,4928:0,5369:0,6060:0,6920:0,8111:0,8442:0},h.C=t=>{var e,r,{__webpack_esm_ids__:a,__webpack_esm_modules__:o,__webpack_esm_runtime__:i}=t,s=0;for(e in o)h.o(o,e)&&(h.m[e]=o[e]);for(i&&i(h);s<a.length;s++)r=a[s],h.o(p,r)&&p[r]&&p[r][0](),p[a[s]]=0;h.O()},h.O.j=t=>0===p[t];import*as v from"../9609.js";h.C(v);import*as f from"../4084.js";h.C(f);import*as u from"../3305.js";h.C(u);import*as C from"../4739.js";h.C(C);import*as x from"../7154.js";h.C(x);import*as y from"../9773.js";h.C(y);import*as b from"../5983.js";h.C(b);import*as g from"../9488.js";h.C(g);import*as j from"../1821.js";h.C(j);import*as E from"../2364.js";h.C(E);import*as D from"../9938.js";h.C(D);import*as I from"../4781.js";h.C(I);import*as A from"../5584.js";h.C(A);import*as $ from"../8227.js";h.C($);import*as _ from"../2900.js";h.C(_);import*as T from"../2050.js";h.C(T);import*as w from"../6343.js";h.C(w);import*as M from"../7582.js";h.C(M);import*as S from"../9613.js";h.C(S);import*as O from"../5323.js";h.C(O);import*as k from"../513.js";h.C(k);var L=h.O(void 0,[9609,4084,3305,4739,7154,9773,5983,9488,1821,2364,9938,4781,5584,8227,2900,2050,6343,7582,9613,5323,513],()=>h(7540));const F=(L=h.O(L)).o,V=L.h;export{F as CardState,V as CardV2};