standards-ui
Version:
A foundational design system built with native Web Components. Includes comprehensive TypeScript types, JSDoc documentation, and component examples.
1,752 lines (427 loc) • 19.2 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: BaseComponent</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
<link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>
<body>
<div id="main">
<h1 class="page-title">Class: BaseComponent</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>BaseComponent<span class="signature">(options)</span><span class="type-signature"></span></h2>
</header>
<article>
<div class="container-overview">
<h4 class="name" id="BaseComponent"><span class="type-signature"></span>new BaseComponent<span class="signature">(options)</span><span class="type-signature"></span></h4>
<div class="description">
Creates a new base component.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>options</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last">Configuration options
<h6>Properties</h6>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>template</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">HTML template string</td>
</tr>
<tr>
<td class="name"><code>display</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">CSS display value for :host</td>
</tr>
<tr>
<td class="name"><code>observedAttributes</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Attributes to observe</td>
</tr>
<tr>
<td class="name"><code>attributeHandlers</code></td>
<td class="type">
<span class="param-type">Object</span>
</td>
<td class="description last">Attribute change handlers</td>
</tr>
<tr>
<td class="name"><code>events</code></td>
<td class="type">
<span class="param-type">Array.<string></span>
</td>
<td class="description last">Events to re-dispatch</td>
</tr>
<tr>
<td class="name"><code>targetSelector</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">CSS selector for the target element</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base-component.js.html">base-component.js</a>, <a href="base-component.js.html#line21">line 21</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id=".observedAttributes"><span class="type-signature">(static) </span>observedAttributes<span class="type-signature"></span></h4>
<div class="description">
Defines which attributes the component observes for changes.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base-component.js.html">base-component.js</a>, <a href="base-component.js.html#line349">line 349</a>
</li></ul></dd>
</dl>
<h3 class="subsection-title">Methods</h3>
<h4 class="name" id="attributeChangedCallback"><span class="type-signature"></span>attributeChangedCallback<span class="signature">(name, oldValue, newValue)</span><span class="type-signature"></span></h4>
<div class="description">
Called when one of the component's observed attributes is added, removed, or changed.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>name</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The name of the attribute that changed.</td>
</tr>
<tr>
<td class="name"><code>oldValue</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">null</span>
</td>
<td class="description last">The attribute's old value.</td>
</tr>
<tr>
<td class="name"><code>newValue</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">null</span>
</td>
<td class="description last">The attribute's new value.</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base-component.js.html">base-component.js</a>, <a href="base-component.js.html#line113">line 113</a>
</li></ul></dd>
</dl>
<h4 class="name" id="connectedCallback"><span class="type-signature"></span>connectedCallback<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Called when the element is connected to the DOM.
Applies initial attributes and ensures styles are applied.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base-component.js.html">base-component.js</a>, <a href="base-component.js.html#line142">line 142</a>
</li></ul></dd>
</dl>
<h4 class="name" id="createPropertyAccessor"><span class="type-signature"></span>createPropertyAccessor<span class="signature">(propertyName)</span><span class="type-signature"> → {Object}</span></h4>
<div class="description">
Creates a standard getter/setter pair for a property.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>propertyName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The property name</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base-component.js.html">base-component.js</a>, <a href="base-component.js.html#line207">line 207</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
Object with get and set functions
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">Object</span>
</dd>
</dl>
<h4 class="name" id="setupEventListeners"><span class="type-signature"></span>setupEventListeners<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Sets up event listeners to re-dispatch events from the host element.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base-component.js.html">base-component.js</a>, <a href="base-component.js.html#line80">line 80</a>
</li></ul></dd>
</dl>
<h4 class="name" id="setupShadowDOM"><span class="type-signature"></span>setupShadowDOM<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Sets up the shadow DOM with the provided template.
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base-component.js.html">base-component.js</a>, <a href="base-component.js.html#line56">line 56</a>
</li></ul></dd>
</dl>
<h4 class="name" id="validateAndWarnARIA"><span class="type-signature"></span>validateAndWarnARIA<span class="signature">(attributeName, value)</span><span class="type-signature"></span></h4>
<div class="description">
Validates and warns about ARIA issues for a specific attribute
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>attributeName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The name of the attribute being validated</td>
</tr>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">null</span>
</td>
<td class="description last">The value of the attribute</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base-component.js.html">base-component.js</a>, <a href="base-component.js.html#line394">line 394</a>
</li></ul></dd>
</dl>
<h4 class="name" id=".createBooleanHandler"><span class="type-signature">(static) </span>createBooleanHandler<span class="signature">(propertyName, attributeName)</span><span class="type-signature"> → {function}</span></h4>
<div class="description">
Creates a standard attribute handler for boolean attributes.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>propertyName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The property name to set</td>
</tr>
<tr>
<td class="name"><code>attributeName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The attribute name to check</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base-component.js.html">base-component.js</a>, <a href="base-component.js.html#line163">line 163</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The attribute handler function
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">function</span>
</dd>
</dl>
<h4 class="name" id=".createSetAttributeHandler"><span class="type-signature">(static) </span>createSetAttributeHandler<span class="signature">(attributeName)</span><span class="type-signature"> → {function}</span></h4>
<div class="description">
Creates a standard attribute handler for setAttribute.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>attributeName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The attribute name to set</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base-component.js.html">base-component.js</a>, <a href="base-component.js.html#line190">line 190</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The attribute handler function
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">function</span>
</dd>
</dl>
<h4 class="name" id=".createStringHandler"><span class="type-signature">(static) </span>createStringHandler<span class="signature">(propertyName, defaultValue)</span><span class="type-signature"> → {function}</span></h4>
<div class="description">
Creates a standard attribute handler for string attributes.
</div>
<h5>Parameters:</h5>
<table class="params">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>propertyName</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">The property name to set</td>
</tr>
<tr>
<td class="name"><code>defaultValue</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last">Default value if attribute is null</td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="base-component.js.html">base-component.js</a>, <a href="base-component.js.html#line177">line 177</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
The attribute handler function
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">function</span>
</dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="BaseComponent.html">BaseComponent</a></li></ul>
</nav>
<br class="clear">
<footer>
Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 4.0.4</a> on Wed Aug 20 2025 19:54:53 GMT-0700 (Pacific Daylight Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>