standards-ui
Version:
A foundational design system built with native Web Components. Includes comprehensive TypeScript types, JSDoc documentation, and component examples.
744 lines (120 loc) • 7.27 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>JSDoc: Class: DsSelect</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: DsSelect</h1>
<section>
<header>
<h2><span class="attribs"><span class="type-signature"></span></span>DsSelect<span class="signature">()</span><span class="type-signature"></span></h2>
<div class="class-description">ds-select - A select component that wraps native select elements
Supports multiple selection and option projection</div>
</header>
<article>
<div class="container-overview">
<h2>Constructor</h2>
<h4 class="name" id="DsSelect"><span class="type-signature"></span>new DsSelect<span class="signature">()</span><span class="type-signature"></span></h4>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-select.js.html">ds-select.js</a>, <a href="ds-select.js.html#line5">line 5</a>
</li></ul></dd>
</dl>
</div>
<h3 class="subsection-title">Members</h3>
<h4 class="name" id="value"><span class="type-signature"></span>value<span class="type-signature"></span></h4>
<div class="description">
Property getters and setters to mirror the internal select
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-select.js.html">ds-select.js</a>, <a href="ds-select.js.html#line177">line 177</a>
</li></ul></dd>
</dl>
<h4 class="name" id=".observedAttributes"><span class="type-signature">(static) </span>observedAttributes<span class="type-signature"></span></h4>
<div class="description">
Define which attributes should trigger attributeChangedCallback
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-select.js.html">ds-select.js</a>, <a href="ds-select.js.html#line49">line 49</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">()</span><span class="type-signature"></span></h4>
<div class="description">
React to attribute changes and apply corresponding properties to the internal select
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-select.js.html">ds-select.js</a>, <a href="ds-select.js.html#line56">line 56</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
Apply initial attributes
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-select.js.html">ds-select.js</a>, <a href="ds-select.js.html#line229">line 229</a>
</li></ul></dd>
</dl>
<h4 class="name" id="handleSlotChange"><span class="type-signature"></span>handleSlotChange<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Handle slot changes to project ds-option components into the select
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-select.js.html">ds-select.js</a>, <a href="ds-select.js.html#line137">line 137</a>
</li></ul></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">
Set 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="ds-select.js.html">ds-select.js</a>, <a href="ds-select.js.html#line101">line 101</a>
</li></ul></dd>
</dl>
<h4 class="name" id="setupSlotListener"><span class="type-signature"></span>setupSlotListener<span class="signature">()</span><span class="type-signature"></span></h4>
<div class="description">
Set up slot listener to handle option projection
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="ds-select.js.html">ds-select.js</a>, <a href="ds-select.js.html#line127">line 127</a>
</li></ul></dd>
</dl>
</article>
</section>
</div>
<nav>
<h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="DsCheckbox.html">DsCheckbox</a></li><li><a href="DsFieldset.html">DsFieldset</a></li><li><a href="DsLabel.html">DsLabel</a></li><li><a href="DsLegend.html">DsLegend</a></li><li><a href="DsOption.html">DsOption</a></li><li><a href="DsSelect.html">DsSelect</a></li><li><a href="DsTextarea.html">DsTextarea</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 Jun 25 2025 21:24:48 GMT-0700 (Pacific Daylight Time)
</footer>
<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>