@wrrdev/fenix-ui 1.0.5 → 1.0.7

package/dist/components/knob/knob.js

@@ -0,0 +1,323 @@
+import { FxElement } from "../../core/base.js";
+import { css } from "../../core/css.js";
+import { defineElement } from "../../core/define.js";
+const _FxKnob = class _FxKnob extends FxElement {
+  constructor() {
+    super(...arguments);
+    this._isDragging = false;
+    this._startY = 0;
+    this._startValue = 0;
+    this._onMouseMove = (e) => {
+      if (!this._isDragging) return;
+      const deltaY = this._startY - e.clientY;
+      const sensitivity = (this.max - this.min) / 100;
+      this.emitChange(this._startValue + deltaY * sensitivity);
+    };
+    this._onMouseUp = () => {
+      this._isDragging = false;
+      document.removeEventListener("mousemove", this._onMouseMove);
+      document.removeEventListener("mouseup", this._onMouseUp);
+    };
+  }
+  static get observedAttributes() {
+    return [
+      "value",
+      "min",
+      "max",
+      "step",
+      "size",
+      "stroke-width",
+      "value-color",
+      "range-color",
+      "readonly",
+      "disabled",
+      "value-template"
+    ];
+  }
+  get value() {
+    return this.clampValue(Number(this.getAttr("value", "0")) || 0);
+  }
+  set value(v) {
+    if (this.readonly || this.disabled) return;
+    const clamped = this.clampValue(v);
+    const current = this.clampValue(Number(this.getAttr("value", "0")) || 0);
+    if (clamped !== current) {
+      this.setAttribute("value", String(clamped));
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: true,
+          composed: true,
+          detail: { value: clamped }
+        })
+      );
+    }
+  }
+  get min() {
+    return Number(this.getAttr("min", "0")) || 0;
+  }
+  set min(v) {
+    this.setAttribute("min", String(v));
+  }
+  get max() {
+    return Number(this.getAttr("max", "100")) || 100;
+  }
+  set max(v) {
+    this.setAttribute("max", String(v));
+  }
+  get step() {
+    return Number(this.getAttr("step", "1")) || 1;
+  }
+  set step(v) {
+    this.setAttribute("step", String(v));
+  }
+  get size() {
+    const s = this.getAttr("size", "md");
+    return s === "sm" || s === "lg" ? s : "md";
+  }
+  set size(v) {
+    this.setAttribute("size", v);
+  }
+  get strokeWidth() {
+    return Number(this.getAttr("stroke-width", "8")) || 8;
+  }
+  set strokeWidth(v) {
+    this.setAttribute("stroke-width", String(v));
+  }
+  get valueColor() {
+    return this.getAttr("value-color", "");
+  }
+  set valueColor(v) {
+    this.setAttribute("value-color", v);
+  }
+  get rangeColor() {
+    return this.getAttr("range-color", "");
+  }
+  set rangeColor(v) {
+    this.setAttribute("range-color", v);
+  }
+  get readonly() {
+    return this.hasAttr("readonly");
+  }
+  set readonly(v) {
+    this.toggleAttr("readonly", Boolean(v));
+  }
+  get disabled() {
+    return this.hasAttr("disabled");
+  }
+  set disabled(v) {
+    this.toggleAttr("disabled", Boolean(v));
+  }
+  get valueTemplate() {
+    return this.getAttr("value-template", "{value}");
+  }
+  set valueTemplate(v) {
+    this.setAttribute("value-template", v);
+  }
+  render() {
+    const min = this.min;
+    const max = this.max;
+    const value = this.clampValue(this.value);
+    const range = max - min;
+    const pct = range > 0 ? (value - min) / range : 0;
+    const sizeNum = this.getSizeNum();
+    const strokeW = this.strokeWidth;
+    const radius = (sizeNum - strokeW) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference * (1 - pct);
+    const valueColorStyle = this.valueColor ? `--_value-color: ${this.valueColor};` : "";
+    const rangeColorStyle = this.rangeColor ? `--_range-color: ${this.rangeColor};` : "";
+    const displayValue = this.valueTemplate.replace("{value}", String(Math.round(value)));
+    this.setTemplate(`
+      <div class="knob" part="knob" tabindex="${this.disabled ? "-1" : "0"}"
+        role="slider" aria-valuenow="${value}" aria-valuemin="${min}" aria-valuemax="${max}"
+        aria-readonly="${this.readonly}" aria-disabled="${this.disabled}"
+        style="${valueColorStyle}${rangeColorStyle}">
+        <svg viewBox="0 0 ${sizeNum} ${sizeNum}" part="svg">
+          <circle class="track" part="track"
+            cx="${sizeNum / 2}" cy="${sizeNum / 2}" r="${radius}" />
+          <circle class="value" part="value"
+            cx="${sizeNum / 2}" cy="${sizeNum / 2}" r="${radius}"
+            stroke-dasharray="${circumference}"
+            stroke-dashoffset="${offset}" />
+        </svg>
+        <div class="label" part="label">${displayValue}</div>
+      </div>
+    `);
+    this.attachListeners();
+  }
+  getSizeNum() {
+    const s = this.size;
+    if (s === "sm") return 60;
+    if (s === "lg") return 140;
+    return 100;
+  }
+  clampValue(v) {
+    const min = this.min;
+    const max = this.max;
+    const step = this.step;
+    let clamped = Math.min(max, Math.max(min, v));
+    if (step > 0) {
+      clamped = Math.round((clamped - min) / step) * step + min;
+      clamped = Math.min(max, Math.max(min, clamped));
+    }
+    return clamped;
+  }
+  emitChange(newValue) {
+    const clamped = this.clampValue(newValue);
+    if (clamped !== this.value) {
+      this.value = clamped;
+      this.dispatchEvent(
+        new CustomEvent("change", {
+          bubbles: true,
+          composed: true,
+          detail: { value: clamped }
+        })
+      );
+    }
+  }
+  attachListeners() {
+    const knob = this.root.querySelector(".knob");
+    if (!knob) return;
+    knob.addEventListener("mousedown", (e) => {
+      if (this.readonly || this.disabled) return;
+      e.preventDefault();
+      this._isDragging = true;
+      this._startY = e.clientY;
+      this._startValue = this.value;
+      knob.focus();
+      document.addEventListener("mousemove", this._onMouseMove);
+      document.addEventListener("mouseup", this._onMouseUp);
+    });
+    knob.addEventListener("touchstart", (e) => {
+      if (this.readonly || this.disabled) return;
+      e.preventDefault();
+      this._isDragging = true;
+      this._startY = e.touches[0].clientY;
+      this._startValue = this.value;
+      knob.focus();
+    }, { passive: false });
+    knob.addEventListener("touchmove", (e) => {
+      if (!this._isDragging || this.readonly || this.disabled) return;
+      e.preventDefault();
+      const deltaY = this._startY - e.touches[0].clientY;
+      const sensitivity = (this.max - this.min) / 100;
+      this.emitChange(this._startValue + deltaY * sensitivity);
+    }, { passive: false });
+    knob.addEventListener("touchend", () => {
+      this._isDragging = false;
+    });
+    knob.addEventListener("keydown", (e) => {
+      if (this.readonly || this.disabled) return;
+      const step = this.step;
+      switch (e.key) {
+        case "ArrowUp":
+        case "ArrowRight":
+          e.preventDefault();
+          this.emitChange(this.value + step);
+          break;
+        case "ArrowDown":
+        case "ArrowLeft":
+          e.preventDefault();
+          this.emitChange(this.value - step);
+          break;
+        case "Home":
+          e.preventDefault();
+          this.emitChange(this.min);
+          break;
+        case "End":
+          e.preventDefault();
+          this.emitChange(this.max);
+          break;
+        case "PageUp":
+          e.preventDefault();
+          this.emitChange(this.value + step * 10);
+          break;
+        case "PageDown":
+          e.preventDefault();
+          this.emitChange(this.value - step * 10);
+          break;
+      }
+    });
+  }
+  disconnectedCallback() {
+    document.removeEventListener("mousemove", this._onMouseMove);
+    document.removeEventListener("mouseup", this._onMouseUp);
+    super.disconnectedCallback();
+  }
+};
+_FxKnob.styles = css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      font-family: var(--fx-font-family);
+      font-size: var(--fx-font-size);
+      --_size: 100px;
+      --_stroke-width: 8px;
+      --_value-color: var(--fx-color-primary);
+      --_range-color: var(--fx-border-default);
+    }
+    :host([size='sm']) { --_size: 60px; }
+    :host([size='lg']) { --_size: 140px; }
+    .knob {
+      position: relative;
+      width: var(--_size);
+      height: var(--_size);
+      cursor: pointer;
+      user-select: none;
+      touch-action: none;
+    }
+    :host([readonly]) .knob,
+    :host([disabled]) .knob {
+      cursor: default;
+      pointer-events: none;
+    }
+    :host([disabled]) .knob {
+      opacity: 0.55;
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      transform: rotate(-90deg);
+    }
+    .track {
+      fill: none;
+      stroke: var(--_range-color);
+      stroke-width: var(--_stroke-width);
+    }
+    .value {
+      fill: none;
+      stroke: var(--_value-color);
+      stroke-width: var(--_stroke-width);
+      stroke-linecap: round;
+      transition: stroke-dashoffset var(--fx-motion-duration-fast) var(--fx-motion-easing);
+    }
+    .label {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      color: var(--fx-text-default);
+      pointer-events: none;
+    }
+    :host([size='sm']) .label { font-size: 11px; }
+    :host([size='md']) .label { font-size: 14px; }
+    :host([size='lg']) .label { font-size: 18px; }
+    .knob:focus-visible {
+      outline: none;
+    }
+    .knob:focus-visible svg {
+      filter: drop-shadow(var(--fx-effect-focus-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)));
+    }
+  `;
+let FxKnob = _FxKnob;
+function defineFxKnob() {
+  return defineElement("fx-knob", FxKnob);
+}
+export {
+  FxKnob,
+  defineFxKnob
+};
+//# sourceMappingURL=knob.js.map

package/dist/components/knob/knob.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"knob.js","sources":["../../../src/components/knob/knob.ts"],"sourcesContent":["import { FxElement } from '../../core/base';\r\nimport { css } from '../../core/css';\r\nimport { defineElement } from '../../core/define';\r\n\r\n/**\r\n * <fx-knob> - Controle giratorio circular para ajuste de valor.\r\n *\r\n * Similar ao Knob do PrimeVue, permite ajustar um valor arrastando o mouse\r\n * ou usando as setas do teclado. Exibe um arco de progresso circular com\r\n * o valor central configuravel via valueTemplate.\r\n *\r\n * Atributos: value, min, max, step, size, strokeWidth, valueColor, rangeColor,\r\n * readonly, disabled, valueTemplate.\r\n * Evento: `change` (composed, detail: { value }).\r\n */\r\nexport class FxKnob extends FxElement {\r\n  static override styles = css`\r\n    :host {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-family: var(--fx-font-family);\r\n      font-size: var(--fx-font-size);\r\n      --_size: 100px;\r\n      --_stroke-width: 8px;\r\n      --_value-color: var(--fx-color-primary);\r\n      --_range-color: var(--fx-border-default);\r\n    }\r\n    :host([size='sm']) { --_size: 60px; }\r\n    :host([size='lg']) { --_size: 140px; }\r\n    .knob {\r\n      position: relative;\r\n      width: var(--_size);\r\n      height: var(--_size);\r\n      cursor: pointer;\r\n      user-select: none;\r\n      touch-action: none;\r\n    }\r\n    :host([readonly]) .knob,\r\n    :host([disabled]) .knob {\r\n      cursor: default;\r\n      pointer-events: none;\r\n    }\r\n    :host([disabled]) .knob {\r\n      opacity: 0.55;\r\n    }\r\n    svg {\r\n      width: 100%;\r\n      height: 100%;\r\n      transform: rotate(-90deg);\r\n    }\r\n    .track {\r\n      fill: none;\r\n      stroke: var(--_range-color);\r\n      stroke-width: var(--_stroke-width);\r\n    }\r\n    .value {\r\n      fill: none;\r\n      stroke: var(--_value-color);\r\n      stroke-width: var(--_stroke-width);\r\n      stroke-linecap: round;\r\n      transition: stroke-dashoffset var(--fx-motion-duration-fast) var(--fx-motion-easing);\r\n    }\r\n    .label {\r\n      position: absolute;\r\n      inset: 0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-weight: 600;\r\n      color: var(--fx-text-default);\r\n      pointer-events: none;\r\n    }\r\n    :host([size='sm']) .label { font-size: 11px; }\r\n    :host([size='md']) .label { font-size: 14px; }\r\n    :host([size='lg']) .label { font-size: 18px; }\r\n    .knob:focus-visible {\r\n      outline: none;\r\n    }\r\n    .knob:focus-visible svg {\r\n      filter: drop-shadow(var(--fx-effect-focus-ring, 0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)));\r\n    }\r\n  `;\r\n\r\n  static override get observedAttributes(): string[] {\r\n    return [\r\n      'value',\r\n      'min',\r\n      'max',\r\n      'step',\r\n      'size',\r\n      'stroke-width',\r\n      'value-color',\r\n      'range-color',\r\n      'readonly',\r\n      'disabled',\r\n      'value-template',\r\n    ];\r\n  }\r\n\r\n  get value(): number {\r\n    return this.clampValue(Number(this.getAttr('value', '0')) || 0);\r\n  }\r\n  set value(v: number) {\r\n    if (this.readonly || this.disabled) return;\r\n    const clamped = this.clampValue(v);\r\n    const current = this.clampValue(Number(this.getAttr('value', '0')) || 0);\r\n    if (clamped !== current) {\r\n      this.setAttribute('value', String(clamped));\r\n      this.dispatchEvent(\r\n        new CustomEvent('change', {\r\n          bubbles: true,\r\n          composed: true,\r\n          detail: { value: clamped },\r\n        }),\r\n      );\r\n    }\r\n  }\r\n\r\n  get min(): number {\r\n    return Number(this.getAttr('min', '0')) || 0;\r\n  }\r\n  set min(v: number) {\r\n    this.setAttribute('min', String(v));\r\n  }\r\n\r\n  get max(): number {\r\n    return Number(this.getAttr('max', '100')) || 100;\r\n  }\r\n  set max(v: number) {\r\n    this.setAttribute('max', String(v));\r\n  }\r\n\r\n  get step(): number {\r\n    return Number(this.getAttr('step', '1')) || 1;\r\n  }\r\n  set step(v: number) {\r\n    this.setAttribute('step', String(v));\r\n  }\r\n\r\n  get size(): string {\r\n    const s = this.getAttr('size', 'md');\r\n    return s === 'sm' || s === 'lg' ? s : 'md';\r\n  }\r\n  set size(v: string) {\r\n    this.setAttribute('size', v);\r\n  }\r\n\r\n  get strokeWidth(): number {\r\n    return Number(this.getAttr('stroke-width', '8')) || 8;\r\n  }\r\n  set strokeWidth(v: number) {\r\n    this.setAttribute('stroke-width', String(v));\r\n  }\r\n\r\n  get valueColor(): string {\r\n    return this.getAttr('value-color', '');\r\n  }\r\n  set valueColor(v: string) {\r\n    this.setAttribute('value-color', v);\r\n  }\r\n\r\n  get rangeColor(): string {\r\n    return this.getAttr('range-color', '');\r\n  }\r\n  set rangeColor(v: string) {\r\n    this.setAttribute('range-color', v);\r\n  }\r\n\r\n  get readonly(): boolean {\r\n    return this.hasAttr('readonly');\r\n  }\r\n  set readonly(v: boolean) {\r\n    this.toggleAttr('readonly', Boolean(v));\r\n  }\r\n\r\n  get disabled(): boolean {\r\n    return this.hasAttr('disabled');\r\n  }\r\n  set disabled(v: boolean) {\r\n    this.toggleAttr('disabled', Boolean(v));\r\n  }\r\n\r\n  get valueTemplate(): string {\r\n    return this.getAttr('value-template', '{value}');\r\n  }\r\n  set valueTemplate(v: string) {\r\n    this.setAttribute('value-template', v);\r\n  }\r\n\r\n  private _isDragging = false;\r\n  private _startY = 0;\r\n  private _startValue = 0;\r\n\r\n  protected override render(): void {\r\n    const min = this.min;\r\n    const max = this.max;\r\n    const value = this.clampValue(this.value);\r\n    const range = max - min;\r\n    const pct = range > 0 ? (value - min) / range : 0;\r\n\r\n    const sizeNum = this.getSizeNum();\r\n    const strokeW = this.strokeWidth;\r\n    const radius = (sizeNum - strokeW) / 2;\r\n    const circumference = 2 * Math.PI * radius;\r\n    const offset = circumference * (1 - pct);\r\n\r\n    const valueColorStyle = this.valueColor ? `--_value-color: ${this.valueColor};` : '';\r\n    const rangeColorStyle = this.rangeColor ? `--_range-color: ${this.rangeColor};` : '';\r\n\r\n    const displayValue = this.valueTemplate.replace('{value}', String(Math.round(value)));\r\n\r\n    this.setTemplate(`\r\n      <div class=\"knob\" part=\"knob\" tabindex=\"${this.disabled ? '-1' : '0'}\"\r\n        role=\"slider\" aria-valuenow=\"${value}\" aria-valuemin=\"${min}\" aria-valuemax=\"${max}\"\r\n        aria-readonly=\"${this.readonly}\" aria-disabled=\"${this.disabled}\"\r\n        style=\"${valueColorStyle}${rangeColorStyle}\">\r\n        <svg viewBox=\"0 0 ${sizeNum} ${sizeNum}\" part=\"svg\">\r\n          <circle class=\"track\" part=\"track\"\r\n            cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\" />\r\n          <circle class=\"value\" part=\"value\"\r\n            cx=\"${sizeNum / 2}\" cy=\"${sizeNum / 2}\" r=\"${radius}\"\r\n            stroke-dasharray=\"${circumference}\"\r\n            stroke-dashoffset=\"${offset}\" />\r\n        </svg>\r\n        <div class=\"label\" part=\"label\">${displayValue}</div>\r\n      </div>\r\n    `);\r\n\r\n    this.attachListeners();\r\n  }\r\n\r\n  private getSizeNum(): number {\r\n    const s = this.size;\r\n    if (s === 'sm') return 60;\r\n    if (s === 'lg') return 140;\r\n    return 100;\r\n  }\r\n\r\n  private clampValue(v: number): number {\r\n    const min = this.min;\r\n    const max = this.max;\r\n    const step = this.step;\r\n    let clamped = Math.min(max, Math.max(min, v));\r\n    if (step > 0) {\r\n      clamped = Math.round((clamped - min) / step) * step + min;\r\n      clamped = Math.min(max, Math.max(min, clamped));\r\n    }\r\n    return clamped;\r\n  }\r\n\r\n  private emitChange(newValue: number): void {\r\n    const clamped = this.clampValue(newValue);\r\n    if (clamped !== this.value) {\r\n      this.value = clamped;\r\n      this.dispatchEvent(\r\n        new CustomEvent('change', {\r\n          bubbles: true,\r\n          composed: true,\r\n          detail: { value: clamped },\r\n        }),\r\n      );\r\n    }\r\n  }\r\n\r\n  private attachListeners(): void {\r\n    const knob = this.root.querySelector<HTMLElement>('.knob');\r\n    if (!knob) return;\r\n\r\n    knob.addEventListener('mousedown', (e: MouseEvent) => {\r\n      if (this.readonly || this.disabled) return;\r\n      e.preventDefault();\r\n      this._isDragging = true;\r\n      this._startY = e.clientY;\r\n      this._startValue = this.value;\r\n      knob.focus();\r\n      document.addEventListener('mousemove', this._onMouseMove);\r\n      document.addEventListener('mouseup', this._onMouseUp);\r\n    });\r\n\r\n    knob.addEventListener('touchstart', (e: TouchEvent) => {\r\n      if (this.readonly || this.disabled) return;\r\n      e.preventDefault();\r\n      this._isDragging = true;\r\n      this._startY = e.touches[0].clientY;\r\n      this._startValue = this.value;\r\n      knob.focus();\r\n    }, { passive: false });\r\n\r\n    knob.addEventListener('touchmove', (e: TouchEvent) => {\r\n      if (!this._isDragging || this.readonly || this.disabled) return;\r\n      e.preventDefault();\r\n      const deltaY = this._startY - e.touches[0].clientY;\r\n      const sensitivity = (this.max - this.min) / 100;\r\n      this.emitChange(this._startValue + deltaY * sensitivity);\r\n    }, { passive: false });\r\n\r\n    knob.addEventListener('touchend', () => {\r\n      this._isDragging = false;\r\n    });\r\n\r\n    knob.addEventListener('keydown', (e: KeyboardEvent) => {\r\n      if (this.readonly || this.disabled) return;\r\n      const step = this.step;\r\n      switch (e.key) {\r\n        case 'ArrowUp':\r\n        case 'ArrowRight':\r\n          e.preventDefault();\r\n          this.emitChange(this.value + step);\r\n          break;\r\n        case 'ArrowDown':\r\n        case 'ArrowLeft':\r\n          e.preventDefault();\r\n          this.emitChange(this.value - step);\r\n          break;\r\n        case 'Home':\r\n          e.preventDefault();\r\n          this.emitChange(this.min);\r\n          break;\r\n        case 'End':\r\n          e.preventDefault();\r\n          this.emitChange(this.max);\r\n          break;\r\n        case 'PageUp':\r\n          e.preventDefault();\r\n          this.emitChange(this.value + step * 10);\r\n          break;\r\n        case 'PageDown':\r\n          e.preventDefault();\r\n          this.emitChange(this.value - step * 10);\r\n          break;\r\n      }\r\n    });\r\n  }\r\n\r\n  private _onMouseMove = (e: MouseEvent): void => {\r\n    if (!this._isDragging) return;\r\n    const deltaY = this._startY - e.clientY;\r\n    const sensitivity = (this.max - this.min) / 100;\r\n    this.emitChange(this._startValue + deltaY * sensitivity);\r\n  };\r\n\r\n  private _onMouseUp = (): void => {\r\n    this._isDragging = false;\r\n    document.removeEventListener('mousemove', this._onMouseMove);\r\n    document.removeEventListener('mouseup', this._onMouseUp);\r\n  };\r\n\r\n  protected override disconnectedCallback(): void {\r\n    document.removeEventListener('mousemove', this._onMouseMove);\r\n    document.removeEventListener('mouseup', this._onMouseUp);\r\n    super.disconnectedCallback();\r\n  }\r\n}\r\n\r\nexport function defineFxKnob(): typeof FxKnob {\r\n  return defineElement('fx-knob', FxKnob);\r\n}"],"names":[],"mappings":"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"}

