@medyll/idae-be/dist/modules/styles.js

A modern, lightweight, and extensible DOM manipulation library built with TypeScript. Designed for precise element targeting and manipulation using a callback-based approach. Features include advanced DOM traversal, event handling, style management, attri

import { Be } from '../be.js';
var beStyleMethods;
(function (beStyleMethods) {
    beStyleMethods["set"] = "set";
    beStyleMethods["get"] = "get";
    beStyleMethods["unset"] = "unset";
})(beStyleMethods || (beStyleMethods = {}));
export class StylesHandler {
    beElement;
    constructor(beElement) {
        this.beElement = beElement;
    }
    methods = Object.keys(beStyleMethods);
    valueOf() {
        return `[StylesHandler: ${this.methods.join(', ')}]`;
    }
    static methods = Object.values(beStyleMethods);
    handle(actions) {
        const { method, args } = this.resolveIndirection(actions);
        this.beElement.eachNode(() => {
            switch (method) {
                case 'set':
                    this.set(args);
                    break;
                case 'get':
                    this.get(args);
                    break;
                case 'unset':
                    this.unset(args);
                    break;
            }
        });
        return this.beElement;
    }
    resolveIndirection(actions) {
        let method = 'get'; // Default to 'get' or any valid method
        let args;
        Object.keys(actions).forEach((action) => {
            const actionKey = action;
            if (StylesHandler.methods.includes(actionKey)) {
                method = actionKey;
                args = actions[actionKey];
            }
        });
        return { method: method, args };
    }
    /**
     * Sets one or more CSS styles for the selected element(s), including CSS custom properties.
     * @param styles - An object of CSS properties and values, or a string of CSS properties and values.
     * @param value - The value for a single CSS property when styles is a property name string.
     * @returns The Be instance for method chaining.
     * @example
     * // HTML: <div id="test"></div>
     * const beInstance = be('#test');
     * beInstance.setStyle({ color: 'red', backgroundColor: 'blue' }); // Sets multiple styles
     * beInstance.setStyle('color', 'green'); // Sets a single style
     */
    set(styles, value) {
        if (typeof styles === 'string') {
            // Handle string input,   if contains ':' and use cssText
            if (styles.includes(':')) {
                this.beElement.eachNode((el) => {
                    el.style.cssText = styles;
                });
            }
            else {
                // If value is provided, treat it as a single property setting
                this.applyStyle(styles, value ?? '');
            }
        }
        else if (typeof styles === 'object') {
            // Handle object input
            Object.entries(styles).forEach(([prop, val]) => {
                this.applyStyle(prop, val);
            });
        }
        return this.beElement;
    }
    /**
     * Gets the value of a CSS property for the first matched element.
     * @param key - The CSS property name.
     * @returns The value of the CSS property, or null if not found.
     * @example
     * // HTML: <div id="test" style="color: red;"></div>
     * const beInstance = be('#test');
     * const color = beInstance.getStyle('color');
     * console.log(color); // Output: "red"
     */
    get(key) {
        let css = null;
        this.beElement.eachNode((el) => {
            // Prioritize inline styles
            css = el.style[key] || null;
            // Fallback to computed styles if inline style is not set
            if (!css) {
                const computedStyle = window.getComputedStyle(el);
                css = computedStyle.getPropertyValue(key).trim();
            }
        }, true);
        return css || null;
    }
    /**
     * Removes a CSS property from the selected element(s).
     * @param key - The CSS property name to remove.
     * @returns The Be instance for method chaining.
     * @example
     * // HTML: <div id="test" style="color: red;"></div>
     * const beInstance = be('#test');
     * beInstance.unsetStyle('color'); // Removes the "color" style
     */
    unset(key) {
        this.beElement.eachNode((el) => {
            el.style.removeProperty(key);
        });
        return this.beElement;
    }
    applyStyle(property, value) {
        this.beElement.eachNode((el) => {
            const kebabProperty = toKebabCase(property);
            el.style.setProperty(kebabProperty, value);
        });
    }
    getKey(key) {
        let value = null;
        this.beElement.eachNode((el) => {
            value = el.style.getPropertyValue(key) || null;
        });
        return value;
    }
}
function toKebabCase(property) {
    return property.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
}