@wrrdev/fenix-ui 1.0.14 → 1.0.15

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 +332 -332
  2. package/dist/components/accordion/accordion.d.ts +1 -0
  3. package/dist/components/accordion/accordion.d.ts.map +1 -1
  4. package/dist/components/accordion/accordion.js +18 -13
  5. package/dist/components/accordion/accordion.js.map +1 -1
  6. package/dist/components/accordion/index.js.map +1 -1
  7. package/dist/components/alert/alert.d.ts.map +1 -1
  8. package/dist/components/alert/alert.js +2 -1
  9. package/dist/components/alert/alert.js.map +1 -1
  10. package/dist/components/alert/index.js.map +1 -1
  11. package/dist/components/autocomplete/autocomplete.d.ts +3 -0
  12. package/dist/components/autocomplete/autocomplete.d.ts.map +1 -1
  13. package/dist/components/autocomplete/autocomplete.js +28 -4
  14. package/dist/components/autocomplete/autocomplete.js.map +1 -1
  15. package/dist/components/autocomplete/index.js.map +1 -1
  16. package/dist/components/datepicker/datepicker.d.ts.map +1 -1
  17. package/dist/components/datepicker/datepicker.js +7 -6
  18. package/dist/components/datepicker/datepicker.js.map +1 -1
  19. package/dist/components/dialog/dialog.d.ts +4 -0
  20. package/dist/components/dialog/dialog.d.ts.map +1 -1
  21. package/dist/components/dialog/dialog.js +42 -4
  22. package/dist/components/dialog/dialog.js.map +1 -1
  23. package/dist/components/dialog/index.js.map +1 -1
  24. package/dist/components/drawer/drawer.d.ts +5 -0
  25. package/dist/components/drawer/drawer.d.ts.map +1 -1
  26. package/dist/components/drawer/drawer.js +49 -15
  27. package/dist/components/drawer/drawer.js.map +1 -1
  28. package/dist/components/dropdown/dropdown.d.ts +5 -0
  29. package/dist/components/dropdown/dropdown.d.ts.map +1 -1
  30. package/dist/components/dropdown/dropdown.js +34 -10
  31. package/dist/components/dropdown/dropdown.js.map +1 -1
  32. package/dist/components/input/input.d.ts.map +1 -1
  33. package/dist/components/input/input.js +4 -3
  34. package/dist/components/input/input.js.map +1 -1
  35. package/dist/components/knob/index.js.map +1 -1
  36. package/dist/components/knob/knob.d.ts +2 -0
  37. package/dist/components/knob/knob.d.ts.map +1 -1
  38. package/dist/components/knob/knob.js +15 -3
  39. package/dist/components/knob/knob.js.map +1 -1
  40. package/dist/components/multiselect/multiselect.d.ts +2 -0
  41. package/dist/components/multiselect/multiselect.d.ts.map +1 -1
  42. package/dist/components/multiselect/multiselect.js +38 -8
  43. package/dist/components/multiselect/multiselect.js.map +1 -1
  44. package/dist/components/orderlist/orderlist.d.ts.map +1 -1
  45. package/dist/components/orderlist/orderlist.js +1 -3
  46. package/dist/components/orderlist/orderlist.js.map +1 -1
  47. package/dist/components/pagination/index.js.map +1 -1
  48. package/dist/components/pagination/pagination.d.ts +1 -0
  49. package/dist/components/pagination/pagination.d.ts.map +1 -1
  50. package/dist/components/pagination/pagination.js +19 -8
  51. package/dist/components/pagination/pagination.js.map +1 -1
  52. package/dist/components/picklist/picklist.d.ts.map +1 -1
  53. package/dist/components/picklist/picklist.js +1 -3
  54. package/dist/components/picklist/picklist.js.map +1 -1
  55. package/dist/components/progress/index.js.map +1 -1
  56. package/dist/components/progress/progress.d.ts.map +1 -1
  57. package/dist/components/progress/progress.js +2 -1
  58. package/dist/components/progress/progress.js.map +1 -1
  59. package/dist/components/radio/radio.js +1 -1
  60. package/dist/components/radio/radio.js.map +1 -1
  61. package/dist/components/select/select.d.ts +2 -0
  62. package/dist/components/select/select.d.ts.map +1 -1
  63. package/dist/components/select/select.js +36 -5
  64. package/dist/components/select/select.js.map +1 -1
  65. package/dist/components/skeleton/index.js.map +1 -1
  66. package/dist/components/skeleton/skeleton.d.ts +2 -0
  67. package/dist/components/skeleton/skeleton.d.ts.map +1 -1
  68. package/dist/components/skeleton/skeleton.js +7 -2
  69. package/dist/components/skeleton/skeleton.js.map +1 -1
  70. package/dist/components/table/expr.d.ts +38 -0
  71. package/dist/components/table/expr.d.ts.map +1 -0
  72. package/dist/components/table/expr.js +429 -0
  73. package/dist/components/table/expr.js.map +1 -0
  74. package/dist/components/table/table.d.ts +26 -8
  75. package/dist/components/table/table.d.ts.map +1 -1
  76. package/dist/components/table/table.js +402 -140
  77. package/dist/components/table/table.js.map +1 -1
  78. package/dist/components/tabs/tabs.d.ts.map +1 -1
  79. package/dist/components/tabs/tabs.js +3 -2
  80. package/dist/components/tabs/tabs.js.map +1 -1
  81. package/dist/components/textarea/index.js.map +1 -1
  82. package/dist/components/textarea/textarea.d.ts.map +1 -1
  83. package/dist/components/textarea/textarea.js +4 -3
  84. package/dist/components/textarea/textarea.js.map +1 -1
  85. package/dist/components/toast/index.js.map +1 -1
  86. package/dist/components/tooltip/directive.js.map +1 -1
  87. package/dist/components/tooltip/index.js.map +1 -1
  88. package/dist/components/tooltip/tooltip.d.ts.map +1 -1
  89. package/dist/components/tooltip/tooltip.js +2 -1
  90. package/dist/components/tooltip/tooltip.js.map +1 -1
  91. package/dist/core/jsx.js.map +1 -1
  92. package/dist/core/presets.js.map +1 -1
  93. package/dist/core/sanitize.d.ts +36 -0
  94. package/dist/core/sanitize.d.ts.map +1 -0
  95. package/dist/core/sanitize.js +37 -0
  96. package/dist/core/sanitize.js.map +1 -0
  97. package/dist/core/tokens.js.map +1 -1
  98. package/dist/core/vue.js.map +1 -1
  99. package/dist/docs/app.d.ts.map +1 -1
  100. package/dist/docs/componentes/table.doc.d.ts.map +1 -1
  101. package/dist/fenix-ui.esm.js.map +1 -1
  102. package/dist/fenix-ui.umd.min.js +339 -208
  103. package/dist/fenix-ui2.esm.js +1156 -243
  104. package/dist/fenix-ui2.esm.js.map +1 -1
  105. package/dist/fenix-ui3.esm.js.map +1 -1
  106. package/dist/index.d.ts +2 -1
  107. package/dist/index.d.ts.map +1 -1
  108. package/dist/index.js +4 -0
  109. package/dist/index.js.map +1 -1
  110. package/dist/plugins/auto-import.js.map +1 -1
  111. package/package.json +212 -212
