import{LitElement as t,html as e,css as r}from"lit";import{accessibilityStyles as i}from"./styles/accessibility.js";import{i18n as c}from"./translation.js";import"./cc-badge.js";import"./cc-icon.js";import"./cc-input-text.js";import"./cc-product-card.js";import{ProductsController as o}from"./products-controller.js";class s extends t{static get properties(){return{categoryFilter:{type:String,attribute:"category-filter"},productsByCategories:{type:Array,attribute:"products-by-categories"},textFilter:{type:String,attribute:"text-filter"}}}constructor(){super(),this.categoryFilter=null,this.productsByCategories=[],this.textFilter="",this._productsCrtl=new o(this)}_onCategoryChange(t){this.categoryFilter=t.target.value}_onSearchInput({detail:t}){this.textFilter=t}willUpdate(t){t.has("productsByCategories")&&(this._productsCrtl.productsByCategories=this.productsByCategories),t.has("categoryFilter")&&this._productsCrtl.toggleCategoryFilter(this.categoryFilter),t.has("textFilter")&&(this._productsCrtl.textFilter=this.textFilter)}render(){const t=this._productsCrtl.getCategories();return e`
      <div class="search-form">
        <cc-input-text
          label="${c("cc-product-list.search-label")}"
          value="${this.textFilter??""}"
          @cc-input="${this._onSearchInput}"
        ></cc-input-text>
        <fieldset class="category-filter">
          <legend class="visually-hidden">${c("cc-product-list.filter-category-legend")}</legend>
          ${this._renderCategory(c("cc-product-list.all-label"),"all","all"===this._productsCrtl.getCurrentCategory())}
          ${t.map((t=>this._renderCategory(t.categoryName,t.categoryName,t.toggled)))}
        </fieldset>
      </div>
      <div class="products">${this._renderProductsByCategories()}</div>
    `}_renderCategory(t,r,i){const c=t.replace(" ","-");return e`
      <input
        type="radio"
        id="${c}"
        .value=${r}
        name="category-filter"
        class="visually-hidden"
        @change=${this._onCategoryChange}
      />
      <label for="${c}">
        <cc-badge weight="${i?"dimmed":"outlined"}" intent="info">${t} </cc-badge>
      </label>
    `}_renderProductsByCategories(){const t=this._productsCrtl.getFilteredProductsByCategories();return 0===t.length?e` <p class="search-empty">${c("cc-product-list.search-empty")}</p> `:t.map((t=>e`
        <div class="category">
          <div class="category-title">
            ${null!=t.icon?e` <cc-icon .icon="${t.icon}" class="category-icon"></cc-icon> `:""}
            <div class="category-name">${t.categoryName}</div>
          </div>
          <div class="category-products">
            ${t.products.map((t=>e`
                <cc-product-card
                  name="${t.name}"
                  description="${t.description}"
                  icon-url="${t.iconUrl}"
                  url="${t.url}"
                  product-status="${t.productStatus}"
                ></cc-product-card>
              `))}
          </div>
        </div>
      `))}static get styles(){return[i,r`
        :host {
          display: block;
        }

        .category-name {
          font-size: 1.75em;
          font-weight: bold;
        }

        .category-products {
          display: grid;
          gap: 1em;
          grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
        }

        .category-title {
          align-items: center;
          display: flex;
          gap: 0.5em;
          margin: 2.5em 0 1.5em;
        }

        .category-filter {
          border: none;
          display: flex;
          flex-wrap: wrap;
          gap: 0.25em;
          padding: 0;
        }

        label:hover {
          cursor: pointer;

          --cc-color-bg-primary: var(--cc-color-text-primary-strong);
        }

        input[type='radio']:focus-visible + label cc-badge {
          outline: var(--cc-focus-outline, #000 solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .category-icon {
          height: 1.75em;
          width: 1.75em;
        }

        .search-empty {
          font-style: italic;
          margin: 1.5em 0 0;
        }

        .search-form {
          display: flex;
          flex-direction: column;
          gap: 0.5em;
        }
      `]}}window.customElements.define("cc-product-list",s);export{s as CcProductList};
//# sourceMappingURL=cc-product-list.js.map
