@typesafe-html5/typescript 0.2.58

package/block/html/html.ts

@@ -0,0 +1,106 @@
+/**
+ * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
+ *
+ * @generated December 28, 2025 12:26:31
+ * @component Html
+ * @description 
+ */
+
+export interface HtmlProps {
+  /**
+   * Child content or elements
+   */
+  children?: string | HTMLElement | (string | HTMLElement)[];
+  /**
+   * Represents the text direction of the element
+   */
+  dir?: 'ltr' | 'rtl' | 'auto' | null | undefined;
+  /**
+   * Specifies the primary language for the element's content
+   */
+  lang?: string | null | undefined;
+  /**
+   * Specifies the address of the document's cache manifest.
+   */
+  manifest?: string | null | undefined;
+}
+
+/**
+ * Html - 
+ */
+export class Html {
+  private element: HTMLElement;
+
+  constructor(props: HtmlProps = {}) {
+    this.element = document.createElement('html');
+    this.applyProps(props);
+  }
+
+  private applyProps(props: HtmlProps): void {
+    if (props.children !== undefined) {
+      this.setChildren(props.children);
+    }
+    if (props.dir !== undefined) {
+      this.setDir(props.dir);
+    }
+    if (props.lang !== undefined) {
+      this.element.setAttribute('lang', String(props.lang));
+    }
+    if (props.manifest !== undefined) {
+      this.element.setAttribute('manifest', String(props.manifest));
+    }
+  }
+
+  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;
+  }
+
+  setLang(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('lang');
+    } else {
+      this.element.setAttribute('lang', String(value));
+    }
+    return this;
+  }
+
+  setManifest(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('manifest');
+    } else {
+      this.element.setAttribute('manifest', 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;
+  }
+}

package/block/iframe/iframe.ts

