carbon-components-angular
Version:
Next generation components
863 lines (798 loc) • 42.6 kB
HTML
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>carbon-components-angular documentation</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">
<style>
footer.carbon {
position: absolute;
bottom: 0;
width: 100%;
z-index: 9999;
}
#root > div {
/*
* Subtracting the height of the footer to prevent
* overlaying the footer ontop of content
*/
height: calc(100vh - 48px);
}
</style>
</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">carbon-components-angular documentation</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" >NotificationModule</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="2513pt" height="284pt"
viewBox="0.00 0.00 2513.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 2509,-280 2509,4 -4,4"/>
<text text-anchor="start" x="1231.51" y="-42.4" font-family="Times-12" font-weight="bold" font-size="14.00">Legend</text>
<polygon fill="#ffffb3" stroke="transparent" points="1018.5,-10 1018.5,-30 1038.5,-30 1038.5,-10 1018.5,-10"/>
<text text-anchor="start" x="1042.13" y="-15.4" font-family="Times-12" font-size="14.00">  Declarations</text>
<polygon fill="#8dd3c7" stroke="transparent" points="1131.5,-10 1131.5,-30 1151.5,-30 1151.5,-10 1131.5,-10"/>
<text text-anchor="start" x="1155.23" y="-15.4" font-family="Times-12" font-size="14.00">  Module</text>
<polygon fill="#80b1d3" stroke="transparent" points="1217.5,-10 1217.5,-30 1237.5,-30 1237.5,-10 1217.5,-10"/>
<text text-anchor="start" x="1241.28" y="-15.4" font-family="Times-12" font-size="14.00">  Bootstrap</text>
<polygon fill="#fdb462" stroke="transparent" points="1314.5,-10 1314.5,-30 1334.5,-30 1334.5,-10 1314.5,-10"/>
<text text-anchor="start" x="1338.17" y="-15.4" font-family="Times-12" font-size="14.00">  Providers</text>
<polygon fill="#fb8072" stroke="transparent" points="1410.5,-10 1410.5,-30 1430.5,-30 1430.5,-10 1410.5,-10"/>
<text text-anchor="start" x="1434.23" y="-15.4" font-family="Times-12" font-size="14.00">  Exports</text>
<g id="clust1" class="cluster">
<title>cluster_NotificationModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-70 8,-268 2497,-268 2497,-70 8,-70"/>
</g>
<g id="clust2" class="cluster">
<title>cluster_NotificationModule_declarations</title>
<polygon fill="none" stroke="black" points="1049,-78 1049,-130 2489,-130 2489,-78 1049,-78"/>
</g>
<g id="clust16" class="cluster">
<title>cluster_NotificationModule_exports</title>
<polygon fill="none" stroke="black" points="705,-208 705,-260 2054,-260 2054,-208 705,-208"/>
</g>
<g id="clust15" class="cluster">
<title>cluster_NotificationModule_imports</title>
<polygon fill="none" stroke="black" points="465,-78 465,-130 1041,-130 1041,-78 465,-78"/>
</g>
<g id="clust18" class="cluster">
<title>cluster_NotificationModule_providers</title>
<polygon fill="none" stroke="black" points="16,-78 16,-130 457,-130 457,-78 16,-78"/>
</g>
<!-- ActionableButton -->
<g id="node1" class="node">
<title>ActionableButton</title>
<polygon fill="#ffffb3" stroke="black" points="2480.54,-122 2365.46,-122 2365.46,-86 2480.54,-86 2480.54,-122"/>
<text text-anchor="middle" x="2423" y="-99.8" font-family="Times,serif" font-size="14.00">ActionableButton</text>
</g>
<!-- NotificationModule -->
<g id="node13" class="node">
<title>NotificationModule</title>
<polygon fill="#8dd3c7" stroke="black" points="1366.7,-187 1363.7,-191 1342.7,-191 1339.7,-187 1239.3,-187 1239.3,-151 1366.7,-151 1366.7,-187"/>
<text text-anchor="middle" x="1303" y="-164.8" font-family="Times,serif" font-size="14.00">NotificationModule</text>
</g>
<!-- ActionableButton->NotificationModule -->
<g id="edge1" class="edge">
<title>ActionableButton->NotificationModule</title>
<path fill="none" stroke="black" d="M2423,-122.22C2423,-142.37 2423,-172 2423,-172 2423,-172 1376.83,-172 1376.83,-172"/>
<polygon fill="black" stroke="black" points="1376.83,-168.5 1366.83,-172 1376.83,-175.5 1376.83,-168.5"/>
</g>
<!-- ActionableNotification -->
<g id="node2" class="node">
<title>ActionableNotification</title>
<polygon fill="#ffffb3" stroke="black" points="2347.57,-122 2202.43,-122 2202.43,-86 2347.57,-86 2347.57,-122"/>
<text text-anchor="middle" x="2275" y="-99.8" font-family="Times,serif" font-size="14.00">ActionableNotification</text>
</g>
<!-- ActionableNotification->NotificationModule -->
<g id="edge2" class="edge">
<title>ActionableNotification->NotificationModule</title>
<path fill="none" stroke="black" d="M2275,-122.11C2275,-141.34 2275,-169 2275,-169 2275,-169 1376.78,-169 1376.78,-169"/>
<polygon fill="black" stroke="black" points="1376.78,-165.5 1366.78,-169 1376.78,-172.5 1376.78,-165.5"/>
</g>
<!-- ActionableSubtitle -->
<g id="node3" class="node">
<title>ActionableSubtitle</title>
<polygon fill="#ffffb3" stroke="black" points="2184.48,-122 2063.52,-122 2063.52,-86 2184.48,-86 2184.48,-122"/>
<text text-anchor="middle" x="2124" y="-99.8" font-family="Times,serif" font-size="14.00">ActionableSubtitle</text>
</g>
<!-- ActionableSubtitle->NotificationModule -->
<g id="edge3" class="edge">
<title>ActionableSubtitle->NotificationModule</title>
<path fill="none" stroke="black" d="M2124,-122.22C2124,-140.83 2124,-167 2124,-167 2124,-167 1376.74,-167 1376.74,-167"/>
<polygon fill="black" stroke="black" points="1376.74,-163.5 1366.74,-167 1376.74,-170.5 1376.74,-163.5"/>
</g>
<!-- ActionableTitle -->
<g id="node4" class="node">
<title>ActionableTitle</title>
<polygon fill="#ffffb3" stroke="black" points="2045.86,-122 1942.14,-122 1942.14,-86 2045.86,-86 2045.86,-122"/>
<text text-anchor="middle" x="1994" y="-99.8" font-family="Times,serif" font-size="14.00">ActionableTitle</text>
</g>
<!-- ActionableTitle->NotificationModule -->
<g id="edge4" class="edge">
<title>ActionableTitle->NotificationModule</title>
<path fill="none" stroke="black" d="M1993.79,-122C1993.79,-139.68 1993.79,-164 1993.79,-164 1993.79,-164 1376.75,-164 1376.75,-164"/>
<polygon fill="black" stroke="black" points="1376.75,-160.5 1366.75,-164 1376.75,-167.5 1376.75,-160.5"/>
</g>
<!-- BaseNotification -->
<g id="node5" class="node">
<title>BaseNotification</title>
<polygon fill="#ffffb3" stroke="black" points="1924.36,-122 1813.64,-122 1813.64,-86 1924.36,-86 1924.36,-122"/>
<text text-anchor="middle" x="1869" y="-99.8" font-family="Times,serif" font-size="14.00">BaseNotification</text>
</g>
<!-- BaseNotification->NotificationModule -->
<g id="edge5" class="edge">
<title>BaseNotification->NotificationModule</title>
<path fill="none" stroke="black" d="M1860.93,-122.03C1860.93,-139.06 1860.93,-162 1860.93,-162 1860.93,-162 1376.73,-162 1376.73,-162"/>
<polygon fill="black" stroke="black" points="1376.73,-158.5 1366.73,-162 1376.73,-165.5 1376.73,-158.5"/>
</g>
<!-- Notification -->
<g id="node6" class="node">
<title>Notification</title>
<polygon fill="#ffffb3" stroke="black" points="1795.65,-122 1712.35,-122 1712.35,-86 1795.65,-86 1795.65,-122"/>
<text text-anchor="middle" x="1754" y="-99.8" font-family="Times,serif" font-size="14.00">Notification</text>
</g>
<!-- Notification->NotificationModule -->
<g id="edge6" class="edge">
<title>Notification->NotificationModule</title>
<path fill="none" stroke="black" d="M1726.71,-122.01C1726.71,-138.05 1726.71,-159 1726.71,-159 1726.71,-159 1376.89,-159 1376.89,-159"/>
<polygon fill="black" stroke="black" points="1376.89,-155.5 1366.89,-159 1376.89,-162.5 1376.89,-155.5"/>
</g>
<!-- NotificationSubtitle -->
<g id="node7" class="node">
<title>NotificationSubtitle</title>
<polygon fill="#ffffb3" stroke="black" points="1694.71,-122 1567.29,-122 1567.29,-86 1694.71,-86 1694.71,-122"/>
<text text-anchor="middle" x="1631" y="-99.8" font-family="Times,serif" font-size="14.00">NotificationSubtitle</text>
</g>
<!-- NotificationSubtitle->NotificationModule -->
<g id="edge7" class="edge">
<title>NotificationSubtitle->NotificationModule</title>
<path fill="none" stroke="black" d="M1583.04,-122.24C1583.04,-137.57 1583.04,-157 1583.04,-157 1583.04,-157 1376.9,-157 1376.9,-157"/>
<polygon fill="black" stroke="black" points="1376.9,-153.5 1366.9,-157 1376.9,-160.5 1376.9,-153.5"/>
</g>
<!-- NotificationTitle -->
<g id="node8" class="node">
<title>NotificationTitle</title>
<polygon fill="#ffffb3" stroke="black" points="1549.09,-122 1438.91,-122 1438.91,-86 1549.09,-86 1549.09,-122"/>
<text text-anchor="middle" x="1494" y="-99.8" font-family="Times,serif" font-size="14.00">NotificationTitle</text>
</g>
<!-- NotificationTitle->NotificationModule -->
<g id="edge8" class="edge">
<title>NotificationTitle->NotificationModule</title>
<path fill="none" stroke="black" d="M1456.27,-122.05C1456.27,-136.37 1456.27,-154 1456.27,-154 1456.27,-154 1376.67,-154 1376.67,-154"/>
<polygon fill="black" stroke="black" points="1376.67,-150.5 1366.67,-154 1376.67,-157.5 1376.67,-150.5"/>
</g>
<!-- Toast -->
<g id="node9" class="node">
<title>Toast</title>
<polygon fill="#ffffb3" stroke="black" points="1421,-122 1367,-122 1367,-86 1421,-86 1421,-122"/>
<text text-anchor="middle" x="1394" y="-99.8" font-family="Times,serif" font-size="14.00">Toast</text>
</g>
<!-- Toast->NotificationModule -->
<g id="edge9" class="edge">
<title>Toast->NotificationModule</title>
<path fill="none" stroke="black" d="M1366.83,-104C1361.57,-104 1357.66,-104 1357.66,-104 1357.66,-104 1357.66,-140.89 1357.66,-140.89"/>
<polygon fill="black" stroke="black" points="1354.16,-140.89 1357.66,-150.89 1361.16,-140.89 1354.16,-140.89"/>
</g>
<!-- ToastCaption -->
<g id="node10" class="node">
<title>ToastCaption</title>
<polygon fill="#ffffb3" stroke="black" points="1348.94,-122 1257.06,-122 1257.06,-86 1348.94,-86 1348.94,-122"/>
<text text-anchor="middle" x="1303" y="-99.8" font-family="Times,serif" font-size="14.00">ToastCaption</text>
</g>
<!-- ToastCaption->NotificationModule -->
<g id="edge10" class="edge">
<title>ToastCaption->NotificationModule</title>
<path fill="none" stroke="black" d="M1303,-122.11C1303,-122.11 1303,-140.99 1303,-140.99"/>
<polygon fill="black" stroke="black" points="1299.5,-140.99 1303,-150.99 1306.5,-140.99 1299.5,-140.99"/>
</g>
<!-- ToastSubtitle -->
<g id="node11" class="node">
<title>ToastSubtitle</title>
<polygon fill="#ffffb3" stroke="black" points="1239.16,-122 1148.84,-122 1148.84,-86 1239.16,-86 1239.16,-122"/>
<text text-anchor="middle" x="1194" y="-99.8" font-family="Times,serif" font-size="14.00">ToastSubtitle</text>
</g>
<!-- ToastSubtitle->NotificationModule -->
<g id="edge11" class="edge">
<title>ToastSubtitle->NotificationModule</title>
<path fill="none" stroke="black" d="M1239.37,-104C1244.73,-104 1248.34,-104 1248.34,-104 1248.34,-104 1248.34,-140.89 1248.34,-140.89"/>
<polygon fill="black" stroke="black" points="1244.84,-140.89 1248.34,-150.89 1251.84,-140.89 1244.84,-140.89"/>
</g>
<!-- ToastTitle -->
<g id="node12" class="node">
<title>ToastTitle</title>
<polygon fill="#ffffb3" stroke="black" points="1130.54,-122 1057.46,-122 1057.46,-86 1130.54,-86 1130.54,-122"/>
<text text-anchor="middle" x="1094" y="-99.8" font-family="Times,serif" font-size="14.00">ToastTitle</text>
</g>
<!-- ToastTitle->NotificationModule -->
<g id="edge12" class="edge">
<title>ToastTitle->NotificationModule</title>
<path fill="none" stroke="black" d="M1118.49,-122.05C1118.49,-136.37 1118.49,-154 1118.49,-154 1118.49,-154 1229.24,-154 1229.24,-154"/>
<polygon fill="black" stroke="black" points="1229.24,-157.5 1239.24,-154 1229.24,-150.5 1229.24,-157.5"/>
</g>
<!-- ActionableButton -->
<g id="node19" class="node">
<title>ActionableButton </title>
<polygon fill="#fb8072" stroke="black" points="2045.54,-252 1926.46,-252 1926.46,-216 2045.54,-216 2045.54,-252"/>
<text text-anchor="middle" x="1986" y="-229.8" font-family="Times,serif" font-size="14.00">ActionableButton </text>
</g>
<!-- NotificationModule->ActionableButton -->
<g id="edge18" class="edge">
<title>NotificationModule->ActionableButton </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1366.71,-175C1527,-175 1934.27,-175 1934.27,-175 1934.27,-175 1934.27,-205.98 1934.27,-205.98"/>
<polygon fill="black" stroke="black" points="1930.77,-205.98 1934.27,-215.98 1937.77,-205.98 1930.77,-205.98"/>
</g>
<!-- ActionableNotification -->
<g id="node20" class="node">
<title>ActionableNotification </title>
<polygon fill="#fb8072" stroke="black" points="1908.07,-252 1759.93,-252 1759.93,-216 1908.07,-216 1908.07,-252"/>
<text text-anchor="middle" x="1834" y="-229.8" font-family="Times,serif" font-size="14.00">ActionableNotification </text>
</g>
<!-- NotificationModule->ActionableNotification -->
<g id="edge19" class="edge">
<title>NotificationModule->ActionableNotification </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1367.03,-177C1496.62,-177 1777.77,-177 1777.77,-177 1777.77,-177 1777.77,-205.96 1777.77,-205.96"/>
<polygon fill="black" stroke="black" points="1774.27,-205.96 1777.77,-215.96 1781.27,-205.96 1774.27,-205.96"/>
</g>
<!-- ActionableSubtitle -->
<g id="node21" class="node">
<title>ActionableSubtitle </title>
<polygon fill="#fb8072" stroke="black" points="1741.48,-252 1616.52,-252 1616.52,-216 1741.48,-216 1741.48,-252"/>
<text text-anchor="middle" x="1679" y="-229.8" font-family="Times,serif" font-size="14.00">ActionableSubtitle </text>
</g>
<!-- NotificationModule->ActionableSubtitle -->
<g id="edge20" class="edge">
<title>NotificationModule->ActionableSubtitle </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1366.87,-180C1468.5,-180 1655.68,-180 1655.68,-180 1655.68,-180 1655.68,-205.72 1655.68,-205.72"/>
<polygon fill="black" stroke="black" points="1652.18,-205.72 1655.68,-215.72 1659.18,-205.72 1652.18,-205.72"/>
</g>
<!-- ActionableTitle -->
<g id="node22" class="node">
<title>ActionableTitle </title>
<polygon fill="#fb8072" stroke="black" points="1598.86,-252 1491.14,-252 1491.14,-216 1598.86,-216 1598.86,-252"/>
<text text-anchor="middle" x="1545" y="-229.8" font-family="Times,serif" font-size="14.00">ActionableTitle </text>
</g>
<!-- NotificationModule->ActionableTitle -->
<g id="edge21" class="edge">
<title>NotificationModule->ActionableTitle </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1366.69,-182C1430.78,-182 1520.18,-182 1520.18,-182 1520.18,-182 1520.18,-205.81 1520.18,-205.81"/>
<polygon fill="black" stroke="black" points="1516.68,-205.81 1520.18,-215.81 1523.68,-205.81 1516.68,-205.81"/>
</g>
<!-- Notification -->
<g id="node23" class="node">
<title>Notification </title>
<polygon fill="#fb8072" stroke="black" points="1473.65,-252 1386.35,-252 1386.35,-216 1473.65,-216 1473.65,-252"/>
<text text-anchor="middle" x="1430" y="-229.8" font-family="Times,serif" font-size="14.00">Notification </text>
</g>
<!-- NotificationModule->Notification -->
<g id="edge22" class="edge">
<title>NotificationModule->Notification </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1366.78,-185C1386.77,-185 1403.71,-185 1403.71,-185 1403.71,-185 1403.71,-205.75 1403.71,-205.75"/>
<polygon fill="black" stroke="black" points="1400.21,-205.75 1403.71,-215.75 1407.21,-205.75 1400.21,-205.75"/>
</g>
<!-- NotificationSubtitle -->
<g id="node24" class="node">
<title>NotificationSubtitle </title>
<polygon fill="#fb8072" stroke="black" points="1368.21,-252 1237.79,-252 1237.79,-216 1368.21,-216 1368.21,-252"/>
<text text-anchor="middle" x="1303" y="-229.8" font-family="Times,serif" font-size="14.00">NotificationSubtitle </text>
</g>
<!-- NotificationModule->NotificationSubtitle -->
<g id="edge23" class="edge">
<title>NotificationModule->NotificationSubtitle </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1303,-187.11C1303,-187.11 1303,-205.99 1303,-205.99"/>
<polygon fill="black" stroke="black" points="1299.5,-205.99 1303,-215.99 1306.5,-205.99 1299.5,-205.99"/>
</g>
<!-- NotificationTitle -->
<g id="node25" class="node">
<title>NotificationTitle </title>
<polygon fill="#fb8072" stroke="black" points="1219.59,-252 1106.41,-252 1106.41,-216 1219.59,-216 1219.59,-252"/>
<text text-anchor="middle" x="1163" y="-229.8" font-family="Times,serif" font-size="14.00">NotificationTitle </text>
</g>
<!-- NotificationModule->NotificationTitle -->
<g id="edge24" class="edge">
<title>NotificationModule->NotificationTitle </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1239.1,-185C1210.98,-185 1184.23,-185 1184.23,-185 1184.23,-185 1184.23,-205.75 1184.23,-205.75"/>
<polygon fill="black" stroke="black" points="1180.73,-205.75 1184.23,-215.75 1187.73,-205.75 1180.73,-205.75"/>
</g>
<!-- Toast -->
<g id="node26" class="node">
<title>Toast </title>
<polygon fill="#fb8072" stroke="black" points="1088,-252 1034,-252 1034,-216 1088,-216 1088,-252"/>
<text text-anchor="middle" x="1061" y="-229.8" font-family="Times,serif" font-size="14.00">Toast </text>
</g>
<!-- NotificationModule->Toast -->
<g id="edge25" class="edge">
<title>NotificationModule->Toast </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1239.13,-182C1170.95,-182 1072.61,-182 1072.61,-182 1072.61,-182 1072.61,-205.81 1072.61,-205.81"/>
<polygon fill="black" stroke="black" points="1069.11,-205.81 1072.61,-215.81 1076.11,-205.81 1069.11,-205.81"/>
</g>
<!-- ToastCaption -->
<g id="node27" class="node">
<title>ToastCaption </title>
<polygon fill="#fb8072" stroke="black" points="1016.43,-252 921.57,-252 921.57,-216 1016.43,-216 1016.43,-252"/>
<text text-anchor="middle" x="969" y="-229.8" font-family="Times,serif" font-size="14.00">ToastCaption </text>
</g>
<!-- NotificationModule->ToastCaption -->
<g id="edge26" class="edge">
<title>NotificationModule->ToastCaption </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1239.14,-180C1143.92,-180 975.82,-180 975.82,-180 975.82,-180 975.82,-205.72 975.82,-205.72"/>
<polygon fill="black" stroke="black" points="972.32,-205.72 975.82,-215.72 979.32,-205.72 972.32,-205.72"/>
</g>
<!-- ToastSubtitle -->
<g id="node28" class="node">
<title>ToastSubtitle </title>
<polygon fill="#fb8072" stroke="black" points="903.16,-252 808.84,-252 808.84,-216 903.16,-216 903.16,-252"/>
<text text-anchor="middle" x="856" y="-229.8" font-family="Times,serif" font-size="14.00">ToastSubtitle </text>
</g>
<!-- NotificationModule->ToastSubtitle -->
<g id="edge27" class="edge">
<title>NotificationModule->ToastSubtitle </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1238.96,-177C1115.36,-177 856,-177 856,-177 856,-177 856,-205.96 856,-205.96"/>
<polygon fill="black" stroke="black" points="852.5,-205.96 856,-215.96 859.5,-205.96 852.5,-205.96"/>
</g>
<!-- ToastTitle -->
<g id="node29" class="node">
<title>ToastTitle </title>
<polygon fill="#fb8072" stroke="black" points="790.54,-252 713.46,-252 713.46,-216 790.54,-216 790.54,-252"/>
<text text-anchor="middle" x="752" y="-229.8" font-family="Times,serif" font-size="14.00">ToastTitle </text>
</g>
<!-- NotificationModule->ToastTitle -->
<g id="edge28" class="edge">
<title>NotificationModule->ToastTitle </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M1239.15,-175C1100.97,-175 786.52,-175 786.52,-175 786.52,-175 786.52,-205.98 786.52,-205.98"/>
<polygon fill="black" stroke="black" points="783.02,-205.98 786.52,-215.98 790.02,-205.98 783.02,-205.98"/>
</g>
<!-- ButtonModule -->
<g id="node14" class="node">
<title>ButtonModule</title>
<polygon fill="#8dd3c7" stroke="black" points="1032.67,-122 1029.67,-126 1008.67,-126 1005.67,-122 935.33,-122 935.33,-86 1032.67,-86 1032.67,-122"/>
<text text-anchor="middle" x="984" y="-99.8" font-family="Times,serif" font-size="14.00">ButtonModule</text>
</g>
<!-- ButtonModule->NotificationModule -->
<g id="edge13" class="edge">
<title>ButtonModule->NotificationModule</title>
<path fill="none" stroke="black" d="M1024.65,-122.24C1024.65,-137.57 1024.65,-157 1024.65,-157 1024.65,-157 1229.14,-157 1229.14,-157"/>
<polygon fill="black" stroke="black" points="1229.14,-160.5 1239.14,-157 1229.14,-153.5 1229.14,-160.5"/>
</g>
<!-- ExperimentalModule -->
<g id="node15" class="node">
<title>ExperimentalModule</title>
<polygon fill="#8dd3c7" stroke="black" points="917.47,-122 914.47,-126 893.47,-126 890.47,-122 782.53,-122 782.53,-86 917.47,-86 917.47,-122"/>
<text text-anchor="middle" x="850" y="-99.8" font-family="Times,serif" font-size="14.00">ExperimentalModule</text>
</g>
<!-- ExperimentalModule->NotificationModule -->
<g id="edge14" class="edge">
<title>ExperimentalModule->NotificationModule</title>
<path fill="none" stroke="black" d="M910.28,-122.01C910.28,-138.05 910.28,-159 910.28,-159 910.28,-159 1229.03,-159 1229.03,-159"/>
<polygon fill="black" stroke="black" points="1229.03,-162.5 1239.03,-159 1229.03,-155.5 1229.03,-162.5"/>
</g>
<!-- I18nModule -->
<g id="node16" class="node">
<title>I18nModule</title>
<polygon fill="#8dd3c7" stroke="black" points="764.71,-122 761.71,-126 740.71,-126 737.71,-122 679.29,-122 679.29,-86 764.71,-86 764.71,-122"/>
<text text-anchor="middle" x="722" y="-99.8" font-family="Times,serif" font-size="14.00">I18nModule</text>
</g>
<!-- I18nModule->NotificationModule -->
<g id="edge15" class="edge">
<title>I18nModule->NotificationModule</title>
<path fill="none" stroke="black" d="M739.04,-122.03C739.04,-139.06 739.04,-162 739.04,-162 739.04,-162 1229.13,-162 1229.13,-162"/>
<polygon fill="black" stroke="black" points="1229.13,-165.5 1239.13,-162 1229.13,-158.5 1229.13,-165.5"/>
</g>
<!-- IconModule -->
<g id="node17" class="node">
<title>IconModule</title>
<polygon fill="#8dd3c7" stroke="black" points="661.43,-122 658.43,-126 637.43,-126 634.43,-122 576.57,-122 576.57,-86 661.43,-86 661.43,-122"/>
<text text-anchor="middle" x="619" y="-99.8" font-family="Times,serif" font-size="14.00">IconModule</text>
</g>
<!-- IconModule->NotificationModule -->
<g id="edge16" class="edge">
<title>IconModule->NotificationModule</title>
<path fill="none" stroke="black" d="M619,-122C619,-139.68 619,-164 619,-164 619,-164 1229.27,-164 1229.27,-164"/>
<polygon fill="black" stroke="black" points="1229.27,-167.5 1239.27,-164 1229.27,-160.5 1229.27,-167.5"/>
</g>
<!-- LinkModule -->
<g id="node18" class="node">
<title>LinkModule</title>
<polygon fill="#8dd3c7" stroke="black" points="558.99,-122 555.99,-126 534.99,-126 531.99,-122 473.01,-122 473.01,-86 558.99,-86 558.99,-122"/>
<text text-anchor="middle" x="516" y="-99.8" font-family="Times,serif" font-size="14.00">LinkModule</text>
</g>
<!-- LinkModule->NotificationModule -->
<g id="edge17" class="edge">
<title>LinkModule->NotificationModule</title>
<path fill="none" stroke="black" d="M516,-122.22C516,-140.83 516,-167 516,-167 516,-167 1229.26,-167 1229.26,-167"/>
<polygon fill="black" stroke="black" points="1229.26,-170.5 1239.26,-167 1229.26,-163.5 1229.26,-170.5"/>
</g>
<!-- NotificationDisplayService -->
<g id="node30" class="node">
<title>NotificationDisplayService</title>
<ellipse fill="#fdb462" stroke="black" cx="332" cy="-104" rx="116.89" ry="18"/>
<text text-anchor="middle" x="332" y="-99.8" font-family="Times,serif" font-size="14.00">NotificationDisplayService</text>
</g>
<!-- NotificationDisplayService->NotificationModule -->
<g id="edge29" class="edge">
<title>NotificationDisplayService->NotificationModule</title>
<path fill="none" stroke="black" d="M332,-122.11C332,-141.34 332,-169 332,-169 332,-169 1229.29,-169 1229.29,-169"/>
<polygon fill="black" stroke="black" points="1229.29,-172.5 1239.29,-169 1229.29,-165.5 1229.29,-172.5"/>
</g>
<!-- NotificationService -->
<g id="node31" class="node">
<title>NotificationService</title>
<ellipse fill="#fdb462" stroke="black" cx="111" cy="-104" rx="86.81" ry="18"/>
<text text-anchor="middle" x="111" y="-99.8" font-family="Times,serif" font-size="14.00">NotificationService</text>
</g>
<!-- NotificationService->NotificationModule -->
<g id="edge30" class="edge">
<title>NotificationService->NotificationModule</title>
<path fill="none" stroke="black" d="M111,-122.22C111,-142.37 111,-172 111,-172 111,-172 1229.33,-172 1229.33,-172"/>
<polygon fill="black" stroke="black" points="1229.33,-175.5 1239.33,-172 1229.33,-168.5 1229.33,-175.5"/>
</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/notification/notification.module.ts</code>
</p>
<div class="container-fluid module">
<div class="row">
<div class="col-sm-3">
<h3>Declarations<a href="https://angular.io/api/core/NgModule#declarations" target="_blank" rel="noopener noreferrer"
title="Official documentation about module declarations"><span class="icon ion-ios-information-circle-outline"></span></a></h3>
<ul class="list-group">
<li class="list-group-item">
<a href="../directives/ActionableButton.html">ActionableButton</a>
</li>
<li class="list-group-item">
<a href="../components/ActionableNotification.html">ActionableNotification</a>
</li>
<li class="list-group-item">
<a href="../directives/ActionableSubtitle.html">ActionableSubtitle</a>
</li>
<li class="list-group-item">
<a href="../directives/ActionableTitle.html">ActionableTitle</a>
</li>
<li class="list-group-item">
<a href="../components/BaseNotification.html">BaseNotification</a>
</li>
<li class="list-group-item">
<a href="../components/Notification.html">Notification</a>
</li>
<li class="list-group-item">
<a href="../directives/NotificationSubtitle.html">NotificationSubtitle</a>
</li>
<li class="list-group-item">
<a href="../directives/NotificationTitle.html">NotificationTitle</a>
</li>
<li class="list-group-item">
<a href="../components/Toast.html">Toast</a>
</li>
<li class="list-group-item">
<a href="../directives/ToastCaption.html">ToastCaption</a>
</li>
<li class="list-group-item">
<a href="../directives/ToastSubtitle.html">ToastSubtitle</a>
</li>
<li class="list-group-item">
<a href="../directives/ToastTitle.html">ToastTitle</a>
</li>
</ul>
</div>
<div class="col-sm-3">
<h3>Providers<a href="https://angular.io/api/core/NgModule#providers" target="_blank" rel="noopener noreferrer"
title="Official documentation about module providers"><span class="icon ion-ios-information-circle-outline"></a></h3>
<ul class="list-group">
<li class="list-group-item">
<a href="../injectables/NotificationDisplayService.html">NotificationDisplayService</a>
</li>
<li class="list-group-item">
<a href="../injectables/NotificationService.html">NotificationService</a>
</li>
</ul>
</div>
<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/ButtonModule.html">ButtonModule</a>
</li>
<li class="list-group-item">
<a href="../modules/ExperimentalModule.html">ExperimentalModule</a>
</li>
<li class="list-group-item">
<a href="../modules/I18nModule.html">I18nModule</a>
</li>
<li class="list-group-item">
<a href="../modules/IconModule.html">IconModule</a>
</li>
<li class="list-group-item">
<a href="../modules/LinkModule.html">LinkModule</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="../directives/ActionableButton.html">ActionableButton</a>
</li>
<li class="list-group-item">
<a href="../components/ActionableNotification.html">ActionableNotification</a>
</li>
<li class="list-group-item">
<a href="../directives/ActionableSubtitle.html">ActionableSubtitle</a>
</li>
<li class="list-group-item">
<a href="../directives/ActionableTitle.html">ActionableTitle</a>
</li>
<li class="list-group-item">
<a href="../components/Notification.html">Notification</a>
</li>
<li class="list-group-item">
<a href="../directives/NotificationSubtitle.html">NotificationSubtitle</a>
</li>
<li class="list-group-item">
<a href="../directives/NotificationTitle.html">NotificationTitle</a>
</li>
<li class="list-group-item">
<a href="../components/Toast.html">Toast</a>
</li>
<li class="list-group-item">
<a href="../directives/ToastCaption.html">ToastCaption</a>
</li>
<li class="list-group-item">
<a href="../directives/ToastSubtitle.html">ToastSubtitle</a>
</li>
<li class="list-group-item">
<a href="../directives/ToastTitle.html">ToastTitle</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 { ButtonModule } from "carbon-components-angular/button";
import { CommonModule } from "@angular/common";
import { ActionableNotification } from "./actionable-notification.component";
import { ActionableButton } from "./actionable-button.directive";
import { ActionableTitle } from "./actionable-title.directive";
import { ActionableSubtitle } from "./actionable-subtitle.directive";
import { BaseNotification } from "./base-notification.component";
import { Toast } from "./toast.component";
import { ToastTitle } from "./toast-title.directive";
import { ToastSubtitle } from "./toast-subtitle.directive";
import { ToastCaption } from "./toast-caption.directive";
import { NotificationTitle } from "./notification-title.directive";
import { NotificationSubtitle } from "./notification-subtitle.directive";
import { Notification } from "./notification.component";
import { NotificationService } from "./notification.service";
import { NotificationDisplayService } from "./notification-display.service";
import { I18nModule } from "carbon-components-angular/i18n";
import { ExperimentalModule } from "carbon-components-angular/experimental";
import { LinkModule } from "carbon-components-angular/link";
import { IconModule } from "carbon-components-angular/icon";
@NgModule({
declarations: [
ActionableButton,
ActionableNotification,
ActionableTitle,
ActionableSubtitle,
BaseNotification,
Notification,
Toast,
ToastTitle,
ToastSubtitle,
ToastCaption,
NotificationTitle,
NotificationSubtitle
],
exports: [
Notification,
ActionableButton,
ActionableNotification,
ActionableTitle,
ActionableSubtitle,
Toast,
ToastTitle,
ToastSubtitle,
ToastCaption,
NotificationTitle,
NotificationSubtitle
],
imports: [
ButtonModule,
CommonModule,
I18nModule,
ExperimentalModule,
LinkModule,
IconModule
],
providers: [NotificationService, NotificationDisplayService]
})
export class NotificationModule {}
</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 = 'NotificationModule.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>
<footer class="carbon">
<dds-footer-container key="footer" disable-locale-button="true" size="micro" />
</footer>
<script
key="8"
type="module"
src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js">
</script>
<!-- Storybook override -->
<script>
document.title = "Carbon Components Angular";
</script>
<script
src="//1.www.s81c.com/common/stats/ibm-common.js"
type="text/javascript"
async="async">
</script>
</body>
</html>