Properties and Attributes

/**
 * Set single CSS property on element
 * @param element - Element to style
 * @param property - CSS property name (e.g., 'color', 'margin-top')
 * @param value - CSS value as string
 */
function set(element: SugarElement<Node>, property: string, value: string): void;

/**
 * Set multiple CSS properties at once
 * @param element - Element to style
 * @param css - Object mapping property names to values
 */
function setAll(element: SugarElement<Node>, css: Record<string, string>): void;

/**
 * Set CSS properties from object with optional values
 * @param element - Element to style  
 * @param css - Object mapping property names to optional values
 */
function setOptions(element: SugarElement<Node>, css: Record<string, Optional<string>>): void;

/**
 * Get computed CSS property value
 * @param element - Element to read from
 * @param property - CSS property name to retrieve
 * @returns Computed CSS value as string
 */
function get(element: SugarElement<Element>, property: string): string;

/**
 * Get raw CSS property value from element's style attribute
 * @param element - Element to read from
 * @param property - CSS property name to retrieve
 * @returns Raw CSS value from style attribute, if set
 */
function getRaw(element: SugarElement<Node>, property: string): Optional<string>;

/**
 * Get all raw CSS properties from element's style attribute
 * @param element - Element to read from
 * @returns Object containing all style attribute properties
 */
function getAllRaw(element: SugarElement<Node>): Record<string, string>;

/**
 * Check if CSS value is valid for given property
 * @param tag - HTML tag name context
 * @param property - CSS property name
 * @param value - CSS value to validate
 * @returns True if value is valid for property
 */
function isValidValue(tag: string, property: string, value: string): boolean;

/**
 * Remove CSS property from element
 * @param element - Element to modify
 * @param property - CSS property name to remove
 */
function remove(element: SugarElement<Node>, property: string): void;

/**
 * Preserve element's current styles during operation
 * @param element - Element to preserve styles for
 * @param f - Function to execute while preserving styles
 * @returns Return value of function f
 */
function preserve<E extends Element, T>(element: SugarElement<E>, f: (e: SugarElement<E>) => T): T;

/**
 * Copy all styles from source to target element
 * @param source - Element to copy styles from
 * @param target - Element to copy styles to
 */
function copy(source: SugarElement<Node>, target: SugarElement<HTMLElement>): void;

/**
 * Force browser reflow/repaint of element
 * @param e - Element to reflow
 */
function reflow(e: SugarElement<HTMLElement>): void;

/**
 * Transfer specific CSS properties from source to destination
 * @param source - Element to copy properties from
 * @param destination - Element to copy properties to
 * @param styles - Array of CSS property names to transfer
 */
function transfer(source: SugarElement<Node>, destination: SugarElement<Node>, styles: string[]): void;

import { Css, SugarElement } from "@ephox/sugar";

const element = SugarElement.fromTag('div');

// Set individual styles
Css.set(element, 'color', 'blue');
Css.set(element, 'margin-top', '20px');

// Set multiple styles
Css.setAll(element, {
  'background-color': 'lightblue',
  'padding': '10px',
  'border-radius': '5px'
});

// Get computed styles
const color = Css.get(element, 'color');
const marginTop = Css.get(element, 'margin-top');

// Conditional styling with optional values
Css.setOptions(element, {
  'display': Optional.some('block'),
  'visibility': Optional.none() // Won't be set
});

// Preserve styles during DOM manipulation
Css.preserve(element, (elem) => {
  // Perform operations that might affect styles
  // Original styles will be restored after
  return someOperation(elem);
});

/**
 * Create CSS property manager for specific property/value combination
 * @param property - CSS property name
 * @param value - CSS value to manage
 * @returns Property manager object
 */
function CssProperty(property: string, value: string): CssProperty;

interface CssProperty {
  /** Check if element has this property set to managed value */
  readonly is: (element: SugarElement<Element>) => boolean;
  /** Remove this property from element */
  readonly remove: (element: SugarElement<Element>) => void;
  /** Set this property to managed value on element */
  readonly set: (element: SugarElement<Element>) => void;
}

import { CssProperty, SugarElement } from "@ephox/sugar";

