@wrrdev/fenix-ui 1.1.16 → 1.2.0

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 (111) hide show
  1. package/README.md +12 -3
  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 +20 -0
  43. package/dist/components/floatlabel/floatlabel.d.ts.map +1 -1
  44. package/dist/components/floatlabel/floatlabel.js +99 -26
  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 +119 -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/core/tokens.d.ts +2 -0
  94. package/dist/core/tokens.d.ts.map +1 -1
  95. package/dist/core/tokens.js +9 -0
  96. package/dist/core/tokens.js.map +1 -1
  97. package/dist/docs/app.d.ts.map +1 -1
  98. package/dist/docs/componentes/floatlabel.doc.d.ts.map +1 -1
  99. package/dist/docs/componentes/input.doc.d.ts.map +1 -1
  100. package/dist/docs/componentes/orderlist.doc.d.ts.map +1 -1
  101. package/dist/docs/componentes/table.doc.d.ts.map +1 -1
  102. package/dist/docs/shell.d.ts +10 -1
  103. package/dist/docs/shell.d.ts.map +1 -1
  104. package/dist/docs/theme-reference.d.ts +53 -0
  105. package/dist/docs/theme-reference.d.ts.map +1 -0
  106. package/dist/docs/types.d.ts +2 -0
  107. package/dist/docs/types.d.ts.map +1 -1
  108. package/dist/fenix-ui.umd.min.js +270 -233
  109. package/dist/fenix-ui4.esm.js +890 -176
  110. package/dist/fenix-ui4.esm.js.map +1 -1
  111. package/package.json +1 -1
@@ -21,13 +21,20 @@ export declare class FxMultiselect extends FxFormElement {
21
21
  private selected;
22
22
  /** Seleção inicial (para form.reset() restaurar o estado). */
23
23
  private _initialValues?;
24
+ protected attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
24
25
  /** Valores selecionados (CSV no atributo / array na propriedade). */
25
26
  get values(): string[];
26
- set values(list: string[]);
27
+ set values(list: string[] | null | undefined);
27
28
  /** No FormData do form: uma entrada `name` por valor selecionado. */
28
29
  protected getFormValue(): string | FormData | null;
29
30
  get disabled(): boolean;
30
31
  set disabled(value: boolean);
32
+ get searchable(): boolean;
33
+ set searchable(value: boolean);
34
+ get clearable(): boolean;
35
+ set clearable(value: boolean);
36
+ get full(): boolean;
37
+ set full(value: boolean);
31
38
  private get options();
32
39
  protected connectedCallback(): void;
33
40
  protected disconnectedCallback(): void;
@@ -1 +1 @@
1
- {"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/multiselect/multiselect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD;;;;;;;;;;;;;GAaG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C,OAAgB,MAAM,SAqOpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAIjD;IAED,OAAO,CAAC,QAAQ,CAAC,CAAmB;IACpC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAAqB;IACrC,8DAA8D;IAC9D,OAAO,CAAC,cAAc,CAAC,CAAW;IAElC,qEAAqE;IACrE,IAAI,MAAM,IAAI,MAAM,EAAE,CAGrB;IACD,IAAI,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,EAExB;IAED,qEAAqE;cAClD,YAAY,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI;IAQ3D,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,OAAO,KAAK,OAAO,GAKlB;cAEkB,iBAAiB,IAAI,IAAI;cAgBzB,oBAAoB,IAAI,IAAI;IAM/C,gDAAgD;IAChD,OAAO,CAAC,MAAM;IAqBd,gDAAgD;IACvC,iBAAiB,IAAI,IAAI;IAQlC,OAAO,CAAC,WAAW;IAMnB,qEAAqE;IACrE,OAAO,CAAC,gBAAgB;cAiBL,MAAM,IAAI,IAAI;CAwIlC;AAED,wBAAgB,mBAAmB,IAAI,OAAO,aAAa,CAE1D"}
1
+ {"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/multiselect/multiselect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD;;;;;;;;;;;;;GAaG;AACH,qBAAa,aAAc,SAAQ,aAAa;IAC9C,OAAgB,MAAM,SAqOpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAgBjD;IAED,OAAO,CAAC,QAAQ,CAAC,CAAmB;IACpC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAAqB;IACrC,8DAA8D;IAC9D,OAAO,CAAC,cAAc,CAAC,CAAW;cAEf,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAOjH,qEAAqE;IACrE,IAAI,MAAM,IAAI,MAAM,EAAE,CAGrB;IACD,IAAI,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,GAAG,SAAS,EAY3C;IAED,qEAAqE;cAClD,YAAY,IAAI,MAAM,GAAG,QAAQ,GAAG,IAAI;IAQ3D,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;cAwBzB,oBAAoB,IAAI,IAAI;IAM/C,gDAAgD;IAChD,OAAO,CAAC,MAAM;IAwBd,gDAAgD;IACvC,iBAAiB,IAAI,IAAI;IAOlC,OAAO,CAAC,WAAW;IAMnB,qEAAqE;IACrE,OAAO,CAAC,gBAAgB;cAiBL,MAAM,IAAI,IAAI;CA4IlC;AAED,wBAAgB,mBAAmB,IAAI,OAAO,aAAa,CAE1D"}
@@ -8,7 +8,23 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
8
8
  this.selected = /* @__PURE__ */ new Set();
9
9
  }
10
10
  static get observedAttributes() {
11
- return ["disabled", "placeholder", "error", "invalid", "success", "valid"];
11
+ return [
12
+ "values",
13
+ "size",
14
+ "disabled",
15
+ "placeholder",
16
+ "searchable",
17
+ "clearable",
18
+ "full",
19
+ "error",
20
+ "invalid",
21
+ "success",
22
+ "valid"
23
+ ];
24
+ }
25
+ attributeChangedCallback(name, oldValue, newValue) {
26
+ if (name === "values") this.selected = new Set(this.values);
27
+ super.attributeChangedCallback(name, oldValue, newValue);
12
28
  }
