@oscarpalmer/tabela 0.14.0 → 0.15.0

package/dist/managers/navigation.manager.mjs

@@ -0,0 +1,80 @@
+import { ARIA_ACTIVEDESCENDANT, ATTRIBUTE_DATA_ACTIVE } from "../models/dom.model.mjs";
+import { getKey, isGroupKey } from "../helpers/misc.helpers.mjs";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { clamp } from "@oscarpalmer/atoms/number";
+//#region src/managers/navigation.manager.ts
+var NavigationManager = class {
+	active;
+	constructor(state) {
+		this.state = state;
+	}
+	destroy() {
+		this.state = void 0;
+	}
+	handle(event) {
+		if (!allKeys.has(event.key)) return;
+		event.preventDefault();
+		const { components, managers } = this.state;
+		const activeDescendant = components.body.elements.group.getAttribute(ARIA_ACTIVEDESCENDANT);
+		const { keys } = managers.data;
+		const { length } = keys;
+		let next;
+		if (isNullableOrWhitespace(activeDescendant)) next = getDefaultIndex(event.key, length);
+		else next = getIndex(this.state, event, activeDescendant);
+		if (next != null) this.setActive(keys.at(next));
+	}
+	setActive(item, scroll) {
+		const { components, managers, options, prefix } = this.state;
+		this.active = item;
+		const active = components.body.elements.group.querySelectorAll(attributeDataActiveTrue);
+		for (const item of active) item.setAttribute(ATTRIBUTE_DATA_ACTIVE, "false");
+		const component = isGroupKey(item) ? managers.group.getForKey(item) : managers.row.get(item, false);
+		if (component != null) {
+			component.element?.setAttribute(ATTRIBUTE_DATA_ACTIVE, "true");
+			if (scroll ?? true) if (component.element == null) components.body.elements.group.scrollTo({
+				top: managers.data.getIndex(item) * options.rowHeight,
+				behavior: "smooth"
+			});
+			else component.element.scrollIntoView({ block: "nearest" });
+		}
+		components.body.elements.group.setAttribute(ARIA_ACTIVEDESCENDANT, component == null ? "" : `${prefix}${component.key}`);
+	}
+};
+function getDefaultIndex(key, max) {
+	switch (true) {
+		case negativeDefaultKeys.has(key): return -1;
+		case key === KEY_PAGE_DOWN: return Math.min(9, max - 1);
+		case key === KEY_PAGE_UP: return max < 10 ? 0 : max - 10;
+		default: return 0;
+	}
+}
+function getIndex(state, event, active) {
+	const key = getKey(active.replace(state.prefix, ""));
+	if (key == null) return;
+	if (absoluteKeys.has(event.key)) return event.key === KEY_HOME ? 0 : state.managers.data.size - 1;
+	return clamp(state.managers.data.getIndex(key) + (offset[event.key] ?? 0), 0, state.managers.data.size - 1, true);
+}
+const KEY_ARROW_DOWN = "ArrowDown";
+const KEY_ARROW_UP = "ArrowUp";
+const KEY_END = "End";
+const KEY_HOME = "Home";
+const KEY_PAGE_DOWN = "PageDown";
+const KEY_PAGE_UP = "PageUp";
+const absoluteKeys = new Set([KEY_END, KEY_HOME]);
+const arrowKeys = new Set([KEY_ARROW_DOWN, KEY_ARROW_UP]);
+const attributeDataActiveTrue = `[${ATTRIBUTE_DATA_ACTIVE}="true"]`;
+const negativeDefaultKeys = new Set([KEY_ARROW_UP, KEY_END]);
+const offset = {
+	[KEY_ARROW_DOWN]: 1,
+	[KEY_ARROW_UP]: -1,
+	[KEY_PAGE_DOWN]: 10,
+	[KEY_PAGE_UP]: -10
+};
+const pageKeys = new Set([KEY_PAGE_DOWN, KEY_PAGE_UP]);
+const allKeys = new Set([
+	...absoluteKeys,
+	...arrowKeys,
+	...pageKeys
+]);
+//#endregion
+export { NavigationManager, attributeDataActiveTrue };