// Create property managers for common styles
const hiddenProperty = CssProperty('display', 'none');
const visibleProperty = CssProperty('visibility', 'visible');

const element = SugarElement.fromTag('div');

// Use property managers
hiddenProperty.set(element);           // Sets display: none
console.log(hiddenProperty.is(element)); // true

hiddenProperty.remove(element);        // Removes display property
console.log(hiddenProperty.is(element)); // false

/**
 * Add CSS class to element
 * @param element - Element to modify
 * @param clazz - CSS class name to add
 */
function add(element: SugarElement<Element>, clazz: string): void;

/**
 * Remove CSS class from element
 * @param element - Element to modify
 * @param clazz - CSS class name to remove
 */
function remove(element: SugarElement<Element>, clazz: string): void;

/**
 * Toggle CSS class on element
 * @param element - Element to modify
 * @param clazz - CSS class name to toggle
 * @returns True if class is now present, false if removed
 */
function toggle(element: SugarElement<Element>, clazz: string): boolean;

/**
 * Create class toggler for element/class combination
 * @param element - Element to create toggler for
 * @param clazz - CSS class name to toggle
 * @returns Toggler object for programmatic control
 */
function toggler(element: SugarElement<Element>, clazz: string): Toggler;

/**
 * Check if element has specific CSS class
 * @param element - Element to check
 * @param clazz - CSS class name to look for
 * @returns True if element has the class
 */
function has(element: SugarElement<Node>, clazz: string): boolean;

import { Class, SugarElement } from "@ephox/sugar";

const button = SugarElement.fromTag('button');

// Basic class management
Class.add(button, 'btn');
Class.add(button, 'btn-primary');
console.log(Class.has(button, 'btn')); // true

// Toggle functionality
const isActive = Class.toggle(button, 'active'); // Returns true if now active
Class.toggle(button, 'active'); // Removes 'active' class

// Create reusable toggler
const activeToggler = Class.toggler(button, 'active');
activeToggler.on();     // Add 'active' class
activeToggler.off();    // Remove 'active' class
activeToggler.toggle(); // Toggle 'active' class
console.log(activeToggler.isOn()); // Check current state

/**
 * Create generic toggler with custom turn-on/turn-off functions
 * @param turnOff - Function to call for "off" state
 * @param turnOn - Function to call for "on" state  
 * @param initial - Initial state (true = on, false = off)
 * @returns Toggler object
 */
function Toggler(turnOff: () => void, turnOn: () => void, initial: boolean): Toggler;

interface Toggler {
  /** Turn toggler on (execute turnOn function) */
  readonly on: () => void;
  /** Turn toggler off (execute turnOff function) */
  readonly off: () => void;
  /** Toggle current state */
  readonly toggle: () => void;
  /** Check if currently in "on" state */
  readonly isOn: () => boolean;
}

/**
 * Set HTML attribute on element
 * @param element - Element to modify
 * @param key - Attribute name
 * @param value - Attribute value (string, boolean, or number)
 */
function set(element: SugarElement<Element>, key: string, value: string | boolean | number): void;

/**
 * Set multiple attributes at once
 * @param element - Element to modify
 * @param attrs - Object mapping attribute names to values
 */
function setAll(element: SugarElement<Element>, attrs: Record<string, string | boolean | number>): void;

/**
 * Set attributes from object with optional values
 * @param element - Element to modify
 * @param attrs - Object mapping attribute names to optional values
 */
function setOptions(element: SugarElement<Element>, attrs: Record<string, Optional<string | boolean | number>>): void;

/**
 * Get attribute value from element
 * @param element - Element to read from
 * @param key - Attribute name to retrieve
 * @returns Attribute value as string, or undefined if not set
 */
function get(element: SugarElement<Element>, key: string): undefined | string;

/**
 * Safely get attribute value from element
 * @param element - Element to read from
 * @param key - Attribute name to retrieve
 * @returns Optional containing attribute value
 */
function getOpt(element: SugarElement<Element>, key: string): Optional<string>;

/**
 * Check if element has specific attribute
 * @param element - Element to check
 * @param key - Attribute name to look for
 * @returns True if attribute exists (regardless of value)
 */
