@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
502 lines (444 loc) • 24.5 kB
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 module">
<div class="content-data">
<ol class="breadcrumb">
<li class="breadcrumb-item">Modules</li>
<li class="breadcrumb-item" >RxapWindowSystemModule</li>
</ol>
<div class="text-center module-graph-container">
<div id="module-graph-svg">
<!-- Generated by graphviz version 2.47.0 (20210316.0004)
-->
<!-- Title: dependencies Pages: 1 -->
<svg width="1212pt" height="284pt"
viewBox="0.00 0.00 1212.00 284.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 280)">
<title>dependencies</title>
<polygon fill="white" stroke="transparent" points="-4,4 -4,-280 1208,-280 1208,4 -4,4"/>
<text text-anchor="start" x="581.01" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
<polygon fill="#ffffb3" stroke="transparent" points="368,-10 368,-30 388,-30 388,-10 368,-10"/>
<text text-anchor="start" x="391.63" y="-15.4" font-family="Times-12" font-size="14.00">  Declarations</text>
<polygon fill="#8dd3c7" stroke="transparent" points="481,-10 481,-30 501,-30 501,-10 481,-10"/>
<text text-anchor="start" x="504.73" y="-15.4" font-family="Times-12" font-size="14.00">  Module</text>
<polygon fill="#80b1d3" stroke="transparent" points="567,-10 567,-30 587,-30 587,-10 567,-10"/>
<text text-anchor="start" x="590.78" y="-15.4" font-family="Times-12" font-size="14.00">  Bootstrap</text>
<polygon fill="#fdb462" stroke="transparent" points="664,-10 664,-30 684,-30 684,-10 664,-10"/>
<text text-anchor="start" x="687.67" y="-15.4" font-family="Times-12" font-size="14.00">  Providers</text>
<polygon fill="#fb8072" stroke="transparent" points="760,-10 760,-30 780,-30 780,-10 760,-10"/>
<text text-anchor="start" x="783.73" y="-15.4" font-family="Times-12" font-size="14.00">  Exports</text>
<g id="clust1" class="cluster">
<title>cluster_RxapWindowSystemModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 1196,-268 1196,-70 8,-70"/>
</g>
<g id="clust3" class="cluster">
<title>cluster_RxapWindowSystemModule_imports</title>
<polygon fill="none" stroke="black" points="16,-78 16,-130 1188,-130 1188,-78 16,-78"/>
</g>
<g id="clust4" class="cluster">
<title>cluster_RxapWindowSystemModule_exports</title>
<polygon fill="none" stroke="black" points="21,-208 21,-260 1182,-260 1182,-208 21,-208"/>
</g>
<!-- DefaultWindowComponent -->
<g id="node1" class="node">
<title>DefaultWindowComponent</title>
<polygon fill="#8dd3c7" stroke="black" points="1179.52,-122 1176.52,-126 1155.52,-126 1152.52,-122 1008.48,-122 1008.48,-86 1179.52,-86 1179.52,-122"/>
<text text-anchor="middle" x="1094" y="-99.8" font-family="Times,serif" font-size="14.00">DefaultWindowComponent</text>
</g>
<!-- RxapWindowSystemModule -->
<g id="node7" class="node">
<title>RxapWindowSystemModule</title>
<polygon fill="#8dd3c7" stroke="black" points="585.04,-187 582.04,-191 561.04,-191 558.04,-187 406.96,-187 406.96,-151 585.04,-151 585.04,-187"/>
<text text-anchor="middle" x="496" y="-164.8" font-family="Times,serif" font-size="14.00">RxapWindowSystemModule</text>
</g>
<!-- DefaultWindowComponent->RxapWindowSystemModule -->
<g id="edge1" class="edge">
<title>DefaultWindowComponent->RxapWindowSystemModule</title>
<path fill="none" stroke="black" d="M1090.88,-122.22C1090.88,-140.83 1090.88,-167 1090.88,-167 1090.88,-167 595.06,-167 595.06,-167"/>
<polygon fill="black" stroke="black" points="595.06,-163.5 585.06,-167 595.06,-170.5 595.06,-163.5"/>
</g>
<!-- WindowActionBarComponent -->
<g id="node2" class="node">
<title>WindowActionBarComponent</title>
<polygon fill="#8dd3c7" stroke="black" points="989.86,-122 986.86,-126 965.86,-126 962.86,-122 802.14,-122 802.14,-86 989.86,-86 989.86,-122"/>
<text text-anchor="middle" x="896" y="-99.8" font-family="Times,serif" font-size="14.00">WindowActionBarComponent</text>
</g>
<!-- WindowActionBarComponent->RxapWindowSystemModule -->
<g id="edge2" class="edge">
<title>WindowActionBarComponent->RxapWindowSystemModule</title>
<path fill="none" stroke="black" d="M891.1,-122.03C891.1,-139.06 891.1,-162 891.1,-162 891.1,-162 595.16,-162 595.16,-162"/>
<polygon fill="black" stroke="black" points="595.16,-158.5 585.16,-162 595.16,-165.5 595.16,-158.5"/>
</g>
<!-- WindowContainerComponent -->
<g id="node3" class="node">
<title>WindowContainerComponent</title>
<polygon fill="#8dd3c7" stroke="black" points="784.25,-122 781.25,-126 760.25,-126 757.25,-122 599.75,-122 599.75,-86 784.25,-86 784.25,-122"/>
<text text-anchor="middle" x="692" y="-99.8" font-family="Times,serif" font-size="14.00">WindowContainerComponent</text>
</g>
<!-- WindowContainerComponent->RxapWindowSystemModule -->
<g id="edge3" class="edge">
<title>WindowContainerComponent->RxapWindowSystemModule</title>
<path fill="none" stroke="black" d="M657.65,-122.24C657.65,-137.57 657.65,-157 657.65,-157 657.65,-157 595.33,-157 595.33,-157"/>
<polygon fill="black" stroke="black" points="595.33,-153.5 585.33,-157 595.33,-160.5 595.33,-153.5"/>
</g>
<!-- WindowContentComponent -->
<g id="node4" class="node">
<title>WindowContentComponent</title>
<polygon fill="#8dd3c7" stroke="black" points="581.88,-122 578.88,-126 557.88,-126 554.88,-122 408.12,-122 408.12,-86 581.88,-86 581.88,-122"/>
<text text-anchor="middle" x="495" y="-99.8" font-family="Times,serif" font-size="14.00">WindowContentComponent</text>
</g>
<!-- WindowContentComponent->RxapWindowSystemModule -->
<g id="edge4" class="edge">
<title>WindowContentComponent->RxapWindowSystemModule</title>
<path fill="none" stroke="black" d="M495,-122.11C495,-122.11 495,-140.99 495,-140.99"/>
<polygon fill="black" stroke="black" points="491.5,-140.99 495,-150.99 498.5,-140.99 491.5,-140.99"/>
</g>
<!-- WindowResizerComponent -->
<g id="node5" class="node">
<title>WindowResizerComponent</title>
<polygon fill="#8dd3c7" stroke="black" points="389.52,-122 386.52,-126 365.52,-126 362.52,-122 218.48,-122 218.48,-86 389.52,-86 389.52,-122"/>
<text text-anchor="middle" x="304" y="-99.8" font-family="Times,serif" font-size="14.00">WindowResizerComponent</text>
</g>
<!-- WindowResizerComponent->RxapWindowSystemModule -->
<g id="edge5" class="edge">
<title>WindowResizerComponent->RxapWindowSystemModule</title>
<path fill="none" stroke="black" d="M279.55,-122.01C279.55,-138.05 279.55,-159 279.55,-159 279.55,-159 396.71,-159 396.71,-159"/>
<polygon fill="black" stroke="black" points="396.71,-162.5 406.71,-159 396.71,-155.5 396.71,-162.5"/>
</g>
<!-- WindowToolBarComponent -->
<g id="node6" class="node">
<title>WindowToolBarComponent</title>
<polygon fill="#8dd3c7" stroke="black" points="200.2,-122 197.2,-126 176.2,-126 173.2,-122 23.8,-122 23.8,-86 200.2,-86 200.2,-122"/>
<text text-anchor="middle" x="112" y="-99.8" font-family="Times,serif" font-size="14.00">WindowToolBarComponent</text>
</g>
<!-- WindowToolBarComponent->RxapWindowSystemModule -->
<g id="edge6" class="edge">
<title>WindowToolBarComponent->RxapWindowSystemModule</title>
<path fill="none" stroke="black" d="M114.62,-122.27C114.62,-140.56 114.62,-166 114.62,-166 114.62,-166 396.58,-166 396.58,-166"/>
<polygon fill="black" stroke="black" points="396.58,-169.5 406.58,-166 396.58,-162.5 396.58,-169.5"/>
</g>
<!-- DefaultWindowComponent -->
<g id="node8" class="node">
<title>DefaultWindowComponent </title>
<polygon fill="#fb8072" stroke="black" points="1173.52,-252 998.48,-252 998.48,-216 1173.52,-216 1173.52,-252"/>
<text text-anchor="middle" x="1086" y="-229.8" font-family="Times,serif" font-size="14.00">DefaultWindowComponent </text>
</g>
<!-- RxapWindowSystemModule->DefaultWindowComponent -->
<g id="edge7" class="edge">
<title>RxapWindowSystemModule->DefaultWindowComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M585.25,-172C730.83,-172 1003.36,-172 1003.36,-172 1003.36,-172 1003.36,-205.73 1003.36,-205.73"/>
<polygon fill="black" stroke="black" points="999.86,-205.73 1003.36,-215.73 1006.86,-205.73 999.86,-205.73"/>
</g>
<!-- WindowContainerComponent -->
<g id="node9" class="node">
<title>WindowContainerComponent </title>
<polygon fill="#fb8072" stroke="black" points="980.25,-252 791.75,-252 791.75,-216 980.25,-216 980.25,-252"/>
<text text-anchor="middle" x="886" y="-229.8" font-family="Times,serif" font-size="14.00">WindowContainerComponent </text>
</g>
<!-- RxapWindowSystemModule->WindowContainerComponent -->
<g id="edge8" class="edge">
<title>RxapWindowSystemModule->WindowContainerComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M585.08,-177C673.83,-177 796.97,-177 796.97,-177 796.97,-177 796.97,-205.96 796.97,-205.96"/>
<polygon fill="black" stroke="black" points="793.47,-205.96 796.97,-215.96 800.47,-205.96 793.47,-205.96"/>
</g>
<!-- WindowContentComponent -->
<g id="node10" class="node">
<title>WindowContentComponent </title>
<polygon fill="#fb8072" stroke="black" points="773.88,-252 596.12,-252 596.12,-216 773.88,-216 773.88,-252"/>
<text text-anchor="middle" x="685" y="-229.8" font-family="Times,serif" font-size="14.00">WindowContentComponent </text>
</g>
<!-- RxapWindowSystemModule->WindowContentComponent -->
<g id="edge9" class="edge">
<title>RxapWindowSystemModule->WindowContentComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M585.35,-182C646.16,-182 715.67,-182 715.67,-182 715.67,-182 715.67,-205.81 715.67,-205.81"/>
<polygon fill="black" stroke="black" points="712.17,-205.81 715.67,-215.81 719.17,-205.81 712.17,-205.81"/>
</g>
<!-- WindowResizerComponent -->
<g id="node11" class="node">
<title>WindowResizerComponent </title>
<polygon fill="#fb8072" stroke="black" points="578.52,-252 403.48,-252 403.48,-216 578.52,-216 578.52,-252"/>
<text text-anchor="middle" x="491" y="-229.8" font-family="Times,serif" font-size="14.00">WindowResizerComponent </text>
</g>
<!-- RxapWindowSystemModule->WindowResizerComponent -->
<g id="edge10" class="edge">
<title>RxapWindowSystemModule->WindowResizerComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M492.62,-187.11C492.62,-187.11 492.62,-205.99 492.62,-205.99"/>
<polygon fill="black" stroke="black" points="489.12,-205.99 492.62,-215.99 496.12,-205.99 489.12,-205.99"/>
</g>
<!-- WindowTaskBarModule -->
<g id="node12" class="node">
<title>WindowTaskBarModule </title>
<polygon fill="#fb8072" stroke="black" points="385.19,-252 226.81,-252 226.81,-216 385.19,-216 385.19,-252"/>
<text text-anchor="middle" x="306" y="-229.8" font-family="Times,serif" font-size="14.00">WindowTaskBarModule </text>
</g>
<!-- RxapWindowSystemModule->WindowTaskBarModule -->
<g id="edge11" class="edge">
<title>RxapWindowSystemModule->WindowTaskBarModule </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M406.57,-180C368.38,-180 332.45,-180 332.45,-180 332.45,-180 332.45,-205.72 332.45,-205.72"/>
<polygon fill="black" stroke="black" points="328.95,-205.72 332.45,-215.72 335.95,-205.72 328.95,-205.72"/>
</g>
<!-- WindowToolBarComponent -->
<g id="node13" class="node">
<title>WindowToolBarComponent </title>
<polygon fill="#fb8072" stroke="black" points="208.7,-252 29.3,-252 29.3,-216 208.7,-216 208.7,-252"/>
<text text-anchor="middle" x="119" y="-229.8" font-family="Times,serif" font-size="14.00">WindowToolBarComponent </text>
</g>
<!-- RxapWindowSystemModule->WindowToolBarComponent -->
<g id="edge12" class="edge">
<title>RxapWindowSystemModule->WindowToolBarComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M406.95,-173C321.22,-173 204.47,-173 204.47,-173 204.47,-173 204.47,-205.7 204.47,-205.7"/>
<polygon fill="black" stroke="black" points="200.97,-205.7 204.47,-215.7 207.97,-205.7 200.97,-205.7"/>
</g>
</g>
</svg>
</div>
<i id="fullscreen" class="icon ion-ios-resize module-graph-fullscreen-btn" aria-hidden="true"></i>
<div class="btn-group size-buttons">
<button id="zoom-in" class="btn btn-default btn-sm">Zoom in</button>
<button id="reset" class="btn btn-default btn-sm">Reset</button>
<button id="zoom-out" class="btn btn-default btn-sm">Zoom out</button>
</div>
</div>
<script src="../js/libs/svg-pan-zoom.min.js"></script>
<script src="../js/svg-pan-zoom.controls.js"></script>
<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-system.module.ts</code>
</p>
<div class="container-fluid module">
<div class="row">
<div class="col-sm-3">
<h3>Imports<a href="https://angular.io/api/core/NgModule#imports" target="_blank" rel="noopener noreferrer"
title="Official documentation about module imports"><span
class="icon ion-ios-information-circle-outline"></a></h3>
<ul class="list-group">
<li class="list-group-item">
<a href="../modules/DefaultWindowComponent.html">DefaultWindowComponent</a>
</li>
<li class="list-group-item">
<a href="../modules/WindowActionBarComponent.html">WindowActionBarComponent</a>
</li>
<li class="list-group-item">
<a href="../modules/WindowContainerComponent.html">WindowContainerComponent</a>
</li>
<li class="list-group-item">
<a href="../modules/WindowContentComponent.html">WindowContentComponent</a>
</li>
<li class="list-group-item">
<a href="../modules/WindowResizerComponent.html">WindowResizerComponent</a>
</li>
<li class="list-group-item">
<a href="../modules/WindowToolBarComponent.html">WindowToolBarComponent</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h3>Exports<a href="https://angular.io/api/core/NgModule#exports" target="_blank" rel="noopener noreferrer"
title="Official documentation about module exports"><span
class="icon ion-ios-information-circle-outline"></a></h3>
<ul class="list-group">
<li class="list-group-item">
<a href="../components/DefaultWindowComponent.html">DefaultWindowComponent</a>
</li>
<li class="list-group-item">
<a href="../components/WindowContainerComponent.html">WindowContainerComponent</a>
</li>
<li class="list-group-item">
<a href="../components/WindowContentComponent.html">WindowContentComponent</a>
</li>
<li class="list-group-item">
<a href="../components/WindowResizerComponent.html">WindowResizerComponent</a>
</li>
<li class="list-group-item">
<a href="../modules/WindowTaskBarModule.html">WindowTaskBarModule</a>
</li>
<li class="list-group-item">
<a href="../components/WindowToolBarComponent.html">WindowToolBarComponent</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-pane fade tab-source-code" id="source">
<pre class="line-numbers compodoc-sourcecode"><code class="language-typescript">import { NgModule } from '@angular/core';
import { DefaultWindowComponent } from './default-window/default-window.component';
import { WindowActionBarComponent } from './window-action-bar/window-action-bar.component';
import { WindowContainerComponent } from './window-container/window-container.component';
import { WindowContentComponent } from './window-content/window-content.component';
import { WindowResizerComponent } from './window-resizer/window-resizer.component';
import { WindowTaskBarModule } from './window-task-bar/window-task-bar.module';
import { WindowToolBarComponent } from './window-tool-bar/window-tool-bar.component';
// TODO : refactor to be used without a central module
@NgModule({
imports: [
WindowContainerComponent,
WindowToolBarComponent,
WindowResizerComponent,
DefaultWindowComponent,
WindowContentComponent,
WindowActionBarComponent,
],
exports: [
WindowContainerComponent,
WindowToolBarComponent,
WindowResizerComponent,
DefaultWindowComponent,
WindowContentComponent,
WindowTaskBarModule,
],
})
export class RxapWindowSystemModule {}
</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 = 'module';
var COMPODOC_CURRENT_PAGE_URL = 'RxapWindowSystemModule.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>