import { LitElement } from 'lit';
import { nothing } from 'lit/html.js';
import { customElement, property } from 'lit/decorators.js';
import { unsafeStatic, html } from 'lit/static-html.js';
import { ElementTagName, validElementTagNames } from './utils/HTMLTypes';
import { spread } from './utils/LitHelper';
import { SpreadController } from './utils/SpreadController';
import { TailwindStylesController } from './utils/TailwindStylesController';
import { assertTagNameIsAllowed } from './utils/AssertHelpers';
export type IconName =
| 'menu'
| 'phone'
| 'user'
| 'pencil-alt'
| 'help-bubble'
| 'ambulance'
| 'tick';
@customElement('mono-icon')
export class MonoIconComp extends LitElement {
private __spreadController: SpreadController = new SpreadController(this);
private __stylesController: TailwindStylesController = new TailwindStylesController(
this,
);
@property({ type: String, reflect: true }) as: ElementTagName = 'div';
@property({
type: String,
reflect: true,
attribute: 'icon-name',
})
iconName: IconName = 'menu';
@property({ type: Number, reflect: true, attribute: 'size' })
size: number = 6;
@property({ type: Number, reflect: true, attribute: 'stroke-width' })
strokeWidth: number = 1;
private __getSvgIcon() {
switch (this.iconName) {
case 'menu':
return html`
`;
case 'phone':
return html`
`;
case 'user':
return html`
`;
case 'pencil-alt':
return html`
`;
case 'help-bubble':
return html`
`;
case 'ambulance':
return html`
`;
case 'tick':
return html`
`;
default:
return nothing;
}
}
/* eslint-disable lit/binding-positions,lit/no-invalid-html */
render() {
assertTagNameIsAllowed(
this.as,
(validElementTagNames as unknown) as string[],
);
const tag = unsafeStatic(this.as);
const attributesToSpread = this.__spreadController.buildSpreadAttributesIgnoring(
['as', 'style', 'class', 'slot', 'icon-name', 'size', 'stroke-width'],
);
return html`
<${tag}
class=${this.__stylesController.tw(
'flex flex-col',
`w-${this.size} h-${this.size}`,
)}
...=${spread(attributesToSpread)}
>
${this.__getSvgIcon()}
`;
}
/* eslint-enable lit/binding-positions,lit/no-invalid-html */
}
declare global {
interface HTMLElementTagNameMap {
'mono-icon': MonoIconComp;
}
}