function has(element: SugarElement<Node>, key: string): boolean;

/**
 * Remove attribute from element
 * @param element - Element to modify
 * @param key - Attribute name to remove
 */
function remove(element: SugarElement<Element>, key: string): void;

/**
 * Check if element has no attributes
 * @param element - Element to check
 * @returns True if element has no attributes at all
 */
function hasNone(element: SugarElement<Node>): boolean;

/**
 * Clone all attributes from element into object
 * @param element - Element to read attributes from
 * @returns Object containing all attribute name/value pairs
 */
function clone(element: SugarElement<Element>): Record<string, string>;

/**
 * Transfer specific attributes from source to destination
 * @param source - Element to copy attributes from
 * @param destination - Element to copy attributes to
 * @param attrs - Array of attribute names to transfer
 */
function transfer(source: SugarElement<Element>, destination: SugarElement<Element>, attrs: string[]): void;

import { Attribute, SugarElement } from "@ephox/sugar";

const input = SugarElement.fromTag('input');

// Set individual attributes
Attribute.set(input, 'type', 'email');
Attribute.set(input, 'required', true);
Attribute.set(input, 'maxlength', 100);

// Set multiple attributes
Attribute.setAll(input, {
  'placeholder': 'Enter your email',
  'class': 'form-control',
  'aria-label': 'Email address'
});

// Get attribute values
const inputType = Attribute.get(input, 'type'); // 'email'
const isRequired = Attribute.has(input, 'required'); // true

// Safe attribute access
const placeholderOpt = Attribute.getOpt(input, 'placeholder');
placeholderOpt.each(placeholder => {
  console.log('Placeholder text:', placeholder);
});

// Clone attributes for reuse
const attrs = Attribute.clone(input);
const newInput = SugarElement.fromTag('input');
Attribute.setAll(newInput, attrs);

/**
 * Create attribute property manager for specific attribute/value combination
 * @param attribute - HTML attribute name
 * @param value - Attribute value to manage
 * @returns Property manager object
 */
function AttributeProperty(attribute: string, value: string): AttributeProperty;

interface AttributeProperty {
  /** Check if element has this attribute set to managed value */
  readonly is: (element: SugarElement<Element>) => boolean;
  /** Remove this attribute from element */
  readonly remove: (element: SugarElement<Element>) => void;
  /** Set this attribute to managed value on element */
  readonly set: (element: SugarElement<Element>) => void;
}

import { AttributeProperty, SugarElement } from "@ephox/sugar";

// Create attribute managers
const hiddenAttribute = AttributeProperty('hidden', 'true');
const disabledAttribute = AttributeProperty('disabled', 'disabled');

const element = SugarElement.fromTag('button');

// Use attribute managers
disabledAttribute.set(element);           // Sets disabled="disabled"
console.log(disabledAttribute.is(element)); // true

disabledAttribute.remove(element);        // Removes disabled attribute
console.log(disabledAttribute.is(element)); // false

/**
 * Get HTML content from element
 * @param element - Element to read HTML from
 * @returns Inner HTML content as string
 */
function get(element: SugarElement<Element>): string;

/**
 * Set HTML content of element
 * @param element - Element to modify
 * @param value - HTML string to set as content
 */
function set(element: SugarElement<Element>, value: string): void;

/**
 * Get outer HTML of element (includes the element itself)
 * @param element - Element to get HTML from
 * @returns Complete HTML including element tags
 */
function getOuter(element: SugarElement<Element>): string;

/**
 * Add multiple classes to element
 * @param element - Element to add classes to
 * @param classes - Array of class names to add
 */
function add(element: SugarElement<Element>, classes: string[]): void;

/**
 * Remove multiple classes from element
 * @param element - Element to remove classes from
 * @param classes - Array of class names to remove
 */
function remove(element: SugarElement<Element>, classes: string[]): void;

/**
 * Toggle multiple classes on element
 * @param element - Element to toggle classes on
 * @param classes - Array of class names to toggle
 */
function toggle(element: SugarElement<Element>, classes: string[]): void;

