jira-web-components

<!DOCTYPE html> <html lang="en" dir="ltr" class="no-js"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script> window.frctl = { env: 'static' }; </script> <script>var cl = document.querySelector('html').classList; cl.remove('no-js'); cl.add('has-js');</script> <link rel="shortcut icon" href="../../themes/mandelbrot/favicon.ico" type="image/ico"> <link rel="stylesheet" href="../../themes/mandelbrot/css/grey.css?cachebust=1.2.1" type="text/css"> <title>Status | JiRa web components</title> </head> <body> <div class="Frame" id="frame"> <div class="Frame-header"> <div class="Header"> <button class="Header-button Header-navToggle" data-action="toggle-sidebar"> <svg class="Header-navToggleIcon Header-navToggleIcon--open" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"/> </svg> <svg class="Header-navToggleIcon Header-navToggleIcon--closed" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/> </svg> </button> <a href="../../index.html" class="Header-title" data-pjax>JiRa web components</a> </div> </div> <div class="Frame-body" data-role="body"> <div class="Frame-panel Frame-panel--main" data-role="main"> <div class="Frame-inner" id="pjax-container"> <div class="Pen" data-behaviour="pen" id="pen-06e191ec68d24cf5404632b34e2e1ca1"> <div class="Pen-panel Pen-header"> <h1 class="Pen-title"> <a class="Pen-previewLink" href="../preview/status.html" title="Component preview"> Status <svg fill="#000000" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/> </svg> </a> </h1> <div class="Status Status--tag"> <label class="Status-label" style="background-color: #29CC29; border-color: #29CC29;">Ready</label> </div> </div> <div class="Pen-panel Pen-preview Preview" data-behaviour="preview" id="preview-06e191ec68d24cf5404632b34e2e1ca1"> <div class="Preview-wrapper" data-role="resizer"> <div class="Preview-resizer"> <iframe class="Preview-iframe" data-role="window" src="../preview/status.html" sandbox="allow-same-origin allow-scripts allow-forms allow-modals" style="" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" scrolling="yes"> </iframe> </div> <div class="Preview-handle" data-role="resize-handle"></div> <div class="Preview-overlay"></div> </div> </div> <div class="Pen-handle Pen-handle--browser" data-role="resize-handle"></div> <div class="Pen-panel Pen-info" data-role="info"> <div class="Browser" data-behaviour="browser" id="browser-06e191ec68d24cf5404632b34e2e1ca1"> <div class="Browser-controls"> <ul class="Browser-tabs"> <li class="Browser-tab Browser-tab--html is-active " data-role="tab"> <a href="#browser-06e191ec68d24cf5404632b34e2e1ca1-panel-html">HTML</a> </li> <li class="Browser-tab Browser-tab--view" data-role="tab"> <a href="#browser-06e191ec68d24cf5404632b34e2e1ca1-panel-view">View</a> </li> <li class="Browser-tab Browser-tab--context" data-role="tab"> <a href="#browser-06e191ec68d24cf5404632b34e2e1ca1-panel-context">Context</a> </li> <li class="Browser-tab Browser-tab--info" data-role="tab"> <a href="#browser-06e191ec68d24cf5404632b34e2e1ca1-panel-info">Info</a> </li> <li class="Browser-tab Browser-tab--notes" data-role="tab"> <a href="#browser-06e191ec68d24cf5404632b34e2e1ca1-panel-notes">Notes</a> </li> </ul> </div> <div class="Browser-panel Browser-code is-active" data-role="tab-panel" id="browser-06e191ec68d24cf5404632b34e2e1ca1-panel-html"> <code class="Code Code--lang-html"> <pre><span class="hljs-tag"><<span class="hljs-name">jira-issue</span> <span class="hljs-attr">key</span>=<span class="hljs-string">"REISS-30"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"jira-issue"</span>></span><span class="hljs-tag"></<span class="hljs-name">jira-issue</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"> addEventListener(<span class="hljs-string">'DOMContentLoaded'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ issue = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'jira-issue'</span>); issue.$on(<span class="hljs-string">'jira-issue-loaded'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ <span class="hljs-built_in">console</span>.log(issue.getIssue(), e.detail); }); issue.$on(<span class="hljs-string">'jira-issue-fetching-changed'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ <span class="hljs-built_in">console</span>.log(e.detail); }); }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></pre> </code> </div> <div class="Browser-panel Browser-code" data-role="tab-panel" id="browser-06e191ec68d24cf5404632b34e2e1ca1-panel-view"> <code class="Code Code--lang-text"> <pre><span class="xml"><span class="hljs-tag"><<span class="hljs-name">jira-issue</span> <span class="hljs-attr">key</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ key }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"jira-issue"</span>></span><span class="hljs-tag"></<span class="hljs-name">jira-issue</span>></span> <span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"> addEventListener(<span class="hljs-string">'DOMContentLoaded'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{ issue = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'jira-issue'</span>); issue.$on(<span class="hljs-string">'jira-issue-loaded'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ <span class="hljs-built_in">console</span>.log(issue.getIssue(), e.detail); }); issue.$on(<span class="hljs-string">'jira-issue-fetching-changed'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) </span>{ <span class="hljs-built_in">console</span>.log(e.detail); }); }); </span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></span></pre> </code> </div> <div class="Browser-panel Browser-code" data-role="tab-panel" id="browser-06e191ec68d24cf5404632b34e2e1ca1-panel-context"> <code class="Code Code--lang-json"> <pre>{ <span class="hljs-attr">"key"</span>: <span class="hljs-string">"REISS-30"</span> }</pre> </code> </div> <div class="Browser-panel" data-role="tab-panel" id="browser-06e191ec68d24cf5404632b34e2e1ca1-panel-info"> <ul class="Meta"> <li class="Meta-item"> <strong class="Meta-key">Handle:</strong> <span class="Meta-value">@status</span> </li> <li class="Meta-item"> <strong class="Meta-key">Preview:</strong> <span class="Meta-value"> <ul> <li><a data-no-pjax href="../preview/status.html"><span>With layout</span> <svg fill="#000000" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/> </svg> </a></li> <li><a data-no-pjax href="../render/status.html"><span>Component only</span> <svg fill="#000000" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg"> <path d="M0 0h24v24H0z" fill="none"/> <path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/> </svg> </a></li> </ul> </span> </li> <li class="Meta-item"> <strong class="Meta-key">Filesystem Path:</strong> <span class="Meta-value">src/status/status.preview.nunj</span> </li> </ul> </div> <div class="Browser-panel Browser-notes" data-role="tab-panel" id="browser-06e191ec68d24cf5404632b34e2e1ca1-panel-notes"> <div class="Prose Prose--condensed"> <p class="Browser-isEmptyNote">There are no notes for this item.</p> </div> </div> </div> </div> </div> </div> </div> <div class="Frame-handle" data-role="frame-resize-handle"></div> <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar"> <nav class="Navigation"> <div class="Navigation-group"> <div class="Tree" data-behaviour="tree" id="tree-components"> <h3 class="Tree-title">components</h3> <ul class="Tree-items Tree-depth-1"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="all-components.html" data-pjax> <span>All Components</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-auth"> <h4 class="Tree-collectionLabel" data-role="toggle"> <span>Auth</span> </h4> <ul class="Tree-collectionItems" data-role="items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="auth.html" data-pjax> <span>Auth</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="auth-form.html" data-pjax> <span>Auth Form</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="auth-user-card.html" data-pjax> <span>Auth User Card</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-board"> <h4 class="Tree-collectionLabel" data-role="toggle"> <span>Board</span> </h4> <ul class="Tree-collectionItems" data-role="items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="board-panel.html" data-pjax> <span>Board Panel</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="board-select.html" data-pjax> <span>Board Select</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="boards.html" data-pjax> <span>Boards</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-global"> <h4 class="Tree-collectionLabel" data-role="toggle"> <span>Global</span> </h4> <ul class="Tree-collectionItems" data-role="items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="config.html" data-pjax> <span>Config</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-issue"> <h4 class="Tree-collectionLabel" data-role="toggle"> <span>Issue</span> </h4> <ul class="Tree-collectionItems" data-role="items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="issue.html" data-pjax> <span>Issue</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="issue-tag.html" data-pjax> <span>Issue Tag</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-project"> <h4 class="Tree-collectionLabel" data-role="toggle"> <span>Project</span> </h4> <ul class="Tree-collectionItems" data-role="items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="project-card.html" data-pjax> <span>Project Card</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="project-select.html" data-pjax> <span>Project Select</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="projects.html" data-pjax> <span>Projects</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-status"> <h4 class="Tree-collectionLabel" data-role="toggle"> <span>Status</span> </h4> <ul class="Tree-collectionItems" data-role="items"> <li class="Tree-item Tree-entity is-current" data-state="current" data-role="item"> <a class="Tree-entityLink" href="" data-pjax> <span>Status</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="status-tag.html" data-pjax> <span>Status Tag</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-components-collection-text"> <h4 class="Tree-collectionLabel" data-role="toggle"> <span>Text</span> </h4> <ul class="Tree-collectionItems" data-role="items"> <li class="Tree-item Tree-entity" data-role="item"> <a class="Tree-entityLink" href="text-wrapper.html" data-pjax> <span>Text Wrapper</span> <div class="Status Status--unlabelled"> <div class="Status-dots"> <span class="Status-dot" style="border-color: #29CC29;" title="Ready"></span> </div> </div> </a> </li> </ul> </li> </ul> </div> </div> <div class="Navigation-group"> <div class="Tree" data-behaviour="tree" id="tree-docs"> <h3 class="Tree-title">documentation</h3> <ul class="Tree-items Tree-depth-1"> </ul> </div> </div> </nav> </div> </div> </div> <script src="../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.2.1"></script> </body> </html>