text: /**
   * Copyright 2020 The Pennsylvania State University
   * @license Apache-2.0, see License.md for full text.
   */
  import{LitElement as s,html as t,css as i}from"../../../lit-element/lit-element.js";import{ElmslnStudioUtilities as e}from"./elmsln-studio-utilities.js";import{ElmslnStudioStyles as n}from"./elmsln-studio-styles.js";class ElmslnStudioAssignments extends(e(n(s))){static get tag(){return"elmsln-studio-assignments"}static get styles(){return[...super.styles,i`
          :host {
            display: flex;
            color: #2c2c2c;
            margin: 0 auto;
            justify-content: center;
          }
          h2 {
            color: #525252;
            margin-top: calc(0.5 * var(--elmsln-studio-margin, 20px));
          }
          nav-card [slot="heading"] {
            color: #4d4d4d;
            font-size: 80%;
          }
          nav-card-item [slot="label"] {
            font-weight: normal;
          }
          nav-card-item [slot="description"] {
            color: #95989a;
          }
          .lesson {
            background-color: #eee;
            padding: calc(0.5 * var(--elmsln-studio-margin, 20px));
            --lrndesign-avatar-border-radius: 0%;
            --nav-card-item-avatar-width: 40px;
            border: 1px solid var(--accent-card-border-color, #ddd);
            border-bottom: none;
          }
          .lesson > .assignment {
            background-color: #fff;
            border: 1px solid var(--accent-card-border-color, #ddd);
            padding: calc(0.5 * var(--elmsln-studio-margin, 20px))
              var(--elmsln-studio-margin, 20px);
            margin-bottom: 15px;
          }
          nav-card-item:not([avatar]) .assignment-link:before {
            position: absolute;
            overflow: hidden;
            display: inline-block;
            -webkit-animation: ellipsis steps(4, end) 900ms infinite;
            animation: ellipsis steps(4, end) 900ms infinite;
            content: "...";
            font-size: 300%;
            left: 0;
            top: 0;
            width: 0px;
          }
  
          @keyframes ellipsis {
            to {
              width: 1.25em;
            }
          }
  
          @-webkit-keyframes ellipsis {
            to {
              width: 1.25em;
            }
          }
          @media screen and (min-width: 400px) {
            #lessons {
              display: flex;
              align-items: stretch;
              justify-content: flex-start;
              overflow-x: auto;
              max-width: 100%;
              padding: 0 calc(0.5 * var(--elmsln-studio-margin, 20px));
            }
            .lesson {
              width: 300px;
              flex: 0 0 300px;
              margin: 0 var(--elmsln-studio-margin, 20px);
              border-bottom: 1px solid var(--accent-card-border-color, #ddd);
            }
          }
        `]}render(){return t`
        <h1 class="sr-only">Assignments</h1>
        <div id="lessons">
          ${this.lessons?Object.keys(this.lessons||{}).map((s=>t`
                  <div class="lesson">
                    <h2>${this.lessons[s].lesson}</h2>
                    ${(this.lessons[s].assignments||[]).map((s=>s.assignments?t`
                            <nav-card flat no-border class="card secondary">
                              <span slot="heading" ?hidden="${!s.project}">
                                ${s.project}
                              </span>
                              <div slot="linklist">
                                ${this.sortDates(s.assignments||[],!0).map((s=>this.renderAssignment(s)))}
                              </div>
                            </nav-card>
                          `:t`
                            <div class="assignment">
                              ${this.renderAssignment(s)}
                            </div>
                          `))}
                  </div>
                `)):this.loading("green",void 0,"large")}
        </div>
      `}renderAssignment(s){return s?t`
            <nav-card-item
              id="act-${s.id}-item"
              accent-color="${this.profile?this.getStatusColor(this.getSubmission(s.id),s):"grey"}"
              allow-grey
              avatar="${this.profile?this.getStatusIcon(this.getSubmission(s.id),s):void 0}"
              invert
            >
              <elmsln-studio-link
                id="act-${s.id}"
                class="assignment-link"
                aria-describedby="act-${s.id}-desc act-${s.id}-item"
                slot="label"
                href="/assignments/${s.id}"
              >
                ${s.assignment}
              </elmsln-studio-link>
              <div id="act-${s.id}-desc" slot="description">
                Due:
                <local-time
                  month="long"
                  day="numeric"
                  year="numeric"
                  hour="2-digit"
                  minute="2-digit"
                  second="2-digit"
                  time-zone-name="short"
                  datetime="${s.date}"
                >
                  ${this.dateFormat(s.date)}
                </local-time>
              </div>
            </nav-card-item>
            <simple-tooltip for="act-${s.id}" position="left">
              ${this.getStatusMessage(this.getSubmission(s.id),s)}
            </simple-tooltip>
          `:""}static get properties(){return{...super.properties,lessons:{type:Object},profile:{type:Object}}}constructor(){super(),this.tag=ElmslnStudioAssignments.tag}firstUpdated(s){super.firstUpdated&&super.firstUpdated(s),this.fetchData("profile"),this.fetchData("lessons")}getSubmission(s){let t=this.profile&&this.profile.id&&this.profile.submissions?this.profile.submissions.filter((t=>t.id===`${s}-${this.profile.id}`)):[];return t.length>0?t[0]:void 0}}customElements.define("elmsln-studio-assignments",ElmslnStudioAssignments);export{ElmslnStudioAssignments};