@design.estate/dees-catalog 9.3.0 → 9.4.0

package/ts_web/elements/00group-simple/dees-shopping-productcard/dees-shopping-productcard.ts

@@ -1,21 +1,9 @@
-import {
-  customElement,
-  property,
-  html,
-  css,
-  cssManager,
-  type TemplateResult,
-  DeesElement,
-} from '@design.estate/dees-element';
+import { customElement, DeesElement, property, html, css, cssManager, type TemplateResult } from '@design.estate/dees-element';
 import { demoFunc } from './dees-shopping-productcard.demo.js';
 import { themeDefaultStyles } from '../../00theme.js';
-import '../../00group-layout/dees-tile/dees-tile.js';
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'dees-shopping-productcard': DeesShoppingProductcard;
-  }
-}
+import '../../00group-utility/dees-icon/dees-icon.js';
+import '../../00group-input/dees-input-checkbox/dees-input-checkbox.js';
+import '../../00group-input/dees-input-quantityselector/dees-input-quantityselector.js';
 
 export interface IProductData {
   name: string;
@@ -30,318 +18,73 @@ export interface IProductData {
   iconName?: string;
 }
 
+declare global { interface HTMLElementTagNameMap { 'dees-shopping-productcard': DeesShoppingProductcard; } }
+
 @customElement('dees-shopping-productcard')
 export class DeesShoppingProductcard extends DeesElement {
   public static demo = demoFunc;
   public static demoGroups = ['Simple'];
-
-  @property({ type: Object })
-  accessor productData: IProductData = {
-    name: 'Product Name',
-    price: 0,
-  };
-
-  @property({ type: Number })
-  accessor quantity: number = 0;
-
-  @property({ type: Boolean })
-  accessor showQuantitySelector: boolean = true;
-
-  @property({ type: Boolean })
-  accessor selectable: boolean = false;
-
-  @property({ type: Boolean })
-  accessor selected: boolean = false;
-
-  public static styles = [
-    themeDefaultStyles,
-    cssManager.defaultStyles,
-    css`
-      /* TODO: Migrate hardcoded values to --dees-* CSS variables */
-      :host {
-        display: block;
-      }
-
-      dees-tile {
-        height: 100%;
-      }
-
-      dees-tile:hover::part(outer) {
-        border-color: var(--dees-color-border-strong);
-        box-shadow: var(--dees-shadow-md);
-      }
-
-      dees-tile.selectable {
-        cursor: pointer;
-      }
-
-      dees-tile.selected::part(outer) {
-        border-color: var(--dees-color-link);
-        box-shadow: 0 0 0 3px color-mix(in srgb, var(--dees-color-link) 10%, transparent);
-      }
-
-      .product-image {
-        width: 100%;
-        height: 180px;
-        background: var(--dees-color-badge-default-bg);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: relative;
-        overflow: hidden;
-      }
-
-      .product-image img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      .product-image dees-icon {
-        font-size: 48px;
-        color: var(--dees-color-text-muted);
-      }
-
-      .selection-checkbox {
-        position: absolute;
-        top: var(--dees-spacing-md);
-        right: var(--dees-spacing-md);
-        width: 20px;
-        height: 20px;
-        background: var(--dees-color-bg-primary);
-        border: 2px solid color-mix(in srgb, var(--dees-color-text-primary) 35%, transparent);
-        border-radius: var(--dees-radius-sm);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        transition: all var(--dees-transition-default) var(--dees-ease-standard);
-        cursor: pointer;
-      }
-
-      .selection-checkbox.checked {
-        background: var(--dees-color-link);
-        border-color: var(--dees-color-link);
-      }
-
-      .selection-checkbox dees-icon {
-        color: var(--dees-color-on-accent);
-        font-size: 12px;
-        opacity: 0;
-        transform: scale(0);
-        transition: all var(--dees-transition-default) var(--dees-ease-standard);
-      }
-
-      .selection-checkbox.checked dees-icon {
-        opacity: 1;
-        transform: scale(1);
-      }
-
-      .product-header-bar {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        height: var(--dees-control-height-sm);
-        padding: 0 var(--dees-spacing-lg);
-        gap: var(--dees-spacing-sm);
-      }
-
-      .product-name {
-        font-size: var(--dees-font-control-size);
-        font-weight: var(--dees-font-control-weight);
-        color: var(--dees-color-text-secondary);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      .product-category {
-        font-size: var(--dees-font-caption2-size);
-        font-weight: var(--dees-font-control-weight);
-        color: var(--dees-color-text-secondary);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        white-space: nowrap;
-        flex-shrink: 0;
-      }
-
-      .product-body {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      .product-content {
-        padding: var(--dees-spacing-md) var(--dees-spacing-lg);
-        display: flex;
-        flex-direction: column;
-        gap: var(--dees-spacing-sm);
-        flex: 1;
-      }
-
-      .product-description {
-        font-size: var(--dees-font-control-size-sm);
-        color: var(--dees-color-text-muted);
-        line-height: 1.5;
-        flex: 1;
-      }
-
-      .product-footer {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: var(--dees-spacing-lg);
-        padding: var(--dees-spacing-md) var(--dees-spacing-lg);
-        width: 100%;
-        box-sizing: border-box;
-      }
-
-      .product-price {
-        display: flex;
-        flex-direction: column;
-        gap: 2px;
-      }
-
-      .price-current {
-        font-size: var(--dees-font-title3-size);
-        font-weight: 600;
-        color: var(--dees-color-text-primary);
-      }
-
-      .price-original {
-        font-size: var(--dees-font-control-size);
-        color: var(--dees-color-text-muted);
-        text-decoration: line-through;
-      }
-
-      .stock-status {
-        display: inline-flex;
-        align-items: center;
-        gap: var(--dees-spacing-xs);
-        font-size: var(--dees-font-caption1-size);
-        margin-top: var(--dees-spacing-sm);
-      }
-
-      .stock-status.in-stock {
-        color: var(--dees-color-text-success);
-      }
-
-      .stock-status.out-of-stock {
-        color: var(--dees-color-accent-error);
-      }
-
-      .stock-status dees-icon {
-        font-size: 14px;
-      }
-    `,
-  ];
+  @property({ type: Object }) accessor productData: IProductData = { name: 'Product Name', price: 0 };
+  @property({ type: Number }) accessor quantity = 0;
+  @property({ type: Boolean }) accessor showQuantitySelector = true;
+  @property({ type: Boolean }) accessor selectable = false;
+  @property({ type: Boolean }) accessor selected = false;
+
+  public static styles = [themeDefaultStyles, cssManager.defaultStyles, css`
+    :host { display: flex; min-width: 0; font: 13px/1.5 var(--dees-font-family); color: var(--dees-color-text-primary); }
+    * { box-sizing: border-box; }
+    article { display: flex; flex-direction: column; width: 100%; min-width: 0; position: relative; background: var(--dees-color-bg-primary); border: 1px solid var(--dees-color-border-subtle); border-radius: var(--dees-radius-2xl); corner-shape: var(--dees-corner-shape); transition: border-color 140ms ease, box-shadow 140ms ease; }
+    article.selectable { cursor: pointer; }
+    article.selected { border-color: var(--dees-color-accent-primary); box-shadow: 0 0 0 1px var(--dees-color-accent-primary); }
+    .product-image { display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 8px 8px 0; min-width: 0; border-radius: var(--dees-radius-xl); corner-shape: var(--dees-corner-shape); background: var(--dees-color-bg-secondary); overflow: hidden; color: var(--dees-color-text-secondary); }
+    .product-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
+    .selection { position: absolute; inset: 16px 16px auto auto; display: grid; place-items: center; min-width: 32px; min-height: 32px; border-radius: var(--dees-radius-md); background: var(--dees-color-bg-primary); box-shadow: var(--dees-shadow-xs); }
+    .selection dees-input-checkbox { --dees-input-spacing: 0px; }
+    .product-content { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 20px; }
+    .category { color: var(--dees-color-text-secondary); font-size: 11px; font-weight: 500; }
+    h3 { font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; margin: 0; overflow-wrap: anywhere; }
+    .description { color: var(--dees-color-text-secondary); margin: 0; }
+    .stock { display: flex; align-items: center; gap: 5px; color: var(--dees-color-text-secondary); font-size: 11px; margin-top: auto; padding-top: 8px; }
+    .stock.unavailable { color: var(--dees-color-text-warning); }
+    .product-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 0 20px 20px; }
+    .price { display: grid; align-content: center; min-height: 40px; gap: 2px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
+    .current-price { font-size: 17px; line-height: 1.3; font-weight: 600; letter-spacing: -.02em; }
+    .original-price { font-size: 12px; color: var(--dees-color-text-secondary); }
+    .quantity { border-radius: var(--dees-radius-lg); background: var(--dees-color-fill-secondary); }
+    @media (hover: hover) { article.selectable:hover:not(.selected) { border-color: var(--dees-color-border-strong); box-shadow: var(--dees-shadow-sm); } }
+    @media (prefers-reduced-motion: reduce) { article { transition: none; } }
+  `];
 
   public render(): TemplateResult {
-    const {
-      name,
-      category,
-      description,
-      price,
-      originalPrice,
-      currency = '$',
-      inStock = true,
-      stockText = inStock ? 'In Stock' : 'Out of Stock',
-      imageUrl,
-      iconName = 'lucide:package',
-    } = this.productData;
-
-    const formatPrice = (value: number) => {
-      return `${currency}${value.toFixed(2)}`;
-    };
-
-    return html`
-      <dees-tile
-        class="${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}"
-        @click=${this.handleCardClick}
-      >
-        <div slot="header" class="product-header-bar">
-          <span class="product-name">${name}</span>
-          ${category ? html`<span class="product-category">${category}</span>` : ''}
-        </div>
-        <div class="product-body">
-          <div class="product-image">
-            ${imageUrl ? html`
-              <img src="${imageUrl}" alt="${name}">
-            ` : html`
-              <dees-icon .icon=${iconName}></dees-icon>
-            `}
-            ${this.selectable ? html`
-              <div
-                class="selection-checkbox ${this.selected ? 'checked' : ''}"
-                @click=${(e: Event) => {
-                  e.stopPropagation();
-                  this.handleSelectionToggle();
-                }}
-              >
-                <dees-icon .icon=${'lucide:check'}></dees-icon>
-              </div>
-            ` : ''}
-          </div>
-          <div class="product-content">
-            ${description ? html`
-              <div class="product-description">${description}</div>
-            ` : ''}
-            <div class="stock-status ${inStock ? 'in-stock' : 'out-of-stock'}">
-              <dees-icon .icon=${inStock ? 'lucide:check-circle' : 'lucide:x-circle'}></dees-icon>
-              ${stockText}
-            </div>
-          </div>
-        </div>
-        <div slot="footer" class="product-footer">
-          <div class="product-price">
-            <span class="price-current">${formatPrice(price)}</span>
-            ${originalPrice && originalPrice > price ? html`
-              <span class="price-original">${formatPrice(originalPrice)}</span>
-            ` : ''}
-          </div>
-          ${this.showQuantitySelector ? html`
-            <dees-input-quantityselector
-              .value=${this.quantity}
-              @changeSubject=${(e: CustomEvent) => {
-                this.quantity = e.detail.getValue();
-                this.dispatchEvent(new CustomEvent('quantityChange', {
-                  detail: {
-                    quantity: this.quantity,
-                    productData: this.productData
-                  },
-                  bubbles: true,
-                  composed: true
-                }));
-              }}
-            ></dees-input-quantityselector>
-          ` : ''}
-        </div>
-      </dees-tile>
-    `;
+    const product = this.productData;
+    const available = product.inStock !== false;
+    const currency = product.currency || '$';
+    return html`<article class="${this.selectable ? 'selectable' : ''} ${this.selected ? 'selected' : ''}" aria-labelledby="product-name" @click=${this.toggleSelection}>
+      <div class="product-image">${product.imageUrl ? html`<img src=${product.imageUrl} alt=${product.name} loading="lazy" decoding="async">` : html`<dees-icon .icon=${product.iconName || 'lucide:package'} iconSize="64"></dees-icon>`}</div>
+      ${this.selectable ? html`<div class="selection" @click=${(event: Event) => event.stopPropagation()}>
+        <dees-input-checkbox .ariaLabel=${`Select ${product.name}`} .value=${this.selected}
+          @newValue=${(event: CustomEvent<boolean>) => this.setSelection(event.detail)}></dees-input-checkbox>
+      </div>` : ''}
+      <div class="product-content">${product.category ? html`<div class="category">${product.category}</div>` : ''}
+        <h3 id="product-name">${product.name}</h3>${product.description ? html`<p class="description">${product.description}</p>` : ''}
+        <div class="stock ${available ? '' : 'unavailable'}"><dees-icon .icon=${available ? 'lucide:check' : 'lucide:clock'} iconSize="12"></dees-icon>${product.stockText || (available ? 'In stock' : 'Out of stock')}</div>
+      </div>
+      <footer class="product-footer"><div class="price"><span class="current-price">${currency}${product.price.toFixed(2)}</span>
+        ${product.originalPrice !== undefined && product.originalPrice > product.price ? html`<s class="original-price">${currency}${product.originalPrice.toFixed(2)}</s>` : ''}</div>
+        ${this.showQuantitySelector ? html`<div class="quantity" role="group" aria-label=${`Quantity for ${product.name}`} @click=${(event: Event) => event.stopPropagation()}>
+          <dees-input-quantityselector .value=${this.quantity}
+            @newValue=${(event: CustomEvent<number>) => {
+              this.quantity = event.detail;
+              this.dispatchEvent(new CustomEvent('quantityChange', { detail: { quantity: this.quantity, productData: this.productData }, bubbles: true, composed: true }));
+            }}></dees-input-quantityselector></div>` : ''}
+      </footer>
+    </article>`;
   }
 
-  private handleCardClick() {
-    if (this.selectable) {
-      this.selected = !this.selected;
-      this.dispatchEvent(new CustomEvent('selectionChange', {
-        detail: { 
-          selected: this.selected,
-          productData: this.productData 
-        },
-        bubbles: true,
-        composed: true
-      }));
-    }
+  private toggleSelection(): void { if (this.selectable) this.setSelection(!this.selected); }
+  private setSelection(selected: boolean): void {
+    if (!this.selectable || this.selected === selected) return;
+    this.selected = selected;
+    this.dispatchEvent(new CustomEvent('selectionChange', { detail: { selected, productData: this.productData }, bubbles: true, composed: true }));
   }
-
-  private handleSelectionToggle() {
-    this.selected = !this.selected;
-    this.dispatchEvent(new CustomEvent('selectionChange', {
-      detail: { 
-        selected: this.selected,
-        productData: this.productData 
-      },
-      bubbles: true,
-      composed: true
-    }));
-  }
-}
+}