41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import { t } from "@lingui/macro";
|
|
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
|
import PFExpandableSection from "../../node_modules/@patternfly/patternfly/components/ExpandableSection/expandable-section.css";
|
|
|
|
@customElement("ak-expand")
|
|
export class Expand extends LitElement {
|
|
@property({ type: Boolean })
|
|
expanded = false;
|
|
|
|
@property()
|
|
textOpen = "Show less";
|
|
|
|
@property()
|
|
textClosed = "Show more";
|
|
|
|
static get styles(): CSSResult[] {
|
|
return [PFExpandableSection];
|
|
}
|
|
|
|
render(): TemplateResult {
|
|
return html`<div class="pf-c-expandable-section ${this.expanded ? "pf-m-expanded" : ""}">
|
|
<button
|
|
type="button"
|
|
class="pf-c-expandable-section__toggle"
|
|
aria-expanded="${this.expanded}"
|
|
@click=${() => {
|
|
this.expanded = !this.expanded;
|
|
}}
|
|
>
|
|
<span class="pf-c-expandable-section__toggle-icon">
|
|
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
</span>
|
|
<span class="pf-c-expandable-section__toggle-text"
|
|
>${this.expanded ? t`${this.textOpen}` : t`${this.textClosed}`}</span
|
|
>
|
|
</button>
|
|
<slot ?hidden=${!this.expanded} class="pf-c-expandable-section__content"></slot>
|
|
</div>`;
|
|
}
|
|
}
|