40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
|
import { CSSResult, customElement, html, LitElement, property, TemplateResult } from "lit-element";
|
||
|
|
|
||
|
|
import PFBase from "@patternfly/patternfly/patternfly-base.css";
|
||
|
|
import PFButton from "@patternfly/patternfly/components/Button/button.css";
|
||
|
|
import PFChip from "@patternfly/patternfly/components/Chip/chip.css";
|
||
|
|
import AKGlobal from "../../authentik.css";
|
||
|
|
|
||
|
|
@customElement("ak-chip")
|
||
|
|
export class Chip extends LitElement {
|
||
|
|
|
||
|
|
@property()
|
||
|
|
value?: number | string;
|
||
|
|
|
||
|
|
@property({type: Boolean})
|
||
|
|
removable = false;
|
||
|
|
|
||
|
|
static get styles(): CSSResult[] {
|
||
|
|
return [PFBase, PFButton, PFChip, AKGlobal];
|
||
|
|
}
|
||
|
|
|
||
|
|
render(): TemplateResult {
|
||
|
|
return html`<li class="pf-c-chip-group__list-item">
|
||
|
|
<div class="pf-c-chip">
|
||
|
|
<span class="pf-c-chip__text">
|
||
|
|
<slot></slot>
|
||
|
|
</span>
|
||
|
|
${this.removable ? html`<button class="pf-c-button pf-m-plain" type="button" @click=${() => {
|
||
|
|
this.dispatchEvent(new CustomEvent("remove", {
|
||
|
|
bubbles: true,
|
||
|
|
composed: true,
|
||
|
|
}));
|
||
|
|
}}>
|
||
|
|
<i class="fas fa-times" aria-hidden="true"></i>
|
||
|
|
</button>` : html``}
|
||
|
|
</div>
|
||
|
|
</li>`;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|