package/dist/managers/render.manager.d.mts

@@ -0,0 +1,19 @@
+import { RenderElementPool, RenderState, RenderVisible } from "../models/render.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+import { RemovableEventListener } from "@oscarpalmer/toretto/models";
+
+//#region src/managers/render.manager.d.ts
+declare class RenderManager {
+  fragment: DocumentFragment;
+  listener: RemovableEventListener;
+  pool: RenderElementPool;
+  state: RenderState;
+  visible: RenderVisible;
+  constructor(state: State);
+  destroy(): void;
+  removeCells(keys: string[]): void;
+  getFragment(): DocumentFragment;
+  update(down: boolean, rerender?: boolean): void;
+}
+//#endregion
+export { RenderManager };

package/dist/managers/render.manager.mjs

@@ -0,0 +1,157 @@
+import { renderGroup } from "../components/group.component.mjs";
+import { isGroupKey } from "../helpers/misc.helpers.mjs";
+import { removeRow, renderRow } from "../components/row.component.mjs";
+import { on } from "@oscarpalmer/toretto/event";
+//#region src/managers/render.manager.ts
+function getRange(state, down) {
+	const { element, managers, options } = state;
+	const { clientHeight, scrollTop } = element;
+	const { keys } = managers.data;
+	const firstIndex = Math.floor(scrollTop / options.rowHeight);
+	const lastIndex = keys.length - managers.group.collapsed.size - 1;
+	const last = Math.min(lastIndex, Math.ceil((scrollTop + clientHeight) / options.rowHeight) - 1);
+	const visible = clientHeight / options.rowHeight;
+	const before = Math.ceil(visible) * (down ? 1 : 2);
+	const after = Math.ceil(visible) * (down ? 2 : 1);
+	const start = Math.max(0, firstIndex - before);
+	return {
+		end: Math.min(lastIndex, last + after),
+		start
+	};
+}
+function onScroll() {
+	const { state } = this;
+	if (!state.active) {
+		requestAnimationFrame(() => {
+			const top = state.element.scrollTop;
+			this.update(top > state.top);
+			state.active = false;
+			state.top = top;
+		});
+		state.active = true;
+	}
+}
+var RenderManager = class {
+	fragment;
+	listener;
+	pool = {
+		cells: {},
+		rows: []
+	};
+	state;
+	visible = {
+		indiced: /* @__PURE__ */ new Map(),
+		keys: /* @__PURE__ */ new Set()
+	};
+	constructor(state) {
+		this.listener = on(state.element, "scroll", onScroll.bind(this));
+		this.state = {
+			...state,
+			active: false,
+			top: 0
+		};
+	}
+	destroy() {
+		const { listener, pool, visible } = this;
+		listener();
+		visible.indiced.clear();
+		visible.keys.clear();
+		const cells = Object.values(pool.cells).flat();
+		let { length } = cells;
+		for (let index = 0; index < length; index += 1) cells[index].remove();
+		length = pool.rows.length;
+		for (let index = 0; index < length; index += 1) pool.rows[index].remove();
+		pool.cells = {};
+		pool.rows = [];
+		this.fragment = void 0;
+		this.listener = void 0;
+		this.pool = void 0;
+		this.state = void 0;
+		this.visible = void 0;
+	}
+	removeCells(keys) {
+		const { pool, state, visible } = this;
+		const { length } = keys;
+		for (let index = 0; index < length; index += 1) delete pool.cells[keys[index]];
+		for (const [, key] of visible.indiced) {
+			if (isGroupKey(key)) continue;
+			const row = state.managers.row.get(key, false);
+			if (row == null || row.element == null) continue;
+			for (let index = 0; index < length; index += 1) {
+				row.cells[keys[index]].innerHTML = "";
+				row.cells[keys[index]].remove();
+				delete row.cells[keys[index]];
+			}
+		}
+	}
+	getFragment() {
+		this.fragment ??= document.createDocumentFragment();
+		this.fragment.replaceChildren();
+		return this.fragment;
+	}
+	update(down, rerender) {
+		const { state, pool, visible } = this;
+		const { components, managers, options } = state;
+		components.body.elements.faker.style.height = `${(managers.data.size - managers.group.collapsed.size) * options.rowHeight}px`;
+		const indices = /* @__PURE__ */ new Set();
+		const range = getRange(state, down);
+		for (let index = range.start; index <= range.end; index += 1) indices.add(index);
+		let remove = rerender ?? false;
+		for (const [index, key] of visible.indiced) {
+			if (isGroupKey(key)) {
+				if (remove || !indices.has(index)) {
+					visible.indiced.delete(index);
+					visible.keys.delete(key);
+					state.managers.group.getForKey(key)?.element?.remove();
+				}
+				continue;
+			}
+			const row = managers.row.get(key, false);
+			if (remove || row == null || !indices.has(index) || managers.group.collapsed.has(key)) {
+				visible.indiced.delete(index);
+				visible.keys.delete(key);
+				if (row != null) removeRow(pool, row);
+			}
+		}
+		const fragment = this.getFragment();
+		const { keys } = managers.data;
+		let count = 0;
+		let offset = 0;
+		for (let index = range.start; index <= range.end + offset; index += 1) {
+			if (visible.indiced.has(index)) continue;
+			const key = keys[index];
+			if (isGroupKey(key)) {
+				const group = managers.group.getForKey(key);
+				if (group == null) continue;
+				count += 1;
+				renderGroup(state, group);
+				visible.indiced.set(index, group.key);
+				visible.keys.add(group.key);
+				if (group.element != null) {
+					group.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+					fragment.append(group.element);
+				}
+				continue;
+			}
+			const row = managers.row.get(key, true);
+			if (row == null) continue;
+			if (managers.group.collapsed.has(key)) {
+				offset += 1;
+				continue;
+			}
+			count += 1;
+			renderRow(state, row);
+			visible.indiced.set(index, key);
+			visible.keys.add(key);
+			if (row.element != null) {
+				row.element.style.transform = `translateY(${(index - offset) * options.rowHeight}px)`;
+				fragment.append(row.element);
+			}
+		}
+		if (count === 0) return;
+		if (down) components.body.elements.group.append(fragment);
+		else components.body.elements.group.prepend(fragment);
+	}
+};
+//#endregion
+export { RenderManager };

