@dssp/dkpi 1.0.0-alpha.87 → 1.0.0-alpha.88

package/dist-client/pages/kpi-admin/kpi-system-guide.js

@@ -58,7 +58,7 @@ const EXTERNAL_SYSTEM_URLS = {
     '세움터(EAIS)': 'https://cloud.eais.go.kr',
     '키스콘(KISCON)': 'https://www.kiscon.net',
     '올바로(Allbaro)': 'https://www.allbaro.or.kr',
-    '전자카드제': 'https://www.cw.or.kr'
+    전자카드제: 'https://www.cw.or.kr'
 };
 const VALUE_TYPE_LABELS = {
     MEASURED: { label: '외부 수집', color: '#1976d2', icon: '📡' },
@@ -98,7 +98,7 @@ let KpiSystemGuide = class KpiSystemGuide extends PageView {
         for (const y of this.kpiRoot) {
             if (y.active === false)
                 continue;
-            for (const x of (y.kpis || [])) {
+            for (const x of y.kpis || []) {
                 if (x.active === false)
                     continue;
                 if ((_a = x.formula) === null || _a === void 0 ? void 0 : _a.includes(`[${metricName}]`)) {
@@ -122,8 +122,7 @@ let KpiSystemGuide = class KpiSystemGuide extends PageView {
         return html `
       <div class="page-title">KPI 시스템 가이드</div>
       <div class="page-subtitle">
-        건축현장 성과평가 KPI 체계의 전체 구조, 산식, 메트릭 연관관계를 확인합니다.
-        모든 정보는 DB에서 실시간 조회됩니다.
+        건축프로젝트 성과평가 KPI 체계의 전체 구조, 산식, 메트릭 연관관계를 확인합니다. 모든 정보는 DB에서 실시간 조회됩니다.
       </div>
 
       <!-- 범례 -->
@@ -140,44 +139,58 @@ let KpiSystemGuide = class KpiSystemGuide extends PageView {
         <div class="section-title">📊 KPI 계층 구조 (Z → Y → X)</div>
 
         <!-- Z 루트 -->
-        <div class="z-node" @click=${() => this.showDetail({ name: 'Z. 전체스코어', description: 'Y1~Y6 가중합', formula: 'Y1×w1 + Y2×w2 + ... + Y6×w6', scoreType: 'DIRECT', valueType: 'CALCULATED' }, 'kpi')}>
+        <div
+          class="z-node"
+          @click=${() => this.showDetail({
+            name: 'Z. 전체스코어',
+            description: 'Y1~Y6 가중합',
+            formula: 'Y1×w1 + Y2×w2 + ... + Y6×w6',
+            scoreType: 'DIRECT',
+            valueType: 'CALCULATED'
+        }, 'kpi')}
+        >
           <div class="z-name">Z. 전체스코어</div>
-          <div class="z-formula">= ${this.kpiRoot
+          <div class="z-formula">
+            =
+            ${this.kpiRoot
             .filter((y) => y.active !== false)
             .map((y) => `${y.name.split('.')[0]}×${y.weight}`)
-            .join(' + ')}</div>
+            .join(' + ')}
+          </div>
         </div>
 
         <!-- Y 그룹들 (비활성 Y 제외) -->
-        ${this.kpiRoot.filter((y) => y.active !== false).map((y) => {
+        ${this.kpiRoot
+            .filter((y) => y.active !== false)
+            .map((y) => {
             const activeKpis = (y.kpis || []).filter((x) => x.active !== false);
             return html `
-            <div class="y-group">
-              <div class="y-header" @click=${() => this.showDetail(y, 'kpi')}>
-                <span class="y-name">${y.name}</span>
-                <span class="y-weight">가중치: ${y.weight}</span>
-              </div>
-              <div class="y-body">
-                ${y.formula ? html `<div class="y-formula">${y.formula}</div>` : ''}
-                <div class="x-cards">
-                  ${activeKpis.map((x) => {
+              <div class="y-group">
+                <div class="y-header" @click=${() => this.showDetail(y, 'kpi')}>
+                  <span class="y-name">${y.name}</span>
+                  <span class="y-weight">가중치: ${y.weight}</span>
+                </div>
+                <div class="y-body">
+                  ${y.formula ? html `<div class="y-formula">${y.formula}</div>` : ''}
+                  <div class="x-cards">
+                    ${activeKpis.map((x) => {
                 const st = SCORE_TYPE_LABELS[x.scoreType] || { label: x.scoreType || '미설정', color: '#999' };
                 const vt = VALUE_TYPE_LABELS[x.valueType] || { label: x.valueType || '미설정', color: '#999', icon: '?' };
                 return html `
-                      <div class="x-card" @click=${() => this.showDetail(x, 'kpi')}>
-                        <div class="x-name">${x.name}</div>
-                        <div class="x-formula">${x.formula || '—'}</div>
-                        <div class="x-badges">
-                          <span class="badge badge-score">${st.label}</span>
-                          <span class="badge badge-value">${vt.icon} ${vt.label}</span>
+                        <div class="x-card" @click=${() => this.showDetail(x, 'kpi')}>
+                          <div class="x-name">${x.name}</div>
+                          <div class="x-formula">${x.formula || '—'}</div>
+                          <div class="x-badges">
+                            <span class="badge badge-score">${st.label}</span>
+                            <span class="badge badge-value">${vt.icon} ${vt.label}</span>
+                          </div>
                         </div>
-                      </div>
-                    `;
+                      `;
             })}
+                  </div>
                 </div>
               </div>
-            </div>
-          `;
+            `;
         })}
       </div>
 
@@ -192,21 +205,26 @@ let KpiSystemGuide = class KpiSystemGuide extends PageView {
             <div class="section-title">📋 원천 메트릭 (${usedMetrics.length}개 사용)</div>
             <div class="metrics-grid">
               ${usedMetrics.map(({ m, usage }) => html `
-                <div class="metric-card" @click=${() => this.showDetail(m, 'metric')}>
-                  <div class="metric-name">${m.name}</div>
-                  <div class="metric-unit">
-                    ${m.unit || '—'} ·
-                    ${m.collectType === 'EXTERNAL' && m.source
+                  <div class="metric-card" @click=${() => this.showDetail(m, 'metric')}>
+                    <div class="metric-name">${m.name}</div>
+                    <div class="metric-unit">
+                      ${m.unit || '—'} ·
+                      ${m.collectType === 'EXTERNAL' && m.source
                 ? EXTERNAL_SYSTEM_URLS[m.source]
-                    ? html `<a href="${EXTERNAL_SYSTEM_URLS[m.source]}" target="_blank" rel="noopener"
-                            style="color:#1976d2;text-decoration:none;" @click=${(e) => e.stopPropagation()}
-                          >${m.source} ↗</a>`
+                    ? html `<a
+                              href="${EXTERNAL_SYSTEM_URLS[m.source]}"
+                              target="_blank"
+                              rel="noopener"
+                              style="color:#1976d2;text-decoration:none;"
+                              @click=${(e) => e.stopPropagation()}
+                              >${m.source} ↗</a
+                            >`
                     : m.source
                 : m.collectType || 'MANUAL'}
+                    </div>
+                    <div class="metric-used">→ ${usage.join(', ')}</div>
                   </div>
-                  <div class="metric-used">→ ${usage.join(', ')}</div>
-                </div>
-              `)}
+                `)}
             </div>
           </div>
         `;
@@ -221,15 +239,21 @@ let KpiSystemGuide = class KpiSystemGuide extends PageView {
             <div style="font-size:0.85rem;color:#555;">X-level 지표</div>
           </div>
           <div style="flex:1;min-width:200px;background:#e8f5e9;padding:16px;border-radius:8px;text-align:center;">
-            <div style="font-size:2rem;font-weight:800;color:#2e7d32;">${this.kpiRoot.filter((y) => y.active !== false).length}</div>
+            <div style="font-size:2rem;font-weight:800;color:#2e7d32;">
+              ${this.kpiRoot.filter((y) => y.active !== false).length}
+            </div>
             <div style="font-size:0.85rem;color:#555;">Y-level 영역</div>
           </div>
           <div style="flex:1;min-width:200px;background:#fff3e0;padding:16px;border-radius:8px;text-align:center;">
-            <div style="font-size:2rem;font-weight:800;color:#e65100;">${this.metrics.filter((m) => m.active && this.getMetricUsage(m.name).length > 0).length}</div>
+            <div style="font-size:2rem;font-weight:800;color:#e65100;">
+              ${this.metrics.filter((m) => m.active && this.getMetricUsage(m.name).length > 0).length}
+            </div>
             <div style="font-size:0.85rem;color:#555;">원천 메트릭</div>
           </div>
           <div style="flex:1;min-width:200px;background:#fce4ec;padding:16px;border-radius:8px;text-align:center;">
-            <div style="font-size:2rem;font-weight:800;color:#c62828;">${allX.filter((x) => x.valueType === 'ASSESSED').length}</div>
+            <div style="font-size:2rem;font-weight:800;color:#c62828;">
+              ${allX.filter((x) => x.valueType === 'ASSESSED').length}
+            </div>
             <div style="font-size:0.85rem;color:#555;">감리자 평가 항목</div>
           </div>
         </div>
@@ -250,83 +274,112 @@ let KpiSystemGuide = class KpiSystemGuide extends PageView {
             <button class="popup-close" @click=${() => this.closeDetail()}>×</button>
           </div>
 
-          ${d.description ? html `
-            <div class="popup-row">
-              <span class="popup-label">설명</span>
-              <span class="popup-value">${d.description}</span>
-            </div>
-          ` : ''}
-
-          ${isKpi ? html `
-            ${d.formula ? html `
-              <div class="popup-row"><span class="popup-label">산식</span></div>
-              <div class="popup-formula">${d.formula}</div>
-            ` : ''}
-
-            ${d.scoreType ? html `
-              <div class="popup-row">
-                <span class="popup-label">Score 산정</span>
-                <span class="popup-value" style="color:${(SCORE_TYPE_LABELS[d.scoreType] || {}).color || '#333'}">
-                  ${(SCORE_TYPE_LABELS[d.scoreType] || {}).label || d.scoreType}
-                </span>
-              </div>
-            ` : ''}
-
-            ${d.valueType ? html `
-              <div class="popup-row">
-                <span class="popup-label">Value 획득</span>
-                <span class="popup-value" style="color:${(VALUE_TYPE_LABELS[d.valueType] || {}).color || '#333'}">
-                  ${(VALUE_TYPE_LABELS[d.valueType] || {}).icon || ''} ${(VALUE_TYPE_LABELS[d.valueType] || {}).label || d.valueType}
-                </span>
-              </div>
-            ` : ''}
-
-            ${d.weight ? html `
-              <div class="popup-row">
-                <span class="popup-label">가중치</span>
-                <span class="popup-value">${d.weight}</span>
-              </div>
-            ` : ''}
+          ${d.description
+            ? html `
+                <div class="popup-row">
+                  <span class="popup-label">설명</span>
+                  <span class="popup-value">${d.description}</span>
+                </div>
+              `
+            : ''}
+          ${isKpi
+            ? html `
+                ${d.formula
+                ? html `
+                      <div class="popup-row"><span class="popup-label">산식</span></div>
+                      <div class="popup-formula">${d.formula}</div>
+                    `
+                : ''}
+                ${d.scoreType
+                ? html `
+                      <div class="popup-row">
+                        <span class="popup-label">Score 산정</span>
+                        <span class="popup-value" style="color:${(SCORE_TYPE_LABELS[d.scoreType] || {}).color || '#333'}">
+                          ${(SCORE_TYPE_LABELS[d.scoreType] || {}).label || d.scoreType}
+                        </span>
+                      </div>
+                    `
+                : ''}
+                ${d.valueType
+                ? html `
+                      <div class="popup-row">
+                        <span class="popup-label">Value 획득</span>
+                        <span class="popup-value" style="color:${(VALUE_TYPE_LABELS[d.valueType] || {}).color || '#333'}">
+                          ${(VALUE_TYPE_LABELS[d.valueType] || {}).icon || ''}
+                          ${(VALUE_TYPE_LABELS[d.valueType] || {}).label || d.valueType}
+                        </span>
+                      </div>
+                    `
+                : ''}
+                ${d.weight
+                ? html `
+                      <div class="popup-row">
+                        <span class="popup-label">가중치</span>
+                        <span class="popup-value">${d.weight}</span>
+                      </div>
+                    `
+                : ''}
 
-            <div style="margin-top:16px;padding-top:12px;border-top:1px solid #eee;">
-              <span class="popup-link" @click=${() => { this.closeDetail(); navigate('kpi-overview'); }}>
-                → KPI 개요에서 보기
-              </span>
-              &nbsp;&nbsp;
-              <span class="popup-link" @click=${() => { this.closeDetail(); navigate('kpi-admin'); }}>
-                → KPI 관리에서 편집
-              </span>
-            </div>
-          ` : html `
-            <div class="popup-row">
-              <span class="popup-label">단위</span>
-              <span class="popup-value">${d.unit || '—'}</span>
-            </div>
-            <div class="popup-row">
-              <span class="popup-label">수집 방식</span>
-              <span class="popup-value">${d.collectType || 'MANUAL'}</span>
-            </div>
-            <div class="popup-row">
-              <span class="popup-label">데이터 소스</span>
-              <span class="popup-value">
-                ${d.source && EXTERNAL_SYSTEM_URLS[d.source]
-            ? html `<a href="${EXTERNAL_SYSTEM_URLS[d.source]}" target="_blank" rel="noopener" style="color:#1976d2;">${d.source} ↗</a>`
-            : d.source || '미설정'}
-              </span>
-            </div>
+                <div style="margin-top:16px;padding-top:12px;border-top:1px solid #eee;">
+                  <span
+                    class="popup-link"
+                    @click=${() => {
+                this.closeDetail();
+                navigate('kpi-overview');
+            }}
+                  >
+                    → KPI 개요에서 보기
+                  </span>
+                  &nbsp;&nbsp;
+                  <span
+                    class="popup-link"
+                    @click=${() => {
+                this.closeDetail();
+                navigate('kpi-admin');
+            }}
+                  >
+                    → KPI 관리에서 편집
+                  </span>
+                </div>
+              `
+            : html `
+                <div class="popup-row">
+                  <span class="popup-label">단위</span>
+                  <span class="popup-value">${d.unit || '—'}</span>
+                </div>
+                <div class="popup-row">
+                  <span class="popup-label">수집 방식</span>
+                  <span class="popup-value">${d.collectType || 'MANUAL'}</span>
+                </div>
+                <div class="popup-row">
+                  <span class="popup-label">데이터 소스</span>
+                  <span class="popup-value">
+                    ${d.source && EXTERNAL_SYSTEM_URLS[d.source]
+                ? html `<a href="${EXTERNAL_SYSTEM_URLS[d.source]}" target="_blank" rel="noopener" style="color:#1976d2;"
+                          >${d.source} ↗</a
+                        >`
+                : d.source || '미설정'}
+                  </span>
+                </div>
 
-            <div style="margin-top:12px;">
-              <div class="popup-label" style="margin-bottom:6px;">사용처:</div>
-              ${this.getMetricUsage(d.name).map(kpi => html `<div style="font-size:0.85rem;color:#1976d2;margin-bottom:2px;">· ${kpi}</div>`)}
-              ${this.getMetricUsage(d.name).length === 0 ? html `<div style="color:#ccc;font-size:0.85rem;">미사용</div>` : ''}
-            </div>
+                <div style="margin-top:12px;">
+                  <div class="popup-label" style="margin-bottom:6px;">사용처:</div>
+                  ${this.getMetricUsage(d.name).map(kpi => html `<div style="font-size:0.85rem;color:#1976d2;margin-bottom:2px;">· ${kpi}</div>`)}
+                  ${this.getMetricUsage(d.name).length === 0 ? html `<div style="color:#ccc;font-size:0.85rem;">미사용</div>` : ''}
+                </div>
 
-            <div style="margin-top:16px;padding-top:12px;border-top:1px solid #eee;">
-              <span class="popup-link" @click=${() => { this.closeDetail(); navigate('kpi-metric-value-list'); }}>
-                → 메트릭 값 관리
-              </span>
-            </div>
-          `}
+                <div style="margin-top:16px;padding-top:12px;border-top:1px solid #eee;">
+                  <span
+                    class="popup-link"
+                    @click=${() => {
+                this.closeDetail();
+                navigate('kpi-metric-value-list');
+            }}
+                  >
+                    → 메트릭 값 관리
+                  </span>
+                </div>
+              `}
         </div>
       </div>
     `;
@@ -360,7 +413,7 @@ KpiSystemGuide.styles = [
         border-radius: 12px;
         padding: 24px;
         margin-bottom: 24px;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
       }
       .section-title {
         font-size: 1.1rem;
@@ -381,9 +434,19 @@ KpiSystemGuide.styles = [
         margin-bottom: 16px;
         cursor: pointer;
       }
-      .z-node:hover { opacity: 0.95; }
-      .z-name { font-size: 1.1rem; font-weight: 700; }
-      .z-formula { font-size: 0.8rem; opacity: 0.8; margin-top: 4px; font-family: monospace; }
+      .z-node:hover {
+        opacity: 0.95;
+      }
+      .z-name {
+        font-size: 1.1rem;
+        font-weight: 700;
+      }
+      .z-formula {
+        font-size: 0.8rem;
+        opacity: 0.8;
+        margin-top: 4px;
+        font-family: monospace;
+      }
 
       /* Y 그룹 */
       .y-group {
@@ -401,15 +464,22 @@ KpiSystemGuide.styles = [
         align-items: center;
         cursor: pointer;
       }
-      .y-header:hover { opacity: 0.95; }
-      .y-name { font-weight: 700; font-size: 1rem; }
+      .y-header:hover {
+        opacity: 0.95;
+      }
+      .y-name {
+        font-weight: 700;
+        font-size: 1rem;
+      }
       .y-weight {
-        background: rgba(255,255,255,0.2);
+        background: rgba(255, 255, 255, 0.2);
         padding: 2px 10px;
         border-radius: 12px;
         font-size: 0.8rem;
       }
-      .y-body { padding: 12px; }
+      .y-body {
+        padding: 12px;
+      }
       .y-formula {
         font-size: 0.8rem;
         color: #555;
@@ -422,7 +492,11 @@ KpiSystemGuide.styles = [
       }
 
       /* X 카드 */
-      .x-cards { display: flex; flex-wrap: wrap; gap: 8px; }
+      .x-cards {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+      }
       .x-card {
         flex: 1 1 220px;
         background: #fff;
@@ -435,23 +509,42 @@ KpiSystemGuide.styles = [
       }
       .x-card:hover {
         border-color: #1976d2;
-        box-shadow: 0 2px 8px rgba(25,118,210,0.15);
+        box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15);
+      }
+      .x-name {
+        font-weight: 600;
+        font-size: 0.85rem;
+        color: #333;
+        margin-bottom: 4px;
       }
-      .x-name { font-weight: 600; font-size: 0.85rem; color: #333; margin-bottom: 4px; }
       .x-formula {
-        font-size: 0.75rem; color: #888; font-family: monospace;
-        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+        font-size: 0.75rem;
+        color: #888;
+        font-family: monospace;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
         margin-bottom: 6px;
       }
-      .x-badges { display: flex; gap: 4px; flex-wrap: wrap; }
+      .x-badges {
+        display: flex;
+        gap: 4px;
+        flex-wrap: wrap;
+      }
       .badge {
         font-size: 0.65rem;
         padding: 2px 6px;
         border-radius: 4px;
         font-weight: 600;
       }
-      .badge-score { background: #e3f2fd; color: #1565c0; }
-      .badge-value { background: #e8f5e9; color: #2e7d32; }
+      .badge-score {
+        background: #e3f2fd;
+        color: #1565c0;
+      }
+      .badge-value {
+        background: #e8f5e9;
+        color: #2e7d32;
+      }
 
       /* 메트릭 섹션 */
       .metrics-grid {
@@ -466,58 +559,118 @@ KpiSystemGuide.styles = [
         padding: 10px 14px;
         transition: all 0.2s;
       }
-      .metric-card:hover { border-color: #4caf50; }
-      .metric-name { font-weight: 600; font-size: 0.85rem; color: #333; }
-      .metric-unit { font-size: 0.75rem; color: #888; }
+      .metric-card:hover {
+        border-color: #4caf50;
+      }
+      .metric-name {
+        font-weight: 600;
+        font-size: 0.85rem;
+        color: #333;
+      }
+      .metric-unit {
+        font-size: 0.75rem;
+        color: #888;
+      }
       .metric-used {
-        font-size: 0.7rem; color: #1976d2; margin-top: 4px;
+        font-size: 0.7rem;
+        color: #1976d2;
+        margin-top: 4px;
       }
 
       /* 팝업 */
       .popup-overlay {
-        position: fixed; top: 0; left: 0; right: 0; bottom: 0;
-        background: rgba(0,0,0,0.3); z-index: 1000;
-        display: flex; align-items: center; justify-content: center;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.3);
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
       }
       .popup-box {
-        background: #fff; border-radius: 12px; padding: 24px;
-        min-width: 400px; max-width: 600px; max-height: 80vh;
-        overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.2);
+        background: #fff;
+        border-radius: 12px;
+        padding: 24px;
+        min-width: 400px;
+        max-width: 600px;
+        max-height: 80vh;
+        overflow-y: auto;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
       }
       .popup-title {
-        font-size: 1.1rem; font-weight: 700; color: #1a237e;
-        margin-bottom: 16px; display: flex; justify-content: space-between;
+        font-size: 1.1rem;
+        font-weight: 700;
+        color: #1a237e;
+        margin-bottom: 16px;
+        display: flex;
+        justify-content: space-between;
       }
       .popup-close {
-        background: none; border: none; font-size: 1.2rem;
-        cursor: pointer; color: #999;
+        background: none;
+        border: none;
+        font-size: 1.2rem;
+        cursor: pointer;
+        color: #999;
       }
       .popup-row {
-        display: flex; gap: 8px; margin-bottom: 8px;
+        display: flex;
+        gap: 8px;
+        margin-bottom: 8px;
         font-size: 0.85rem;
       }
-      .popup-label { color: #888; min-width: 100px; flex-shrink: 0; }
-      .popup-value { color: #333; font-weight: 500; }
+      .popup-label {
+        color: #888;
+        min-width: 100px;
+        flex-shrink: 0;
+      }
+      .popup-value {
+        color: #333;
+        font-weight: 500;
+      }
       .popup-formula {
-        background: #f5f5f5; padding: 10px; border-radius: 6px;
-        font-family: monospace; font-size: 0.85rem; margin: 8px 0;
+        background: #f5f5f5;
+        padding: 10px;
+        border-radius: 6px;
+        font-family: monospace;
+        font-size: 0.85rem;
+        margin: 8px 0;
         word-break: break-all;
       }
       .popup-link {
-        color: #1976d2; cursor: pointer; text-decoration: underline;
+        color: #1976d2;
+        cursor: pointer;
+        text-decoration: underline;
         font-size: 0.85rem;
       }
-      .popup-link:hover { color: #0d47a1; }
+      .popup-link:hover {
+        color: #0d47a1;
+      }
 
       /* 범례 */
       .legend {
-        display: flex; gap: 16px; flex-wrap: wrap;
-        margin-bottom: 20px; padding: 12px 16px;
-        background: #fff; border-radius: 8px;
-        box-shadow: 0 1px 4px rgba(0,0,0,0.04);
+        display: flex;
+        gap: 16px;
+        flex-wrap: wrap;
+        margin-bottom: 20px;
+        padding: 12px 16px;
+        background: #fff;
+        border-radius: 8px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+      }
+      .legend-group {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+        font-size: 0.8rem;
+      }
+      .legend-title {
+        font-weight: 700;
+        color: #555;
+        margin-right: 4px;
       }
-      .legend-group { display: flex; align-items: center; gap: 4px; font-size: 0.8rem; }
-      .legend-title { font-weight: 700; color: #555; margin-right: 4px; }
     `
 ];
 __decorate([