npm - @wrrdev/fenix-ui - Versions diffs - 1.2.0 → 1.3.0 - Mend

@wrrdev/fenix-ui 1.2.0 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/README.md +33 -3
package/dist/components/datepicker/datepicker.js +4 -4
package/dist/components/datepicker/datepicker.js.map +1 -1
package/dist/components/editor/editor.js +3 -3
package/dist/components/editor/editor.js.map +1 -1
package/dist/components/input/input.d.ts +11 -0
package/dist/components/input/input.d.ts.map +1 -1
package/dist/components/input/input.js +11 -0
package/dist/components/input/input.js.map +1 -1
package/dist/components/multiselect/multiselect.js +1 -1
package/dist/components/multiselect/multiselect.js.map +1 -1
package/dist/components/orderlist/orderlist.js +1 -1
package/dist/components/orderlist/orderlist.js.map +1 -1
package/dist/components/picklist/picklist.js +1 -1
package/dist/components/picklist/picklist.js.map +1 -1
package/dist/components/select/select.js +1 -1
package/dist/components/select/select.js.map +1 -1
package/dist/components/table/table.js +1 -1
package/dist/components/table/table.js.map +1 -1
package/dist/components/textarea/textarea.d.ts +7 -0
package/dist/components/textarea/textarea.d.ts.map +1 -1
package/dist/components/textarea/textarea.js +22 -1
package/dist/components/textarea/textarea.js.map +1 -1
package/dist/core/jsx.d.ts +10 -0
package/dist/core/jsx.d.ts.map +1 -1
package/dist/core/jsx.js.map +1 -1
package/dist/docs/componentes/autocomplete.doc.d.ts.map +1 -1
package/dist/docs/componentes/datepicker.doc.d.ts.map +1 -1
package/dist/docs/componentes/editor.doc.d.ts.map +1 -1
package/dist/docs/componentes/floatlabel.doc.d.ts.map +1 -1
package/dist/docs/componentes/input.doc.d.ts.map +1 -1
package/dist/docs/componentes/multiselect.doc.d.ts.map +1 -1
package/dist/docs/componentes/orderlist.doc.d.ts.map +1 -1
package/dist/docs/componentes/picklist.doc.d.ts.map +1 -1
package/dist/docs/componentes/select.doc.d.ts.map +1 -1
package/dist/docs/componentes/table.doc.d.ts.map +1 -1
package/dist/docs/componentes/textarea.doc.d.ts.map +1 -1
package/dist/docs/shared.d.ts +15 -0
package/dist/docs/shared.d.ts.map +1 -1
package/dist/fenix-ui.umd.min.js +162 -158
package/dist/fenix-ui4.esm.js +45 -13
package/dist/fenix-ui4.esm.js.map +1 -1
package/package.json +1 -1

package/dist/components/input/input.d.ts CHANGED Viewed

@@ -12,6 +12,17 @@ import type { FxInputType } from '../../core/jsx';
  * size, placeholder, disabled, readonly, min, max, step, autofocus,
  * clearable, full (largura 100% acompanhando o elemento pai), icon (nome do
  * glifo Fenix Icons ou emoji/texto livre) e icon-pos (left|right, padrão left).
+ *
+ * Autofill: o <input> real vive no Shadow DOM, então `autocomplete` precisa ser
+ * REPASSADO ao campo interno — sem isso o navegador aplica o default `on` e
+ * preenche o campo com credenciais salvas (heurística "primeiro campo de texto
+ * = usuário"). O default aqui é `off` (mesma escolha do <fx-autocomplete>) e o
+ * atributo declarado no host vence. Quando o autofill for desejado, use os
+ * tokens semânticos: autocomplete="username", "current-password",
+ * "new-password", "one-time-code", "email", "street-address", … O Chrome
+ * IGNORA `off` em type="password" — para login use "current-password" (e
+ * "new-password" no cadastro/troca de senha). `name` e `id` também são
+ * repassados ao campo interno (melhoram a classificação do navegador).
  * Largura: o default (260px; sm 220px / lg 300px) fica no HOST via tokens
  * --fx-input-width(-sm|-lg) — CSS externo, classes e style inline no elemento
  * vencem o default sem precisar de atributo.

package/dist/components/input/input.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA4BlD~~;;;;;;;;;;;;;;;;;;GAkBG~~;AACH,qBAAa,OAAQ,SAAQ,aAAa;IACxC,OAAgB,MAAM,SAuIpB;IAMF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,~~CAOjD~~;IAED,+CAA+C;IAC/C,IAAa,IAAI,IAAI,WAAW,CAE/B;IACD,IAAa,IAAI,CAAC,KAAK,EAAE,WAAW,EAEnC;IAED,wCAAwC;IACxC,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAMlD;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;cAEkB,MAAM,IAAI,IAAI;~~IAgGjC~~,yEAAyE;cACtD,mBAAmB,IAAI,IAAI;CAO/C;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}
1	+ {"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAKxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AA4BlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBAAa,OAAQ,SAAQ,aAAa;IACxC,OAAgB,MAAM,SAuIpB;IAMF,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAWjD;IAED,+CAA+C;IAC/C,IAAa,IAAI,IAAI,WAAW,CAE/B;IACD,IAAa,IAAI,CAAC,KAAK,EAAE,WAAW,EAEnC;IAED,wCAAwC;IACxC,IAAI,IAAI,IAAI,MAAM,CAGjB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,MAAM,EAErB;IAED,IAAI,KAAK,IAAI,MAAM,CAElB;IACD,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,EAMlD;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,KAAK,EAAE,OAAO,EAE1B;IAED,IAAI,SAAS,IAAI,OAAO,CAEvB;IACD,IAAI,SAAS,CAAC,KAAK,EAAE,OAAO,EAE3B;IAED,IAAI,IAAI,IAAI,OAAO,CAElB;IACD,IAAI,IAAI,CAAC,KAAK,EAAE,OAAO,EAEtB;cAEkB,MAAM,IAAI,IAAI;IA0GjC,yEAAyE;cACtD,mBAAmB,IAAI,IAAI;CAO/C;AAED,wBAAgB,aAAa,IAAI,OAAO,OAAO,CAE9C"}

package/dist/components/input/input.js CHANGED Viewed