package/dist/components/orderlist/index.d.ts

@@ -0,0 +1,3 @@
+export { FxOrderList } from './orderlist';
+export type { OrderListItem } from './orderlist';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/orderlist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/orderlist/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/orderlist/index.js

@@ -0,0 +1,7 @@
+import { defineFxOrderList } from "./orderlist.js";
+import { FxOrderList } from "./orderlist.js";
+defineFxOrderList();
+export {
+  FxOrderList
+};
+//# sourceMappingURL=index.js.map

package/dist/components/orderlist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/orderlist/index.ts"],"sourcesContent":["import { defineFxOrderList } from './orderlist';\n\n// Reexporta a classe para uso programático (ex.: instanceof, herança).\nexport { FxOrderList } from './orderlist';\nexport type { OrderListItem } from './orderlist';\n\n// Auto-registro: basta importar o subpath `@wrrdev/fenix-ui/orderlist`\n// para que o componente seja definido no CustomElementRegistry.\ndefineFxOrderList();\n\n"],"names":[],"mappings":";;AAQA,kBAAA;"}

package/dist/components/orderlist/orderlist.d.ts

@@ -0,0 +1,78 @@
+import { FxElement } from '../../core/base';
+export interface OrderListItem {
+    [key: string]: unknown;
+}
+/**
+ * <fx-orderlist> - Componente para ordenar uma colecao de itens.
+ *
+ * Permite reordenar itens arrastando ou usando botoes de controle.
+ * Suporta filtro, selecao, checkbox e templates customizados.
+ *
+ * Atributos: data, data-key, filter, filter-by, filter-placeholder, breakpoint,
+ * dragdrop, selection-mode, striped, show-select-all.
+ * Evento: `reorder` (composed, detail: { items }).
+ * Evento: `selection-change` (composed, detail: { selection }).
+ */
+export declare class FxOrderList extends FxElement {
+    static styles: string;
+    static get observedAttributes(): string[];
+    set data(value: OrderListItem[]);
+    get data(): OrderListItem[];
+    private _data;
+    private _filteredData;
+    set selection(value: OrderListItem[]);
+    get selection(): OrderListItem[];
+    private _selection;
+    get dataKey(): string;
+    set dataKey(v: string);
+    get filter(): boolean;
+    set filter(v: boolean);
+    get filterBy(): string;
+    set filterBy(v: string);
+    get filterPlaceholder(): string;
+    set filterPlaceholder(v: string);
+    get breakpoint(): string;
+    set breakpoint(v: string);
+    get dragdrop(): boolean;
+    set dragdrop(v: boolean);
+    get striped(): boolean;
+    set striped(v: boolean);
+    get selectionMode(): string;
+    set selectionMode(v: string);
+    get showSelectAll(): boolean;
+    set showSelectAll(v: boolean);
+    get filterValue(): string;
+    set filterValue(v: string);
+    private _filterValue;
+    private _draggedIndex;
+    private _listenersAttached;
+    private _optionTemplate;
+    setOptionTemplate(template: (item: OrderListItem) => string): void;
+    protected connectedCallback(): void;
+    protected attributeChangedCallback(): void;
+    private _parseDataAttribute;
+    private _applyFilter;
+    private _getDisplayData;
+    private _getItemKey;
+    private _getItemLabel;
+    private _isSelected;
+    private _moveItem;
+    private _getActualIndex;
+    private _emitReorder;
+    private _emitSelectionChange;
+    private _toggleSelection;
+    private _selectAll;
+    private _deselectAll;
+    private _toggleSelectAll;
+    protected render(): void;
+    private _attachListeners;
+    private _attachItemListeners;
+    private _updateListDisplay;
+    private _handleMoveAction;
+    private _moveSelectedToStart;
+    private _moveSelectedToEnd;
+    private _moveSelectedByOne;
+    private _updateControlsState;
+}
+export declare function defineFxOrderList(): typeof FxOrderList;
+//# sourceMappingURL=orderlist.d.ts.map