package/dist/managers/row.manager.d.mts

@@ -0,0 +1,19 @@
+import { RowComponent } from "../components/row.component.mjs";
+import { State } from "../models/tabela.model.mjs";
+import { Key } from "@oscarpalmer/atoms/models";
+
+//#region src/managers/row.manager.d.ts
+declare class RowManager {
+  state: State;
+  components: Map<Key, RowComponent>;
+  constructor(state: State);
+  clear(): void;
+  destroy(): void;
+  get(key: Key, create: boolean): RowComponent | undefined;
+  has(key: Key): boolean;
+  remove(key: Key): void;
+  removeRow(row: RowComponent): void;
+  update(key: Key): void;
+}
+//#endregion
+export { RowManager };

package/dist/managers/row.manager.mjs

@@ -0,0 +1,45 @@
+import { RowComponent, removeRow, renderRow } from "../components/row.component.mjs";
+//#region src/managers/row.manager.ts
+var RowManager = class {
+	components = /* @__PURE__ */ new Map();
+	constructor(state) {
+		this.state = state;
+	}
+	clear() {
+		const { components } = this;
+		const rows = [...components.values()];
+		const { length } = rows;
+		for (let index = 0; index < length; index += 1) this.removeRow(rows[index]);
+		components.clear();
+	}
+	destroy() {
+		this.clear();
+		this.components = void 0;
+		this.state = void 0;
+	}
+	get(key, create) {
+		let row = this.components.get(key);
+		if (row == null && create) {
+			row = new RowComponent(key);
+			this.components.set(key, row);
+		}
+		return row;
+	}
+	has(key) {
+		return this.components.has(key);
+	}
+	remove(key) {
+		const row = this.components.get(key);
+		if (row != null) this.removeRow(row);
+	}
+	removeRow(row) {
+		if (row.element != null) removeRow(this.state.managers.render.pool, row);
+		this.components.delete(row.key);
+	}
+	update(key) {
+		const row = this.components.get(key);
+		if (row?.element != null) renderRow(this.state, row);
+	}
+};
+//#endregion
+export { RowManager };