@@ -0,0 +1,538 @@
+/**
+ * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
+ *
+ * @generated December 28, 2025 12:26:31
+ * @component Iframe
+ * @description 
+ */
+
+export interface IframeProps {
+  /**
+   * Child content or elements
+   */
+  children?: string | HTMLElement | (string | HTMLElement)[];
+  /**
+   * Enables the iframe to be displayed in fullscreen mode.
+   */
+  allowfullscreen?: boolean | 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;
+  /**
+   * 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;
+  /**
+   * Defines a string value that labels the current element for assistive technologies.
+   */
+  'aria-label'?: 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 how updates to the element should be announced to screen readers.
+   */
+  'aria-live'?: 'off' | 'polite' | 'assertive' | 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;
+  /**
+   * Represents the text direction of the element
+   */
+  dir?: 'ltr' | 'rtl' | 'auto' | null | undefined;
+  /**
+   * Specifies the height of the element. The meaning may vary depending on the element type. Accepts integers, pixels (px), and percentages (%).
+   */
+  height?: string | null | undefined;
+  /**
+   * Indicates whether the element is hidden
+   */
+  hidden?: boolean | null | undefined;
+  /**
+   * Specifies the primary language for the element's content
+   */
+  lang?: string | null | undefined;
+  /**
+   * Specifies the name associated with the element. The meaning may vary depending on the context.
+   */
+  name?: string | null | undefined;
+  /**
+   * 
+   */
+  popover?: 'auto' | 'hint' | 'manual' | null | undefined;
+  /**
+   * Specifies the referrer policy for fetches initiated by the element.
+   */
+  referrerpolicy?: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | 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;
+  /**
+   * 
+   */
+  sandbox?: string | null | undefined;
+  /**
+   * When present, it specifies that the iframe should look like it is a part of the containing document (no borders or scrollbars).
+   */
+  seamless?: boolean | null | undefined;
+  /**
+   * Represents a slot in a shadow DOM
+   */
+  slot?: string | null | undefined;
+  /**
+   * Specifies the URL of the external resource to be embedded or referenced.
+   */
+  src?: string | null | undefined;
+  /**
+   * The value of srcdoc is a string containing HTML markup, which the browser will display as the content of the iframe.
+   */
+  srcdoc?: string | 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;
+  /**
+   * Specifies the width of the element. The meaning may vary depending on the element type. Accepts integers, pixels (px), and percentages (%).
+   */
+  width?: string | null | undefined;
+}
+
+/**
+ * Iframe - 
+ */
+export class Iframe {
+  private element: HTMLElement;
+
+  constructor(props: IframeProps = {}) {
+    this.element = document.createElement('iframe');
+    this.applyProps(props);
+  }
+
+  private applyProps(props: IframeProps): void {
+    if (props.children !== undefined) {
+      this.setChildren(props.children);
+    }
+    if (props.allowfullscreen !== undefined) {
+      this.element.setAttribute('allowfullscreen', String(props.allowfullscreen));
+    }
+    if (props['aria-atomic'] !== undefined) {
+      this.setAriaAtomic(props['aria-atomic']);
+    }
+    if (props['aria-busy'] !== undefined) {
+      this.setAriaBusy(props['aria-busy']);
+    }
+    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-label'] !== undefined) {
+      this.element.setAttribute('aria-label', String(props['aria-label']));
+    }
+    if (props['aria-labelledby'] !== undefined) {
+      this.element.setAttribute('aria-labelledby', String(props['aria-labelledby']));
+    }
+    if (props['aria-live'] !== undefined) {
+      this.setAriaLive(props['aria-live']);
+    }
+    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.dir !== undefined) {
+      this.setDir(props.dir);
+    }
+    if (props.height !== undefined) {
+      this.element.setAttribute('height', String(props.height));
+    }
+    if (props.hidden !== undefined) {
+      this.element.setAttribute('hidden', String(props.hidden));
+    }
+    if (props.lang !== undefined) {
+      this.element.setAttribute('lang', String(props.lang));
+    }
+    if (props.name !== undefined) {
+      this.element.setAttribute('name', String(props.name));
+    }
+    if (props.popover !== undefined) {
+      this.setPopover(props.popover);
+    }
+    if (props.referrerpolicy !== undefined) {
+      this.setReferrerpolicy(props.referrerpolicy);
+    }
+    if (props.role !== undefined) {
+      this.setRole(props.role);
+    }
+    if (props.sandbox !== undefined) {
+      this.element.setAttribute('sandbox', String(props.sandbox));
+    }
+    if (props.seamless !== undefined) {
+      this.element.setAttribute('seamless', String(props.seamless));
+    }
+    if (props.slot !== undefined) {
+      this.element.setAttribute('slot', String(props.slot));
+    }
+    if (props.src !== undefined) {
+      this.element.setAttribute('src', String(props.src));
+    }
+    if (props.srcdoc !== undefined) {
+      this.element.setAttribute('srcdoc', String(props.srcdoc));
+    }
+    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.width !== undefined) {
+      this.element.setAttribute('width', String(props.width));
+    }
+  }
+
+  setAllowfullscreen(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('allowfullscreen', '');
+    } else {
+      this.element.removeAttribute('allowfullscreen');
+    }
+    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;
+  }
+
+  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;
+  }
+
+  setAriaLabel(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('aria-label');
+    } else {
+      this.element.setAttribute('aria-label', 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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  setHeight(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('height');
+    } else {
+      this.element.setAttribute('height', String(value));
+    }
+    return this;
+  }
+
+  setHidden(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('hidden', '');
+    } else {
+      this.element.removeAttribute('hidden');
+    }
+    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;
+  }
+
+  setName(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('name');
+    } else {
+      this.element.setAttribute('name', 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;
+  }
+
+  setReferrerpolicy(value: 'no-referrer' | 'no-referrer-when-downgrade' | 'origin' | 'origin-when-cross-origin' | 'same-origin' | 'strict-origin' | 'strict-origin-when-cross-origin' | 'unsafe-url' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('referrerpolicy');
+    } else {
+      this.element.setAttribute('referrerpolicy', 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;
+  }
+
+  setSandbox(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('sandbox');
+    } else {
+      this.element.setAttribute('sandbox', String(value));
+    }
+    return this;
+  }
+
+  setSeamless(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('seamless', '');
+    } else {
+      this.element.removeAttribute('seamless');
+    }
+    return this;
+  }
+
+  setSlot(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('slot');
+    } else {
+      this.element.setAttribute('slot', String(value));
+    }
+    return this;
+  }
+
+  setSrc(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('src');
+    } else {
+      this.element.setAttribute('src', String(value));
+    }
+    return this;
+  }
+
+  setSrcdoc(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('srcdoc');
+    } else {
+      this.element.setAttribute('srcdoc', 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;
+  }
+
+  setWidth(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('width');
+    } else {
+      this.element.setAttribute('width', 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;
+  }
+}