13
29
  /** Valores selecionados (CSV no atributo / array na propriedade). */
14
30
  get values() {
@@ -16,7 +32,15 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
16
32
  return csv ? csv.split(",").map((v) => v.trim()).filter(Boolean) : [];
17
33
  }
18
34
  set values(list) {
19
- this.setAttribute("values", list.join(","));
35
+ const values = Array.isArray(list) ? list.map(String) : [];
36
+ this.selected = new Set(values);
37
+ const csv = values.join(",");
38
+ if (this.getAttr("values") !== csv) {
39
+ this.setAttribute("values", csv);
40
+ } else if (this.isConnected) {
41
+ this.render();
42
+ }
43
+ this.updateFormValue();
20
44
  }
21
45
  /** No FormData do form: uma entrada `name` por valor selecionado. */
22
46
  getFormValue() {
@@ -32,6 +56,24 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
32
56
  set disabled(value) {
33
57
  this.toggleAttr("disabled", Boolean(value));
34
58
  }
59
+ get searchable() {
60
+ return this.hasAttr("searchable");
61
+ }
62
+ set searchable(value) {
63
+ this.toggleAttr("searchable", Boolean(value));
64
+ }
65
+ get clearable() {
66
+ return this.hasAttr("clearable");
67
+ }
68
+ set clearable(value) {
69
+ this.toggleAttr("clearable", Boolean(value));
70
+ }
71
+ get full() {
72
+ return this.hasAttr("full");
73
+ }
74
+ set full(value) {
75
+ this.toggleAttr("full", Boolean(value));
76
+ }
35
77
  get options() {
36
78
  return [...this.querySelectorAll("option")].map((o) => ({
37
79
  value: o.getAttribute("value") ?? o.textContent?.trim() ?? "",
@@ -43,7 +85,15 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
43
85
  if (!this._initialValues) this._initialValues = [...this.values];
44
86
  super.connectedCallback();
45
87
  this.observer = new MutationObserver(() => this.render());
46
- this.observer.observe(this, { childList: true, subtree: true, characterData: true });
88
+ this.observer.observe(this, {
89
+ childList: true,
90
+ subtree: true,
91
+ characterData: true,
92
+ // Vue atualiza `:value`/`:selected` das <option> no light DOM; sem
93
+ // observar atributos o label/valor antigo permanecia em tela.
94
+ attributes: true,
95
+ attributeFilter: ["value", "selected"]
96
+ });
47
97
  this.docListener = (e) => {
48
98
  if (!this.hasAttr("open")) return;
49
99
  if (e.composedPath().includes(this)) return;
@@ -59,8 +109,10 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
59
109
  }
60
110
  /** Aplica a seleção, reflete e emite change. */
61
111
  commit() {
62
- this.values = [...this.selected];
63
- this.render();
112
+ const next = [...this.selected];
113
+ const same = next.join(",") === this.values.join(",");
114
+ this.values = next;
115
+ if (same && this.isConnected) this.render();
64
116
  this.updateFormValue();
65
117
  this.dispatchEvent(
66
118
  new CustomEvent("change", {
@@ -81,8 +133,6 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
81
133
  formResetCallback() {
82
134
  const initial = this._initialValues ?? [];
83
135
  this.values = initial;
84
- this.selected = new Set(initial);
85
- this.render();
86
136
  this.updateFormValue();
87
137
  }
88
138
  toggleValue(value) {
@@ -111,8 +161,10 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
111
161
  const wasOpen = this.hasAttr("open");
112
162
  const search = this.root.querySelector(".search")?.value ?? "";
113
163
  const opts = this.options;
114
- for (const v of [...this.selected]) {
115
- if (!opts.some((o) => o.value === v)) this.selected.delete(v);
164
+ if (opts.length > 0) {
165
+ for (const v of [...this.selected]) {
166
+ if (!opts.some((o) => o.value === v)) this.selected.delete(v);
167
+ }
116
168
  }
117
169
  const chips = opts.filter((o) => this.selected.has(o.value));
118
170
  const placeholder = this.getAttr("placeholder", "Selecione…");
@@ -1 +1 @@
1
- {"version":3,"file":"multiselect.js","sources":["../../../src/components/multiselect/multiselect.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-multiselect> — Seleção múltipla .\n *\n * Form-Associated Custom Element: dentro de um <form> entra no FormData com\n * UMA entrada por valor selecionado (via atributo `name`).\n *\n * Dropdown customizado com painel (overlay), checkbox por item, pesquisa\n * opcional e ação de limpar. Opções via <option> nativos no light DOM.\n *\n * Atributos: values (CSV), searchable, clearable, disabled, placeholder,\n * size (sm|md|lg), no-results.\n * Eventos: `change` e `valuesChange` (composed, detail: { values: string[] }) —\n * `valuesChange` é o two-way binding do Angular [(value)] em seleção múltipla.\n */\nexport class FxMultiselect extends FxFormElement {\n static override styles = css`\n :host {\n display: inline-block;\n vertical-align: middle;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n position: relative;\n /* Largura padrão no HOST: CSS externo, classes e style inline no elemento\n vencem este default naturalmente (regras do documento > :host). */\n width: var(--fx-multiselect-width, 240px);\n }\n .trigger {\n display: inline-flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--fx-space-xs);\n /* Acompanha a largura definida no :host. */\n width: 100%;\n box-sizing: border-box;\n min-height: var(--fx-size-md);\n padding: var(--fx-space-xs) var(--fx-space-md);\n font: inherit;\n /* Altura determinística: a caixa fica no token --fx-size-*. */\n line-height: var(--fx-font-line-height);\n color: var(--fx-text-default);\n background-color: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n cursor: pointer;\n text-align: left;\n transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n /* Área dos chips: encolhe e quebra linha internamente,\n mantendo os ícones sempre dentro do componente. */\n .lead {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--fx-space-xs);\n flex: 1;\n min-width: 0;\n overflow: hidden;\n }\n :host([size='sm']) { width: var(--fx-multiselect-width-sm, 200px); }\n :host([size='sm']) .trigger { min-height: var(--fx-size-sm); }\n :host([size='lg']) { width: var(--fx-multiselect-width-lg, 280px); }\n :host([size='lg']) .trigger { min-height: var(--fx-size-lg); font-size: calc(var(--fx-font-size) + 4px); }\n /* Full width: o host estica até o pai e o trigger acompanha. */\n :host([full]) { display: block; width: 100%; }\n :host([full]) .trigger { width: 100%; }\n /* Validação — borda e brilho JÁ EM REPOUSO (igual ao fx-input); o brilho\n segue o token --fx-effect-error-ring, que acompanha effect.focus-ring. */\n :host([error]) .trigger,\n :host([invalid]) .trigger {\n border-color: var(--fx-color-danger, #dc2626);\n box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n }\n :host([error]) .trigger:focus-visible,\n :host([invalid]) .trigger:focus-visible,\n :host([error][open]) .trigger,\n :host([invalid][open]) .trigger {\n border-color: var(--fx-color-danger, #dc2626);\n box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n }\n :host([success]) .trigger,\n :host([valid]) .trigger {\n border-color: var(--fx-color-success, #16a34a);\n box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n }\n :host([success]) .trigger:focus-visible,\n :host([valid]) .trigger:focus-visible,\n :host([success][open]) .trigger,\n :host([valid][open]) .trigger {\n border-color: var(--fx-color-success, #16a34a);\n box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n }\n .trigger:hover { border-color: var(--fx-border-hover); }\n .trigger:focus-visible {\n outline: none;\n border-color: var(--fx-color-primary);\n box-shadow: var(--fx-effect-focus-ring, none);\n }\n .trigger[aria-expanded='true'] { border-color: var(--fx-color-primary); }\n .placeholder { color: var(--fx-text-muted); }\n .chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent);\n color: var(--fx-color-primary);\n border-radius: var(--fx-radius-sm);\n padding: 2px 6px;\n font-size: calc(var(--fx-font-size) - 2px);\n }\n .chip__x {\n border: none;\n background: none;\n color: inherit;\n cursor: pointer;\n font-size: calc(var(--fx-font-size) - 1px);\n line-height: 1;\n padding: 0;\n }\n .trigger-right {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n color: var(--fx-text-muted);\n }\n .icon-btn {\n border: none;\n background: none;\n color: inherit;\n cursor: pointer;\n font-size: calc(var(--fx-font-size) + 2px);\n line-height: 1;\n padding: 0 2px;\n border-radius: var(--fx-radius-full);\n }\n .icon-btn:hover { color: var(--fx-color-danger); }\n .caret {\n font-size: calc(var(--fx-font-size) - 3px);\n transition: transform var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n :host([open]) .caret { transform: rotate(180deg); }\n\n /* Painel (overlay ) */\n .panel {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n z-index: var(--fx-z-dropdown, 1000);\n width: max(100%, 240px);\n background: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n box-shadow: var(--fx-shadow-lg);\n display: none;\n overflow: hidden;\n }\n :host([up]) .panel {\n top: auto;\n bottom: calc(100% + 4px);\n }\n :host([open]) .panel { display: block; }\n .panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--fx-space-sm);\n padding: var(--fx-space-xs) var(--fx-space-md);\n border-bottom: 1px solid var(--fx-border-default);\n background: var(--fx-surface-surface-hover);\n }\n .count { font-size: calc(var(--fx-font-size) - 2px); color: var(--fx-text-muted); }\n .clear-all {\n border: none;\n background: none;\n font: inherit;\n font-size: calc(var(--fx-font-size) - 2px);\n color: var(--fx-color-primary);\n cursor: pointer;\n padding: 0;\n }\n .clear-all:hover { text-decoration: underline; }\n .search {\n width: 100%;\n box-sizing: border-box;\n font: inherit;\n color: var(--fx-text-default);\n background: var(--fx-surface-background);\n border: none;\n border-bottom: 1px solid var(--fx-border-default);\n padding: var(--fx-space-sm) var(--fx-space-md);\n outline: none;\n }\n .list {\n max-height: 240px;\n overflow-y: auto;\n list-style: none;\n margin: 0;\n padding: var(--fx-space-3xs, 4px);\n }\n .opt {\n display: flex;\n align-items: center;\n gap: var(--fx-space-sm);\n width: 100%;\n padding: var(--fx-space-xs) var(--fx-space-md);\n border: none;\n background: none;\n font: inherit;\n color: var(--fx-text-default);\n cursor: pointer;\n border-radius: var(--fx-radius-sm);\n text-align: left;\n }\n .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, transparent); }\n .opt[aria-selected='true'] {\n background: color-mix(in srgb, var(--fx-color-primary) 16%, transparent);\n color: var(--fx-color-primary);\n font-weight: var(--fx-font-weight);\n }\n /* Checkbox visual */\n .box {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--fx-border-default);\n border-radius: calc(var(--fx-radius-sm) / 2);\n font-size: 11px;\n line-height: 1;\n color: transparent;\n transition:\n background-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .opt[aria-selected='true'] .box {\n background: var(--fx-color-primary);\n border-color: var(--fx-color-primary);\n color: #fff;\n }\n .opt[aria-selected='true'] .box::after { content: '✓'; }\n .empty { padding: var(--fx-space-md); color: var(--fx-text-muted); text-align: center; }\n :host([disabled]) .trigger { opacity: 0.55; cursor: not-allowed; background: var(--fx-surface-surface-hover); }\n `;\n\n static override get observedAttributes(): string[] {\n // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n return ['disabled', 'placeholder', 'error', 'invalid', 'success', 'valid'];\n }\n\n private observer?: MutationObserver;\n private docListener?: (e: Event) => void;\n private selected = new Set<string>();\n /** Seleção inicial (para form.reset() restaurar o estado). */\n private _initialValues?: string[];\n\n /** Valores selecionados (CSV no atributo / array na propriedade). */\n get values(): string[] {\n const csv = this.getAttr('values');\n return csv ? csv.split(',').map((v) => v.trim()).filter(Boolean) : [];\n }\n set values(list: string[]) {\n this.setAttribute('values', list.join(','));\n }\n\n /** No FormData do form: uma entrada `name` por valor selecionado. */\n protected override getFormValue(): string | FormData | null {\n const values = this.values;\n if (!this.name || values.length === 0) return null;\n const fd = new FormData();\n values.forEach((v) => fd.append(this.name, v));\n return fd;\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 private get options(): { value: string; label: string }[] {\n return [...this.querySelectorAll('option')].map((o) => ({\n value: o.getAttribute('value') ?? o.textContent?.trim() ?? '',\n label: o.textContent?.trim() ?? '',\n }));\n }\n\n protected override connectedCallback(): void {\n // Popula a seleção ANTES do primeiro render (super chama render).\n this.selected = new Set(this.values);\n if (!this._initialValues) this._initialValues = [...this.values];\n super.connectedCallback();\n this.observer = new MutationObserver(() => this.render());\n this.observer.observe(this, { childList: true, subtree: true, characterData: true });\n this.docListener = (e: Event) => {\n if (!this.hasAttr('open')) return;\n if (e.composedPath().includes(this)) return;\n this.removeAttribute('open');\n this.render();\n };\n document.addEventListener('click', this.docListener);\n }\n\n protected override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.observer?.disconnect();\n if (this.docListener) document.removeEventListener('click', this.docListener);\n }\n\n /** Aplica a seleção, reflete e emite change. */\n private commit(): void {\n this.values = [...this.selected];\n this.render();\n this.updateFormValue();\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { values: [...this.selected] },\n }),\n );\n // Two-way binding do Angular: [(value)] em selecao multipla -> valuesChange.\n this.dispatchEvent(\n new CustomEvent('valuesChange', {\n bubbles: true,\n composed: true,\n detail: { values: [...this.selected] },\n }),\n );\n }\n\n /** form.reset(): restaura a seleção inicial. */\n override formResetCallback(): void {\n const initial = this._initialValues ?? [];\n this.values = initial;\n this.selected = new Set(initial);\n this.render();\n this.updateFormValue();\n }\n\n private toggleValue(value: string): void {\n if (this.selected.has(value)) this.selected.delete(value);\n else this.selected.add(value);\n this.commit();\n }\n\n /** Navegação por teclado entre as opções do listbox (WCAG 2.1.1). */\n private _navigateOptions(e: KeyboardEvent): void {\n e.preventDefault();\n if (!this.hasAttr('open')) {\n this.toggleAttribute('open');\n this.render();\n }\n const opts = Array.from(this.root.querySelectorAll<HTMLButtonElement>('.opt'));\n if (!opts.length) return;\n const current = opts.indexOf(this.root.activeElement as HTMLButtonElement);\n let next = 0;\n if (e.key === 'ArrowDown') next = current === -1 ? 0 : Math.min(current + 1, opts.length - 1);\n else if (e.key === 'ArrowUp') next = current === -1 ? opts.length - 1 : Math.max(current - 1, 0);\n else if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = opts.length - 1;\n opts[next]?.focus();\n }\n\n protected override render(): void {\n const wasOpen = this.hasAttr('open');\n // Preserva o estado do campo de pesquisa entre re-renders.\n const search = this.root.querySelector<HTMLInputElement>('.search')?.value ?? '';\n\n const opts = this.options;\n for (const v of [...this.selected]) {\n if (!opts.some((o) => o.value === v)) this.selected.delete(v);\n }\n\n const chips = opts.filter((o) => this.selected.has(o.value));\n const placeholder = this.getAttr('placeholder', 'Selecione…');\n const filtered = search\n ? opts.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))\n : opts;\n\n this.setTemplate(`\n <span class=\"trigger\" part=\"trigger\" role=\"button\" tabindex=\"${this.disabled ? -1 : 0}\" aria-haspopup=\"listbox\" aria-expanded=\"${wasOpen}\" aria-disabled=\"${this.disabled}\">\n <span class=\"lead\">\n ${\n chips.length\n ? chips.map((c) => `\n <span class=\"chip\" data-value=\"${esc(c.value)}\">\n ${esc(c.label)}\n <span class=\"chip__x\" role=\"button\" aria-label=\"Remover ${esc(c.label)}\">×</span>\n </span>`).join('')\n : `<span class=\"placeholder\">${esc(placeholder)}</span>`\n }\n </span>\n <span class=\"trigger-right\">\n ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"icon-btn clear\" part=\"clear\" aria-label=\"Limpar seleção\">×</button>' : ''}\n <span class=\"caret\">▼</span>\n </span>\n </span>\n <div class=\"panel\" part=\"panel\" role=\"listbox\" aria-multiselectable=\"true\">\n <div class=\"panel-header\">\n <span class=\"count\">${chips.length} selecionado${chips.length === 1 ? '' : 's'}</span>\n ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"clear-all\">Limpar tudo</button>' : ''}\n </div>\n ${this.hasAttr('searchable') ? `<input class=\"search\" part=\"search\" type=\"text\" placeholder=\"${esc(this.getAttr('search-placeholder', 'Pesquisar…'))}\">` : ''}\n <ul class=\"list\">\n ${filtered.map((o) => `\n <li><button type=\"button\" class=\"opt\" role=\"option\" data-value=\"${esc(o.value)}\"\n aria-selected=\"${this.selected.has(o.value)}\">\n <span class=\"box\" aria-hidden=\"true\"></span>${esc(o.label)}\n </button></li>`).join('')}\n ${filtered.length === 0 ? `<li class=\"empty\">${esc(this.getAttr('no-results', 'Nenhum resultado'))}</li>` : ''}\n </ul>\n </div>\n `);\n\n // Reabre o painel se estava aberto antes do re-render.\n if (wasOpen) this.setAttribute('open', '');\n\n const searchInput = this.root.querySelector<HTMLInputElement>('.search');\n if (searchInput) {\n searchInput.value = search;\n // Preserva foco e posição do cursor entre os re-renders da digitação.\n searchInput.addEventListener('input', () => {\n const pos = searchInput.selectionStart ?? searchInput.value.length;\n this.render();\n const si = this.root.querySelector<HTMLInputElement>('.search');\n if (si) {\n si.focus();\n si.setSelectionRange(pos, pos);\n }\n });\n searchInput.addEventListener('click', (e) => e.stopPropagation());\n }\n\n const trigger = this.root.querySelector<HTMLElement>('.trigger');\n if (!trigger) return;\n\n trigger.addEventListener('click', (e) => {\n if (this.disabled) return;\n if ((e.target as HTMLElement).closest('.clear')) return;\n if ((e.target as HTMLElement).closest('.chip__x')) return;\n this.toggleAttribute('open');\n // Flip vertical: se não cabe abaixo, abre para cima.\n if (this.hasAttr('open')) {\n const r = this.getBoundingClientRect();\n this.toggleAttribute('up', r.bottom + 300 > window.innerHeight && r.top > 300);\n } else {\n this.removeAttribute('up');\n }\n this.render();\n });\n\n // Acessibilidade: Enter/Espaço abrem o painel (span role=button); setas navegam.\n trigger.addEventListener('keydown', (e) => {\n if (this.disabled) return;\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n trigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n return;\n }\n if (e.key === 'Escape') {\n if (this.hasAttr('open')) {\n this.removeAttribute('open');\n this.render();\n this.root.querySelector<HTMLElement>('.trigger')?.focus();\n }\n return;\n }\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n this._navigateOptions(e);\n }\n });\n\n // × de limpar tudo no trigger.\n this.root.querySelector('.clear')?.addEventListener('click', (e) => {\n e.stopPropagation();\n this.selected.clear();\n this.commit();\n });\n\n // \"Limpar tudo\" no cabeçalho do painel.\n this.root.querySelector('.clear-all')?.addEventListener('click', (e) => {\n e.stopPropagation();\n this.selected.clear();\n this.commit();\n });\n\n // Remover chip individual.\n this.root.querySelectorAll<HTMLElement>('.chip').forEach((chip) => {\n chip.querySelector('.chip__x')?.addEventListener('click', (e) => {\n e.stopPropagation();\n this.toggleValue(chip.dataset.value!);\n });\n });\n\n // Alternar opções.\n this.root.querySelectorAll<HTMLElement>('.opt').forEach((opt) => {\n opt.addEventListener('click', () => this.toggleValue(opt.dataset.value!));\n });\n }\n}\n\nexport function defineFxMultiselect(): typeof FxMultiselect {\n return defineElement('fx-multiselect', FxMultiselect);\n}\n\n"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"multiselect.js","sources":["../../../src/components/multiselect/multiselect.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-multiselect> — Seleção múltipla .\n *\n * Form-Associated Custom Element: dentro de um <form> entra no FormData com\n * UMA entrada por valor selecionado (via atributo `name`).\n *\n * Dropdown customizado com painel (overlay), checkbox por item, pesquisa\n * opcional e ação de limpar. Opções via <option> nativos no light DOM.\n *\n * Atributos: values (CSV), searchable, clearable, disabled, placeholder,\n * size (sm|md|lg), no-results.\n * Eventos: `change` e `valuesChange` (composed, detail: { values: string[] }) —\n * `valuesChange` é o two-way binding do Angular [(value)] em seleção múltipla.\n */\nexport class FxMultiselect extends FxFormElement {\n static override styles = css`\n :host {\n display: inline-block;\n vertical-align: middle;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n position: relative;\n /* Largura padrão no HOST: CSS externo, classes e style inline no elemento\n vencem este default naturalmente (regras do documento > :host). */\n width: var(--fx-multiselect-width, 240px);\n }\n .trigger {\n display: inline-flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--fx-space-xs);\n /* Acompanha a largura definida no :host. */\n width: 100%;\n box-sizing: border-box;\n min-height: var(--fx-size-md);\n padding: var(--fx-space-xs) var(--fx-space-md);\n font: inherit;\n /* Altura determinística: a caixa fica no token --fx-size-*. */\n line-height: var(--fx-font-line-height);\n color: var(--fx-text-default);\n background-color: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n cursor: pointer;\n text-align: left;\n transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n /* Área dos chips: encolhe e quebra linha internamente,\n mantendo os ícones sempre dentro do componente. */\n .lead {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--fx-space-xs);\n flex: 1;\n min-width: 0;\n overflow: hidden;\n }\n :host([size='sm']) { width: var(--fx-multiselect-width-sm, 200px); }\n :host([size='sm']) .trigger { min-height: var(--fx-size-sm); }\n :host([size='lg']) { width: var(--fx-multiselect-width-lg, 280px); }\n :host([size='lg']) .trigger { min-height: var(--fx-size-lg); font-size: calc(var(--fx-font-size) + 4px); }\n /* Full width: o host estica até o pai e o trigger acompanha. */\n :host([full]) { display: block; width: 100%; }\n :host([full]) .trigger { width: 100%; }\n /* Validação — borda e brilho JÁ EM REPOUSO (igual ao fx-input); o brilho\n segue o token --fx-effect-error-ring, que acompanha effect.focus-ring. */\n :host([error]) .trigger,\n :host([invalid]) .trigger {\n border-color: var(--fx-color-danger, #dc2626);\n box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n }\n :host([error]) .trigger:focus-visible,\n :host([invalid]) .trigger:focus-visible,\n :host([error][open]) .trigger,\n :host([invalid][open]) .trigger {\n border-color: var(--fx-color-danger, #dc2626);\n box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n }\n :host([success]) .trigger,\n :host([valid]) .trigger {\n border-color: var(--fx-color-success, #16a34a);\n box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n }\n :host([success]) .trigger:focus-visible,\n :host([valid]) .trigger:focus-visible,\n :host([success][open]) .trigger,\n :host([valid][open]) .trigger {\n border-color: var(--fx-color-success, #16a34a);\n box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n }\n .trigger:hover { border-color: var(--fx-border-hover); }\n .trigger:focus-visible {\n outline: none;\n border-color: var(--fx-color-primary);\n box-shadow: var(--fx-effect-focus-ring, none);\n }\n .trigger[aria-expanded='true'] { border-color: var(--fx-color-primary); }\n .placeholder { color: var(--fx-text-muted); }\n .chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent);\n color: var(--fx-color-primary);\n border-radius: var(--fx-radius-sm);\n padding: 2px 6px;\n font-size: calc(var(--fx-font-size) - 2px);\n }\n .chip__x {\n border: none;\n background: none;\n color: inherit;\n cursor: pointer;\n font-size: calc(var(--fx-font-size) - 1px);\n line-height: 1;\n padding: 0;\n }\n .trigger-right {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n color: var(--fx-text-muted);\n }\n .icon-btn {\n border: none;\n background: none;\n color: inherit;\n cursor: pointer;\n font-size: calc(var(--fx-font-size) + 2px);\n line-height: 1;\n padding: 0 2px;\n border-radius: var(--fx-radius-full);\n }\n .icon-btn:hover { color: var(--fx-color-danger); }\n .caret {\n font-size: calc(var(--fx-font-size) - 3px);\n transition: transform var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n :host([open]) .caret { transform: rotate(180deg); }\n\n /* Painel (overlay ) */\n .panel {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n z-index: var(--fx-z-dropdown, 1000);\n width: max(100%, 240px);\n background: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n box-shadow: var(--fx-shadow-lg);\n display: none;\n overflow: hidden;\n }\n :host([up]) .panel {\n top: auto;\n bottom: calc(100% + 4px);\n }\n :host([open]) .panel { display: block; }\n .panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--fx-space-sm);\n padding: var(--fx-space-xs) var(--fx-space-md);\n border-bottom: 1px solid var(--fx-border-default);\n background: var(--fx-surface-surface-hover);\n }\n .count { font-size: calc(var(--fx-font-size) - 2px); color: var(--fx-text-muted); }\n .clear-all {\n border: none;\n background: none;\n font: inherit;\n font-size: calc(var(--fx-font-size) - 2px);\n color: var(--fx-color-primary);\n cursor: pointer;\n padding: 0;\n }\n .clear-all:hover { text-decoration: underline; }\n .search {\n width: 100%;\n box-sizing: border-box;\n font: inherit;\n color: var(--fx-text-default);\n background: var(--fx-surface-background);\n border: none;\n border-bottom: 1px solid var(--fx-border-default);\n padding: var(--fx-space-sm) var(--fx-space-md);\n outline: none;\n }\n .list {\n max-height: 240px;\n overflow-y: auto;\n list-style: none;\n margin: 0;\n padding: var(--fx-space-3xs, 4px);\n }\n .opt {\n display: flex;\n align-items: center;\n gap: var(--fx-space-sm);\n width: 100%;\n padding: var(--fx-space-xs) var(--fx-space-md);\n border: none;\n background: none;\n font: inherit;\n color: var(--fx-text-default);\n cursor: pointer;\n border-radius: var(--fx-radius-sm);\n text-align: left;\n }\n .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, transparent); }\n .opt[aria-selected='true'] {\n background: color-mix(in srgb, var(--fx-color-primary) 16%, transparent);\n color: var(--fx-color-primary);\n font-weight: var(--fx-font-weight);\n }\n /* Checkbox visual */\n .box {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--fx-border-default);\n border-radius: calc(var(--fx-radius-sm) / 2);\n font-size: 11px;\n line-height: 1;\n color: transparent;\n transition:\n background-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .opt[aria-selected='true'] .box {\n background: var(--fx-color-primary);\n border-color: var(--fx-color-primary);\n color: #fff;\n }\n .opt[aria-selected='true'] .box::after { content: '✓'; }\n .empty { padding: var(--fx-space-md); color: var(--fx-text-muted); text-align: center; }\n :host([disabled]) .trigger { opacity: 0.55; cursor: not-allowed; background: var(--fx-surface-surface-hover); }\n `;\n\n static override get observedAttributes(): string[] {\n // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n return [\n 'values',\n 'size',\n 'disabled',\n 'placeholder',\n 'searchable',\n 'clearable',\n 'full',\n 'error',\n 'invalid',\n 'success',\n 'valid',\n ];\n }\n\n private observer?: MutationObserver;\n private docListener?: (e: Event) => void;\n private selected = new Set<string>();\n /** Seleção inicial (para form.reset() restaurar o estado). */\n private _initialValues?: string[];\n\n protected override attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void {\n // `values` pode chegar como atributo (HTML puro) ou propriedade (Vue).\n // Sincroniza o estado interno antes do render da base.\n if (name === 'values') this.selected = new Set(this.values);\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n /** Valores selecionados (CSV no atributo / array na propriedade). */\n get values(): string[] {\n const csv = this.getAttr('values');\n return csv ? csv.split(',').map((v) => v.trim()).filter(Boolean) : [];\n }\n set values(list: string[] | null | undefined) {\n const values = Array.isArray(list) ? list.map(String) : [];\n // O estado interno precisa acompanhar o binding `:values` do Vue — só\n // refletir o atributo deixava a UI desatualizada.\n this.selected = new Set(values);\n const csv = values.join(',');\n if (this.getAttr('values') !== csv) {\n this.setAttribute('values', csv); // observado → render\n } else if (this.isConnected) {\n this.render();\n }\n this.updateFormValue();\n }\n\n /** No FormData do form: uma entrada `name` por valor selecionado. */\n protected override getFormValue(): string | FormData | null {\n const values = this.values;\n if (!this.name || values.length === 0) return null;\n const fd = new FormData();\n values.forEach((v) => fd.append(this.name, v));\n return fd;\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 get searchable(): boolean {\n return this.hasAttr('searchable');\n }\n set searchable(value: boolean) {\n this.toggleAttr('searchable', Boolean(value));\n }\n\n get clearable(): boolean {\n return this.hasAttr('clearable');\n }\n set clearable(value: boolean) {\n this.toggleAttr('clearable', Boolean(value));\n }\n\n get full(): boolean {\n return this.hasAttr('full');\n }\n set full(value: boolean) {\n this.toggleAttr('full', Boolean(value));\n }\n\n private get options(): { value: string; label: string }[] {\n return [...this.querySelectorAll('option')].map((o) => ({\n value: o.getAttribute('value') ?? o.textContent?.trim() ?? '',\n label: o.textContent?.trim() ?? '',\n }));\n }\n\n protected override connectedCallback(): void {\n // Popula a seleção ANTES do primeiro render (super chama render).\n this.selected = new Set(this.values);\n if (!this._initialValues) this._initialValues = [...this.values];\n super.connectedCallback();\n this.observer = new MutationObserver(() => this.render());\n this.observer.observe(this, {\n childList: true,\n subtree: true,\n characterData: true,\n // Vue atualiza `:value`/`:selected` das <option> no light DOM; sem\n // observar atributos o label/valor antigo permanecia em tela.\n attributes: true,\n attributeFilter: ['value', 'selected'],\n });\n this.docListener = (e: Event) => {\n if (!this.hasAttr('open')) return;\n if (e.composedPath().includes(this)) return;\n this.removeAttribute('open');\n this.render();\n };\n document.addEventListener('click', this.docListener);\n }\n\n protected override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.observer?.disconnect();\n if (this.docListener) document.removeEventListener('click', this.docListener);\n }\n\n /** Aplica a seleção, reflete e emite change. */\n private commit(): void {\n // `values` é observado e renderiza quando o CSV muda (uma única vez).\n const next = [...this.selected];\n const same = next.join(',') === this.values.join(',');\n this.values = next;\n if (same && this.isConnected) this.render();\n this.updateFormValue();\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { values: [...this.selected] },\n }),\n );\n // Two-way binding do Angular: [(value)] em selecao multipla -> valuesChange.\n this.dispatchEvent(\n new CustomEvent('valuesChange', {\n bubbles: true,\n composed: true,\n detail: { values: [...this.selected] },\n }),\n );\n }\n\n /** form.reset(): restaura a seleção inicial. */\n override formResetCallback(): void {\n const initial = this._initialValues ?? [];\n // `values` sincroniza `selected` e renderiza (uma vez) quando muda.\n this.values = initial;\n this.updateFormValue();\n }\n\n private toggleValue(value: string): void {\n if (this.selected.has(value)) this.selected.delete(value);\n else this.selected.add(value);\n this.commit();\n }\n\n /** Navegação por teclado entre as opções do listbox (WCAG 2.1.1). */\n private _navigateOptions(e: KeyboardEvent): void {\n e.preventDefault();\n if (!this.hasAttr('open')) {\n this.toggleAttribute('open');\n this.render();\n }\n const opts = Array.from(this.root.querySelectorAll<HTMLButtonElement>('.opt'));\n if (!opts.length) return;\n const current = opts.indexOf(this.root.activeElement as HTMLButtonElement);\n let next = 0;\n if (e.key === 'ArrowDown') next = current === -1 ? 0 : Math.min(current + 1, opts.length - 1);\n else if (e.key === 'ArrowUp') next = current === -1 ? opts.length - 1 : Math.max(current - 1, 0);\n else if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = opts.length - 1;\n opts[next]?.focus();\n }\n\n protected override render(): void {\n const wasOpen = this.hasAttr('open');\n // Preserva o estado do campo de pesquisa entre re-renders.\n const search = this.root.querySelector<HTMLInputElement>('.search')?.value ?? '';\n\n const opts = this.options;\n // Só remove valores órfãos quando as opções já chegaram: com `v-for`\n // (opções depois do valor), limpar aqui apagaria a seleção controlada.\n if (opts.length > 0) {\n for (const v of [...this.selected]) {\n if (!opts.some((o) => o.value === v)) this.selected.delete(v);\n }\n }\n\n const chips = opts.filter((o) => this.selected.has(o.value));\n const placeholder = this.getAttr('placeholder', 'Selecione…');\n const filtered = search\n ? opts.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))\n : opts;\n\n this.setTemplate(`\n <span class=\"trigger\" part=\"trigger\" role=\"button\" tabindex=\"${this.disabled ? -1 : 0}\" aria-haspopup=\"listbox\" aria-expanded=\"${wasOpen}\" aria-disabled=\"${this.disabled}\">\n <span class=\"lead\">\n ${\n chips.length\n ? chips.map((c) => `\n <span class=\"chip\" data-value=\"${esc(c.value)}\">\n ${esc(c.label)}\n <span class=\"chip__x\" role=\"button\" aria-label=\"Remover ${esc(c.label)}\">×</span>\n </span>`).join('')\n : `<span class=\"placeholder\">${esc(placeholder)}</span>`\n }\n </span>\n <span class=\"trigger-right\">\n ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"icon-btn clear\" part=\"clear\" aria-label=\"Limpar seleção\">×</button>' : ''}\n <span class=\"caret\">▼</span>\n </span>\n </span>\n <div class=\"panel\" part=\"panel\" role=\"listbox\" aria-multiselectable=\"true\">\n <div class=\"panel-header\">\n <span class=\"count\">${chips.length} selecionado${chips.length === 1 ? '' : 's'}</span>\n ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"clear-all\">Limpar tudo</button>' : ''}\n </div>\n ${this.hasAttr('searchable') ? `<input class=\"search\" part=\"search\" type=\"text\" placeholder=\"${esc(this.getAttr('search-placeholder', 'Pesquisar…'))}\">` : ''}\n <ul class=\"list\">\n ${filtered.map((o) => `\n <li><button type=\"button\" class=\"opt\" role=\"option\" data-value=\"${esc(o.value)}\"\n aria-selected=\"${this.selected.has(o.value)}\">\n <span class=\"box\" aria-hidden=\"true\"></span>${esc(o.label)}\n </button></li>`).join('')}\n ${filtered.length === 0 ? `<li class=\"empty\">${esc(this.getAttr('no-results', 'Nenhum resultado'))}</li>` : ''}\n </ul>\n </div>\n `);\n\n // Reabre o painel se estava aberto antes do re-render.\n if (wasOpen) this.setAttribute('open', '');\n\n const searchInput = this.root.querySelector<HTMLInputElement>('.search');\n if (searchInput) {\n searchInput.value = search;\n // Preserva foco e posição do cursor entre os re-renders da digitação.\n searchInput.addEventListener('input', () => {\n const pos = searchInput.selectionStart ?? searchInput.value.length;\n this.render();\n const si = this.root.querySelector<HTMLInputElement>('.search');\n if (si) {\n si.focus();\n si.setSelectionRange(pos, pos);\n }\n });\n searchInput.addEventListener('click', (e) => e.stopPropagation());\n }\n\n const trigger = this.root.querySelector<HTMLElement>('.trigger');\n if (!trigger) return;\n\n trigger.addEventListener('click', (e) => {\n if (this.disabled) return;\n if ((e.target as HTMLElement).closest('.clear')) return;\n if ((e.target as HTMLElement).closest('.chip__x')) return;\n this.toggleAttribute('open');\n // Flip vertical: se não cabe abaixo, abre para cima.\n if (this.hasAttr('open')) {\n const r = this.getBoundingClientRect();\n this.toggleAttribute('up', r.bottom + 300 > window.innerHeight && r.top > 300);\n } else {\n this.removeAttribute('up');\n }\n this.render();\n });\n\n // Acessibilidade: Enter/Espaço abrem o painel (span role=button); setas navegam.\n trigger.addEventListener('keydown', (e) => {\n if (this.disabled) return;\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n trigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n return;\n }\n if (e.key === 'Escape') {\n if (this.hasAttr('open')) {\n this.removeAttribute('open');\n this.render();\n this.root.querySelector<HTMLElement>('.trigger')?.focus();\n }\n return;\n }\n if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {\n this._navigateOptions(e);\n }\n });\n\n // × de limpar tudo no trigger.\n this.root.querySelector('.clear')?.addEventListener('click', (e) => {\n e.stopPropagation();\n this.selected.clear();\n this.commit();\n });\n\n // \"Limpar tudo\" no cabeçalho do painel.\n this.root.querySelector('.clear-all')?.addEventListener('click', (e) => {\n e.stopPropagation();\n this.selected.clear();\n this.commit();\n });\n\n // Remover chip individual.\n this.root.querySelectorAll<HTMLElement>('.chip').forEach((chip) => {\n chip.querySelector('.chip__x')?.addEventListener('click', (e) => {\n e.stopPropagation();\n this.toggleValue(chip.dataset.value!);\n });\n });\n\n // Alternar opções.\n this.root.querySelectorAll<HTMLElement>('.opt').forEach((opt) => {\n opt.addEventListener('click', () => this.toggleValue(opt.dataset.value!));\n });\n }\n}\n\nexport function defineFxMultiselect(): typeof FxMultiselect {\n return defineElement('fx-multiselect', FxMultiselect);\n}\n\n"],"names":[],"mappings":"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"}
@@ -20,6 +20,13 @@ export declare class FxOrderList extends FxElement {
20
20
  get data(): OrderListItem[];
21
21
  private _data;
22
22
  private _filteredData;
23
+ /**
24
+ * Alias de `data` para o binding do Vue/React: `data` colide com a
25
+ * tipagem nativa de atributos HTML (`dataset`/`data-*`) e não reflete em
26
+ * atributo. `items` funciona como propriedade e como atributo JSON.
27
+ */
28
+ get items(): OrderListItem[];
29
+ set items(value: OrderListItem[]);
23
30
  set selection(value: OrderListItem[]);
24
31
  get selection(): OrderListItem[];
25
32
  private _selection;
@@ -1 +1 @@
1
- {"version":3,"file":"orderlist.d.ts","sourceRoot":"","sources":["../../../src/components/orderlist/orderlist.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"orderlist.d.ts","sourceRoot":"","sources":["../../../src/components/orderlist/orderlist.ts"],"names":[],"mappings":"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"}
@@ -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":"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"}
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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"}