- ${isNew ? 'New Product' : 'Edit Product'} -
- -
-
-
-
-
-
-
-
-
-
-
- Enter URL (http://...) or emoji. Leave empty for ๐
-
-
-
-
-
-
-
- ${isNew ? '' : ``}
-
-
-
-
-
- `;
-
- modal.appendChild(dialog);
- document.body.appendChild(modal);
-
- // Save button
- dialog.querySelector('.save-btn').addEventListener('click', () => {
- const newName = dialog.querySelector('.edit-name').value.trim();
- const newImage = dialog.querySelector('.edit-image').value.trim();
- const newCategory = dialog.querySelector('.edit-category').value;
- if (!newName) {
- alert('Product name cannot be empty');
- return;
- }
- document.body.removeChild(modal);
- resolve({ action: 'save', name: newName, category: newCategory, image: newImage });
- });
-
- // Delete button (only present in edit mode)
- const deleteBtn = dialog.querySelector('.delete-btn');
- if (deleteBtn) {
- deleteBtn.addEventListener('click', () => {
- if (confirm(`Delete "${product.name}"?`)) {
- document.body.removeChild(modal);
- resolve({ action: 'delete' });
- }
- });
- }
-
- // Cancel button
- dialog.querySelector('.cancel-btn').addEventListener('click', () => {
- document.body.removeChild(modal);
- resolve(null);
- });
-
- // Backdrop click
- modal.addEventListener('click', (e) => {
- if (e.target === modal) {
- document.body.removeChild(modal);
- resolve(null);
- }
- });
- });
- }
-
- /**
- * Edit a product
- */
- async _editProduct(productKey) {
- const result = await this._showEditDialog(productKey);
- if (!result) return;
-
- try {
- if (result.action === 'delete') {
- // Delete product
- await this._hass.connection.sendMessagePromise({
- type: 'shopping_list_manager/delete_product',
- key: productKey
- });
-
- // Reload data
- await this._loadData();
- this._hapticFeedback();
- } else if (result.action === 'save') {
- // Update product
- await this._hass.connection.sendMessagePromise({
- type: 'shopping_list_manager/add_product',
- key: productKey,
- name: result.name,
- category: result.category,
- unit: 'pcs',
- image: result.image || ''
- });
-
- // Reload data
- await this._loadData();
- this._hapticFeedback();
- }
- } catch (error) {
- console.error('Failed to edit product:', error);
- alert('Failed to edit product: ' + error.message);
- }
- }
-
- /**
- * Set quantity for a product
- */
- async _setQuantity(productKey, qty) {
- const currentQty = this._activeList[productKey]?.qty || 0;
-
- // Optimistic update
- if (qty === 0) {
- delete this._activeList[productKey];
- } else {
- this._activeList[productKey] = { qty };
- }
- this._render();
- this._hapticFeedback();
-
- try {
- await this._hass.connection.sendMessagePromise({
- type: 'shopping_list_manager/set_qty',
- key: productKey,
- qty: qty
- });
- } catch (error) {
- console.error('Failed to set quantity:', error);
- // Revert on error
- if (currentQty === 0) {
- delete this._activeList[productKey];
- } else {
- this._activeList[productKey] = { qty: currentQty };
- }
- this._render();
- alert('Failed to update quantity');
- }
- }
-
- /**
- * Toggle product on/off list
- */
- async _toggleProduct(productKey) {
- const currentQty = this._activeList[productKey]?.qty || 0;
- const newQty = currentQty > 0 ? 0 : 1;
- await this._setQuantity(productKey, newQty);
- }
-
- /**
- * Increment quantity
- */
- async _incrementProduct(productKey) {
- const currentQty = this._activeList[productKey]?.qty || 0;
- await this._setQuantity(productKey, currentQty + 1);
- }
-
- /**
- * Decrement quantity
- */
- async _decrementProduct(productKey) {
- const currentQty = this._activeList[productKey]?.qty || 0;
- if (currentQty > 0) {
- await this._setQuantity(productKey, currentQty - 1);
- }
- }
-
- /**
- * Generate product key from name
- */
- _generateKey(name) {
- return name.toLowerCase()
- .replace(/[^a-z0-9]+/g, '_')
- .replace(/^_+|_+$/g, '');
- }
-
- /**
- * Haptic feedback based on settings
- */
- _hapticFeedback(intensity = 'medium') {
- if (this._settings.haptics === 'off') return;
-
- if ('vibrate' in navigator) {
- const patterns = {
- low: 5,
- medium: 10,
- high: 20
- };
-
- const duration = patterns[this._settings.haptics] || patterns.medium;
- navigator.vibrate(duration);
- }
- }
-
- /**
- * Show settings modal
- */
- _showSettings() {
- return new Promise((resolve) => {
- const modal = document.createElement('div');
- modal.style.cssText = `
- position: fixed;
- top: 0;
- left: 0;
- width: 100vw;
- height: 100vh;
- background: rgba(0,0,0,0.5);
- display: flex;
- align-items: flex-end;
- justify-content: center;
- z-index: 100000;
- isolation: isolate;
- `;
-
- const dialog = document.createElement('div');
- dialog.style.cssText = `
- background: var(--card-background-color);
- border-radius: 16px 16px 0 0;
- padding: 12px 24px 32px 24px;
- width: 100%;
- max-width: 480px;
- max-height: 70vh;
- overflow-y: auto;
- position: relative;
- `;
-
- dialog.innerHTML = `
-
-
-
-
-
-
- Settings
- -
-
-
-
-
-
- ${['off', 'low', 'medium', 'high'].map(level => `
-
- `).join('')}
-
-
-
-
-
-
-
- ${['auto', '2', '3', '4', '5'].map(count => `
-
- `).join('')}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Hide Completed
- Hide products with quantity 0
-
-
-
-
- `;
-
- modal.appendChild(dialog);
- document.body.appendChild(modal);
-
- // Haptics buttons
- dialog.querySelectorAll('.haptic-btn').forEach(btn => {
- btn.addEventListener('click', () => {
- this._settings.haptics = btn.dataset.level;
- this._saveSettings();
-
- // Update visual selection
- dialog.querySelectorAll('.haptic-btn').forEach(b => {
- b.style.borderColor = 'var(--divider-color)';
- b.style.background = 'var(--card-background-color)';
- });
- btn.style.borderColor = 'var(--primary-color)';
- btn.style.background = 'var(--primary-color)';
-
- // Test vibration
- this._hapticFeedback();
- });
- });
-
- // Products per row buttons
- dialog.querySelectorAll('.perrow-btn').forEach(btn => {
- btn.addEventListener('click', () => {
- this._settings.productsPerRow = btn.dataset.count;
- this._saveSettings();
- this._updateContent(); // apply grid change immediately
-
- // Update visual selection
- dialog.querySelectorAll('.perrow-btn').forEach(b => {
- b.style.borderColor = 'var(--divider-color)';
- b.style.background = 'var(--card-background-color)';
- });
- btn.style.borderColor = 'var(--primary-color)';
- btn.style.background = 'var(--primary-color)';
-
- this._hapticFeedback();
- });
- });
-
- // Hide completed toggle
- const hideCompletedToggle = dialog.querySelector('.hide-completed-toggle');
- if (hideCompletedToggle) {
- hideCompletedToggle.addEventListener('change', (e) => {
- this._settings.hideCompleted = e.target.checked;
- this._saveSettings();
-
- // Update toggle visual state
- const toggle = e.target.parentElement;
- const slider = toggle.querySelectorAll('span')[0];
- const knob = toggle.querySelectorAll('span')[1];
- slider.style.backgroundColor = e.target.checked ? 'var(--primary-color)' : 'var(--divider-color)';
- knob.style.left = e.target.checked ? '23px' : '3px';
-
- this._updateContent();
- this._hapticFeedback();
- });
- }
-
- // Compact headers toggle
- const compactHeadersToggle = dialog.querySelector('.compact-headers-toggle');
- if (compactHeadersToggle) {
- compactHeadersToggle.addEventListener('change', (e) => {
- this._settings.compactHeaders = e.target.checked;
- this._saveSettings();
-
- // Update toggle visual state
- const toggle = e.target.parentElement;
- const slider = toggle.querySelectorAll('span')[0];
- const knob = toggle.querySelectorAll('span')[1];
- slider.style.backgroundColor = e.target.checked ? 'var(--primary-color)' : 'var(--divider-color)';
- knob.style.left = e.target.checked ? '23px' : '3px';
-
- this._updateContent();
- this._hapticFeedback();
- });
- }
-
- // Layout buttons
- dialog.querySelectorAll('.layout-btn').forEach(btn => {
- btn.addEventListener('click', () => {
- this._settings.layout = btn.dataset.layout;
- this._saveSettings();
- this._updateContent(); // switch gridโlist immediately
-
- // Update visual selection
- dialog.querySelectorAll('.layout-btn').forEach(b => {
- b.style.borderColor = 'var(--divider-color)';
- b.style.background = 'var(--card-background-color)';
- });
- btn.style.borderColor = 'var(--primary-color)';
- btn.style.background = 'var(--primary-color)';
-
- this._hapticFeedback();
- });
- });
-
- // Close button (Done)
- dialog.querySelector('.close-btn').addEventListener('click', () => {
- document.body.removeChild(modal);
- this._updateContent();
- resolve();
- });
-
- // โ top-right close button
- dialog.querySelector('.close-x-btn').addEventListener('click', () => {
- document.body.removeChild(modal);
- this._updateContent();
- resolve();
- });
-
- // Backdrop click
- modal.addEventListener('click', (e) => {
- if (e.target === modal) {
- document.body.removeChild(modal);
- this._updateContent();
- resolve();
- }
- });
- });
- }
-
- /**
- * Fuzzy search - matches even with typos or partial matches
- */
- _fuzzyMatch(text, query) {
- text = text.toLowerCase();
- query = query.toLowerCase();
-
- // Exact match or substring
- if (text.includes(query)) {
- return true;
- }
-
- // Fuzzy match - allows for missing characters
- let queryIndex = 0;
- for (let i = 0; i < text.length && queryIndex < query.length; i++) {
- if (text[i] === query[queryIndex]) {
- queryIndex++;
- }
- }
- return queryIndex === query.length;
- }
-
- /**
- * Filter products by search and split into active/inactive
- */
- _getFilteredProducts() {
- let products = Object.values(this._products);
-
- // Filter by search query with fuzzy matching
- if (this._searchQuery) {
- const query = this._searchQuery.toLowerCase();
- products = products.filter(product =>
- this._fuzzyMatch(product.name, query)
- );
- }
-
- // Filter by selected category
- if (this._selectedCategory) {
- products = products.filter(product =>
- product.category === this._selectedCategory
- );
- }
-
- // Sort products
- if (this._sortBy === 'category') {
- // Sort by category order, then by name
- products.sort((a, b) => {
- const catA = CATEGORY_MAP[a.category] || CATEGORY_MAP['other'];
- const catB = CATEGORY_MAP[b.category] || CATEGORY_MAP['other'];
-
- if (catA.order !== catB.order) {
- return catA.order - catB.order;
- }
- return a.name.localeCompare(b.name);
- });
- } else {
- // Alphabetical sort
- products.sort((a, b) => a.name.localeCompare(b.name));
- }
-
- return products;
- }
-
- /**
- * Get active products (in shopping list)
- */
- _getActiveProducts() {
- const filtered = this._getFilteredProducts();
- return filtered.filter(product => {
- const qty = this._activeList[product.key]?.qty || 0;
- return qty > 0;
- });
- }
-
- /**
- * Get inactive products (not in shopping list)
- */
- _getInactiveProducts() {
- const filtered = this._getFilteredProducts();
- return filtered.filter(product => {
- const qty = this._activeList[product.key]?.qty || 0;
- return qty === 0;
- });
- }
-
- /**
- * Check if should show "Add New" button
- */
- _shouldShowAddNew() {
- if (!this._searchQuery || this._searchQuery.length < 2) {
- return false;
- }
-
- const query = this._searchQuery.toLowerCase();
- const exactMatch = Object.values(this._products).some(
- product => product.name.toLowerCase() === query
- );
-
- return !exactMatch;
- }
-
- /**
- * Render the card
- */
- _render() {
- // Only do initial render if the structure doesn't exist
- if (!this.shadowRoot.querySelector('.card-content')) {
- this._initialRender();
- return;
- }
-
- // Otherwise just update the content area
- this._updateContent();
- }
-
- /**
- * Initial render - creates the persistent structure
- */
- _initialRender() {
- this.shadowRoot.innerHTML = `
-
-
-
-
-
- Compact Headers
- Show category names only (no emoji)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Loading...
';
- return;
- }
-
- const activeProducts = this._getActiveProducts();
- const inactiveProducts = this._getInactiveProducts();
- let html = '';
-
-
-
- // Show active products first
- if (activeProducts.length > 0) {
- if (this._sortBy === 'category') {
- html += this._renderProductsByCategory(activeProducts, false);
- } else {
- const containerClass = this._settings.layout === 'list' ? 'product-list' : 'product-grid';
- html += ``;
- html += activeProducts.map(product => this._renderProductTile(product)).join('');
- html += '
';
- }
- }
-
- // Show inactive products in "Recently Used" section (unless hidden)
- if (inactiveProducts.length > 0 && !this._searchQuery && !this._settings.hideCompleted) {
- html += `
-
-
- `;
- }
-
- // Empty state
- if (activeProducts.length === 0 && inactiveProducts.length === 0) {
- html += `
-
- Recently Used
-
- ${this._sortBy === 'category' ?
- this._renderProductsByCategory(inactiveProducts, true) :
- `
- ${inactiveProducts.map(product => this._renderProductTile(product)).join('')}
-
`
- }
-
- ${this._searchQuery ? 'No products found' : 'No products yet. Search to add your first product!'}
-
- `;
- }
-
- contentArea.innerHTML = html;
-
- // Stamp live grid columns onto every .product-grid so the setting
- // takes effect immediately without needing a full re-render.
- const gridCols = this._settings.productsPerRow === 'auto'
- ? 'repeat(auto-fill, minmax(120px, 1fr))'
- : `repeat(${this._settings.productsPerRow}, 1fr)`;
- contentArea.querySelectorAll('.product-grid').forEach(g => {
- g.style.gridTemplateColumns = gridCols;
- });
-
- this._attachContentListeners();
- }
-
- /**
- * Render products by category (helper for active/inactive)
- */
- _renderProductsByCategory(products, isRecentlyUsed) {
- const containerClass = this._settings.layout === 'list' ? 'product-list' : 'product-grid';
- const productsByCategory = {};
-
- products.forEach(product => {
- const categoryId = product.category || 'other';
- if (!productsByCategory[categoryId]) {
- productsByCategory[categoryId] = [];
- }
- productsByCategory[categoryId].push(product);
- });
-
- return CATEGORIES
- .filter(cat => productsByCategory[cat.id] && productsByCategory[cat.id].length > 0)
- .map(cat => {
- const categoryProducts = productsByCategory[cat.id];
- const headerHtml = this._settings.compactHeaders
- ? `${cat.name}
`
- : `${cat.emoji}${cat.name}
`;
- return `
-
- ${headerHtml}
-
- `;
- }).join('');
- }
-
- /**
- * Attach listeners that persist (search bar, sort buttons)
- */
- _attachPersistentListeners() {
- const searchBar = this.shadowRoot.querySelector('.search-bar');
- const searchClear = this.shadowRoot.querySelector('.search-clear');
- const settingsBtn = this.shadowRoot.querySelector('.settings-btn');
-
- if (searchBar) {
- searchBar.addEventListener('input', (e) => {
- this._searchQuery = e.target.value;
- // โ clear button: show/hide based on text
- if (searchClear) {
- searchClear.style.display = this._searchQuery.length > 0 ? 'block' : 'none';
- }
- // Settings/Add button: swap โ๏ธ โ โ based on whether "add new" applies
- if (settingsBtn) {
- if (this._searchQuery.length > 0 && this._shouldShowAddNew()) {
- settingsBtn.textContent = 'โ';
- settingsBtn.title = 'Add new product';
- } else {
- settingsBtn.textContent = 'โ๏ธ';
- settingsBtn.title = 'Settings';
- }
- }
- this._updateContent();
- });
- }
-
- // โ clear search
- if (searchClear) {
- searchClear.addEventListener('click', () => {
- this._searchQuery = '';
- searchBar.value = '';
- searchClear.style.display = 'none';
- if (settingsBtn) { settingsBtn.textContent = 'โ๏ธ'; settingsBtn.title = 'Settings'; }
- searchBar.focus();
- this._updateContent();
- this._hapticFeedback();
- });
- }
-
- // Settings / Add button (toggles based on search state)
- if (settingsBtn) {
- settingsBtn.addEventListener('click', () => {
- if (settingsBtn.textContent === 'โ') {
- this._addNewProduct(this._searchQuery);
- } else {
- this._showSettings();
- }
- this._hapticFeedback();
- });
- }
-
- const sortButtons = this.shadowRoot.querySelectorAll('.control-btn[data-sort]');
- sortButtons.forEach(btn => {
- btn.addEventListener('click', () => {
- this._sortBy = btn.dataset.sort;
- // Update button states
- sortButtons.forEach(b => b.classList.remove('active'));
- btn.classList.add('active');
- this._updateContent();
- this._hapticFeedback();
- });
- });
- }
-
- /**
- * Attach listeners for content area (products, buttons)
- */
- _attachContentListeners() {
- // Product tiles - add long-press for edit
- const tiles = this.shadowRoot.querySelectorAll('.product-tile');
- tiles.forEach(tile => {
- const key = tile.dataset.key;
- let longPressTimer = null;
- let longPressTriggered = false;
-
- // Touch events for mobile long-press
- tile.addEventListener('touchstart', (e) => {
- longPressTriggered = false;
- longPressTimer = setTimeout(() => {
- longPressTriggered = true;
- this._hapticFeedback();
- this._editProduct(key);
- }, 500); // 500ms long press
- }, { passive: true });
-
- tile.addEventListener('touchend', () => {
- if (longPressTimer) {
- clearTimeout(longPressTimer);
- }
- });
-
- tile.addEventListener('touchmove', () => {
- if (longPressTimer) {
- clearTimeout(longPressTimer);
- }
- }, { passive: true });
-
- // Mouse events for desktop
- tile.addEventListener('mousedown', (e) => {
- longPressTriggered = false;
- longPressTimer = setTimeout(() => {
- longPressTriggered = true;
- this._editProduct(key);
- }, 500);
- });
-
- tile.addEventListener('mouseup', () => {
- if (longPressTimer) {
- clearTimeout(longPressTimer);
- }
- });
-
- tile.addEventListener('mouseleave', () => {
- if (longPressTimer) {
- clearTimeout(longPressTimer);
- }
- });
-
- // Right-click for edit
- tile.addEventListener('contextmenu', (e) => {
- e.preventDefault();
- this._editProduct(key);
- });
-
- // Regular click
- tile.addEventListener('click', (e) => {
- // Don't toggle if it was a long press or clicking buttons
- if (!longPressTriggered && !e.target.closest('.qty-button')) {
- // Check if click is in bottom 30px area (where buttons would be)
- const rect = tile.getBoundingClientRect();
- const clickY = e.clientY - rect.top;
- const isBottomArea = clickY > (rect.height - 35);
-
- // Only toggle if not clicking in button area
- if (!isBottomArea || !isActive) {
- this._toggleProduct(key);
- }
- }
- });
- });
-
- // Plus buttons
- const plusButtons = this.shadowRoot.querySelectorAll('.plus-btn');
- plusButtons.forEach(btn => {
- btn.addEventListener('click', (e) => {
- e.stopPropagation();
- this._incrementProduct(btn.dataset.key);
- });
- });
-
- // Minus buttons
- const minusButtons = this.shadowRoot.querySelectorAll('.minus-btn');
- minusButtons.forEach(btn => {
- btn.addEventListener('click', (e) => {
- e.stopPropagation();
- this._decrementProduct(btn.dataset.key);
- });
- });
- }
-
- /**
- * Render a single product tile
- */
- _renderProductTile(product) {
- const qty = this._activeList[product.key]?.qty || 0;
- const isActive = qty > 0;
- const hasImage = product.image && product.image.trim().length > 0;
-
- // Determine if image is URL or emoji
- const isUrl = hasImage && (product.image.startsWith('http') || product.image.startsWith('/'));
- const displayImage = hasImage ? product.image : '๐';
-
- return `
-
- ${categoryProducts.map(product => this._renderProductTile(product)).join('')}
-
-
-
- `;
- }
-
- disconnectedCallback() {
- if (this._pollInterval) {
- clearInterval(this._pollInterval);
- }
- if (this._visibilityHandler) {
- document.removeEventListener('visibilitychange', this._visibilityHandler);
- }
- }
-
- // Temporarily disabled GUI editor - use YAML configuration
- // static getConfigElement() {
- // return document.createElement('shopping-list-card-editor');
- // }
-
- static getStubConfig() {
- return { title: 'Shopping List' };
- }
-
- getCardSize() {
- return 3;
- }
-}
-
-// โโ GUI Config Editor โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
-// This is the standard HA card-editor pattern. HA renders this
-// element inside its "configure card" panel automatically when the
-// card exposes a static getConfigElement() method.
-class ShoppingListCardEditor extends HTMLElement {
- setConfig(config) {
- console.log('[Editor] setConfig called, _rendered:', this._rendered, 'config:', config);
- this._config = { ...(config || {}) }; // shallow-copy: HA 2026+ freezes the original
- if (!this._rendered) {
- console.log('[Editor] First render, calling _render()');
- this._render(); // only render once, then STOP
- } else {
- console.log('[Editor] Already rendered, ignoring setConfig');
- }
- // After first render, ignore setConfig calls - the updateConfig closure
- // already handles live updates by mutating this._config directly
- }
-
- set hass(hass) {
- console.log('[Editor] hass setter called, _rendered:', this._rendered);
- this._hass = hass;
- if (!this._rendered) this._render();
- }
-
- _render() {
- if (!this._config) return; // nothing to render yet
-
- // Attach shadow DOM once, reuse on subsequent renders
- if (!this.shadowRoot) {
- this.attachShadow({ mode: 'open' });
- }
-
- const title = this._config.title || '';
- const productsPerRow = String(this._config.products_per_row || '3');
- const layout = this._config.layout || 'grid';
- const haptics = this._config.haptics || 'medium';
- const hideCompleted = !!this._config.hide_completed;
- const compactHeaders = !!this._config.compact_headers;
-
- this.shadowRoot.innerHTML = `
-
-
-
- ${product.name}
-
-
- ${isUrl ?
- `
- ` :
- `
-
- ${isActive ? `
- ${displayImage}
`
- }
-
-
-
-
- ` : `
- Tap to add
- `}
-
-
-
-
-
-
- Auto
- 2
- 3
- 4
- 5
-
-
-
-
- Grid
- List
-
-
-
-
-
-
- Off
- Low
- Medium
- High
-
-
-
- - - -
-
-
-
-
- Hide completed items
- Hides the "Recently Used" section showing products not currently on the list.
-
-
-
-
-
-
- ${this._showCodeEditor ? `
- Compact headers
- Show category names only (no emoji)
-
- ${this._toYaml()}
` : ''}
- `;
-
- // โโ Set values imperatively (reliable with shadow DOM + HA components) โโ
- const titleEl = this.shadowRoot.querySelector('#ed-title');
- const perrowEl = this.shadowRoot.querySelector('#ed-perrow');
- const layoutEl = this.shadowRoot.querySelector('#ed-layout');
- const hapticsEl = this.shadowRoot.querySelector('#ed-haptics');
- const hideCompletedEl = this.shadowRoot.querySelector('#ed-hide-completed');
- const hideHeadersEl = this.shadowRoot.querySelector('#ed-hide-headers');
-
- titleEl.value = title;
- perrowEl.value = productsPerRow;
- layoutEl.value = layout;
- hapticsEl.value = haptics;
- hideCompletedEl.checked = hideCompleted;
- hideHeadersEl.checked = compactHeaders;
-
- // โโ Single updateConfig closure โ mirrors your working pattern โโ
- const updateConfig = () => {
- console.log('[Editor] updateConfig called');
- this._config = {
- ...this._config,
- title: titleEl.value || 'Shopping List',
- products_per_row: perrowEl.value,
- layout: layoutEl.value,
- haptics: hapticsEl.value,
- hide_completed: hideCompletedEl.checked,
- compact_headers: hideHeadersEl.checked
- };
- console.log('[Editor] Dispatching config-changed:', this._config);
- this.dispatchEvent(new CustomEvent('config-changed', {
- detail: { config: this._config },
- bubbles: true,
- composed: true
- }));
- };
-
- titleEl.addEventListener('input', updateConfig);
- perrowEl.addEventListener('value-changed', updateConfig);
- layoutEl.addEventListener('value-changed', updateConfig);
- hapticsEl.addEventListener('value-changed', updateConfig);
- hideCompletedEl.addEventListener('checked-changed', updateConfig);
- hideHeadersEl.addEventListener('checked-changed', updateConfig);
-
- this.shadowRoot.querySelector('#ed-code-toggle').addEventListener('click', () => {
- this._showCodeEditor = !this._showCodeEditor;
- this._render();
- });
-
- this._rendered = true;
- }
-
- _toYaml() {
- const lines = ['type: custom:shopping-list-card'];
- if (this._config.title) lines.push('title: ' + this._config.title);
- if (this._config.products_per_row) lines.push('products_per_row: ' + this._config.products_per_row);
- if (this._config.layout) lines.push('layout: ' + this._config.layout);
- if (this._config.haptics) lines.push('haptics: ' + this._config.haptics);
- if (this._config.hide_completed) lines.push('hide_completed: true');
- if (this._config.compact_headers) lines.push('compact_headers: true');
- return lines.join('\n');
- }
-}
-
-customElements.define('shopping-list-card-editor', ShoppingListCardEditor);
-customElements.define('shopping-list-card', ShoppingListCard);
-
-window.customCards = window.customCards || [];
-window.customCards.push({
- type: 'shopping-list-card',
- name: 'Shopping List Card',
- description: 'A shopping list card with search, categories, and product images.',
- preview: false
-});