package/dist/components/orderlist/orderlist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"orderlist.d.ts","sourceRoot":"","sources":["../../../src/components/orderlist/orderlist.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI5C,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,qBAAa,WAAY,SAAQ,SAAS;IACxC,OAAgB,MAAM,SA4ElB;IAEJ,WAAoB,kBAAkB,IAAI,MAAM,EAAE,CAc7C;IAEL,IAAI,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,EAI9B;IACD,IAAI,IAAI,IAAI,aAAa,EAAE,CAE1B;IACD,OAAO,CAAC,KAAK,CAAuB;IACpC,OAAO,CAAC,aAAa,CAAgC;IAErD,IAAI,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,EAGnC;IACD,IAAI,SAAS,IAAI,aAAa,EAAE,CAE/B;IACC,OAAO,CAAC,UAAU,CAAuB;IAE3C,IAAI,OAAO,IAAI,MAAM,CAEpB;IACD,IAAI,OAAO,CAAC,CAAC,EAAE,MAAM,EAEpB;IAED,IAAI,MAAM,IAAI,OAAO,CAEpB;IACC,IAAI,MAAM,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAErB;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IACD,IAAI,iBAAiB,CAAC,CAAC,EAAE,MAAM,EAE9B;IAED,IAAI,UAAU,IAAI,MAAM,CAEvB;IACD,IAAI,UAAU,CAAC,CAAC,EAAE,MAAM,EAEvB;IAED,IAAI,QAAQ,IAAI,OAAO,CAEtB;IACD,IAAI,QAAQ,CAAC,CAAC,EAAE,OAAO,EAEtB;IAED,IAAI,OAAO,IAAI,OAAO,CAErB;IACC,IAAI,OAAO,CAAC,CAAC,EAAE,OAAO,EAEvB;IAED,IAAI,aAAa,IAAI,MAAM,CAG1B;IACD,IAAI,aAAa,CAAC,CAAC,EAAE,MAAM,EAE1B;IAED,IAAI,aAAa,IAAI,OAAO,CAE3B;IACC,IAAI,aAAa,CAAC,CAAC,EAAE,OAAO,EAE7B;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IACD,IAAI,WAAW,CAAC,CAAC,EAAE,MAAM,EAIxB;IACD,OAAO,CAAC,YAAY,CAAM;IAE1B,OAAO,CAAC,aAAa,CAAuB;IAC5C,OAAO,CAAC,kBAAkB,CAAS;IACnC,OAAO,CAAC,eAAe,CAAkD;IAEzE,iBAAiB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,MAAM,GAAG,IAAI;cAK/C,iBAAiB,IAAI,IAAI;cAKzB,wBAAwB,IAAI,IAAI;IAOnD,OAAO,CAAC,mBAAmB;IAY3B,OAAO,CAAC,YAAY;IAepB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,oBAAoB;IAQ5B,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;cASL,MAAM,IAAI,IAAI;IAsFjC,OAAO,CAAC,gBAAgB;IAqExB,OAAO,CAAC,oBAAoB;IAyC5B,OAAO,CAAC,kBAAkB;IA0D1B,OAAO,CAAC,iBAAiB;IA0BzB,OAAO,CAAC,oBAAoB;IAqB5B,OAAO,CAAC,kBAAkB;IAsB1B,OAAO,CAAC,kBAAkB;IA+C1B,OAAO,CAAC,oBAAoB;CA2B7B;AAMD,wBAAgB,iBAAiB,IAAI,OAAO,WAAW,CAEtD"}