docs/module-components-SelectInstancePanel.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Class: SelectInstancePanel</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: SelectInstancePanel</h1>

    
<section>

<header>
    
        <h2><span class="attribs"><span class="type-signature"></span></span>
            <span class="ancestors"><a href="module-components.html">components</a>~</span>SelectInstancePanel<span class="signature">(formElementId, instances, objectSubstitute, arraySubstitute, booleanTranslateFunction, initialSelected<span class="signature-attributes">opt</span>, selectAttributes<span class="signature-attributes">opt</span>, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h2>
        
            <div class="class-description"><p>A panel that contains a <a href="module-components-Select.html">module:components~Select</a> component and a
module:components~InstanceView that shows the selected instance.</p></div>
        
    
</header>

<article>
    <div class="container-overview">
    
        
    <h2>Constructor</h2>
    

    <h4 class="name" id="SelectInstancePanel"><span class="type-signature"></span>new SelectInstancePanel<span class="signature">(formElementId, instances, objectSubstitute, arraySubstitute, booleanTranslateFunction, initialSelected<span class="signature-attributes">opt</span>, selectAttributes<span class="signature-attributes">opt</span>, options<span class="signature-attributes">opt</span>)</span><span class="type-signature"></span></h4>
    

    <h5>Parameters:</h5>
    

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th>Default</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>formElementId</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The <code>id</code> of the form element.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>instances</code></td>
            

            <td class="type">
            
                
<span class="param-type">Array</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The array of JSON instances.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>objectSubstitute</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>A string to be shown as choice in the case
of an option corresponding to a JSON Schema <code>object</code> type.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>arraySubstitute</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>A string to be shown as choice in the case
of an option corresponding to a JSON Schema <code>array</code> type.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>booleanTranslateFunction</code></td>
            

            <td class="type">
            
                
<span class="param-type">function</span>


            </td>

            
                <td class="attributes">
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>A function that maps boolean
values into strings.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>initialSelected</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    0
                
                </td>
            

            <td class="description last"><p>The index of the option to appear as
selected at initialization.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>selectAttributes</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    {}
                
                </td>
            

            <td class="description last"><p>The parameters to consider as
attributes for the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select">HTML <code>&lt;select&gt;</code> element</a>.</p>
                <h6>Properties</h6>
                

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th>Default</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>disabled</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    false
                
                </td>
            

            <td class="description last"><p>Flag indicating whether
the input field should be disabled at initialization.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>multiple</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>Flag indicating whether the
<code>&lt;select&gt;</code> must show multiple choice rows. The <code>selectAttributes.size</code>
overrides its behavior if present.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>size</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                </td>
            

            <td class="description last"><p>The value that the <code>&lt;select&gt;</code>
element would take as <code>size</code> attribute. The parameter will be ignored in
case its value is bigger than the array length of the <code>options</code> parameter.</p></td>
        </tr>

    
    </tbody>
</table>

            </td>
        </tr>

    
        <tr>
            
                <td class="name"><code>options</code></td>
            

            <td class="type">
            
                
<span class="param-type">object</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

                <td class="default">
                
                    {}
                
                </td>
            

            <td class="description last"><p>Parameters considered to generate the
component.</p>
                <h6>Properties</h6>
                

<table class="params">
    <thead>
    <tr>
        
        <th>Name</th>
        

        <th>Type</th>

        
        <th>Attributes</th>
        

        <th class="last">Description</th>
    </tr>
    </thead>

    <tbody>
    

        <tr>
            
                <td class="name"><code>bootstrap</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>If given, it indicates the
<a href="https://getbootstrap.com/">Bootstrap</a> version which the component should
be built for.</p></td>
        </tr>

    
        <tr>
            
                <td class="name"><code>fontAwesome</code></td>
            

            <td class="type">
            
                
<span class="param-type">string</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>If given, it indicates the
<a href="https://fontawesome.com/">Font Awesome</a> version which the component should
be built for.</p></td>
        </tr>

    
    </tbody>
</table>

            </td>
        </tr>

    
    </tbody>
</table>


<dl class="details">

    
    <dt class="implements">Implements:</dt>
    <dd class="implements"><ul>
        
            <li><a href="module-components-InputComponent.html">module:components~InputComponent</a></li>
        
    </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_components.js.html">form/components.js</a>, <a href="form_components.js.html#line829">line 829</a>
    </li></ul></dd>
    

</dl>


    </div>

    
        <h3 class="subsection-title">Members</h3>

        
<h4 class="name" id="domElement"><span class="type-signature"></span>domElement<span class="type-signature"> :HTMLDivElement</span></h4>


<div class="description">
    <p>Reference to the DOM object that contains the HTML structure of the
component.</p>
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">HTMLDivElement</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="inherited-from">Inherited From:</dt>
    <dd class="inherited-from"><ul class="dummy"><li>
        <a href="module-components-Component.html#domElement">module:components~Component#domElement</a>
    </li></ul></dd>
    

    <dt class="implements">Implements:</dt>
    <dd class="implements"><ul>
        
            <li><a href="module-components-InputComponent.html#domElement">module:components~InputComponent#domElement</a></li>
        
    </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_components.js.html">form/components.js</a>, <a href="form_components.js.html#line14">line 14</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="instances"><span class="type-signature"></span>instances<span class="type-signature"> :Array</span></h4>


<div class="description">
    <p>The array of selectable JSON instances.</p>
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type">Array</span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_components.js.html">form/components.js</a>, <a href="form_components.js.html#line846">line 846</a>
    </li></ul></dd>
    

</dl>


<h4 class="name" id="select"><span class="type-signature"></span>select<span class="type-signature"> :<a href="module-components-Select.html">module:components~Select</a></span></h4>


<div class="description">
    <p>The <a href="module-components-Select.html">module:components~Select</a> component.</p>
</div>


    <h5>Type:</h5>
    <ul>
        <li>
            
<span class="param-type"><a href="module-components-Select.html">module:components~Select</a></span>


        </li>
    </ul>


<dl class="details">

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_components.js.html">form/components.js</a>, <a href="form_components.js.html#line864">line 864</a>
    </li></ul></dd>
    

</dl>


        <h3 class="subsection-title">Methods</h3>

        
    <h4 class="name" id="disable"><span class="type-signature"></span>disable<span class="signature">()</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Disables the component.</p>
</div>


<dl class="details">

    
    <dt class="inherited-from">Inherited From:</dt>
    <dd class="inherited-from"><ul class="dummy"><li>
        <a href="module-components-Component.html#disable">module:components~Component#disable</a>
    </li></ul></dd>
    

    <dt class="implements">Implements:</dt>
    <dd class="implements"><ul>
        
            <li><a href="module-components-InputComponent.html#disable">module:components~InputComponent#disable</a></li>
        
    </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_components.js.html">form/components.js</a>, <a href="form_components.js.html#line29">line 29</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="enable"><span class="type-signature"></span>enable<span class="signature">()</span><span class="type-signature"></span></h4>
    

<div class="description">
    <p>Enables the component.</p>
</div>


<dl class="details">

    
    <dt class="inherited-from">Inherited From:</dt>
    <dd class="inherited-from"><ul class="dummy"><li>
        <a href="module-components-Component.html#enable">module:components~Component#enable</a>
    </li></ul></dd>
    

    <dt class="implements">Implements:</dt>
    <dd class="implements"><ul>
        
            <li><a href="module-components-InputComponent.html#enable">module:components~InputComponent#enable</a></li>
        
    </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_components.js.html">form/components.js</a>, <a href="form_components.js.html#line21">line 21</a>
    </li></ul></dd>
    

</dl>


    <h4 class="name" id="getId"><span class="type-signature"></span>getId<span class="signature">()</span><span class="type-signature"> &rarr; {any}</span></h4>
    

<div class="description">
    <p>Returns the <code>id</code> of the input control element.</p>
</div>


<dl class="details">

    
    <dt class="implements">Implements:</dt>
    <dd class="implements"><ul>
        
            <li><a href="module-components-InputComponent.html#getId">module:components~InputComponent#getId</a></li>
        
    </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_components.js.html">form/components.js</a>, <a href="form_components.js.html#line56">line 56</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    <p>The value taken by the component.</p>
</div>


<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">any</span>


    </dd>
</dl>

    
    <h4 class="name" id="getValue"><span class="type-signature"></span>getValue<span class="signature">()</span><span class="type-signature"> &rarr; {any}</span></h4>
    

<div class="description">
    <p>Returns the value assigned to the component.</p>
</div>


<dl class="details">

    
    <dt class="implements">Implements:</dt>
    <dd class="implements"><ul>
        
            <li><a href="module-components-InputComponent.html#getValue">module:components~InputComponent#getValue</a></li>
        
    </ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="form_components.js.html">form/components.js</a>, <a href="form_components.js.html#line46">line 46</a>
    </li></ul></dd>
    

</dl>


<h5>Returns:</h5>

        
<div class="param-desc">
    <p>The value taken by the component.</p>
</div>


<dl>
    <dt>
        Type
    </dt>
    <dd>
        
<span class="param-type">any</span>


    </dd>
</dl>

    
</article>

</section>


</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Modules</h3><ul><li><a href="module-childApplicators.html">childApplicators</a></li><li><a href="module-components.html">components</a></li><li><a href="module-formElement.html">formElement</a></li><li><a href="module-formElementDefinitions.html">formElementDefinitions</a></li><li><a href="module-inPlaceApplicators.html">inPlaceApplicators</a></li><li><a href="module-JsonSchemaForms.html">JsonSchemaForms</a></li><li><a href="module-JsonSchemaKeywords.html">JsonSchemaKeywords</a></li><li><a href="module-JsonSchemaType.html">JsonSchemaType</a></li><li><a href="module-layouts.html">layouts</a></li><li><a href="module-selectors.html">selectors</a></li></ul><h3>Classes</h3><ul><li><a href="module-childApplicators-AdditionalItems.html">AdditionalItems</a></li><li><a href="module-childApplicators-AdditionalProperties.html">AdditionalProperties</a></li><li><a href="module-childApplicators-ArrayHandler.html">ArrayHandler</a></li><li><a href="module-childApplicators-ChildrenHandler.html">ChildrenHandler</a></li><li><a href="module-childApplicators-Items.html">Items</a></li><li><a href="module-childApplicators-ObjectHandler.html">ObjectHandler</a></li><li><a href="module-childApplicators-Properties.html">Properties</a></li><li><a href="module-components-AddButton.html">AddButton</a></li><li><a href="module-components-BooleanInput.html">BooleanInput</a></li><li><a href="module-components-GeneratorIcon.html">GeneratorIcon</a></li><li><a href="module-components-InputTitle.html">InputTitle</a></li><li><a href="module-components-InstanceViewPanel.html">InstanceViewPanel</a></li><li><a href="module-components-LabelTitle.html">LabelTitle</a></li><li><a href="module-components-NumericInput.html">NumericInput</a></li><li><a href="module-components-PillsInstancePanel.html">PillsInstancePanel</a></li><li><a href="module-components-RemoveButton.html">RemoveButton</a></li><li><a href="module-components-RequiredIcon.html">RequiredIcon</a></li><li><a href="module-components-RootIcon.html">RootIcon</a></li><li><a href="module-components-Select.html">Select</a></li><li><a href="module-components-SelectInstancePanel.html">SelectInstancePanel</a></li><li><a href="module-components-TextInput.html">TextInput</a></li><li><a href="module-components-Toggler.html">Toggler</a></li><li><a href="module-formElementDefinitions-State.html">State</a></li><li><a href="module-formElement-FormElement.html">FormElement</a></li><li><a href="module-inPlaceApplicators-Aggregation.html">Aggregation</a></li><li><a href="module-inPlaceApplicators-InPlaceApplicator.html">InPlaceApplicator</a></li><li><a href="module-inPlaceApplicators-IPASchema.html">IPASchema</a></li><li><a href="module-layouts-Layout.html">Layout</a></li><li><a href="module-selectors-Selector.html">Selector</a></li><li><a href="module-selectors-SelectorsContainer.html">SelectorsContainer</a></li><li><a href="module-selectors-SelectorsToolbar.html">SelectorsToolbar</a></li></ul><h3>Interfaces</h3><ul><li><a href="module-childApplicators-ChildApplicator.html">ChildApplicator</a></li><li><a href="module-components-Component.html">Component</a></li><li><a href="module-components-InputComponent.html">InputComponent</a></li></ul><h3>Global</h3><ul><li><a href="global.html#defaultFormOptions">defaultFormOptions</a></li><li><a href="global.html#formElementByDiv">formElementByDiv</a></li><li><a href="global.html#lcm">lcm</a></li><li><a href="global.html#pointerToId">pointerToId</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.4</a>
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>