Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
import {
html,
classMap,
choose,
when,
export class ListItem extends MozLitElement {
static get properties() {
return {
icon: { type: String },
selected: { type: Boolean },
};
}
constructor() {
super();
this.icon = "";
this.selected = false;
}
render() {
const classes = { selected: this.selected, "list-item": true };
return html` <link
rel="stylesheet"
/>
<li class=${classMap(classes)} role="option">
<img class="icon" src=${this.icon} />
<slot name="login-info"></slot>
<slot name="notificationIcon"></slot>
</li>`;
}
}
export class NewListItem extends MozLitElement {
static properties = {
icon: { type: String },
selected: { type: Boolean },
};
constructor() {
super();
this.id = "new-login-list-item";
this.selected = false;
this.icon = "page-icon:undefined";
}
render() {
return html`
<link
rel="stylesheet"
/>
<list-item ?selected=${this.selected} icon=${this.icon}>
<div class="labels" slot="login-info">
<span
class="title"
dir="auto"
data-l10n-id="login-list-item-title-new-login2"
></span
><span class="subtitle" dir="auto"></span>
</div>
</list-item>
`;
}
}
export class LoginListItem extends MozLitElement {
static get properties() {
return {
favicon: { type: String },
title: { type: String, reflect: true },
username: { type: String, reflect: true },
notificationIcon: { type: String, reflect: true },
selected: { type: Boolean },
};
}
constructor() {
super();
this.favicon = "";
this.title = "";
this.username = "";
this.notificationIcon = "";
this.selected = false;
}
render() {
switch (this.notificationIcon) {
case "breached":
this.classList.add("breached");
break;
case "vulnerable":
this.classList.add("vulnerable");
break;
default:
this.classList.remove("breached");
this.classList.remove("vulnerable");
break;
}
return html`
<link
rel="stylesheet"
/>
<list-item
icon=${this.favicon}
title=${this.title}
username=${this.username}
notificationIcon=${this.notificationIcon}
?selected=${this.selected}
>
<div class="labels" slot="login-info">
<span class="title" dir="auto">${this.title}</span>
${when(
this.username,
() => html` <span class="subtitle" dir="auto">
${this.username}
</span>`,
() => html`<span
class="subtitle"
dir="auto"
data-l10n-id="login-list-item-subtitle-missing-username"
></span>`
)}
</div>
<div slot="notificationIcon">
${choose(
this.notificationIcon,
[
[
"breached",
() =>
html`<img
class="alert-icon"
data-l10n-id="about-logins-list-item-breach-icon"
title=""
/>`,
],
[
"vulnerable",
() =>
html`<img
class="alert-icon"
data-l10n-id="about-logins-list-item-vulnerable-password-icon"
title=""
/>`,
],
],
() => html`<img class="alert-icon" title="" src="" />`
)}
</div>
</list-item>
`;
}
}
customElements.define("list-item", ListItem);
customElements.define("new-list-item", NewListItem);
customElements.define("login-list-item", LoginListItem);