@@ -39,6 +39,12 @@ const _FxInput = class _FxInput extends FxFormElement {
       "step",
       "clearable",
       "full",
+      // `autocomplete` é observado porque ele vive no campo INTERNO (autofill
+      // do navegador): mudar o atributo no host precisa refletir no <input>.
+      // `name`/`id` idem — os dois descem para o campo interno.
+      "autocomplete",
+      "name",
+      "id",
       "icon",
       "icon-pos",
       "error",
@@ -102,6 +108,9 @@ const _FxInput = class _FxInput extends FxFormElement {
     const min = this.getAttr("min");
     const max = this.getAttr("max");
     const step = this.getAttr("step");
+    const autocomplete = this.getAttr("autocomplete", "off");
+    const name = this.getAttr("name");
+    const id = this.getAttr("id");
     const icon = this.getAttr("icon");
     const iconPos = this.getAttr("icon-pos", "left") === "right" ? "right" : "left";
     const slottedIcon = this.querySelector('[slot="icon"]');
@@ -112,6 +121,8 @@ const _FxInput = class _FxInput extends FxFormElement {
       ${useIconBox ? `<div class="field-icon icon-${iconPos}">` : ""}
       ${useIconBox && iconPos === "left" ? iconContent : ""}
       <input class="field" part="input" type="${esc(type)}"
+        ${name ? `name="${esc(name)}"` : ""} ${id ? `id="${esc(id)}"` : ""}
+        autocomplete="${esc(autocomplete)}"
         ${placeholder ? `placeholder="${esc(placeholder)}"` : ""}
         ${min ? `min="${esc(min)}"` : ""} ${max ? `max="${esc(max)}"` : ""} ${step ? `step="${esc(step)}"` : ""}
       />

package/dist/components/input/input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.js","sources":["../../../src/components/input/input.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\nimport { FENIX_ICON_BASE_CSS, fenixIconHtml } from '../../icons/base-css';\nimport type { FxInputType } from '../../core/jsx';\n\n/*\n Tipos nativos aceitos pelo <fx-input>. Os tipos com semântica própria\n * (file, checkbox, radio, submit, reset, button, image) continuam fora:\n * eles não fazem sentido no componente de texto.\n /\nconst INPUT_TYPES = new Set([\n 'text',\n 'number',\n 'password',\n 'email',\n 'tel',\n 'url',\n 'search',\n 'date',\n 'time',\n 'datetime-local',\n 'month',\n 'week',\n 'color',\n]);\n\nfunction normalizeInputType(value: string): string {\n const type = (value \|\| 'text').toLowerCase();\n return INPUT_TYPES.has(type) ? type : 'text';\n}\n\n/\n <fx-input> — Campo de texto estilizado com os tokens do tema.\n \n Form-Associated Custom Element: dentro de um <form> entra no FormData\n * (via atributo `name`), recebe reset/disable do form, é alvo de\n * `<label for>`/`autofocus` e o Enter submete o form.\n \n Atributos: type (text\|number\|password\|email\|tel\|url\|search\|date\|time\|\n * datetime-local\|month\|week\|color), value, name,\n * size, placeholder, disabled, readonly, min, max, step, autofocus,\n * clearable, full (largura 100% acompanhando o elemento pai), icon (nome do\n * glifo Fenix Icons ou emoji/texto livre) e icon-pos (left\|right, padrão left).\n * Largura: o default (260px; sm 220px / lg 300px) fica no HOST via tokens\n * --fx-input-width(-sm\|-lg) — CSS externo, classes e style inline no elemento\n * vencem o default sem precisar de atributo.\n * Slots: `icon` (ícone customizado no lugar do atributo).\n * Eventos: `input`, `change` e `valueChange` (composed, detail: { value }) —\n * `input` aciona o v-model do Vue e `valueChange` o [(value)] do Angular.\n /\nexport class FxInput extends FxFormElement {\n static override styles = css`\n :host {\n display: inline-block;\n vertical-align: middle;\n / Largura padrão no HOST (e não no .field interno): assim CSS externo,\n classes do framework (ex.: w-full) e style inline no elemento vencem\n este default naturalmente — regras do documento têm precedência sobre\n :host. Default global trocável via token: --fx-input-width (-sm/-lg). /\n width: var(--fx-input-width, 260px);\n vertical-align: middle;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n }\n .field {\n font-family: inherit;\n font-size: inherit;\n / Altura determinística: com line-height fixo, o padding vertical cabe no\n token --fx-size-* e a caixa fica EXATAMENTE no tamanho padrão\n (sm 32 / md 40 / lg 48), igual para todos os campos. /\n line-height: var(--fx-font-line-height);\n min-height: var(--fx-size-md);\n font-weight: var(--fx-font-weight);\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 padding: var(--fx-space-sm) var(--fx-space-lg);\n / Acompanha a largura definida no :host. /\n width: 100%;\n box-sizing: border-box;\n transition:\n border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n .field::placeholder { color: var(--fx-text-muted); opacity: 1; }\n .field:hover { border-color: var(--fx-border-hover); }\n .field:focus-visible {\n outline: none;\n border-color: var(--fx-color-primary);\n box-shadow: var(--fx-effect-focus-ring, none);\n }\n .field:disabled,\n .field[readonly] {\n opacity: 0.55;\n cursor: not-allowed;\n background-color: var(--fx-surface-surface-hover);\n }\n / Validação: borda sempre; o brilho (anel) segue o token do preset\n --fx-effect-error-ring, que acompanha effect.focus-ring — anel\n desligado ⇒ erro só com a borda vermelha, ligado ⇒ soma o brilho. /\n :host([error]) .field,\n :host([invalid]) .field,\n :host([error]) .field:focus-visible,\n :host([invalid]) .field:focus-visible {\n border-color: var(--fx-color-danger, #dc2626);\n box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n }\n :host([success]) .field,\n :host([valid]) .field,\n :host([success]) .field:focus-visible,\n :host([valid]) .field:focus-visible {\n border-color: var(--fx-color-success, #16a34a);\n box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n }\n :host([size='sm']) { width: var(--fx-input-width-sm, 220px); }\n :host([size='sm']) .field { padding: var(--fx-space-xs) var(--fx-space-md); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }\n :host([size='lg']) { width: var(--fx-input-width-lg, 300px); }\n :host([size='lg']) .field { padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }\n / Full width: o host estica até o pai e o campo interno acompanha\n (usar com um container de largura controlada, ex. w-full no Vue). /\n :host([full]) { display: block; width: 100%; }\n :host([full]) .field { width: 100%; }\n / Clearable /\n :host([clearable]) { position: relative; display: inline-flex; }\n :host([clearable][full]) { display: block; }\n .wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }\n :host([full]) .wrap { display: flex; width: 100%; }\n :host([clearable]) .field { padding-right: var(--fx-space-xl); }\n :host([clearable][full]) .field { flex: 1 1 auto; }\n / Ícones (attr icon + slot icon) — DENTRO do campo, sobre o padding\n (padrão Material/PrimeVue). Tamanho ajustável via --fx-input-icon-size. /\n .field-icon {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n width: 100%;\n }\n .field-icon .field { flex: 1 1 auto; min-width: 0; }\n :host([full]) .field-icon { display: flex; width: 100%; }\n .field-icon .fx-icon,\n .field-icon ::slotted([slot='icon']) {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px));\n line-height: 1;\n color: var(--fx-text-muted);\n pointer-events: none;\n z-index: 1;\n }\n .field-icon.icon-left .fx-icon,\n .field-icon.icon-left ::slotted([slot='icon']) { left: var(--fx-space-md); }\n .field-icon.icon-right .fx-icon,\n .field-icon.icon-right ::slotted([slot='icon']) { right: var(--fx-space-md); }\n / padding = posição do ícone + largura + folga extra para o texto\n não colar no glifo. /\n .field-icon.icon-left .field {\n padding-left: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));\n }\n .field-icon.icon-right .field {\n padding-right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));\n }\n / icon-pos right + clearable: desloca o × para não sobrepor o ícone. /\n .field-icon.icon-right + .clear {\n right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-lg));\n }\n .clear {\n position: absolute;\n right: var(--fx-space-xs);\n border: none;\n background: transparent;\n color: var(--fx-text-muted);\n font-size: calc(var(--fx-font-size) + 4px);\n line-height: 1;\n cursor: pointer;\n padding: 0 var(--fx-space-xs);\n border-radius: var(--fx-radius-full);\n }\n .clear:hover { color: var(--fx-color-danger); }\n .clear[hidden] { display: none; }\n / Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). /\n ${FENIX_ICON_BASE_CSS}\n `;\n\n // `value` fica FORA da observação: refleti-lo a cada tecla não pode\n // re-renderizar o template, senão o campo perde o foco ao digitar.\n // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n static override get observedAttributes(): string[] {\n return [\n 'type', 'size', 'placeholder',\n 'disabled', 'readonly', 'min', 'max', 'step',\n 'clearable', 'full',\n 'icon', 'icon-pos', 'error', 'invalid', 'success', 'valid',\n ];\n }\n\n /* Tipo do input interno. Padrão: `'text'`. /\n override get type(): FxInputType {\n return normalizeInputType(this.getAttr('type', 'text')) as FxInputType;\n }\n override set type(value: FxInputType) {\n this.setAttribute('type', normalizeInputType(value));\n }\n\n /* Tamanho do campo. Padrão: `'md'`. /\n get size(): string {\n const s = this.getAttr('size', 'md');\n return s === 'sm' \|\| s === 'lg' ? s : 'md';\n }\n set size(value: string) {\n this.setAttribute('size', value);\n }\n\n get value(): string {\n return this.getAttr('value');\n }\n set value(value: string \| number \| null \| undefined) {\n this.setAttribute('value', value == null ? '' : String(value));\n // `value` NÃO é observado (re-render a cada tecla perderia o foco): o\n // campo interno é sincronizado aqui, sem re-render, preservando foco/cursor.\n this.syncInternalControl();\n this.updateFormValue();\n }\n\n get disabled(): boolean {\n return this.hasAttr('disabled');\n }\n set disabled(value: boolean) {\n this.toggleAttr('disabled', Boolean(value));\n }\n\n get readonly(): boolean {\n return this.hasAttr('readonly');\n }\n set readonly(value: boolean) {\n this.toggleAttr('readonly', Boolean(value));\n }\n\n get clearable(): boolean {\n return this.hasAttr('clearable');\n }\n set clearable(value: boolean) {\n this.toggleAttr('clearable', Boolean(value));\n }\n\n get full(): boolean {\n return this.hasAttr('full');\n }\n set full(value: boolean) {\n this.toggleAttr('full', Boolean(value));\n }\n\n protected override render(): void {\n const type = this.type;\n const placeholder = this.getAttr('placeholder');\n const readonly = this.hasAttr('readonly');\n const disabled = this.hasAttr('disabled');\n const min = this.getAttr('min');\n const max = this.getAttr('max');\n const step = this.getAttr('step');\n const icon = this.getAttr('icon');\n const iconPos = this.getAttr('icon-pos', 'left') === 'right' ? 'right' : 'left';\n // Slot `icon` vence o atributo `icon`; sem nenhum dos dois, sem ícone.\n const slottedIcon = this.querySelector<HTMLElement>('[slot=\"icon\"]');\n const iconContent = slottedIcon\n ? '<slot name=\"icon\" part=\"icon\"></slot>'\n : (icon ? fenixIconHtml(icon) : '');\n const useIconBox = Boolean(iconContent);\n\n this.setTemplate(`\n ${this.hasAttr('clearable') ? '<div class=\"wrap\" part=\"wrap\">' : ''}\n ${useIconBox ? `<div class=\"field-icon icon-${iconPos}\">` : ''}\n ${useIconBox && iconPos === 'left' ? iconContent : ''}\n <input class=\"field\" part=\"input\" type=\"${esc(type)}\"\n ${placeholder ? `placeholder=\"${esc(placeholder)}\"` : ''}\n ${min ? `min=\"${esc(min)}\"` : ''} ${max ? `max=\"${esc(max)}\"` : ''} ${step ? `step=\"${esc(step)}\"` : ''}\n />\n ${useIconBox && iconPos === 'right' ? iconContent : ''}\n ${useIconBox ? '</div>' : ''}\n ${this.hasAttr('clearable') ? '<button type=\"button\" class=\"clear\" part=\"clear\" aria-label=\"Limpar\" tabindex=\"-1\">×</button></div>' : ''}\n `);\n\n const field = this.root.querySelector<HTMLInputElement>('.field');\n if (!field) return;\n field.value = this.getAttr('value');\n if (disabled) field.setAttribute('disabled', '');\n if (readonly) field.setAttribute('readonly', '');\n\n // Cada interação emite UM `input` (v-model) + `valueChange` (Angular).\n // O `change` só existe no evento nativo de mudança/limpar.\n const notifyInput = (): void => {\n this.value = field.value;\n this.emitValueEvents();\n };\n const notifyChange = (): void => {\n this.value = field.value;\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { value: field.value },\n }),\n );\n };\n // Bloqueia o evento nativo (composed, sem detail) para que só o\n // CustomEvent com detail chegue aos consumidores.\n field.addEventListener('input', (e) => { e.stopPropagation(); notifyInput(); });\n field.addEventListener('change', (e) => { e.stopPropagation(); notifyChange(); });\n\n // Enter submete o form: o <input> interno vive no Shadow DOM e NÃO se\n // associa ao <form> do light DOM (a fronteira do shadow corta a associação\n // por árvore) — por isso a submissão implícita é acionada manualmente.\n // Ouvintes de submit no form (ex.: submit.prevent de frameworks) seguem\n // recebendo o evento normalmente.\n field.addEventListener('keydown', (e) => {\n if (e.key !== 'Enter' \|\| e.isComposing) return;\n if (!this.form) return;\n e.preventDefault();\n this.form.requestSubmit();\n });\n\n // Clearable: botão × que limpa o campo e emite input/change vazios.\n const clearBtn = this.root.querySelector<HTMLButtonElement>('.clear');\n const syncClear = (): void => {\n clearBtn?.toggleAttribute('hidden', field.value === '');\n };\n syncClear();\n clearBtn?.addEventListener('click', () => {\n field.value = '';\n syncClear();\n this.value = '';\n this.emitValueEvents();\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { value: '' },\n }),\n );\n field.focus();\n });\n field.addEventListener('input', syncClear);\n\n // Publica name/value no form (ElementInternals) a cada render — cobre o\n // estado inicial e mudanças de atributos observados.\n this.updateFormValue();\n }\n\n /* Empurra o atributo `value` para o campo interno sem re-renderizar. */\n protected override syncInternalControl(): void {\n const field = this.root.querySelector<HTMLInputElement>('.field');\n const value = this.getAttr('value');\n const type = this.type;\n if (field && field.type !== type) field.type = type;\n if (field && field.value !== value) field.value = value;\n }\n}\n\nexport function defineFxInput(): typeof FxInput {\n return defineElement('fx-input', FxInput);\n}\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"input.js","sources":["../../../src/components/input/input.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\nimport { FENIX_ICON_BASE_CSS, fenixIconHtml } from '../../icons/base-css';\nimport type { FxInputType } from '../../core/jsx';\n\n/*\n Tipos nativos aceitos pelo <fx-input>. Os tipos com semântica própria\n * (file, checkbox, radio, submit, reset, button, image) continuam fora:\n * eles não fazem sentido no componente de texto.\n /\nconst INPUT_TYPES = new Set([\n 'text',\n 'number',\n 'password',\n 'email',\n 'tel',\n 'url',\n 'search',\n 'date',\n 'time',\n 'datetime-local',\n 'month',\n 'week',\n 'color',\n]);\n\nfunction normalizeInputType(value: string): string {\n const type = (value \|\| 'text').toLowerCase();\n return INPUT_TYPES.has(type) ? type : 'text';\n}\n\n/\n <fx-input> — Campo de texto estilizado com os tokens do tema.\n \n Form-Associated Custom Element: dentro de um <form> entra no FormData\n * (via atributo `name`), recebe reset/disable do form, é alvo de\n * `<label for>`/`autofocus` e o Enter submete o form.\n \n Atributos: type (text\|number\|password\|email\|tel\|url\|search\|date\|time\|\n * datetime-local\|month\|week\|color), value, name,\n * size, placeholder, disabled, readonly, min, max, step, autofocus,\n * clearable, full (largura 100% acompanhando o elemento pai), icon (nome do\n * glifo Fenix Icons ou emoji/texto livre) e icon-pos (left\|right, padrão left).\n \n Autofill: o <input> real vive no Shadow DOM, então `autocomplete` precisa ser\n * REPASSADO ao campo interno — sem isso o navegador aplica o default `on` e\n * preenche o campo com credenciais salvas (heurística \"primeiro campo de texto\n * = usuário\"). O default aqui é `off` (mesma escolha do <fx-autocomplete>) e o\n * atributo declarado no host vence. Quando o autofill for desejado, use os\n * tokens semânticos: autocomplete=\"username\", \"current-password\",\n * \"new-password\", \"one-time-code\", \"email\", \"street-address\", … O Chrome\n * IGNORA `off` em type=\"password\" — para login use \"current-password\" (e\n * \"new-password\" no cadastro/troca de senha). `name` e `id` também são\n * repassados ao campo interno (melhoram a classificação do navegador).\n * Largura: o default (260px; sm 220px / lg 300px) fica no HOST via tokens\n * --fx-input-width(-sm\|-lg) — CSS externo, classes e style inline no elemento\n * vencem o default sem precisar de atributo.\n * Slots: `icon` (ícone customizado no lugar do atributo).\n * Eventos: `input`, `change` e `valueChange` (composed, detail: { value }) —\n * `input` aciona o v-model do Vue e `valueChange` o [(value)] do Angular.\n /\nexport class FxInput extends FxFormElement {\n static override styles = css`\n :host {\n display: inline-block;\n vertical-align: middle;\n / Largura padrão no HOST (e não no .field interno): assim CSS externo,\n classes do framework (ex.: w-full) e style inline no elemento vencem\n este default naturalmente — regras do documento têm precedência sobre\n :host. Default global trocável via token: --fx-input-width (-sm/-lg). /\n width: var(--fx-input-width, 260px);\n vertical-align: middle;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n }\n .field {\n font-family: inherit;\n font-size: inherit;\n / Altura determinística: com line-height fixo, o padding vertical cabe no\n token --fx-size-* e a caixa fica EXATAMENTE no tamanho padrão\n (sm 32 / md 40 / lg 48), igual para todos os campos. /\n line-height: var(--fx-font-line-height);\n min-height: var(--fx-size-md);\n font-weight: var(--fx-font-weight);\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 padding: var(--fx-space-sm) var(--fx-space-lg);\n / Acompanha a largura definida no :host. /\n width: 100%;\n box-sizing: border-box;\n transition:\n border-color var(--fx-motion-duration-normal) var(--fx-motion-easing),\n box-shadow var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n .field::placeholder { color: var(--fx-text-muted); opacity: 1; }\n .field:hover { border-color: var(--fx-border-hover); }\n .field:focus-visible {\n outline: none;\n border-color: var(--fx-color-primary);\n box-shadow: var(--fx-effect-focus-ring, none);\n }\n .field:disabled,\n .field[readonly] {\n opacity: 0.55;\n cursor: not-allowed;\n background-color: var(--fx-surface-surface-hover);\n }\n / Validação: borda sempre; o brilho (anel) segue o token do preset\n --fx-effect-error-ring, que acompanha effect.focus-ring — anel\n desligado ⇒ erro só com a borda vermelha, ligado ⇒ soma o brilho. /\n :host([error]) .field,\n :host([invalid]) .field,\n :host([error]) .field:focus-visible,\n :host([invalid]) .field:focus-visible {\n border-color: var(--fx-color-danger, #dc2626);\n box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n }\n :host([success]) .field,\n :host([valid]) .field,\n :host([success]) .field:focus-visible,\n :host([valid]) .field:focus-visible {\n border-color: var(--fx-color-success, #16a34a);\n box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n }\n :host([size='sm']) { width: var(--fx-input-width-sm, 220px); }\n :host([size='sm']) .field { padding: var(--fx-space-xs) var(--fx-space-md); font-size: var(--fx-font-size); min-height: var(--fx-size-sm); }\n :host([size='lg']) { width: var(--fx-input-width-lg, 300px); }\n :host([size='lg']) .field { padding: var(--fx-space-sm) var(--fx-space-xl); font-size: calc(var(--fx-font-size) + 4px); min-height: var(--fx-size-lg); }\n / Full width: o host estica até o pai e o campo interno acompanha\n (usar com um container de largura controlada, ex. w-full no Vue). /\n :host([full]) { display: block; width: 100%; }\n :host([full]) .field { width: 100%; }\n / Clearable /\n :host([clearable]) { position: relative; display: inline-flex; }\n :host([clearable][full]) { display: block; }\n .wrap { position: relative; display: inline-flex; align-items: center; width: 100%; }\n :host([full]) .wrap { display: flex; width: 100%; }\n :host([clearable]) .field { padding-right: var(--fx-space-xl); }\n :host([clearable][full]) .field { flex: 1 1 auto; }\n / Ícones (attr icon + slot icon) — DENTRO do campo, sobre o padding\n (padrão Material/PrimeVue). Tamanho ajustável via --fx-input-icon-size. /\n .field-icon {\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n width: 100%;\n }\n .field-icon .field { flex: 1 1 auto; min-width: 0; }\n :host([full]) .field-icon { display: flex; width: 100%; }\n .field-icon .fx-icon,\n .field-icon ::slotted([slot='icon']) {\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px));\n line-height: 1;\n color: var(--fx-text-muted);\n pointer-events: none;\n z-index: 1;\n }\n .field-icon.icon-left .fx-icon,\n .field-icon.icon-left ::slotted([slot='icon']) { left: var(--fx-space-md); }\n .field-icon.icon-right .fx-icon,\n .field-icon.icon-right ::slotted([slot='icon']) { right: var(--fx-space-md); }\n / padding = posição do ícone + largura + folga extra para o texto\n não colar no glifo. /\n .field-icon.icon-left .field {\n padding-left: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));\n }\n .field-icon.icon-right .field {\n padding-right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-md) + var(--fx-space-sm));\n }\n / icon-pos right + clearable: desloca o × para não sobrepor o ícone. /\n .field-icon.icon-right + .clear {\n right: calc(var(--fx-input-icon-size, calc(var(--fx-font-size) + 6px)) + var(--fx-space-lg));\n }\n .clear {\n position: absolute;\n right: var(--fx-space-xs);\n border: none;\n background: transparent;\n color: var(--fx-text-muted);\n font-size: calc(var(--fx-font-size) + 4px);\n line-height: 1;\n cursor: pointer;\n padding: 0 var(--fx-space-xs);\n border-radius: var(--fx-radius-full);\n }\n .clear:hover { color: var(--fx-color-danger); }\n .clear[hidden] { display: none; }\n / Base dos glifos Fenix Icons (o @font-face vem de @wrrdev/fenix-ui/icons). /\n ${FENIX_ICON_BASE_CSS}\n `;\n\n // `value` fica FORA da observação: refleti-lo a cada tecla não pode\n // re-renderizar o template, senão o campo perde o foco ao digitar.\n // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n static override get observedAttributes(): string[] {\n return [\n 'type', 'size', 'placeholder',\n 'disabled', 'readonly', 'min', 'max', 'step',\n 'clearable', 'full',\n // `autocomplete` é observado porque ele vive no campo INTERNO (autofill\n // do navegador): mudar o atributo no host precisa refletir no <input>.\n // `name`/`id` idem — os dois descem para o campo interno.\n 'autocomplete', 'name', 'id',\n 'icon', 'icon-pos', 'error', 'invalid', 'success', 'valid',\n ];\n }\n\n /* Tipo do input interno. Padrão: `'text'`. /\n override get type(): FxInputType {\n return normalizeInputType(this.getAttr('type', 'text')) as FxInputType;\n }\n override set type(value: FxInputType) {\n this.setAttribute('type', normalizeInputType(value));\n }\n\n /* Tamanho do campo. Padrão: `'md'`. /\n get size(): string {\n const s = this.getAttr('size', 'md');\n return s === 'sm' \|\| s === 'lg' ? s : 'md';\n }\n set size(value: string) {\n this.setAttribute('size', value);\n }\n\n get value(): string {\n return this.getAttr('value');\n }\n set value(value: string \| number \| null \| undefined) {\n this.setAttribute('value', value == null ? '' : String(value));\n // `value` NÃO é observado (re-render a cada tecla perderia o foco): o\n // campo interno é sincronizado aqui, sem re-render, preservando foco/cursor.\n this.syncInternalControl();\n this.updateFormValue();\n }\n\n get disabled(): boolean {\n return this.hasAttr('disabled');\n }\n set disabled(value: boolean) {\n this.toggleAttr('disabled', Boolean(value));\n }\n\n get readonly(): boolean {\n return this.hasAttr('readonly');\n }\n set readonly(value: boolean) {\n this.toggleAttr('readonly', Boolean(value));\n }\n\n get clearable(): boolean {\n return this.hasAttr('clearable');\n }\n set clearable(value: boolean) {\n this.toggleAttr('clearable', Boolean(value));\n }\n\n get full(): boolean {\n return this.hasAttr('full');\n }\n set full(value: boolean) {\n this.toggleAttr('full', Boolean(value));\n }\n\n protected override render(): void {\n const type = this.type;\n const placeholder = this.getAttr('placeholder');\n const readonly = this.hasAttr('readonly');\n const disabled = this.hasAttr('disabled');\n const min = this.getAttr('min');\n const max = this.getAttr('max');\n const step = this.getAttr('step');\n // Autofill: quem o navegador enxerga é o <input> interno, então o atributo\n // do HOST é repassado; sem ele, `off` (evita o preenchimento heurístico de\n // credenciais — ver o JSDoc da classe).\n const autocomplete = this.getAttr('autocomplete', 'off');\n // `name`/`id` também descem (classificação do navegador). O `name` do host\n // continua sendo o que entra no FormData via ElementInternals.\n const name = this.getAttr('name');\n const id = this.getAttr('id');\n const icon = this.getAttr('icon');\n const iconPos = this.getAttr('icon-pos', 'left') === 'right' ? 'right' : 'left';\n // Slot `icon` vence o atributo `icon`; sem nenhum dos dois, sem ícone.\n const slottedIcon = this.querySelector<HTMLElement>('[slot=\"icon\"]');\n const iconContent = slottedIcon\n ? '<slot name=\"icon\" part=\"icon\"></slot>'\n : (icon ? fenixIconHtml(icon) : '');\n const useIconBox = Boolean(iconContent);\n\n this.setTemplate(`\n ${this.hasAttr('clearable') ? '<div class=\"wrap\" part=\"wrap\">' : ''}\n ${useIconBox ? `<div class=\"field-icon icon-${iconPos}\">` : ''}\n ${useIconBox && iconPos === 'left' ? iconContent : ''}\n <input class=\"field\" part=\"input\" type=\"${esc(type)}\"\n ${name ? `name=\"${esc(name)}\"` : ''} ${id ? `id=\"${esc(id)}\"` : ''}\n autocomplete=\"${esc(autocomplete)}\"\n ${placeholder ? `placeholder=\"${esc(placeholder)}\"` : ''}\n ${min ? `min=\"${esc(min)}\"` : ''} ${max ? `max=\"${esc(max)}\"` : ''} ${step ? `step=\"${esc(step)}\"` : ''}\n />\n ${useIconBox && iconPos === 'right' ? iconContent : ''}\n ${useIconBox ? '</div>' : ''}\n ${this.hasAttr('clearable') ? '<button type=\"button\" class=\"clear\" part=\"clear\" aria-label=\"Limpar\" tabindex=\"-1\">×</button></div>' : ''}\n `);\n\n const field = this.root.querySelector<HTMLInputElement>('.field');\n if (!field) return;\n field.value = this.getAttr('value');\n if (disabled) field.setAttribute('disabled', '');\n if (readonly) field.setAttribute('readonly', '');\n\n // Cada interação emite UM `input` (v-model) + `valueChange` (Angular).\n // O `change` só existe no evento nativo de mudança/limpar.\n const notifyInput = (): void => {\n this.value = field.value;\n this.emitValueEvents();\n };\n const notifyChange = (): void => {\n this.value = field.value;\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { value: field.value },\n }),\n );\n };\n // Bloqueia o evento nativo (composed, sem detail) para que só o\n // CustomEvent com detail chegue aos consumidores.\n field.addEventListener('input', (e) => { e.stopPropagation(); notifyInput(); });\n field.addEventListener('change', (e) => { e.stopPropagation(); notifyChange(); });\n\n // Enter submete o form: o <input> interno vive no Shadow DOM e NÃO se\n // associa ao <form> do light DOM (a fronteira do shadow corta a associação\n // por árvore) — por isso a submissão implícita é acionada manualmente.\n // Ouvintes de submit no form (ex.: submit.prevent de frameworks) seguem\n // recebendo o evento normalmente.\n field.addEventListener('keydown', (e) => {\n if (e.key !== 'Enter' \|\| e.isComposing) return;\n if (!this.form) return;\n e.preventDefault();\n this.form.requestSubmit();\n });\n\n // Clearable: botão × que limpa o campo e emite input/change vazios.\n const clearBtn = this.root.querySelector<HTMLButtonElement>('.clear');\n const syncClear = (): void => {\n clearBtn?.toggleAttribute('hidden', field.value === '');\n };\n syncClear();\n clearBtn?.addEventListener('click', () => {\n field.value = '';\n syncClear();\n this.value = '';\n this.emitValueEvents();\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { value: '' },\n }),\n );\n field.focus();\n });\n field.addEventListener('input', syncClear);\n\n // Publica name/value no form (ElementInternals) a cada render — cobre o\n // estado inicial e mudanças de atributos observados.\n this.updateFormValue();\n }\n\n /* Empurra o atributo `value` para o campo interno sem re-renderizar. */\n protected override syncInternalControl(): void {\n const field = this.root.querySelector<HTMLInputElement>('.field');\n const value = this.getAttr('value');\n const type = this.type;\n if (field && field.type !== type) field.type = type;\n if (field && field.value !== value) field.value = value;\n }\n}\n\nexport function defineFxInput(): typeof FxInput {\n return defineElement('fx-input', FxInput);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/multiselect/multiselect.js CHANGED Viewed

@@ -188,7 +188,7 @@ const _FxMultiselect = class _FxMultiselect extends FxFormElement {
           <span class="count">${chips.length} selecionado${chips.length === 1 ? "" : "s"}</span>
           ${this.hasAttr("clearable") && chips.length ? '<button type="button" class="clear-all">Limpar tudo</button>' : ""}
         </div>
-        ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" placeholder="${esc(this.getAttr("search-placeholder", "Pesquisar…"))}">` : ""}
+        ${this.hasAttr("searchable") ? `<input class="search" part="search" type="text" autocomplete="off" placeholder="${esc(this.getAttr("search-placeholder", "Pesquisar…"))}">` : ""}
         <ul class="list">
           ${filtered.map((o) => `
             <li><button type="button" class="opt" role="option" data-value="${esc(o.value)}"

package/dist/components/multiselect/multiselect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"multiselect.js","sources":["../../../src/components/multiselect/multiselect.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/*\n <fx-multiselect> — Seleção múltipla .\n \n Form-Associated Custom Element: dentro de um <form> entra no FormData com\n * UMA entrada por valor selecionado (via atributo `name`).\n \n Dropdown customizado com painel (overlay), checkbox por item, pesquisa\n * opcional e ação de limpar. Opções via <option> nativos no light DOM.\n \n Atributos: values (CSV), searchable, clearable, disabled, placeholder,\n * size (sm\|md\|lg), no-results.\n * Eventos: `change` e `valuesChange` (composed, detail: { values: string[] }) —\n * `valuesChange` é o two-way binding do Angular [(value)] em seleção múltipla.\n /\nexport class FxMultiselect extends FxFormElement {\n static override styles = css`\n :host {\n display: inline-block;\n vertical-align: middle;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n position: relative;\n / Largura padrão no HOST: CSS externo, classes e style inline no elemento\n vencem este default naturalmente (regras do documento > :host). /\n width: var(--fx-multiselect-width, 240px);\n }\n .trigger {\n display: inline-flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--fx-space-xs);\n / Acompanha a largura definida no :host. /\n width: 100%;\n box-sizing: border-box;\n min-height: var(--fx-size-md);\n padding: var(--fx-space-xs) var(--fx-space-md);\n font: inherit;\n / Altura determinística: a caixa fica no token --fx-size-. /\n line-height: var(--fx-font-line-height);\n color: var(--fx-text-default);\n background-color: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n cursor: pointer;\n text-align: left;\n transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n /* Área dos chips: encolhe e quebra linha internamente,\n mantendo os ícones sempre dentro do componente. /\n .lead {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--fx-space-xs);\n flex: 1;\n min-width: 0;\n overflow: hidden;\n }\n :host([size='sm']) { width: var(--fx-multiselect-width-sm, 200px); }\n :host([size='sm']) .trigger { min-height: var(--fx-size-sm); }\n :host([size='lg']) { width: var(--fx-multiselect-width-lg, 280px); }\n :host([size='lg']) .trigger { min-height: var(--fx-size-lg); font-size: calc(var(--fx-font-size) + 4px); }\n / Full width: o host estica até o pai e o trigger acompanha. /\n :host([full]) { display: block; width: 100%; }\n :host([full]) .trigger { width: 100%; }\n / Validação — borda e brilho JÁ EM REPOUSO (igual ao fx-input); o brilho\n segue o token --fx-effect-error-ring, que acompanha effect.focus-ring. /\n :host([error]) .trigger,\n :host([invalid]) .trigger {\n border-color: var(--fx-color-danger, #dc2626);\n box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n }\n :host([error]) .trigger:focus-visible,\n :host([invalid]) .trigger:focus-visible,\n :host([error][open]) .trigger,\n :host([invalid][open]) .trigger {\n border-color: var(--fx-color-danger, #dc2626);\n box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n }\n :host([success]) .trigger,\n :host([valid]) .trigger {\n border-color: var(--fx-color-success, #16a34a);\n box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n }\n :host([success]) .trigger:focus-visible,\n :host([valid]) .trigger:focus-visible,\n :host([success][open]) .trigger,\n :host([valid][open]) .trigger {\n border-color: var(--fx-color-success, #16a34a);\n box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n }\n .trigger:hover { border-color: var(--fx-border-hover); }\n .trigger:focus-visible {\n outline: none;\n border-color: var(--fx-color-primary);\n box-shadow: var(--fx-effect-focus-ring, none);\n }\n .trigger[aria-expanded='true'] { border-color: var(--fx-color-primary); }\n .placeholder { color: var(--fx-text-muted); }\n .chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent);\n color: var(--fx-color-primary);\n border-radius: var(--fx-radius-sm);\n padding: 2px 6px;\n font-size: calc(var(--fx-font-size) - 2px);\n }\n .chip__x {\n border: none;\n background: none;\n color: inherit;\n cursor: pointer;\n font-size: calc(var(--fx-font-size) - 1px);\n line-height: 1;\n padding: 0;\n }\n .trigger-right {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n color: var(--fx-text-muted);\n }\n .icon-btn {\n border: none;\n background: none;\n color: inherit;\n cursor: pointer;\n font-size: calc(var(--fx-font-size) + 2px);\n line-height: 1;\n padding: 0 2px;\n border-radius: var(--fx-radius-full);\n }\n .icon-btn:hover { color: var(--fx-color-danger); }\n .caret {\n font-size: calc(var(--fx-font-size) - 3px);\n transition: transform var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n :host([open]) .caret { transform: rotate(180deg); }\n\n / Painel (overlay ) /\n .panel {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n z-index: var(--fx-z-dropdown, 1000);\n width: max(100%, 240px);\n background: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n box-shadow: var(--fx-shadow-lg);\n display: none;\n overflow: hidden;\n }\n :host([up]) .panel {\n top: auto;\n bottom: calc(100% + 4px);\n }\n :host([open]) .panel { display: block; }\n .panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--fx-space-sm);\n padding: var(--fx-space-xs) var(--fx-space-md);\n border-bottom: 1px solid var(--fx-border-default);\n background: var(--fx-surface-surface-hover);\n }\n .count { font-size: calc(var(--fx-font-size) - 2px); color: var(--fx-text-muted); }\n .clear-all {\n border: none;\n background: none;\n font: inherit;\n font-size: calc(var(--fx-font-size) - 2px);\n color: var(--fx-color-primary);\n cursor: pointer;\n padding: 0;\n }\n .clear-all:hover { text-decoration: underline; }\n .search {\n width: 100%;\n box-sizing: border-box;\n font: inherit;\n color: var(--fx-text-default);\n background: var(--fx-surface-background);\n border: none;\n border-bottom: 1px solid var(--fx-border-default);\n padding: var(--fx-space-sm) var(--fx-space-md);\n outline: none;\n }\n .list {\n max-height: 240px;\n overflow-y: auto;\n list-style: none;\n margin: 0;\n padding: var(--fx-space-3xs, 4px);\n }\n .opt {\n display: flex;\n align-items: center;\n gap: var(--fx-space-sm);\n width: 100%;\n padding: var(--fx-space-xs) var(--fx-space-md);\n border: none;\n background: none;\n font: inherit;\n color: var(--fx-text-default);\n cursor: pointer;\n border-radius: var(--fx-radius-sm);\n text-align: left;\n }\n .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, transparent); }\n .opt[aria-selected='true'] {\n background: color-mix(in srgb, var(--fx-color-primary) 16%, transparent);\n color: var(--fx-color-primary);\n font-weight: var(--fx-font-weight);\n }\n / Checkbox visual /\n .box {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--fx-border-default);\n border-radius: calc(var(--fx-radius-sm) / 2);\n font-size: 11px;\n line-height: 1;\n color: transparent;\n transition:\n background-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .opt[aria-selected='true'] .box {\n background: var(--fx-color-primary);\n border-color: var(--fx-color-primary);\n color: #fff;\n }\n .opt[aria-selected='true'] .box::after { content: '✓'; }\n .empty { padding: var(--fx-space-md); color: var(--fx-text-muted); text-align: center; }\n :host([disabled]) .trigger { opacity: 0.55; cursor: not-allowed; background: var(--fx-surface-surface-hover); }\n `;\n\n static override get observedAttributes(): string[] {\n // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n return [\n 'values',\n 'size',\n 'disabled',\n 'placeholder',\n 'searchable',\n 'clearable',\n 'full',\n 'error',\n 'invalid',\n 'success',\n 'valid',\n ];\n }\n\n private observer?: MutationObserver;\n private docListener?: (e: Event) => void;\n private selected = new Set<string>();\n /* Seleção inicial (para form.reset() restaurar o estado). /\n private _initialValues?: string[];\n\n protected override attributeChangedCallback(name: string, oldValue: string \| null, newValue: string \| null): void {\n // `values` pode chegar como atributo (HTML puro) ou propriedade (Vue).\n // Sincroniza o estado interno antes do render da base.\n if (name === 'values') this.selected = new Set(this.values);\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n /* Valores selecionados (CSV no atributo / array na propriedade). /\n get values(): string[] {\n const csv = this.getAttr('values');\n return csv ? csv.split(',').map((v) => v.trim()).filter(Boolean) : [];\n }\n set values(list: string[] \| null \| undefined) {\n const values = Array.isArray(list) ? list.map(String) : [];\n // O estado interno precisa acompanhar o binding `:values` do Vue — só\n // refletir o atributo deixava a UI desatualizada.\n this.selected = new Set(values);\n const csv = values.join(',');\n if (this.getAttr('values') !== csv) {\n this.setAttribute('values', csv); // observado → render\n } else if (this.isConnected) {\n this.render();\n }\n this.updateFormValue();\n }\n\n /* No FormData do form: uma entrada `name` por valor selecionado. /\n protected override getFormValue(): string \| FormData \| null {\n const values = this.values;\n if (!this.name \|\| values.length === 0) return null;\n const fd = new FormData();\n values.forEach((v) => fd.append(this.name, v));\n return fd;\n }\n\n get disabled(): boolean {\n return this.hasAttr('disabled');\n }\n set disabled(value: boolean) {\n this.toggleAttr('disabled', Boolean(value));\n }\n\n get searchable(): boolean {\n return this.hasAttr('searchable');\n }\n set searchable(value: boolean) {\n this.toggleAttr('searchable', Boolean(value));\n }\n\n get clearable(): boolean {\n return this.hasAttr('clearable');\n }\n set clearable(value: boolean) {\n this.toggleAttr('clearable', Boolean(value));\n }\n\n get full(): boolean {\n return this.hasAttr('full');\n }\n set full(value: boolean) {\n this.toggleAttr('full', Boolean(value));\n }\n\n private get options(): { value: string; label: string }[] {\n return [...this.querySelectorAll('option')].map((o) => ({\n value: o.getAttribute('value') ?? o.textContent?.trim() ?? '',\n label: o.textContent?.trim() ?? '',\n }));\n }\n\n protected override connectedCallback(): void {\n // Popula a seleção ANTES do primeiro render (super chama render).\n this.selected = new Set(this.values);\n if (!this._initialValues) this._initialValues = [...this.values];\n super.connectedCallback();\n this.observer = new MutationObserver(() => this.render());\n this.observer.observe(this, {\n childList: true,\n subtree: true,\n characterData: true,\n // Vue atualiza `:value`/`:selected` das <option> no light DOM; sem\n // observar atributos o label/valor antigo permanecia em tela.\n attributes: true,\n attributeFilter: ['value', 'selected'],\n });\n this.docListener = (e: Event) => {\n if (!this.hasAttr('open')) return;\n if (e.composedPath().includes(this)) return;\n this.removeAttribute('open');\n this.render();\n };\n document.addEventListener('click', this.docListener);\n }\n\n protected override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.observer?.disconnect();\n if (this.docListener) document.removeEventListener('click', this.docListener);\n }\n\n /* Aplica a seleção, reflete e emite change. /\n private commit(): void {\n // `values` é observado e renderiza quando o CSV muda (uma única vez).\n const next = [...this.selected];\n const same = next.join(',') === this.values.join(',');\n this.values = next;\n if (same && this.isConnected) this.render();\n this.updateFormValue();\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { values: [...this.selected] },\n }),\n );\n // Two-way binding do Angular: [(value)] em selecao multipla -> valuesChange.\n this.dispatchEvent(\n new CustomEvent('valuesChange', {\n bubbles: true,\n composed: true,\n detail: { values: [...this.selected] },\n }),\n );\n }\n\n /* form.reset(): restaura a seleção inicial. /\n override formResetCallback(): void {\n const initial = this._initialValues ?? [];\n // `values` sincroniza `selected` e renderiza (uma vez) quando muda.\n this.values = initial;\n this.updateFormValue();\n }\n\n private toggleValue(value: string): void {\n if (this.selected.has(value)) this.selected.delete(value);\n else this.selected.add(value);\n this.commit();\n }\n\n /* Navegação por teclado entre as opções do listbox (WCAG 2.1.1). */\n private _navigateOptions(e: KeyboardEvent): void {\n e.preventDefault();\n if (!this.hasAttr('open')) {\n this.toggleAttribute('open');\n this.render();\n }\n const opts = Array.from(this.root.querySelectorAll<HTMLButtonElement>('.opt'));\n if (!opts.length) return;\n const current = opts.indexOf(this.root.activeElement as HTMLButtonElement);\n let next = 0;\n if (e.key === 'ArrowDown') next = current === -1 ? 0 : Math.min(current + 1, opts.length - 1);\n else if (e.key === 'ArrowUp') next = current === -1 ? opts.length - 1 : Math.max(current - 1, 0);\n else if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = opts.length - 1;\n opts[next]?.focus();\n }\n\n protected override render(): void {\n const wasOpen = this.hasAttr('open');\n // Preserva o estado do campo de pesquisa entre re-renders.\n const search = this.root.querySelector<HTMLInputElement>('.search')?.value ?? '';\n\n const opts = this.options;\n // Só remove valores órfãos quando as opções já chegaram: com `v-for`\n // (opções depois do valor), limpar aqui apagaria a seleção controlada.\n if (opts.length > 0) {\n for (const v of [...this.selected]) {\n if (!opts.some((o) => o.value === v)) this.selected.delete(v);\n }\n }\n\n const chips = opts.filter((o) => this.selected.has(o.value));\n const placeholder = this.getAttr('placeholder', 'Selecione…');\n const filtered = search\n ? opts.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))\n : opts;\n\n this.setTemplate(`\n <span class=\"trigger\" part=\"trigger\" role=\"button\" tabindex=\"${this.disabled ? -1 : 0}\" aria-haspopup=\"listbox\" aria-expanded=\"${wasOpen}\" aria-disabled=\"${this.disabled}\">\n <span class=\"lead\">\n ${\n chips.length\n ? chips.map((c) => `\n <span class=\"chip\" data-value=\"${esc(c.value)}\">\n ${esc(c.label)}\n <span class=\"chip__x\" role=\"button\" aria-label=\"Remover ${esc(c.label)}\">×</span>\n </span>`).join('')\n : `<span class=\"placeholder\">${esc(placeholder)}</span>`\n }\n </span>\n <span class=\"trigger-right\">\n ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"icon-btn clear\" part=\"clear\" aria-label=\"Limpar seleção\">×</button>' : ''}\n <span class=\"caret\">▼</span>\n </span>\n </span>\n <div class=\"panel\" part=\"panel\" role=\"listbox\" aria-multiselectable=\"true\">\n <div class=\"panel-header\">\n <span class=\"count\">${chips.length} selecionado${chips.length === 1 ? '' : 's'}</span>\n ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"clear-all\">Limpar tudo</button>' : ''}\n </div>\n ${this.hasAttr('searchable') ? `<input class=\"search\" part=\"search\" type=\"text\" placeholder=\"${esc(this.getAttr('search-placeholder', 'Pesquisar…'))}\">` : ''}\n <ul class=\"list\">\n ${filtered.map((o) => `\n <li><button type=\"button\" class=\"opt\" role=\"option\" data-value=\"${esc(o.value)}\"\n aria-selected=\"${this.selected.has(o.value)}\">\n <span class=\"box\" aria-hidden=\"true\"></span>${esc(o.label)}\n </button></li>`).join('')}\n ${filtered.length === 0 ? `<li class=\"empty\">${esc(this.getAttr('no-results', 'Nenhum resultado'))}</li>` : ''}\n </ul>\n </div>\n `);\n\n // Reabre o painel se estava aberto antes do re-render.\n if (wasOpen) this.setAttribute('open', '');\n\n const searchInput = this.root.querySelector<HTMLInputElement>('.search');\n if (searchInput) {\n searchInput.value = search;\n // Preserva foco e posição do cursor entre os re-renders da digitação.\n searchInput.addEventListener('input', () => {\n const pos = searchInput.selectionStart ?? searchInput.value.length;\n this.render();\n const si = this.root.querySelector<HTMLInputElement>('.search');\n if (si) {\n si.focus();\n si.setSelectionRange(pos, pos);\n }\n });\n searchInput.addEventListener('click', (e) => e.stopPropagation());\n }\n\n const trigger = this.root.querySelector<HTMLElement>('.trigger');\n if (!trigger) return;\n\n trigger.addEventListener('click', (e) => {\n if (this.disabled) return;\n if ((e.target as HTMLElement).closest('.clear')) return;\n if ((e.target as HTMLElement).closest('.chip__x')) return;\n this.toggleAttribute('open');\n // Flip vertical: se não cabe abaixo, abre para cima.\n if (this.hasAttr('open')) {\n const r = this.getBoundingClientRect();\n this.toggleAttribute('up', r.bottom + 300 > window.innerHeight && r.top > 300);\n } else {\n this.removeAttribute('up');\n }\n this.render();\n });\n\n // Acessibilidade: Enter/Espaço abrem o painel (span role=button); setas navegam.\n trigger.addEventListener('keydown', (e) => {\n if (this.disabled) return;\n if (e.key === 'Enter' \|\| e.key === ' ') {\n e.preventDefault();\n trigger.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n return;\n }\n if (e.key === 'Escape') {\n if (this.hasAttr('open')) {\n this.removeAttribute('open');\n this.render();\n this.root.querySelector<HTMLElement>('.trigger')?.focus();\n }\n return;\n }\n if (e.key === 'ArrowDown' \|\| e.key === 'ArrowUp' \|\| e.key === 'Home' \|\| e.key === 'End') {\n this._navigateOptions(e);\n }\n });\n\n // × de limpar tudo no trigger.\n this.root.querySelector('.clear')?.addEventListener('click', (e) => {\n e.stopPropagation();\n this.selected.clear();\n this.commit();\n });\n\n // \"Limpar tudo\" no cabeçalho do painel.\n this.root.querySelector('.clear-all')?.addEventListener('click', (e) => {\n e.stopPropagation();\n this.selected.clear();\n this.commit();\n });\n\n // Remover chip individual.\n this.root.querySelectorAll<HTMLElement>('.chip').forEach((chip) => {\n chip.querySelector('.chip__x')?.addEventListener('click', (e) => {\n e.stopPropagation();\n this.toggleValue(chip.dataset.value!);\n });\n });\n\n // Alternar opções.\n this.root.querySelectorAll<HTMLElement>('.opt').forEach((opt) => {\n opt.addEventListener('click', () => this.toggleValue(opt.dataset.value!));\n });\n }\n}\n\nexport function defineFxMultiselect(): typeof FxMultiselect {\n return defineElement('fx-multiselect', FxMultiselect);\n}\n\n"],"names":[],"mappings":";;;;AAmBO,MAAM,iBAAN,MAAM,uBAAsB,cAAc;AAAA,EAA1C,cAAA;AAAA,UAAA,GAAA,SAAA;AA4PL,SAAQ,+BAAe,IAAA;AAAA,EAAY;AAAA,EApBnC,WAAoB,qBAA+B;AAGjD,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EAEJ;AAAA,EAQmB,yBAAyB,MAAc,UAAyB,UAA+B;AAGhH,QAAI,SAAS,SAAU,MAAK,WAAW,IAAI,IAAI,KAAK,MAAM;AAC1D,UAAM,yBAAyB,MAAM,UAAU,QAAQ;AAAA,EACzD;AAAA;AAAA,EAGA,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,MAAmC;AAC5C,UAAM,SAAS,MAAM,QAAQ,IAAI,IAAI,KAAK,IAAI,MAAM,IAAI,CAAA;AAGxD,SAAK,WAAW,IAAI,IAAI,MAAM;AAC9B,UAAM,MAAM,OAAO,KAAK,GAAG;AAC3B,QAAI,KAAK,QAAQ,QAAQ,MAAM,KAAK;AAClC,WAAK,aAAa,UAAU,GAAG;AAAA,IACjC,WAAW,KAAK,aAAa;AAC3B,WAAK,OAAA;AAAA,IACP;AACA,SAAK,gBAAA;AAAA,EACP;AAAA;AAAA,EAGmB,eAAyC;AAC1D,UAAM,SAAS,KAAK;AACpB,QAAI,CAAC,KAAK,QAAQ,OAAO,WAAW,EAAG,QAAO;AAC9C,UAAM,KAAK,IAAI,SAAA;AACf,WAAO,QAAQ,CAAC,MAAM,GAAG,OAAO,KAAK,MAAM,CAAC,CAAC;AAC7C,WAAO;AAAA,EACT;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,IAAI,aAAsB;AACxB,WAAO,KAAK,QAAQ,YAAY;AAAA,EAClC;AAAA,EACA,IAAI,WAAW,OAAgB;AAC7B,SAAK,WAAW,cAAc,QAAQ,KAAK,CAAC;AAAA,EAC9C;AAAA,EAEA,IAAI,YAAqB;AACvB,WAAO,KAAK,QAAQ,WAAW;AAAA,EACjC;AAAA,EACA,IAAI,UAAU,OAAgB;AAC5B,SAAK,WAAW,aAAa,QAAQ,KAAK,CAAC;AAAA,EAC7C;AAAA,EAEA,IAAI,OAAgB;AAClB,WAAO,KAAK,QAAQ,MAAM;AAAA,EAC5B;AAAA,EACA,IAAI,KAAK,OAAgB;AACvB,SAAK,WAAW,QAAQ,QAAQ,KAAK,CAAC;AAAA,EACxC;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,QAAI,CAAC,KAAK,eAAgB,MAAK,iBAAiB,CAAC,GAAG,KAAK,MAAM;AAC/D,UAAM,kBAAA;AACN,SAAK,WAAW,IAAI,iBAAiB,MAAM,KAAK,QAAQ;AACxD,SAAK,SAAS,QAAQ,MAAM;AAAA,MAC1B,WAAW;AAAA,MACX,SAAS;AAAA,MACT,eAAe;AAAA;AAAA;AAAA,MAGf,YAAY;AAAA,MACZ,iBAAiB,CAAC,SAAS,UAAU;AAAA,IAAA,CACtC;AACD,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;AAErB,UAAM,OAAO,CAAC,GAAG,KAAK,QAAQ;AAC9B,UAAM,OAAO,KAAK,KAAK,GAAG,MAAM,KAAK,OAAO,KAAK,GAAG;AACpD,SAAK,SAAS;AACd,QAAI,QAAQ,KAAK,YAAa,MAAK,OAAA;AACnC,SAAK,gBAAA;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;AAGH,SAAK;AAAA,MACH,IAAI,YAAY,gBAAgB;AAAA,QAC9B,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ,EAAE,QAAQ,CAAC,GAAG,KAAK,QAAQ,EAAA;AAAA,MAAE,CACtC;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGS,oBAA0B;AACjC,UAAM,UAAU,KAAK,kBAAkB,CAAA;AAEvC,SAAK,SAAS;AACd,SAAK,gBAAA;AAAA,EACP;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;AAAA,EAGQ,iBAAiB,GAAwB;AAC/C,MAAE,eAAA;AACF,QAAI,CAAC,KAAK,QAAQ,MAAM,GAAG;AACzB,WAAK,gBAAgB,MAAM;AAC3B,WAAK,OAAA;AAAA,IACP;AACA,UAAM,OAAO,MAAM,KAAK,KAAK,KAAK,iBAAoC,MAAM,CAAC;AAC7E,QAAI,CAAC,KAAK,OAAQ;AAClB,UAAM,UAAU,KAAK,QAAQ,KAAK,KAAK,aAAkC;AACzE,QAAI,OAAO;AACX,QAAI,EAAE,QAAQ,YAAa,QAAO,YAAY,KAAK,IAAI,KAAK,IAAI,UAAU,GAAG,KAAK,SAAS,CAAC;AAAA,aACnF,EAAE,QAAQ,UAAW,QAAO,YAAY,KAAK,KAAK,SAAS,IAAI,KAAK,IAAI,UAAU,GAAG,CAAC;AAAA,aACtF,EAAE,QAAQ,OAAQ,QAAO;AAAA,aACzB,EAAE,QAAQ,MAAO,QAAO,KAAK,SAAS;AAC/C,SAAK,IAAI,GAAG,MAAA;AAAA,EACd;AAAA,EAEmB,SAAe;AAChC,UAAM,UAAU,KAAK,QAAQ,MAAM;AAEnC,UAAM,SAAS,KAAK,KAAK,cAAgC,SAAS,GAAG,SAAS;AAE9E,UAAM,OAAO,KAAK;AAGlB,QAAI,KAAK,SAAS,GAAG;AACnB,iBAAW,KAAK,CAAC,GAAG,KAAK,QAAQ,GAAG;AAClC,YAAI,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE,UAAU,CAAC,EAAG,MAAK,SAAS,OAAO,CAAC;AAAA,MAC9D;AAAA,IACF;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,IAAI,EAAE,KAAK,CAAC;AAAA,kBACzC,IAAI,EAAE,KAAK,CAAC;AAAA,0EAC4C,IAAI,EAAE,KAAK,CAAC;AAAA,sBAChE,EAAE,KAAK,EAAE,IACjB,6BAA6B,IAAI,WAAW,CAAC,SACnD;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,IAAI,KAAK,QAAQ,sBAAsB,YAAY,CAAC,CAAC,OAAO,EAAE;AAAA;AAAA,YAEzJ,SAAS,IAAI,CAAC,MAAM;AAAA,8EAC8C,IAAI,EAAE,KAAK,CAAC;AAAA,+BAC3D,KAAK,SAAS,IAAI,EAAE,KAAK,CAAC;AAAA,4DACG,IAAI,EAAE,KAAK,CAAC;AAAA,2BAC7C,EAAE,KAAK,EAAE,CAAC;AAAA,YACzB,SAAS,WAAW,IAAI,qBAAqB,IAAI,KAAK,QAAQ,cAAc,kBAAkB,CAAC,CAAC,UAAU,EAAE;AAAA;AAAA;AAAA,KAGnH;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;AAChE;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,UAAU;AACtB,YAAI,KAAK,QAAQ,MAAM,GAAG;AACxB,eAAK,gBAAgB,MAAM;AAC3B,eAAK,OAAA;AACL,eAAK,KAAK,cAA2B,UAAU,GAAG,MAAA;AAAA,QACpD;AACA;AAAA,MACF;AACA,UAAI,EAAE,QAAQ,eAAe,EAAE,QAAQ,aAAa,EAAE,QAAQ,UAAU,EAAE,QAAQ,OAAO;AACvF,aAAK,iBAAiB,CAAC;AAAA,MACzB;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;AAxiBE,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AADpB,IAAM,gBAAN;AA2iBA,SAAS,sBAA4C;AAC1D,SAAO,cAAc,kBAAkB,aAAa;AACtD;"}
1	+ {"version":3,"file":"multiselect.js","sources":["../../../src/components/multiselect/multiselect.ts"],"sourcesContent":["import { FxFormElement } from '../../core/form-element';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\n/*\n <fx-multiselect> — Seleção múltipla .\n \n Form-Associated Custom Element: dentro de um <form> entra no FormData com\n * UMA entrada por valor selecionado (via atributo `name`).\n \n Dropdown customizado com painel (overlay), checkbox por item, pesquisa\n * opcional e ação de limpar. Opções via <option> nativos no light DOM.\n \n Atributos: values (CSV), searchable, clearable, disabled, placeholder,\n * size (sm\|md\|lg), no-results.\n * Eventos: `change` e `valuesChange` (composed, detail: { values: string[] }) —\n * `valuesChange` é o two-way binding do Angular [(value)] em seleção múltipla.\n /\nexport class FxMultiselect extends FxFormElement {\n static override styles = css`\n :host {\n display: inline-block;\n vertical-align: middle;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n position: relative;\n / Largura padrão no HOST: CSS externo, classes e style inline no elemento\n vencem este default naturalmente (regras do documento > :host). /\n width: var(--fx-multiselect-width, 240px);\n }\n .trigger {\n display: inline-flex;\n align-items: center;\n flex-wrap: nowrap;\n gap: var(--fx-space-xs);\n / Acompanha a largura definida no :host. /\n width: 100%;\n box-sizing: border-box;\n min-height: var(--fx-size-md);\n padding: var(--fx-space-xs) var(--fx-space-md);\n font: inherit;\n / Altura determinística: a caixa fica no token --fx-size-. /\n line-height: var(--fx-font-line-height);\n color: var(--fx-text-default);\n background-color: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n cursor: pointer;\n text-align: left;\n transition: border-color var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n /* Área dos chips: encolhe e quebra linha internamente,\n mantendo os ícones sempre dentro do componente. /\n .lead {\n display: inline-flex;\n flex-wrap: wrap;\n gap: var(--fx-space-xs);\n flex: 1;\n min-width: 0;\n overflow: hidden;\n }\n :host([size='sm']) { width: var(--fx-multiselect-width-sm, 200px); }\n :host([size='sm']) .trigger { min-height: var(--fx-size-sm); }\n :host([size='lg']) { width: var(--fx-multiselect-width-lg, 280px); }\n :host([size='lg']) .trigger { min-height: var(--fx-size-lg); font-size: calc(var(--fx-font-size) + 4px); }\n / Full width: o host estica até o pai e o trigger acompanha. /\n :host([full]) { display: block; width: 100%; }\n :host([full]) .trigger { width: 100%; }\n / Validação — borda e brilho JÁ EM REPOUSO (igual ao fx-input); o brilho\n segue o token --fx-effect-error-ring, que acompanha effect.focus-ring. /\n :host([error]) .trigger,\n :host([invalid]) .trigger {\n border-color: var(--fx-color-danger, #dc2626);\n box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n }\n :host([error]) .trigger:focus-visible,\n :host([invalid]) .trigger:focus-visible,\n :host([error][open]) .trigger,\n :host([invalid][open]) .trigger {\n border-color: var(--fx-color-danger, #dc2626);\n box-shadow: var(--fx-effect-error-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-danger, #dc2626) 18%, transparent));\n }\n :host([success]) .trigger,\n :host([valid]) .trigger {\n border-color: var(--fx-color-success, #16a34a);\n box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n }\n :host([success]) .trigger:focus-visible,\n :host([valid]) .trigger:focus-visible,\n :host([success][open]) .trigger,\n :host([valid][open]) .trigger {\n border-color: var(--fx-color-success, #16a34a);\n box-shadow: var(--fx-effect-success-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-success, #16a34a) 18%, transparent));\n }\n .trigger:hover { border-color: var(--fx-border-hover); }\n .trigger:focus-visible {\n outline: none;\n border-color: var(--fx-color-primary);\n box-shadow: var(--fx-effect-focus-ring, none);\n }\n .trigger[aria-expanded='true'] { border-color: var(--fx-color-primary); }\n .placeholder { color: var(--fx-text-muted); }\n .chip {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n background: color-mix(in srgb, var(--fx-color-primary) 14%, transparent);\n color: var(--fx-color-primary);\n border-radius: var(--fx-radius-sm);\n padding: 2px 6px;\n font-size: calc(var(--fx-font-size) - 2px);\n }\n .chip__x {\n border: none;\n background: none;\n color: inherit;\n cursor: pointer;\n font-size: calc(var(--fx-font-size) - 1px);\n line-height: 1;\n padding: 0;\n }\n .trigger-right {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 4px;\n color: var(--fx-text-muted);\n }\n .icon-btn {\n border: none;\n background: none;\n color: inherit;\n cursor: pointer;\n font-size: calc(var(--fx-font-size) + 2px);\n line-height: 1;\n padding: 0 2px;\n border-radius: var(--fx-radius-full);\n }\n .icon-btn:hover { color: var(--fx-color-danger); }\n .caret {\n font-size: calc(var(--fx-font-size) - 3px);\n transition: transform var(--fx-motion-duration-normal) var(--fx-motion-easing);\n }\n :host([open]) .caret { transform: rotate(180deg); }\n\n / Painel (overlay ) /\n .panel {\n position: absolute;\n top: calc(100% + 4px);\n left: 0;\n z-index: var(--fx-z-dropdown, 1000);\n width: max(100%, 240px);\n background: var(--fx-surface-background);\n border: 1px solid var(--fx-border-default);\n border-radius: var(--fx-radius-md);\n box-shadow: var(--fx-shadow-lg);\n display: none;\n overflow: hidden;\n }\n :host([up]) .panel {\n top: auto;\n bottom: calc(100% + 4px);\n }\n :host([open]) .panel { display: block; }\n .panel-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--fx-space-sm);\n padding: var(--fx-space-xs) var(--fx-space-md);\n border-bottom: 1px solid var(--fx-border-default);\n background: var(--fx-surface-surface-hover);\n }\n .count { font-size: calc(var(--fx-font-size) - 2px); color: var(--fx-text-muted); }\n .clear-all {\n border: none;\n background: none;\n font: inherit;\n font-size: calc(var(--fx-font-size) - 2px);\n color: var(--fx-color-primary);\n cursor: pointer;\n padding: 0;\n }\n .clear-all:hover { text-decoration: underline; }\n .search {\n width: 100%;\n box-sizing: border-box;\n font: inherit;\n color: var(--fx-text-default);\n background: var(--fx-surface-background);\n border: none;\n border-bottom: 1px solid var(--fx-border-default);\n padding: var(--fx-space-sm) var(--fx-space-md);\n outline: none;\n }\n .list {\n max-height: 240px;\n overflow-y: auto;\n list-style: none;\n margin: 0;\n padding: var(--fx-space-3xs, 4px);\n }\n .opt {\n display: flex;\n align-items: center;\n gap: var(--fx-space-sm);\n width: 100%;\n padding: var(--fx-space-xs) var(--fx-space-md);\n border: none;\n background: none;\n font: inherit;\n color: var(--fx-text-default);\n cursor: pointer;\n border-radius: var(--fx-radius-sm);\n text-align: left;\n }\n .opt:hover { background: color-mix(in srgb, var(--fx-color-primary) 12%, transparent); }\n .opt[aria-selected='true'] {\n background: color-mix(in srgb, var(--fx-color-primary) 16%, transparent);\n color: var(--fx-color-primary);\n font-weight: var(--fx-font-weight);\n }\n / Checkbox visual /\n .box {\n width: 16px;\n height: 16px;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: 2px solid var(--fx-border-default);\n border-radius: calc(var(--fx-radius-sm) / 2);\n font-size: 11px;\n line-height: 1;\n color: transparent;\n transition:\n background-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n border-color var(--fx-motion-duration-fast) var(--fx-motion-easing),\n color var(--fx-motion-duration-fast) var(--fx-motion-easing);\n }\n .opt[aria-selected='true'] .box {\n background: var(--fx-color-primary);\n border-color: var(--fx-color-primary);\n color: #fff;\n }\n .opt[aria-selected='true'] .box::after { content: '✓'; }\n .empty { padding: var(--fx-space-md); color: var(--fx-text-muted); text-align: center; }\n :host([disabled]) .trigger { opacity: 0.55; cursor: not-allowed; background: var(--fx-surface-surface-hover); }\n `;\n\n static override get observedAttributes(): string[] {\n // `error`/`success` (+ aliases `invalid`/`valid`) PRECISAM ser observados:\n // é assim que o toggle no playground / setAttribute no submit re-renderiza.\n return [\n 'values',\n 'size',\n 'disabled',\n 'placeholder',\n 'searchable',\n 'clearable',\n 'full',\n 'error',\n 'invalid',\n 'success',\n 'valid',\n ];\n }\n\n private observer?: MutationObserver;\n private docListener?: (e: Event) => void;\n private selected = new Set<string>();\n /* Seleção inicial (para form.reset() restaurar o estado). /\n private _initialValues?: string[];\n\n protected override attributeChangedCallback(name: string, oldValue: string \| null, newValue: string \| null): void {\n // `values` pode chegar como atributo (HTML puro) ou propriedade (Vue).\n // Sincroniza o estado interno antes do render da base.\n if (name === 'values') this.selected = new Set(this.values);\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n /* Valores selecionados (CSV no atributo / array na propriedade). /\n get values(): string[] {\n const csv = this.getAttr('values');\n return csv ? csv.split(',').map((v) => v.trim()).filter(Boolean) : [];\n }\n set values(list: string[] \| null \| undefined) {\n const values = Array.isArray(list) ? list.map(String) : [];\n // O estado interno precisa acompanhar o binding `:values` do Vue — só\n // refletir o atributo deixava a UI desatualizada.\n this.selected = new Set(values);\n const csv = values.join(',');\n if (this.getAttr('values') !== csv) {\n this.setAttribute('values', csv); // observado → render\n } else if (this.isConnected) {\n this.render();\n }\n this.updateFormValue();\n }\n\n /* No FormData do form: uma entrada `name` por valor selecionado. /\n protected override getFormValue(): string \| FormData \| null {\n const values = this.values;\n if (!this.name \|\| values.length === 0) return null;\n const fd = new FormData();\n values.forEach((v) => fd.append(this.name, v));\n return fd;\n }\n\n get disabled(): boolean {\n return this.hasAttr('disabled');\n }\n set disabled(value: boolean) {\n this.toggleAttr('disabled', Boolean(value));\n }\n\n get searchable(): boolean {\n return this.hasAttr('searchable');\n }\n set searchable(value: boolean) {\n this.toggleAttr('searchable', Boolean(value));\n }\n\n get clearable(): boolean {\n return this.hasAttr('clearable');\n }\n set clearable(value: boolean) {\n this.toggleAttr('clearable', Boolean(value));\n }\n\n get full(): boolean {\n return this.hasAttr('full');\n }\n set full(value: boolean) {\n this.toggleAttr('full', Boolean(value));\n }\n\n private get options(): { value: string; label: string }[] {\n return [...this.querySelectorAll('option')].map((o) => ({\n value: o.getAttribute('value') ?? o.textContent?.trim() ?? '',\n label: o.textContent?.trim() ?? '',\n }));\n }\n\n protected override connectedCallback(): void {\n // Popula a seleção ANTES do primeiro render (super chama render).\n this.selected = new Set(this.values);\n if (!this._initialValues) this._initialValues = [...this.values];\n super.connectedCallback();\n this.observer = new MutationObserver(() => this.render());\n this.observer.observe(this, {\n childList: true,\n subtree: true,\n characterData: true,\n // Vue atualiza `:value`/`:selected` das <option> no light DOM; sem\n // observar atributos o label/valor antigo permanecia em tela.\n attributes: true,\n attributeFilter: ['value', 'selected'],\n });\n this.docListener = (e: Event) => {\n if (!this.hasAttr('open')) return;\n if (e.composedPath().includes(this)) return;\n this.removeAttribute('open');\n this.render();\n };\n document.addEventListener('click', this.docListener);\n }\n\n protected override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.observer?.disconnect();\n if (this.docListener) document.removeEventListener('click', this.docListener);\n }\n\n /* Aplica a seleção, reflete e emite change. /\n private commit(): void {\n // `values` é observado e renderiza quando o CSV muda (uma única vez).\n const next = [...this.selected];\n const same = next.join(',') === this.values.join(',');\n this.values = next;\n if (same && this.isConnected) this.render();\n this.updateFormValue();\n this.dispatchEvent(\n new CustomEvent('change', {\n bubbles: true,\n composed: true,\n detail: { values: [...this.selected] },\n }),\n );\n // Two-way binding do Angular: [(value)] em selecao multipla -> valuesChange.\n this.dispatchEvent(\n new CustomEvent('valuesChange', {\n bubbles: true,\n composed: true,\n detail: { values: [...this.selected] },\n }),\n );\n }\n\n /* form.reset(): restaura a seleção inicial. /\n override formResetCallback(): void {\n const initial = this._initialValues ?? [];\n // `values` sincroniza `selected` e renderiza (uma vez) quando muda.\n this.values = initial;\n this.updateFormValue();\n }\n\n private toggleValue(value: string): void {\n if (this.selected.has(value)) this.selected.delete(value);\n else this.selected.add(value);\n this.commit();\n }\n\n /* Navegação por teclado entre as opções do listbox (WCAG 2.1.1). */\n private _navigateOptions(e: KeyboardEvent): void {\n e.preventDefault();\n if (!this.hasAttr('open')) {\n this.toggleAttribute('open');\n this.render();\n }\n const opts = Array.from(this.root.querySelectorAll<HTMLButtonElement>('.opt'));\n if (!opts.length) return;\n const current = opts.indexOf(this.root.activeElement as HTMLButtonElement);\n let next = 0;\n if (e.key === 'ArrowDown') next = current === -1 ? 0 : Math.min(current + 1, opts.length - 1);\n else if (e.key === 'ArrowUp') next = current === -1 ? opts.length - 1 : Math.max(current - 1, 0);\n else if (e.key === 'Home') next = 0;\n else if (e.key === 'End') next = opts.length - 1;\n opts[next]?.focus();\n }\n\n protected override render(): void {\n const wasOpen = this.hasAttr('open');\n // Preserva o estado do campo de pesquisa entre re-renders.\n const search = this.root.querySelector<HTMLInputElement>('.search')?.value ?? '';\n\n const opts = this.options;\n // Só remove valores órfãos quando as opções já chegaram: com `v-for`\n // (opções depois do valor), limpar aqui apagaria a seleção controlada.\n if (opts.length > 0) {\n for (const v of [...this.selected]) {\n if (!opts.some((o) => o.value === v)) this.selected.delete(v);\n }\n }\n\n const chips = opts.filter((o) => this.selected.has(o.value));\n const placeholder = this.getAttr('placeholder', 'Selecione…');\n const filtered = search\n ? opts.filter((o) => o.label.toLowerCase().includes(search.toLowerCase()))\n : opts;\n\n this.setTemplate(`\n <span class=\"trigger\" part=\"trigger\" role=\"button\" tabindex=\"${this.disabled ? -1 : 0}\" aria-haspopup=\"listbox\" aria-expanded=\"${wasOpen}\" aria-disabled=\"${this.disabled}\">\n <span class=\"lead\">\n ${\n chips.length\n ? chips.map((c) => `\n <span class=\"chip\" data-value=\"${esc(c.value)}\">\n ${esc(c.label)}\n <span class=\"chip__x\" role=\"button\" aria-label=\"Remover ${esc(c.label)}\">×</span>\n </span>`).join('')\n : `<span class=\"placeholder\">${esc(placeholder)}</span>`\n }\n </span>\n <span class=\"trigger-right\">\n ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"icon-btn clear\" part=\"clear\" aria-label=\"Limpar seleção\">×</button>' : ''}\n <span class=\"caret\">▼</span>\n </span>\n </span>\n <div class=\"panel\" part=\"panel\" role=\"listbox\" aria-multiselectable=\"true\">\n <div class=\"panel-header\">\n <span class=\"count\">${chips.length} selecionado${chips.length === 1 ? '' : 's'}</span>\n ${this.hasAttr('clearable') && chips.length ? '<button type=\"button\" class=\"clear-all\">Limpar tudo</button>' : ''}\n </div>\n ${this.hasAttr('searchable') ? `<input class=\"search\" part=\"search\" type=\"text\" autocomplete=\"off\" 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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"}

package/dist/components/orderlist/orderlist.js CHANGED Viewed

@@ -279,7 +279,7 @@ const _FxOrderList = class _FxOrderList extends FxElement {
       <div class="container" part="container">
         ${this.filter ? `
           <div class="filter-wrapper" part="filter-wrapper">
-            <input type="text" class="filter-input" part="filter-input"
+            <input type="text" class="filter-input" part="filter-input" autocomplete="off"
               placeholder="${this.filterPlaceholder}"
               value="${esc(this._filterValue)}"
               aria-label="Filtrar lista" />

package/dist/components/orderlist/orderlist.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"orderlist.js","sources":["../../../src/components/orderlist/orderlist.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\nexport interface OrderListItem {\n [key: string]: unknown;\n}\n\n/*\n <fx-orderlist> - Componente para ordenar uma colecao de itens.\n \n Permite reordenar itens arrastando ou usando botoes de controle.\n * Suporta filtro, selecao, checkbox e templates customizados.\n \n Atributos: data, data-key, filter, filter-by, filter-placeholder, breakpoint,\n * dragdrop, selection-mode, striped, show-select-all.\n * Evento: `reorder` (composed, detail: { items }).\n * Evento: `selection-change` (composed, detail: { selection }).\n /\nexport class FxOrderList extends FxElement {\n static override styles = css`\n\n :host {\n display: block;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n --orderlist-primary: var(--fx-color-primary, #3b82f6);\n --orderlist-border: var(--fx-border-default, #e2e8f0);\n --orderlist-bg: var(--fx-surface-background, #ffffff);\n --orderlist-bg-hover: var(--fx-surface-surface-hover, #f1f5f9);\n --orderlist-text: var(--fx-text-default, #1e293b);\n --orderlist-text-muted: var(--fx-text-muted, #64748b);\n --orderlist-radius: var(--fx-radius-md, 8px);\n --orderlist-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n --orderlist-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n { box-sizing: border-box; }\n .container { display: flex; flex-direction: column; gap: var(--fx-space-md, 16px); }\n .list-wrapper { display: flex; flex-direction: column; gap: var(--fx-space-sm, 8px); flex: 1; min-width: 0; }\n .select-all-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: linear-gradient(135deg, var(--orderlist-bg), var(--orderlist-bg-hover)); border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-size: 0.9em; font-weight: 500; }\n .select-all-bar label { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); cursor: pointer; user-select: none; color: var(--orderlist-text); }\n .select-all-bar input[type=\"checkbox\"] { width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; }\n .filter-wrapper { margin-bottom: var(--fx-space-xs, 4px); }\n .filter-input { width: 100%; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); padding-left: 42px; border: 1.5px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-family: inherit; font-size: inherit; color: var(--orderlist-text); background: var(--orderlist-bg) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\") no-repeat 14px center; transition: var(--orderlist-transition); }\n .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: var(--fx-effect-focus-ring, none); }\n .filter-input::placeholder { color: var(--orderlist-text-muted); }\n .main-row { display: flex; align-items: stretch; gap: var(--fx-space-sm, 8px); }\n .list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); overflow: hidden; box-shadow: var(--orderlist-shadow); max-height: 450px; overflow-y: auto; flex: 1; }\n .list::-webkit-scrollbar { width: 6px; }\n .list::-webkit-scrollbar-track { background: transparent; }\n .list::-webkit-scrollbar-thumb { background: var(--orderlist-border); border-radius: 3px; }\n .list::-webkit-scrollbar-thumb:hover { background: var(--orderlist-text-muted); }\n .selection-count { font-size: 0.85em; color: var(--orderlist-primary); background: color-mix(in srgb, var(--orderlist-primary) 12%, transparent); padding: 4px 12px; border-radius: 20px; font-weight: 600; }\n :host([striped]) .list-item:nth-child(even) { background: var(--fx-surface-surface, #f8fafc); }\n .list-item { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: var(--orderlist-bg); border-bottom: 1px solid var(--orderlist-border); cursor: pointer; user-select: none; transition: var(--orderlist-transition); }\n .list-item:last-child { border-bottom: none; }\n .list-item:hover { background: var(--orderlist-bg-hover); }\n .list-item.selected { background: color-mix(in srgb, var(--orderlist-primary) 8%, transparent); border-left: 3px solid var(--orderlist-primary); padding-left: 11px; }\n .list-item:focus-visible { outline: none; background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\n .list-item.dragging { opacity: 0.5; background: var(--orderlist-bg-hover); }\n .list-item.drag-over { border-top: 2px solid var(--orderlist-primary); }\n .drag-handle { color: var(--orderlist-text-muted); cursor: grab; flex-shrink: 0; font-size: 1.2em; opacity: 0.6; transition: var(--orderlist-transition); }\n .drag-handle:hover { opacity: 1; }\n .drag-handle:active { cursor: grabbing; }\n .item-content { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .checkbox { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; transition: var(--orderlist-transition); }\n .checkbox:hover { transform: scale(1.1); }\n .empty-message { padding: var(--fx-space-xl, 32px); text-align: center; color: var(--orderlist-text-muted); font-style: italic; }\n .controls-bar {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: var(--fx-space-xs, 6px);\n background: var(--orderlist-bg);\n border: 1px solid var(--orderlist-border);\n border-radius: var(--orderlist-radius);\n box-shadow: var(--orderlist-shadow);\n height: fit-content;\n position: sticky;\n top: 0;\n align-self: flex-start;\n }\n .control-group { display: flex; flex-direction: column; gap: 3px; }\n .control-group + .control-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--orderlist-border); }\n button.control-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--orderlist-text-muted); cursor: pointer; font-size: 16px; line-height: 1; transition: var(--orderlist-transition); position: relative; }\n button.control-btn:hover:not(:disabled) { background: var(--orderlist-bg-hover); color: var(--orderlist-primary); transform: scale(1.1); }\n button.control-btn:active:not(:disabled) { transform: scale(0.92); background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\n button.control-btn:focus-visible { outline: none; box-shadow: var(--fx-effect-focus-ring, none); }\n button.control-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }\n .control-btn-icon { font-size: 18px; line-height: 1; }\n /* Tooltip nos botoes /\n button.control-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }\n @media (max-width: 640px) { .main-row { flex-direction: column; } .controls-bar { flex-direction: row; flex-wrap: wrap; justify-content: center; position: relative; } .control-group { flex-direction: row; } .control-group + .control-group { margin-top: 0; margin-left: 4px; padding-top: 0; padding-left: 4px; border-top: none; border-left: 1px solid var(--orderlist-border); } button.control-btn { width: 44px; height: 40px; } button.control-btn::after { display: none; } .list { max-height: 300px; } }\n @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }\n .list-item { animation: slideIn 0.2s ease-out; }\n `;\n\n static override get observedAttributes(): string[] {\n return [\n 'data',\n 'items',\n 'data-key',\n 'filter',\n 'filter-by',\n 'filter-placeholder',\n 'breakpoint',\n 'controls-location',\n 'dragdrop',\n 'striped',\n 'selection-mode',\n 'show-select-all',\n ]\n }\n\n set data(value: OrderListItem[]) {\n this._data = Array.isArray(value) ? value : [];\n this._filteredData = null;\n this.render();\n }\n get data(): OrderListItem[] {\n return this._data;\n }\n private _data: OrderListItem[] = [];\n private _filteredData: OrderListItem[] \| null = null;\n\n /\n Alias de `data` para o binding do Vue/React: `data` colide com a\n * tipagem nativa de atributos HTML (`dataset`/`data-`) e não reflete em\n atributo. `items` funciona como propriedade e como atributo JSON.\n */\n get items(): OrderListItem[] {\n return this._data;\n }\n set items(value: OrderListItem[]) {\n const list = Array.isArray(value) ? value : [];\n this._data = list;\n this._filteredData = null;\n\n const json = (() => {\n try {\n return JSON.stringify(list);\n } catch {\n // Itens com referência circular/função não são serializáveis:\n // mantém a propriedade funcionando sem gravar o atributo.\n return null;\n }\n })();\n\n if (json !== null && this.getAttr('items') !== json) this.setAttribute('items', json);\n else if (this.isConnected) this.render();\n }\n\n set selection(value: OrderListItem[]) {\n this._selection = value;\n this.render();\n }\n get selection(): OrderListItem[] {\n return this._selection;\n }\n private _selection: OrderListItem[] = [];\n\n get dataKey(): string {\n return this.getAttr('data-key', '');\n }\n set dataKey(v: string) {\n this.setAttribute('data-key', v);\n }\n\n get filter(): boolean {\n return this.hasAttr('filter');\n }\n set filter(v: boolean) {\n this.toggleAttr('filter', v);\n }\n\n get filterBy(): string {\n return this.getAttr('filter-by', 'label');\n }\n set filterBy(v: string) {\n this.setAttribute('filter-by', v);\n }\n\n get filterPlaceholder(): string {\n return this.getAttr('filter-placeholder', 'Buscar...');\n }\n set filterPlaceholder(v: string) {\n this.setAttribute('filter-placeholder', v);\n }\n\n get breakpoint(): string {\n return this.getAttr('breakpoint', '960px');\n }\n set breakpoint(v: string) {\n this.setAttribute('breakpoint', v);\n }\n\n get dragdrop(): boolean {\n return this.hasAttr('dragdrop');\n }\n set dragdrop(v: boolean) {\n this.toggleAttr('dragdrop', v);\n }\n\n get striped(): boolean {\n return this.hasAttr('striped');\n }\n set striped(v: boolean) {\n this.toggleAttr('striped', v);\n }\n\n get selectionMode(): string {\n const s = this.getAttr('selection-mode', '');\n return s === 'single' \|\| s === 'multiple' ? s : '';\n }\n set selectionMode(v: string) {\n this.setAttribute('selection-mode', v);\n }\n\n get showSelectAll(): boolean {\n return this.hasAttr('show-select-all');\n }\n set showSelectAll(v: boolean) {\n this.toggleAttr('show-select-all', v);\n }\n\n get filterValue(): string {\n return this._filterValue;\n }\n set filterValue(v: string) {\n this._filterValue = v;\n this._applyFilter();\n this._updateListDisplay();\n }\n private _filterValue = '';\n\n private _draggedIndex: number \| null = null;\n private _listenersAttached = false;\n private _optionTemplate: ((item: OrderListItem) => string) \| null = null;\n\n setOptionTemplate(template: (item: OrderListItem) => string): void {\n this._optionTemplate = template;\n this.render();\n }\n\n protected override connectedCallback(): void {\n this._parseDataAttribute();\n super.connectedCallback();\n }\n\n protected override attributeChangedCallback(name: string, oldValue: string \| null, newValue: string \| null): void {\n if (name === 'items') {\n try {\n const parsed = JSON.parse(newValue ?? '[]');\n this._data = Array.isArray(parsed) ? parsed : [];\n this._filteredData = null;\n } catch {\n this._data = [];\n this._filteredData = null;\n }\n } else if (this.getAttr('data', '') !== '') {\n this._parseDataAttribute();\n }\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n private _parseDataAttribute(): void {\n const dataAttr = this.getAttr('data', '');\n if (dataAttr) {\n try {\n this._data = JSON.parse(dataAttr);\n this._filteredData = null;\n } catch {\n this._data = [];\n }\n }\n }\n\n private _applyFilter(): void {\n if (!this._filterValue) {\n this._filteredData = null;\n return;\n }\n const filterFields = this.filterBy.split(',').map(f => f.trim());\n this._filteredData = this._data.filter(item => {\n return filterFields.some(field => {\n const value = item[field];\n if (value == null) return false;\n return String(value).toLowerCase().includes(this._filterValue.toLowerCase());\n });\n });\n }\n\n private _getDisplayData(): OrderListItem[] {\n return this._filteredData \|\| this._data;\n }\n\n private _getItemKey(item: OrderListItem, index: number): string {\n if (this.dataKey && item[this.dataKey] != null) {\n return String(item[this.dataKey]);\n }\n if (item['id'] != null) return String(item['id']);\n if (item['key'] != null) return String(item['key']);\n if (item['label'] != null) return String(item['label']);\n if (item['name'] != null) return String(item['name']);\n if (item['value'] != null) return String(item['value']);\n return String(index);\n }\n\n private _getItemLabel(item: OrderListItem): string {\n const fields = ['label', 'name', 'title', 'text', 'value'];\n for (const field of fields) {\n if (item[field] != null) {\n return String(item[field]);\n }\n }\n return JSON.stringify(item);\n }\n\n private _isSelected(item: OrderListItem): boolean {\n return this._selection.some(s => this._getItemKey(s, -1) === this._getItemKey(item, -1));\n }\n\n private _moveItem(fromIndex: number, toIndex: number): void {\n const actualFrom = this._getActualIndex(fromIndex);\n const actualTo = this._getActualIndex(toIndex);\n if (actualFrom === -1 \|\| actualTo === -1) return;\n const item = this._data.splice(actualFrom, 1)[0];\n this._data.splice(actualTo, 0, item);\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _getActualIndex(displayIndex: number): number {\n if (this._filteredData) {\n const item = this._filteredData[displayIndex];\n return this._data.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(item, -1));\n }\n return displayIndex;\n }\n\n private _emitReorder(): void {\n this.dispatchEvent(new CustomEvent('reorder', {\n bubbles: true,\n composed: true,\n detail: { items: [...this._data] },\n }));\n }\n\n private _emitSelectionChange(): void {\n this.dispatchEvent(new CustomEvent('selection-change', {\n bubbles: true,\n composed: true,\n detail: { selection: [...this._selection] },\n }));\n }\n\n private _toggleSelection(item: OrderListItem): void {\n const key = this._getItemKey(item, -1);\n const index = this._selection.findIndex(s => this._getItemKey(s, -1) === key);\n if (index >= 0) {\n this._selection.splice(index, 1);\n } else if (this.selectionMode === 'multiple') {\n this._selection.push(item);\n } else {\n this._selection = [item];\n }\n this._emitSelectionChange();\n this._updateListDisplay();\n this._updateControlsState();\n }\n\n private _selectAll(): void {\n const displayData = this._getDisplayData();\n this._selection = [...displayData];\n this._emitSelectionChange();\n this._updateListDisplay();\n this._updateControlsState();\n }\n\n private _deselectAll(): void {\n this._selection = [];\n this._emitSelectionChange();\n this._updateListDisplay();\n this._updateControlsState();\n }\n\n private _toggleSelectAll(): void {\n const displayData = this._getDisplayData();\n if (this._selection.length === displayData.length) {\n this._deselectAll();\n } else {\n this._selectAll();\n }\n }\n\n protected override render(): void {\n const displayData = this._getDisplayData();\n const hasSelection = this.selectionMode;\n const hasMultipleSelection = this.selectionMode === 'multiple';\n const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\n\n this.setTemplate(`\n <div class=\"container\" part=\"container\">\n ${this.filter ? `\n <div class=\"filter-wrapper\" part=\"filter-wrapper\">\n <input type=\"text\" class=\"filter-input\" part=\"filter-input\"\n placeholder=\"${this.filterPlaceholder}\"\n value=\"${esc(this._filterValue)}\"\n aria-label=\"Filtrar lista\" />\n </div>\n ` : ''}\n <div class=\"main-row\" part=\"main-row\">\n <div class=\"controls-bar\" part=\"controls-bar\">\n <div class=\"control-group\">\n <button class=\"control-btn\" data-action=\"top\" part=\"control-btn\" aria-label=\"Mover para o inicio\">\n <span class=\"control-btn-icon\">\\u00AB</span>\n </button>\n <button class=\"control-btn\" data-action=\"up\" part=\"control-btn\" aria-label=\"Mover para cima\">\n <span class=\"control-btn-icon\">\\u2191</span>\n </button>\n </div>\n <div class=\"control-group\">\n <button class=\"control-btn\" data-action=\"down\" part=\"control-btn\" aria-label=\"Mover para baixo\">\n <span class=\"control-btn-icon\">\\u2193</span>\n </button>\n <button class=\"control-btn\" data-action=\"bottom\" part=\"control-btn\" aria-label=\"Mover para o fim\">\n <span class=\"control-btn-icon\">\\u00BB</span>\n </button>\n </div>\n </div>\n <div class=\"list-wrapper\" part=\"list-wrapper\">\n ${hasMultipleSelection && this.showSelectAll ? `\n <div class=\"select-all-bar\" part=\"select-all-bar\">\n <label>\n <input type=\"checkbox\" class=\"select-all-checkbox\"\n ${allSelected ? 'checked' : ''}\n aria-label=\"Selecionar todos\" />\n Selecionar Todos\n </label>\n <span class=\"selection-count\">${this._selection.length} selecionado(s)</span>\n </div>\n ` : ''}\n <ul class=\"list\" part=\"list\" role=\"listbox\"\n aria-multiselectable=\"${hasMultipleSelection}\"\n tabindex=\"0\">\n ${displayData.length === 0 ? `\n <li class=\"empty-message\" part=\"empty-message\">\n ${this.filter ? 'Nenhum resultado encontrado' : 'Nenhum item disponivel'}\n </li>\n ` : displayData.map((item, index) => {\n const key = this._getItemKey(item, index);\n const label = this._getItemLabel(item);\n const isSelected = this._isSelected(item);\n const content = this._optionTemplate ? this._optionTemplate(item) : esc(label);\n return `\n <li class=\"list-item${isSelected ? ' selected' : ''}\" part=\"list-item\"\n data-index=\"${index}\" data-key=\"${esc(key)}\"\n role=\"option\" aria-selected=\"${isSelected}\"\n ${this.dragdrop ? 'draggable=\"true\"' : ''}\n tabindex=\"0\">\n ${this.dragdrop ? '<span class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Arrastar\">\\u22EE\\u22EE</span>' : ''}\n ${hasSelection ? `\n <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\"\n ${isSelected ? 'checked' : ''}\n aria-label=\"Selecionar ${esc(label)}\" />\n ` : ''}\n <span class=\"item-content\" part=\"item-content\">${content}</span>\n </li>\n `;\n }).join('')}\n </ul>\n </div>\n </div>\n </div>\n `);\n\n this._attachListeners();\n this._attachItemListeners(this.root.querySelector('.list') as HTMLElement);\n this._updateControlsState();\n }\n\n private _attachListeners(): void {\n if (this._listenersAttached) return;\n this._listenersAttached = true;\n const root = this.root;\n\n // Filtro - delega input\n root.addEventListener('input', (e) => {\n const t = e.target as HTMLElement;\n if (t.classList.contains('filter-input')) {\n this.filterValue = (t as HTMLInputElement).value;\n }\n });\n\n // Selecionar todos - delega change\n root.addEventListener('change', (e) => {\n const t = e.target as HTMLElement;\n if (t.classList.contains('select-all-checkbox')) {\n this._toggleSelectAll();\n }\n });\n\n // Clique - delega click nos botoes (itens anexados direto em cada render)\n root.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n const btn = target.closest('.control-btn') as HTMLButtonElement;\n if (btn) {\n this._handleMoveAction(btn.dataset.action);\n }\n });\n\n // Drag and drop\n // Drag and drop - delega no root\n let dragOverElement: HTMLElement \| null = null;\n root.addEventListener('dragstart', (e) => {\n const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n if (!target) return;\n this._draggedIndex = Number(target.dataset.index);\n target.classList.add('dragging');\n (e as DragEvent).dataTransfer!.effectAllowed = 'move';\n });\n root.addEventListener('dragend', (e) => {\n const target = e.target as HTMLElement;\n target.classList.remove('dragging');\n this._draggedIndex = null;\n root.querySelectorAll('.drag-over').forEach(el => el.classList.remove('drag-over'));\n dragOverElement = null;\n });\n root.addEventListener('dragover', (e) => {\n e.preventDefault();\n const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n if (!target \|\| target.classList.contains('dragging')) return;\n if (dragOverElement) dragOverElement.classList.remove('drag-over');\n target.classList.add('drag-over');\n dragOverElement = target;\n });\n root.addEventListener('drop', (e) => {\n e.preventDefault();\n if (this._draggedIndex === null) return;\n const target = (e.target as HTMLElement).closest('.list-item') as HTMLElement;\n if (!target) return;\n const toIndex = Number(target.dataset.index);\n target.classList.remove('drag-over');\n dragOverElement = null;\n this._moveItem(this._draggedIndex, toIndex);\n this._draggedIndex = null;\n });\n this._updateControlsState();\n }\n\n private _attachItemListeners(list: HTMLElement): void {\n if (!list) return;\n list.addEventListener('click', (e) => {\n const target = e.target as HTMLElement;\n const itemEl = target.closest('.list-item') as HTMLElement;\n if (!itemEl) return;\n if (target.classList.contains('checkbox')) {\n e.stopPropagation();\n const idxC = Number(itemEl.dataset.index);\n this._toggleSelection(this._getDisplayData()[idxC]);\n return;\n }\n const idxI = Number(itemEl.dataset.index);\n this._toggleSelection(this._getDisplayData()[idxI]);\n });\n list.addEventListener('keydown', (e) => {\n const target = e.target as HTMLElement;\n if (!target.classList.contains('list-item')) return;\n const items = Array.from(list.querySelectorAll('.list-item')) as HTMLElement[];\n const currentIndex = items.indexOf(target);\n const ke = e as KeyboardEvent;\n switch (ke.key) {\n case 'ArrowUp':\n e.preventDefault();\n if (currentIndex > 0) items[currentIndex - 1].focus();\n break;\n case 'ArrowDown':\n e.preventDefault();\n if (currentIndex < items.length - 1) items[currentIndex + 1].focus();\n break;\n case ' ':\n case 'Enter':\n e.preventDefault();\n if (this.selectionMode) {\n const index = Number(target.dataset.index);\n this._toggleSelection(this._getDisplayData()[index]);\n }\n break;\n }\n });\n }\n private _updateListDisplay(): void {\n const listWrapper = this.root.querySelector('.list-wrapper');\n if (!listWrapper) {\n this.render();\n return;\n }\n const displayData = this._getDisplayData();\n const hasSelection = this.selectionMode;\n const hasMultipleSelection = this.selectionMode === 'multiple';\n const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\n\n listWrapper.innerHTML = `\n ${hasMultipleSelection && this.showSelectAll ? `\n <div class=\"select-all-bar\" part=\"select-all-bar\">\n <label>\n <input type=\"checkbox\" class=\"select-all-checkbox\"\n ${allSelected ? 'checked' : ''}\n aria-label=\"Selecionar todos\" />\n Selecionar Todos\n </label>\n <span class=\"selection-count\">${this._selection.length} selecionado(s)</span>\n </div>\n ` : ''}\n <ul class=\"list\" part=\"list\" role=\"listbox\"\n aria-multiselectable=\"${hasMultipleSelection}\"\n tabindex=\"0\">\n ${displayData.length === 0 ? `\n <li class=\"empty-message\" part=\"empty-message\">\n ${this.filter ? 'Nenhum resultado encontrado' : 'Nenhum item disponivel'}\n </li>\n ` : displayData.map((item, index) => {\n const key = this._getItemKey(item, index);\n const label = this._getItemLabel(item);\n const isSelected = this._isSelected(item);\n const content = this._optionTemplate ? this._optionTemplate(item) : esc(label);\n return `\n <li class=\"list-item${isSelected ? ' selected' : ''}\" part=\"list-item\"\n data-index=\"${index}\" data-key=\"${esc(key)}\"\n role=\"option\" aria-selected=\"${isSelected}\"\n ${this.dragdrop ? 'draggable=\"true\"' : ''}\n tabindex=\"0\">\n ${this.dragdrop ? '<span class=\"drag-handle\" part=\"drag-handle\" aria-label=\"Arrastar\">\\u22EE\\u22EE</span>' : ''}\n ${hasSelection ? `\n <input type=\"checkbox\" class=\"checkbox\" part=\"checkbox\"\n ${isSelected ? 'checked' : ''}\n aria-label=\"Selecionar ${esc(label)}\" />\n ` : ''}\n <span class=\"item-content\" part=\"item-content\">${content}</span>\n </li>\n `;\n }).join('')}\n </ul>\n `;\n this._attachListeners();\n this._attachItemListeners(this.root.querySelector('.list') as HTMLElement);\n }\n\n\n private _handleMoveAction(action: string \| undefined): void {\n if (!this._selection.length) return;\n const displayData = this._getDisplayData();\n const selectedIndices = this._selection\n .map(s => displayData.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(s, -1)))\n .filter(i => i >= 0)\n .sort((a, b) => a - b);\n\n if (selectedIndices.length === 0) return;\n\n switch (action) {\n case 'top':\n this._moveSelectedToStart(selectedIndices);\n break;\n case 'up':\n this._moveSelectedByOne(selectedIndices, -1);\n break;\n case 'down':\n this._moveSelectedByOne(selectedIndices, 1);\n break;\n case 'bottom':\n this._moveSelectedToEnd(selectedIndices);\n break;\n }\n }\n\n private _moveSelectedToStart(indices: number[]): void {\n const items: OrderListItem[] = [];\n const actualIndices: number[] = [];\n\n for (const idx of indices) {\n const actualIdx = this._getActualIndex(idx);\n items.push(this._data[actualIdx]);\n actualIndices.push(actualIdx);\n }\n\n actualIndices.sort((a, b) => b - a).forEach(i => this._data.splice(i, 1));\n\n const insertIdx = this._getActualIndex(0);\n this._data.splice(insertIdx, 0, ...items);\n\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _moveSelectedToEnd(indices: number[]): void {\n const items: OrderListItem[] = [];\n const actualIndices: number[] = [];\n\n for (const idx of indices) {\n const actualIdx = this._getActualIndex(idx);\n items.push(this._data[actualIdx]);\n actualIndices.push(actualIdx);\n }\n\n actualIndices.sort((a, b) => b - a).forEach(i => this._data.splice(i, 1));\n\n const displayData = this._getDisplayData();\n const insertIdx = this._getActualIndex(displayData.length - 1);\n this._data.splice(insertIdx + 1, 0, ...items);\n\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _moveSelectedByOne(indices: number[], delta: number): void {\n const displayData = this._getDisplayData();\n if (displayData.length === 0) return;\n\n // Get actual indices in _data array and sort them\n const actualIndices = indices\n .map(idx => this._getActualIndex(idx))\n .filter(idx => idx >= 0)\n .sort((a, b) => a - b);\n\n if (actualIndices.length === 0) return;\n\n // Check if movement is possible\n if (delta < 0 && actualIndices[0] <= 0) return;\n if (delta > 0 && actualIndices[actualIndices.length - 1] >= this._data.length - 1) return;\n\n // Extract selected items in order\n const selectedItems = actualIndices.map(idx => this._data[idx]);\n\n // Remove selected items from data (from highest to lowest to preserve indices)\n for (let i = actualIndices.length - 1; i >= 0; i--) {\n this._data.splice(actualIndices[i], 1);\n }\n\n // Calculate new insertion point\n let insertIndex: number;\n if (delta < 0) {\n // Moving up: insert before the first selected item position\n insertIndex = actualIndices[0] - 1;\n } else {\n // Moving down: insert after the last selected item position\n // Since we removed items, we need to adjust\n insertIndex = actualIndices[actualIndices.length - 1] - actualIndices.length + 1 + 1;\n }\n\n // Ensure insertIndex is within bounds\n insertIndex = Math.max(0, Math.min(insertIndex, this._data.length));\n\n // Insert items at new position\n this._data.splice(insertIndex, 0, ...selectedItems);\n\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _updateControlsState(): void {\n const displayData = this._getDisplayData();\n const selectedIndices = this._selection\n .map(s => displayData.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(s, -1)))\n .filter(i => i >= 0);\n\n const buttons = this.root.querySelectorAll<HTMLButtonElement>('.control-btn');\n buttons.forEach(btn => {\n const action = btn.dataset.action;\n let disabled = selectedIndices.length === 0;\n\n if (!disabled) {\n switch (action) {\n case 'top':\n case 'up':\n disabled = selectedIndices[0] === 0;\n break;\n case 'bottom':\n case 'down':\n disabled = selectedIndices[selectedIndices.length - 1] === displayData.length - 1;\n break;\n }\n }\n\n btn.disabled = disabled;\n });\n }\n}\n\nexport function defineFxOrderList(): typeof FxOrderList {\n return defineElement('fx-orderlist', FxOrderList);\n}"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"orderlist.js","sources":["../../../src/components/orderlist/orderlist.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\nimport { css } from '../../core/css';\nimport { defineElement } from '../../core/define';\nimport { esc } from '../../core/sanitize';\n\nexport interface OrderListItem {\n [key: string]: unknown;\n}\n\n/*\n <fx-orderlist> - Componente para ordenar uma colecao de itens.\n \n Permite reordenar itens arrastando ou usando botoes de controle.\n * Suporta filtro, selecao, checkbox e templates customizados.\n \n Atributos: data, data-key, filter, filter-by, filter-placeholder, breakpoint,\n * dragdrop, selection-mode, striped, show-select-all.\n * Evento: `reorder` (composed, detail: { items }).\n * Evento: `selection-change` (composed, detail: { selection }).\n /\nexport class FxOrderList extends FxElement {\n static override styles = css`\n\n :host {\n display: block;\n font-family: var(--fx-font-family);\n font-size: var(--fx-font-size);\n --orderlist-primary: var(--fx-color-primary, #3b82f6);\n --orderlist-border: var(--fx-border-default, #e2e8f0);\n --orderlist-bg: var(--fx-surface-background, #ffffff);\n --orderlist-bg-hover: var(--fx-surface-surface-hover, #f1f5f9);\n --orderlist-text: var(--fx-text-default, #1e293b);\n --orderlist-text-muted: var(--fx-text-muted, #64748b);\n --orderlist-radius: var(--fx-radius-md, 8px);\n --orderlist-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n --orderlist-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n { box-sizing: border-box; }\n .container { display: flex; flex-direction: column; gap: var(--fx-space-md, 16px); }\n .list-wrapper { display: flex; flex-direction: column; gap: var(--fx-space-sm, 8px); flex: 1; min-width: 0; }\n .select-all-bar { display: flex; align-items: center; justify-content: space-between; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: linear-gradient(135deg, var(--orderlist-bg), var(--orderlist-bg-hover)); border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-size: 0.9em; font-weight: 500; }\n .select-all-bar label { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); cursor: pointer; user-select: none; color: var(--orderlist-text); }\n .select-all-bar input[type=\"checkbox\"] { width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; }\n .filter-wrapper { margin-bottom: var(--fx-space-xs, 4px); }\n .filter-input { width: 100%; padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); padding-left: 42px; border: 1.5px solid var(--orderlist-border); border-radius: var(--orderlist-radius); font-family: inherit; font-size: inherit; color: var(--orderlist-text); background: var(--orderlist-bg) url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E\") no-repeat 14px center; transition: var(--orderlist-transition); }\n .filter-input:focus { outline: none; border-color: var(--orderlist-primary); box-shadow: var(--fx-effect-focus-ring, none); }\n .filter-input::placeholder { color: var(--orderlist-text-muted); }\n .main-row { display: flex; align-items: stretch; gap: var(--fx-space-sm, 8px); }\n .list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--orderlist-border); border-radius: var(--orderlist-radius); overflow: hidden; box-shadow: var(--orderlist-shadow); max-height: 450px; overflow-y: auto; flex: 1; }\n .list::-webkit-scrollbar { width: 6px; }\n .list::-webkit-scrollbar-track { background: transparent; }\n .list::-webkit-scrollbar-thumb { background: var(--orderlist-border); border-radius: 3px; }\n .list::-webkit-scrollbar-thumb:hover { background: var(--orderlist-text-muted); }\n .selection-count { font-size: 0.85em; color: var(--orderlist-primary); background: color-mix(in srgb, var(--orderlist-primary) 12%, transparent); padding: 4px 12px; border-radius: 20px; font-weight: 600; }\n :host([striped]) .list-item:nth-child(even) { background: var(--fx-surface-surface, #f8fafc); }\n .list-item { display: flex; align-items: center; gap: var(--fx-space-sm, 10px); padding: var(--fx-space-sm, 10px) var(--fx-space-md, 14px); background: var(--orderlist-bg); border-bottom: 1px solid var(--orderlist-border); cursor: pointer; user-select: none; transition: var(--orderlist-transition); }\n .list-item:last-child { border-bottom: none; }\n .list-item:hover { background: var(--orderlist-bg-hover); }\n .list-item.selected { background: color-mix(in srgb, var(--orderlist-primary) 8%, transparent); border-left: 3px solid var(--orderlist-primary); padding-left: 11px; }\n .list-item:focus-visible { outline: none; background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\n .list-item.dragging { opacity: 0.5; background: var(--orderlist-bg-hover); }\n .list-item.drag-over { border-top: 2px solid var(--orderlist-primary); }\n .drag-handle { color: var(--orderlist-text-muted); cursor: grab; flex-shrink: 0; font-size: 1.2em; opacity: 0.6; transition: var(--orderlist-transition); }\n .drag-handle:hover { opacity: 1; }\n .drag-handle:active { cursor: grabbing; }\n .item-content { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .checkbox { flex-shrink: 0; width: 18px; height: 18px; accent-color: var(--orderlist-primary); cursor: pointer; transition: var(--orderlist-transition); }\n .checkbox:hover { transform: scale(1.1); }\n .empty-message { padding: var(--fx-space-xl, 32px); text-align: center; color: var(--orderlist-text-muted); font-style: italic; }\n .controls-bar {\n display: flex;\n flex-direction: column;\n gap: 4px;\n padding: var(--fx-space-xs, 6px);\n background: var(--orderlist-bg);\n border: 1px solid var(--orderlist-border);\n border-radius: var(--orderlist-radius);\n box-shadow: var(--orderlist-shadow);\n height: fit-content;\n position: sticky;\n top: 0;\n align-self: flex-start;\n }\n .control-group { display: flex; flex-direction: column; gap: 3px; }\n .control-group + .control-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--orderlist-border); }\n button.control-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 38px; padding: 0; border: none; border-radius: 8px; background: transparent; color: var(--orderlist-text-muted); cursor: pointer; font-size: 16px; line-height: 1; transition: var(--orderlist-transition); position: relative; }\n button.control-btn:hover:not(:disabled) { background: var(--orderlist-bg-hover); color: var(--orderlist-primary); transform: scale(1.1); }\n button.control-btn:active:not(:disabled) { transform: scale(0.92); background: color-mix(in srgb, var(--orderlist-primary) 15%, transparent); }\n button.control-btn:focus-visible { outline: none; box-shadow: var(--fx-effect-focus-ring, none); }\n button.control-btn:disabled { opacity: 0.3; cursor: not-allowed; transform: none; }\n .control-btn-icon { font-size: 18px; line-height: 1; }\n /* Tooltip nos botoes /\n button.control-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }\n @media (max-width: 640px) { .main-row { flex-direction: column; } .controls-bar { flex-direction: row; flex-wrap: wrap; justify-content: center; position: relative; } .control-group { flex-direction: row; } .control-group + .control-group { margin-top: 0; margin-left: 4px; padding-top: 0; padding-left: 4px; border-top: none; border-left: 1px solid var(--orderlist-border); } button.control-btn { width: 44px; height: 40px; } button.control-btn::after { display: none; } .list { max-height: 300px; } }\n @keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }\n .list-item { animation: slideIn 0.2s ease-out; }\n `;\n\n static override get observedAttributes(): string[] {\n return [\n 'data',\n 'items',\n 'data-key',\n 'filter',\n 'filter-by',\n 'filter-placeholder',\n 'breakpoint',\n 'controls-location',\n 'dragdrop',\n 'striped',\n 'selection-mode',\n 'show-select-all',\n ]\n }\n\n set data(value: OrderListItem[]) {\n this._data = Array.isArray(value) ? value : [];\n this._filteredData = null;\n this.render();\n }\n get data(): OrderListItem[] {\n return this._data;\n }\n private _data: OrderListItem[] = [];\n private _filteredData: OrderListItem[] \| null = null;\n\n /\n Alias de `data` para o binding do Vue/React: `data` colide com a\n * tipagem nativa de atributos HTML (`dataset`/`data-`) e não reflete em\n atributo. `items` funciona como propriedade e como atributo JSON.\n */\n get items(): OrderListItem[] {\n return this._data;\n }\n set items(value: OrderListItem[]) {\n const list = Array.isArray(value) ? value : [];\n this._data = list;\n this._filteredData = null;\n\n const json = (() => {\n try {\n return JSON.stringify(list);\n } catch {\n // Itens com referência circular/função não são serializáveis:\n // mantém a propriedade funcionando sem gravar o atributo.\n return null;\n }\n })();\n\n if (json !== null && this.getAttr('items') !== json) this.setAttribute('items', json);\n else if (this.isConnected) this.render();\n }\n\n set selection(value: OrderListItem[]) {\n this._selection = value;\n this.render();\n }\n get selection(): OrderListItem[] {\n return this._selection;\n }\n private _selection: OrderListItem[] = [];\n\n get dataKey(): string {\n return this.getAttr('data-key', '');\n }\n set dataKey(v: string) {\n this.setAttribute('data-key', v);\n }\n\n get filter(): boolean {\n return this.hasAttr('filter');\n }\n set filter(v: boolean) {\n this.toggleAttr('filter', v);\n }\n\n get filterBy(): string {\n return this.getAttr('filter-by', 'label');\n }\n set filterBy(v: string) {\n this.setAttribute('filter-by', v);\n }\n\n get filterPlaceholder(): string {\n return this.getAttr('filter-placeholder', 'Buscar...');\n }\n set filterPlaceholder(v: string) {\n this.setAttribute('filter-placeholder', v);\n }\n\n get breakpoint(): string {\n return this.getAttr('breakpoint', '960px');\n }\n set breakpoint(v: string) {\n this.setAttribute('breakpoint', v);\n }\n\n get dragdrop(): boolean {\n return this.hasAttr('dragdrop');\n }\n set dragdrop(v: boolean) {\n this.toggleAttr('dragdrop', v);\n }\n\n get striped(): boolean {\n return this.hasAttr('striped');\n }\n set striped(v: boolean) {\n this.toggleAttr('striped', v);\n }\n\n get selectionMode(): string {\n const s = this.getAttr('selection-mode', '');\n return s === 'single' \|\| s === 'multiple' ? s : '';\n }\n set selectionMode(v: string) {\n this.setAttribute('selection-mode', v);\n }\n\n get showSelectAll(): boolean {\n return this.hasAttr('show-select-all');\n }\n set showSelectAll(v: boolean) {\n this.toggleAttr('show-select-all', v);\n }\n\n get filterValue(): string {\n return this._filterValue;\n }\n set filterValue(v: string) {\n this._filterValue = v;\n this._applyFilter();\n this._updateListDisplay();\n }\n private _filterValue = '';\n\n private _draggedIndex: number \| null = null;\n private _listenersAttached = false;\n private _optionTemplate: ((item: OrderListItem) => string) \| null = null;\n\n setOptionTemplate(template: (item: OrderListItem) => string): void {\n this._optionTemplate = template;\n this.render();\n }\n\n protected override connectedCallback(): void {\n this._parseDataAttribute();\n super.connectedCallback();\n }\n\n protected override attributeChangedCallback(name: string, oldValue: string \| null, newValue: string \| null): void {\n if (name === 'items') {\n try {\n const parsed = JSON.parse(newValue ?? '[]');\n this._data = Array.isArray(parsed) ? parsed : [];\n this._filteredData = null;\n } catch {\n this._data = [];\n this._filteredData = null;\n }\n } else if (this.getAttr('data', '') !== '') {\n this._parseDataAttribute();\n }\n super.attributeChangedCallback(name, oldValue, newValue);\n }\n\n private _parseDataAttribute(): void {\n const dataAttr = this.getAttr('data', '');\n if (dataAttr) {\n try {\n this._data = JSON.parse(dataAttr);\n this._filteredData = null;\n } catch {\n this._data = [];\n }\n }\n }\n\n private _applyFilter(): void {\n if (!this._filterValue) {\n this._filteredData = null;\n return;\n }\n const filterFields = this.filterBy.split(',').map(f => f.trim());\n this._filteredData = this._data.filter(item => {\n return filterFields.some(field => {\n const value = item[field];\n if (value == null) return false;\n return String(value).toLowerCase().includes(this._filterValue.toLowerCase());\n });\n });\n }\n\n private _getDisplayData(): OrderListItem[] {\n return this._filteredData \|\| this._data;\n }\n\n private _getItemKey(item: OrderListItem, index: number): string {\n if (this.dataKey && item[this.dataKey] != null) {\n return String(item[this.dataKey]);\n }\n if (item['id'] != null) return String(item['id']);\n if (item['key'] != null) return String(item['key']);\n if (item['label'] != null) return String(item['label']);\n if (item['name'] != null) return String(item['name']);\n if (item['value'] != null) return String(item['value']);\n return String(index);\n }\n\n private _getItemLabel(item: OrderListItem): string {\n const fields = ['label', 'name', 'title', 'text', 'value'];\n for (const field of fields) {\n if (item[field] != null) {\n return String(item[field]);\n }\n }\n return JSON.stringify(item);\n }\n\n private _isSelected(item: OrderListItem): boolean {\n return this._selection.some(s => this._getItemKey(s, -1) === this._getItemKey(item, -1));\n }\n\n private _moveItem(fromIndex: number, toIndex: number): void {\n const actualFrom = this._getActualIndex(fromIndex);\n const actualTo = this._getActualIndex(toIndex);\n if (actualFrom === -1 \|\| actualTo === -1) return;\n const item = this._data.splice(actualFrom, 1)[0];\n this._data.splice(actualTo, 0, item);\n this._applyFilter();\n this._updateListDisplay();\n this._updateControlsState();\n this._emitReorder();\n }\n\n private _getActualIndex(displayIndex: number): number {\n if (this._filteredData) {\n const item = this._filteredData[displayIndex];\n return this._data.findIndex(d => this._getItemKey(d, -1) === this._getItemKey(item, -1));\n }\n return displayIndex;\n }\n\n private _emitReorder(): void {\n this.dispatchEvent(new CustomEvent('reorder', {\n bubbles: true,\n composed: true,\n detail: { items: [...this._data] },\n }));\n }\n\n private _emitSelectionChange(): void {\n this.dispatchEvent(new CustomEvent('selection-change', {\n bubbles: true,\n composed: true,\n detail: { selection: [...this._selection] },\n }));\n }\n\n private _toggleSelection(item: OrderListItem): void {\n const key = this._getItemKey(item, -1);\n const index = this._selection.findIndex(s => this._getItemKey(s, -1) === key);\n if (index >= 0) {\n this._selection.splice(index, 1);\n } else if (this.selectionMode === 'multiple') {\n this._selection.push(item);\n } else {\n this._selection = [item];\n }\n this._emitSelectionChange();\n this._updateListDisplay();\n this._updateControlsState();\n }\n\n private _selectAll(): void {\n const displayData = this._getDisplayData();\n this._selection = [...displayData];\n this._emitSelectionChange();\n this._updateListDisplay();\n this._updateControlsState();\n }\n\n private _deselectAll(): void {\n this._selection = [];\n this._emitSelectionChange();\n this._updateListDisplay();\n this._updateControlsState();\n }\n\n private _toggleSelectAll(): void {\n const displayData = this._getDisplayData();\n if (this._selection.length === displayData.length) {\n this._deselectAll();\n } else {\n this._selectAll();\n }\n }\n\n protected override render(): void {\n const displayData = this._getDisplayData();\n const hasSelection = this.selectionMode;\n const hasMultipleSelection = this.selectionMode === 'multiple';\n const allSelected = hasMultipleSelection && displayData.length > 0 && this._selection.length === displayData.length;\n\n this.setTemplate(`\n <div class=\"container\" part=\"container\">\n ${this.filter ? `\n <div class=\"filter-wrapper\" part=\"filter-wrapper\">\n <input type=\"text\" class=\"filter-input\" part=\"filter-input\" autocomplete=\"off\"\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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"}