DevToolbarCard Class — astro Architecture

Source Code

packages/astro/src/runtime/client/dev-toolbar/ui-library/card.ts lines 7–133

export class DevToolbarCard extends HTMLElement {
	link?: string | undefined | null;
	clickAction?: () => void | (() => Promise<void>);
	shadowRoot: ShadowRoot;

	_cardStyle: CardStyle = 'purple';

	get cardStyle() {
		return this._cardStyle;
	}

	set cardStyle(value) {
		if (!styles.includes(value)) {
			settings.logger.error(
				`Invalid style: ${value}, expected one of ${styles.join(', ')}, got ${value}.`,
			);
			return;
		}
		this._cardStyle = value;
		this.updateStyle();
	}

	static observedAttributes = ['card-style'];

	constructor() {
		super();
		this.shadowRoot = this.attachShadow({ mode: 'open' });

		this.link = this.getAttribute('link');
	}

	attributeChangedCallback() {
		if (this.hasAttribute('card-style'))
			this.cardStyle = this.getAttribute('card-style') as CardStyle;

		this.updateStyle();
	}

	updateStyle() {
		const style = this.shadowRoot.querySelector<HTMLStyleElement>('#selected-style');

		if (style) {
			style.innerHTML = `
				:host {
					--hover-background: var(--${this.cardStyle}-hover-background);
					--hover-border: var(--${this.cardStyle}-hover-border);
				}
			`;
		}
	}

	connectedCallback() {
		const element = this.link ? 'a' : this.clickAction ? 'button' : 'div';

		this.shadowRoot.innerHTML += `
			<style>
				:host {
					--purple-hover-background: rgba(136, 58, 234, 0.33);
					--purple-hover-border: 1px solid rgba(113, 24, 226, 1);

					--gray-hover-background: rgba(191, 193, 201, 0.33);
					--gray-hover-border: 1px solid rgba(191, 193, 201, 1);

					--red-hover-background: rgba(249, 196, 215, 0.33);
					--red-hover-border: 1px solid rgba(179, 62, 102, 1);

					--green-hover-background: rgba(213, 249, 196, 0.33);
					--green-hover-border: 1px solid rgba(61, 125, 31, 1);

					--yellow-hover-background: rgba(255, 236, 179, 0.33);
					--yellow-hover-border: 1px solid rgba(255, 191, 0, 1);

					--blue-hover-background: rgba(189, 195, 255, 0.33);
					--blue-hover-border: 1px solid rgba(54, 69, 217, 1);
				}

				:host>a, :host>button, :host>div {
					box-sizing: border-box;
					padding: 16px;
					display: block;
					border-radius: 8px;