Pushbutton Simulation Source Code Example

<div class="pushbutton-board" [class.pressed]="component.isPressed()">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 250">
  <!-- Generic 6 mm body with formed leads: 300 mil across trench, 200 mil along rows. -->
  <g fill="#a6a7a7" stroke="#646767" stroke-width="1.5">
    <path d="M57 30L40 30L25 20L20 30L38 43H57Z"/>
    <path d="M293 30L310 30L325 20L330 30L312 43H293Z"/>
    <path d="M57 220L40 220L25 230L20 220L38 207H57Z"/>
    <path d="M293 220L310 220L325 230L330 220L312 207H293Z"/>
    <rect id="contact-2" x="20" y="20" width="10" height="10"/>
    <rect id="contact-0" x="320" y="20" width="10" height="10"/>
    <rect id="contact-3" x="20" y="220" width="10" height="10"/>
    <rect id="contact-1" x="320" y="220" width="10" height="10"/>
  </g>
  <rect x="56.889764" y="6.889764" width="236.220472" height="236.220472" rx="9" fill="#303333"/>
  <rect x="58.889764" y="8.889764" width="232.220472" height="232.220472" rx="10" fill="#a3a5a5" stroke="#747777" stroke-width="1.5"/>
  <path d="M72 11H278 M72 239H278" stroke="#c6c8c8" stroke-width="1.5"/>
  <g fill="#252727"><circle cx="90" cy="40" r="10.6"/><circle cx="260" cy="40" r="10.6"/><circle cx="90" cy="210" r="10.6"/><circle cx="260" cy="210" r="10.6"/></g>
  <g fill="#676969"><path d="M83 36L89 31L92 39Z M253 36L259 31L262 39Z M83 206L89 201L92 209Z M253 206L259 201L262 209Z"/></g>
  <circle cx="175" cy="125" r="73.6" fill="#454747"/>
  <circle cx="175" cy="126.5" r="69.7" fill="#272323"/>
  <circle class="actuator" cx="175" cy="123.5" r="68.897638" fill="#705348"/>
  <path d="M136 67Q175 48 214 67Q175 56 136 67Z" fill="#b8a49a"/>
</svg>

  <button class="press-target" type="button" aria-label="Hold pushbutton" [attr.aria-pressed]="component.isPressed()"
    (pointerdown)="component.onPointerDown($event)" (pointerup)="component.onPointerEnd($event)"
    (pointercancel)="component.onPointerEnd($event)" (lostpointercapture)="component.onPointerEnd($event)"
    (keydown)="component.onKeyDown($event)" (keyup)="component.onKeyUp($event)" (blur)="component.releaseAll()"></button>
</div>
<simulation-component-overlay anchor="right" [offset]="14">
<section class="pushbutton-panel" aria-label="Pushbutton details">
<div class="pushbutton-heading"><h3>Pushbutton</h3>
<button *ngIf="!component.showPanel" class="opener" type="button" [attr.aria-expanded]="component.showPanel" [attr.aria-controls]="component.detailsId" (click)="component.showPanel = true">Details ›</button>
<button *ngIf="component.showPanel" class="pushbutton-close close" type="button" aria-label="Close pushbutton details" [attr.aria-expanded]="component.showPanel" [attr.aria-controls]="component.detailsId" (click)="component.showPanel = false"><svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 6L18 18M18 6L6 18"/></svg></button>
</div>
<p class="pushbutton-summary">{{ component.isPressed() ? 'Pressed' : 'Released' }}</p>
<div *ngIf="component.showPanel" class="pushbutton-details details" [id]="component.detailsId">
<p>Hold to press. Release to open.</p>
<p>Fixed pairs: 1–2 and 3–4.</p>
</div>
</section>
</simulation-component-overlay>
<!-- factory-panel-style:start -->
<style>
.pushbutton-panel{box-sizing:border-box;position:relative;width:210px;max-width:calc(100vw - 32px);padding:12px;border:1px solid #344252;border-radius:10px;background:#131b26;color:#edf2f7;box-shadow:0 4px 12px #00000018;font:13px/1.45 system-ui,sans-serif}
      .pushbutton-panel *{box-sizing:border-box;min-width:0}
      .pushbutton-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}
      .pushbutton-panel h3{font-size:14px;line-height:1.4;margin:0;white-space:nowrap}
      .pushbutton-panel p{margin:6px 0 0;overflow-wrap:anywhere}
      .pushbutton-panel .pushbutton-summary{color:#c3cdd7;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
      .pushbutton-panel button{font:inherit;cursor:pointer;color:#e2edf6;background:#203040;border:1px solid #48596c;border-radius:6px;padding:5px 7px;min-height:32px;margin:0;text-align:left;flex-shrink:0;white-space:nowrap}
      .pushbutton-panel button:focus-visible{outline:2px solid #8bc8f4;outline-offset:2px}
      .pushbutton-panel button.pushbutton-close{width:32px;height:32px;padding:0;margin:0;background:#203040;border:1px solid #48596c;display:inline-flex;align-items:center;justify-content:center}
      .pushbutton-close svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
      .pushbutton-panel table{width:100%;border-collapse:collapse;text-align:left;font-variant-numeric:tabular-nums}
      .pushbutton-panel th,.pushbutton-panel td{padding:6px 5px;border-bottom:1px solid #2b3949}
      .pushbutton-panel th{color:#c3cdd7;font-weight:500}
      .pushbutton-details{margin-top:12px}
      .pushbutton-details p{color:#c3cdd7}
</style>
<!-- factory-panel-style:end -->
<style>
.pushbutton-board{position:relative;width:100%;height:100%}
.pushbutton-board>svg{display:block;width:100%;height:100%}
.press-target{position:absolute;left:30.31496%;top:21.84094%;width:39.37008%;height:55.11811%;border:0;border-radius:50%;background:transparent;cursor:pointer;touch-action:none;padding:0}
.press-target:focus-visible{outline:3px solid #256eb0;outline-offset:3px}
.pushbutton-board.pressed .actuator{fill:#543d34}
</style>