@rxap/material-table-system
Version:
This package provides a set of Angular directives, components, and services to enhance and customize Angular Material tables. It includes features such as row selection, column filtering, expandable rows, table actions, and more. The goal is to simplify c
1,357 lines (1,141 loc) • 51.8 kB
HTML
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>angular-material-table-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-material-table-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 class">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Classes</li>
<li class="breadcrumb-item" >SelectionModel</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/select-row/selection-model.ts</code>
</p>
<p class="comment">
<h3>Description</h3>
</p>
<p class="comment">
<p>Class to be used to power selecting one or more options from a list.</p>
</p>
<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">Readonly</span>
<a href="#changed" >changed</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Optional</span>
<a href="#compareWith" >compareWith</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>
<a href="#clear" >clear</a>
</li>
<li>
<a href="#deselect" >deselect</a>
</li>
<li>
<a href="#hasValue" >hasValue</a>
</li>
<li>
<a href="#isEmpty" >isEmpty</a>
</li>
<li>
<a href="#isMultipleSelection" >isMultipleSelection</a>
</li>
<li>
<a href="#isSelected" >isSelected</a>
</li>
<li>
<a href="#select" >select</a>
</li>
<li>
<a href="#setSelection" >setSelection</a>
</li>
<li>
<a href="#sort" >sort</a>
</li>
<li>
<a href="#toggle" >toggle</a>
</li>
</ul>
</td>
</tr>
<tr>
<td class="col-md-4">
<h6><b>Accessors</b></h6>
</td>
</tr>
<tr>
<td class="col-md-4">
<ul class="index-list">
<li>
<a href="#selected" >selected</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(_multiple, initiallySelectedValues?: T[], _emitChanges, compareWith?: (o1?: T,o2?: T) => void)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="39" class="link-to-prism">src/lib/select-row/selection-model.ts:39</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>_multiple</td>
<td>
</td>
<td>
No
</td>
</tr>
<tr>
<td>initiallySelectedValues</td>
<td>
<code>T[]</code>
</td>
<td>
Yes
</td>
</tr>
<tr>
<td>_emitChanges</td>
<td>
</td>
<td>
No
</td>
</tr>
<tr>
<td>compareWith</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function" target="_blank" >function</a></code>
</td>
<td>
Yes
</td>
</tr>
</tbody>
</table>
</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="changed"></a>
<span class="name">
<span class="modifier">Readonly</span>
<span ><b>changed</b></span>
<a href="#changed"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new Subject<SelectionChange<T>>()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="39" class="link-to-prism">src/lib/select-row/selection-model.ts:39</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Event emitted when the value has changed.</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="compareWith"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Optional</span>
<span ><b>compareWith</b></span>
<a href="#compareWith"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function" target="_blank" >function</a></code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="45" class="link-to-prism">src/lib/select-row/selection-model.ts:45</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="clear"></a>
<span class="name">
<span ><b>clear</b></span>
<a href="#clear"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>clear(flushEvent)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="123"
class="link-to-prism">src/lib/select-row/selection-model.ts:123</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Clears all of the selected values.
If false, the changes to the selection will be flushed along with the next event.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Optional</td>
<td>Default value</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>flushEvent</td>
<td>
No
</td>
<td>
<code>true</code>
</td>
<td>
<p>Whether to flush the changes in an event.
If false, the changes to the selection will be flushed along with the next event.</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>boolean | void</code>
</div>
<div class="io-description">
<p>Whether the selection changed as a result of this call</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="deselect"></a>
<span class="name">
<span ><b>deselect</b></span>
<a href="#deselect"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>deselect(...values: T[])</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="79"
class="link-to-prism">src/lib/select-row/selection-model.ts:79</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Deselects a value or an array of values.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>values</td>
<td>
<code>T[]</code>
</td>
<td>
No
</td>
<td>
<p>The values to deselect</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>boolean | void</code>
</div>
<div class="io-description">
<p>Whether the selection changed as a result of this call</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="hasValue"></a>
<span class="name">
<span ><b>hasValue</b></span>
<a href="#hasValue"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>hasValue()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="157"
class="link-to-prism">src/lib/select-row/selection-model.ts:157</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Determines whether the model has a value.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isEmpty"></a>
<span class="name">
<span ><b>isEmpty</b></span>
<a href="#isEmpty"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isEmpty()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="150"
class="link-to-prism">src/lib/select-row/selection-model.ts:150</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Determines whether the model does not have a value.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isMultipleSelection"></a>
<span class="name">
<span ><b>isMultipleSelection</b></span>
<a href="#isMultipleSelection"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isMultipleSelection()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="173"
class="link-to-prism">src/lib/select-row/selection-model.ts:173</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Gets whether multiple values can be selected.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/boolean" target="_blank" >boolean</a></code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isSelected"></a>
<span class="name">
<span ><b>isSelected</b></span>
<a href="#isSelected"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>isSelected(value: T)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="135"
class="link-to-prism">src/lib/select-row/selection-model.ts:135</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Determines whether a value is selected.</p>
</div>
<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>T</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/boolean" target="_blank" >boolean</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="select"></a>
<span class="name">
<span ><b>select</b></span>
<a href="#select"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>select(...values: T[])</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="65"
class="link-to-prism">src/lib/select-row/selection-model.ts:65</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Selects a value or an array of values.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>values</td>
<td>
<code>T[]</code>
</td>
<td>
No
</td>
<td>
<p>The values to select</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>boolean | void</code>
</div>
<div class="io-description">
<p>Whether the selection changed as a result of this call</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="setSelection"></a>
<span class="name">
<span ><b>setSelection</b></span>
<a href="#setSelection"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>setSelection(...values: T[])</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="93"
class="link-to-prism">src/lib/select-row/selection-model.ts:93</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Sets the selected values</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>values</td>
<td>
<code>T[]</code>
</td>
<td>
No
</td>
<td>
<p>The new selected values</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>boolean | void</code>
</div>
<div class="io-description">
<p>Whether the selection changed as a result of this call</p>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="sort"></a>
<span class="name">
<span ><b>sort</b></span>
<a href="#sort"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>sort(predicate?: (a?: T,b?: T) => void)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="164"
class="link-to-prism">src/lib/select-row/selection-model.ts:164</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Sorts the selected values based on a predicate function.</p>
</div>
<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>predicate</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/function" target="_blank" >function</a></code>
</td>
<td>
Yes
</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="toggle"></a>
<span class="name">
<span ><b>toggle</b></span>
<a href="#toggle"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<code>toggle(value: T)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="112"
class="link-to-prism">src/lib/select-row/selection-model.ts:112</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Toggles a value between selected and deselected.</p>
</div>
<div class="io-description">
<b>Parameters :</b>
<table class="params">
<thead>
<tr>
<td>Name</td>
<td>Type</td>
<td>Optional</td>
<td>Description</td>
</tr>
</thead>
<tbody>
<tr>
<td>value</td>
<td>
<code>T</code>
</td>
<td>
No
</td>
<td>
<p>The value to toggle</p>
</td>
</tr>
</tbody>
</table>
</div>
<div class="io-description">
<b>Returns : </b> <code>boolean | void</code>
</div>
<div class="io-description">
<p>Whether the selection changed as a result of this call</p>
</div>
</td>
</tr>
</tbody>
</table>
</section>
<section data-compodoc="block-accessors">
<h3 id="accessors">
Accessors
</h3>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="selected"></a>
<span class="name"><b>selected</b><a href="#selected"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>selected()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="30" class="link-to-prism">src/lib/select-row/selection-model.ts:30</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description"><p>Selected values.</p>
</div>
<div class="io-description">
<b>Returns : </b> <code>T[]</code>
</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 { Subject } from 'rxjs';
declare const ngDevMode: object | null;
/**
* Class to be used to power selecting one or more options from a list.
*/
export class SelectionModel<T> {
/** Currently-selected values. */
private _selection = new Set<T>();
/** Keeps track of the deselected options that haven't been emitted by the change event. */
private _deselectedToEmit: T[] = [];
/** Keeps track of the selected options that haven't been emitted by the change event. */
private _selectedToEmit: T[] = [];
/** Cache for the array value of the selected items. */
private _selected: T[] | null = null;
/** Selected values. */
get selected(): T[] {
if (!this._selected) {
this._selected = Array.from(this._selection.values());
}
return this._selected;
}
/** Event emitted when the value has changed. */
readonly changed = new Subject<SelectionChange<T>>();
constructor(
private _multiple = false,
initiallySelectedValues?: T[],
private _emitChanges = true,
public compareWith?: (o1: T, o2: T) => boolean,
) {
if (initiallySelectedValues && initiallySelectedValues.length) {
if (_multiple) {
initiallySelectedValues.forEach(value => this._markSelected(value));
} else {
this._markSelected(initiallySelectedValues[0]);
}
// Clear the array in order to avoid firing the change event for preselected values.
this._selectedToEmit.length = 0;
}
}
/**
* Selects a value or an array of values.
* @param values The values to select
* @return Whether the selection changed as a result of this call
* @breaking-change 16.0.0 make return type boolean
*/
select(...values: T[]): boolean | void {
this._verifyValueAssignment(values);
values.forEach(value => this._markSelected(value));
const changed = this._hasQueuedChanges();
this._emitChangeEvent();
return changed;
}
/**
* Deselects a value or an array of values.
* @param values The values to deselect
* @return Whether the selection changed as a result of this call
* @breaking-change 16.0.0 make return type boolean
*/
deselect(...values: T[]): boolean | void {
this._verifyValueAssignment(values);
values.forEach(value => this._unmarkSelected(value));
const changed = this._hasQueuedChanges();
this._emitChangeEvent();
return changed;
}
/**
* Sets the selected values
* @param values The new selected values
* @return Whether the selection changed as a result of this call
* @breaking-change 16.0.0 make return type boolean
*/
setSelection(...values: T[]): boolean | void {
this._verifyValueAssignment(values);
const oldValues = this.selected;
const newSelectedSet = new Set(values);
values.forEach(value => this._markSelected(value));
oldValues
.filter(value => !newSelectedSet.has(value))
.forEach(value => this._unmarkSelected(value));
const changed = this._hasQueuedChanges();
this._emitChangeEvent();
return changed;
}
/**
* Toggles a value between selected and deselected.
* @param value The value to toggle
* @return Whether the selection changed as a result of this call
* @breaking-change 16.0.0 make return type boolean
*/
toggle(value: T): boolean | void {
return this.isSelected(value) ? this.deselect(value) : this.select(value);
}
/**
* Clears all of the selected values.
* @param flushEvent Whether to flush the changes in an event.
* If false, the changes to the selection will be flushed along with the next event.
* @return Whether the selection changed as a result of this call
* @breaking-change 16.0.0 make return type boolean
*/
clear(flushEvent = true): boolean | void {
this._unmarkAll();
const changed = this._hasQueuedChanges();
if (flushEvent) {
this._emitChangeEvent();
}
return changed;
}
/**
* Determines whether a value is selected.
*/
isSelected(value: T): boolean {
if (this.compareWith) {
for (const otherValue of this._selection) {
if (this.compareWith(otherValue, value)) {
return true;
}
}
return false;
}
return this._selection.has(value);
}
/**
* Determines whether the model does not have a value.
*/
isEmpty(): boolean {
return this._selection.size === 0;
}
/**
* Determines whether the model has a value.
*/
hasValue(): boolean {
return !this.isEmpty();
}
/**
* Sorts the selected values based on a predicate function.
*/
sort(predicate?: (a: T, b: T) => number): void {
if (this._multiple && this.selected) {
this._selected!.sort(predicate);
}
}
/**
* Gets whether multiple values can be selected.
*/
isMultipleSelection() {
return this._multiple;
}
/** Emits a change event and clears the records of selected and deselected values. */
private _emitChangeEvent() {
// Clear the selected values so they can be re-cached.
this._selected = null;
if (this._selectedToEmit.length || this._deselectedToEmit.length) {
this.changed.next({
source: this,
added: this._selectedToEmit,
removed: this._deselectedToEmit,
});
this._deselectedToEmit = [];
this._selectedToEmit = [];
}
}
/** Selects a value. */
private _markSelected(value: T) {
if (!this.isSelected(value)) {
if (!this._multiple) {
this._unmarkAll();
}
if (!this.isSelected(value)) {
this._selection.add(value);
}
if (this._emitChanges) {
this._selectedToEmit.push(value);
}
}
}
/** Deselects a value. */
private _unmarkSelected(value: T) {
if (this.isSelected(value)) {
this._selection.delete(value);
if (this._emitChanges) {
this._deselectedToEmit.push(value);
}
}
}
/** Clears out the selected values. */
private _unmarkAll() {
if (!this.isEmpty()) {
this._selection.forEach(value => this._unmarkSelected(value));
}
}
/**
* Verifies the value assignment and throws an error if the specified value array is
* including multiple values while the selection model is not supporting multiple values.
*/
private _verifyValueAssignment(values: T[]) {
if (values.length > 1 && !this._multiple && (typeof ngDevMode === 'undefined' || ngDevMode)) {
throw getMultipleValuesInSingleSelectionError();
}
}
/** Whether there are queued up change to be emitted. */
private _hasQueuedChanges() {
return !!(this._deselectedToEmit.length || this._selectedToEmit.length);
}
}
/**
* Event emitted when the value of a MatSelectionModel has changed.
* @docs-private
*/
export interface SelectionChange<T> {
/** Model that dispatched the event. */
source: SelectionModel<T>;
/** Options that were added to the model. */
added: T[];
/** Options that were removed from the model. */
removed: T[];
}
/**
* Returns an error that reports that multiple values are passed into a selection model
* with a single value.
* @docs-private
*/
export function getMultipleValuesInSingleSelectionError() {
return Error('Cannot pass multiple values into SelectionModel with single-value mode.');
}
</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 = 'class';
var COMPODOC_CURRENT_PAGE_URL = 'SelectionModel.html';
var MA