@rxap/window-system
Version:
A module for creating and managing windows within an Angular application. It provides components for window containers, toolbars, resizers, action bars, and task bars, along with services for managing window instances and configurations. This library allo
1,831 lines • 70 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-window-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-window-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" >WindowRef</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/window-ref.ts</code>
</p>
<p class="comment">
<h3>Extends</h3>
</p>
<p class="comment">
<code>Subject</code>
</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">Public</span>
<a href="#attachedRef$" >attachedRef$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#closed$" class="deprecated-name">closed$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#height$" >height$</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#settings$" >settings$</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<a href="#width$" >width$</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">Public</span>
<a href="#close" class="deprecated-name">close</a>
</li>
<li>
<span class="modifier">Public</span>
<span class="modifier"></span>
<a href="#complete" >complete</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#fullScreen" >fullScreen</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#getHeight" >getHeight</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#getPos" >getPos</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#getSizeConfig" >getSizeConfig</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#getWidth" >getWidth</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#minimize" >minimize</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#reopen" >reopen</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#setAttachedRef" >setAttachedRef</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#setFooterPortal" >setFooterPortal</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#setHeight" >setHeight</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#setPos" >setPos</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#setTitlePortal" >setTitlePortal</a>
</li>
<li>
<span class="modifier">Public</span>
<a href="#setWidth" >setWidth</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="#id" >id</a>
</li>
<li>
<a href="#minimizable" >minimizable</a>
</li>
<li>
<a href="#draggable" >draggable</a>
</li>
<li>
<a href="#minWidth" >minWidth</a>
</li>
<li>
<a href="#minHeight" >minHeight</a>
</li>
<li>
<a href="#maxWidth" >maxWidth</a>
</li>
<li>
<a href="#maxHeight" >maxHeight</a>
</li>
<li>
<a href="#isMinimized" >isMinimized</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(overlayRef: OverlayRef, overlay: Overlay, settings: <a href="../interfaces/WindowSettings.html" target="_self">WindowSettings<D></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/window-ref.ts:45</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>overlayRef</td>
<td>
<code>OverlayRef</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>overlay</td>
<td>
<code>Overlay</code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>settings</td>
<td>
<code><a href="../interfaces/WindowSettings.html" target="_self" >WindowSettings<D></a></code>
</td>
<td>
No
</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="attachedRef$"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>attachedRef$</b></span>
<a href="#attachedRef$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new ReplaySubject<ComponentRef<any> | EmbeddedViewRef<any>>(1)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="31" class="link-to-prism">src/lib/window-ref.ts:31</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="closed$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span class="deprecated-name"><b>closed$</b></span>
<a href="#closed$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4 deprecated">
removed. use the subscribe method and wait for the resolve event
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new Subject<R | undefined>()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="29" class="link-to-prism">src/lib/window-ref.ts:29</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="height$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>height$</b></span>
<a href="#height$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new BehaviorSubject<string>(this.getHeight())</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="24" class="link-to-prism">src/lib/window-ref.ts:24</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">Public</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>Default value : </i><code>new ReplaySubject<WindowSettings>(1)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="40" class="link-to-prism">src/lib/window-ref.ts:40</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="width$"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier">Readonly</span>
<span ><b>width$</b></span>
<a href="#width$"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4">
<i>Default value : </i><code>new BehaviorSubject<string>(this.getWidth())</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="23" class="link-to-prism">src/lib/window-ref.ts:23</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="close"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="deprecated-name"><b>close</b></span>
<a href="#close"><span class="icon ion-ios-link"></span></a>
</span>
</td>
</tr>
<tr>
<td class="col-md-4 deprecated">
removed. use the complete method
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="modifier-icon icon ion-ios-reset"></span>
<code>close(result?: R)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="91"
class="link-to-prism">src/lib/window-ref.ts:91</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>result</td>
<td>
<code>R</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="complete"></a>
<span class="name">
<span class="modifier">Public</span>
<span class="modifier"></span>
<span ><b>complete</b></span>
<a href="#complete"><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>complete()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="99"
class="link-to-prism">src/lib/window-ref.ts:99</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<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>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="fullScreen"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>fullScreen</b></span>
<a href="#fullScreen"><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>fullScreen()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="171"
class="link-to-prism">src/lib/window-ref.ts:171</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<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>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getHeight"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>getHeight</b></span>
<a href="#getHeight"><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>getHeight()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="147"
class="link-to-prism">src/lib/window-ref.ts:147</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<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>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getPos"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>getPos</b></span>
<a href="#getPos"><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>getPos()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="163"
class="link-to-prism">src/lib/window-ref.ts:163</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code>literal type</code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getSizeConfig"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>getSizeConfig</b></span>
<a href="#getSizeConfig"><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>getSizeConfig()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="114"
class="link-to-prism">src/lib/window-ref.ts:114</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-description">
<b>Returns : </b> <code>OverlaySizeConfig</code>
</div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="getWidth"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>getWidth</b></span>
<a href="#getWidth"><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>getWidth()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="142"
class="link-to-prism">src/lib/window-ref.ts:142</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<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>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="minimize"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>minimize</b></span>
<a href="#minimize"><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>minimize()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="104"
class="link-to-prism">src/lib/window-ref.ts:104</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<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>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="reopen"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>reopen</b></span>
<a href="#reopen"><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>reopen()</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="108"
class="link-to-prism">src/lib/window-ref.ts:108</a></div>
</td>
</tr>
<tr>
<td class="col-md-4">
<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>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="setAttachedRef"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>setAttachedRef</b></span>
<a href="#setAttachedRef"><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>setAttachedRef(attachedRef: ComponentRef<any> | EmbeddedViewRef<any>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="204"
class="link-to-prism">src/lib/window-ref.ts:204</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>attachedRef</td>
<td>
<code>ComponentRef<any> | EmbeddedViewRef<any></code>
</td>
<td>
No
</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="setFooterPortal"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>setFooterPortal</b></span>
<a href="#setFooterPortal"><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>setFooterPortal(portal: Portal<any>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="192"
class="link-to-prism">src/lib/window-ref.ts:192</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>portal</td>
<td>
<code>Portal<any></code>
</td>
<td>
No
</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="setHeight"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>setHeight</b></span>
<a href="#setHeight"><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>setHeight(height: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="134"
class="link-to-prism">src/lib/window-ref.ts:134</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>height</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
<td>
No
</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="setPos"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>setPos</b></span>
<a href="#setPos"><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>setPos(x: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>, y: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="152"
class="link-to-prism">src/lib/window-ref.ts:152</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>x</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
<td>
No
</td>
</tr>
<tr>
<td>y</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
<td>
No
</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="setTitlePortal"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>setTitlePortal</b></span>
<a href="#setTitlePortal"><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>setTitlePortal(portal: Portal<any>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="198"
class="link-to-prism">src/lib/window-ref.ts:198</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>portal</td>
<td>
<code>Portal<any></code>
</td>
<td>
No
</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="setWidth"></a>
<span class="name">
<span class="modifier">Public</span>
<span ><b>setWidth</b></span>
<a href="#setWidth"><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>setWidth(width: <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank">string</a>)</code>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="126"
class="link-to-prism">src/lib/window-ref.ts:126</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>width</td>
<td>
<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
</td>
<td>
No
</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>
</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="id"></a>
<span class="name"><b>id</b><a href="#id"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>id()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="55" class="link-to-prism">src/lib/window-ref.ts:55</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="minimizable"></a>
<span class="name"><b>minimizable</b><a href="#minimizable"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>minimizable()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="59" class="link-to-prism">src/lib/window-ref.ts:59</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="draggable"></a>
<span class="name"><b>draggable</b><a href="#draggable"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>draggable()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="63" class="link-to-prism">src/lib/window-ref.ts:63</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="minWidth"></a>
<span class="name"><b>minWidth</b><a href="#minWidth"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>minWidth()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="67" class="link-to-prism">src/lib/window-ref.ts:67</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="minHeight"></a>
<span class="name"><b>minHeight</b><a href="#minHeight"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>minHeight()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="71" class="link-to-prism">src/lib/window-ref.ts:71</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="maxWidth"></a>
<span class="name"><b>maxWidth</b><a href="#maxWidth"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>maxWidth()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="75" class="link-to-prism">src/lib/window-ref.ts:75</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="maxHeight"></a>
<span class="name"><b>maxHeight</b><a href="#maxHeight"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>maxHeight()</code></span>
</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/window-ref.ts:79</a></div>
</td>
</tr>
</tbody>
</table>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<td class="col-md-4">
<a name="isMinimized"></a>
<span class="name"><b>isMinimized</b><a href="#isMinimized"><span class="icon ion-ios-link"></span></a></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<span class="accessor"><b>get</b><code>isMinimized()</code></span>
</td>
</tr>
<tr>
<td class="col-md-4">
<div class="io-line">Defined in <a href="" data-line="83" class="link-to-prism">src/lib/window-ref.ts:83</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 {
Overlay,
OverlayRef,
OverlaySizeConfig,
} from '@angular/cdk/overlay';
import { Portal } from '@angular/cdk/portal';
import {
ComponentRef,
EmbeddedViewRef,
InjectFlags,
} from '@angular/core';
import {
BehaviorSubject,
ReplaySubject,
Subject,
} from 'rxjs';
import { RXAP_WINDOW_SETTINGS } from './tokens';
import { GetWindowStartPos } from './utilities';
import { WindowSettings } from './window-config';
export class WindowRef<D = any, R = any> extends Subject<R> {
public readonly width$ = new BehaviorSubject<string>(this.getWidth());
public readonly height$ = new BehaviorSubject<string>(this.getHeight());
/**
* @deprecated removed. use the subscribe method and wait for the resolve event
*/
public readonly closed$ = new Subject<R | undefined>();
public attachedRef$ = new ReplaySubject<ComponentRef<any> | EmbeddedViewRef<any>>(1);
/**
* @internal
*/
public footerPortal$ = new ReplaySubject<Portal<any>>(1);
/**
* @internal
*/
public titlePortal$ = new ReplaySubject<Portal<any>>(1);
public settings$ = new ReplaySubject<WindowSettings>(1);
/**
* stores the window size before fullScreen
* @internal
*/
private oldSizes: { width: string, height: string, pos: { x: string, y: string } } | null = null;
constructor(
protected readonly overlayRef: OverlayRef,
protected readonly overlay: Overlay,
protected readonly settings: WindowSettings<D>,
) {
super();
}
public get id(): string | undefined {
return this.settings.id;
}
public get minimizable(): boolean | undefined {
return this.settings.minimizable;
}
public get draggable(): boolean | undefined {
return this.settings.draggable;
}
public get minWidth(): string | undefined {
return this.settings.minWidth;
}
public get minHeight(): string | undefined {
return this.settings.minHeight;
}
public get maxWidth(): string | undefined {
return this.settings.maxWidth;
}
public get maxHeight(): string | undefined {
return this.settings.maxHeight;
}
public get isMinimized(): boolean {
return this.overlayRef.hostElement.style.display === 'none';
}
/**
* @deprecated removed. use the complete method
* @param result
*/
public close(result?: R): void {
this.closed$.next(result);
if (result !== undefined) {
this.next(result);
}
this.complete();
}
public override complete() {
this.overlayRef.dispose();
super.complete();
}
public minimize(): void {
this.overlayRef.hostElement.style.display = 'none';
}
public reopen(): void {
const startPos = GetWindowStartPos();
this.setPos(startPos.left, startPos.top);
this.overlayRef.hostElement.style.display = 'flex';
}
public getSizeConfig(): OverlaySizeConfig {
const config = this.overlayRef.getConfig();
return {
width: config.width,
height: config.height,
minHeight: config.minHeight,
minWidth: config.minWidth,
maxHeight: config.maxHeight,
maxWidth: config.maxWidth,
};
}
public setWidth(width: string): void {
this.overlayRef.updateSize({
...this.getSizeConfig(),
width,
});
this.width$.next(width);
}
public setHeight(height: string): void {
this.overlayRef.updateSize({
...this.getSizeConfig(),
height,
});
this.height$.next(height);
}
public getWidth(): string {
return this.getSizeConfig().width! + '';
// return this.overlayRef.overlayElement.offsetWidth + 'px'
}
public getHeight(): string {
return this.getSizeConfig().height! + '';
// return this.overlayRef.overlayElement.offsetHeight + 'px';
}
public setPos(x: string, y: string): void {
this.overlayRef.updatePositionStrategy(this
.overlay
.position()
.global()
.top(y)
.left(x),
);
this.overlayRef.updatePosition();
}
public getPos(): { x: string, y: string } {
const pos = this.overlayRef.overlayElement.getBoundingClientRect();
return {
x: pos.left + 'px',
y: pos.top + 'px',
};
}
public fullScreen(): void {
if (this.oldSizes === null) {
this.oldSizes = {
width: this.overlayRef.overlayElement.offsetWidth + 'px',
height: this.overlayRef.overlayElement.offsetHeight + 'px',
pos: this.getPos(),
};
this.setWidth('100vw');
this.setHeight('100vh');
this.setPos('0px', '0px');
} else {
this.setWidth(this.oldSizes.width);
this.setHeight(this.oldSizes.height);
this.setPos(this.oldSizes.pos.x, this.oldSizes.pos.y);
this.oldSizes = null;
}
}
/**
* @param portal
*/
public setFooterPortal(portal: Portal<any>) {
setTimeout(() => {
this.footerPortal$.next(portal);
});
}
public setTitlePortal(portal: Portal<any>) {
setTimeout(() => {
this.titlePortal$.next(portal);
});
}
public setAttachedRef(attachedRef: ComponentRef<any> | EmbeddedViewRef<any>) {
if (attachedRef instanceof ComponentRef) {
this.updateWindowSettings(attachedRef);
} else {
this.updateWindowSettings();
}
this.attachedRef$.next(attachedRef);
}
/**
* Injects the window settings from the component ref injector and overwrites
* the settings
* @private
*/
private updateWindowSettings(componentRef?: ComponentRef<any>) {
const settings = componentRef?.injector.get(RXAP_WINDOW_SETTINGS, null, InjectFlags.Optional) ?? this.settings;
if (settings) {
// prevent change diction error: ExpressionChangedAfterItHasBeenCheckedError
setTimeout(() => {
this.settings$.next(Object.assign({}, this.settings, settings));
});
}
}
}
</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 = 'WindowRef.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>