add fab-printing-id component

fab-ui/src/fab-card-title.ts

@@ -47,6 +47,30 @@ export class FabRaritySymbol extends LitElement {
     `;
 }
 
+@customElement('fab-printing-id')
+export class FabPrintingId extends LitElement {
+    @property({ type: String })
+    setId = '';
+    @property({ type: Number })
+    number = 0;
+
+    render() {
+        return html`
+            <span class="printing-id">
+                <span class="set-id">${this.setId}</span><span class="set-number">${String(this.number).padStart(3, '0')}</span>
+            </span>
+        `;
+    }
+
+    static styles = css`
+    .printing-id {
+        font-family: "Geist Mono", monospace;
+        font-weight: bold;
+        color: #666;
+    }
+    `;
+}
+
 @customElement('fab-card-title')
 export class FabCardTitle extends LitElement {
     @property({ type: String })
@@ -66,7 +90,7 @@ export class FabCardTitle extends LitElement {
         return html`
             <span class="card-title">
                 <fab-rarity-symbol rarity="${this.rarity}"></fab-rarity-symbol>
-                <span class="printing-id">${this.setId}</span>
+                <fab-printing-id setId="${this.setId.slice(0, 3)}" number="${this.setId.slice(3)}"></fab-printing-id>
                 <span class="card-name">${this.name}</span>
                 <span class="card-color color-${this.color.toLowerCase()}">(${this.color})</span>
                 <span class="card-foiling">${this.foiling == "S" ? '' : this.foiling }</span>

fab-ui/src/fab-card.ts

@@ -46,11 +46,6 @@ export class FabCardPrinting extends LitElement {
         padding: 10px;
         font-size: 12px;
     }
-    .printing-id {
-        font-family: "Geist Mono", monospace;
-        font-weight: bold;
-        color: #666;
-    }
     .rainbow-foiling .card-name {
         background: linear-gradient(90deg, #ffb347, #ffcc33, #b4ffb3, #b3d1ff, #e0b3ff, #ffb3d1, #ffb347);
         background-size: 200% 200%;