constructor() — astro Function Reference

Architecture documentation for the constructor() function in audit-list-item.ts from the astro codebase.

Function typescript DevToolbar ToolbarClient

Entity Profile

DevToolbar→ ToolbarClient→ constructor() — astro Function Reference

Dependency Diagram

graph TD
  b1f38296_d37d_8631_cc36_31b52d897ea5["constructor()"]
  ad12294a_8661_c1b7_4288_fb6359c24bdb["DevToolbarAuditListItem"]
  b1f38296_d37d_8631_cc36_31b52d897ea5 -->|defined in| ad12294a_8661_c1b7_4288_fb6359c24bdb
  style b1f38296_d37d_8631_cc36_31b52d897ea5 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/astro/src/runtime/client/dev-toolbar/apps/audit/ui/audit-list-item.ts lines 6–137

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

		this.shadowRoot.innerHTML = `
			<style>
				:host>button, :host>div {
					box-sizing: border-box;
					padding: 16px;
					background: transparent;
					border: none;
					border-bottom: 1px solid #1F2433;
					text-decoration: none;
					width: 100%;
	    		height: 100%;
				}

				h1, h2, h3, h4, h5, h6 {
					color: #fff;
					font-weight: 600;
				}

				:host>button:hover, :host([hovered])>button {
					background: #FFFFFF20;
				}

				svg {
					display: block;
					margin: 0 auto;
				}

			:host>button#astro-overlay-card {
			  text-align: left;
				box-shadow: none;
				display: flex;
				align-items: center;
				overflow: hidden;
				gap: 8px;
			}

			:host(:not([active]))>button:hover {
			  cursor: pointer;
			}

			.extended-info {
				display: none;
				color: white;
				font-size: 14px;
			}

			.extended-info hr {
				border: 1px solid rgba(27, 30, 36, 1);
			}

			:host([active]) .extended-info {
				display: block;
				position: absolute;
				height: 100%;
				top: 98px;
				height: calc(100% - 98px);
				background: #0d0e12;
				user-select: text;
				overflow: auto;
				border: none;
				z-index: 1000000000;
				flex-direction: column;
				line-height: 1.25rem;
			}

			:host([active])>button#astro-overlay-card {
				display: none;
			}

			.audit-title {
				margin: 0;
				margin-bottom: 4px;
			}

			.extended-info .audit-selector {
				font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;