package/dist/managers/selection.manager.d.mts

@@ -0,0 +1,23 @@
+import { TabelaSelection } from "../models/selection.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+import { Key } from "@oscarpalmer/atoms/models";
+
+//#region src/managers/selection.manager.d.ts
+declare class SelectionManager {
+  state: State;
+  handlers: TabelaSelection;
+  items: Set<Key>;
+  last: Key | undefined;
+  constructor(state: State);
+  add(keys: Key[]): void;
+  clear(): void;
+  destroy(): void;
+  handle(event: MouseEvent, target: HTMLElement): void;
+  range(from: Key | HTMLElement, to: Key | HTMLElement): void;
+  remove(keys: Key[]): void;
+  set(keys: Key[]): void;
+  toggle(): void;
+  update(removed: Key[]): void;
+}
+//#endregion
+export { SelectionManager };

package/dist/managers/{selection.manager.js → selection.manager.mjs}

@@ -1,19 +1,21 @@
-import { createElement } from "../helpers/dom.helpers.js";
-import { GroupComponent } from "../components/group.component.js";
-import { getKey } from "../helpers/misc.helpers.js";
-import { dragStyling } from "../helpers/style.helper.js";
+import { ARIA_SELECTED, ATTRIBUTE_DATA_KEY } from "../models/dom.model.mjs";
+import { CSS_ROW_BODY, CSS_ROW_SELECTED, CSS_SELECTION, CSS_TABLE } from "../models/style.model.mjs";
+import { createElement } from "../helpers/dom.helpers.mjs";
+import { getKey, isGroupKey } from "../helpers/misc.helpers.mjs";
+import { preventSelection } from "../helpers/style.helper.mjs";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isKey } from "@oscarpalmer/atoms/is";
 import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+//#region src/managers/selection.manager.ts
 var SelectionManager = class {
-	handlers = Object.freeze({
+	handlers = {
 		add: (keys) => this.add(keys),
 		clear: () => this.clear(),
 		remove: (keys) => this.remove(keys),
 		set: (keys) => this.set(keys),
 		toggle: () => this.toggle()
-	});
+	};
 	items = /* @__PURE__ */ new Set();
 	last;
 	constructor(state) {
@@ -46,7 +48,7 @@ var SelectionManager = class {
 		this.state = void 0;
 	}
 	handle(event, target) {
-		const key = getKey(target.getAttribute("data-key"));
+		const key = getKey(target.getAttribute(ATTRIBUTE_DATA_KEY));
 		if (key == null) return;
 		const { items } = this;
 		if (event.shiftKey) {
@@ -66,8 +68,8 @@ var SelectionManager = class {
 	range(from, to) {
 		const { state } = this;
 		const keyed = isKey(from) && isKey(to);
-		const fromKey = keyed ? from : getKey(from.getAttribute("data-key"));
-		const toKey = keyed ? to : getKey(to.getAttribute("data-key"));
+		const fromKey = keyed ? from : getKey(from.getAttribute(ATTRIBUTE_DATA_KEY));
+		const toKey = keyed ? to : getKey(to.getAttribute(ATTRIBUTE_DATA_KEY));
 		if (fromKey === toKey) return;
 		const { keys } = state.managers.data;
 		const fromIndex = state.managers.data.getIndex(fromKey);
@@ -77,7 +79,7 @@ var SelectionManager = class {
 		const selected = [];
 		for (let index = start; index <= end; index += 1) {
 			const key = keys[index];
-			if (!(key instanceof GroupComponent)) selected.push(key);
+			if (!isGroupKey(key)) selected.push(key);
 		}
 		if (keyed) this.add(selected);
 		else this.set(selected);
@@ -105,9 +107,10 @@ var SelectionManager = class {
 		const { items, state } = this;
 		const { keys } = state.managers.data;
 		if (items.size === keys.length - state.managers.group.items.length) this.clear();
-		else this.set(keys.filter((key) => !(key instanceof GroupComponent)));
+		else this.set(keys.filter((key) => !isGroupKey(key)));
 	}
 	update(removed) {
+		const { state } = this;
 		const items = [...removed.map((key) => ({
 			key,
 			removed: true
@@ -115,28 +118,28 @@ var SelectionManager = class {
 			key,
 			removed: false
 		}))];
-		const { length } = items;
+		let { length } = items;
 		for (let index = 0; index < length; index += 1) {
 			const { key, removed } = items[index];
-			const row = this.state.managers.row.get(key);
-			if (row == null || row.element == null) continue;
-			setAttribute(row.element, "aria-selected", String(!removed));
-			if (removed) row.element.classList.remove("tabela__row--selected");
-			else row.element.classList.add("tabela__row--selected");
+			const element = state.managers.row.get(key, false)?.element;
+			if (element == null) continue;
+			setAttribute(element, ARIA_SELECTED, String(!removed));
+			if (removed) element.classList.remove(CSS_ROW_SELECTED);
+			else element.classList.add(CSS_ROW_SELECTED);
 		}
 	}
 };
 function getPlaceholder() {
-	placeholder ??= createElement("div", { className: "tabela__selection--placeholder" }, {}, {});
+	placeholder ??= createElement("div", { className: CSS_SELECTION });
 	return placeholder;
 }
 function onMouseDown(event) {
 	if (shifted) {
-		const row = findAncestor(event.target, ".tabela__row--body");
+		const row = findAncestor(event.target, `.${CSS_ROW_BODY}`);
 		if (!(row instanceof HTMLElement)) return;
 		startElement = row;
 		startPosition = getPosition(event);
-		dragStyling.set();
+		preventSelection.set();
 	}
 }
 function onMouseMove(event) {
@@ -157,14 +160,14 @@ function onMouseUp(event) {
 	if (startElement == null) return;
 	if (!event.shiftKey) {
 		shifted = false;
-		dragStyling.remove();
+		preventSelection.remove();
 	}
 	getPlaceholder().remove();
-	const row = findAncestor(event.target, ".tabela__row--body");
+	const row = findAncestor(event.target, bodyRowSelector);
 	if (row instanceof HTMLElement) {
 		endElement = row;
-		const endTable = findAncestor(endElement, ".tabela");
-		const startTable = findAncestor(startElement, ".tabela");
+		const endTable = findAncestor(endElement, tableSelector);
+		const startTable = findAncestor(startElement, tableSelector);
 		if (startTable != null && startTable === endTable) mapped.get(startTable)?.range(startElement, endElement);
 	}
 	endElement = void 0;
@@ -172,7 +175,7 @@ function onMouseUp(event) {
 	startPosition = void 0;
 }
 function onShift(event, value) {
-	if (event.key === "Shift") shifted = value;
+	if (event.key === KEY_SHIFT) shifted = value;
 }
 function onShiftDown(event) {
 	onShift(event, true);
@@ -180,15 +183,19 @@ function onShiftDown(event) {
 function onShiftUp(event) {
 	onShift(event, false);
 }
-var mapped = /* @__PURE__ */ new WeakMap();
-var shifted = false;
-var endElement;
-var placeholder;
-var startPosition;
-var startElement;
+const KEY_SHIFT = "Shift";
+const mapped = /* @__PURE__ */ new WeakMap();
+const bodyRowSelector = `.${CSS_ROW_BODY}`;
+const tableSelector = `.${CSS_TABLE}`;
+let shifted = false;
+let endElement;
+let placeholder;
+let startPosition;
+let startElement;
 on(document, "keydown", onShiftDown);
 on(document, "keyup", onShiftUp);
 on(document, "mousedown", onMouseDown);
 on(document, "mousemove", onMouseMove);
 on(document, "mouseup", onMouseUp);
+//#endregion
 export { SelectionManager };

package/dist/managers/sort.manager.d.mts

@@ -0,0 +1,23 @@
+import { DataValue } from "../models/data.model.mjs";
+import { TabelaSort, TabelaSortDirection, TabelaSortItem } from "../models/sort.model.mjs";
+import { State } from "../models/tabela.model.mjs";
+
+//#region src/managers/sort.manager.d.ts
+declare class SortManager {
+  state: State;
+  handlers: TabelaSort;
+  items: TabelaSortItem[];
+  constructor(state: State);
+  add(key: string, direction?: TabelaSortDirection): void;
+  addOrSet(event: MouseEvent, key: string): void;
+  clear(): void;
+  destroy(): void;
+  flip(key: string): void;
+  remove(key: string): void;
+  set(items: TabelaSortItem[], set: boolean): void;
+  sort(): void;
+  toggle(event: MouseEvent, key: string, direction?: string | null): void;
+}
+declare function sortWithGroups(state: State, data: DataValue[], sorters: TabelaSortItem[]): DataValue[];
+//#endregion
+export { SortManager, sortWithGroups };

package/dist/managers/sort.manager.mjs

@@ -0,0 +1,147 @@
+import { ARIA_SORT, ATTRIBUTE_DATA_SORT_DIRECTION, ATTRIBUTE_DATA_SORT_POSITION } from "../models/dom.model.mjs";
+import { EVENT_DATA_SORTED, EVENT_SORT_ADD, EVENT_SORT_CLEAR, EVENT_SORT_FLIP, EVENT_SORT_REMOVE, EVENT_SORT_SET } from "../models/event.model.mjs";
+import { isGroupKey } from "../helpers/misc.helpers.mjs";
+import { SORT_ASCENDING, SORT_DESCENDING } from "../models/sort.model.mjs";
+import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
+import { sort } from "@oscarpalmer/atoms/array";
+import { getValue } from "@oscarpalmer/atoms/value/handle";
+import { compare } from "@oscarpalmer/atoms/value/compare";
+//#region src/managers/sort.manager.ts
+var SortManager = class {
+	handlers = {
+		add: (field, direction) => this.add(field, direction),
+		flip: (field) => this.flip(field),
+		clear: () => this.clear(),
+		remove: (field) => this.remove(field),
+		set: (items) => this.set(items, true)
+	};
+	items = [];
+	constructor(state) {
+		this.state = state;
+	}
+	add(key, direction) {
+		if (this.items.findIndex((item) => item.key === key) > -1) return;
+		this.items.push({
+			key,
+			direction: direction ?? "ascending"
+		});
+		this.state.managers.event.emit(EVENT_SORT_ADD, [{
+			key,
+			direction: direction ?? "ascending"
+		}]);
+		this.sort();
+	}
+	addOrSet(event, key) {
+		if (event.ctrlKey || event.metaKey) this.add(key);
+		else this.set([{
+			key,
+			direction: SORT_ASCENDING
+		}], false);
+	}
+	clear() {
+		if (this.items.length === 0) return;
+		this.items.length = 0;
+		this.state.managers.event.emit(EVENT_SORT_CLEAR);
+		this.sort();
+	}
+	destroy() {
+		this.handlers = void 0;
+		this.items = void 0;
+		this.state = void 0;
+	}
+	flip(key) {
+		const item = this.items.find((item) => item.key === key);
+		if (item == null) return;
+		item.direction = item.direction === "ascending" ? SORT_DESCENDING : SORT_ASCENDING;
+		this.state.managers.event.emit(EVENT_SORT_FLIP, [{
+			key,
+			direction: item.direction
+		}]);
+		this.sort();
+	}
+	remove(key) {
+		const index = this.items.findIndex((item) => item.key === key);
+		if (index === -1) return;
+		const spliced = this.items.splice(index, 1);
+		this.state.managers.event.emit(EVENT_SORT_REMOVE, spliced);
+		if (this.items.length === 0) this.state.managers.event.emit(EVENT_SORT_CLEAR);
+		this.sort();
+	}
+	set(items, set) {
+		const removed = this.items.splice(0, this.items.length, ...items.map((item) => ({
+			key: item.key,
+			direction: item.direction
+		})));
+		if (set) this.state.managers.event.emit(EVENT_SORT_SET, {
+			removed,
+			added: items.map((item) => ({
+				key: item.key,
+				direction: item.direction
+			}))
+		});
+		else this.state.managers.event.emit(EVENT_SORT_ADD, items.map((item) => ({
+			key: item.key,
+			direction: item.direction
+		})));
+		this.sort();
+	}
+	sort() {
+		const { items, state } = this;
+		const { length } = state.managers.column.items;
+		for (let index = 0; index < length; index += 1) {
+			const column = state.managers.column.items[index];
+			const sorterIndex = items.findIndex((item) => item.key === column.options.key);
+			const sorterItem = items[sorterIndex];
+			setAttributes(column.elements.wrapper, {
+				[ARIA_SORT]: sorterItem == null ? SORT_NONE : items.length > 1 ? SORT_OTHER : sorterItem.direction,
+				[ATTRIBUTE_DATA_SORT_DIRECTION]: sorterItem == null ? void 0 : sorterItem.direction
+			});
+			setAttribute(column.elements.sorter, ATTRIBUTE_DATA_SORT_POSITION, sorterIndex > -1 && items.length > 1 ? sorterIndex + 1 : void 0);
+		}
+		state.managers.data.state.keys.active = items.length === 0 ? void 0 : getSortedItems(state, items);
+		state.managers.event.emit(EVENT_DATA_SORTED, state.managers.data.get(true));
+		state.managers.render.update(true, true);
+	}
+	toggle(event, key, direction) {
+		switch (direction) {
+			case SORT_ASCENDING:
+				this.flip(key);
+				return;
+			case SORT_DESCENDING:
+				this.remove(key);
+				return;
+			default:
+				this.addOrSet(event, key);
+				return;
+		}
+	}
+};
+function getSortedItems(state, sorters) {
+	const data = state.managers.data.state.keys.active?.map((key) => isGroupKey(key) ? key : state.managers.data.state.values.mapped.get(key)) ?? state.managers.data.state.values.array;
+	if (!state.managers.group.enabled) return sort(data, sorters).map((item) => getValue(item, state.key));
+	return sortWithGroups(state, data, sorters).map((item) => isGroupKey(item) ? item : getValue(item, state.key));
+}
+function sortWithGroups(state, data, sorters) {
+	const { length } = sorters;
+	return data.sort((first, second) => {
+		const firstIsGroup = isGroupKey(first);
+		const secondIsGroup = isGroupKey(second);
+		const firstValue = firstIsGroup ? state.managers.group.getForKey(first).value.stringified : getValue(first, state.managers.group.key);
+		const secondValue = secondIsGroup ? state.managers.group.getForKey(second).value.stringified : getValue(second, state.managers.group.key);
+		const firstOrder = state.managers.group.order[firstValue];
+		const secondOrder = state.managers.group.order[secondValue];
+		const groupComparison = compare(firstOrder, secondOrder);
+		if (groupComparison !== 0) return groupComparison;
+		if (firstIsGroup || secondIsGroup) return firstIsGroup && secondIsGroup ? 0 : firstIsGroup ? -1 : 1;
+		for (let index = 0; index < length; index += 1) {
+			const sorter = sorters[index];
+			const comparison = compare(getValue(first, sorter.key), getValue(second, sorter.key));
+			if (comparison !== 0) return comparison * (sorter.direction === "ascending" ? 1 : -1);
+		}
+		return 0;
+	});
+}
+const SORT_NONE = "none";
+const SORT_OTHER = "other";
+//#endregion
+export { SortManager, sortWithGroups };

package/dist/managers/style.manager.d.mts

@@ -0,0 +1,9 @@
+import { State } from "../models/tabela.model.mjs";
+
+//#region src/managers/style.manager.d.ts
+declare class StyleManager {
+  readonly state: State;
+  constructor(state: State);
+}
+//#endregion
+export { StyleManager };