columnbar.mjs

/**
 * Copyright 2023 schukai GmbH
 * SPDX-License-Identifier: AGPL-3.0
 */

import { instanceSymbol } from "../../constants.mjs";
import {
	assembleMethodSymbol,
	CustomElement,
	registerCustomElement,
} from "../../dom/customelement.mjs";
import { findTargetElementFromEvent } from "../../dom/events.mjs";
import { clone } from "../../util/clone.mjs";
import { ColumnBarStyleSheet } from "./stylesheet/column-bar.mjs";
import { createPopper } from "@popperjs/core";

export { ColumnBar };

/**
 * @private
 * @type {symbol}
 */
const settingsButtonElementSymbol = Symbol("settingButtonElement");

/**
 * @private
 * @type {symbol}
 */
const settingsButtonEventHandlerSymbol = Symbol("settingsButtonEventHandler");

/**
 * @private
 * @type {symbol}
 */
const settingsLayerElementSymbol = Symbol("settingsLayerElement");

/**
 * @private
 * @type {symbol}
 */
const dotsContainerElementSymbol = Symbol("dotsContainerElement");

/**
 * @private
 * @type {symbol}
 */
const popperInstanceSymbol = Symbol("popperInstance");

/**
 * The ColumnBar component is used to show and configure the columns of a datatable.
 *
 * <img src="./images/column-bar.png">
 *
 * You can create this control either by specifying the HTML tag <monster-column-bar />` directly in the HTML or using
 * Javascript via the `document.createElement('monster-column-bar');` method.
 *
 * ```html
 * <monster-column-bar></monster-column-bar>
 * ```
 *
 * Or you can create this CustomControl directly in Javascript:
 *
 * ```js
 * import '@schukai/monster/components/datatable/column-bar.mjs';
 * document.createElement('monster-column-bar');
 * ```
 *
 * The Body should have a class "hidden" to ensure that the styles are applied correctly.
 *
 * ```css