/**
 * Test if element has all specified classes
 * @param element - Element to test
 * @param classes - Array of class names to check
 * @returns True if all classes are present
 */
function hasAll(element: SugarElement<Node>, classes: string[]): boolean;

/**
 * Test if element has any of the specified classes
 * @param element - Element to test
 * @param classes - Array of class names to check
 * @returns True if any class is present
 */
function hasAny(element: SugarElement<Node>, classes: string[]): boolean;

/**
 * Get all classes from element as array
 * @param element - Element to read classes from
 * @returns Array of all class names
 */
function get(element: SugarElement<Element>): string[];

/**
 * Get value from form element
 * @param element - Form element to read value from
 * @returns Current value as string
 */
function get(element: SugarElement<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>): string;

/**
 * Set value on form element
 * @param element - Form element to set value on
 * @param value - Value to set
 */
function set(element: SugarElement<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>, value: string): void;

/**
 * Get value from element safely (returns Optional)
 * @param element - Element to read value from
 * @returns Value wrapped in Optional
 */
function getOpt(element: SugarElement<Node>): Optional<string>;

/**
 * Get text content from element
 * @param element - Element to read text from
 * @returns Text content as string
 */
function get(element: SugarElement<Node>): string;

/**
 * Set text content of element
 * @param element - Element to set text on
 * @param value - Text content to set
 */
function set(element: SugarElement<Node>, value: string): void;

/**
 * Get text content safely (returns Optional)
 * @param element - Element to read text from
 * @returns Text content wrapped in Optional
 */
function getOption(element: SugarElement<Node>): Optional<string>;

/**
 * Get checked state of checkbox/radio element
 * @param element - Checkbox or radio element
 * @returns True if element is checked
 */
function get(element: SugarElement<HTMLInputElement>): boolean;

/**
 * Set checked state of checkbox/radio element
 * @param element - Checkbox or radio element
 * @param state - New checked state
 */
function set(element: SugarElement<HTMLInputElement>, state: boolean): void;

/**
 * Get contentEditable state
 * @param element - Element to check
 * @returns ContentEditable state string
 */
function get(element: SugarElement<HTMLElement>): string;

/**
 * Set element as editable
 * @param element - Element to make editable
 */
function on(element: SugarElement<HTMLElement>): void;

/**
 * Set element as non-editable
 * @param element - Element to make non-editable
 */
function off(element: SugarElement<HTMLElement>): void;

/**
 * Check if element is editable
 * @param element - Element to test
 * @returns True if element is contentEditable
 */
function isOn(element: SugarElement<Node>): boolean;

// Direction utilities
function isRtl(element: SugarElement<Node>): boolean;
function getDirection(element: SugarElement<Node>): 'rtl' | 'ltr';

// Float utilities  
function get(element: SugarElement<Element>): string;
function set(element: SugarElement<Element>, value: string): void;

// Element alignment utilities
function isCenter(element: SugarElement<HTMLElement>): boolean;
function isLeft(element: SugarElement<HTMLElement>): boolean;
function isRight(element: SugarElement<HTMLElement>): boolean;
function isJustify(element: SugarElement<HTMLElement>): boolean;

// Attribute list operations
function clone(element: SugarElement<Element>): Record<string, string>;
function copy(source: SugarElement<Element>, target: SugarElement<Element>): void;

// Property manager interfaces
interface CssProperty {
  readonly is: (element: SugarElement<Element>) => boolean;
  readonly remove: (element: SugarElement<Element>) => void;
  readonly set: (element: SugarElement<Element>) => void;
}

interface AttributeProperty {
  readonly is: (element: SugarElement<Element>) => boolean;
  readonly remove: (element: SugarElement<Element>) => void;
  readonly set: (element: SugarElement<Element>) => void;
}

// Toggler interface for state management
interface Toggler {
  readonly on: () => void;
  readonly off: () => void;
  readonly toggle: () => void;
  readonly isOn: () => boolean;
}

// Optional type from @ephox/katamari
interface Optional<T> {
  isSome(): boolean;
  isNone(): boolean;
  getOr<U>(def: U): T | U;
  each(f: (t: T) => void): void;
}