@typesafe-html5/typescript 0.2.58

package/block/tr/tr.ts

@@ -0,0 +1,682 @@
+/**
+ * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
+ *
+ * @generated December 28, 2025 12:26:31
+ * @component Tr
+ * @description 
+ */
+
+export interface TrProps {
+  /**
+   * Child content or elements
+   */
+  children?: string | HTMLElement | (string | HTMLElement)[];
+  /**
+   * specifies a shortcut key (or keys) to activate or focus an element
+   */
+  accesskey?: string | null | undefined;
+  /**
+   * Specifies the horizontal alignment of each row cell. The possible enumerated values are left, center, right, justify, and char. When supported, the char value aligns the textual content on the character defined in the char attribute and on offset defined by the charoff attribute. Use the text-align CSS property instead, as this attribute is deprecated.
+   */
+  align?: 'left' | 'center' | 'right' | 'justify' | 'char' | null | undefined;
+  /**
+   * Indicates whether assistive technologies should present the entire region as a whole when changes occur.
+   */
+  'aria-atomic'?: 'false' | 'true' | boolean | null | undefined;
+  /**
+   * The aria-busy attribute is used to indicate whether an element is currently busy or not.
+   */
+  'aria-busy'?: 'true' | 'false' | boolean | null | undefined;
+  /**
+   * Defines the total number of columns in a table or grid.
+   */
+  'aria-colcount'?: number | null | undefined;
+  /**
+   * Identifies the element(s) whose contents or presence are controlled by this element. Value is a list of IDs separated by a space
+   */
+  'aria-controls'?: string | null | undefined;
+  /**
+   * Identifies the element(s) that describes the object. Value is a list of IDs separated by a space
+   */
+  'aria-describedby'?: string | null | undefined;
+  /**
+   * References an element that provides additional details about the current element.
+   */
+  'aria-details'?: string | null | undefined;
+  /**
+   * Indicates whether the element is exposed to an accessibility API. Use with caution on interactive elements. Set to true only on decorative elements such as icons, or when nav isnt visible
+   */
+  'aria-hidden'?: 'false' | 'true' | boolean | null | undefined;
+  /**
+   * Defines keyboard shortcuts available for the element.
+   */
+  'aria-keyshortcuts'?: string | null | undefined;
+  /**
+   * Identifies the element(s) that labels the current element. Value is a list of IDs separated by a space
+   */
+  'aria-labelledby'?: string | null | undefined;
+  /**
+   * Defines the hierarchical level of an element (e.g., headings, tree items).
+   */
+  'aria-level'?: number | null | undefined;
+  /**
+   * Defines how updates to the element should be announced to screen readers.
+   */
+  'aria-live'?: 'off' | 'polite' | 'assertive' | null | undefined;
+  /**
+   * Defines an element's position within a set (1-based index).
+   */
+  'aria-posinset'?: number | null | undefined;
+  /**
+   * Indicates what content changes should be announced in a live region.
+   */
+  'aria-relevant'?: 'additions' | 'removals' | 'text' | 'all' | 'additions text' | null | undefined;
+  /**
+   * Provides a human-readable custom role description for assistive technologies.
+   */
+  'aria-roledescription'?: string | null | undefined;
+  /**
+   * Defines the total number of rows in a table or grid.
+   */
+  'aria-rowcount'?: number | null | undefined;
+  /**
+   * Indicates whether an item is selected (e.g., in a list, table, or tree).
+   */
+  'aria-selected'?: 'false' | 'true' | 'undefined' | boolean | null | undefined;
+  /**
+   * Specifies the total number of items in a set.
+   */
+  'aria-setsize'?: number | null | undefined;
+  /**
+   * Defines the sorting order of a column.
+   */
+  'aria-sort'?: 'none' | 'ascending' | 'descending' | 'other' | null | undefined;
+  /**
+   * Represents the autocapitalize behavior of the element
+   */
+  autocapitalize?: 'none' | 'sentences' | 'words' | 'characters' | null | undefined;
+  /**
+   * Indicates whether the element is hidden
+   */
+  autofocus?: boolean | null | undefined;
+  /**
+   * Defines the background color of each row cell. The value is an HTML color; either a 6-digit hexadecimal RGB code, prefixed by a #, or a color keyword. Other CSS <color> values are not supported. Use the background-color CSS property instead, as this attribute is deprecated.
+   */
+  bgcolor?: string | null | undefined;
+  /**
+   * Specifies the alignment of the content to a character of each row cell. Typical values for this include a period (.) when attempting to align numbers or monetary values. If align is not set to char, this attribute is ignored.
+   */
+  char?: string | null | undefined;
+  /**
+   * Specifies the number of characters to offset the row cell content from the alignment character specified by the char attribute.
+   */
+  charoff?: string | null | undefined;
+  /**
+   * Indicates whether the element can be edited in place
+   */
+  contenteditable?: 'true' | 'false' | 'inherit' | boolean | null | undefined;
+  /**
+   * Represents the text direction of the element
+   */
+  dir?: 'ltr' | 'rtl' | 'auto' | null | undefined;
+  /**
+   * Indicates whether the element is draggable
+   */
+  draggable?: boolean | null | undefined;
+  /**
+   * Indicates whether the element is hidden
+   */
+  hidden?: boolean | null | undefined;
+  /**
+   * used to specify the data entry mode for an input. It helps guide on-screen keyboards (especially on mobile devices) to show the appropriate layout for the expected input type
+   */
+  inputmode?: 'none' | 'text' | 'decimal' | 'numeric' | 'email' | 'tel' | 'url' | 'search' | null | undefined;
+  /**
+   * Specifies the primary language for the element's content
+   */
+  lang?: string | null | undefined;
+  /**
+   * 
+   */
+  popover?: 'auto' | 'hint' | 'manual' | null | undefined;
+  /**
+   * Defines the semantic purpose of an element for assistive technologies.
+   */
+  role?: 'alert' | 'application' | 'article' | 'banner' | 'button' | 'checkbox' | 'complementary' | 'contentinfo' | 'dialog' | 'form' | 'grid' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'main' | 'menu' | 'menubar' | 'menuitem' | 'navigation' | 'none' | 'presentation' | 'radio' | 'region' | 'search' | 'status' | 'tab' | 'tablist' | 'tabpanel' | 'textbox' | 'toolbar' | 'tooltip' | null | undefined;
+  /**
+   * Represents the spellchecking behavior of the element
+   */
+  spellcheck?: 'true' | 'false' | boolean | null | undefined;
+  /**
+   * Represents the CSS inline style of the element
+   */
+  style?: string | null | undefined;
+  /**
+   * Represents a tab order of the element
+   */
+  tabindex?: number | null | undefined;
+  /**
+   * Represents a title or tooltip for the element
+   */
+  title?: string | null | undefined;
+  /**
+   * used to tell user agents whether the content should be translated.
+   */
+  translate?: 'yes' | 'no' | null | undefined;
+  /**
+   * Specifies the vertical alignment of each row cell. The possible enumerated values are baseline, bottom, middle, and top. Use the vertical-align CSS property instead, as this attribute is deprecated.
+   */
+  valign?: 'baseline' | 'bottom' | 'middle' | 'top' | null | undefined;
+}
+
+/**
+ * Tr - 
+ */
+export class Tr {
+  private element: HTMLElement;
+
+  constructor(props: TrProps = {}) {
+    this.element = document.createElement('tr');
+    this.applyProps(props);
+  }
+
+  private applyProps(props: TrProps): void {
+    if (props.children !== undefined) {
+      this.setChildren(props.children);
+    }
+    if (props.accesskey !== undefined) {
+      this.element.setAttribute('accesskey', String(props.accesskey));
+    }
+    if (props.align !== undefined) {
+      this.setAlign(props.align);
+    }
+    if (props['aria-atomic'] !== undefined) {
+      this.setAriaAtomic(props['aria-atomic']);
+    }
+    if (props['aria-busy'] !== undefined) {
+      this.setAriaBusy(props['aria-busy']);
+    }
+    if (props['aria-colcount'] !== undefined) {
+      this.element.setAttribute('aria-colcount', String(props['aria-colcount']));
+    }
+    if (props['aria-controls'] !== undefined) {
+      this.element.setAttribute('aria-controls', String(props['aria-controls']));
+    }
+    if (props['aria-describedby'] !== undefined) {
+      this.element.setAttribute('aria-describedby', String(props['aria-describedby']));
+    }
+    if (props['aria-details'] !== undefined) {
+      this.element.setAttribute('aria-details', String(props['aria-details']));
+    }
+    if (props['aria-hidden'] !== undefined) {
+      this.setAriaHidden(props['aria-hidden']);
+    }
+    if (props['aria-keyshortcuts'] !== undefined) {
+      this.element.setAttribute('aria-keyshortcuts', String(props['aria-keyshortcuts']));
+    }
+    if (props['aria-labelledby'] !== undefined) {
+      this.element.setAttribute('aria-labelledby', String(props['aria-labelledby']));
+    }
+    if (props['aria-level'] !== undefined) {
+      this.element.setAttribute('aria-level', String(props['aria-level']));
+    }
+    if (props['aria-live'] !== undefined) {
+      this.setAriaLive(props['aria-live']);
+    }
+    if (props['aria-posinset'] !== undefined) {
+      this.element.setAttribute('aria-posinset', String(props['aria-posinset']));
+    }
+    if (props['aria-relevant'] !== undefined) {
+      this.setAriaRelevant(props['aria-relevant']);
+    }
+    if (props['aria-roledescription'] !== undefined) {
+      this.element.setAttribute('aria-roledescription', String(props['aria-roledescription']));
+    }
+    if (props['aria-rowcount'] !== undefined) {
+      this.element.setAttribute('aria-rowcount', String(props['aria-rowcount']));
+    }
+    if (props['aria-selected'] !== undefined) {
+      this.setAriaSelected(props['aria-selected']);
+    }
+    if (props['aria-setsize'] !== undefined) {
+      this.element.setAttribute('aria-setsize', String(props['aria-setsize']));
+    }
+    if (props['aria-sort'] !== undefined) {
+      this.setAriaSort(props['aria-sort']);
+    }
+    if (props.autocapitalize !== undefined) {
+      this.setAutocapitalize(props.autocapitalize);
+    }
+    if (props.autofocus !== undefined) {
+      this.element.setAttribute('autofocus', String(props.autofocus));
+    }
+    if (props.bgcolor !== undefined) {
+      this.element.setAttribute('bgcolor', String(props.bgcolor));
+    }
+    if (props.char !== undefined) {
+      this.element.setAttribute('char', String(props.char));
+    }
+    if (props.charoff !== undefined) {
+      this.element.setAttribute('charoff', String(props.charoff));
+    }
+    if (props.contenteditable !== undefined) {
+      this.setContenteditable(props.contenteditable);
+    }
+    if (props.dir !== undefined) {
+      this.setDir(props.dir);
+    }
+    if (props.draggable !== undefined) {
+      this.element.setAttribute('draggable', String(props.draggable));
+    }
+    if (props.hidden !== undefined) {
+      this.element.setAttribute('hidden', String(props.hidden));
+    }
+    if (props.inputmode !== undefined) {
+      this.setInputmode(props.inputmode);
+    }
+    if (props.lang !== undefined) {
+      this.element.setAttribute('lang', String(props.lang));
+    }
+    if (props.popover !== undefined) {
+      this.setPopover(props.popover);
+    }
+    if (props.role !== undefined) {
+      this.setRole(props.role);
+    }
+    if (props.spellcheck !== undefined) {
+      this.setSpellcheck(props.spellcheck);
+    }
+    if (props.style !== undefined) {
+      this.element.setAttribute('style', String(props.style));
+    }
+    if (props.tabindex !== undefined) {
+      this.element.setAttribute('tabindex', String(props.tabindex));
+    }
+    if (props.title !== undefined) {
+      this.element.setAttribute('title', String(props.title));
+    }
+    if (props.translate !== undefined) {
+      this.setTranslate(props.translate);
+    }
+    if (props.valign !== undefined) {
+      this.setValign(props.valign);
+    }
+  }
+
+  setAccesskey(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('accesskey');
+    } else {
+      this.element.setAttribute('accesskey', String(value));
+    }
+    return this;
+  }
+
+  setAlign(value: 'left' | 'center' | 'right' | 'justify' | 'char' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('align');
+    } else {
+      this.element.setAttribute('align', String(value));
+    }
+    return this;
+  }
+
+  setAriaAtomic(value: 'false' | 'true' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-atomic');
+    } else {
+      this.element.setAttribute('aria-atomic', String(value));
+    }
+    return this;
+  }
+
+  setAriaBusy(value: 'true' | 'false' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-busy');
+    } else {
+      this.element.setAttribute('aria-busy', String(value));
+    }
+    return this;
+  }
+
+  setAriaColcount(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-colcount');
+    } else {
+      this.element.setAttribute('aria-colcount', String(value));
+    }
+    return this;
+  }
+
+  setAriaControls(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-controls');
+    } else {
+      this.element.setAttribute('aria-controls', String(value));
+    }
+    return this;
+  }
+
+  setAriaDescribedby(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-describedby');
+    } else {
+      this.element.setAttribute('aria-describedby', String(value));
+    }
+    return this;
+  }
+
+  setAriaDetails(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-details');
+    } else {
+      this.element.setAttribute('aria-details', String(value));
+    }
+    return this;
+  }
+
+  setAriaHidden(value: 'false' | 'true' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-hidden');
+    } else {
+      this.element.setAttribute('aria-hidden', String(value));
+    }
+    return this;
+  }
+
+  setAriaKeyshortcuts(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-keyshortcuts');
+    } else {
+      this.element.setAttribute('aria-keyshortcuts', String(value));
+    }
+    return this;
+  }
+
+  setAriaLabelledby(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-labelledby');
+    } else {
+      this.element.setAttribute('aria-labelledby', String(value));
+    }
+    return this;
+  }
+
+  setAriaLevel(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-level');
+    } else {
+      this.element.setAttribute('aria-level', String(value));
+    }
+    return this;
+  }
+
+  setAriaLive(value: 'off' | 'polite' | 'assertive' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-live');
+    } else {
+      this.element.setAttribute('aria-live', String(value));
+    }
+    return this;
+  }
+
+  setAriaPosinset(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-posinset');
+    } else {
+      this.element.setAttribute('aria-posinset', String(value));
+    }
+    return this;
+  }
+
+  setAriaRelevant(value: 'additions' | 'removals' | 'text' | 'all' | 'additions text' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-relevant');
+    } else {
+      this.element.setAttribute('aria-relevant', String(value));
+    }
+    return this;
+  }
+
+  setAriaRoledescription(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-roledescription');
+    } else {
+      this.element.setAttribute('aria-roledescription', String(value));
+    }
+    return this;
+  }
+
+  setAriaRowcount(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-rowcount');
+    } else {
+      this.element.setAttribute('aria-rowcount', String(value));
+    }
+    return this;
+  }
+
+  setAriaSelected(value: 'false' | 'true' | 'undefined' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-selected');
+    } else {
+      this.element.setAttribute('aria-selected', String(value));
+    }
+    return this;
+  }
+
+  setAriaSetsize(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-setsize');
+    } else {
+      this.element.setAttribute('aria-setsize', String(value));
+    }
+    return this;
+  }
+
+  setAriaSort(value: 'none' | 'ascending' | 'descending' | 'other' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-sort');
+    } else {
+      this.element.setAttribute('aria-sort', String(value));
+    }
+    return this;
+  }
+
+  setAutocapitalize(value: 'none' | 'sentences' | 'words' | 'characters' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('autocapitalize');
+    } else {
+      this.element.setAttribute('autocapitalize', String(value));
+    }
+    return this;
+  }
+
+  setAutofocus(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('autofocus', '');
+    } else {
+      this.element.removeAttribute('autofocus');
+    }
+    return this;
+  }
+
+  setBgcolor(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('bgcolor');
+    } else {
+      this.element.setAttribute('bgcolor', String(value));
+    }
+    return this;
+  }
+
+  setChar(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('char');
+    } else {
+      this.element.setAttribute('char', String(value));
+    }
+    return this;
+  }
+
+  setCharoff(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('charoff');
+    } else {
+      this.element.setAttribute('charoff', String(value));
+    }
+    return this;
+  }
+
+  setContenteditable(value: 'true' | 'false' | 'inherit' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('contenteditable');
+    } else {
+      this.element.setAttribute('contenteditable', String(value));
+    }
+    return this;
+  }
+
+  setDir(value: 'ltr' | 'rtl' | 'auto' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('dir');
+    } else {
+      this.element.setAttribute('dir', String(value));
+    }
+    return this;
+  }
+
+  setDraggable(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('draggable', '');
+    } else {
+      this.element.removeAttribute('draggable');
+    }
+    return this;
+  }
+
+  setHidden(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('hidden', '');
+    } else {
+      this.element.removeAttribute('hidden');
+    }
+    return this;
+  }
+
+  setInputmode(value: 'none' | 'text' | 'decimal' | 'numeric' | 'email' | 'tel' | 'url' | 'search' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('inputmode');
+    } else {
+      this.element.setAttribute('inputmode', String(value));
+    }
+    return this;
+  }
+
+  setLang(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('lang');
+    } else {
+      this.element.setAttribute('lang', String(value));
+    }
+    return this;
+  }
+
+  setPopover(value: 'auto' | 'hint' | 'manual' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('popover');
+    } else {
+      this.element.setAttribute('popover', String(value));
+    }
+    return this;
+  }
+
+  setRole(value: 'alert' | 'application' | 'article' | 'banner' | 'button' | 'checkbox' | 'complementary' | 'contentinfo' | 'dialog' | 'form' | 'grid' | 'group' | 'heading' | 'img' | 'link' | 'list' | 'listbox' | 'listitem' | 'main' | 'menu' | 'menubar' | 'menuitem' | 'navigation' | 'none' | 'presentation' | 'radio' | 'region' | 'search' | 'status' | 'tab' | 'tablist' | 'tabpanel' | 'textbox' | 'toolbar' | 'tooltip' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('role');
+    } else {
+      this.element.setAttribute('role', String(value));
+    }
+    return this;
+  }
+
+  setSpellcheck(value: 'true' | 'false' | boolean | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('spellcheck');
+    } else {
+      this.element.setAttribute('spellcheck', String(value));
+    }
+    return this;
+  }
+
+  setStyle(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('style');
+    } else {
+      this.element.setAttribute('style', String(value));
+    }
+    return this;
+  }
+
+  setTabindex(value: number | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('tabindex');
+    } else {
+      this.element.setAttribute('tabindex', String(value));
+    }
+    return this;
+  }
+
+  setTitle(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('title');
+    } else {
+      this.element.setAttribute('title', String(value));
+    }
+    return this;
+  }
+
+  setTranslate(value: 'yes' | 'no' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('translate');
+    } else {
+      this.element.setAttribute('translate', String(value));
+    }
+    return this;
+  }
+
+  setValign(value: 'baseline' | 'bottom' | 'middle' | 'top' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('valign');
+    } else {
+      this.element.setAttribute('valign', String(value));
+    }
+    return this;
+  }
+
+  setChildren(children: string | HTMLElement | (string | HTMLElement)[]): this {
+    // Clear existing children
+    while (this.element.firstChild) {
+      this.element.removeChild(this.element.firstChild);
+    }
+    
+    if (typeof children === 'string') {
+      this.element.textContent = children;
+    } else if (Array.isArray(children)) {
+      children.forEach(child => {
+        if (typeof child === 'string') {
+          this.element.appendChild(document.createTextNode(child));
+        } else {
+          this.element.appendChild(child);
+        }
+      });
+    } else {
+      this.element.appendChild(children);
+    }
+    return this;
+  }
+
+  getElement(): HTMLElement {
+    return this.element;
+  }
+}