| /** |
| * @module modules/tricon2-sk |
| * @description <h2><code>tricon2-sk</code></h2> |
| * |
| * The triage state icons. |
| * |
| * @attr {string} value - A string representing the triage status, one of |
| * "untriaged", "positive", or "negative". |
| * |
| */ |
| import { define } from 'elements-sk/define'; |
| import { html } from 'lit-html'; |
| import { ElementSk } from '../../../infra-sk/modules/ElementSk'; |
| import 'elements-sk/icon/check-circle-icon-sk'; |
| import 'elements-sk/icon/cancel-icon-sk'; |
| import 'elements-sk/icon/help-icon-sk'; |
| import 'elements-sk/styles/buttons'; |
| |
| export class TriconSk extends ElementSk { |
| private static template = (ele: TriconSk) => { |
| switch (ele.value) { |
| case 'positive': |
| return html`<check-circle-icon-sk |
| title="Positive" |
| ></check-circle-icon-sk>`; |
| case 'negative': |
| return html`<cancel-icon-sk title="Negative"></cancel-icon-sk>`; |
| default: |
| return html`<help-icon-sk title="Untriaged"></help-icon-sk>`; |
| } |
| }; |
| |
| constructor() { |
| super(TriconSk.template); |
| } |
| |
| connectedCallback() { |
| super.connectedCallback(); |
| this._upgradeProperty('value'); |
| this._render(); |
| } |
| |
| static get observedAttributes() { |
| return ['value']; |
| } |
| |
| /** @prop value {string} Mirrors the 'value' attribute. */ |
| get value() { |
| return this.getAttribute('value') || ''; |
| } |
| |
| set value(val: string) { |
| this.setAttribute('value', val); |
| } |
| |
| attributeChangedCallback() { |
| this._render(); |
| } |
| } |
| |
| define('tricon2-sk', TriconSk); |