@rxap/form-system
Version:
This package provides a set of directives, decorators, mixins, and validators to simplify the creation of dynamic forms in Angular applications. It offers features such as automatic control creation, data source integration, component customization, and h
1,090 lines (923 loc) • 42.9 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>angular-form-system</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="../images/favicon.ico">
<link rel="stylesheet" href="../styles/style.css">
<link rel="stylesheet" href="../styles/dark.css">
</head>
<body>
<script>
// Blocking script to avoid flickering dark mode
// Dark mode toggle button
var useDark = window.matchMedia('(prefers-color-scheme: dark)');
var darkModeState = useDark.matches;
var $darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
var $darkModeToggles = document.querySelectorAll('.dark-mode-switch');
var darkModeStateLocal = localStorage.getItem('compodoc_darkmode-state');
function checkToggle(check) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].checked = check;
}
}
function toggleDarkMode(state) {
if (window.localStorage) {
localStorage.setItem('compodoc_darkmode-state', state);
}
checkToggle(state);
const hasClass = document.body.classList.contains('dark');
if (state) {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.add('dark');
}
if (!hasClass) {
document.body.classList.add('dark');
}
} else {
for (var i = 0; i < $darkModeToggles.length; i++) {
$darkModeToggles[i].classList.remove('dark');
}
if (hasClass) {
document.body.classList.remove('dark');
}
}
}
useDark.addEventListener('change', function (evt) {
toggleDarkMode(evt.matches);
});
if (darkModeStateLocal) {
darkModeState = darkModeStateLocal === 'true';
}
toggleDarkMode(darkModeState);
</script>
<div class="navbar navbar-default navbar-fixed-top d-md-none p-0">
<div class="d-flex">
<a href="../" class="navbar-brand">angular-form-system</a>
<button type="button" class="btn btn-default btn-menu ion-ios-menu" id="btn-menu"></button>
</div>
</div>
<div class="xs-menu menu" id="mobile-menu">
<div id="book-search-input" role="search"><input type="text" placeholder="Type to search"></div> <compodoc-menu></compodoc-menu>
</div>
<div class="container-fluid main">
<div class="row main">
<div class="d-none d-md-block menu">
<compodoc-menu mode="normal"></compodoc-menu>
</div>
<!-- START CONTENT -->
<div class="content directive">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Directives</li>
<li class="breadcrumb-item" >InputSelectOptionsDirective</li>
</ol>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a href="#info"
class="nav-link"
class="nav-link active"
role="tab" id="info-tab" data-bs-toggle="tab" data-link="info">Info</a>
</li>
<li class="nav-item">
<a href="#source"
class="nav-link"
role="tab" id="source-tab" data-bs-toggle="tab" data-link="source">Source</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active in" id="info">
<p class="comment">
<h3>File</h3>
</p>
<p class="comment">
<code>src/lib/directives/input-select-options.directive.ts</code>
</p>
<p class="comment">
<h3>Extends</h3>
</p>
<p class="comment">
<code>OnDestroy</code>
<code>AfterViewInit</code>
<code><a href="../classes/ExtractOptionsDataSourceMixin.html" target="_self" >ExtractOptionsDataSourceMixin</a></code>
</p>
<p class="comment">
<h3>Implements</h3>
</p>
<p class="comment">
<code>OnDestroy</code>
<code>AfterViewInit</code>
</p>
<section data-compodoc="block-metadata">
<h3>Metadata</h3>
<table class="table table-sm table-hover metadata">
<tbody>
<tr>
<td class="col-md-3">Selector</td>
<td class="col-md-9"><code>[rxapInputSelectOptions]</code></td>
</tr>
<tr>
<td class="col-md-3">Standalone</td>
<td class="col-md-9"><code>true</code></td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-index">
<h3 id="index">Index</h3>
<table class="table table-sm table-bordered index-table">
<tbody>
<tr>
<td class="col-md-4">
<h6><b>Properties</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Protected</span>
<a href="#control" >control</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#dataSource" >dataSource</a>
</li>
<li>
<span class="modifier">Protected</span>
<a href="#options" >options</a>
</li>
<li>
<span class="modifier">Protected</span>
<span class="modifier">Optional</span>
<a href="#settings" >settings</a>
</li>
<li>
<span class="modifier">Protected</span>
<span class="modifier">Readonly</span>
<a href="#subscription" >subscription</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Methods</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<span class="modifier">Protected</span>
<a href="#renderTemplate" >renderTemplate</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#toDisplay" >toDisplay</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Inputs</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#rxapInputSelectOptionsMatAutocomplete" >rxapInputSelectOptionsMatAutocomplete</a>
</li>
<li>
<a href="#rxapInputSelectOptionsMetadata" >rxapInputSelectOptionsMetadata</a>
</li>
<li>
<a href="#rxapInputSelectOptionsViewer" >rxapInputSelectOptionsViewer</a>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-constructor">
<h3 id="constructor">Constructor</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<code>constructor(template: <a href="../interfaces/InputSelectOptionsTemplateContext.html" target="_self">TemplateRef<InputSelectOptionsTemplateContext></a>, dataSourceLoader: DataSourceLoader, viewContainerRef: ViewContainerRef, injector: Injector, cdr: ChangeDetectorRef, ngControl: NgControl | null, matFormField: MatFormField | null)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="122" class="link-to-prism">src/lib/directives/input-select-options.directive.ts:122</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div>
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>template</td>
<td>
<code><a href="../interfaces/InputSelectOptionsTemplateContext.html" target="_self" >TemplateRef<InputSelectOptionsTemplateContext></a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>dataSourceLoader</td>
<td>
<code>DataSourceLoader</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>viewContainerRef</td>
<td>
<code>ViewContainerRef</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>injector</td>
<td>
<code>Injector</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>cdr</td>
<td>
<code>ChangeDetectorRef</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>ngControl</td>
<td>
<code>NgControl | null</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>matFormField</td>
<td>
<code>MatFormField | null</code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-inputs">
<h3 id="inputs">Inputs</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rxapInputSelectOptionsMatAutocomplete"></a>
<b>rxapInputSelectOptionsMatAutocomplete</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>MatAutocomplete</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="103" class="link-to-prism">src/lib/directives/input-select-options.directive.ts:103</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rxapInputSelectOptionsMetadata"></a>
<b>rxapInputSelectOptionsMetadata</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>BaseDataSourceMetadata</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="100" class="link-to-prism">src/lib/directives/input-select-options.directive.ts:100</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="rxapInputSelectOptionsViewer"></a>
<b>rxapInputSelectOptionsViewer</b>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>BaseDataSourceViewer</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>{ id: '[rxapInputSelectOptions]' }</code>
</td>
</tr>
<tr>
<td class="col-md-2" colspan="2">
<div class="io-line">Defined in <a href="" data-line="97" class="link-to-prism">src/lib/directives/input-select-options.directive.ts:97</a></div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-methods">
<h3 id="methods">
Methods
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="renderTemplate"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>renderTemplate</b></span>
<a href="#renderTemplate"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>renderTemplate(options: ControlOptions | Record<string | any> | null)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="221"
class="link-to-prism">src/lib/directives/input-select-options.directive.ts:221</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Default value</td>
</tr>
</thead>
<tbody>
<tr>
<td>options</td>
<td>
<code>ControlOptions | Record<string | any> | null</code>
</td>
<td>
No
</td>
<td>
<code>this.options</code>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="toDisplay"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>toDisplay</b></span>
<a href="#toDisplay"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>toDisplay(value: <a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank">any</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="170"
class="link-to-prism">src/lib/directives/input-select-options.directive.ts:170</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >any</a></code>
</td>
<td>
No
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</div>
<div class="io-description">
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-properties">
<h3 id="inputs">
Properties
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="control"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>control</b></span>
<a href="#control"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>RxapFormControl</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="107" class="link-to-prism">src/lib/directives/input-select-options.directive.ts:107</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="dataSource"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>dataSource</b></span>
<a href="#dataSource"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>BaseDataSource<ControlOptions | Record></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="109" class="link-to-prism">src/lib/directives/input-select-options.directive.ts:109</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="options"></a>
<span class="name">
<span class="modifier">Protected</span>
<span ><b>options</b></span>
<a href="#options"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code>ControlOptions | Record<string | any> | null</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>null</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="111" class="link-to-prism">src/lib/directives/input-select-options.directive.ts:111</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="settings"></a>
<span class="name">
<span class="modifier">Protected</span>
<span class="modifier">Optional</span>
<span ><b>settings</b></span>
<a href="#settings"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="../interfaces/InputSelectOptionsSettings.html" target="_self" >InputSelectOptionsSettings<any></a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="113" class="link-to-prism">src/lib/directives/input-select-options.directive.ts:113</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="subscription"></a>
<span class="name">
<span class="modifier">Protected</span>
<span class="modifier">Readonly</span>
<span ><b>subscription</b></span>
<a href="#subscription"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new Subscription()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="105" class="link-to-prism">src/lib/directives/input-select-options.directive.ts:105</a></div>
</td>
</tr>
</tbody>
</table>
</section>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import {
AfterViewInit,
ChangeDetectorRef,
Directive,
Inject,
Injector,
INJECTOR,
Input,
isDevMode,
OnDestroy,
Optional,
TemplateRef,
ViewContainerRef,
} from '@angular/core';
import { NgControl } from '@angular/forms';
import {
BaseDataSource,
BaseDataSourceMetadata,
BaseDataSourceViewer,
DataSourceLoader,
} from '@rxap/data-source';
import { RxapFormControl } from '@rxap/forms';
import {
ControlOption,
ControlOptions,
equals,
Required,
} from '@rxap/utilities';
import { Mixin } from '@rxap/mixin';
import {
EMPTY,
of,
Subscription,
} from 'rxjs';
import {
distinctUntilChanged,
map,
switchMap,
tap,
throttleTime,
} from 'rxjs/operators';
import {
MAT_FORM_FIELD,
MatFormField,
} from '@angular/material/form-field';
import { MatAutocomplete } from '@angular/material/autocomplete';
import {
ExtractOptionsDataSourceMixin,
UseOptionsDataSourceSettings,
} from '../mixins/extract-options-data-source.mixin';
export interface InputSelectOptionsTemplateContext {
$implicit: ControlOption;
}
export interface InputSelectOptionsSettings<Source> extends UseOptionsDataSourceSettings<Source> {
/**
* true - the selected value is not send to the data source with the viewChange event.
* Instead an empty object {} is send to trigger a data source refresh.
*
* The OpenApiDataSource expects a Paramters Object in the viewChange event. This
* can couse issue if the select value object as a property that is also a parameter for
* the open-api operation. For instaed the select object has the property company and
* the open-api operation has a query parameter company. Then the BuildOptions method
* in the OpenApiDataSource would create a HttpParams object with the param company and the
* value from the select object property company. This will result in unpredictable behaviors.
*/
ignoreSelectedValue?: boolean;
/**
* true - the options list is filtered by the current control value if the
* control value is of type string. Then the display value of each option is
* compared to the control value. If the display value of an option includes
* the control value, then the option is used. This comprehensions it not type
* sensitive
*/
filteredOptions?: boolean;
/**
* true - the options list is only loaded once and not refreshed on each value change
*/
loadOnce?: boolean;
}
export interface InputSelectOptionsDirective extends OnDestroy, AfterViewInit,
ExtractOptionsDataSourceMixin {
}
@Mixin(ExtractOptionsDataSourceMixin)
@Directive({
selector: '[rxapInputSelectOptions]',
standalone: true,
})
export class InputSelectOptionsDirective implements OnDestroy, AfterViewInit {
@Input('rxapInputSelectOptionsViewer')
public viewer: BaseDataSourceViewer = { id: '[rxapInputSelectOptions]' };
@Input('rxapInputSelectOptionsMetadata')
public metadata?: BaseDataSourceMetadata;
@Input('rxapInputSelectOptionsMatAutocomplete')
public matAutocomplete?: MatAutocomplete;
protected readonly subscription = new Subscription();
protected control!: RxapFormControl;
protected dataSource!: BaseDataSource<ControlOptions | Record<string, any>>;
protected options: ControlOptions | Record<string, any> | null = null;
protected settings?: InputSelectOptionsSettings<any>;
/**
* This flag is used to prevent the setValue is called for each refresh
* of the options list. This is needed because the setValue method will
* trigger a new refresh of the options list. This results in an endless
* call stack. This flag is set to true if the setValue method is called
* once.
*/
private isAutocompleteToDisplayTriggered = false;
constructor(
@Inject(TemplateRef)
protected readonly template: TemplateRef<InputSelectOptionsTemplateContext>,
@Inject(DataSourceLoader)
protected readonly dataSourceLoader: DataSourceLoader,
@Inject(ViewContainerRef)
protected readonly viewContainerRef: ViewContainerRef,
@Inject(INJECTOR)
protected readonly injector: Injector,
@Inject(ChangeDetectorRef)
protected readonly cdr: ChangeDetectorRef,
// The ngControl could be unknown on construction
// bc it is available after the content is init
@Optional()
@Inject(NgControl)
protected ngControl: NgControl | null = null,
@Optional()
@Inject(MAT_FORM_FIELD)
protected matFormField: MatFormField | null = null,
) {
}
public ngAfterViewInit() {
this.extractOptionsDatasource();
this.viewer = {
id: '[rxapInputSelectOptions]' + this.control.controlId,
viewChange: this.settings?.loadOnce ? EMPTY : this.control.value$.pipe(
throttleTime(1000),
distinctUntilChanged((a, b) => equals(a, b)),
map(value => {
if (this.settings?.ignoreSelectedValue) {
return {};
}
return value;
}),
),
control: this.control,
};
if (this.matAutocomplete) {
this.matAutocomplete.displayWith = this.toDisplay.bind(this);
this.settings ??= {};
this.settings.filteredOptions ??= true;
}
this.loadOptions();
}
public toDisplay(value: any): string {
if (!value) {
return '';
}
return this.options?.find((option: any) => option.value === value)?.display ??
(isDevMode() ? 'to display error' : '');
}
public ngOnDestroy() {
this.subscription?.unsubscribe();
}
private loadOptions(dataSource: BaseDataSource<ControlOptions | Record<string, any>> = this.dataSource) {
this.subscription.add(dataSource.connect(this.viewer).pipe(
switchMap(options => {
if (this.settings?.filteredOptions) {
return this.control.value$.pipe(
map(controlValue => {
if (typeof controlValue === 'string' && controlValue) {
controlValue = controlValue.toLowerCase();
if (Array.isArray(options)) {
return options.filter(option => option.display.toLowerCase().includes(controlValue));
} else {
return Object.entries(options)
.filter(([ value, display ]) => typeof display ===
'string' &&
display.toLowerCase().includes(controlValue))
.map(([ value, display ]) => ({
value,
display,
}));
}
}
return options;
}),
);
}
return of(options);
}),
tap(options => this.renderTemplate(this.options = options)),
tap(() => {
if (this.matAutocomplete && !this.isAutocompleteToDisplayTriggered) {
this.isAutocompleteToDisplayTriggered = true;
// trigger a change detection after the options are rendered
// this is needed to trigger the mat-autocomplete options to display function
this.ngControl?.control?.setValue(this.ngControl?.control?.value);
}
}),
).subscribe());
}
protected renderTemplate(options: ControlOptions | Record<string, any> | null = this.options) {
this.viewContainerRef.clear();
if (options) {
if (!Array.isArray(options)) {
for (const [ value, display ] of Object.entries(options)) {
this.viewContainerRef.createEmbeddedView(
this.template,
{
$implicit: {
value,
display,
},
},
);
}
} else {
for (const option of options) {
this.viewContainerRef.createEmbeddedView(this.template, { $implicit: option });
}
}
} else {
if (isDevMode()) {
console.warn(`The options for the control ${ this.control.fullControlPath } is empty/null/undefined!`);
}
}
this.cdr.detectChanges();
}
}
</code></pre>
</div>
</div>
</div><div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
<!-- END CONTENT -->
</div>
</div>
<label class="dark-mode-switch">
<input type="checkbox">
<span class="slider">
<svg class="slider-icon" viewBox="0 0 24 24" fill="none" height="20" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" width="20" xmlns="http://www.w3.org/2000/svg">
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
</svg>
</span>
</label>
<script>
var COMPODOC_CURRENT_PAGE_DEPTH = 1;
var COMPODOC_CURRENT_PAGE_CONTEXT = 'directive';
var COMPODOC_CURRENT_PAGE_URL = 'InputSelectOptionsDirective.html';
var MAX_SEARCH_RESULTS = 15;
</script>
<script>
$darkModeToggleSwitchers = document.querySelectorAll('.dark-mode-switch input');
checkToggle(darkModeState);
if ($darkModeToggleSwitchers.length > 0) {
for (var i = 0; i < $darkModeToggleSwitchers.length; i++) {
$darkModeToggleSwitchers[i].addEventListener('change', function (event) {
darkModeState = !darkModeState;
toggleDarkMode(darkModeState);
});
}
}
</script>
<script src="../js/libs/custom-elements.min.js"></script>
<script src="../js/libs/lit-html.js"></script>
<script src="../js/menu-wc.js" defer></script>
<script nomodule src="../js/menu-wc_es5.js" defer></script>
<script src="../js/libs/bootstrap-native.js"></script>
<script src="../js/libs/es6-shim.min.js"></script>
<script src="../js/libs/EventDispatcher.js"></script>
<script src="../js/libs/promise.min.js"></script>
<script src="../js/libs/zepto.min.js"></script>
<script src="../js/compodoc.js"></script>
<script src="../js/tabs.js"></script>
<script src="../js/menu.js"></script>
<script src="../js/libs/clipboard.min.js"></script>
<script src="../js/libs/prism.js"></script>
<script src="../js/sourceCode.js"></script>
<script src="../js/search/search.js"></script>
<script src="../js/search/lunr.min.js"></script>
<script src="../js/search/search-lunr.js"></script>
<script src="../js/search/search_index.js"></script>
<script src="../js/lazy-load-graphs.js"></script>
</body>
</html>