@@ -1 +1 @@
1
- {"version":3,"file":"knob.js","sources":["../../../src/components/knob/knob.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\r\nimport { css } from '../../core/css';\r\nimport { defineElement } from '../../core/define';\r\n\r\n/**\r\n * <fx-knob> - Controle giratorio circular para ajuste de valor.\r\n *\r\n * Similar ao Knob do PrimeVue, permite ajustar um valor arrastando o mouse\r\n * ou usando as setas do teclado. Exibe um arco de progresso circular com\r\n * o valor central configuravel via valueTemplate.\r\n *\r\n * Atributos: value, min, max, step, size, strokeWidth, valueColor, rangeColor,\r\n * readonly, disabled, valueTemplate.\r\n * Evento: `change` (composed, detail: { value }).\r\n */\r\nexport class FxKnob extends FxElement {\r\n static override styles = css`\r\n :host {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-family: var(--fx-font-family);\r\n font-size: var(--fx-font-size);\r\n --_size: 100px;\r\n --_stroke-width: 8px;\r\n --_value-color: var(--fx-color-primary);\r\n --_range-color: var(--fx-border-default);\r\n }\r\n :host([size='sm']) { --_size: 60px; }\r\n :host([size='lg']) { --_size: 140px; }\r\n .knob {\r\n position: relative;\r\n width: var(--_size);\r\n height: var(--_size);\r\n cursor: pointer;\r\n user-select: none;\r\n touch-action: none;\r\n }\r\n :host([readonly]) .knob,\r\n :host([disabled]) .knob {\r\n cursor: default;\r\n pointer-events: none;\r\n }\r\n :host([disabled]) .knob {\r\n opacity: 0.55;\r\n }\r\n svg {\r\n width: 100%;\r\n height: 100%;\r\n transform: rotate(-90deg);\r\n }\r\n .track {\r\n fill: none;\r\n stroke: var(--_range-color);\r\n stroke-width: var(--_stroke-width);\r\n }\r\n .value {\r\n fill: none;\r\n stroke: var(--_value-color);\r\n stroke-width: var(--_stroke-width);\r\n stroke-linecap: round;\r\n transition: stroke-dashoffset var(--fx-motion-duration-fast) var(--fx-motion-easing);\r\n }\r\n .label {\r\n position: absolute;\r\n inset: 0;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-weight: 600;\r\n color: var(--fx-text-default);\r\n pointer-events: none;\r\n }\r\n :host([size='sm']) .label { font-size: 11px; }\r\n :host([size='md']) .label { font-size: 14px; }\r\n :host([size='lg']) .label { font-size: 18px; }\r\n .knob:focus-visible {\r\n outline: none;\r\n }\r\n .knob:focus-visible svg {\r\n filter: drop-shadow(var(--fx-effect-focus-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)));\r\n }\r\n `;\r\n\r\n static override get observedAttributes(): string[] {\r\n return [\r\n 'value',\r\n 'min',\r\n 'max',\r\n 'step',\r\n 'size',\r\n 'stroke-width',\r\n 'value-color',\r\n 'range-color',\r\n 'readonly',\r\n 'disabled',\r\n 'value-template',\r\n ];\r\n }\r\n\r\n get value(): number {\r\n return this.clampValue(Number(this.getAttr('value', '0')) || 0);\r\n }\r\n set value(v: number) {\r\n if (this.readonly || this.disabled) return;\r\n const clamped = this.clampValue(v);\r\n const current = this.clampValue(Number(this.getAttr('value', '0')) || 0);\r\n if (clamped !== current) {\r\n this.setAttribute('value', String(clamped));\r\n this.dispatchEvent(\r\n new CustomEvent('change', {\r\n bubbles: true,\r\n composed: true,\r\n detail: { value: clamped },\r\n }),\r\n );\r\n }\r\n }\r\n\r\n get min(): number {\r\n return Number(this.getAttr('min', '0')) || 0;\r\n }\r\n set min(v: number) {\r\n this.setAttribute('min', String(v));\r\n }\r\n\r\n get max(): number {\r\n return Number(this.getAttr('max', '100')) || 100;\r\n }\r\n set max(v: number) {\r\n this.setAttribute('max', String(v));\r\n }\r\n\r\n get step(): number {\r\n return Number(this.getAttr('step', '1')) || 1;\r\n }\r\n set step(v: number) {\r\n this.setAttribute('step', String(v));\r\n }\r\n\r\n get size(): string {\r\n const s = this.getAttr('size', 'md');\r\n return s === 'sm' || s === 'lg' ? s : 'md';\r\n }\r\n set size(v: string) {\r\n this.setAttribute('size', v);\r\n }\r\n\r\n get strokeWidth(): number {\r\n return Number(this.getAttr('stroke-width', '8')) || 8;\r\n }\r\n set strokeWidth(v: number) {\r\n this.setAttribute('stroke-width', String(v));\r\n }\r\n\r\n get valueColor(): string {\r\n return this.getAttr('value-color', '');\r\n }\r\n set valueColor(v: string) {\r\n this.setAttribute('value-color', v);\r\n }\r\n\r\n get rangeColor(): string {\r\n return this.getAttr('range-color', '');\r\n }\r\n set rangeColor(v: string) {\r\n this.setAttribute('range-color', v);\r\n }\r\n\r\n get readonly(): boolean {\r\n return this.hasAttr('readonly');\r\n }\r\n set readonly(v: boolean) {\r\n this.toggleAttr('readonly', Boolean(v));\r\n }\r\n\r\n get disabled(): boolean {\r\n return this.hasAttr('disabled');\r\n }\r\n set disabled(v: boolean) {\r\n this.toggleAttr('disabled', Boolean(v));\r\n }\r\n\r\n get valueTemplate(): string {\r\n return this.getAttr('value-template', '{value}');\r\n }\r\n set valueTemplate(v: string) {\r\n this.setAttribute('value-template', v);\r\n }\r\n\r\n private _isDragging = false;\r\n private _startY = 0;\r\n private _startValue = 0;\r\n\r\n protected override render(): void {\r\n const min = this.min;\r\n const max = this.max;\r\n const value = this.clampValue(this.value);\r\n const range = max - min;\r\n const pct = range > 0 ? (value - min) / range : 0;\r\n\r\n const sizeNum = this.getSizeNum();\r\n const strokeW = this.strokeWidth;\r\n const radius = (sizeNum - strokeW) / 2;\r\n const circumference = 2 * Math.PI * radius;\r\n const offset = circumference * (1 - pct);\r\n\r\n const valueColorStyle = this.valueColor ? `--_value-color: ${this.valueColor};` : '';\r\n const rangeColorStyle = this.rangeColor ? `--_range-color: ${this.rangeColor};` : '';\r\n\r\n const displayValue = this.valueTemplate.replace('{value}', String(Math.round(value)));\r\n\r\n this.setTemplate(`\r\n <div class=\"knob\" part=\"knob\" tabindex=\"${this.disabled ? '-1' : '0'}\"\r\n role=\"slider\" aria-valuenow=\"${value}\" aria-valuemin=\"${min}\" aria-valuemax=\"${max}\"\r\n aria-readonly=\"${this.readonly}\" aria-disabled=\"${this.disabled}\"\r\n style=\"${valueColorStyle}${rangeColorStyle}\">\r\n <svg viewBox=\"0 0 ${sizeNum} ${sizeNum}\" part=\"svg\">\r\n <circle class=\"track\" part=\"track\"\r\n cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\" />\r\n <circle class=\"value\" part=\"value\"\r\n cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\"\r\n stroke-dasharray=\"${circumference}\"\r\n stroke-dashoffset=\"${offset}\" />\r\n </svg>\r\n <div class=\"label\" part=\"label\">${displayValue}</div>\r\n </div>\r\n `);\r\n\r\n this.attachListeners();\r\n }\r\n\r\n private getSizeNum(): number {\r\n const s = this.size;\r\n if (s === 'sm') return 60;\r\n if (s === 'lg') return 140;\r\n return 100;\r\n }\r\n\r\n private clampValue(v: number): number {\r\n const min = this.min;\r\n const max = this.max;\r\n const step = this.step;\r\n let clamped = Math.min(max, Math.max(min, v));\r\n if (step > 0) {\r\n clamped = Math.round((clamped - min) / step) * step + min;\r\n clamped = Math.min(max, Math.max(min, clamped));\r\n }\r\n return clamped;\r\n }\r\n\r\n private emitChange(newValue: number): void {\r\n const clamped = this.clampValue(newValue);\r\n if (clamped !== this.value) {\r\n this.value = clamped;\r\n this.dispatchEvent(\r\n new CustomEvent('change', {\r\n bubbles: true,\r\n composed: true,\r\n detail: { value: clamped },\r\n }),\r\n );\r\n }\r\n }\r\n\r\n private attachListeners(): void {\r\n const knob = this.root.querySelector<HTMLElement>('.knob');\r\n if (!knob) return;\r\n\r\n knob.addEventListener('mousedown', (e: MouseEvent) => {\r\n if (this.readonly || this.disabled) return;\r\n e.preventDefault();\r\n this._isDragging = true;\r\n this._startY = e.clientY;\r\n this._startValue = this.value;\r\n knob.focus();\r\n document.addEventListener('mousemove', this._onMouseMove);\r\n document.addEventListener('mouseup', this._onMouseUp);\r\n });\r\n\r\n knob.addEventListener('touchstart', (e: TouchEvent) => {\r\n if (this.readonly || this.disabled) return;\r\n e.preventDefault();\r\n this._isDragging = true;\r\n this._startY = e.touches[0].clientY;\r\n this._startValue = this.value;\r\n knob.focus();\r\n }, { passive: false });\r\n\r\n knob.addEventListener('touchmove', (e: TouchEvent) => {\r\n if (!this._isDragging || this.readonly || this.disabled) return;\r\n e.preventDefault();\r\n const deltaY = this._startY - e.touches[0].clientY;\r\n const sensitivity = (this.max - this.min) / 100;\r\n this.emitChange(this._startValue + deltaY * sensitivity);\r\n }, { passive: false });\r\n\r\n knob.addEventListener('touchend', () => {\r\n this._isDragging = false;\r\n });\r\n\r\n knob.addEventListener('keydown', (e: KeyboardEvent) => {\r\n if (this.readonly || this.disabled) return;\r\n const step = this.step;\r\n switch (e.key) {\r\n case 'ArrowUp':\r\n case 'ArrowRight':\r\n e.preventDefault();\r\n this.emitChange(this.value + step);\r\n break;\r\n case 'ArrowDown':\r\n case 'ArrowLeft':\r\n e.preventDefault();\r\n this.emitChange(this.value - step);\r\n break;\r\n case 'Home':\r\n e.preventDefault();\r\n this.emitChange(this.min);\r\n break;\r\n case 'End':\r\n e.preventDefault();\r\n this.emitChange(this.max);\r\n break;\r\n case 'PageUp':\r\n e.preventDefault();\r\n this.emitChange(this.value + step * 10);\r\n break;\r\n case 'PageDown':\r\n e.preventDefault();\r\n this.emitChange(this.value - step * 10);\r\n break;\r\n }\r\n });\r\n }\r\n\r\n private _onMouseMove = (e: MouseEvent): void => {\r\n if (!this._isDragging) return;\r\n const deltaY = this._startY - e.clientY;\r\n const sensitivity = (this.max - this.min) / 100;\r\n this.emitChange(this._startValue + deltaY * sensitivity);\r\n };\r\n\r\n private _onMouseUp = (): void => {\r\n this._isDragging = false;\r\n document.removeEventListener('mousemove', this._onMouseMove);\r\n document.removeEventListener('mouseup', this._onMouseUp);\r\n };\r\n\r\n protected override disconnectedCallback(): void {\r\n document.removeEventListener('mousemove', this._onMouseMove);\r\n document.removeEventListener('mouseup', this._onMouseUp);\r\n super.disconnectedCallback();\r\n }\r\n}\r\n\r\nexport function defineFxKnob(): typeof FxKnob {\r\n return defineElement('fx-knob', FxKnob);\r\n}"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"knob.js","sources":["../../../src/components/knob/knob.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/**\n * <fx-knob> - Controle giratorio circular para ajuste de valor.\n *\n * Similar ao Knob do PrimeVue, permite ajustar um valor arrastando o mouse\n * ou usando as setas do teclado. Exibe um arco de progresso circular com\n * o valor central configuravel via valueTemplate.\n *\n * Atributos: value, min, max, step, size, strokeWidth, valueColor, rangeColor,\n * readonly, disabled, valueTemplate.\n * Evento: `change` (composed, detail: { value }).\n */\nexport class FxKnob extends FxElement {\n static override styles = css`\n :host {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n --_size: 100px;\n --_stroke-width: 8px;\n --_value-color: var(--fx-color-primary);\n --_range-color: var(--fx-border-default);\n }\n :host([size='sm']) { --_size: 60px; }\n :host([size='lg']) { --_size: 140px; }\n .knob {\n position: relative;\n width: var(--_size);\n height: var(--_size);\n cursor: pointer;\n user-select: none;\n touch-action: none;\n }\n :host([readonly]) .knob,\n :host([disabled]) .knob {\n cursor: default;\n pointer-events: none;\n }\n :host([disabled]) .knob {\n opacity: 0.55;\n }\n svg {\n width: 100%;\n height: 100%;\n transform: rotate(-90deg);\n }\n .track {\n fill: none;\n stroke: var(--_range-color);\n stroke-width: var(--_stroke-width);\n }\n .value {\n fill: none;\n stroke: var(--_value-color);\n stroke-width: var(--_stroke-width);\n stroke-linecap: round;\n transition: stroke-dashoffset var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .label {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 600;\n color: var(--fx-text-default);\n pointer-events: none;\n }\n :host([size='sm']) .label { font-size: 11px; }\n :host([size='md']) .label { font-size: 14px; }\n :host([size='lg']) .label { font-size: 18px; }\n .knob:focus-visible {\n outline: none;\n }\n .knob:focus-visible svg {\n filter: drop-shadow(var(--fx-effect-focus-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)));\n }\n `;\n\n static override get observedAttributes(): string[] {\n return [\n 'value',\n 'min',\n 'max',\n 'step',\n 'size',\n 'stroke-width',\n 'value-color',\n 'range-color',\n 'readonly',\n 'disabled',\n 'value-template',\n ];\n }\n\n get value(): number {\n return this.clampValue(Number(this.getAttr('value', '0')) || 0);\n }\n set value(v: number) {\n if (this.readonly || this.disabled) return;\n const clamped = this.clampValue(v);\n const current = this.clampValue(Number(this.getAttr('value', '0')) || 0);\n if (clamped !== current) {\n this.setAttribute('value', String(clamped));\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { value: clamped },\n }),\n );\n }\n }\n\n get min(): number {\n return Number(this.getAttr('min', '0')) || 0;\n }\n set min(v: number) {\n this.setAttribute('min', String(v));\n }\n\n get max(): number {\n return Number(this.getAttr('max', '100')) || 100;\n }\n set max(v: number) {\n this.setAttribute('max', String(v));\n }\n\n get step(): number {\n return Number(this.getAttr('step', '1')) || 1;\n }\n set step(v: number) {\n this.setAttribute('step', String(v));\n }\n\n get size(): string {\n const s = this.getAttr('size', 'md');\n return s === 'sm' || s === 'lg' ? s : 'md';\n }\n set size(v: string) {\n this.setAttribute('size', v);\n }\n\n get strokeWidth(): number {\n return Number(this.getAttr('stroke-width', '8')) || 8;\n }\n set strokeWidth(v: number) {\n this.setAttribute('stroke-width', String(v));\n }\n\n get valueColor(): string {\n return this.getAttr('value-color', '');\n }\n set valueColor(v: string) {\n this.setAttribute('value-color', v);\n }\n\n get rangeColor(): string {\n return this.getAttr('range-color', '');\n }\n set rangeColor(v: string) {\n this.setAttribute('range-color', v);\n }\n\n get readonly(): boolean {\n return this.hasAttr('readonly');\n }\n set readonly(v: boolean) {\n this.toggleAttr('readonly', Boolean(v));\n }\n\n get disabled(): boolean {\n return this.hasAttr('disabled');\n }\n set disabled(v: boolean) {\n this.toggleAttr('disabled', Boolean(v));\n }\n\n get valueTemplate(): string {\n return this.getAttr('value-template', '{value}');\n }\n set valueTemplate(v: string) {\n this.setAttribute('value-template', v);\n }\n\n private _isDragging = false;\n private _startY = 0;\n private _startValue = 0;\n\n protected override render(): void {\n const min = this.min;\n const max = this.max;\n const value = this.clampValue(this.value);\n const range = max - min;\n const pct = range > 0 ? (value - min) / range : 0;\n\n const sizeNum = this.getSizeNum();\n const strokeW = this.strokeWidth;\n const radius = (sizeNum - strokeW) / 2;\n const circumference = 2 * Math.PI * radius;\n const offset = circumference * (1 - pct);\n\n const vc = this.valueColor ? this.safeColor(this.valueColor) : '';\n const rc = this.rangeColor ? this.safeColor(this.rangeColor) : '';\n const valueColorStyle = vc ? `--_value-color: ${vc};` : '';\n const rangeColorStyle = rc ? `--_range-color: ${rc};` : '';\n\n const displayValue = this.valueTemplate.replace('{value}', String(Math.round(value)));\n\n this.setTemplate(`\n <div class=\"knob\" part=\"knob\" tabindex=\"${this.disabled ? '-1' : '0'}\"\n role=\"slider\" aria-valuenow=\"${value}\" aria-valuemin=\"${min}\" aria-valuemax=\"${max}\"\n aria-readonly=\"${this.readonly}\" aria-disabled=\"${this.disabled}\"\n style=\"${valueColorStyle}${rangeColorStyle}\">\n <svg viewBox=\"0 0 ${sizeNum} ${sizeNum}\" part=\"svg\">\n <circle class=\"track\" part=\"track\"\n cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\" />\n <circle class=\"value\" part=\"value\"\n cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\"\n stroke-dasharray=\"${circumference}\"\n stroke-dashoffset=\"${offset}\" />\n </svg>\n <div class=\"label\" part=\"label\">${esc(displayValue)}</div>\n </div>\n `);\n\n this.attachListeners();\n }\n\n private getSizeNum(): number {\n const s = this.size;\n if (s === 'sm') return 60;\n if (s === 'lg') return 140;\n return 100;\n }\n\n /** Valida um valor de cor CSS, retornando-o seguro ou vazio. */\n private safeColor(value: string): string {\n const v = value.trim();\n if (/^#[0-9a-fA-F]{3,8}$/.test(v)) return v;\n if (/^(rgb|rgba|hsl|hsla)\\([\\d\\s.,%()]+\\)$/i.test(v)) return v;\n if (/^var\\(--[\\w-]+(,\\s*[^)]*)?\\)$/.test(v)) return v;\n if (/^[a-zA-Z]+$/.test(v)) return v;\n return '';\n }\n\n private clampValue(v: number): number {\n const min = this.min;\n const max = this.max;\n const step = this.step;\n let clamped = Math.min(max, Math.max(min, v));\n if (step > 0) {\n clamped = Math.round((clamped - min) / step) * step + min;\n clamped = Math.min(max, Math.max(min, clamped));\n }\n return clamped;\n }\n\n private emitChange(newValue: number): void {\n const clamped = this.clampValue(newValue);\n if (clamped !== this.value) {\n this.value = clamped;\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { value: clamped },\n }),\n );\n }\n }\n\n private attachListeners(): void {\n const knob = this.root.querySelector<HTMLElement>('.knob');\n if (!knob) return;\n\n knob.addEventListener('mousedown', (e: MouseEvent) => {\n if (this.readonly || this.disabled) return;\n e.preventDefault();\n this._isDragging = true;\n this._startY = e.clientY;\n this._startValue = this.value;\n knob.focus();\n document.addEventListener('mousemove', this._onMouseMove);\n document.addEventListener('mouseup', this._onMouseUp);\n });\n\n knob.addEventListener('touchstart', (e: TouchEvent) => {\n if (this.readonly || this.disabled) return;\n e.preventDefault();\n this._isDragging = true;\n this._startY = e.touches[0].clientY;\n this._startValue = this.value;\n knob.focus();\n }, { passive: false });\n\n knob.addEventListener('touchmove', (e: TouchEvent) => {\n if (!this._isDragging || this.readonly || this.disabled) return;\n e.preventDefault();\n const deltaY = this._startY - e.touches[0].clientY;\n const sensitivity = (this.max - this.min) / 100;\n this.emitChange(this._startValue + deltaY * sensitivity);\n }, { passive: false });\n\n knob.addEventListener('touchend', () => {\n this._isDragging = false;\n });\n\n knob.addEventListener('keydown', (e: KeyboardEvent) => {\n if (this.readonly || this.disabled) return;\n const step = this.step;\n switch (e.key) {\n case 'ArrowUp':\n case 'ArrowRight':\n e.preventDefault();\n this.emitChange(this.value + step);\n break;\n case 'ArrowDown':\n case 'ArrowLeft':\n e.preventDefault();\n this.emitChange(this.value - step);\n break;\n case 'Home':\n e.preventDefault();\n this.emitChange(this.min);\n break;\n case 'End':\n e.preventDefault();\n this.emitChange(this.max);\n break;\n case 'PageUp':\n e.preventDefault();\n this.emitChange(this.value + step * 10);\n break;\n case 'PageDown':\n e.preventDefault();\n this.emitChange(this.value - step * 10);\n break;\n }\n });\n }\n\n private _onMouseMove = (e: MouseEvent): void => {\n if (!this._isDragging) return;\n const deltaY = this._startY - e.clientY;\n const sensitivity = (this.max - this.min) / 100;\n this.emitChange(this._startValue + deltaY * sensitivity);\n };\n\n private _onMouseUp = (): void => {\n this._isDragging = false;\n document.removeEventListener('mousemove', this._onMouseMove);\n document.removeEventListener('mouseup', this._onMouseUp);\n };\n\n protected override disconnectedCallback(): void {\n document.removeEventListener('mousemove', this._onMouseMove);\n document.removeEventListener('mouseup', this._onMouseUp);\n super.disconnectedCallback();\n }\n}\n\nexport function defineFxKnob(): typeof FxKnob {\n return defineElement('fx-knob', FxKnob);\n}"],"names":[],"mappings":"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"}
@@ -26,6 +26,8 @@ export declare class FxMultiselect extends FxElement {
26
26
  /** Aplica a seleção, reflete e emite change. */
27
27
  private commit;
28
28
  private toggleValue;
29
+ /** Navegação por teclado entre as opções do listbox (WCAG 2.1.1). */
30
+ private _navigateOptions;
29
31
  protected render(): void;
30
32
  }
31
33
  export declare function defineFxMultiselect(): typeof FxMultiselect;
@@ -1 +1 @@
1
- {"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/components/multiselect/multiselect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,SAAS;IAC1C,OAAgB,MAAM,SAuNpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,OAAO,CAAC,QAAQ,CAAC,CAAmB;IACpC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAAqB;IAErC,qEAAqE;IACrE,IAAI,MAAM,IAAI,MAAM,EAAE,CAGrB;IACD,IAAI,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,EAExB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,OAAO,KAAK,OAAO,GAKlB;cAEkB,iBAAiB,IAAI,IAAI;cAezB,oBAAoB,IAAI,IAAI;IAM/C,gDAAgD;IAChD,OAAO,CAAC,MAAM;IAYd,OAAO,CAAC,WAAW;cAMA,MAAM,IAAI,IAAI;CA4HlC;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,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C;;;;;;;;;GASG;AACH,qBAAa,aAAc,SAAQ,SAAS;IAC1C,OAAgB,MAAM,SAuNpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,OAAO,CAAC,QAAQ,CAAC,CAAmB;IACpC,OAAO,CAAC,WAAW,CAAC,CAAqB;IACzC,OAAO,CAAC,QAAQ,CAAqB;IAErC,qEAAqE;IACrE,IAAI,MAAM,IAAI,MAAM,EAAE,CAGrB;IACD,IAAI,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,EAExB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,OAAO,KAAK,OAAO,GAKlB;cAEkB,iBAAiB,IAAI,IAAI;cAezB,oBAAoB,IAAI,IAAI;IAM/C,gDAAgD;IAChD,OAAO,CAAC,MAAM;IAYd,OAAO,CAAC,WAAW;IAMnB,qEAAqE;IACrE,OAAO,CAAC,gBAAgB;cAiBL,MAAM,IAAI,IAAI;CAwIlC;AAED,wBAAgB,mBAAmB,IAAI,OAAO,aAAa,CAE1D"}
@@ -1,6 +1,7 @@
1
1
  import { FxElement } from "../../core/base.js";
2
2
  import { css } from "../../core/css.js";
3
3
  import { defineElement } from "../../core/define.js";
4
+ import { esc } from "../../core/sanitize.js";
4
5
  const _FxMultiselect = class _FxMultiselect extends FxElement {
5
6
  constructor() {
6
7
  super(...arguments);
@@ -64,6 +65,23 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
64
65
  else this.selected.add(value);
65
66
  this.commit();
66
67
  }
68
+ /** Navegação por teclado entre as opções do listbox (WCAG 2.1.1). */
69
+ _navigateOptions(e) {
70
+ e.preventDefault();
71
+ if (!this.hasAttr("open")) {
72
+ this.toggleAttribute("open");
73
+ this.render();
74
+ }
75
+ const opts = Array.from(this.root.querySelectorAll(".opt"));
76
+ if (!opts.length) return;
77
+ const current = opts.indexOf(this.root.activeElement);
78
+ let next = 0;
79
+ if (e.key === "ArrowDown") next = current === -1 ? 0 : Math.min(current + 1, opts.length - 1);
80
+ else if (e.key === "ArrowUp") next = current === -1 ? opts.length - 1 : Math.max(current - 1, 0);
81
+ else if (e.key === "Home") next = 0;
82
+ else if (e.key === "End") next = opts.length - 1;
83
+ opts[next]?.focus();
84
+ }
67
85
  render() {
68
86
  const wasOpen = this.hasAttr("open");
69
87
  const search = this.root.querySelector(".search")?.value ?? "";
@@ -78,10 +96,10 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
78
96
  <span class="trigger" part="trigger" role="button" tabindex="${this.disabled ? -1 : 0}" aria-haspopup="listbox" aria-expanded="${wasOpen}" aria-disabled="${this.disabled}">
79
97
  <span class="lead">
80
98
  ${chips.length ? chips.map((c) => `
81
- <span class="chip" data-value="${c.value}">
82
- ${c.label}
83
- <span class="chip__x" role="button" aria-label="Remover ${c.label}">×</span>
84
- </span>`).join("") : `<span class="placeholder">${placeholder}</span>`}
99
+ <span class="chip" data-value="${esc(c.value)}">
100
+ ${esc(c.label)}
101
+ <span class="chip__x" role="button" aria-label="Remover ${esc(c.label)}">×</span>
102
+ </span>`).join("") : `<span class="placeholder">${esc(placeholder)}</span>`}
85
103
  </span>
86
104
  <span class="trigger-right">
87
105
  ${this.hasAttr("clearable") && chips.length ? '<button type="button" class="icon-btn clear" part="clear" aria-label="Limpar seleção">×</button>' : ""}
@@ -93,14 +111,14 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
93
111
  <span class="count">${chips.length} selecionado${chips.length === 1 ? "" : "s"}</span>
94
112
  ${this.hasAttr("clearable") && chips.length ? '<button type="button" class="clear-all">Limpar tudo</button>' : ""}
95
113
  </div>
96
- ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" placeholder="${this.getAttr("search-placeholder", "Pesquisar…")}">` : ""}
114
+ ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" placeholder="${esc(this.getAttr("search-placeholder", "Pesquisar…"))}">` : ""}
97
115
  <ul class="list">
98
116
  ${filtered.map((o) => `
99
- <li><button type="button" class="opt" role="option" data-value="${o.value}"
117
+ <li><button type="button" class="opt" role="option" data-value="${esc(o.value)}"
100
118
  aria-selected="${this.selected.has(o.value)}">
101
- <span class="box" aria-hidden="true"></span>${o.label}
119
+ <span class="box" aria-hidden="true"></span>${esc(o.label)}
102
120
  </button></li>`).join("")}
103
- ${filtered.length === 0 ? `<li class="empty">${this.getAttr("no-results", "Nenhum resultado")}</li>` : ""}
121
+ ${filtered.length === 0 ? `<li class="empty">${esc(this.getAttr("no-results", "Nenhum resultado"))}</li>` : ""}
104
122
  </ul>
105
123
  </div>
106
124
  `);
@@ -139,6 +157,18 @@ const _FxMultiselect = class _FxMultiselect extends FxElement {
139
157
  if (e.key === "Enter" || e.key === " ") {
140
158
  e.preventDefault();
141
159
  trigger.dispatchEvent(new MouseEvent("click", { bubbles: true }));
160
+ return;
161
+ }
162
+ if (e.key === "Escape") {
163
+ if (this.hasAttr("open")) {
164
+ this.removeAttribute("open");
165
+ this.render();
166
+ this.root.querySelector(".trigger")?.focus();
167
+ }
168
+ return;
169
+ }
170
+ if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Home" || e.key === "End") {
171
+ this._navigateOptions(e);
142
172
  }
143
173
  });
144
174
  this.root.querySelector(".clear")?.addEventListener("click", (e) => {
@@ -1 +1 @@
1
- {"version":3,"file":"multiselect.js","sources":["../../../src/components/multiselect/multiselect.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\n\n/**\n * <fx-multiselect> — Seleção múltipla .\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 * Evento: `change` (composed, detail: { values: string[] }).\n */\nexport class FxMultiselect extends FxElement {\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 }\n .trigger {\n display: inline-flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--fx-space-xs);\n width: 240px;\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 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']) .trigger { min-height: var(--fx-size-sm); width: 200px; }\n :host([size='lg']) .trigger { min-height: var(--fx-size-lg); width: 280px; font-size: calc(var(--fx-font-size) + 4px); }\n /* Validação */\n :host([error]) .trigger,\n :host([invalid]) .trigger {\n border-color: var(--fx-color-danger, #dc2626);\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: 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 }\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: 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 return ['disabled', 'placeholder'];\n }\n\n private observer?: MutationObserver;\n private docListener?: (e: Event) => void;\n private selected = new Set<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 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 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.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { values: [...this.selected] },\n }),\n );\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 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=\"${c.value}\">\n ${c.label}\n <span class=\"chip__x\" role=\"button\" aria-label=\"Remover ${c.label}\">×</span>\n </span>`).join('')\n : `<span class=\"placeholder\">${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=\"${this.getAttr('search-placeholder', 'Pesquisar…')}\">` : ''}\n <ul class=\"list\">\n ${filtered.map((o) => `\n <li><button type=\"button\" class=\"opt\" role=\"option\" data-value=\"${o.value}\"\n aria-selected=\"${this.selected.has(o.value)}\">\n <span class=\"box\" aria-hidden=\"true\"></span>${o.label}\n </button></li>`).join('')}\n ${filtered.length === 0 ? `<li class=\"empty\">${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).\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 }\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":";;;AAcO,MAAM,iBAAN,MAAM,uBAAsB,UAAU;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA;AAgOL,SAAQ,+BAAe,IAAA;AAAA,EAAY;AAAA,EANnC,WAAoB,qBAA+B;AACjD,WAAO,CAAC,YAAY,aAAa;AAAA,EACnC;AAAA;AAAA,EAOA,IAAI,SAAmB;AACrB,UAAM,MAAM,KAAK,QAAQ,QAAQ;AACjC,WAAO,MAAM,IAAI,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,OAAO,IAAI,CAAA;AAAA,EACrE;AAAA,EACA,IAAI,OAAO,MAAgB;AACzB,SAAK,aAAa,UAAU,KAAK,KAAK,GAAG,CAAC;AAAA,EAC5C;AAAA,EAEA,IAAI,WAAoB;AACtB,WAAO,KAAK,QAAQ,UAAU;AAAA,EAChC;AAAA,EACA,IAAI,SAAS,OAAgB;AAC3B,SAAK,WAAW,YAAY,QAAQ,KAAK,CAAC;AAAA,EAC5C;AAAA,EAEA,IAAY,UAA8C;AACxD,WAAO,CAAC,GAAG,KAAK,iBAAiB,QAAQ,CAAC,EAAE,IAAI,CAAC,OAAO;AAAA,MACtD,OAAO,EAAE,aAAa,OAAO,KAAK,EAAE,aAAa,UAAU;AAAA,MAC3D,OAAO,EAAE,aAAa,UAAU;AAAA,IAAA,EAChC;AAAA,EACJ;AAAA,EAEmB,oBAA0B;AAE3C,SAAK,WAAW,IAAI,IAAI,KAAK,MAAM;AACnC,UAAM,kBAAA;AACN,SAAK,WAAW,IAAI,iBAAiB,MAAM,KAAK,QAAQ;AACxD,SAAK,SAAS,QAAQ,MAAM,EAAE,WAAW,MAAM,SAAS,MAAM,eAAe,KAAA,CAAM;AACnF,SAAK,cAAc,CAAC,MAAa;AAC/B,UAAI,CAAC,KAAK,QAAQ,MAAM,EAAG;AAC3B,UAAI,EAAE,aAAA,EAAe,SAAS,IAAI,EAAG;AACrC,WAAK,gBAAgB,MAAM;AAC3B,WAAK,OAAA;AAAA,IACP;AACA,aAAS,iBAAiB,SAAS,KAAK,WAAW;AAAA,EACrD;AAAA,EAEmB,uBAA6B;AAC9C,UAAM,qBAAA;AACN,SAAK,UAAU,WAAA;AACf,QAAI,KAAK,YAAa,UAAS,oBAAoB,SAAS,KAAK,WAAW;AAAA,EAC9E;AAAA;AAAA,EAGQ,SAAe;AACrB,SAAK,SAAS,CAAC,GAAG,KAAK,QAAQ;AAC/B,SAAK,OAAA;AACL,SAAK;AAAA,MACH,IAAI,YAAY,UAAU;AAAA,QACxB,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,QAAQ,CAAC,GAAG,KAAK,QAAQ,EAAA;AAAA,MAAE,CACtC;AAAA,IAAA;AAAA,EAEL;AAAA,EAEQ,YAAY,OAAqB;AACvC,QAAI,KAAK,SAAS,IAAI,KAAK,EAAG,MAAK,SAAS,OAAO,KAAK;AAAA,QACnD,MAAK,SAAS,IAAI,KAAK;AAC5B,SAAK,OAAA;AAAA,EACP;AAAA,EAEmB,SAAe;AAChC,UAAM,UAAU,KAAK,QAAQ,MAAM;AAEnC,UAAM,SAAS,KAAK,KAAK,cAAgC,SAAS,GAAG,SAAS;AAE9E,UAAM,OAAO,KAAK;AAClB,eAAW,KAAK,CAAC,GAAG,KAAK,QAAQ,GAAG;AAClC,UAAI,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,EAAG,MAAK,SAAS,OAAO,CAAC;AAAA,IAC9D;AAEA,UAAM,QAAQ,KAAK,OAAO,CAAC,MAAM,KAAK,SAAS,IAAI,EAAE,KAAK,CAAC;AAC3D,UAAM,cAAc,KAAK,QAAQ,eAAe,YAAY;AAC5D,UAAM,WAAW,SACb,KAAK,OAAO,CAAC,MAAM,EAAE,MAAM,YAAA,EAAc,SAAS,OAAO,YAAA,CAAa,CAAC,IACvE;AAEJ,SAAK,YAAY;AAAA,qEACgD,KAAK,WAAW,KAAK,CAAC,4CAA4C,OAAO,oBAAoB,KAAK,QAAQ;AAAA;AAAA,UAGrK,MAAM,SACF,MAAM,IAAI,CAAC,MAAM;AAAA,+CACgB,EAAE,KAAK;AAAA,kBACpC,EAAE,KAAK;AAAA,0EACiD,EAAE,KAAK;AAAA,sBAC3D,EAAE,KAAK,EAAE,IACjB,6BAA6B,WAAW,SAC9C;AAAA;AAAA;AAAA,YAGI,KAAK,QAAQ,WAAW,KAAK,MAAM,SAAS,qGAAqG,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAM/H,MAAM,MAAM,eAAe,MAAM,WAAW,IAAI,KAAK,GAAG;AAAA,YAC5E,KAAK,QAAQ,WAAW,KAAK,MAAM,SAAS,iEAAiE,EAAE;AAAA;AAAA,UAEjH,KAAK,QAAQ,YAAY,IAAI,gEAAgE,KAAK,QAAQ,sBAAsB,YAAY,CAAC,OAAO,EAAE;AAAA;AAAA,YAEpJ,SAAS,IAAI,CAAC,MAAM;AAAA,8EAC8C,EAAE,KAAK;AAAA,+BACtD,KAAK,SAAS,IAAI,EAAE,KAAK,CAAC;AAAA,4DACG,EAAE,KAAK;AAAA,2BACxC,EAAE,KAAK,EAAE,CAAC;AAAA,YACzB,SAAS,WAAW,IAAI,qBAAqB,KAAK,QAAQ,cAAc,kBAAkB,CAAC,UAAU,EAAE;AAAA;AAAA;AAAA,KAG9G;AAGD,QAAI,QAAS,MAAK,aAAa,QAAQ,EAAE;AAEzC,UAAM,cAAc,KAAK,KAAK,cAAgC,SAAS;AACvE,QAAI,aAAa;AACf,kBAAY,QAAQ;AAEpB,kBAAY,iBAAiB,SAAS,MAAM;AAC1C,cAAM,MAAM,YAAY,kBAAkB,YAAY,MAAM;AAC5D,aAAK,OAAA;AACL,cAAM,KAAK,KAAK,KAAK,cAAgC,SAAS;AAC9D,YAAI,IAAI;AACN,aAAG,MAAA;AACH,aAAG,kBAAkB,KAAK,GAAG;AAAA,QAC/B;AAAA,MACF,CAAC;AACD,kBAAY,iBAAiB,SAAS,CAAC,MAAM,EAAE,iBAAiB;AAAA,IAClE;AAEA,UAAM,UAAU,KAAK,KAAK,cAA2B,UAAU;AAC/D,QAAI,CAAC,QAAS;AAEd,YAAQ,iBAAiB,SAAS,CAAC,MAAM;AACvC,UAAI,KAAK,SAAU;AACnB,UAAK,EAAE,OAAuB,QAAQ,QAAQ,EAAG;AACjD,UAAK,EAAE,OAAuB,QAAQ,UAAU,EAAG;AACnD,WAAK,gBAAgB,MAAM;AAE3B,UAAI,KAAK,QAAQ,MAAM,GAAG;AACxB,cAAM,IAAI,KAAK,sBAAA;AACf,aAAK,gBAAgB,MAAM,EAAE,SAAS,MAAM,OAAO,eAAe,EAAE,MAAM,GAAG;AAAA,MAC/E,OAAO;AACL,aAAK,gBAAgB,IAAI;AAAA,MAC3B;AACA,WAAK,OAAA;AAAA,IACP,CAAC;AAGD,YAAQ,iBAAiB,WAAW,CAAC,MAAM;AACzC,UAAI,KAAK,SAAU;AACnB,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,UAAE,eAAA;AACF,gBAAQ,cAAc,IAAI,WAAW,SAAS,EAAE,SAAS,KAAA,CAAM,CAAC;AAAA,MAClE;AAAA,IACF,CAAC;AAGD,SAAK,KAAK,cAAc,QAAQ,GAAG,iBAAiB,SAAS,CAAC,MAAM;AAClE,QAAE,gBAAA;AACF,WAAK,SAAS,MAAA;AACd,WAAK,OAAA;AAAA,IACP,CAAC;AAGD,SAAK,KAAK,cAAc,YAAY,GAAG,iBAAiB,SAAS,CAAC,MAAM;AACtE,QAAE,gBAAA;AACF,WAAK,SAAS,MAAA;AACd,WAAK,OAAA;AAAA,IACP,CAAC;AAGD,SAAK,KAAK,iBAA8B,OAAO,EAAE,QAAQ,CAAC,SAAS;AACjE,WAAK,cAAc,UAAU,GAAG,iBAAiB,SAAS,CAAC,MAAM;AAC/D,UAAE,gBAAA;AACF,aAAK,YAAY,KAAK,QAAQ,KAAM;AAAA,MACtC,CAAC;AAAA,IACH,CAAC;AAGD,SAAK,KAAK,iBAA8B,MAAM,EAAE,QAAQ,CAAC,QAAQ;AAC/D,UAAI,iBAAiB,SAAS,MAAM,KAAK,YAAY,IAAI,QAAQ,KAAM,CAAC;AAAA,IAC1E,CAAC;AAAA,EACH;AACF;AA5ZE,eAAgB,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,gBAAN;AA+ZA,SAAS,sBAA4C;AAC1D,SAAO,cAAc,kBAAkB,aAAa;AACtD;"}
1
+ {"version":3,"file":"multiselect.js","sources":["../../../src/components/multiselect/multiselect.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\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 * 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 * Evento: `change` (composed, detail: { values: string[] }).\n */\nexport class FxMultiselect extends FxElement {\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 }\n .trigger {\n display: inline-flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--fx-space-xs);\n width: 240px;\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 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']) .trigger { min-height: var(--fx-size-sm); width: 200px; }\n :host([size='lg']) .trigger { min-height: var(--fx-size-lg); width: 280px; font-size: calc(var(--fx-font-size) + 4px); }\n /* Validação */\n :host([error]) .trigger,\n :host([invalid]) .trigger {\n border-color: var(--fx-color-danger, #dc2626);\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: 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 }\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: 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 return ['disabled', 'placeholder'];\n }\n\n private observer?: MutationObserver;\n private docListener?: (e: Event) => void;\n private selected = new Set<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 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 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.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { values: [...this.selected] },\n }),\n );\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 +1 @@
1
- {"version":3,"file":"orderlist.d.ts","sourceRoot":"","sources":["../../../src/components/orderlist/orderlist.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,qBAAa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,SA2ElB;IAEJ,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAc7C;IAEL,IAAI,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,EAI9B;IACD,IAAI,IAAI,IAAI,aAAa,EAAE,CAE1B;IACD,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,aAAa,CAAgC;IAErD,IAAI,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,EAGnC;IACD,IAAI,SAAS,IAAI,aAAa,EAAE,CAE/B;IACC,OAAO,CAAC,UAAU,CAAuB;IAE3C,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,CAAC,EAAE,MAAM,EAEpB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IACC,IAAI,MAAM,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAErB;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IACD,IAAI,iBAAiB,CAAC,CAAC,EAAE,MAAM,EAE9B;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IACD,IAAI,UAAU,CAAC,CAAC,EAAE,MAAM,EAEvB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACC,IAAI,OAAO,CAAC,CAAC,EAAE,OAAO,EAEvB;IAED,IAAI,aAAa,IAAI,MAAM,CAG1B;IACD,IAAI,aAAa,CAAC,CAAC,EAAE,MAAM,EAE1B;IAED,IAAI,aAAa,IAAI,OAAO,CAE3B;IACC,IAAI,aAAa,CAAC,CAAC,EAAE,OAAO,EAE7B;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,WAAW,CAAC,CAAC,EAAE,MAAM,EAIxB;IACD,OAAO,CAAC,YAAY,CAAM;IAE1B,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,eAAe,CAAkD;IAEzE,iBAAiB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,MAAM,GAAG,IAAI;cAK/C,iBAAiB,IAAI,IAAI;cAKzB,wBAAwB,IAAI,IAAI;IAOnD,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;cASL,MAAM,IAAI,IAAI;IAsFjC,OAAO,CAAC,gBAAgB;IAqExB,OAAO,CAAC,oBAAoB;IAyC5B,OAAO,CAAC,kBAAkB;IA0D1B,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,oBAAoB;IAqB5B,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,kBAAkB;IA+C1B,OAAO,CAAC,oBAAoB;CA2B7B;AAMD,wBAAgB,iBAAiB,IAAI,OAAO,WAAW,CAEtD"}
1
+ {"version":3,"file":"orderlist.d.ts","sourceRoot":"","sources":["../../../src/components/orderlist/orderlist.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,qBAAa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,SA2ElB;IAEJ,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAc7C;IAEL,IAAI,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,EAI9B;IACD,IAAI,IAAI,IAAI,aAAa,EAAE,CAE1B;IACD,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,aAAa,CAAgC;IAErD,IAAI,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,EAGnC;IACD,IAAI,SAAS,IAAI,aAAa,EAAE,CAE/B;IACC,OAAO,CAAC,UAAU,CAAuB;IAE3C,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,CAAC,EAAE,MAAM,EAEpB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IACC,IAAI,MAAM,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAErB;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IACD,IAAI,iBAAiB,CAAC,CAAC,EAAE,MAAM,EAE9B;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IACD,IAAI,UAAU,CAAC,CAAC,EAAE,MAAM,EAEvB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACC,IAAI,OAAO,CAAC,CAAC,EAAE,OAAO,EAEvB;IAED,IAAI,aAAa,IAAI,MAAM,CAG1B;IACD,IAAI,aAAa,CAAC,CAAC,EAAE,MAAM,EAE1B;IAED,IAAI,aAAa,IAAI,OAAO,CAE3B;IACC,IAAI,aAAa,CAAC,CAAC,EAAE,OAAO,EAE7B;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,WAAW,CAAC,CAAC,EAAE,MAAM,EAIxB;IACD,OAAO,CAAC,YAAY,CAAM;IAE1B,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,eAAe,CAAkD;IAEzE,iBAAiB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,MAAM,GAAG,IAAI;cAK/C,iBAAiB,IAAI,IAAI;cAKzB,wBAAwB,IAAI,IAAI;IAOnD,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;cASL,MAAM,IAAI,IAAI;IAsFjC,OAAO,CAAC,gBAAgB;IAqExB,OAAO,CAAC,oBAAoB;IAyC5B,OAAO,CAAC,kBAAkB;IA0D1B,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,oBAAoB;IAqB5B,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,kBAAkB;IA+C1B,OAAO,CAAC,oBAAoB;CA2B7B;AAED,wBAAgB,iBAAiB,IAAI,OAAO,WAAW,CAEtD"}
@@ -1,6 +1,7 @@
1
1
  import { FxElement } from "../../core/base.js";
2
2
  import { css } from "../../core/css.js";
3
3
  import { defineElement } from "../../core/define.js";
4
+ import { esc } from "../../core/sanitize.js";
4
5
  const _FxOrderList = class _FxOrderList extends FxElement {
5
6
  constructor() {
6
7
  super(...arguments);
@@ -652,9 +653,6 @@ _FxOrderList.styles = css`
652
653
  .list-item { animation: slideIn 0.2s ease-out; }
653
654
  `;
654
655
  let FxOrderList = _FxOrderList;
655
- function esc(s) {
656
- return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
657
- }
658
656
  function defineFxOrderList() {
659
657
  return defineElement("fx-orderlist", FxOrderList);
660
658
  }
@@ -1 +1 @@
1
- {"version":3,"file":"orderlist.js","sources":["../../../src/components/orderlist/orderlist.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\r\nimport { css } from '../../core/css';\r\nimport { defineElement } from '../../core/define';\r\n\r\nexport interface OrderListItem {\r\n [key: string]: unknown;\r\n}\r\n\r\n/**\r\n * <fx-orderlist> - Componente para ordenar uma colecao de itens.\r\n *\r\n * Permite reordenar itens arrastando ou usando botoes de controle.\r\n * Suporta filtro, selecao, checkbox e templates customizados.\r\n *\r\n * Atributos: data, data-key, filter, filter-by, filter-placeholder, breakpoint,\r\n * dragdrop, selection-mode, striped, show-select-all.\r\n * Evento: `reorder` (composed, detail: { items }).\r\n * Evento: `selection-change` (composed, detail: { selection }).\r\n */\r\nexport class FxOrderList extends FxElement {\r\n static override styles = css`\r\n\r\n :host {\r\n display: block;\r\n font-family: var(--fx-font-family);\r\n font-size: var(--fx-font-size);\r\n --orderlist-primary: var(--fx-color-primary, #3b82f6);\r\n --orderlist-border: var(--fx-border-default, #e2e8f0);\r\n --orderlist-bg: var(--fx-surface-background, #ffffff);\r\n --orderlist-bg-hover: var(--fx-surface-surface-hover, #f1f5f9);\r\n --orderlist-text: var(--fx-text-default, #1e293b);\r\n --orderlist-text-muted: var(--fx-text-muted, #64748b);\r\n --orderlist-radius: var(--fx-radius-md, 8px);\r\n --orderlist-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n --orderlist-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\r\n }\r\n * { box-sizing: border-box; }\r\n .container { display: flex; flex-direction: column; gap: var(--fx-space-md, 16px); }\r\n .list-wrapper { display: flex; flex-direction: column; gap: var(--fx-space-sm, 8px); flex: 1; min-width: 0; }\r\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; }\r\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); }\r\n .select-all-bar input[type=\"checkbox\"] { width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; }\r\n .filter-wrapper { margin-bottom: var(--fx-space-xs, 4px); }\r\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); }\r\n .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 20%, transparent); }\r\n .filter-input::placeholder { color: var(--orderlist-text-muted); }\r\n .main-row { display: flex; align-items: stretch; gap: var(--fx-space-sm, 8px); }\r\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; }\r\n .list::-webkit-scrollbar { width: 6px; }\r\n .list::-webkit-scrollbar-track { background: transparent; }\r\n .list::-webkit-scrollbar-thumb { background: var(--orderlist-border); border-radius: 3px; }\r\n .list::-webkit-scrollbar-thumb:hover { background: var(--orderlist-text-muted); }\r\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; }\r\n :host([striped]) .list-item:nth-child(even) { background: var(--fx-surface-surface, #f8fafc); }\r\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); }\r\n .list-item:last-child { border-bottom: none; }\r\n .list-item:hover { background: var(--orderlist-bg-hover); }\r\n .list-item.selected { background: color-mix(in srgb, var(--orderlist-primary) 8%, transparent); border-left: 3px solid var(--orderlist-primary); padding-left: 11px; }\r\n .list-item:focus-visible { outline: none; background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\r\n .list-item.dragging { opacity: 0.5; background: var(--orderlist-bg-hover); }\r\n .list-item.drag-over { border-top: 2px solid var(--orderlist-primary); }\r\n .drag-handle { color: var(--orderlist-text-muted); cursor: grab; flex-shrink: 0; font-size: 1.2em; opacity: 0.6; transition: var(--orderlist-transition); }\r\n .drag-handle:hover { opacity: 1; }\r\n .drag-handle:active { cursor: grabbing; }\r\n .item-content { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\r\n .checkbox { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; transition: var(--orderlist-transition); }\r\n .checkbox:hover { transform: scale(1.1); }\r\n .empty-message { padding: var(--fx-space-xl, 32px); text-align: center; color: var(--orderlist-text-muted); font-style: italic; }\r\n .controls-bar {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n padding: var(--fx-space-xs, 6px);\r\n background: var(--orderlist-bg);\r\n border: 1px solid var(--orderlist-border);\r\n border-radius: var(--orderlist-radius);\r\n box-shadow: var(--orderlist-shadow);\r\n height: fit-content;\r\n position: sticky;\r\n top: 0;\r\n align-self: flex-start;\r\n }\r\n .control-group { display: flex; flex-direction: column; gap: 3px; }\r\n .control-group + .control-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--orderlist-border); }\r\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; }\r\n button.control-btn:hover:not(:disabled) { background: var(--orderlist-bg-hover); color: var(--orderlist-primary); transform: scale(1.1); }\r\n button.control-btn:active:not(:disabled) { transform: scale(0.92); background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\r\n button.control-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 30%, transparent); }\r\n button.control-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }\r\n .control-btn-icon { font-size: 18px; line-height: 1; }\r\n /* Tooltip nos botoes */\r\n button.control-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }\r\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; } }\r\n @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }\r\n .list-item { animation: slideIn 0.2s ease-out; }\r\n `;\r\n\r\n static override get observedAttributes(): string[] {\r\n return [\r\n 'data',\r\n 'data-key',\r\n 'filter',\r\n 'filter-by',\r\n 'filter-placeholder',\r\n 'breakpoint',\r\n 'controls-location',\r\n 'dragdrop',\r\n 'striped',\r\n 'selection-mode',\r\n 'show-select-all',\r\n ]\r\n }\r\n\r\n set data(value: OrderListItem[]) {\r\n this._data = value;\r\n this._filteredData = null;\r\n this.render();\r\n }\r\n get data(): OrderListItem[] {\r\n return this._data;\r\n }\r\n private _data: OrderListItem[] = [];\r\n private _filteredData: OrderListItem[] | null = null;\r\n\r\n set selection(value: OrderListItem[]) {\r\n this._selection = value;\r\n this.render();\r\n }\r\n get selection(): OrderListItem[] {\r\n return this._selection;\r\n }\r\n private _selection: OrderListItem[] = [];\r\n\r\n get dataKey(): string {\r\n return this.getAttr('data-key', '');\r\n }\r\n set dataKey(v: string) {\r\n this.setAttribute('data-key', v);\r\n }\r\n\r\n get filter(): boolean {\r\n return this.hasAttr('filter');\r\n }\r\n set filter(v: boolean) {\r\n this.toggleAttr('filter', v);\r\n }\r\n\r\n get filterBy(): string {\r\n return this.getAttr('filter-by', 'label');\r\n }\r\n set filterBy(v: string) {\r\n this.setAttribute('filter-by', v);\r\n }\r\n\r\n get filterPlaceholder(): string {\r\n return this.getAttr('filter-placeholder', 'Buscar...');\r\n }\r\n set filterPlaceholder(v: string) {\r\n this.setAttribute('filter-placeholder', v);\r\n }\r\n\r\n get breakpoint(): string {\r\n return this.getAttr('breakpoint', '960px');\r\n }\r\n set breakpoint(v: string) {\r\n this.setAttribute('breakpoint', v);\r\n }\r\n\r\n get dragdrop(): boolean {\r\n return this.hasAttr('dragdrop');\r\n }\r\n set dragdrop(v: boolean) {\r\n this.toggleAttr('dragdrop', v);\r\n }\r\n\r\n get striped(): boolean {\r\n return this.hasAttr('striped');\r\n }\r\n set striped(v: boolean) {\r\n this.toggleAttr('striped', v);\r\n }\r\n\r\n get selectionMode(): string {\r\n const s = this.getAttr('selection-mode', '');\r\n return s === 'single' || s === 'multiple' ? s : '';\r\n }\r\n set selectionMode(v: string) {\r\n this.setAttribute('selection-mode', v);\r\n }\r\n\r\n get showSelectAll(): boolean {\r\n return this.hasAttr('show-select-all');\r\n }\r\n set showSelectAll(v: boolean) {\r\n this.toggleAttr('show-select-all', v);\r\n }\r\n\r\n get filterValue(): string {\r\n return this._filterValue;\r\n }\r\n set filterValue(v: string) {\r\n this._filterValue = v;\r\n this._applyFilter();\r\n this._updateListDisplay();\r\n }\r\n private _filterValue = '';\r\n\r\n private _draggedIndex: number | null = null;\r\n private _listenersAttached = false;\r\n private _optionTemplate: ((item: OrderListItem) => string) | null = null;\r\n\r\n setOptionTemplate(template: (item: OrderListItem) => string): void {\r\n this._optionTemplate = template;\r\n this.render();\r\n }\r\n\r\n protected override connectedCallback(): void {\r\n this._parseDataAttribute();\r\n super.connectedCallback();\r\n }\r\n\r\n protected override attributeChangedCallback(): void {\r\n if (this.getAttr('data', '') !== '') {\r\n this._parseDataAttribute();\r\n }\r\n super.attributeChangedCallback();\r\n }\r\n\r\n private _parseDataAttribute(): void {\r\n const dataAttr = this.getAttr('data', '');\r\n if (dataAttr) {\r\n try {\r\n this._data = JSON.parse(dataAttr);\r\n this._filteredData = null;\r\n } catch {\r\n this._data = [];\r\n }\r\n }\r\n }\r\n\r\n private _applyFilter(): void {\r\n if (!this._filterValue) {\r\n this._filteredData = null;\r\n return;\r\n }\r\n const filterFields = this.filterBy.split(',').map(f => f.trim());\r\n this._filteredData = this._data.filter(item => {\r\n return filterFields.some(field => {\r\n const value = item[field];\r\n if (value == null) return false;\r\n return String(value).toLowerCase().includes(this._filterValue.toLowerCase());\r\n });\r\n });\r\n }\r\n\r\n private _getDisplayData(): OrderListItem[] {\r\n return this._filteredData || this._data;\r\n }\r\n\r\n private _getItemKey(item: OrderListItem, index: number): string {\r\n if (this.dataKey && item[this.dataKey] != null) {\r\n return String(item[this.dataKey]);\r\n }\r\n if (item['id'] != null) return String(item['id']);\r\n if (item['key'] != null) return String(item['key']);\r\n if (item['label'] != null) return String(item['label']);\r\n if (item['name'] != null) return String(item['name']);\r\n if (item['value'] != null) return String(item['value']);\r\n return String(index);\r\n }\r\n\r\n private _getItemLabel(item: OrderListItem): string {\r\n const fields = ['label', 'name', 'title', 'text', 'value'];\r\n for (const field of fields) {\r\n if (item[field] != null) {\r\n return String(item[field]);\r\n }\r\n }\r\n return JSON.stringify(item);\r\n }\r\n\r\n private _isSelected(item: OrderListItem): boolean {\r\n return this._selection.some(s => this._getItemKey(s, -1) === this._getItemKey(item, -1));\r\n }\r\n\r\n private _moveItem(fromIndex: number, toIndex: number): void {\r\n const actualFrom = this._getActualIndex(fromIndex);\r\n const actualTo = this._getActualIndex(toIndex);\r\n if (actualFrom === -1 || actualTo === -1) return;\r\n const item = this._data.splice(actualFrom, 1)[0];\r\n this._data.splice(actualTo, 0, item);\r\n this._applyFilter();\r\n this._updateListDisplay();\r\n this._updateControlsState();\r\n this._emitReorder();\r\n }\r\n\r\n private _getActualIndex(displayIndex: number): number {\r\n if (this._filteredData) {\r\n const item = this._filteredData[displayIndex];\r\n return this._data.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(item, -1));\r\n }\r\n return displayIndex;\r\n }\r\n\r\n private _emitReorder(): void {\r\n this.dispatchEvent(new CustomEvent('reorder', {\r\n bubbles: true,\r\n composed: true,\r\n detail: { items: [...this._data] },\r\n }));\r\n }\r\n\r\n private _emitSelectionChange(): void {\r\n this.dispatchEvent(new CustomEvent('selection-change', {\r\n bubbles: true,\r\n composed: true,\r\n detail: { selection: [...this._selection] },\r\n }));\r\n }\r\n\r\n private _toggleSelection(item: OrderListItem): void {\r\n const key = this._getItemKey(item, -1);\r\n const index = this._selection.findIndex(s => this._getItemKey(s, -1) === key);\r\n if (index >= 0) {\r\n this._selection.splice(index, 1);\r\n } else if (this.selectionMode === 'multiple') {\r\n this._selection.push(item);\r\n } else {\r\n this._selection = [item];\r\n }\r\n this._emitSelectionChange();\r\n this._updateListDisplay();\r\n this._updateControlsState();\r\n }\r\n\r\n private _selectAll(): void {\r\n const displayData = this._getDisplayData();\r\n this._selection = [...displayData];\r\n this._emitSelectionChange();\r\n this._updateListDisplay();\r\n this._updateControlsState();\r\n }\r\n\r\n private _deselectAll(): void {\r\n this._selection = [];\r\n this._emitSelectionChange();\r\n this._updateListDisplay();\r\n this._updateControlsState();\r\n }\r\n\r\n private _toggleSelectAll(): void {\r\n const displayData = this._getDisplayData();\r\n if (this._selection.length === displayData.length) {\r\n this._deselectAll();\r\n } else {\r\n this._selectAll();\r\n }\r\n }\r\n\r\n protected override render(): void {\r\n const displayData = this._getDisplayData();\r\n const hasSelection = this.selectionMode;\r\n const hasMultipleSelection = this.selectionMode === 'multiple';\r\n const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\r\n\r\n this.setTemplate(`\r\n <div class=\"container\" part=\"container\">\r\n ${this.filter ? `\r\n <div class=\"filter-wrapper\" part=\"filter-wrapper\">\r\n <input type=\"text\" class=\"filter-input\" part=\"filter-input\"\r\n placeholder=\"${this.filterPlaceholder}\"\r\n value=\"${esc(this._filterValue)}\"\r\n aria-label=\"Filtrar lista\" />\r\n </div>\r\n ` : ''}\r\n <div class=\"main-row\" part=\"main-row\">\r\n <div class=\"controls-bar\" part=\"controls-bar\">\r\n <div class=\"control-group\">\r\n <button class=\"control-btn\" data-action=\"top\" part=\"control-btn\" aria-label=\"Mover para o inicio\">\r\n <span class=\"control-btn-icon\">\\u00AB</span>\r\n </button>\r\n <button class=\"control-btn\" data-action=\"up\" part=\"control-btn\" aria-label=\"Mover para cima\">\r\n <span class=\"control-btn-icon\">\\u2191</span>\r\n </button>\r\n </div>\r\n <div class=\"control-group\">\r\n <button class=\"control-btn\" data-action=\"down\" part=\"control-btn\" aria-label=\"Mover para baixo\">\r\n <span class=\"control-btn-icon\">\\u2193</span>\r\n </button>\r\n <button class=\"control-btn\" data-action=\"bottom\" part=\"control-btn\" aria-label=\"Mover para o fim\">\r\n <span class=\"control-btn-icon\">\\u00BB</span>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"list-wrapper\" part=\"list-wrapper\">\r\n ${hasMultipleSelection && this.showSelectAll ? `\r\n <div class=\"select-all-bar\" part=\"select-all-bar\">\r\n <label>\r\n <input type=\"checkbox\" class=\"select-all-checkbox\"\r\n ${allSelected ? 'checked' : ''}\r\n aria-label=\"Selecionar todos\" />\r\n Selecionar Todos\r\n </label>\r\n <span class=\"selection-count\">${this._selection.length} selecionado(s)</span>\r\n </div>\r\n ` : ''}\r\n <ul class=\"list\" part=\"list\" role=\"listbox\"\r\n aria-multiselectable=\"${hasMultipleSelection}\"\r\n tabindex=\"0\">\r\n ${displayData.length === 0 ? `\r\n <li class=\"empty-message\" part=\"empty-message\">\r\n ${this.filter ? 'Nenhum resultado encontrado' : 'Nenhum item disponivel'}\r\n </li>\r\n ` : displayData.map((item, index) => {\r\n const key = this._getItemKey(item, index);\r\n const label = this._getItemLabel(item);\r\n const isSelected = this._isSelected(item);\r\n const content = this._optionTemplate ? this._optionTemplate(item) : esc(label);\r\n return `\r\n <li class=\"list-item${isSelected ? ' selected' : ''}\" part=\"list-item\"\r\n data-index=\"${index}\" data-key=\"${esc(key)}\"\r\n role=\"option\" aria-selected=\"${isSelected}\"\r\n ${this.dragdrop ? 'draggable=\"true\"' : ''}\r\n tabindex=\"0\">\r\n ${this.dragdrop ? '<span class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Arrastar\">\\u22EE\\u22EE</span>' : ''}\r\n ${hasSelection ? `\r\n <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\"\r\n ${isSelected ? 'checked' : ''}\r\n aria-label=\"Selecionar ${esc(label)}\" />\r\n ` : ''}\r\n <span class=\"item-content\" part=\"item-content\">${content}</span>\r\n </li>\r\n `;\r\n }).join('')}\r\n </ul>\r\n </div>\r\n </div>\r\n </div>\r\n `);\r\n\r\n this._attachListeners();\r\n this._attachItemListeners(this.root.querySelector('.list') as HTMLElement);\r\n this._updateControlsState();\r\n }\r\n\r\n private _attachListeners(): void {\r\n if (this._listenersAttached) return;\r\n this._listenersAttached = true;\r\n const root = this.root;\r\n\r\n // Filtro - delega input\r\n root.addEventListener('input', (e) => {\r\n const t = e.target as HTMLElement;\r\n if (t.classList.contains('filter-input')) {\r\n this.filterValue = (t as HTMLInputElement).value;\r\n }\r\n });\r\n\r\n // Selecionar todos - delega change\r\n root.addEventListener('change', (e) => {\r\n const t = e.target as HTMLElement;\r\n if (t.classList.contains('select-all-checkbox')) {\r\n this._toggleSelectAll();\r\n }\r\n });\r\n\r\n // Clique - delega click nos botoes (itens anexados direto em cada render)\r\n root.addEventListener('click', (e) => {\r\n const target = e.target as HTMLElement;\r\n const btn = target.closest('.control-btn') as HTMLButtonElement;\r\n if (btn) {\r\n this._handleMoveAction(btn.dataset.action);\r\n }\r\n });\r\n\r\n // Drag and drop\r\n // Drag and drop - delega no root\r\n let dragOverElement: HTMLElement | null = null;\r\n root.addEventListener('dragstart', (e) => {\r\n const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\r\n if (!target) return;\r\n this._draggedIndex = Number(target.dataset.index);\r\n target.classList.add('dragging');\r\n (e as DragEvent).dataTransfer!.effectAllowed = 'move';\r\n });\r\n root.addEventListener('dragend', (e) => {\r\n const target = e.target as HTMLElement;\r\n target.classList.remove('dragging');\r\n this._draggedIndex = null;\r\n root.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));\r\n dragOverElement = null;\r\n });\r\n root.addEventListener('dragover', (e) => {\r\n e.preventDefault();\r\n const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\r\n if (!target || target.classList.contains('dragging')) return;\r\n if (dragOverElement) dragOverElement.classList.remove('drag-over');\r\n target.classList.add('drag-over');\r\n dragOverElement = target;\r\n });\r\n root.addEventListener('drop', (e) => {\r\n e.preventDefault();\r\n if (this._draggedIndex === null) return;\r\n const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\r\n if (!target) return;\r\n const toIndex = Number(target.dataset.index);\r\n target.classList.remove('drag-over');\r\n dragOverElement = null;\r\n this._moveItem(this._draggedIndex, toIndex);\r\n this._draggedIndex = null;\r\n });\r\n this._updateControlsState();\r\n }\r\n\r\n private _attachItemListeners(list: HTMLElement): void {\r\n if (!list) return;\r\n list.addEventListener('click', (e) => {\r\n const target = e.target as HTMLElement;\r\n const itemEl = target.closest('.list-item') as HTMLElement;\r\n if (!itemEl) return;\r\n if (target.classList.contains('checkbox')) {\r\n e.stopPropagation();\r\n const idxC = Number(itemEl.dataset.index);\r\n this._toggleSelection(this._getDisplayData()[idxC]);\r\n return;\r\n }\r\n const idxI = Number(itemEl.dataset.index);\r\n this._toggleSelection(this._getDisplayData()[idxI]);\r\n });\r\n list.addEventListener('keydown', (e) => {\r\n const target = e.target as HTMLElement;\r\n if (!target.classList.contains('list-item')) return;\r\n const items = Array.from(list.querySelectorAll('.list-item')) as HTMLElement[];\r\n const currentIndex = items.indexOf(target);\r\n const ke = e as KeyboardEvent;\r\n switch (ke.key) {\r\n case 'ArrowUp':\r\n e.preventDefault();\r\n if (currentIndex > 0) items[currentIndex - 1].focus();\r\n break;\r\n case 'ArrowDown':\r\n e.preventDefault();\r\n if (currentIndex < items.length - 1) items[currentIndex + 1].focus();\r\n break;\r\n case ' ':\r\n case 'Enter':\r\n e.preventDefault();\r\n if (this.selectionMode) {\r\n const index = Number(target.dataset.index);\r\n this._toggleSelection(this._getDisplayData()[index]);\r\n }\r\n break;\r\n }\r\n });\r\n }\r\n private _updateListDisplay(): void {\r\n const listWrapper = this.root.querySelector('.list-wrapper');\r\n if (!listWrapper) {\r\n this.render();\r\n return;\r\n }\r\n const displayData = this._getDisplayData();\r\n const hasSelection = this.selectionMode;\r\n const hasMultipleSelection = this.selectionMode === 'multiple';\r\n const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\r\n\r\n listWrapper.innerHTML = `\r\n ${hasMultipleSelection && this.showSelectAll ? `\r\n <div class=\"select-all-bar\" part=\"select-all-bar\">\r\n <label>\r\n <input type=\"checkbox\" class=\"select-all-checkbox\"\r\n ${allSelected ? 'checked' : ''}\r\n aria-label=\"Selecionar todos\" />\r\n Selecionar Todos\r\n </label>\r\n <span class=\"selection-count\">${this._selection.length} selecionado(s)</span>\r\n </div>\r\n ` : ''}\r\n <ul class=\"list\" part=\"list\" role=\"listbox\"\r\n aria-multiselectable=\"${hasMultipleSelection}\"\r\n tabindex=\"0\">\r\n ${displayData.length === 0 ? `\r\n <li class=\"empty-message\" part=\"empty-message\">\r\n ${this.filter ? 'Nenhum resultado encontrado' : 'Nenhum item disponivel'}\r\n </li>\r\n ` : displayData.map((item, index) => {\r\n const key = this._getItemKey(item, index);\r\n const label = this._getItemLabel(item);\r\n const isSelected = this._isSelected(item);\r\n const content = this._optionTemplate ? this._optionTemplate(item) : esc(label);\r\n return `\r\n <li class=\"list-item${isSelected ? ' selected' : ''}\" part=\"list-item\"\r\n data-index=\"${index}\" data-key=\"${esc(key)}\"\r\n role=\"option\" aria-selected=\"${isSelected}\"\r\n ${this.dragdrop ? 'draggable=\"true\"' : ''}\r\n tabindex=\"0\">\r\n ${this.dragdrop ? '<span class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Arrastar\">\\u22EE\\u22EE</span>' : ''}\r\n ${hasSelection ? `\r\n <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\"\r\n ${isSelected ? 'checked' : ''}\r\n aria-label=\"Selecionar ${esc(label)}\" />\r\n ` : ''}\r\n <span class=\"item-content\" part=\"item-content\">${content}</span>\r\n </li>\r\n `;\r\n }).join('')}\r\n </ul>\r\n `;\r\n this._attachListeners();\r\n this._attachItemListeners(this.root.querySelector('.list') as HTMLElement);\r\n }\r\n\r\n\r\n private _handleMoveAction(action: string | undefined): void {\r\n if (!this._selection.length) return;\r\n const displayData = this._getDisplayData();\r\n const selectedIndices = this._selection\r\n .map(s => displayData.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(s, -1)))\r\n .filter(i => i >= 0)\r\n .sort((a, b) => a - b);\r\n\r\n if (selectedIndices.length === 0) return;\r\n\r\n switch (action) {\r\n case 'top':\r\n this._moveSelectedToStart(selectedIndices);\r\n break;\r\n case 'up':\r\n this._moveSelectedByOne(selectedIndices, -1);\r\n break;\r\n case 'down':\r\n this._moveSelectedByOne(selectedIndices, 1);\r\n break;\r\n case 'bottom':\r\n this._moveSelectedToEnd(selectedIndices);\r\n break;\r\n }\r\n }\r\n\r\n private _moveSelectedToStart(indices: number[]): void {\r\n const items: OrderListItem[] = [];\r\n const actualIndices: number[] = [];\r\n\r\n for (const idx of indices) {\r\n const actualIdx = this._getActualIndex(idx);\r\n items.push(this._data[actualIdx]);\r\n actualIndices.push(actualIdx);\r\n }\r\n\r\n actualIndices.sort((a, b) => b - a).forEach(i => this._data.splice(i, 1));\r\n\r\n const insertIdx = this._getActualIndex(0);\r\n this._data.splice(insertIdx, 0, ...items);\r\n\r\n this._applyFilter();\r\n this._updateListDisplay();\r\n this._updateControlsState();\r\n this._emitReorder();\r\n }\r\n\r\n private _moveSelectedToEnd(indices: number[]): void {\r\n const items: OrderListItem[] = [];\r\n const actualIndices: number[] = [];\r\n\r\n for (const idx of indices) {\r\n const actualIdx = this._getActualIndex(idx);\r\n items.push(this._data[actualIdx]);\r\n actualIndices.push(actualIdx);\r\n }\r\n\r\n actualIndices.sort((a, b) => b - a).forEach(i => this._data.splice(i, 1));\r\n\r\n const displayData = this._getDisplayData();\r\n const insertIdx = this._getActualIndex(displayData.length - 1);\r\n this._data.splice(insertIdx + 1, 0, ...items);\r\n\r\n this._applyFilter();\r\n this._updateListDisplay();\r\n this._updateControlsState();\r\n this._emitReorder();\r\n }\r\n\r\n private _moveSelectedByOne(indices: number[], delta: number): void {\r\n const displayData = this._getDisplayData();\r\n if (displayData.length === 0) return;\r\n\r\n // Get actual indices in _data array and sort them\r\n const actualIndices = indices\r\n .map(idx => this._getActualIndex(idx))\r\n .filter(idx => idx >= 0)\r\n .sort((a, b) => a - b);\r\n\r\n if (actualIndices.length === 0) return;\r\n\r\n // Check if movement is possible\r\n if (delta < 0 && actualIndices[0] <= 0) return;\r\n if (delta > 0 && actualIndices[actualIndices.length - 1] >= this._data.length - 1) return;\r\n\r\n // Extract selected items in order\r\n const selectedItems = actualIndices.map(idx => this._data[idx]);\r\n\r\n // Remove selected items from data (from highest to lowest to preserve indices)\r\n for (let i = actualIndices.length - 1; i >= 0; i--) {\r\n this._data.splice(actualIndices[i], 1);\r\n }\r\n\r\n // Calculate new insertion point\r\n let insertIndex: number;\r\n if (delta < 0) {\r\n // Moving up: insert before the first selected item position\r\n insertIndex = actualIndices[0] - 1;\r\n } else {\r\n // Moving down: insert after the last selected item position\r\n // Since we removed items, we need to adjust\r\n insertIndex = actualIndices[actualIndices.length - 1] - actualIndices.length + 1 + 1;\r\n }\r\n\r\n // Ensure insertIndex is within bounds\r\n insertIndex = Math.max(0, Math.min(insertIndex, this._data.length));\r\n\r\n // Insert items at new position\r\n this._data.splice(insertIndex, 0, ...selectedItems);\r\n\r\n this._applyFilter();\r\n this._updateListDisplay();\r\n this._updateControlsState();\r\n this._emitReorder();\r\n }\r\n\r\n private _updateControlsState(): void {\r\n const displayData = this._getDisplayData();\r\n const selectedIndices = this._selection\r\n .map(s => displayData.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(s, -1)))\r\n .filter(i => i >= 0);\r\n\r\n const buttons = this.root.querySelectorAll<HTMLButtonElement>('.control-btn');\r\n buttons.forEach(btn => {\r\n const action = btn.dataset.action;\r\n let disabled = selectedIndices.length === 0;\r\n\r\n if (!disabled) {\r\n switch (action) {\r\n case 'top':\r\n case 'up':\r\n disabled = selectedIndices[0] === 0;\r\n break;\r\n case 'bottom':\r\n case 'down':\r\n disabled = selectedIndices[selectedIndices.length - 1] === displayData.length - 1;\r\n break;\r\n }\r\n }\r\n\r\n btn.disabled = disabled;\r\n });\r\n }\r\n}\r\n\r\nfunction esc(s: string): string {\r\n return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');\r\n}\r\n\r\nexport function defineFxOrderList(): typeof FxOrderList {\r\n return defineElement('fx-orderlist', FxOrderList);\r\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: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 20%, transparent); }\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: 0 0 0 3px color-mix(in srgb, var(--orderlist-primary) 30%, transparent); }\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(): void {\n if (this.getAttr('data', '') !== '') {\n this._parseDataAttribute();\n }\n super.attributeChangedCallback();\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 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/pagination/index.ts"],"sourcesContent":["import { FxPagination, defineFxPagination } from './pagination';\n\nexport { FxPagination };\n\n\ndefineFxPagination();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'fx-pagination': FxPagination;\n }\n}\n\r\n"],"names":[],"mappings":";;AAKA,mBAAA;"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/pagination/index.ts"],"sourcesContent":["import { FxPagination, defineFxPagination } from './pagination';\n\nexport { FxPagination };\n\n\ndefineFxPagination();\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'fx-pagination': FxPagination;\n }\n}\n\n"],"names":[],"mappings":";;AAKA,mBAAA;"}
@@ -1,4 +1,5 @@
1
1
  import { FxElement } from '../../core/base';
2
+ import '../select';
2
3
  /**
3
4
  * <fx-pagination> — Paginação standalone.
4
5
  *
@@ -1 +1 @@
1
- {"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C;;;;;;GAMG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SAoCpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAAmD;IACrE,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAA2C;IAC7D,IAAI,KAAK,IAAI,MAAM,CAAoD;IACvE,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAA4C;IAC/D,IAAI,IAAI,IAAI,MAAM,CAAqD;IACvE,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAA2C;IAE7D,OAAO,KAAK,KAAK,GAEhB;cAEkB,MAAM,IAAI,IAAI;IA8CjC,OAAO,CAAC,IAAI;CAMb;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}
1
+ {"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/pagination/pagination.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,OAAO,WAAW,CAAC;AAEnB;;;;;;GAMG;AACH,qBAAa,YAAa,SAAQ,SAAS;IACzC,OAAgB,MAAM,SA2CpB;IAEF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAEjD;IAED,IAAI,IAAI,IAAI,MAAM,CAAmD;IACrE,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAA2C;IAC7D,IAAI,KAAK,IAAI,MAAM,CAAoD;IACvE,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAA4C;IAC/D,IAAI,IAAI,IAAI,MAAM,CAAqD;IACvE,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,EAA2C;IAE7D,OAAO,KAAK,KAAK,GAEhB;cAEkB,MAAM,IAAI,IAAI;IAgDjC,OAAO,CAAC,IAAI;CAMb;AAED,wBAAgB,kBAAkB,IAAI,OAAO,YAAY,CAExD"}