@wrrdev/fenix-ui 1.1.16 → 1.1.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (98) hide show
  1. package/README.md +2 -2
  2. package/dist/components/autocomplete/autocomplete.d.ts +3 -1
  3. package/dist/components/autocomplete/autocomplete.d.ts.map +1 -1
  4. package/dist/components/autocomplete/autocomplete.js +7 -1
  5. package/dist/components/autocomplete/autocomplete.js.map +1 -1
  6. package/dist/components/avatar/avatar.d.ts +1 -0
  7. package/dist/components/avatar/avatar.d.ts.map +1 -1
  8. package/dist/components/avatar/avatar.js +3 -0
  9. package/dist/components/avatar/avatar.js.map +1 -1
  10. package/dist/components/badge/badge.d.ts +4 -0
  11. package/dist/components/badge/badge.d.ts.map +1 -1
  12. package/dist/components/badge/badge.js +12 -0
  13. package/dist/components/badge/badge.js.map +1 -1
  14. package/dist/components/button/button.d.ts +2 -0
  15. package/dist/components/button/button.d.ts.map +1 -1
  16. package/dist/components/button/button.js +6 -0
  17. package/dist/components/button/button.js.map +1 -1
  18. package/dist/components/card/card.d.ts +2 -0
  19. package/dist/components/card/card.d.ts.map +1 -1
  20. package/dist/components/card/card.js +6 -0
  21. package/dist/components/card/card.js.map +1 -1
  22. package/dist/components/checkbox/checkbox.d.ts +5 -1
  23. package/dist/components/checkbox/checkbox.d.ts.map +1 -1
  24. package/dist/components/checkbox/checkbox.js +7 -8
  25. package/dist/components/checkbox/checkbox.js.map +1 -1
  26. package/dist/components/datepicker/datepicker.d.ts +17 -2
  27. package/dist/components/datepicker/datepicker.d.ts.map +1 -1
  28. package/dist/components/datepicker/datepicker.js +113 -42
  29. package/dist/components/datepicker/datepicker.js.map +1 -1
  30. package/dist/components/dialog/dialog.d.ts +4 -1
  31. package/dist/components/dialog/dialog.d.ts.map +1 -1
  32. package/dist/components/dialog/dialog.js +41 -18
  33. package/dist/components/dialog/dialog.js.map +1 -1
  34. package/dist/components/drawer/drawer.d.ts +5 -1
  35. package/dist/components/drawer/drawer.d.ts.map +1 -1
  36. package/dist/components/drawer/drawer.js +39 -17
  37. package/dist/components/drawer/drawer.js.map +1 -1
  38. package/dist/components/fileupload/fileupload.d.ts +13 -1
  39. package/dist/components/fileupload/fileupload.d.ts.map +1 -1
  40. package/dist/components/fileupload/fileupload.js +29 -1
  41. package/dist/components/fileupload/fileupload.js.map +1 -1
  42. package/dist/components/floatlabel/floatlabel.d.ts +15 -0
  43. package/dist/components/floatlabel/floatlabel.d.ts.map +1 -1
  44. package/dist/components/floatlabel/floatlabel.js +47 -1
  45. package/dist/components/floatlabel/floatlabel.js.map +1 -1
  46. package/dist/components/icon/icon.d.ts +4 -0
  47. package/dist/components/icon/icon.d.ts.map +1 -1
  48. package/dist/components/icon/icon.js +12 -0
  49. package/dist/components/icon/icon.js.map +1 -1
  50. package/dist/components/input/input.d.ts +9 -2
  51. package/dist/components/input/input.d.ts.map +1 -1
  52. package/dist/components/input/input.js +56 -8
  53. package/dist/components/input/input.js.map +1 -1
  54. package/dist/components/multiselect/multiselect.d.ts +8 -1
  55. package/dist/components/multiselect/multiselect.d.ts.map +1 -1
  56. package/dist/components/multiselect/multiselect.js +61 -9
  57. package/dist/components/multiselect/multiselect.js.map +1 -1
  58. package/dist/components/orderlist/orderlist.d.ts +7 -0
  59. package/dist/components/orderlist/orderlist.d.ts.map +1 -1
  60. package/dist/components/orderlist/orderlist.js +34 -2
  61. package/dist/components/orderlist/orderlist.js.map +1 -1
  62. package/dist/components/radio/radio.d.ts +6 -0
  63. package/dist/components/radio/radio.d.ts.map +1 -1
  64. package/dist/components/radio/radio.js +12 -6
  65. package/dist/components/radio/radio.js.map +1 -1
  66. package/dist/components/select/select.d.ts +19 -1
  67. package/dist/components/select/select.d.ts.map +1 -1
  68. package/dist/components/select/select.js +116 -10
  69. package/dist/components/select/select.js.map +1 -1
  70. package/dist/components/switch/switch.d.ts +4 -1
  71. package/dist/components/switch/switch.d.ts.map +1 -1
  72. package/dist/components/switch/switch.js +2 -1
  73. package/dist/components/switch/switch.js.map +1 -1
  74. package/dist/components/table/table.d.ts +27 -0
  75. package/dist/components/table/table.d.ts.map +1 -1
  76. package/dist/components/table/table.js +106 -21
  77. package/dist/components/table/table.js.map +1 -1
  78. package/dist/components/tabs/tabs.d.ts +6 -0
  79. package/dist/components/tabs/tabs.d.ts.map +1 -1
  80. package/dist/components/tabs/tabs.js +34 -0
  81. package/dist/components/tabs/tabs.js.map +1 -1
  82. package/dist/components/textarea/textarea.d.ts +5 -1
  83. package/dist/components/textarea/textarea.d.ts.map +1 -1
  84. package/dist/components/textarea/textarea.js +25 -6
  85. package/dist/components/textarea/textarea.js.map +1 -1
  86. package/dist/core/jsx.d.ts +11 -5
  87. package/dist/core/jsx.d.ts.map +1 -1
  88. package/dist/core/jsx.js.map +1 -1
  89. package/dist/core/modal.d.ts +31 -0
  90. package/dist/core/modal.d.ts.map +1 -0
  91. package/dist/core/modal.js +61 -0
  92. package/dist/core/modal.js.map +1 -0
  93. package/dist/docs/componentes/input.doc.d.ts.map +1 -1
  94. package/dist/docs/componentes/orderlist.doc.d.ts.map +1 -1
  95. package/dist/fenix-ui.umd.min.js +232 -222
  96. package/dist/fenix-ui4.esm.js +816 -151
  97. package/dist/fenix-ui4.esm.js.map +1 -1
  98. package/package.json +1 -1
