import{LitElement as e,html as t,css as a}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{iconCleverBaselineLimited as n,iconCleverBaselineNewly as o,iconCleverBaselineWidely as s}from"./assets/cc-clever.icons.js";import{iconRemixToolsFill as i,iconRemixArrowDownSLine as c,iconRemixAlertFill as l,iconRemixCheckFill as d,iconRemixCloseFill as p,iconRemixHashtag as u,iconRemixCalendarLine as m}from"./assets/cc-remix.icons.js";import{accessibilityStyles as h}from"./styles/accessibility.js";import{skeletonStyles as b}from"./styles/skeleton.js";import"./cc-icon.js";import"./cc-loader.js";import"./cc-notice.js";import"./cc-toggle.js";const g=new Date;class y extends e{static get properties(){return{state:{type:Object},tableFeatureFilter:{type:Object,state:!0},_webFeatures:{type:Array,state:!0}}}constructor(){super(),this.state={type:"loading",webFeatures:[]},this.tableFeatureFilter={displayControl:!0,value:"all"},this._webFeatures=[]}_getBaselineIcon(e){switch(e){case"widely":return{icon:s,a11yName:"Widely supported"};case"newly":return{icon:o,a11yName:"Newly supported"};case"limited":return{icon:n,a11yName:"Limited availability"}}}_onFeatureFilterChange({detail:e}){this.tableFeatureFilter={...this.tableFeatureFilter,value:e}}_onDisplayModeChange(e){this._webFeatures=this._webFeatures.map((t=>t.featureId===e?{...t,displayMode:"compact"===t.displayMode?"detailed":"compact"}:t))}willUpdate(e){e.has("state")&&"loaded"===this.state.type&&(this._webFeatures=this.state.webFeatures.map((e=>({...e,displayMode:"compact"})))),e.has("state")&&"loading"===this.state.type&&(this._webFeatures=this.state.webFeatures.map((e=>({...e,currentStatus:"widely",canBeUsed:!0,chromeSupport:{isSupported:!0,releaseDate:g,version:"100"},firefoxSupport:{isSupported:!0,releaseDate:g,version:"100"},safariSupport:{isSupported:!0,releaseDate:g,version:"10"},displayMode:"compact"}))))}render(){if("error"===this.state.type)return t`<cc-notice intent="warning" message="Something went wrong while retrieving data"></cc-notice>`;if("loaded"===this.state.type&&0===this.state.webFeatures.length)return t`<div class="empty"><p>No Web Features to track</p></div>`;const e="loading"===this.state.type;return this._renderFeaturesTable(this._webFeatures,e)}_renderFeaturesTable(e,a){const r="all"===this.tableFeatureFilter.value?e:e.filter((e=>e.canBeUsed)),n=e.some((e=>e.isProgressiveEnhancement&&e.canBeUsed)),o=e.some((e=>e.canBeUsedWithPolyfill));return t`
      ${n?t`<cc-notice intent="warning">
            <div slot="message">Features with the warning icons should be used for progressive enhancement only</div>
          </cc-notice>`:""}
      ${o?t`<cc-notice intent="warning">
            <cc-icon slot="icon" .icon=${i} size="lg"></cc-icon>
            <div slot="message">Features with the tools icons can be used but requires a polyfill</div>
          </cc-notice>`:""}
      ${this.tableFeatureFilter.displayControl?t`
            <div class="table-controls">
              <cc-toggle
                .choices=${[{label:"All features",value:"all"},{label:"Can be used",value:"can-be-used"}]}
                .value="${this.tableFeatureFilter.value}"
                @cc-select=${this._onFeatureFilterChange}
              ></cc-toggle>
            </div>
          `:""}
      <table tabindex="0">
        <thead>
          <tr>
            <th>Feature</th>
            <th>Category</th>
            <th>Can be used</th>
            <th>Baseline</th>
            <th>Chrome</th>
            <th>Firefox</th>
            <th>Safari</th>
          </tr>
        </thead>
        <tbody>
          ${r.map((e=>this._renderFeatureRow(e,a)))}
        </tbody>
      </table>
    `}_renderFeatureRow({featureId:e,isProgressiveEnhancement:a,canBeUsedWithPolyfill:n,comment:o,category:s,canBeUsed:d,chromeSupport:p,currentStatus:u,featureName:m,firefoxSupport:h,safariSupport:b,displayMode:g},y){const{a11yName:f,icon:w}=this._getBaselineIcon(u),v="detailed"===g,_=v?"Hide detailed info":"Display detailed info";return t`
      <tr class="${r({"row--detailed":v})}">
        <th>
          <div class="feature-name-th">
            <div class="feature-name-th__btn-and-name">
              <button
                class="feature-name-th__btn-and-name__btn"
                @click="${()=>this._onDisplayModeChange(e)}"
                title="${_}"
                ?disabled="${y}"
              >
                <cc-icon .icon=${c}></cc-icon>
                <span class="visually-hidden">${_}</span>
              </button>
              <strong class="${r({skeleton:y})}">${m}</strong>
            </div>
            <span class="comment ${r({hidden:!v})}">${o}</span>
          </div>
        </th>
        <td><span class="${r({skeleton:y})}">${s}</span></td>
        <td>
          <div class="can-be-used ${r({skeleton:y})}">
            ${d?"Yes":"No"}
            ${n?t`
                  <cc-icon
                    .icon=${i}
                    a11y-name="With polyfill only"
                    title="With polyfill only"
                    ?skeleton="${y}"
                  ></cc-icon>
                `:""}
            ${a&&"newly"===u?t`
                  <cc-icon
                    .icon=${l}
                    a11y-name="Progressive enhancement only"
                    title="Progressive enhancement only"
                    ?skeleton="${y}"
                  ></cc-icon>
                `:""}
          </div>
        </td>
        <td>
          <div class="current-status ${r({skeleton:y})}">
            <cc-icon
              class="current-status__icon"
              .icon="${w}"
              a11y-name="${v?"":f}"
              title="${v?"":f}"
            ></cc-icon>
            <span class="${r({hidden:!v})}"> ${f} </span>
          </div>
        </td>
        <td>${this._renderBrowserSupport(p,y,v)}</td>
        <td>${this._renderBrowserSupport(h,y,v)}</td>
        <td>${this._renderBrowserSupport(b,y,v)}</td>
      </tr>
    `}_renderBrowserSupport(e,a,n){const o=e.isSupported?"supported":"unsupported";return t`
      <div class="browser-support">
        <cc-icon
          .icon=${e.isSupported?d:p}
          class=${o}
          size="lg"
          ?skeleton="${a}"
        ></cc-icon>
        ${e.isSupported?t`
              <p class="${r({hidden:!n})}">
                <cc-icon .icon=${u} size="md"></cc-icon>
                <span>${e.version}</span>
              </p>
              <p class="${r({hidden:!n})}">
                <cc-icon .icon=${m} size="md"></cc-icon>
                <span>
                  ${e.releaseDate.toLocaleDateString("en-US",{month:"numeric",year:"numeric"})}
                </span>
              </p>
            `:""}
      </div>
    `}static get styles(){return[b,h,a`
        :host {
          display: grid;
          gap: 1em;
        }

        * {
          box-sizing: border-box;
        }

        .skeleton {
          background-color: #bbb;
        }

        .hidden {
          height: 0;
          visibility: hidden;
        }

        p {
          margin: 0;
        }

        .empty {
          border: solid 1px var(--cc-color-border-neutral-weak, #eee);
          padding: 2em;
          text-align: center;
        }

        .table-controls {
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        table {
          align-content: center;
          display: grid;
          grid-template-columns: 1fr min-content min-content min-content min-content min-content min-content;
          overflow-x: auto;
          overflow-y: hidden;
        }

        thead,
        tbody,
        tr {
          display: contents;
        }

        th,
        td {
          align-items: center;
          display: grid;
          padding: 0.5em 1em;
          text-align: left;
        }

        thead th {
          background-color: var(--cc-color-bg-neutral-alt, #eee);
          color: var(--cc-color-text-strongest);
          min-width: max-content;
          padding: 1em;
        }

        tbody th,
        tbody td {
          background-color: var(--cc-color-bg-neutral, #ddd);
          color: var(--cc-color-text-default, #000);
        }

        tr:not(:last-child) td,
        tbody tr:not(:last-child) th {
          border-bottom: 1px solid var(--cc-color-border-neutral-weak, #eee);
        }

        .feature-name-th {
          display: grid;
          gap: 0.5em;
        }

        .feature-name-th__btn-and-name {
          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        .feature-name-th__btn-and-name__btn {
          background: none;
          background-color: var(--cc-color-bg-default, #fff);
          border: solid 1px var(--cc-color-border-neutral);
          border-radius: var(--cc-border-radius-small, 0.15em);
          box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);
          cursor: pointer;
          display: flex;
          padding: 0.3em;
          transition: box-shadow 75ms ease-in-out;
        }

        .feature-name-th__btn-and-name__btn cc-icon {
          transition: transform 0.3s ease-in-out;
        }

        .feature-name-th__btn-and-name__btn:hover {
          box-shadow: 0 1px 2px rgb(0 0 0 / 40%);
        }

        .feature-name-th__btn-and-name__btn:focus-visible {
          outline: var(--cc-focus-outline);
          outline-offset: var(--cc-focus-outline-offset);
        }

        .row--detailed .feature-name-th__btn-and-name__btn cc-icon {
          transform: rotate(180deg);
          transition: transform 0.3s ease-in-out;
        }

        .comment {
          font-style: italic;
          font-weight: normal;
        }

        .current-status {
          align-items: center;
          display: grid;
          gap: 0.5em;
          text-align: center;
        }

        .current-status__icon {
          flex: 0 0 auto;
          height: 1.5em;
          width: auto;
        }

        .skeleton .current-status__icon {
          /* FIXME: temporary workaround because the skeleton mode of the cc-icon doesn't support non square icons so we change the parent container to skeleton and hide the svg with opacity */
          opacity: 0;
        }

        .supported {
          --cc-icon-color: var(--cc-color-text-success);
        }

        .unsupported {
          --cc-icon-color: var(--cc-color-text-danger);
        }

        .can-be-used {
          --cc-icon-color: var(--cc-color-text-warning);

          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        .browser-support {
          display: grid;
        }

        .row--detailed .browser-support {
          gap: 0.5em;
        }

        .browser-support p {
          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        .browser-support cc-icon {
          justify-self: center;
        }
      `]}}window.customElements.define("cc-web-features-tracker",y);export{y as CcWebFeaturesTracker};
//# sourceMappingURL=cc-web-features-tracker.js.map
