@rhds/elements
Version:
Red Hat Design System Elements
88 lines • 7.5 kB
JavaScript
var _RhHealthIndex_internals;
var RhHealthIndex_1;
import { __classPrivateFieldGet, __decorate } from "tslib";
import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators/custom-element.js';
import { property } from 'lit/decorators/property.js';
import { classMap } from 'lit/directives/class-map.js';
import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
import { themable } from '@rhds/elements/lib/themable.js';
import { css } from "lit";
const styles = css `:host{display:inline-block}[hidden]{display:none!important}#grade{margin-inline-end:var(--rh-space-lg,16px)}:is(.a,.b,.c,.d,.e,.f){--_text-sm:var(--rh-color-text-primary);--_text-lg:var(--rh-color-text-primary)}.a,.b{--_border-sm:var(--rh-color-status-success);--_border-md:#0000;--_border-lg:var(--rh-color-status-success);--_fill-sm:var(--rh-color-surface-status-success);--_fill-md:var(--rh-color-status-success);--_fill-lg:var(--rh-color-surface-status-success);--_accent:var(--rh-color-status-success)}.c{--_border-sm:var(--rh-color-status-warning);--_border-md:#0000;--_border-lg:var(--rh-color-status-warning);--_fill-sm:var(--rh-color-surface-status-warning);--_fill-md:var(--rh-color-status-warning);--_fill-lg:var(--rh-color-surface-status-warning);--_accent:var(--rh-color-status-warning)}.d{--_border-sm:var(--rh-color-status-caution);--_border-md:#0000;--_border-lg:var(--rh-color-status-caution);--_fill-sm:var(--rh-color-surface-status-caution);--_fill-md:var(--rh-color-status-caution);--_fill-lg:var(--rh-color-surface-status-caution);--_accent:var(--rh-color-status-caution)}.e,.f{--_border-sm:var(--rh-color-status-danger);--_border-md:#0000;--_border-lg:var(--rh-color-status-danger);--_fill-sm:var(--rh-color-surface-status-danger);--_fill-md:var(--rh-color-status-danger);--_fill-lg:var(--rh-color-surface-status-danger);--_accent:var(--rh-color-status-danger)}#container{--_box-size:var(--rh-space-xl,24px)}#container.xl{--_box-size:var(--rh-space-2xl,32px);--_font-size:var(--rh-font-size-body-text-xl,1.25rem)}#container{display:inline-flex;scale:1;align-items:center;width:max-content;font-size:var(--_font-size,var(--rh-font-size-body-text-md,1rem));font-family:var(--rh-font-family-code,RedHatMono,"Red Hat Mono","Courier New",Courier,monospace);line-height:var(--_box-size);text-transform:uppercase}#container.sm{display:inline-block;margin:0;border:none}#container.md,#container.sm{height:var(--_box-size)}#container.lg,#container.xl{display:flex;margin:0;border:var(--rh-border-width-sm,1px) solid var(--rh-color-border-subtle)}.box{border:var(--rh-border-width-sm,1px) solid #0000;background-color:light-dark(var(--rh-color-surface-lightest,#fff),oklch(from var(--rh-color-surface-dark,#383838) calc(l * .82) c h));width:var(--_box-size);display:flex;flex-flow:column nowrap;justify-content:center;align-items:center;position:relative}.box:not(:first-child){margin-inline-start:-1px}.box.active{color:var(--rh-color-text-primary);z-index:1}.box.sm{color:light-dark(var(--_text-sm),var(--rh-color-text-primary));border-color:var(--_border-sm);background-color:light-dark(var(--_fill-sm),var(--rh-color-surface-darkest,#151515))}.box.md{border-color:light-dark(var(--rh-color-border-subtle-on-light,#c7c7c7),var(--rh-color-icon-subtle,#707070));background-color:light-dark(var(--rh-color-surface-lightest,#fff),var(--rh-color-surface-darkest,#151515));height:100%}.box.md.active{border-color:var(--_border-md);background-color:var(--_fill-md)}.box.lg,.box.xl{border:none;margin:1px;display:inline-block;line-height:var(--_box-size);width:var(--_box-size);text-align:center;padding-inline:2px;color:var(--_text-lg)}:is(.box.lg,.box.xl):after{display:block;content:"";min-height:var(--rh-length-xs,4px);z-index:1;background-color:var(--_accent)}.active:is(.box.lg,.box.xl){position:relative;margin:-1px;font-weight:var(--rh-font-weight-code-medium,500);color:var(--rh-color-text-primary)}.active:is(.box.lg,.box.xl):before{display:block;content:"";inset:-2px -1px;z-index:-1;position:absolute;background-color:light-dark(var(--_fill-lg),var(--rh-color-surface-darkest,#151515));border:var(--rh-border-width-sm,1px) solid var(--_border-lg)}`;
/**
* Health index provides a visual grade (A through F) for communicating the
* health or security level of an item. Authors must set the `grade`
* attribute and should place it in context that makes its purpose clear.
* It uses ARIA `meter` role so screen reader users can read the grade.
* This element should not receive keyboard focus, as it is non-interactive.
*
* @summary Displays a health grade for a particular item or package
*/
let RhHealthIndex = RhHealthIndex_1 = class RhHealthIndex extends LitElement {
constructor() {
super(...arguments);
/**
* Sets the visual size of the health index. The `sm` size renders only the
* active grade letter. The default `md` size renders all grade boxes without
* labels. The `lg` and `xl` sizes render all grade letters with the active
* grade highlighted and bordered.
*/
this.size = 'md';
/**
* Sets the health grade from A (best) to F (worst). Grades A and B use
* success status colors, C uses warning, D uses caution, and E and F use
* danger. The value is case-insensitive; lowercase input is normalized to
* uppercase.
*/
this.grade = 'A';
// TODO: use I18nController to support officially supported languages.
_RhHealthIndex_internals.set(this, InternalsController.of(this, {
role: 'meter',
ariaValueMin: '1',
ariaValueMax: '6',
ariaValueText: 'Grade A',
ariaLabel: 'Health graded A through F',
ariaRoleDescription: 'Level indicator',
}));
}
willUpdate(changed) {
this.grade = this.grade.toUpperCase();
if (changed.has('grade')) {
const { grade } = this;
const gradeNumeral = (RhHealthIndex_1.grades.indexOf(grade) + 1);
__classPrivateFieldGet(this, _RhHealthIndex_internals, "f").ariaValueNow = gradeNumeral.toString();
__classPrivateFieldGet(this, _RhHealthIndex_internals, "f").ariaValueText = `Grade ${grade}`;
}
}
render() {
const { size = 'md' } = this;
const grades = [...RhHealthIndex_1.grades].map(x => x.toLowerCase());
const grade = this.grade.toLowerCase();
return html `
<div id="container"
aria-hidden="true"
class="${classMap({ [size]: true })}">
<div id="grade" ?hidden="${size !== 'md'}">${grade}</div>${size === 'sm' ? html `
<div class="box ${classMap({ [grade]: true, [size]: true })}">${grade}</div>` : grades.map(letter => html `
<div class="box ${classMap({ [letter]: true, [size]: true, active: letter === grade })}">
${!(size === 'lg' || size === 'xl') ? '' : letter}
</div>`)}
</div>
`;
}
};
_RhHealthIndex_internals = new WeakMap();
RhHealthIndex.styles = [styles];
RhHealthIndex.grades = 'ABCDEF';
__decorate([
property({ reflect: true })
], RhHealthIndex.prototype, "size", void 0);
__decorate([
property({ reflect: true })
], RhHealthIndex.prototype, "grade", void 0);
RhHealthIndex = RhHealthIndex_1 = __decorate([
customElement('rh-health-index'),
themable
], RhHealthIndex);
export { RhHealthIndex };
//# sourceMappingURL=rh-health-index.js.map