@@ -16,6 +16,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
16
16
  static get observedAttributes() {
17
17
  return [
18
18
  "data",
19
+ "items",
19
20
  "data-key",
20
21
  "filter",
21
22
  "filter-by",
@@ -29,13 +30,35 @@ const _FxOrderList = class _FxOrderList extends FxElement {
29
30
  ];
30
31
  }
31
32
  set data(value) {
32
- this._data = value;
33
+ this._data = Array.isArray(value) ? value : [];
33
34
  this._filteredData = null;
34
35
  this.render();
35
36
  }
36
37
  get data() {
37
38
  return this._data;
38
39
  }
40
+ /**
41
+ * Alias de `data` para o binding do Vue/React: `data` colide com a
42
+ * tipagem nativa de atributos HTML (`dataset`/`data-*`) e não reflete em
43
+ * atributo. `items` funciona como propriedade e como atributo JSON.
44
+ */
45
+ get items() {
46
+ return this._data;
47
+ }
48
+ set items(value) {
49
+ const list = Array.isArray(value) ? value : [];
50
+ this._data = list;
51
+ this._filteredData = null;
52
+ const json = (() => {
53
+ try {
54
+ return JSON.stringify(list);
55
+ } catch {
56
+ return null;
57
+ }
58
+ })();
59
+ if (json !== null && this.getAttr("items") !== json) this.setAttribute("items", json);
60
+ else if (this.isConnected) this.render();
61
+ }
39
62
  set selection(value) {
40
63
  this._selection = value;
41
64
  this.render();
@@ -115,7 +138,16 @@ const _FxOrderList = class _FxOrderList extends FxElement {
115
138
  super.connectedCallback();
116
139
  }
117
140
  attributeChangedCallback(name, oldValue, newValue) {
118
- if (this.getAttr("data", "") !== "") {
141
+ if (name === "items") {
142
+ try {
143
+ const parsed = JSON.parse(newValue ?? "[]");
144
+ this._data = Array.isArray(parsed) ? parsed : [];
145
+ this._filteredData = null;
146
+ } catch {
147
+ this._data = [];
148
+ this._filteredData = null;
149
+ }
150
+ } else if (this.getAttr("data", "") !== "") {
119
151
  this._parseDataAttribute();
120
152
  }
121
153
  super.attributeChangedCallback(name, oldValue, newValue);
@@ -1 +1 @@
1
- {"version":3,"file":"orderlist.js","sources":["../../../src/components/orderlist/orderlist.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\nexport interface OrderListItem {\n [key: string]: unknown;\n}\n\n/**\n * <fx-orderlist> - Componente para ordenar uma colecao de itens.\n *\n * Permite reordenar itens arrastando ou usando botoes de controle.\n * Suporta filtro, selecao, checkbox e templates customizados.\n *\n * Atributos: data, data-key, filter, filter-by, filter-placeholder, breakpoint,\n * dragdrop, selection-mode, striped, show-select-all.\n * Evento: `reorder` (composed, detail: { items }).\n * Evento: `selection-change` (composed, detail: { selection }).\n */\nexport class FxOrderList extends FxElement {\n static override styles = css`\n\n :host {\n display: block;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n --orderlist-primary: var(--fx-color-primary, #3b82f6);\n --orderlist-border: var(--fx-border-default, #e2e8f0);\n --orderlist-bg: var(--fx-surface-background, #ffffff);\n --orderlist-bg-hover: var(--fx-surface-surface-hover, #f1f5f9);\n --orderlist-text: var(--fx-text-default, #1e293b);\n --orderlist-text-muted: var(--fx-text-muted, #64748b);\n --orderlist-radius: var(--fx-radius-md, 8px);\n --orderlist-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n --orderlist-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n * { box-sizing: border-box; }\n .container { display: flex; flex-direction: column; gap: var(--fx-space-md, 16px); }\n .list-wrapper { display: flex; flex-direction: column; gap: var(--fx-space-sm, 8px); flex: 1; min-width: 0; }\n .select-all-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: linear-gradient(135deg, var(--orderlist-bg), var(--orderlist-bg-hover)); border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-size: 0.9em; font-weight: 500; }\n .select-all-bar label { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); cursor: pointer; user-select: none; color: var(--orderlist-text); }\n .select-all-bar input[type=\"checkbox\"] { width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; }\n .filter-wrapper { margin-bottom: var(--fx-space-xs, 4px); }\n .filter-input { width: 100%; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); padding-left: 42px; border: 1.5px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-family: inherit; font-size: inherit; color: var(--orderlist-text); background: var(--orderlist-bg) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\") no-repeat 14px center; transition: var(--orderlist-transition); }\n .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: var(--fx-effect-focus-ring, none); }\n .filter-input::placeholder { color: var(--orderlist-text-muted); }\n .main-row { display: flex; align-items: stretch; gap: var(--fx-space-sm, 8px); }\n .list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); overflow: hidden; box-shadow: var(--orderlist-shadow); max-height: 450px; overflow-y: auto; flex: 1; }\n .list::-webkit-scrollbar { width: 6px; }\n .list::-webkit-scrollbar-track { background: transparent; }\n .list::-webkit-scrollbar-thumb { background: var(--orderlist-border); border-radius: 3px; }\n .list::-webkit-scrollbar-thumb:hover { background: var(--orderlist-text-muted); }\n .selection-count { font-size: 0.85em; color: var(--orderlist-primary); background: color-mix(in srgb, var(--orderlist-primary) 12%, transparent); padding: 4px 12px; border-radius: 20px; font-weight: 600; }\n :host([striped]) .list-item:nth-child(even) { background: var(--fx-surface-surface, #f8fafc); }\n .list-item { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: var(--orderlist-bg); border-bottom: 1px solid var(--orderlist-border); cursor: pointer; user-select: none; transition: var(--orderlist-transition); }\n .list-item:last-child { border-bottom: none; }\n .list-item:hover { background: var(--orderlist-bg-hover); }\n .list-item.selected { background: color-mix(in srgb, var(--orderlist-primary) 8%, transparent); border-left: 3px solid var(--orderlist-primary); padding-left: 11px; }\n .list-item:focus-visible { outline: none; background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\n .list-item.dragging { opacity: 0.5; background: var(--orderlist-bg-hover); }\n .list-item.drag-over { border-top: 2px solid var(--orderlist-primary); }\n .drag-handle { color: var(--orderlist-text-muted); cursor: grab; flex-shrink: 0; font-size: 1.2em; opacity: 0.6; transition: var(--orderlist-transition); }\n .drag-handle:hover { opacity: 1; }\n .drag-handle:active { cursor: grabbing; }\n .item-content { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .checkbox { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; transition: var(--orderlist-transition); }\n .checkbox:hover { transform: scale(1.1); }\n .empty-message { padding: var(--fx-space-xl, 32px); text-align: center; color: var(--orderlist-text-muted); font-style: italic; }\n .controls-bar {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: var(--fx-space-xs, 6px);\n background: var(--orderlist-bg);\n border: 1px solid var(--orderlist-border);\n border-radius: var(--orderlist-radius);\n box-shadow: var(--orderlist-shadow);\n height: fit-content;\n position: sticky;\n top: 0;\n align-self: flex-start;\n }\n .control-group { display: flex; flex-direction: column; gap: 3px; }\n .control-group + .control-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--orderlist-border); }\n button.control-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--orderlist-text-muted); cursor: pointer; font-size: 16px; line-height: 1; transition: var(--orderlist-transition); position: relative; }\n button.control-btn:hover:not(:disabled) { background: var(--orderlist-bg-hover); color: var(--orderlist-primary); transform: scale(1.1); }\n button.control-btn:active:not(:disabled) { transform: scale(0.92); background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\n button.control-btn:focus-visible { outline: none; box-shadow: var(--fx-effect-focus-ring, none); }\n button.control-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }\n .control-btn-icon { font-size: 18px; line-height: 1; }\n /* Tooltip nos botoes */\n button.control-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }\n @media (max-width: 640px) { .main-row { flex-direction: column; } .controls-bar { flex-direction: row; flex-wrap: wrap; justify-content: center; position: relative; } .control-group { flex-direction: row; } .control-group + .control-group { margin-top: 0; margin-left: 4px; padding-top: 0; padding-left: 4px; border-top: none; border-left: 1px solid var(--orderlist-border); } button.control-btn { width: 44px; height: 40px; } button.control-btn::after { display: none; } .list { max-height: 300px; } }\n @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }\n .list-item { animation: slideIn 0.2s ease-out; }\n `;\n\n static override get observedAttributes(): string[] {\n return [\n 'data',\n 'data-key',\n 'filter',\n 'filter-by',\n 'filter-placeholder',\n 'breakpoint',\n 'controls-location',\n 'dragdrop',\n 'striped',\n 'selection-mode',\n 'show-select-all',\n ]\n }\n\n set data(value: OrderListItem[]) {\n this._data = value;\n this._filteredData = null;\n this.render();\n }\n get data(): OrderListItem[] {\n return this._data;\n }\n private _data: OrderListItem[] = [];\n private _filteredData: OrderListItem[] | null = null;\n\n set selection(value: OrderListItem[]) {\n this._selection = value;\n this.render();\n }\n get selection(): OrderListItem[] {\n return this._selection;\n }\n private _selection: OrderListItem[] = [];\n\n get dataKey(): string {\n return this.getAttr('data-key', '');\n }\n set dataKey(v: string) {\n this.setAttribute('data-key', v);\n }\n\n get filter(): boolean {\n return this.hasAttr('filter');\n }\n set filter(v: boolean) {\n this.toggleAttr('filter', v);\n }\n\n get filterBy(): string {\n return this.getAttr('filter-by', 'label');\n }\n set filterBy(v: string) {\n this.setAttribute('filter-by', v);\n }\n\n get filterPlaceholder(): string {\n return this.getAttr('filter-placeholder', 'Buscar...');\n }\n set filterPlaceholder(v: string) {\n this.setAttribute('filter-placeholder', v);\n }\n\n get breakpoint(): string {\n return this.getAttr('breakpoint', '960px');\n }\n set breakpoint(v: string) {\n this.setAttribute('breakpoint', v);\n }\n\n get dragdrop(): boolean {\n return this.hasAttr('dragdrop');\n }\n set dragdrop(v: boolean) {\n this.toggleAttr('dragdrop', v);\n }\n\n get striped(): boolean {\n return this.hasAttr('striped');\n }\n set striped(v: boolean) {\n this.toggleAttr('striped', v);\n }\n\n get selectionMode(): string {\n const s = this.getAttr('selection-mode', '');\n return s === 'single' || s === 'multiple' ? s : '';\n }\n set selectionMode(v: string) {\n this.setAttribute('selection-mode', v);\n }\n\n get showSelectAll(): boolean {\n return this.hasAttr('show-select-all');\n }\n set showSelectAll(v: boolean) {\n this.toggleAttr('show-select-all', v);\n }\n\n get filterValue(): string {\n return this._filterValue;\n }\n set filterValue(v: string) {\n this._filterValue = v;\n this._applyFilter();\n this._updateListDisplay();\n }\n private _filterValue = '';\n\n private _draggedIndex: number | null = null;\n private _listenersAttached = false;\n private _optionTemplate: ((item: OrderListItem) => string) | null = null;\n\n setOptionTemplate(template: (item: OrderListItem) => string): void {\n this._optionTemplate = template;\n this.render();\n }\n\n protected override connectedCallback(): void {\n this._parseDataAttribute();\n super.connectedCallback();\n }\n\n protected override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n if (this.getAttr('data', '') !== '') {\n this._parseDataAttribute();\n }\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n private _parseDataAttribute(): void {\n const dataAttr = this.getAttr('data', '');\n if (dataAttr) {\n try {\n this._data = JSON.parse(dataAttr);\n this._filteredData = null;\n } catch {\n this._data = [];\n }\n }\n }\n\n private _applyFilter(): void {\n if (!this._filterValue) {\n this._filteredData = null;\n return;\n }\n const filterFields = this.filterBy.split(',').map(f => f.trim());\n this._filteredData = this._data.filter(item => {\n return filterFields.some(field => {\n const value = item[field];\n if (value == null) return false;\n return String(value).toLowerCase().includes(this._filterValue.toLowerCase());\n });\n });\n }\n\n private _getDisplayData(): OrderListItem[] {\n return this._filteredData || this._data;\n }\n\n private _getItemKey(item: OrderListItem, index: number): string {\n if (this.dataKey && item[this.dataKey] != null) {\n return String(item[this.dataKey]);\n }\n if (item['id'] != null) return String(item['id']);\n if (item['key'] != null) return String(item['key']);\n if (item['label'] != null) return String(item['label']);\n if (item['name'] != null) return String(item['name']);\n if (item['value'] != null) return String(item['value']);\n return String(index);\n }\n\n private _getItemLabel(item: OrderListItem): string {\n const fields = ['label', 'name', 'title', 'text', 'value'];\n for (const field of fields) {\n if (item[field] != null) {\n return String(item[field]);\n }\n }\n return JSON.stringify(item);\n }\n\n private _isSelected(item: OrderListItem): boolean {\n return this._selection.some(s => this._getItemKey(s, -1) === this._getItemKey(item, -1));\n }\n\n private _moveItem(fromIndex: number, toIndex: number): void {\n const actualFrom = this._getActualIndex(fromIndex);\n const actualTo = this._getActualIndex(toIndex);\n if (actualFrom === -1 || actualTo === -1) return;\n const item = this._data.splice(actualFrom, 1)[0];\n this._data.splice(actualTo, 0, item);\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _getActualIndex(displayIndex: number): number {\n if (this._filteredData) {\n const item = this._filteredData[displayIndex];\n return this._data.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(item, -1));\n }\n return displayIndex;\n }\n\n private _emitReorder(): void {\n this.dispatchEvent(new CustomEvent('reorder', {\n bubbles: true,\n composed: true,\n detail: { items: [...this._data] },\n }));\n }\n\n private _emitSelectionChange(): void {\n this.dispatchEvent(new CustomEvent('selection-change', {\n bubbles: true,\n composed: true,\n detail: { selection: [...this._selection] },\n }));\n }\n\n private _toggleSelection(item: OrderListItem): void {\n const key = this._getItemKey(item, -1);\n const index = this._selection.findIndex(s => this._getItemKey(s, -1) === key);\n if (index >= 0) {\n this._selection.splice(index, 1);\n } else if (this.selectionMode === 'multiple') {\n this._selection.push(item);\n } else {\n this._selection = [item];\n }\n this._emitSelectionChange();\n this._updateListDisplay();\n this._updateControlsState();\n }\n\n private _selectAll(): void {\n const displayData = this._getDisplayData();\n this._selection = [...displayData];\n this._emitSelectionChange();\n this._updateListDisplay();\n this._updateControlsState();\n }\n\n private _deselectAll(): void {\n this._selection = [];\n this._emitSelectionChange();\n this._updateListDisplay();\n this._updateControlsState();\n }\n\n private _toggleSelectAll(): void {\n const displayData = this._getDisplayData();\n if (this._selection.length === displayData.length) {\n this._deselectAll();\n } else {\n this._selectAll();\n }\n }\n\n protected override render(): void {\n const displayData = this._getDisplayData();\n const hasSelection = this.selectionMode;\n const hasMultipleSelection = this.selectionMode === 'multiple';\n const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\n\n this.setTemplate(`\n <div class=\"container\" part=\"container\">\n ${this.filter ? `\n <div class=\"filter-wrapper\" part=\"filter-wrapper\">\n <input type=\"text\" class=\"filter-input\" part=\"filter-input\"\n placeholder=\"${this.filterPlaceholder}\"\n value=\"${esc(this._filterValue)}\"\n aria-label=\"Filtrar lista\" />\n </div>\n ` : ''}\n <div class=\"main-row\" part=\"main-row\">\n <div class=\"controls-bar\" part=\"controls-bar\">\n <div class=\"control-group\">\n <button class=\"control-btn\" data-action=\"top\" part=\"control-btn\" aria-label=\"Mover para o inicio\">\n <span class=\"control-btn-icon\">\\u00AB</span>\n </button>\n <button class=\"control-btn\" data-action=\"up\" part=\"control-btn\" aria-label=\"Mover para cima\">\n <span class=\"control-btn-icon\">\\u2191</span>\n </button>\n </div>\n <div class=\"control-group\">\n <button class=\"control-btn\" data-action=\"down\" part=\"control-btn\" aria-label=\"Mover para baixo\">\n <span class=\"control-btn-icon\">\\u2193</span>\n </button>\n <button class=\"control-btn\" data-action=\"bottom\" part=\"control-btn\" aria-label=\"Mover para o fim\">\n <span class=\"control-btn-icon\">\\u00BB</span>\n </button>\n </div>\n </div>\n <div class=\"list-wrapper\" part=\"list-wrapper\">\n ${hasMultipleSelection && this.showSelectAll ? `\n <div class=\"select-all-bar\" part=\"select-all-bar\">\n <label>\n <input type=\"checkbox\" class=\"select-all-checkbox\"\n ${allSelected ? 'checked' : ''}\n aria-label=\"Selecionar todos\" />\n Selecionar Todos\n </label>\n <span class=\"selection-count\">${this._selection.length} selecionado(s)</span>\n </div>\n ` : ''}\n <ul class=\"list\" part=\"list\" role=\"listbox\"\n aria-multiselectable=\"${hasMultipleSelection}\"\n tabindex=\"0\">\n ${displayData.length === 0 ? `\n <li class=\"empty-message\" part=\"empty-message\">\n ${this.filter ? 'Nenhum resultado encontrado' : 'Nenhum item disponivel'}\n </li>\n ` : displayData.map((item, index) => {\n const key = this._getItemKey(item, index);\n const label = this._getItemLabel(item);\n const isSelected = this._isSelected(item);\n const content = this._optionTemplate ? this._optionTemplate(item) : esc(label);\n return `\n <li class=\"list-item${isSelected ? ' selected' : ''}\" part=\"list-item\"\n data-index=\"${index}\" data-key=\"${esc(key)}\"\n role=\"option\" aria-selected=\"${isSelected}\"\n ${this.dragdrop ? 'draggable=\"true\"' : ''}\n tabindex=\"0\">\n ${this.dragdrop ? '<span class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Arrastar\">\\u22EE\\u22EE</span>' : ''}\n ${hasSelection ? `\n <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\"\n ${isSelected ? 'checked' : ''}\n aria-label=\"Selecionar ${esc(label)}\" />\n ` : ''}\n <span class=\"item-content\" part=\"item-content\">${content}</span>\n </li>\n `;\n }).join('')}\n </ul>\n </div>\n </div>\n </div>\n `);\n\n this._attachListeners();\n this._attachItemListeners(this.root.querySelector('.list') as HTMLElement);\n this._updateControlsState();\n }\n\n private _attachListeners(): void {\n if (this._listenersAttached) return;\n this._listenersAttached = true;\n const root = this.root;\n\n // Filtro - delega input\n root.addEventListener('input', (e) => {\n const t = e.target as HTMLElement;\n if (t.classList.contains('filter-input')) {\n this.filterValue = (t as HTMLInputElement).value;\n }\n });\n\n // Selecionar todos - delega change\n root.addEventListener('change', (e) => {\n const t = e.target as HTMLElement;\n if (t.classList.contains('select-all-checkbox')) {\n this._toggleSelectAll();\n }\n });\n\n // Clique - delega click nos botoes (itens anexados direto em cada render)\n root.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n const btn = target.closest('.control-btn') as HTMLButtonElement;\n if (btn) {\n this._handleMoveAction(btn.dataset.action);\n }\n });\n\n // Drag and drop\n // Drag and drop - delega no root\n let dragOverElement: HTMLElement | null = null;\n root.addEventListener('dragstart', (e) => {\n const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n if (!target) return;\n this._draggedIndex = Number(target.dataset.index);\n target.classList.add('dragging');\n (e as DragEvent).dataTransfer!.effectAllowed = 'move';\n });\n root.addEventListener('dragend', (e) => {\n const target = e.target as HTMLElement;\n target.classList.remove('dragging');\n this._draggedIndex = null;\n root.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));\n dragOverElement = null;\n });\n root.addEventListener('dragover', (e) => {\n e.preventDefault();\n const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n if (!target || target.classList.contains('dragging')) return;\n if (dragOverElement) dragOverElement.classList.remove('drag-over');\n target.classList.add('drag-over');\n dragOverElement = target;\n });\n root.addEventListener('drop', (e) => {\n e.preventDefault();\n if (this._draggedIndex === null) return;\n const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n if (!target) return;\n const toIndex = Number(target.dataset.index);\n target.classList.remove('drag-over');\n dragOverElement = null;\n this._moveItem(this._draggedIndex, toIndex);\n this._draggedIndex = null;\n });\n this._updateControlsState();\n }\n\n private _attachItemListeners(list: HTMLElement): void {\n if (!list) return;\n list.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n const itemEl = target.closest('.list-item') as HTMLElement;\n if (!itemEl) return;\n if (target.classList.contains('checkbox')) {\n e.stopPropagation();\n const idxC = Number(itemEl.dataset.index);\n this._toggleSelection(this._getDisplayData()[idxC]);\n return;\n }\n const idxI = Number(itemEl.dataset.index);\n this._toggleSelection(this._getDisplayData()[idxI]);\n });\n list.addEventListener('keydown', (e) => {\n const target = e.target as HTMLElement;\n if (!target.classList.contains('list-item')) return;\n const items = Array.from(list.querySelectorAll('.list-item')) as HTMLElement[];\n const currentIndex = items.indexOf(target);\n const ke = e as KeyboardEvent;\n switch (ke.key) {\n case 'ArrowUp':\n e.preventDefault();\n if (currentIndex > 0) items[currentIndex - 1].focus();\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (currentIndex < items.length - 1) items[currentIndex + 1].focus();\n break;\n case ' ':\n case 'Enter':\n e.preventDefault();\n if (this.selectionMode) {\n const index = Number(target.dataset.index);\n this._toggleSelection(this._getDisplayData()[index]);\n }\n break;\n }\n });\n }\n private _updateListDisplay(): void {\n const listWrapper = this.root.querySelector('.list-wrapper');\n if (!listWrapper) {\n this.render();\n return;\n }\n const displayData = this._getDisplayData();\n const hasSelection = this.selectionMode;\n const hasMultipleSelection = this.selectionMode === 'multiple';\n const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\n\n listWrapper.innerHTML = `\n ${hasMultipleSelection && this.showSelectAll ? `\n <div class=\"select-all-bar\" part=\"select-all-bar\">\n <label>\n <input type=\"checkbox\" class=\"select-all-checkbox\"\n ${allSelected ? 'checked' : ''}\n aria-label=\"Selecionar todos\" />\n Selecionar Todos\n </label>\n <span class=\"selection-count\">${this._selection.length} selecionado(s)</span>\n </div>\n ` : ''}\n <ul class=\"list\" part=\"list\" role=\"listbox\"\n aria-multiselectable=\"${hasMultipleSelection}\"\n tabindex=\"0\">\n ${displayData.length === 0 ? `\n <li class=\"empty-message\" part=\"empty-message\">\n ${this.filter ? 'Nenhum resultado encontrado' : 'Nenhum item disponivel'}\n </li>\n ` : displayData.map((item, index) => {\n const key = this._getItemKey(item, index);\n const label = this._getItemLabel(item);\n const isSelected = this._isSelected(item);\n const content = this._optionTemplate ? this._optionTemplate(item) : esc(label);\n return `\n <li class=\"list-item${isSelected ? ' selected' : ''}\" part=\"list-item\"\n data-index=\"${index}\" data-key=\"${esc(key)}\"\n role=\"option\" aria-selected=\"${isSelected}\"\n ${this.dragdrop ? 'draggable=\"true\"' : ''}\n tabindex=\"0\">\n ${this.dragdrop ? '<span class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Arrastar\">\\u22EE\\u22EE</span>' : ''}\n ${hasSelection ? `\n <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\"\n ${isSelected ? 'checked' : ''}\n aria-label=\"Selecionar ${esc(label)}\" />\n ` : ''}\n <span class=\"item-content\" part=\"item-content\">${content}</span>\n </li>\n `;\n }).join('')}\n </ul>\n `;\n this._attachListeners();\n this._attachItemListeners(this.root.querySelector('.list') as HTMLElement);\n }\n\n\n private _handleMoveAction(action: string | undefined): void {\n if (!this._selection.length) return;\n const displayData = this._getDisplayData();\n const selectedIndices = this._selection\n .map(s => displayData.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(s, -1)))\n .filter(i => i >= 0)\n .sort((a, b) => a - b);\n\n if (selectedIndices.length === 0) return;\n\n switch (action) {\n case 'top':\n this._moveSelectedToStart(selectedIndices);\n break;\n case 'up':\n this._moveSelectedByOne(selectedIndices, -1);\n break;\n case 'down':\n this._moveSelectedByOne(selectedIndices, 1);\n break;\n case 'bottom':\n this._moveSelectedToEnd(selectedIndices);\n break;\n }\n }\n\n private _moveSelectedToStart(indices: number[]): void {\n const items: OrderListItem[] = [];\n const actualIndices: number[] = [];\n\n for (const idx of indices) {\n const actualIdx = this._getActualIndex(idx);\n items.push(this._data[actualIdx]);\n actualIndices.push(actualIdx);\n }\n\n actualIndices.sort((a, b) => b - a).forEach(i => this._data.splice(i, 1));\n\n const insertIdx = this._getActualIndex(0);\n this._data.splice(insertIdx, 0, ...items);\n\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _moveSelectedToEnd(indices: number[]): void {\n const items: OrderListItem[] = [];\n const actualIndices: number[] = [];\n\n for (const idx of indices) {\n const actualIdx = this._getActualIndex(idx);\n items.push(this._data[actualIdx]);\n actualIndices.push(actualIdx);\n }\n\n actualIndices.sort((a, b) => b - a).forEach(i => this._data.splice(i, 1));\n\n const displayData = this._getDisplayData();\n const insertIdx = this._getActualIndex(displayData.length - 1);\n this._data.splice(insertIdx + 1, 0, ...items);\n\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _moveSelectedByOne(indices: number[], delta: number): void {\n const displayData = this._getDisplayData();\n if (displayData.length === 0) return;\n\n // Get actual indices in _data array and sort them\n const actualIndices = indices\n .map(idx => this._getActualIndex(idx))\n .filter(idx => idx >= 0)\n .sort((a, b) => a - b);\n\n if (actualIndices.length === 0) return;\n\n // Check if movement is possible\n if (delta < 0 && actualIndices[0] <= 0) return;\n if (delta > 0 && actualIndices[actualIndices.length - 1] >= this._data.length - 1) return;\n\n // Extract selected items in order\n const selectedItems = actualIndices.map(idx => this._data[idx]);\n\n // Remove selected items from data (from highest to lowest to preserve indices)\n for (let i = actualIndices.length - 1; i >= 0; i--) {\n this._data.splice(actualIndices[i], 1);\n }\n\n // Calculate new insertion point\n let insertIndex: number;\n if (delta < 0) {\n // Moving up: insert before the first selected item position\n insertIndex = actualIndices[0] - 1;\n } else {\n // Moving down: insert after the last selected item position\n // Since we removed items, we need to adjust\n insertIndex = actualIndices[actualIndices.length - 1] - actualIndices.length + 1 + 1;\n }\n\n // Ensure insertIndex is within bounds\n insertIndex = Math.max(0, Math.min(insertIndex, this._data.length));\n\n // Insert items at new position\n this._data.splice(insertIndex, 0, ...selectedItems);\n\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _updateControlsState(): void {\n const displayData = this._getDisplayData();\n const selectedIndices = this._selection\n .map(s => displayData.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(s, -1)))\n .filter(i => i >= 0);\n\n const buttons = this.root.querySelectorAll<HTMLButtonElement>('.control-btn');\n buttons.forEach(btn => {\n const action = btn.dataset.action;\n let disabled = selectedIndices.length === 0;\n\n if (!disabled) {\n switch (action) {\n case 'top':\n case 'up':\n disabled = selectedIndices[0] === 0;\n break;\n case 'bottom':\n case 'down':\n disabled = selectedIndices[selectedIndices.length - 1] === displayData.length - 1;\n break;\n }\n }\n\n btn.disabled = disabled;\n });\n }\n}\n\nexport function defineFxOrderList(): typeof FxOrderList {\n return defineElement('fx-orderlist', FxOrderList);\n}"],"names":[],"mappings":";;;;AAoBO,MAAM,eAAN,MAAM,qBAAoB,UAAU;AAAA,EAApC,cAAA;AAAA,UAAA,GAAA,SAAA;AAsGL,SAAQ,QAAyB,CAAA;AACjC,SAAQ,gBAAwC;AAS9C,SAAQ,aAA8B,CAAA;AA0ExC,SAAQ,eAAe;AAEvB,SAAQ,gBAA+B;AACvC,SAAQ,qBAAqB;AAC7B,SAAQ,kBAA4D;AAAA,EAAA;AAAA,EAhHpE,WAAoB,qBAA+B;AACjD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEA;AAAA,EAEJ,IAAI,KAAK,OAAwB;AAC/B,SAAK,QAAQ;AACb,SAAK,gBAAgB;AACrB,SAAK,OAAA;AAAA,EACP;AAAA,EACA,IAAI,OAAwB;AAC1B,WAAO,KAAK;AAAA,EACd;AAAA,EAIA,IAAI,UAAU,OAAwB;AACpC,SAAK,aAAa;AAClB,SAAK,OAAA;AAAA,EACP;AAAA,EACA,IAAI,YAA6B;AAC/B,WAAO,KAAK;AAAA,EACd;AAAA,EAGA,IAAI,UAAkB;AACpB,WAAO,KAAK,QAAQ,YAAY,EAAE;AAAA,EACpC;AAAA,EACA,IAAI,QAAQ,GAAW;AACrB,SAAK,aAAa,YAAY,CAAC;AAAA,EACjC;AAAA,EAEA,IAAI,SAAkB;AACpB,WAAO,KAAK,QAAQ,QAAQ;AAAA,EAC9B;AAAA,EACE,IAAI,OAAO,GAAY;AACvB,SAAK,WAAW,UAAU,CAAC;AAAA,EAC7B;AAAA,EAEA,IAAI,WAAmB;AACrB,WAAO,KAAK,QAAQ,aAAa,OAAO;AAAA,EAC1C;AAAA,EACA,IAAI,SAAS,GAAW;AACtB,SAAK,aAAa,aAAa,CAAC;AAAA,EAClC;AAAA,EAEA,IAAI,oBAA4B;AAC9B,WAAO,KAAK,QAAQ,sBAAsB,WAAW;AAAA,EACvD;AAAA,EACA,IAAI,kBAAkB,GAAW;AAC3B,SAAK,aAAa,sBAAsB,CAAC;AAAA,EAC/C;AAAA,EAEA,IAAI,aAAqB;AACvB,WAAO,KAAK,QAAQ,cAAc,OAAO;AAAA,EAC3C;AAAA,EACA,IAAI,WAAW,GAAW;AACxB,SAAK,aAAa,cAAc,CAAC;AAAA,EACnC;AAAA,EAEA,IAAI,WAAoB;AACtB,WAAO,KAAK,QAAQ,UAAU;AAAA,EAChC;AAAA,EACA,IAAI,SAAS,GAAY;AACvB,SAAK,WAAW,YAAY,CAAC;AAAA,EAC/B;AAAA,EAEA,IAAI,UAAmB;AACrB,WAAO,KAAK,QAAQ,SAAS;AAAA,EAC/B;AAAA,EACE,IAAI,QAAQ,GAAY;AACxB,SAAK,WAAW,WAAW,CAAC;AAAA,EAC9B;AAAA,EAEA,IAAI,gBAAwB;AAC1B,UAAM,IAAI,KAAK,QAAQ,kBAAkB,EAAE;AAC3C,WAAO,MAAM,YAAY,MAAM,aAAa,IAAI;AAAA,EAClD;AAAA,EACA,IAAI,cAAc,GAAW;AAC3B,SAAK,aAAa,kBAAkB,CAAC;AAAA,EACvC;AAAA,EAEA,IAAI,gBAAyB;AAC3B,WAAO,KAAK,QAAQ,iBAAiB;AAAA,EACvC;AAAA,EACE,IAAI,cAAc,GAAY;AAC9B,SAAK,WAAW,mBAAmB,CAAC;AAAA,EACtC;AAAA,EAEA,IAAI,cAAsB;AACxB,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAI,YAAY,GAAW;AACzB,SAAK,eAAe;AACpB,SAAK,aAAA;AACL,SAAK,mBAAA;AAAA,EACP;AAAA,EAOA,kBAAkB,UAAiD;AACjE,SAAK,kBAAkB;AACnB,SAAK,OAAA;AAAA,EACX;AAAA,EAEmB,oBAA0B;AAC3C,SAAK,oBAAA;AACL,UAAM,kBAAA;AAAA,EACR;AAAA,EAEmB,yBAAyB,MAAc,UAAyB,UAA+B;AAChH,QAAI,KAAK,QAAQ,QAAQ,EAAE,MAAM,IAAI;AACnC,WAAK,oBAAA;AAAA,IACP;AACA,UAAM,yBAAyB,MAAM,UAAU,QAAQ;AAAA,EACzD;AAAA,EAEQ,sBAA4B;AAClC,UAAM,WAAW,KAAK,QAAQ,QAAQ,EAAE;AACxC,QAAI,UAAU;AACZ,UAAI;AACF,aAAK,QAAQ,KAAK,MAAM,QAAQ;AAChC,aAAK,gBAAgB;AAAA,MACvB,QAAQ;AACN,aAAK,QAAQ,CAAA;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAAA,EAEQ,eAAqB;AAC3B,QAAI,CAAC,KAAK,cAAc;AACtB,WAAK,gBAAgB;AACrB;AAAA,IACF;AACA,UAAM,eAAe,KAAK,SAAS,MAAM,GAAG,EAAE,IAAI,CAAA,MAAK,EAAE,KAAA,CAAM;AAC/D,SAAK,gBAAgB,KAAK,MAAM,OAAO,CAAA,SAAQ;AAC7C,aAAO,aAAa,KAAK,CAAA,UAAS;AAChC,cAAM,QAAQ,KAAK,KAAK;AACxB,YAAI,SAAS,KAAM,QAAO;AAC1B,eAAO,OAAO,KAAK,EAAE,YAAA,EAAc,SAAS,KAAK,aAAa,aAAa;AAAA,MAC7E,CAAC;AAAA,IACH,CAAC;AAAA,EACH;AAAA,EAEQ,kBAAmC;AACzC,WAAO,KAAK,iBAAiB,KAAK;AAAA,EACpC;AAAA,EAEQ,YAAY,MAAqB,OAAuB;AAC9D,QAAI,KAAK,WAAW,KAAK,KAAK,OAAO,KAAK,MAAM;AAC9C,aAAO,OAAO,KAAK,KAAK,OAAO,CAAC;AAAA,IAClC;AACA,QAAI,KAAK,IAAI,KAAK,aAAa,OAAO,KAAK,IAAI,CAAC;AAChD,QAAI,KAAK,KAAK,KAAK,aAAa,OAAO,KAAK,KAAK,CAAC;AAClD,QAAI,KAAK,OAAO,KAAK,aAAa,OAAO,KAAK,OAAO,CAAC;AACtD,QAAI,KAAK,MAAM,KAAK,aAAa,OAAO,KAAK,MAAM,CAAC;AACpD,QAAI,KAAK,OAAO,KAAK,aAAa,OAAO,KAAK,OAAO,CAAC;AACtD,WAAO,OAAO,KAAK;AAAA,EACrB;AAAA,EAEQ,cAAc,MAA6B;AACjD,UAAM,SAAS,CAAC,SAAS,QAAQ,SAAS,QAAQ,OAAO;AACzD,eAAW,SAAS,QAAQ;AAC1B,UAAI,KAAK,KAAK,KAAK,MAAM;AACvB,eAAO,OAAO,KAAK,KAAK,CAAC;AAAA,MAC3B;AAAA,IACF;AACI,WAAO,KAAK,UAAU,IAAI;AAAA,EAChC;AAAA,EAEQ,YAAY,MAA8B;AAChD,WAAO,KAAK,WAAW,KAAK,CAAA,MAAK,KAAK,YAAY,GAAG,EAAE,MAAM,KAAK,YAAY,MAAM,EAAE,CAAC;AAAA,EACzF;AAAA,EAEQ,UAAU,WAAmB,SAAuB;AAC1D,UAAM,aAAa,KAAK,gBAAgB,SAAS;AACjD,UAAM,WAAW,KAAK,gBAAgB,OAAO;AAC7C,QAAI,eAAe,MAAM,aAAa,GAAI;AAC1C,UAAM,OAAO,KAAK,MAAM,OAAO,YAAY,CAAC,EAAE,CAAC;AAC/C,SAAK,MAAM,OAAO,UAAU,GAAG,IAAI;AACnC,SAAK,aAAA;AACL,SAAK,mBAAA;AACL,SAAK,qBAAA;AACL,SAAK,aAAA;AAAA,EACP;AAAA,EAEQ,gBAAgB,cAA8B;AACpD,QAAI,KAAK,eAAe;AACtB,YAAM,OAAO,KAAK,cAAc,YAAY;AAC5C,aAAO,KAAK,MAAM,UAAU,CAAA,MAAK,KAAK,YAAY,GAAG,EAAE,MAAM,KAAK,YAAY,MAAM,EAAE,CAAC;AAAA,IACzF;AACA,WAAO;AAAA,EACT;AAAA,EAEQ,eAAqB;AAC3B,SAAK,cAAc,IAAI,YAAY,WAAW;AAAA,MAC5C,SAAS;AAAA,MACT,UAAU;AAAA,MACV,QAAQ,EAAE,OAAO,CAAC,GAAG,KAAK,KAAK,EAAA;AAAA,IAAE,CAClC,CAAC;AAAA,EACJ;AAAA,EAEQ,uBAA6B;AACnC,SAAK,cAAc,IAAI,YAAY,oBAAoB;AAAA,MACrD,SAAS;AAAA,MACT,UAAU;AAAA,MACJ,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,UAAU,EAAA;AAAA,IAAE,CACjD,CAAC;AAAA,EACJ;AAAA,EAEQ,iBAAiB,MAA2B;AAClD,UAAM,MAAM,KAAK,YAAY,MAAM,EAAE;AACrC,UAAM,QAAQ,KAAK,WAAW,UAAU,CAAA,MAAK,KAAK,YAAY,GAAG,EAAE,MAAM,GAAG;AAC5E,QAAI,SAAS,GAAG;AACd,WAAK,WAAW,OAAO,OAAO,CAAC;AAAA,IACjC,WAAW,KAAK,kBAAkB,YAAY;AAC5C,WAAK,WAAW,KAAK,IAAI;AAAA,IAC3B,OAAO;AACL,WAAK,aAAa,CAAC,IAAI;AAAA,IACzB;AACA,SAAK,qBAAA;AACL,SAAK,mBAAA;AACL,SAAK,qBAAA;AAAA,EACP;AAAA,EAEQ,aAAmB;AACzB,UAAM,cAAc,KAAK,gBAAA;AACzB,SAAK,aAAa,CAAC,GAAG,WAAW;AACjC,SAAK,qBAAA;AACL,SAAK,mBAAA;AACL,SAAK,qBAAA;AAAA,EACP;AAAA,EAEQ,eAAqB;AAC3B,SAAK,aAAa,CAAA;AAClB,SAAK,qBAAA;AACL,SAAK,mBAAA;AACL,SAAK,qBAAA;AAAA,EACP;AAAA,EAEQ,mBAAyB;AAC/B,UAAM,cAAc,KAAK,gBAAA;AACzB,QAAI,KAAK,WAAW,WAAW,YAAY,QAAQ;AACjD,WAAK,aAAA;AAAA,IACP,OAAO;AACC,WAAK,WAAA;AAAA,IACb;AAAA,EACF;AAAA,EAEmB,SAAe;AAChC,UAAM,cAAc,KAAK,gBAAA;AACzB,UAAM,eAAe,KAAK;AAC1B,UAAM,uBAAuB,KAAK,kBAAkB;AACpD,UAAM,cAAc,wBAAwB,YAAY,SAAS,KAAK,KAAK,WAAW,WAAW,YAAY;AAE7G,SAAK,YAAY;AAAA;AAAA,UAEX,KAAK,SAAS;AAAA;AAAA;AAAA,6BAGK,KAAK,iBAAiB;AAAA,uBAC5B,IAAI,KAAK,YAAY,CAAC;AAAA;AAAA;AAAA,YAGjC,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAqBA,wBAAwB,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,sBAIrC,cAAc,YAAY,EAAE;AAAA;AAAA;AAAA;AAAA,gDAIF,KAAK,WAAW,MAAM;AAAA;AAAA,gBAEtD,EAAE;AAAA;AAAA,sCAEoB,oBAAoB;AAAA;AAAA,gBAE1C,YAAY,WAAW,IAAI;AAAA;AAAA,oBAEvB,KAAK,SAAS,gCAAgC,wBAAwB;AAAA;AAAA,kBAExE,YAAY,IAAI,CAAC,MAAM,UAAU;AACnC,YAAM,MAAM,KAAK,YAAY,MAAM,KAAK;AACxC,YAAM,QAAQ,KAAK,cAAc,IAAI;AACrC,YAAM,aAAa,KAAK,YAAY,IAAI;AACxC,YAAM,UAAU,KAAK,kBAAkB,KAAK,gBAAgB,IAAI,IAAI,IAAI,KAAK;AAC7E,aAAO;AAAA,wCACiB,aAAa,cAAc,EAAE;AAAA,kCACnC,KAAK,eAAe,IAAI,GAAG,CAAC;AAAA,mDACX,UAAU;AAAA,sBACvC,KAAK,WAAW,qBAAqB,EAAE;AAAA;AAAA,sBAEvC,KAAK,WAAW,iFAA2F,EAAE;AAAA,sBAC7G,eAAe;AAAA;AAAA,0BAEX,aAAa,YAAY,EAAE;AAAA,iDACJ,IAAI,KAAK,CAAC;AAAA,wBACnC,EAAE;AAAA,qEAC2C,OAAO;AAAA;AAAA;AAAA,IAG9D,CAAC,EAAE,KAAK,EAAE,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,KAKpB;AAEG,SAAK,iBAAA;AACL,SAAK,qBAAqB,KAAK,KAAK,cAAc,OAAO,CAAgB;AACzE,SAAK,qBAAA;AAAA,EACX;AAAA,EAEQ,mBAAyB;AAC/B,QAAI,KAAK,mBAAoB;AAC7B,SAAK,qBAAqB;AAC1B,UAAM,OAAO,KAAK;AAGlB,SAAK,iBAAiB,SAAS,CAAC,MAAM;AACpC,YAAM,IAAI,EAAE;AACZ,UAAI,EAAE,UAAU,SAAS,cAAc,GAAG;AACxC,aAAK,cAAe,EAAuB;AAAA,MAC7C;AAAA,IACF,CAAC;AAGD,SAAK,iBAAiB,UAAU,CAAC,MAAM;AACrC,YAAM,IAAI,EAAE;AACZ,UAAI,EAAE,UAAU,SAAS,qBAAqB,GAAG;AAC/C,aAAK,iBAAA;AAAA,MACP;AAAA,IACF,CAAC;AAGD,SAAK,iBAAiB,SAAS,CAAC,MAAM;AACpC,YAAM,SAAS,EAAE;AACjB,YAAM,MAAM,OAAO,QAAQ,cAAc;AACzC,UAAI,KAAK;AACP,aAAK,kBAAkB,IAAI,QAAQ,MAAM;AAAA,MAC3C;AAAA,IACF,CAAC;AAID,QAAI,kBAAsC;AAC1C,SAAK,iBAAiB,aAAa,CAAC,MAAM;AACxC,YAAM,SAAU,EAAE,OAAuB,QAAQ,YAAY;AAC7D,UAAI,CAAC,OAAQ;AACb,WAAK,gBAAgB,OAAO,OAAO,QAAQ,KAAK;AAChD,aAAO,UAAU,IAAI,UAAU;AAC9B,QAAgB,aAAc,gBAAgB;AAAA,IACjD,CAAC;AACD,SAAK,iBAAiB,WAAW,CAAC,MAAM;AACtC,YAAM,SAAS,EAAE;AACjB,aAAO,UAAU,OAAO,UAAU;AAClC,WAAK,gBAAgB;AACrB,WAAK,iBAAiB,YAAY,EAAE,QAAQ,QAAM,GAAG,UAAU,OAAO,WAAW,CAAC;AAClF,wBAAkB;AAAA,IACpB,CAAC;AACD,SAAK,iBAAiB,YAAY,CAAC,MAAM;AACvC,QAAE,eAAA;AACF,YAAM,SAAU,EAAE,OAAuB,QAAQ,YAAY;AAC7D,UAAI,CAAC,UAAU,OAAO,UAAU,SAAS,UAAU,EAAG;AACtD,UAAI,gBAAiB,iBAAgB,UAAU,OAAO,WAAW;AACjE,aAAO,UAAU,IAAI,WAAW;AAChC,wBAAkB;AAAA,IACpB,CAAC;AACD,SAAK,iBAAiB,QAAQ,CAAC,MAAM;AACnC,QAAE,eAAA;AACF,UAAI,KAAK,kBAAkB,KAAM;AACjC,YAAM,SAAU,EAAE,OAAuB,QAAQ,YAAY;AAC7D,UAAI,CAAC,OAAQ;AACb,YAAM,UAAU,OAAO,OAAO,QAAQ,KAAK;AAC3C,aAAO,UAAU,OAAO,WAAW;AACnC,wBAAkB;AAClB,WAAK,UAAU,KAAK,eAAe,OAAO;AAC1C,WAAK,gBAAgB;AAAA,IACvB,CAAC;AACD,SAAK,qBAAA;AAAA,EACP;AAAA,EAEQ,qBAAqB,MAAyB;AACpD,QAAI,CAAC,KAAM;AACX,SAAK,iBAAiB,SAAS,CAAC,MAAM;AACpC,YAAM,SAAS,EAAE;AACjB,YAAM,SAAS,OAAO,QAAQ,YAAY;AAC1C,UAAI,CAAC,OAAQ;AACb,UAAI,OAAO,UAAU,SAAS,UAAU,GAAG;AACzC,UAAE,gBAAA;AACF,cAAM,OAAO,OAAO,OAAO,QAAQ,KAAK;AACxC,aAAK,iBAAiB,KAAK,gBAAA,EAAkB,IAAI,CAAC;AAClD;AAAA,MACF;AACA,YAAM,OAAO,OAAO,OAAO,QAAQ,KAAK;AACxC,WAAK,iBAAiB,KAAK,gBAAA,EAAkB,IAAI,CAAC;AAAA,IACpD,CAAC;AACD,SAAK,iBAAiB,WAAW,CAAC,MAAM;AACtC,YAAM,SAAS,EAAE;AACjB,UAAI,CAAC,OAAO,UAAU,SAAS,WAAW,EAAG;AAC7C,YAAM,QAAQ,MAAM,KAAK,KAAK,iBAAiB,YAAY,CAAC;AAC5D,YAAM,eAAe,MAAM,QAAQ,MAAM;AACzC,YAAM,KAAK;AACX,cAAQ,GAAG,KAAA;AAAA,QACT,KAAK;AACH,YAAE,eAAA;AACF,cAAI,eAAe,EAAG,OAAM,eAAe,CAAC,EAAE,MAAA;AAC9C;AAAA,QACF,KAAK;AACH,YAAE,eAAA;AACF,cAAI,eAAe,MAAM,SAAS,SAAS,eAAe,CAAC,EAAE,MAAA;AAC7D;AAAA,QACF,KAAK;AAAA,QACL,KAAK;AACH,YAAE,eAAA;AACF,cAAI,KAAK,eAAe;AACtB,kBAAM,QAAQ,OAAO,OAAO,QAAQ,KAAK;AACzC,iBAAK,iBAAiB,KAAK,gBAAA,EAAkB,KAAK,CAAC;AAAA,UACrD;AACA;AAAA,MAAA;AAAA,IAEN,CAAC;AAAA,EACH;AAAA,EACQ,qBAA2B;AACjC,UAAM,cAAc,KAAK,KAAK,cAAc,eAAe;AAC3D,QAAI,CAAC,aAAa;AAChB,WAAK,OAAA;AACL;AAAA,IACF;AACA,UAAM,cAAc,KAAK,gBAAA;AACzB,UAAM,eAAe,KAAK;AAC1B,UAAM,uBAAuB,KAAK,kBAAkB;AACpD,UAAM,cAAc,wBAAwB,YAAY,SAAS,KAAK,KAAK,WAAW,WAAW,YAAY;AAE7G,gBAAY,YAAY;AAAA,QACpB,wBAAwB,KAAK,gBAAgB;AAAA;AAAA;AAAA;AAAA,gBAIrC,cAAc,YAAY,EAAE;AAAA;AAAA;AAAA;AAAA,0CAIF,KAAK,WAAW,MAAM;AAAA;AAAA,UAEtD,EAAE;AAAA;AAAA,gCAEoB,oBAAoB;AAAA;AAAA,UAE1C,YAAY,WAAW,IAAI;AAAA;AAAA,cAEvB,KAAK,SAAS,gCAAgC,wBAAwB;AAAA;AAAA,YAExE,YAAY,IAAI,CAAC,MAAM,UAAU;AACnC,YAAM,MAAM,KAAK,YAAY,MAAM,KAAK;AACxC,YAAM,QAAQ,KAAK,cAAc,IAAI;AACrC,YAAM,aAAa,KAAK,YAAY,IAAI;AACxC,YAAM,UAAU,KAAK,kBAAkB,KAAK,gBAAgB,IAAI,IAAI,IAAI,KAAK;AAC7E,aAAO;AAAA,kCACiB,aAAa,cAAc,EAAE;AAAA,4BACnC,KAAK,eAAe,IAAI,GAAG,CAAC;AAAA,6CACX,UAAU;AAAA,gBACvC,KAAK,WAAW,qBAAqB,EAAE;AAAA;AAAA,gBAEvC,KAAK,WAAW,iFAA2F,EAAE;AAAA,gBAC7G,eAAe;AAAA;AAAA,oBAEX,aAAa,YAAY,EAAE;AAAA,2CACJ,IAAI,KAAK,CAAC;AAAA,kBACnC,EAAE;AAAA,+DAC2C,OAAO;AAAA;AAAA;AAAA,IAG9D,CAAC,EAAE,KAAK,EAAE,CAAC;AAAA;AAAA;AAGf,SAAK,iBAAA;AACL,SAAK,qBAAqB,KAAK,KAAK,cAAc,OAAO,CAAgB;AAAA,EAC3E;AAAA,EAGQ,kBAAkB,QAAkC;AAC1D,QAAI,CAAC,KAAK,WAAW,OAAQ;AAC7B,UAAM,cAAc,KAAK,gBAAA;AACzB,UAAM,kBAAkB,KAAK,WAC1B,IAAI,CAAA,MAAK,YAAY,UAAU,CAAA,MAAK,KAAK,YAAY,GAAG,EAAE,MAAM,KAAK,YAAY,GAAG,EAAE,CAAC,CAAC,EACxF,OAAO,CAAA,MAAK,KAAK,CAAC,EAClB,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAEvB,QAAI,gBAAgB,WAAW,EAAG;AAElC,YAAQ,QAAA;AAAA,MACN,KAAK;AACH,aAAK,qBAAqB,eAAe;AACzC;AAAA,MACF,KAAK;AACH,aAAK,mBAAmB,iBAAiB,EAAE;AAC3C;AAAA,MACF,KAAK;AACH,aAAK,mBAAmB,iBAAiB,CAAC;AAC1C;AAAA,MACF,KAAK;AACH,aAAK,mBAAmB,eAAe;AACvC;AAAA,IAAA;AAAA,EAEN;AAAA,EAEQ,qBAAqB,SAAyB;AACpD,UAAM,QAAyB,CAAA;AAC/B,UAAM,gBAA0B,CAAA;AAEhC,eAAW,OAAO,SAAS;AACzB,YAAM,YAAY,KAAK,gBAAgB,GAAG;AAC1C,YAAM,KAAK,KAAK,MAAM,SAAS,CAAC;AAChC,oBAAc,KAAK,SAAS;AAAA,IAC9B;AAEA,kBAAc,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC,EAAE,QAAQ,CAAA,MAAK,KAAK,MAAM,OAAO,GAAG,CAAC,CAAC;AAExE,UAAM,YAAY,KAAK,gBAAgB,CAAC;AACxC,SAAK,MAAM,OAAO,WAAW,GAAG,GAAG,KAAK;AAExC,SAAK,aAAA;AACL,SAAK,mBAAA;AACL,SAAK,qBAAA;AACL,SAAK,aAAA;AAAA,EACP;AAAA,EAEQ,mBAAmB,SAAyB;AAClD,UAAM,QAAyB,CAAA;AAC/B,UAAM,gBAA0B,CAAA;AAEhC,eAAW,OAAO,SAAS;AACzB,YAAM,YAAY,KAAK,gBAAgB,GAAG;AAC1C,YAAM,KAAK,KAAK,MAAM,SAAS,CAAC;AAChC,oBAAc,KAAK,SAAS;AAAA,IAC9B;AAEA,kBAAc,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC,EAAE,QAAQ,CAAA,MAAK,KAAK,MAAM,OAAO,GAAG,CAAC,CAAC;AAExE,UAAM,cAAc,KAAK,gBAAA;AACzB,UAAM,YAAY,KAAK,gBAAgB,YAAY,SAAS,CAAC;AAC7D,SAAK,MAAM,OAAO,YAAY,GAAG,GAAG,GAAG,KAAK;AAE5C,SAAK,aAAA;AACL,SAAK,mBAAA;AACL,SAAK,qBAAA;AACL,SAAK,aAAA;AAAA,EACP;AAAA,EAEQ,mBAAmB,SAAmB,OAAqB;AACjE,UAAM,cAAc,KAAK,gBAAA;AACzB,QAAI,YAAY,WAAW,EAAG;AAG9B,UAAM,gBAAgB,QACnB,IAAI,SAAO,KAAK,gBAAgB,GAAG,CAAC,EACpC,OAAO,CAAA,QAAO,OAAO,CAAC,EACtB,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAEvB,QAAI,cAAc,WAAW,EAAG;AAGhC,QAAI,QAAQ,KAAK,cAAc,CAAC,KAAK,EAAG;AACxC,QAAI,QAAQ,KAAK,cAAc,cAAc,SAAS,CAAC,KAAK,KAAK,MAAM,SAAS,EAAG;AAGnF,UAAM,gBAAgB,cAAc,IAAI,SAAO,KAAK,MAAM,GAAG,CAAC;AAG9D,aAAS,IAAI,cAAc,SAAS,GAAG,KAAK,GAAG,KAAK;AAClD,WAAK,MAAM,OAAO,cAAc,CAAC,GAAG,CAAC;AAAA,IACvC;AAGA,QAAI;AACJ,QAAI,QAAQ,GAAG;AAEb,oBAAc,cAAc,CAAC,IAAI;AAAA,IACnC,OAAO;AAGL,oBAAc,cAAc,cAAc,SAAS,CAAC,IAAI,cAAc,SAAS,IAAI;AAAA,IACrF;AAGA,kBAAc,KAAK,IAAI,GAAG,KAAK,IAAI,aAAa,KAAK,MAAM,MAAM,CAAC;AAGlE,SAAK,MAAM,OAAO,aAAa,GAAG,GAAG,aAAa;AAElD,SAAK,aAAA;AACL,SAAK,mBAAA;AACL,SAAK,qBAAA;AACL,SAAK,aAAA;AAAA,EACP;AAAA,EAEQ,uBAA6B;AACnC,UAAM,cAAc,KAAK,gBAAA;AACzB,UAAM,kBAAkB,KAAK,WAC1B,IAAI,OAAK,YAAY,UAAU,CAAA,MAAK,KAAK,YAAY,GAAG,EAAE,MAAM,KAAK,YAAY,GAAG,EAAE,CAAC,CAAC,EACxF,OAAO,CAAA,MAAK,KAAK,CAAC;AAErB,UAAM,UAAU,KAAK,KAAK,iBAAoC,cAAc;AAC5E,YAAQ,QAAQ,CAAA,QAAO;AACrB,YAAM,SAAS,IAAI,QAAQ;AAC3B,UAAI,WAAW,gBAAgB,WAAW;AAE1C,UAAI,CAAC,UAAU;AACb,gBAAQ,QAAA;AAAA,UACN,KAAK;AAAA,UACL,KAAK;AACH,uBAAW,gBAAgB,CAAC,MAAM;AAClC;AAAA,UACF,KAAK;AAAA,UACL,KAAK;AACH,uBAAW,gBAAgB,gBAAgB,SAAS,CAAC,MAAM,YAAY,SAAS;AAChF;AAAA,QAAA;AAAA,MAEN;AAEA,UAAI,WAAW;AAAA,IACjB,CAAC;AAAA,EACH;AACF;AAjuBE,aAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,cAAN;AAouBA,SAAS,oBAAwC;AACtD,SAAO,cAAc,gBAAgB,WAAW;AAClD;"}
1
+ {"version":3,"file":"orderlist.js","sources":["../../../src/components/orderlist/orderlist.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\nexport interface OrderListItem {\n [key: string]: unknown;\n}\n\n/**\n * <fx-orderlist> - Componente para ordenar uma colecao de itens.\n *\n * Permite reordenar itens arrastando ou usando botoes de controle.\n * Suporta filtro, selecao, checkbox e templates customizados.\n *\n * Atributos: data, data-key, filter, filter-by, filter-placeholder, breakpoint,\n * dragdrop, selection-mode, striped, show-select-all.\n * Evento: `reorder` (composed, detail: { items }).\n * Evento: `selection-change` (composed, detail: { selection }).\n */\nexport class FxOrderList extends FxElement {\n static override styles = css`\n\n :host {\n display: block;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n --orderlist-primary: var(--fx-color-primary, #3b82f6);\n --orderlist-border: var(--fx-border-default, #e2e8f0);\n --orderlist-bg: var(--fx-surface-background, #ffffff);\n --orderlist-bg-hover: var(--fx-surface-surface-hover, #f1f5f9);\n --orderlist-text: var(--fx-text-default, #1e293b);\n --orderlist-text-muted: var(--fx-text-muted, #64748b);\n --orderlist-radius: var(--fx-radius-md, 8px);\n --orderlist-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n --orderlist-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n * { box-sizing: border-box; }\n .container { display: flex; flex-direction: column; gap: var(--fx-space-md, 16px); }\n .list-wrapper { display: flex; flex-direction: column; gap: var(--fx-space-sm, 8px); flex: 1; min-width: 0; }\n .select-all-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: linear-gradient(135deg, var(--orderlist-bg), var(--orderlist-bg-hover)); border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-size: 0.9em; font-weight: 500; }\n .select-all-bar label { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); cursor: pointer; user-select: none; color: var(--orderlist-text); }\n .select-all-bar input[type=\"checkbox\"] { width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; }\n .filter-wrapper { margin-bottom: var(--fx-space-xs, 4px); }\n .filter-input { width: 100%; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); padding-left: 42px; border: 1.5px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-family: inherit; font-size: inherit; color: var(--orderlist-text); background: var(--orderlist-bg) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\") no-repeat 14px center; transition: var(--orderlist-transition); }\n .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: var(--fx-effect-focus-ring, none); }\n .filter-input::placeholder { color: var(--orderlist-text-muted); }\n .main-row { display: flex; align-items: stretch; gap: var(--fx-space-sm, 8px); }\n .list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); overflow: hidden; box-shadow: var(--orderlist-shadow); max-height: 450px; overflow-y: auto; flex: 1; }\n .list::-webkit-scrollbar { width: 6px; }\n .list::-webkit-scrollbar-track { background: transparent; }\n .list::-webkit-scrollbar-thumb { background: var(--orderlist-border); border-radius: 3px; }\n .list::-webkit-scrollbar-thumb:hover { background: var(--orderlist-text-muted); }\n .selection-count { font-size: 0.85em; color: var(--orderlist-primary); background: color-mix(in srgb, var(--orderlist-primary) 12%, transparent); padding: 4px 12px; border-radius: 20px; font-weight: 600; }\n :host([striped]) .list-item:nth-child(even) { background: var(--fx-surface-surface, #f8fafc); }\n .list-item { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: var(--orderlist-bg); border-bottom: 1px solid var(--orderlist-border); cursor: pointer; user-select: none; transition: var(--orderlist-transition); }\n .list-item:last-child { border-bottom: none; }\n .list-item:hover { background: var(--orderlist-bg-hover); }\n .list-item.selected { background: color-mix(in srgb, var(--orderlist-primary) 8%, transparent); border-left: 3px solid var(--orderlist-primary); padding-left: 11px; }\n .list-item:focus-visible { outline: none; background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\n .list-item.dragging { opacity: 0.5; background: var(--orderlist-bg-hover); }\n .list-item.drag-over { border-top: 2px solid var(--orderlist-primary); }\n .drag-handle { color: var(--orderlist-text-muted); cursor: grab; flex-shrink: 0; font-size: 1.2em; opacity: 0.6; transition: var(--orderlist-transition); }\n .drag-handle:hover { opacity: 1; }\n .drag-handle:active { cursor: grabbing; }\n .item-content { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .checkbox { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; transition: var(--orderlist-transition); }\n .checkbox:hover { transform: scale(1.1); }\n .empty-message { padding: var(--fx-space-xl, 32px); text-align: center; color: var(--orderlist-text-muted); font-style: italic; }\n .controls-bar {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: var(--fx-space-xs, 6px);\n background: var(--orderlist-bg);\n border: 1px solid var(--orderlist-border);\n border-radius: var(--orderlist-radius);\n box-shadow: var(--orderlist-shadow);\n height: fit-content;\n position: sticky;\n top: 0;\n align-self: flex-start;\n }\n .control-group { display: flex; flex-direction: column; gap: 3px; }\n .control-group + .control-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--orderlist-border); }\n button.control-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--orderlist-text-muted); cursor: pointer; font-size: 16px; line-height: 1; transition: var(--orderlist-transition); position: relative; }\n button.control-btn:hover:not(:disabled) { background: var(--orderlist-bg-hover); color: var(--orderlist-primary); transform: scale(1.1); }\n button.control-btn:active:not(:disabled) { transform: scale(0.92); background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\n button.control-btn:focus-visible { outline: none; box-shadow: var(--fx-effect-focus-ring, none); }\n button.control-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }\n .control-btn-icon { font-size: 18px; line-height: 1; }\n /* Tooltip nos botoes */\n button.control-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }\n @media (max-width: 640px) { .main-row { flex-direction: column; } .controls-bar { flex-direction: row; flex-wrap: wrap; justify-content: center; position: relative; } .control-group { flex-direction: row; } .control-group + .control-group { margin-top: 0; margin-left: 4px; padding-top: 0; padding-left: 4px; border-top: none; border-left: 1px solid var(--orderlist-border); } button.control-btn { width: 44px; height: 40px; } button.control-btn::after { display: none; } .list { max-height: 300px; } }\n @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }\n .list-item { animation: slideIn 0.2s ease-out; }\n `;\n\n static override get observedAttributes(): string[] {\n return [\n 'data',\n 'items',\n 'data-key',\n 'filter',\n 'filter-by',\n 'filter-placeholder',\n 'breakpoint',\n 'controls-location',\n 'dragdrop',\n 'striped',\n 'selection-mode',\n 'show-select-all',\n ]\n }\n\n set data(value: OrderListItem[]) {\n this._data = Array.isArray(value) ? value : [];\n this._filteredData = null;\n this.render();\n }\n get data(): OrderListItem[] {\n return this._data;\n }\n private _data: OrderListItem[] = [];\n private _filteredData: OrderListItem[] | null = null;\n\n /**\n * Alias de `data` para o binding do Vue/React: `data` colide com a\n * tipagem nativa de atributos HTML (`dataset`/`data-*`) e não reflete em\n * atributo. `items` funciona como propriedade e como atributo JSON.\n */\n get items(): OrderListItem[] {\n return this._data;\n }\n set items(value: OrderListItem[]) {\n const list = Array.isArray(value) ? value : [];\n this._data = list;\n this._filteredData = null;\n\n const json = (() => {\n try {\n return JSON.stringify(list);\n } catch {\n // Itens com referência circular/função não são serializáveis:\n // mantém a propriedade funcionando sem gravar o atributo.\n return null;\n }\n })();\n\n if (json !== null && this.getAttr('items') !== json) this.setAttribute('items', json);\n else if (this.isConnected) this.render();\n }\n\n set selection(value: OrderListItem[]) {\n this._selection = value;\n this.render();\n }\n get selection(): OrderListItem[] {\n return this._selection;\n }\n private _selection: OrderListItem[] = [];\n\n get dataKey(): string {\n return this.getAttr('data-key', '');\n }\n set dataKey(v: string) {\n this.setAttribute('data-key', v);\n }\n\n get filter(): boolean {\n return this.hasAttr('filter');\n }\n set filter(v: boolean) {\n this.toggleAttr('filter', v);\n }\n\n get filterBy(): string {\n return this.getAttr('filter-by', 'label');\n }\n set filterBy(v: string) {\n this.setAttribute('filter-by', v);\n }\n\n get filterPlaceholder(): string {\n return this.getAttr('filter-placeholder', 'Buscar...');\n }\n set filterPlaceholder(v: string) {\n this.setAttribute('filter-placeholder', v);\n }\n\n get breakpoint(): string {\n return this.getAttr('breakpoint', '960px');\n }\n set breakpoint(v: string) {\n this.setAttribute('breakpoint', v);\n }\n\n get dragdrop(): boolean {\n return this.hasAttr('dragdrop');\n }\n set dragdrop(v: boolean) {\n this.toggleAttr('dragdrop', v);\n }\n\n get striped(): boolean {\n return this.hasAttr('striped');\n }\n set striped(v: boolean) {\n this.toggleAttr('striped', v);\n }\n\n get selectionMode(): string {\n const s = this.getAttr('selection-mode', '');\n return s === 'single' || s === 'multiple' ? s : '';\n }\n set selectionMode(v: string) {\n this.setAttribute('selection-mode', v);\n }\n\n get showSelectAll(): boolean {\n return this.hasAttr('show-select-all');\n }\n set showSelectAll(v: boolean) {\n this.toggleAttr('show-select-all', v);\n }\n\n get filterValue(): string {\n return this._filterValue;\n }\n set filterValue(v: string) {\n this._filterValue = v;\n this._applyFilter();\n this._updateListDisplay();\n }\n private _filterValue = '';\n\n private _draggedIndex: number | null = null;\n private _listenersAttached = false;\n private _optionTemplate: ((item: OrderListItem) => string) | null = null;\n\n setOptionTemplate(template: (item: OrderListItem) => string): void {\n this._optionTemplate = template;\n this.render();\n }\n\n protected override connectedCallback(): void {\n this._parseDataAttribute();\n super.connectedCallback();\n }\n\n protected override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n if (name === 'items') {\n try {\n const parsed = JSON.parse(newValue ?? '[]');\n this._data = Array.isArray(parsed) ? parsed : [];\n this._filteredData = null;\n } catch {\n this._data = [];\n this._filteredData = null;\n }\n } else if (this.getAttr('data', '') !== '') {\n this._parseDataAttribute();\n }\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n private _parseDataAttribute(): void {\n const dataAttr = this.getAttr('data', '');\n if (dataAttr) {\n try {\n this._data = JSON.parse(dataAttr);\n this._filteredData = null;\n } catch {\n this._data = [];\n }\n }\n }\n\n private _applyFilter(): void {\n if (!this._filterValue) {\n this._filteredData = null;\n return;\n }\n const filterFields = this.filterBy.split(',').map(f => f.trim());\n this._filteredData = this._data.filter(item => {\n return filterFields.some(field => {\n const value = item[field];\n if (value == null) return false;\n return String(value).toLowerCase().includes(this._filterValue.toLowerCase());\n });\n });\n }\n\n private _getDisplayData(): OrderListItem[] {\n return this._filteredData || this._data;\n }\n\n private _getItemKey(item: OrderListItem, index: number): string {\n if (this.dataKey && item[this.dataKey] != null) {\n return String(item[this.dataKey]);\n }\n if (item['id'] != null) return String(item['id']);\n if (item['key'] != null) return String(item['key']);\n if (item['label'] != null) return String(item['label']);\n if (item['name'] != null) return String(item['name']);\n if (item['value'] != null) return String(item['value']);\n return String(index);\n }\n\n private _getItemLabel(item: OrderListItem): string {\n const fields = ['label', 'name', 'title', 'text', 'value'];\n for (const field of fields) {\n if (item[field] != null) {\n return String(item[field]);\n }\n }\n return JSON.stringify(item);\n }\n\n private _isSelected(item: OrderListItem): boolean {\n return this._selection.some(s => this._getItemKey(s, -1) === this._getItemKey(item, -1));\n }\n\n private _moveItem(fromIndex: number, toIndex: number): void {\n const actualFrom = this._getActualIndex(fromIndex);\n const actualTo = this._getActualIndex(toIndex);\n if (actualFrom === -1 || actualTo === -1) return;\n const item = this._data.splice(actualFrom, 1)[0];\n this._data.splice(actualTo, 0, item);\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _getActualIndex(displayIndex: number): number {\n if (this._filteredData) {\n const item = this._filteredData[displayIndex];\n return this._data.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(item, -1));\n }\n return displayIndex;\n }\n\n private _emitReorder(): void {\n this.dispatchEvent(new CustomEvent('reorder', {\n bubbles: true,\n composed: true,\n detail: { items: [...this._data] },\n }));\n }\n\n private _emitSelectionChange(): void {\n this.dispatchEvent(new CustomEvent('selection-change', {\n bubbles: true,\n composed: true,\n detail: { selection: [...this._selection] },\n }));\n }\n\n private _toggleSelection(item: OrderListItem): void {\n const key = this._getItemKey(item, -1);\n const index = this._selection.findIndex(s => this._getItemKey(s, -1) === key);\n if (index >= 0) {\n this._selection.splice(index, 1);\n } else if (this.selectionMode === 'multiple') {\n this._selection.push(item);\n } else {\n this._selection = [item];\n }\n this._emitSelectionChange();\n this._updateListDisplay();\n this._updateControlsState();\n }\n\n private _selectAll(): void {\n const displayData = this._getDisplayData();\n this._selection = [...displayData];\n this._emitSelectionChange();\n this._updateListDisplay();\n this._updateControlsState();\n }\n\n private _deselectAll(): void {\n this._selection = [];\n this._emitSelectionChange();\n this._updateListDisplay();\n this._updateControlsState();\n }\n\n private _toggleSelectAll(): void {\n const displayData = this._getDisplayData();\n if (this._selection.length === displayData.length) {\n this._deselectAll();\n } else {\n this._selectAll();\n }\n }\n\n protected override render(): void {\n const displayData = this._getDisplayData();\n const hasSelection = this.selectionMode;\n const hasMultipleSelection = this.selectionMode === 'multiple';\n const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\n\n this.setTemplate(`\n <div class=\"container\" part=\"container\">\n ${this.filter ? `\n <div class=\"filter-wrapper\" part=\"filter-wrapper\">\n <input type=\"text\" class=\"filter-input\" part=\"filter-input\"\n placeholder=\"${this.filterPlaceholder}\"\n value=\"${esc(this._filterValue)}\"\n aria-label=\"Filtrar lista\" />\n </div>\n ` : ''}\n <div class=\"main-row\" part=\"main-row\">\n <div class=\"controls-bar\" part=\"controls-bar\">\n <div class=\"control-group\">\n <button class=\"control-btn\" data-action=\"top\" part=\"control-btn\" aria-label=\"Mover para o inicio\">\n <span class=\"control-btn-icon\">\\u00AB</span>\n </button>\n <button class=\"control-btn\" data-action=\"up\" part=\"control-btn\" aria-label=\"Mover para cima\">\n <span class=\"control-btn-icon\">\\u2191</span>\n </button>\n </div>\n <div class=\"control-group\">\n <button class=\"control-btn\" data-action=\"down\" part=\"control-btn\" aria-label=\"Mover para baixo\">\n <span class=\"control-btn-icon\">\\u2193</span>\n </button>\n <button class=\"control-btn\" data-action=\"bottom\" part=\"control-btn\" aria-label=\"Mover para o fim\">\n <span class=\"control-btn-icon\">\\u00BB</span>\n </button>\n </div>\n </div>\n <div class=\"list-wrapper\" part=\"list-wrapper\">\n ${hasMultipleSelection && this.showSelectAll ? `\n <div class=\"select-all-bar\" part=\"select-all-bar\">\n <label>\n <input type=\"checkbox\" class=\"select-all-checkbox\"\n ${allSelected ? 'checked' : ''}\n aria-label=\"Selecionar todos\" />\n Selecionar Todos\n </label>\n <span class=\"selection-count\">${this._selection.length} selecionado(s)</span>\n </div>\n ` : ''}\n <ul class=\"list\" part=\"list\" role=\"listbox\"\n aria-multiselectable=\"${hasMultipleSelection}\"\n tabindex=\"0\">\n ${displayData.length === 0 ? `\n <li class=\"empty-message\" part=\"empty-message\">\n ${this.filter ? 'Nenhum resultado encontrado' : 'Nenhum item disponivel'}\n </li>\n ` : displayData.map((item, index) => {\n const key = this._getItemKey(item, index);\n const label = this._getItemLabel(item);\n const isSelected = this._isSelected(item);\n const content = this._optionTemplate ? this._optionTemplate(item) : esc(label);\n return `\n <li class=\"list-item${isSelected ? ' selected' : ''}\" part=\"list-item\"\n data-index=\"${index}\" data-key=\"${esc(key)}\"\n role=\"option\" aria-selected=\"${isSelected}\"\n ${this.dragdrop ? 'draggable=\"true\"' : ''}\n tabindex=\"0\">\n ${this.dragdrop ? '<span class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Arrastar\">\\u22EE\\u22EE</span>' : ''}\n ${hasSelection ? `\n <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\"\n ${isSelected ? 'checked' : ''}\n aria-label=\"Selecionar ${esc(label)}\" />\n ` : ''}\n <span class=\"item-content\" part=\"item-content\">${content}</span>\n </li>\n `;\n }).join('')}\n </ul>\n </div>\n </div>\n </div>\n `);\n\n this._attachListeners();\n this._attachItemListeners(this.root.querySelector('.list') as HTMLElement);\n this._updateControlsState();\n }\n\n private _attachListeners(): void {\n if (this._listenersAttached) return;\n this._listenersAttached = true;\n const root = this.root;\n\n // Filtro - delega input\n root.addEventListener('input', (e) => {\n const t = e.target as HTMLElement;\n if (t.classList.contains('filter-input')) {\n this.filterValue = (t as HTMLInputElement).value;\n }\n });\n\n // Selecionar todos - delega change\n root.addEventListener('change', (e) => {\n const t = e.target as HTMLElement;\n if (t.classList.contains('select-all-checkbox')) {\n this._toggleSelectAll();\n }\n });\n\n // Clique - delega click nos botoes (itens anexados direto em cada render)\n root.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n const btn = target.closest('.control-btn') as HTMLButtonElement;\n if (btn) {\n this._handleMoveAction(btn.dataset.action);\n }\n });\n\n // Drag and drop\n // Drag and drop - delega no root\n let dragOverElement: HTMLElement | null = null;\n root.addEventListener('dragstart', (e) => {\n const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n if (!target) return;\n this._draggedIndex = Number(target.dataset.index);\n target.classList.add('dragging');\n (e as DragEvent).dataTransfer!.effectAllowed = 'move';\n });\n root.addEventListener('dragend', (e) => {\n const target = e.target as HTMLElement;\n target.classList.remove('dragging');\n this._draggedIndex = null;\n root.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));\n dragOverElement = null;\n });\n root.addEventListener('dragover', (e) => {\n e.preventDefault();\n const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n if (!target || target.classList.contains('dragging')) return;\n if (dragOverElement) dragOverElement.classList.remove('drag-over');\n target.classList.add('drag-over');\n dragOverElement = target;\n });\n root.addEventListener('drop', (e) => {\n e.preventDefault();\n if (this._draggedIndex === null) return;\n const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n if (!target) return;\n const toIndex = Number(target.dataset.index);\n target.classList.remove('drag-over');\n dragOverElement = null;\n this._moveItem(this._draggedIndex, toIndex);\n this._draggedIndex = null;\n });\n this._updateControlsState();\n }\n\n private _attachItemListeners(list: HTMLElement): void {\n if (!list) return;\n list.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n const itemEl = target.closest('.list-item') as HTMLElement;\n if (!itemEl) return;\n if (target.classList.contains('checkbox')) {\n e.stopPropagation();\n const idxC = Number(itemEl.dataset.index);\n this._toggleSelection(this._getDisplayData()[idxC]);\n return;\n }\n const idxI = Number(itemEl.dataset.index);\n this._toggleSelection(this._getDisplayData()[idxI]);\n });\n list.addEventListener('keydown', (e) => {\n const target = e.target as HTMLElement;\n if (!target.classList.contains('list-item')) return;\n const items = Array.from(list.querySelectorAll('.list-item')) as HTMLElement[];\n const currentIndex = items.indexOf(target);\n const ke = e as KeyboardEvent;\n switch (ke.key) {\n case 'ArrowUp':\n e.preventDefault();\n if (currentIndex > 0) items[currentIndex - 1].focus();\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (currentIndex < items.length - 1) items[currentIndex + 1].focus();\n break;\n case ' ':\n case 'Enter':\n e.preventDefault();\n if (this.selectionMode) {\n const index = Number(target.dataset.index);\n this._toggleSelection(this._getDisplayData()[index]);\n }\n break;\n }\n });\n }\n private _updateListDisplay(): void {\n const listWrapper = this.root.querySelector('.list-wrapper');\n if (!listWrapper) {\n this.render();\n return;\n }\n const displayData = this._getDisplayData();\n const hasSelection = this.selectionMode;\n const hasMultipleSelection = this.selectionMode === 'multiple';\n const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\n\n listWrapper.innerHTML = `\n ${hasMultipleSelection && this.showSelectAll ? `\n <div class=\"select-all-bar\" part=\"select-all-bar\">\n <label>\n <input type=\"checkbox\" class=\"select-all-checkbox\"\n ${allSelected ? 'checked' : ''}\n aria-label=\"Selecionar todos\" />\n Selecionar Todos\n </label>\n <span class=\"selection-count\">${this._selection.length} selecionado(s)</span>\n </div>\n ` : ''}\n <ul class=\"list\" part=\"list\" role=\"listbox\"\n aria-multiselectable=\"${hasMultipleSelection}\"\n tabindex=\"0\">\n ${displayData.length === 0 ? `\n <li class=\"empty-message\" part=\"empty-message\">\n ${this.filter ? 'Nenhum resultado encontrado' : 'Nenhum item disponivel'}\n </li>\n ` : displayData.map((item, index) => {\n const key = this._getItemKey(item, index);\n const label = this._getItemLabel(item);\n const isSelected = this._isSelected(item);\n const content = this._optionTemplate ? this._optionTemplate(item) : esc(label);\n return `\n <li class=\"list-item${isSelected ? ' selected' : ''}\" part=\"list-item\"\n data-index=\"${index}\" data-key=\"${esc(key)}\"\n role=\"option\" aria-selected=\"${isSelected}\"\n ${this.dragdrop ? 'draggable=\"true\"' : ''}\n tabindex=\"0\">\n ${this.dragdrop ? '<span class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Arrastar\">\\u22EE\\u22EE</span>' : ''}\n ${hasSelection ? `\n <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\"\n ${isSelected ? 'checked' : ''}\n aria-label=\"Selecionar ${esc(label)}\" />\n ` : ''}\n <span class=\"item-content\" part=\"item-content\">${content}</span>\n </li>\n `;\n }).join('')}\n </ul>\n `;\n this._attachListeners();\n this._attachItemListeners(this.root.querySelector('.list') as HTMLElement);\n }\n\n\n private _handleMoveAction(action: string | undefined): void {\n if (!this._selection.length) return;\n const displayData = this._getDisplayData();\n const selectedIndices = this._selection\n .map(s => displayData.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(s, -1)))\n .filter(i => i >= 0)\n .sort((a, b) => a - b);\n\n if (selectedIndices.length === 0) return;\n\n switch (action) {\n case 'top':\n this._moveSelectedToStart(selectedIndices);\n break;\n case 'up':\n this._moveSelectedByOne(selectedIndices, -1);\n break;\n case 'down':\n this._moveSelectedByOne(selectedIndices, 1);\n break;\n case 'bottom':\n this._moveSelectedToEnd(selectedIndices);\n break;\n }\n }\n\n private _moveSelectedToStart(indices: number[]): void {\n const items: OrderListItem[] = [];\n const actualIndices: number[] = [];\n\n for (const idx of indices) {\n const actualIdx = this._getActualIndex(idx);\n items.push(this._data[actualIdx]);\n actualIndices.push(actualIdx);\n }\n\n actualIndices.sort((a, b) => b - a).forEach(i => this._data.splice(i, 1));\n\n const insertIdx = this._getActualIndex(0);\n this._data.splice(insertIdx, 0, ...items);\n\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _moveSelectedToEnd(indices: number[]): void {\n const items: OrderListItem[] = [];\n const actualIndices: number[] = [];\n\n for (const idx of indices) {\n const actualIdx = this._getActualIndex(idx);\n items.push(this._data[actualIdx]);\n actualIndices.push(actualIdx);\n }\n\n actualIndices.sort((a, b) => b - a).forEach(i => this._data.splice(i, 1));\n\n const displayData = this._getDisplayData();\n const insertIdx = this._getActualIndex(displayData.length - 1);\n this._data.splice(insertIdx + 1, 0, ...items);\n\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _moveSelectedByOne(indices: number[], delta: number): void {\n const displayData = this._getDisplayData();\n if (displayData.length === 0) return;\n\n // Get actual indices in _data array and sort them\n const actualIndices = indices\n .map(idx => this._getActualIndex(idx))\n .filter(idx => idx >= 0)\n .sort((a, b) => a - b);\n\n if (actualIndices.length === 0) return;\n\n // Check if movement is possible\n if (delta < 0 && actualIndices[0] <= 0) return;\n if (delta > 0 && actualIndices[actualIndices.length - 1] >= this._data.length - 1) return;\n\n // Extract selected items in order\n const selectedItems = actualIndices.map(idx => this._data[idx]);\n\n // Remove selected items from data (from highest to lowest to preserve indices)\n for (let i = actualIndices.length - 1; i >= 0; i--) {\n this._data.splice(actualIndices[i], 1);\n }\n\n // Calculate new insertion point\n let insertIndex: number;\n if (delta < 0) {\n // Moving up: insert before the first selected item position\n insertIndex = actualIndices[0] - 1;\n } else {\n // Moving down: insert after the last selected item position\n // Since we removed items, we need to adjust\n insertIndex = actualIndices[actualIndices.length - 1] - actualIndices.length + 1 + 1;\n }\n\n // Ensure insertIndex is within bounds\n insertIndex = Math.max(0, Math.min(insertIndex, this._data.length));\n\n // Insert items at new position\n this._data.splice(insertIndex, 0, ...selectedItems);\n\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _updateControlsState(): void {\n const displayData = this._getDisplayData();\n const selectedIndices = this._selection\n .map(s => displayData.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(s, -1)))\n .filter(i => i >= 0);\n\n const buttons = this.root.querySelectorAll<HTMLButtonElement>('.control-btn');\n buttons.forEach(btn => {\n const action = btn.dataset.action;\n let disabled = selectedIndices.length === 0;\n\n if (!disabled) {\n switch (action) {\n case 'top':\n case 'up':\n disabled = selectedIndices[0] === 0;\n break;\n case 'bottom':\n case 'down':\n disabled = selectedIndices[selectedIndices.length - 1] === displayData.length - 1;\n break;\n }\n }\n\n btn.disabled = disabled;\n });\n }\n}\n\nexport function defineFxOrderList(): typeof FxOrderList {\n return defineElement('fx-orderlist', FxOrderList);\n}"],"names":[],"mappings":"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"}
@@ -11,6 +11,9 @@ import { FxFormElement } from '../../core/form-element';
11
11
  * Atributos: checked, disabled, value, name, size (sm|md|lg).
12
12
  * Eventos: `change` e `checkedChange` (composed, detail: { checked, value }) —
13
13
  * `checkedChange` é o two-way binding do Angular [(checked)].
14
+ *
15
+ * Vue: use `:checked="estado"` + `@change` (o `v-model` padrão de elemento
16
+ * customizado usa `value` + `input`, não `checked`).
14
17
  */
15
18
  export declare class FxRadio extends FxFormElement {
16
19
  static styles: string;
@@ -28,6 +31,9 @@ export declare class FxRadio extends FxFormElement {
28
31
  private _group;
29
32
  /** No FormData: só o radio MARCADO envia `value` (ou 'on'). */
30
33
  protected getFormValue(): string | FormData | null;
34
+ /** getter/setter `value` — sem o setter o Vue não consegue escrever a propriedade. */
35
+ get value(): string;
36
+ set value(v: string | null | undefined);
31
37
  /** Tamanho do controle. Padrão: `'md'`. */
32
38
  get size(): string;
33
39
  set size(value: string);
@@ -1 +1 @@
1
- {"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAIxD;;;;;;;;;;;;GAYG;AACH,qBAAa,OAAQ,SAAQ,aAAa;IACxC,OAAgB,MAAM,SAwDpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;;;;OAKG;IACH,OAAO,CAAC,MAAM;IAYd,+DAA+D;cAC5C,YAAY,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI;IAI3D,2CAA2C;IAC3C,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;cAEkB,MAAM,IAAI,IAAI;IAoCjC,wEAAwE;IACxE,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,MAAM;IAwBd,oEAAoE;IACpE,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,uBAAuB,CAAS;cAErB,iBAAiB,IAAI,IAAI;IAQ5C,gEAAgE;IACvD,iBAAiB,IAAI,IAAI;CAInC;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}
1
+ {"version":3,"file":"radio.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAIxD;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,OAAQ,SAAQ,aAAa;IACxC,OAAgB,MAAM,SAwDpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,KAAK,EAAE,OAAO,EAEzB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED;;;;;OAKG;IACH,OAAO,CAAC,MAAM;IAYd,+DAA+D;cAC5C,YAAY,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI;IAI3D,sFAAsF;IACtF,IAAI,KAAK,IAAI,MAAM,CAAkC;IACrD,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAGrC;IAED,2CAA2C;IAC3C,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;cAEkB,MAAM,IAAI,IAAI;IAmCjC,wEAAwE;IACxE,OAAO,CAAC,UAAU;IAalB,OAAO,CAAC,MAAM;IAwBd,oEAAoE;IACpE,OAAO,CAAC,eAAe,CAAS;IAChC,OAAO,CAAC,uBAAuB,CAAS;cAErB,iBAAiB,IAAI,IAAI;IAQ5C,gEAAgE;IACvD,iBAAiB,IAAI,IAAI;CAInC;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}
@@ -8,7 +8,7 @@ const _FxRadio = class _FxRadio extends FxFormElement {
8
8
  this._initialCheckedCaptured = false;
9
9
  }
10
10
  static get observedAttributes() {
11
- return ["checked", "disabled"];
11
+ return ["checked", "disabled", "size"];
12
12
  }
13
13
  get checked() {
14
14
  return this.hasAttr("checked");
@@ -41,6 +41,14 @@ const _FxRadio = class _FxRadio extends FxFormElement {
41
41
  getFormValue() {
42
42
  return this.checked ? this.getAttr("value") || "on" : null;
43
43
  }
44
+ /** getter/setter `value` — sem o setter o Vue não consegue escrever a propriedade. */
45
+ get value() {
46
+ return this.getAttr("value");
47
+ }
48
+ set value(v) {
49
+ this.setAttribute("value", v == null ? "" : String(v));
50
+ this.updateFormValue();
51
+ }
44
52
  /** Tamanho do controle. Padrão: `'md'`. */
45
53
  get size() {
46
54
  const s = this.getAttr("size", "md");
@@ -51,9 +59,7 @@ const _FxRadio = class _FxRadio extends FxFormElement {
51
59
  }
52
60
  render() {
53
61
  const px = this.size === "sm" ? "14px" : this.size === "lg" ? "22px" : "18px";
54
- if (!this.style.getPropertyValue("--fx-size-radio")) {
55
- this.style.setProperty("--fx-size-radio", px);
56
- }
62
+ this.style.setProperty("--_fx-size-radio", px);
57
63
  this.setTemplate(`
58
64
  <span class="box" part="box" role="radio" tabindex="0"
59
65
  aria-checked="${this.checked}" aria-disabled="${this.disabled}">
@@ -141,8 +147,8 @@ _FxRadio.styles = css`
141
147
  -webkit-tap-highlight-color: transparent;
142
148
  }
143
149
  .control {
144
- width: var(--fx-size-radio, 18px);
145
- height: var(--fx-size-radio, 18px);
150
+ width: var(--fx-size-radio, var(--_fx-size-radio, 18px));
151
+ height: var(--fx-size-radio, var(--_fx-size-radio, 18px));
146
152
  flex-shrink: 0;
147
153
  display: inline-flex;
148
154
  align-items: center;
@@ -1 +1 @@
1
- {"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-radio> — Botão de opção. Radios com o mesmo `name` formam um grupo\n * (seleção exclusiva gerenciada pelo próprio componente, escopado à árvore\n * em que o radio vive — document OU o shadow DOM do app consumidor).\n *\n * Form-Associated Custom Element: dentro de um <form> só o radio MARCADO\n * entra no FormData (via atributo `name`, com `value` ou 'on'), igual ao\n * radio nativo. Recebe reset/disable do form.\n *\n * Atributos: checked, disabled, value, name, size (sm|md|lg).\n * Eventos: `change` e `checkedChange` (composed, detail: { checked, value }) —\n * `checkedChange` é o two-way binding do Angular [(checked)].\n */\nexport class FxRadio extends FxFormElement {\n static override styles = css`\n :host {\n display: inline-flex;\n vertical-align: middle;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n }\n .box {\n display: inline-flex;\n align-items: center;\n gap: var(--fx-space-sm);\n cursor: pointer;\n user-select: none;\n color: var(--fx-text-default);\n -webkit-tap-highlight-color: transparent;\n }\n .control {\n width: var(--fx-size-radio, 18px);\n height: var(--fx-size-radio, 18px);\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--fx-border-hover);\n border-radius: var(--fx-radius-full);\n background: var(--fx-surface-background);\n transition:\n border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n box-shadow var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .box:hover .control { border-color: var(--fx-color-primary); }\n .box:focus-visible .control {\n outline: none;\n box-shadow: var(--fx-effect-focus-ring, none);\n }\n .dot {\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n border-radius: var(--fx-radius-full);\n background: var(--fx-color-primary);\n transform: scale(0);\n transition: transform var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n :host([checked]) .control { border-color: var(--fx-color-primary); }\n :host([checked]) .dot { transform: scale(1); }\n /* Validação */\n :host([error]) .control,\n :host([invalid]) .control { border-color: var(--fx-color-danger, #dc2626); }\n :host([success]) .control,\n :host([valid]) .control { border-color: var(--fx-color-success, #16a34a); }\n .label { display: inline-flex; align-items: center; }\n :host([disabled]) .box {\n opacity: 0.55;\n cursor: not-allowed;\n pointer-events: none;\n }\n `;\n\n static override get observedAttributes(): string[] {\n return ['checked', 'disabled'];\n }\n\n get checked(): boolean {\n return this.hasAttr('checked');\n }\n set checked(value: boolean) {\n this.toggleAttr('checked', Boolean(value));\n }\n\n get disabled(): boolean {\n return this.hasAttr('disabled');\n }\n set disabled(value: boolean) {\n this.toggleAttr('disabled', Boolean(value));\n }\n\n /**\n * Grupo = radios com o mesmo `name` NA MESMA árvore. `getRootNode()` devolve\n * o document OU o ShadowRoot do app consumidor — grupos com o mesmo name\n * em shadow DOMs diferentes ficam isolados (o `document` global cruzaria\n * fronteiras indevidamente).\n */\n private _group(): FxRadio[] {\n const name = this.getAttr('name');\n if (!name) return [this];\n const root = this.getRootNode() as ParentNode;\n // Escape manual para seletor de atributo com aspas duplas (o global `CSS`\n // não existe em todos os ambientes — ex.: jsdom).\n const safeName = name.replace(/\\\\/g, '\\\\\\\\').replace(/\"/g, '\\\\\"');\n return Array.from(\n root.querySelectorAll(`fx-radio[name=\"${safeName}\"]`),\n ) as FxRadio[];\n }\n\n /** No FormData: só o radio MARCADO envia `value` (ou 'on'). */\n protected override getFormValue(): string | FormData | null {\n return this.checked ? (this.getAttr('value') || 'on') : null;\n }\n\n /** Tamanho do controle. Padrão: `'md'`. */\n get size(): string {\n const s = this.getAttr('size', 'md');\n return s === 'sm' || s === 'lg' ? s : 'md';\n }\n set size(value: string) {\n this.setAttribute('size', value);\n }\n\n protected override render(): void {\n const px = this.size === 'sm' ? '14px' : this.size === 'lg' ? '22px' : '18px';\n if (!this.style.getPropertyValue('--fx-size-radio')) {\n this.style.setProperty('--fx-size-radio', px);\n }\n\n this.setTemplate(`\n <span class=\"box\" part=\"box\" role=\"radio\" tabindex=\"0\"\n aria-checked=\"${this.checked}\" aria-disabled=\"${this.disabled}\">\n <span class=\"control\" part=\"control\"><span class=\"dot\" part=\"dot\"></span></span>\n <span class=\"label\" part=\"label\"><slot></slot></span>\n </span>\n `);\n\n const box = this.root.querySelector<HTMLElement>('.box');\n if (!box) return;\n box.addEventListener('click', () => this.select());\n box.addEventListener('keydown', (e) => {\n const key = (e as KeyboardEvent).key;\n if (key === ' ' || key === 'Enter') {\n e.preventDefault();\n this.select();\n return;\n }\n // Setas: movem o foco (e marcam) entre os radios do grupo — igual ao\n // <input type=\"radio\"> nativo (roam pelo grupo, sem sair dele).\n if (key === 'ArrowDown' || key === 'ArrowRight' || key === 'ArrowUp' || key === 'ArrowLeft') {\n e.preventDefault();\n this._moveFocus(key === 'ArrowDown' || key === 'ArrowRight' ? 1 : -1);\n }\n });\n\n // Publica name/value no form (ElementInternals) a cada render.\n this.updateFormValue();\n }\n\n /** Move o foco/marcação para o próximo (ou anterior) radio do grupo. */\n private _moveFocus(dir: 1 | -1): void {\n const group = this._group().filter((r) => !r.disabled);\n if (group.length < 2) return;\n const i = group.indexOf(this);\n const next = group[(i + dir + group.length) % group.length]!;\n next.focus(); // delegatesFocus leva o foco ao .box interno\n // Fallback (ex.: jsdom sem delegatesFocus): foca o .box interno direto.\n if (!next.root.activeElement) {\n next.root.querySelector<HTMLElement>('.box')?.focus();\n }\n if (!next.checked) next.select();\n }\n\n private select(): void {\n if (this.disabled || this.checked) return;\n // Desmarca os outros radios do mesmo grupo (mesmo name, mesma árvore).\n for (const r of this._group()) {\n if (r !== this) r.checked = false;\n }\n this.checked = true;\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { checked: true, value: this.getAttr('value') },\n }),\n );\n // Two-way binding do Angular: [(checked)] = [checked] + (checkedChange).\n this.dispatchEvent(\n new CustomEvent('checkedChange', {\n bubbles: true,\n composed: true,\n detail: { checked: true, value: this.getAttr('value') },\n }),\n );\n }\n\n /** Estado marcado inicial (para form.reset() restaurar o grupo). */\n private _initialChecked = false;\n private _initialCheckedCaptured = false;\n\n protected override connectedCallback(): void {\n if (!this._initialCheckedCaptured) {\n this._initialCheckedCaptured = true;\n this._initialChecked = this.checked;\n }\n super.connectedCallback();\n }\n\n /** form.reset(): restaura o estado marcado inicial do grupo. */\n override formResetCallback(): void {\n this.checked = this._initialChecked;\n this.updateFormValue();\n }\n}\n\nexport function defineFxRadio(): typeof FxRadio {\n return defineElement('fx-radio', FxRadio);\n}\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"radio.js","sources":["../../../src/components/radio/radio.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-radio> — Botão de opção. Radios com o mesmo `name` formam um grupo\n * (seleção exclusiva gerenciada pelo próprio componente, escopado à árvore\n * em que o radio vive — document OU o shadow DOM do app consumidor).\n *\n * Form-Associated Custom Element: dentro de um <form> só o radio MARCADO\n * entra no FormData (via atributo `name`, com `value` ou 'on'), igual ao\n * radio nativo. Recebe reset/disable do form.\n *\n * Atributos: checked, disabled, value, name, size (sm|md|lg).\n * Eventos: `change` e `checkedChange` (composed, detail: { checked, value }) —\n * `checkedChange` é o two-way binding do Angular [(checked)].\n *\n * Vue: use `:checked=\"estado\"` + `@change` (o `v-model` padrão de elemento\n * customizado usa `value` + `input`, não `checked`).\n */\nexport class FxRadio extends FxFormElement {\n static override styles = css`\n :host {\n display: inline-flex;\n vertical-align: middle;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n }\n .box {\n display: inline-flex;\n align-items: center;\n gap: var(--fx-space-sm);\n cursor: pointer;\n user-select: none;\n color: var(--fx-text-default);\n -webkit-tap-highlight-color: transparent;\n }\n .control {\n width: var(--fx-size-radio, var(--_fx-size-radio, 18px));\n height: var(--fx-size-radio, var(--_fx-size-radio, 18px));\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--fx-border-hover);\n border-radius: var(--fx-radius-full);\n background: var(--fx-surface-background);\n transition:\n border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n box-shadow var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .box:hover .control { border-color: var(--fx-color-primary); }\n .box:focus-visible .control {\n outline: none;\n box-shadow: var(--fx-effect-focus-ring, none);\n }\n .dot {\n width: calc(100% - 8px);\n height: calc(100% - 8px);\n border-radius: var(--fx-radius-full);\n background: var(--fx-color-primary);\n transform: scale(0);\n transition: transform var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n :host([checked]) .control { border-color: var(--fx-color-primary); }\n :host([checked]) .dot { transform: scale(1); }\n /* Validação */\n :host([error]) .control,\n :host([invalid]) .control { border-color: var(--fx-color-danger, #dc2626); }\n :host([success]) .control,\n :host([valid]) .control { border-color: var(--fx-color-success, #16a34a); }\n .label { display: inline-flex; align-items: center; }\n :host([disabled]) .box {\n opacity: 0.55;\n cursor: not-allowed;\n pointer-events: none;\n }\n `;\n\n static override get observedAttributes(): string[] {\n return ['checked', 'disabled', 'size'];\n }\n\n get checked(): boolean {\n return this.hasAttr('checked');\n }\n set checked(value: boolean) {\n this.toggleAttr('checked', Boolean(value));\n }\n\n get disabled(): boolean {\n return this.hasAttr('disabled');\n }\n set disabled(value: boolean) {\n this.toggleAttr('disabled', Boolean(value));\n }\n\n /**\n * Grupo = radios com o mesmo `name` NA MESMA árvore. `getRootNode()` devolve\n * o document OU o ShadowRoot do app consumidor — grupos com o mesmo name\n * em shadow DOMs diferentes ficam isolados (o `document` global cruzaria\n * fronteiras indevidamente).\n */\n private _group(): FxRadio[] {\n const name = this.getAttr('name');\n if (!name) return [this];\n const root = this.getRootNode() as ParentNode;\n // Escape manual para seletor de atributo com aspas duplas (o global `CSS`\n // não existe em todos os ambientes — ex.: jsdom).\n const safeName = name.replace(/\\\\/g, '\\\\\\\\').replace(/\"/g, '\\\\\"');\n return Array.from(\n root.querySelectorAll(`fx-radio[name=\"${safeName}\"]`),\n ) as FxRadio[];\n }\n\n /** No FormData: só o radio MARCADO envia `value` (ou 'on'). */\n protected override getFormValue(): string | FormData | null {\n return this.checked ? (this.getAttr('value') || 'on') : null;\n }\n\n /** getter/setter `value` — sem o setter o Vue não consegue escrever a propriedade. */\n get value(): string { return this.getAttr('value'); }\n set value(v: string | null | undefined) {\n this.setAttribute('value', v == null ? '' : String(v));\n this.updateFormValue();\n }\n\n /** Tamanho do controle. Padrão: `'md'`. */\n get size(): string {\n const s = this.getAttr('size', 'md');\n return s === 'sm' || s === 'lg' ? s : 'md';\n }\n set size(value: string) {\n this.setAttribute('size', value);\n }\n\n protected override render(): void {\n const px = this.size === 'sm' ? '14px' : this.size === 'lg' ? '22px' : '18px';\n // Token interno: um `--fx-size-radio` do consumidor continua vencendo.\n this.style.setProperty('--_fx-size-radio', px);\n\n this.setTemplate(`\n <span class=\"box\" part=\"box\" role=\"radio\" tabindex=\"0\"\n aria-checked=\"${this.checked}\" aria-disabled=\"${this.disabled}\">\n <span class=\"control\" part=\"control\"><span class=\"dot\" part=\"dot\"></span></span>\n <span class=\"label\" part=\"label\"><slot></slot></span>\n </span>\n `);\n\n const box = this.root.querySelector<HTMLElement>('.box');\n if (!box) return;\n box.addEventListener('click', () => this.select());\n box.addEventListener('keydown', (e) => {\n const key = (e as KeyboardEvent).key;\n if (key === ' ' || key === 'Enter') {\n e.preventDefault();\n this.select();\n return;\n }\n // Setas: movem o foco (e marcam) entre os radios do grupo — igual ao\n // <input type=\"radio\"> nativo (roam pelo grupo, sem sair dele).\n if (key === 'ArrowDown' || key === 'ArrowRight' || key === 'ArrowUp' || key === 'ArrowLeft') {\n e.preventDefault();\n this._moveFocus(key === 'ArrowDown' || key === 'ArrowRight' ? 1 : -1);\n }\n });\n\n // Publica name/value no form (ElementInternals) a cada render.\n this.updateFormValue();\n }\n\n /** Move o foco/marcação para o próximo (ou anterior) radio do grupo. */\n private _moveFocus(dir: 1 | -1): void {\n const group = this._group().filter((r) => !r.disabled);\n if (group.length < 2) return;\n const i = group.indexOf(this);\n const next = group[(i + dir + group.length) % group.length]!;\n next.focus(); // delegatesFocus leva o foco ao .box interno\n // Fallback (ex.: jsdom sem delegatesFocus): foca o .box interno direto.\n if (!next.root.activeElement) {\n next.root.querySelector<HTMLElement>('.box')?.focus();\n }\n if (!next.checked) next.select();\n }\n\n private select(): void {\n if (this.disabled || this.checked) return;\n // Desmarca os outros radios do mesmo grupo (mesmo name, mesma árvore).\n for (const r of this._group()) {\n if (r !== this) r.checked = false;\n }\n this.checked = true;\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { checked: true, value: this.getAttr('value') },\n }),\n );\n // Two-way binding do Angular: [(checked)] = [checked] + (checkedChange).\n this.dispatchEvent(\n new CustomEvent('checkedChange', {\n bubbles: true,\n composed: true,\n detail: { checked: true, value: this.getAttr('value') },\n }),\n );\n }\n\n /** Estado marcado inicial (para form.reset() restaurar o grupo). */\n private _initialChecked = false;\n private _initialCheckedCaptured = false;\n\n protected override connectedCallback(): void {\n if (!this._initialCheckedCaptured) {\n this._initialCheckedCaptured = true;\n this._initialChecked = this.checked;\n }\n super.connectedCallback();\n }\n\n /** form.reset(): restaura o estado marcado inicial do grupo. */\n override formResetCallback(): void {\n this.checked = this._initialChecked;\n this.updateFormValue();\n }\n}\n\nexport function defineFxRadio(): typeof FxRadio {\n return defineElement('fx-radio', FxRadio);\n}\n"],"names":[],"mappings":"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"}
@@ -23,6 +23,12 @@ import { FxFormElement } from '../../core/form-element';
23
23
  export declare class FxSelect extends FxFormElement {
24
24
  static styles: string;
25
25
  static get observedAttributes(): string[];
26
+ /** Evita renders em cascata durante mudanças internas agrupadas. */
27
+ private _suppressRender;
28
+ /** Resultado de `_precisaFixed` cacheado por abertura (evita getComputedStyle no scroll). */
29
+ private _fixedMode;
30
+ private _fixedResolved;
31
+ protected attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
26
32
  /** Espaço (px) entre o campo e o painel — espelha `--fx-select-panel-offset`. */
27
33
  private static readonly GAP;
28
34
  /** Margem (px) mantida entre o painel e as bordas da viewport. */
@@ -37,9 +43,15 @@ export declare class FxSelect extends FxFormElement {
37
43
  get size(): string;
38
44
  set size(value: string);
39
45
  get value(): string;
40
- set value(value: string);
46
+ set value(value: string | number | null | undefined);
41
47
  get disabled(): boolean;
42
48
  set disabled(value: boolean);
49
+ get searchable(): boolean;
50
+ set searchable(value: boolean);
51
+ get clearable(): boolean;
52
+ set clearable(value: boolean);
53
+ get full(): boolean;
54
+ set full(value: boolean);
43
55
  private get options();
44
56
  protected connectedCallback(): void;
45
57
  protected disconnectedCallback(): void;
@@ -59,6 +71,12 @@ export declare class FxSelect extends FxFormElement {
59
71
  * horizontal próximo à borda direita.
60
72
  */
61
73
  protected ajustarPosicao(): void;
74
+ /**
75
+ * Existe ancestral com overflow que cortaria o painel absoluto?
76
+ * `getComputedStyle` é defensivo: em jsdom retorna vazio e o modo
77
+ * histórico (absoluto) é mantido.
78
+ */
79
+ private static _precisaFixed;
62
80
  /** Altura máxima do painel a partir de `--fx-select-panel-max-height`. */
63
81
  private static _maxAltura;
64
82
  private select;
@@ -1 +1 @@
1
- {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,QAAS,SAAQ,aAAa;IACzC,OAAgB,MAAM,SA+KpB;IAIF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAIjD;IAED,iFAAiF;IACjF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAK;IAChC,kEAAkE;IAClE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAK;IACnC,sEAAsE;IACtE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAM;IAExC,OAAO,CAAC,QAAQ,CAAC,CAAmB;IACpC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,4EAA4E;IAC5E,OAAO,CAAC,QAAQ,CAAC,CAAa;IAE9B,wCAAwC;IACxC,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAMtB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,OAAO,KAAK,OAAO,GAKlB;cAEkB,iBAAiB,IAAI,IAAI;cAezB,oBAAoB,IAAI,IAAI;IAO/C,8EAA8E;IAC9E,OAAO,CAAC,MAAM;IAKd,+DAA+D;IAC/D,OAAO,CAAC,OAAO;IAQf,qEAAqE;IACrE,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,aAAa;IAOrB;;;;;;;OAOG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;IAuChC,0EAA0E;IAC1E,OAAO,CAAC,MAAM,CAAC,UAAU;IAMzB,OAAO,CAAC,MAAM;IAUd,qEAAqE;IACrE,OAAO,CAAC,gBAAgB;cAiBL,MAAM,IAAI,IAAI;IA6GjC,sEAAsE;IAC7D,iBAAiB,IAAI,IAAI;CAInC;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}
1
+ {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/components/select/select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBAAa,QAAS,SAAQ,aAAa;IACzC,OAAgB,MAAM,SAoLpB;IAKF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAIjD;IAED,oEAAoE;IACpE,OAAO,CAAC,eAAe,CAAS;IAChC,6FAA6F;IAC7F,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,cAAc,CAAS;cAEZ,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAKjH,iFAAiF;IACjF,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAK;IAChC,kEAAkE;IAClE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAK;IACnC,sEAAsE;IACtE,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAM;IAExC,OAAO,CAAC,QAAQ,CAAC,CAAmB;IACpC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,4EAA4E;IAC5E,OAAO,CAAC,QAAQ,CAAC,CAAa;IAE9B,wCAAwC;IACxC,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAOlD;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,UAAU,IAAI,OAAO,CAExB;IACD,IAAI,UAAU,CAAC,KAAK,EAAE,OAAO,EAE5B;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;IAED,OAAO,KAAK,OAAO,GAKlB;cAEkB,iBAAiB,IAAI,IAAI;cA2BzB,oBAAoB,IAAI,IAAI;IAO/C,8EAA8E;IAC9E,OAAO,CAAC,MAAM;IASd,+DAA+D;IAC/D,OAAO,CAAC,OAAO;IAUf,qEAAqE;IACrE,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,aAAa;IAOrB;;;;;;;OAOG;IACH,SAAS,CAAC,cAAc,IAAI,IAAI;IAuEhC;;;;OAIG;IACH,OAAO,CAAC,MAAM,CAAC,aAAa;IAW5B,0EAA0E;IAC1E,OAAO,CAAC,MAAM,CAAC,UAAU;IAMzB,OAAO,CAAC,MAAM;IAiBd,qEAAqE;IACrE,OAAO,CAAC,gBAAgB;cAiBL,MAAM,IAAI,IAAI;IAsHjC,sEAAsE;IAC7D,iBAAiB,IAAI,IAAI;CASnC;AAED,wBAAgB,cAAc,IAAI,OAAO,QAAQ,CAEhD"}