@govbr-ds/webcomponents 2.1.3 → 2.2.0

package/dist/collection/pages/scripts/component-controls.js

@@ -1,76 +1,39 @@
 (() => {
-  const MANAGED_CSS_START = '/* playground-controls:start */';
-  const MANAGED_CSS_END = '/* playground-controls:end */';
+  const {
+    findInstances,
+    getBooleanAttributes,
+    getPropertyValue,
+    getSlotValue,
+    getTargetElement,
+    normalizeControlValue,
+    parseHtml,
+    serializeBody,
+    updateManagedCss,
+    updateProperty,
+  } = window.WBCComponentControlsCore;
   let manifestPromise = null;
+  let controlsInstanceCount = 0;
 
   const getBaseUrl = () => (typeof window.getBaseUrl === 'function' ? window.getBaseUrl() : '');
 
   const loadManifest = () => {
-    if (!manifestPromise) {
-      manifestPromise = fetch(`${getBaseUrl()}/assets/component-controls.json`, { cache: 'no-cache' })
-        .then((response) => (response.ok ? response.json() : null))
-        .catch(() => null);
-    }
-    return manifestPromise;
-  };
-
-  const parseHtml = (html) => new DOMParser().parseFromString(html || '', 'text/html');
-
-  const serializeBody = (doc, booleanAttributes = []) => {
-    let html = doc.body.innerHTML.trim();
-    booleanAttributes.forEach((attribute) => {
-      const escapedAttribute = attribute.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-      html = html.replace(new RegExp(`\\s${escapedAttribute}=""(?=\\s|>)`, 'gi'), ` ${attribute}`);
-    });
-    return html;
-  };
-
-  const normalizeControlValue = (value) =>
-    value === undefined || value === null || value === 'null' ? '' : String(value);
-
-  const getTargetElement = (doc, instance) =>
-    Array.from(doc.body.querySelectorAll(instance.tag))[instance.index] || null;
-
-  const findInstances = (html, components) => {
-    const doc = parseHtml(html);
-    const knownTags = new Set(components.map((component) => component.tag));
-    const counters = new Map();
-
-    return Array.from(doc.body.querySelectorAll('*'))
-      .filter((element) => knownTags.has(element.tagName.toLowerCase()))
-      .map((element) => {
-        const tag = element.tagName.toLowerCase();
-        const index = counters.get(tag) || 0;
-        counters.set(tag, index + 1);
-        return {
-          tag,
-          index,
-          label: counters.get(tag) > 1 ? `${tag} #${index + 1}` : tag,
-        };
-      });
-  };
-
-  const getSlotValue = (element, slotName) => {
-    if (!element) return '';
-    if (slotName === 'default') return element.innerHTML.trim();
-    const slotElement = element.querySelector(`[slot="${slotName}"]`);
-    return slotElement?.innerHTML.trim() || '';
-  };
+    if (manifestPromise) return manifestPromise;
+
+    manifestPromise = (async () => {
+      for (let attempt = 0; attempt < 3; attempt += 1) {
+        let response;
+        try {
+          response = await fetch(`${getBaseUrl()}/assets/component-controls.json`, { cache: 'no-cache' });
+        } catch {
+          response = null;
+        }
+        if (response?.ok) return await response.json();
+        if (attempt < 2) await new Promise((resolve) => setTimeout(resolve, 150 * (attempt + 1)));
+      }
+      return { components: [] };
+    })();
 
-  const updateManagedCss = (currentCss, tag, partValues, scopeSelector = '') => {
-    const selectorPrefix = scopeSelector.trim();
-    const rules = Object.entries(partValues)
-      .filter(([, value]) => value.trim().length > 0)
-      .map(
-        ([part, value]) => `${selectorPrefix ? `${selectorPrefix} ` : ''}${tag}::part(${part}) {\n  ${value.trim()}\n}`,
-      )
-      .join('\n\n');
-    const block = rules ? `${MANAGED_CSS_START}\n${rules}\n${MANAGED_CSS_END}` : '';
-    const pattern = new RegExp(
-      `\\n?${MANAGED_CSS_START.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}[\\s\\S]*?${MANAGED_CSS_END.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\n?`,
-    );
-    const withoutBlock = currentCss.replace(pattern, '').trimEnd();
-    return block ? `${withoutBlock}${withoutBlock ? '\n\n' : ''}${block}` : withoutBlock;
+    return manifestPromise;
   };
 
   const createField = (label, description) => {
@@ -99,6 +62,7 @@
 
   const createControlButton = (isCollapsed, ariaLabel, onClick) => {
     const button = document.createElement('br-button');
+    button.setAttribute('type', 'button');
     button.setAttribute('density', 'small');
     button.setAttribute('emphasis', 'secondary');
     button.setAttribute('shape', 'circle');
@@ -178,36 +142,43 @@
     return tooltip;
   };
 
-  const createSection = (state, id, title) => {
+  const createSection = (state, id, title, summary = '') => {
     const section = document.createElement('section');
     section.className = 'wbc-component-controls-section';
     if (state.collapsedSections[id]) section.classList.add('is-collapsed');
 
     const header = document.createElement('div');
     header.className = 'wbc-component-controls-section__header';
-    header.style.cursor = 'pointer';
     const heading = document.createElement('h4');
     heading.textContent = title;
-
-    const toggleSection = () => {
-      state.collapsedSections[id] = !state.collapsedSections[id];
-      scheduleRenderControls(state.root, state);
-    };
+    const summaryElement = document.createElement('span');
+    summaryElement.className = 'wbc-component-controls-section__summary';
+    summaryElement.textContent = summary;
 
     const toggle = createControlButton(
       state.collapsedSections[id],
       state.collapsedSections[id] ? `Expandir ${title}` : `Recolher ${title}`,
       (e) => {
-        e.stopPropagation();
-        toggleSection();
+        state.collapsedSections[id] = !state.collapsedSections[id];
+        state.root.querySelector(`[data-controls-section="${id}"]`)?.classList.toggle('is-collapsed');
+        e.currentTarget.setAttribute('aria-expanded', String(!state.collapsedSections[id]));
+        e.currentTarget.setAttribute(
+          'aria-label',
+          state.collapsedSections[id] ? `Expandir ${title}` : `Recolher ${title}`,
+        );
+        const icon = e.currentTarget.querySelector('i');
+        icon?.classList.toggle('fa-chevron-down', state.collapsedSections[id]);
+        icon?.classList.toggle('fa-chevron-up', !state.collapsedSections[id]);
       },
     );
     toggle.setAttribute('aria-expanded', String(!state.collapsedSections[id]));
-    header.addEventListener('click', toggleSection);
 
     const body = document.createElement('div');
     body.className = 'wbc-component-controls-section__body';
-    header.append(heading, toggle);
+    body.id = `${state.controlId}-${id}`;
+    section.dataset.controlsSection = id;
+    toggle.setAttribute('aria-controls', body.id);
+    header.append(heading, summaryElement, toggle);
     section.append(header, body);
     return section;
   };
@@ -216,13 +187,6 @@
     section?.querySelector('.wbc-component-controls-section__body')?.appendChild(field);
   };
 
-  const getPropertyValue = (element, prop) => {
-    if (!element) return '';
-    const propName = prop.fieldName || prop.attribute;
-    const value = element[propName] !== undefined ? element[propName] : element.getAttribute(prop.attribute);
-    return value === null || value === undefined ? '' : String(value);
-  };
-
   const createPropertyControl = (prop, rawValue, selectedElement) => {
     if (prop.control === 'checkbox') {
       return createCheckboxControl({
@@ -248,37 +212,26 @@
     });
   };
 
-  const updateCheckboxProperty = (target, event, input, prop) => {
-    const isChecked = event.type === 'checkedChange' ? event.detail : input.checked;
-    if (isChecked) target.setAttribute(prop.attribute, '');
-    else target.removeAttribute(prop.attribute);
-  };
-
-  const updateValueProperty = (target, event, input, prop) => {
-    const newValue = event.detail !== undefined ? event.detail : input.value;
-    const normalized = normalizeControlValue(newValue);
-    if (normalized.trim().length > 0) target.setAttribute(prop.attribute, normalized);
-    else target.removeAttribute(prop.attribute);
-  };
-
-  const applyPropertyUpdate = ({ event, input, prop, definition, getHtml, selected, setHtml, render }) => {
+  const applyPropertyUpdate = ({ event, input, prop, definition, getHtml, selected, setHtml }) => {
     const nextDoc = parseHtml(getHtml());
     const target = getTargetElement(nextDoc, selected);
     if (!target) return;
 
-    const update = prop.control === 'checkbox' ? updateCheckboxProperty : updateValueProperty;
-    update(target, event, input, prop);
-
-    const booleanAttributes = definition.props
-      .filter(({ control }) => control === 'checkbox')
-      .map(({ attribute }) => attribute);
-    const savedScrollY = window.scrollY || document.documentElement.scrollTop || 0;
+    const value =
+      prop.control === 'checkbox'
+        ? event.type === 'checkedChange'
+          ? event.detail
+          : input.checked
+        : event.detail !== undefined
+          ? event.detail
+          : input.value;
+    updateProperty(target, prop, value);
+
+    const booleanAttributes = getBooleanAttributes(definition);
     setHtml(serializeBody(nextDoc, booleanAttributes));
-    render();
-    window.scrollTo(0, savedScrollY);
   };
 
-  const createPropertyRow = ({ prop, definition, getHtml, root, selected, selectedElement, setHtml, state }) => {
+  const createPropertyRow = ({ prop, definition, getHtml, selected, selectedElement, setHtml }) => {
     const rawValue = getPropertyValue(selectedElement, prop);
     const input = createPropertyControl(prop, rawValue, selectedElement);
     const update = (event) =>
@@ -290,12 +243,12 @@
         getHtml,
         selected,
         setHtml,
-        render: () => scheduleRenderControls(root, state),
       });
     input.addEventListener(prop.control === 'checkbox' ? 'checkedChange' : 'valueChange', update);
 
     const tr = document.createElement('tr');
     const nameTd = document.createElement('td');
+    nameTd.dataset.label = 'Propriedade';
     const propertyName = document.createElement('div');
     propertyName.className = 'wbc-component-controls-property-name';
     const codeEl = document.createElement('code');
@@ -306,6 +259,7 @@
     nameTd.appendChild(propertyName);
 
     const descTd = document.createElement('td');
+    descTd.dataset.label = 'Descrição';
     descTd.textContent = prop.description || 'Sem descrição.';
     if (prop.values?.length) {
       const options = document.createElement('small');
@@ -317,67 +271,166 @@
     }
 
     const valueTd = document.createElement('td');
+    valueTd.dataset.label = 'Valor';
     valueTd.appendChild(input);
     tr.append(nameTd, descTd, valueTd);
     return tr;
   };
 
-  const addColumnResizeHandles = (thead, cols) => {
-    // ponytail: column resize via drag on th right edge; upgrade path: extract to shared util if reused elsewhere
-    thead.querySelectorAll('th').forEach((th, i) => {
-      if (i >= cols.length - 1) return;
-      const handle = document.createElement('div');
-      handle.className = 'wbc-th-resize-handle';
-      th.style.position = 'relative';
-      th.appendChild(handle);
-      handle.addEventListener('mousedown', (e) => {
-        e.preventDefault();
-        const startX = e.clientX;
-        const startW = th.offsetWidth;
-        const nextTh = th.nextElementSibling;
-        const nextStartW = nextTh ? nextTh.offsetWidth : 0;
-        const onMove = (ev) => {
-          const delta = ev.clientX - startX;
-          const newW = Math.max(60, startW + delta);
-          cols[i].style.width = `${newW}px`;
-          if (nextTh && i + 1 < cols.length) cols[i + 1].style.width = `${Math.max(60, nextStartW - delta)}px`;
-        };
-        const onUp = () => {
-          document.removeEventListener('mousemove', onMove);
-          document.removeEventListener('mouseup', onUp);
-        };
-        document.addEventListener('mousemove', onMove);
-        document.addEventListener('mouseup', onUp);
-      });
-    });
-  };
+  const createPropsSection = ({ definition, getHtml, selected, selectedElement, setHtml, state }) => {
+    const configuredProps = definition.props.filter((prop) => selectedElement?.hasAttribute(prop.attribute)).length;
+    const section = createSection(
+      state,
+      'props',
+      'Props',
+      `${configuredProps} configurada${configuredProps === 1 ? '' : 's'} de ${definition.props.length}`,
+    );
+
+    const filter = createTextControl({ label: 'Filtrar propriedades', placeholder: 'Buscar propriedade...' });
+    const filterWrapper = document.createElement('div');
+    filterWrapper.className = 'wbc-component-controls-filter';
+    filterWrapper.appendChild(filter);
+    appendField(section, filterWrapper);
 
-  const createPropsSection = ({ definition, getHtml, root, selected, selectedElement, setHtml, state }) => {
-    const section = createSection(state, 'props', 'Props');
-    if (state.collapsedSections.props) return section;
     const table = document.createElement('table');
     table.className = 'wbc-component-controls-table';
+
+    // Colunas redimensionáveis: larguras em %, ajustadas por arraste ou pelas
+    // setas nos separadores do cabeçalho. Piso de 12% por coluna.
+    const MIN_COLUMN = 12;
+    const columnWidths = [20, 30, 50];
+    const resizers = [];
+
     const colgroup = document.createElement('colgroup');
-    const cols = [20, 40, 40].map((pct) => {
+    const cols = columnWidths.map((width) => {
       const col = document.createElement('col');
-      col.style.width = `${pct}%`;
+      col.style.width = `${width}%`;
       colgroup.appendChild(col);
       return col;
     });
     table.appendChild(colgroup);
 
+    const syncColumns = () => {
+      columnWidths.forEach((width, i) => {
+        cols[i].style.width = `${width}%`;
+      });
+      resizers.forEach((handle, i) => {
+        if (!handle) return;
+        const leftFixed = columnWidths.slice(0, i).reduce((sum, value) => sum + value, 0);
+        const maxLeft = 100 - leftFixed - (columnWidths.length - i - 1) * MIN_COLUMN;
+        handle.setAttribute('aria-valuenow', String(Math.round(columnWidths[i])));
+        handle.setAttribute('aria-valuemax', String(Math.round(maxLeft)));
+      });
+    };
+
+    // O separador `index` fixa a largura da coluna `index`; o espaço restante é
+    // redistribuído entre TODAS as colunas à direita (proporcional às larguras
+    // atuais, com piso MIN_COLUMN). Assim o divisor pode ser arrastado
+    // livremente, empurrando as colunas seguintes, não só a vizinha imediata.
+    const applyResize = (index, targetLeft, refWidths) => {
+      const widths = [...refWidths];
+      const leftFixed = widths.slice(0, index).reduce((sum, value) => sum + value, 0);
+      const rightCount = widths.length - index - 1;
+      const pool = 100 - leftFixed;
+      const nextLeft = Math.max(MIN_COLUMN, Math.min(targetLeft, pool - rightCount * MIN_COLUMN));
+      widths[index] = nextLeft;
+
+      let rightPool = pool - nextLeft;
+      const rightSum = widths.slice(index + 1).reduce((sum, value) => sum + value, 0) || rightCount;
+      for (let i = index + 1; i < widths.length; i += 1) {
+        const colsAfter = widths.length - i - 1;
+        widths[i] =
+          i === widths.length - 1
+            ? rightPool
+            : Math.max(
+                MIN_COLUMN,
+                Math.min((widths[i] / rightSum) * (pool - nextLeft), rightPool - colsAfter * MIN_COLUMN),
+              );
+        rightPool -= widths[i];
+      }
+
+      columnWidths.splice(0, columnWidths.length, ...widths);
+      syncColumns();
+    };
+
+    const startResize = (index, event) => {
+      const tableWidth = table.getBoundingClientRect().width;
+      if (!tableWidth) return;
+      event.preventDefault();
+      const handle = event.currentTarget;
+      handle.setPointerCapture?.(event.pointerId);
+      const startX = event.clientX;
+      const startWidths = [...columnWidths];
+      document.body.classList.add('wbc-playground-column-resizing');
+      const onMove = (moveEvent) => {
+        applyResize(index, startWidths[index] + ((moveEvent.clientX - startX) / tableWidth) * 100, startWidths);
+      };
+      const onEnd = () => {
+        handle.removeEventListener('pointermove', onMove);
+        handle.removeEventListener('pointerup', onEnd);
+        handle.removeEventListener('pointercancel', onEnd);
+        document.body.classList.remove('wbc-playground-column-resizing');
+      };
+      handle.addEventListener('pointermove', onMove);
+      handle.addEventListener('pointerup', onEnd);
+      handle.addEventListener('pointercancel', onEnd);
+    };
+
+    const createHeaderCell = (label, resizerIndex) => {
+      const th = document.createElement('th');
+      th.textContent = label;
+      if (resizerIndex !== undefined) {
+        const handle = document.createElement('div');
+        handle.className = 'wbc-component-controls-column-resizer';
+        handle.setAttribute('role', 'separator');
+        handle.setAttribute('aria-orientation', 'vertical');
+        handle.setAttribute('aria-label', `Redimensionar coluna ${label}`);
+        handle.setAttribute('aria-valuemin', String(MIN_COLUMN));
+        handle.setAttribute('aria-valuenow', String(Math.round(columnWidths[resizerIndex])));
+        handle.tabIndex = 0;
+        handle.addEventListener('pointerdown', (event) => startResize(resizerIndex, event));
+        handle.addEventListener('keydown', (event) => {
+          if (!['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) return;
+          event.preventDefault();
+          const step = event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? -2 : 2;
+          applyResize(resizerIndex, columnWidths[resizerIndex] + step, columnWidths);
+        });
+        th.appendChild(handle);
+        resizers[resizerIndex] = handle;
+      }
+      return th;
+    };
+
     const thead = document.createElement('thead');
-    thead.innerHTML = '<tr><th>Propriedade</th><th>Descrição</th><th>Valores / Opções</th></tr>';
+    const headerRow = document.createElement('tr');
+    headerRow.append(
+      createHeaderCell('Propriedade', 0),
+      createHeaderCell('Descrição', 1),
+      createHeaderCell('Valores / Opções'),
+    );
+    thead.appendChild(headerRow);
     table.appendChild(thead);
-    addColumnResizeHandles(thead, cols);
+    syncColumns();
 
     const tbody = document.createElement('tbody');
     const sortedProps = [...definition.props].sort((a, b) => a.attribute.localeCompare(b.attribute));
-    sortedProps.forEach((prop) => {
-      tbody.appendChild(
-        createPropertyRow({ prop, definition, getHtml, root, selected, selectedElement, setHtml, state }),
-      );
+    const rows = sortedProps.map((prop) => {
+      const row = createPropertyRow({ prop, definition, getHtml, selected, selectedElement, setHtml });
+      row.dataset.propertySearch = [prop.attribute, prop.description, ...(prop.values || [])].join(' ').toLowerCase();
+      tbody.appendChild(row);
+      return row;
     });
+    const applyFilter = (event) => {
+      const rawValue = typeof event.detail === 'string' ? event.detail : filter.value;
+      const value = String(rawValue ?? '')
+        .trim()
+        .toLowerCase();
+      rows.forEach((row) => {
+        row.hidden = value.length > 0 && !row.dataset.propertySearch.includes(value);
+      });
+    };
+    filter.addEventListener('valueChange', applyFilter);
+    filter.addEventListener('input', applyFilter);
     table.appendChild(tbody);
     appendField(section, table);
     return section;
@@ -481,7 +534,6 @@
   const appendSlotFields = (body, definition, getHtml, selected, selectedElement, setHtml, state) => {
     const section = definition.slots.length > 0 ? createSection(state, 'slots', 'Slots') : null;
     if (section) body.appendChild(section);
-    if (state.collapsedSections.slots) return;
     definition.slots.forEach((slot) => {
       appendField(section, createSlotField({ getHtml, selected, selectedElement, setHtml, slot }));
     });
@@ -490,7 +542,6 @@
   const appendPartFields = (body, definition, getCss, partValues, partValuesByTag, selected, setCss, state) => {
     const section = definition.parts.length > 0 ? createSection(state, 'parts', 'CSS parts') : null;
     if (section) body.appendChild(section);
-    if (state.collapsedSections.parts) return;
     definition.parts.forEach((part) => {
       appendField(section, createPartField({ getCss, part, partValues, partValuesByTag, selected, setCss, state }));
     });
@@ -564,7 +615,7 @@
 
     const propsSection =
       definition.props.length > 0
-        ? createPropsSection({ definition, getHtml, root, selected, selectedElement, setHtml, state })
+        ? createPropsSection({ definition, getHtml, selected, selectedElement, setHtml, state })
         : null;
     if (propsSection) body.appendChild(propsSection);
 
@@ -599,6 +650,7 @@
       if (controlsTabItem) controlsTabItem.appendChild(root);
       else editorContainer.parentNode?.insertBefore(root, editorContainer.nextSibling);
       const state = {
+        controlId: `wbc-component-controls-${++controlsInstanceCount}`,
         root,
         collapsedSections: {
           slots: true,
@@ -614,8 +666,20 @@
         setCss,
         setHtml,
       };
+      const refresh = () => scheduleRenderControls(root, state);
+      const reset = () => {
+        state.partValuesByTag = {};
+        state.selected = '';
+        scheduleRenderControls(root, state);
+      };
+      root.refresh = refresh;
+      root.reset = reset;
       renderControls(root, state);
-      return root;
+      return {
+        root,
+        refresh,
+        reset,
+      };
     },
   };
 })();

package/dist/collection/pages/scripts/dev-event-console.js

@@ -24,9 +24,13 @@
   };
 
   window.WBCRegisterNativeEventRecorder = (recorder) => {
+    const controller = new AbortController();
     nativeEvents.forEach((eventName) => {
-      recorder.preview.addEventListener(eventName, (event) => handleNativeEvent(event, recorder));
+      recorder.preview.addEventListener(eventName, (event) => handleNativeEvent(event, recorder), {
+        signal: controller.signal,
+      });
     });
+    recorder.cleanupNativeEvents = () => controller.abort();
   };
   window.WBCActiveRecorders?.forEach(window.WBCRegisterNativeEventRecorder);