@typesafe-html5/typescript 0.2.58

package/inline/img/img.ts

@@ -0,0 +1,445 @@
+/**
+ * THIS FILE IS AUTOGENERATED. DO NOT EDIT IT.
+ *
+ * @generated December 28, 2025 12:26:31
+ * @component Img
+ * @description 
+ */
+
+export interface ImgProps {
+  /**
+   * Specifies alternative text to be displayed when the image cannot be rendered.
+   */
+  alt?: string | null | undefined;
+  /**
+   * Indicates whether assistive technologies should present the entire region as a whole when changes occur.
+   */
+  'aria-atomic'?: 'false' | 'true' | boolean | 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;
+  /**
+   * 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;
+  /**
+   * 
+   */
+  crossorigin?: 'anonymous' | 'use-credentials' | null | undefined;
+  /**
+   * Specifies the decoding process applied to the image.
+   */
+  decoding?: 'async' | 'auto' | 'sync' | 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;
+  /**
+   * 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 that an area should be part of an image map.
+   */
+  ismap?: boolean | null | undefined;
+  /**
+   * Specifies the primary language for the element's content
+   */
+  lang?: string | 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;
+  /**
+   * Specifies the sizes of the images or icons for different display/window sizes.
+   */
+  sizes?: string | null | undefined;
+  /**
+   * Specifies the URL of the external resource to be embedded or referenced.
+   */
+  src?: string | null | undefined;
+  /**
+   * Specifies a set of image candidate URLs and descriptors for responsive images.
+   */
+  srcset?: 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 a client-side image map to be used with the element.
+   */
+  usemap?: 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;
+}
+
+/**
+ * Img - 
+ */
+export class Img {
+  private element: HTMLElement;
+
+  constructor(props: ImgProps = {}) {
+    this.element = document.createElement('img');
+    this.applyProps(props);
+  }
+
+  private applyProps(props: ImgProps): void {
+    if (props.alt !== undefined) {
+      this.element.setAttribute('alt', String(props.alt));
+    }
+    if (props['aria-atomic'] !== undefined) {
+      this.setAriaAtomic(props['aria-atomic']);
+    }
+    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-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.crossorigin !== undefined) {
+      this.setCrossorigin(props.crossorigin);
+    }
+    if (props.decoding !== undefined) {
+      this.setDecoding(props.decoding);
+    }
+    if (props.dir !== undefined) {
+      this.setDir(props.dir);
+    }
+    if (props.draggable !== undefined) {
+      this.element.setAttribute('draggable', String(props.draggable));
+    }
+    if (props.height !== undefined) {
+      this.element.setAttribute('height', String(props.height));
+    }
+    if (props.hidden !== undefined) {
+      this.element.setAttribute('hidden', String(props.hidden));
+    }
+    if (props.ismap !== undefined) {
+      this.element.setAttribute('ismap', String(props.ismap));
+    }
+    if (props.lang !== undefined) {
+      this.element.setAttribute('lang', String(props.lang));
+    }
+    if (props.referrerpolicy !== undefined) {
+      this.setReferrerpolicy(props.referrerpolicy);
+    }
+    if (props.sizes !== undefined) {
+      this.element.setAttribute('sizes', String(props.sizes));
+    }
+    if (props.src !== undefined) {
+      this.element.setAttribute('src', String(props.src));
+    }
+    if (props.srcset !== undefined) {
+      this.element.setAttribute('srcset', String(props.srcset));
+    }
+    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.usemap !== undefined) {
+      this.element.setAttribute('usemap', String(props.usemap));
+    }
+    if (props.width !== undefined) {
+      this.element.setAttribute('width', String(props.width));
+    }
+  }
+
+  setAlt(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('alt');
+    } else {
+      this.element.setAttribute('alt', 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;
+  }
+
+  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;
+  }
+
+  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;
+  }
+
+  setCrossorigin(value: 'anonymous' | 'use-credentials' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('crossorigin');
+    } else {
+      this.element.setAttribute('crossorigin', String(value));
+    }
+    return this;
+  }
+
+  setDecoding(value: 'async' | 'auto' | 'sync' | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('decoding');
+    } else {
+      this.element.setAttribute('decoding', 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;
+  }
+
+  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;
+  }
+
+  setIsmap(value: boolean | null | undefined): this {
+    if (value === true) {
+      this.element.setAttribute('ismap', '');
+    } else {
+      this.element.removeAttribute('ismap');
+    }
+    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;
+  }
+
+  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;
+  }
+
+  setSizes(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('sizes');
+    } else {
+      this.element.setAttribute('sizes', 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;
+  }
+
+  setSrcset(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('srcset');
+    } else {
+      this.element.setAttribute('srcset', 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;
+  }
+
+  setUsemap(value: string | null | undefined): this {
+    if (value === null || value === undefined) {
+      this.element.removeAttribute('usemap');
+    } else {
+      this.element.setAttribute('usemap', 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;
+  }
+
+  getElement(): HTMLElement {
+    return this.element;
+  }
+}