@dataengineeringformachinelearning/viking-ui 4.0.5 → 4.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +5 -5
- package/dist/README.md +5 -5
- package/dist/design-tokens.css +1 -1
- package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs +1178 -57
- package/dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs.map +1 -1
- package/dist/package.json +1 -1
- package/dist/types/dataengineeringformachinelearning-viking-ui.d.ts +120 -14
- package/dist/viking-components.css +30 -1
- package/dist/viking-ui-elements.js +634 -109
- package/dist/viking-ui.css +1 -1
- package/dist/web-components.js +964 -38
- package/dist/widget.js +2 -296
- package/package.json +1 -1
package/dist/widget.js
CHANGED
|
@@ -284,8 +284,7 @@
|
|
|
284
284
|
this.attachShadow({ mode: 'open' });
|
|
285
285
|
this.clientIp = '127.0.0.1';
|
|
286
286
|
// Prevent unstyled flash on hard refresh before connectedCallback completes.
|
|
287
|
-
this.shadowRoot.innerHTML =
|
|
288
|
-
'<style>:host{display:flex;justify-content:center;width:100%;margin:18px auto;min-height:44px;opacity:0;transition:opacity .12s ease}:host(.deml-ready){opacity:1}</style>';
|
|
287
|
+
this.shadowRoot.innerHTML = '';
|
|
289
288
|
}
|
|
290
289
|
|
|
291
290
|
async connectedCallback() {
|
|
@@ -347,300 +346,7 @@
|
|
|
347
346
|
|
|
348
347
|
// Set up Shadow DOM structure including status indicators and vulnerability modal triggers
|
|
349
348
|
this.shadowRoot.innerHTML = `
|
|
350
|
-
<
|
|
351
|
-
:host {
|
|
352
|
-
display: flex;
|
|
353
|
-
justify-content: center;
|
|
354
|
-
width: 100%;
|
|
355
|
-
margin: 18px auto;
|
|
356
|
-
opacity: 0;
|
|
357
|
-
transition: opacity 0.15s ease;
|
|
358
|
-
/* Inherit Viking tokens from host page (design-tokens.css); no duplicated hex matrix. */
|
|
359
|
-
--color-primary: var(--viking-accent, var(--viking-teal-600));
|
|
360
|
-
--color-success: var(--viking-success, var(--viking-green-500));
|
|
361
|
-
--color-warning: var(--viking-warning, var(--viking-gold-500));
|
|
362
|
-
--color-error: var(--viking-danger, var(--viking-crimson-500));
|
|
363
|
-
--card-bg: var(--viking-surface, var(--viking-charcoal-900));
|
|
364
|
-
--bg-color: var(--viking-bg, var(--viking-charcoal-900));
|
|
365
|
-
--border: var(--viking-border);
|
|
366
|
-
--text-color: var(--viking-text);
|
|
367
|
-
--text-muted: var(--viking-text-muted);
|
|
368
|
-
--space-1: var(--viking-space-1, 8px);
|
|
369
|
-
--space-2: var(--viking-space-2, 16px);
|
|
370
|
-
--base-font-size: var(--viking-font-size-base, 16px);
|
|
371
|
-
--shadow-sm: var(--viking-shadow-sm);
|
|
372
|
-
--shadow-md: var(--viking-shadow-md);
|
|
373
|
-
--transition-smooth: var(--viking-transition-interactive, all 0.2s ease);
|
|
374
|
-
}
|
|
375
|
-
:host(.deml-ready) {
|
|
376
|
-
opacity: 1;
|
|
377
|
-
}
|
|
378
|
-
.widget-container {
|
|
379
|
-
display: inline-flex;
|
|
380
|
-
align-items: center;
|
|
381
|
-
padding: var(--space-1) var(--space-2);
|
|
382
|
-
background: var(--viking-charcoal-900);
|
|
383
|
-
border: 1px solid var(--border);
|
|
384
|
-
border-radius: 10000px;
|
|
385
|
-
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
386
|
-
font-size: var(--base-font-size);
|
|
387
|
-
font-weight: 500;
|
|
388
|
-
color: var(--text-color);
|
|
389
|
-
box-shadow: var(--shadow-sm);
|
|
390
|
-
transition: var(--transition-smooth);
|
|
391
|
-
width: fit-content;
|
|
392
|
-
gap: var(--space-1);
|
|
393
|
-
}
|
|
394
|
-
.widget-container:hover {
|
|
395
|
-
background: var(--card-bg);
|
|
396
|
-
border-color: var(--viking-teal-400);
|
|
397
|
-
box-shadow: var(--shadow-md);
|
|
398
|
-
transform: translateY(-1px);
|
|
399
|
-
}
|
|
400
|
-
.widget-link {
|
|
401
|
-
display: inline-flex;
|
|
402
|
-
align-items: center;
|
|
403
|
-
gap: 6px;
|
|
404
|
-
text-decoration: none;
|
|
405
|
-
color: var(--white, var(--viking-white-pure));
|
|
406
|
-
gap: 0;
|
|
407
|
-
}
|
|
408
|
-
.status-dot {
|
|
409
|
-
width: 8px;
|
|
410
|
-
height: 8px;
|
|
411
|
-
border-radius: 50%;
|
|
412
|
-
background-color: var(--viking-metallic-300);
|
|
413
|
-
margin-right: 8px;
|
|
414
|
-
display: inline-block;
|
|
415
|
-
}
|
|
416
|
-
.divider {
|
|
417
|
-
color: rgba(255, 255, 255, 0.2);
|
|
418
|
-
user-select: none;
|
|
419
|
-
}
|
|
420
|
-
.report-trigger {
|
|
421
|
-
background: none;
|
|
422
|
-
border: none;
|
|
423
|
-
color: var(--viking-crimson-500);
|
|
424
|
-
cursor: pointer;
|
|
425
|
-
padding: 4px;
|
|
426
|
-
display: inline-flex;
|
|
427
|
-
align-items: center;
|
|
428
|
-
justify-content: center;
|
|
429
|
-
border-radius: 50%;
|
|
430
|
-
transition: background-color 0.2s;
|
|
431
|
-
}
|
|
432
|
-
.report-trigger:hover {
|
|
433
|
-
background-color: rgba(247, 152, 36, 0.18);
|
|
434
|
-
}
|
|
435
|
-
.report-icon {
|
|
436
|
-
width: 16px;
|
|
437
|
-
height: 16px;
|
|
438
|
-
}
|
|
439
|
-
.is-hidden {
|
|
440
|
-
display: none !important;
|
|
441
|
-
}
|
|
442
|
-
.modal-overlay {
|
|
443
|
-
position: fixed;
|
|
444
|
-
top: 0;
|
|
445
|
-
left: 0;
|
|
446
|
-
width: 100vw;
|
|
447
|
-
height: 100vh;
|
|
448
|
-
background-color: rgba(15, 23, 42, 0.6);
|
|
449
|
-
backdrop-filter: blur(4px);
|
|
450
|
-
display: flex;
|
|
451
|
-
align-items: center;
|
|
452
|
-
justify-content: center;
|
|
453
|
-
z-index: 99999;
|
|
454
|
-
}
|
|
455
|
-
.modal-title-icon {
|
|
456
|
-
color: var(--color-error, var(--viking-crimson-500));
|
|
457
|
-
}
|
|
458
|
-
.modal-content {
|
|
459
|
-
background-color: var(--viking-charcoal-800);
|
|
460
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
461
|
-
border-radius: 16px;
|
|
462
|
-
width: 90%;
|
|
463
|
-
max-width: 480px;
|
|
464
|
-
display: flex;
|
|
465
|
-
flex-direction: column;
|
|
466
|
-
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
|
467
|
-
animation: modal-anim 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
468
|
-
color: var(--viking-white);
|
|
469
|
-
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
470
|
-
text-align: left;
|
|
471
|
-
}
|
|
472
|
-
@keyframes modal-anim {
|
|
473
|
-
from {
|
|
474
|
-
transform: scale(0.95) translateY(10px);
|
|
475
|
-
opacity: 0;
|
|
476
|
-
}
|
|
477
|
-
to {
|
|
478
|
-
transform: scale(1) translateY(0);
|
|
479
|
-
opacity: 1;
|
|
480
|
-
}
|
|
481
|
-
}
|
|
482
|
-
.modal-header {
|
|
483
|
-
display: flex;
|
|
484
|
-
justify-content: space-between;
|
|
485
|
-
align-items: center;
|
|
486
|
-
padding: 16px 20px;
|
|
487
|
-
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
488
|
-
}
|
|
489
|
-
.modal-header h3 {
|
|
490
|
-
margin: 0;
|
|
491
|
-
font-size: 16px;
|
|
492
|
-
font-weight: 600;
|
|
493
|
-
display: flex;
|
|
494
|
-
align-items: center;
|
|
495
|
-
gap: 8px;
|
|
496
|
-
}
|
|
497
|
-
.close-btn {
|
|
498
|
-
background: none;
|
|
499
|
-
border: none;
|
|
500
|
-
color: var(--viking-metallic-500);
|
|
501
|
-
cursor: pointer;
|
|
502
|
-
font-size: 20px;
|
|
503
|
-
line-height: 1;
|
|
504
|
-
transition: color 0.2s;
|
|
505
|
-
}
|
|
506
|
-
.close-btn:hover {
|
|
507
|
-
color: var(--viking-white);
|
|
508
|
-
}
|
|
509
|
-
.modal-body {
|
|
510
|
-
padding: 20px;
|
|
511
|
-
display: flex;
|
|
512
|
-
flex-direction: column;
|
|
513
|
-
gap: 16px;
|
|
514
|
-
}
|
|
515
|
-
.helper-text {
|
|
516
|
-
font-size: 14px;
|
|
517
|
-
color: var(--viking-metallic-300);
|
|
518
|
-
margin: 0;
|
|
519
|
-
line-height: 1.5;
|
|
520
|
-
}
|
|
521
|
-
.form-field {
|
|
522
|
-
display: flex;
|
|
523
|
-
flex-direction: column;
|
|
524
|
-
gap: 8px;
|
|
525
|
-
}
|
|
526
|
-
.form-field label {
|
|
527
|
-
font-size: 14px;
|
|
528
|
-
font-weight: 600;
|
|
529
|
-
color: var(--viking-metallic-200);
|
|
530
|
-
}
|
|
531
|
-
.form-field input,
|
|
532
|
-
.form-field textarea,
|
|
533
|
-
.form-field select {
|
|
534
|
-
padding: 10px 12px;
|
|
535
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
536
|
-
border-radius: 8px;
|
|
537
|
-
font-size: 14px;
|
|
538
|
-
outline: none;
|
|
539
|
-
background-color: rgba(0, 0, 0, 0.2);
|
|
540
|
-
color: var(--viking-white);
|
|
541
|
-
font-family: inherit;
|
|
542
|
-
transition: all 0.2s;
|
|
543
|
-
}
|
|
544
|
-
.form-field input:focus,
|
|
545
|
-
.form-field textarea:focus {
|
|
546
|
-
border-color: var(--viking-blue-500);
|
|
547
|
-
box-shadow: 0 0 0 2px color-mix(in srgb, var(--viking-teal-400) 20%, transparent);
|
|
548
|
-
}
|
|
549
|
-
.form-row {
|
|
550
|
-
display: flex;
|
|
551
|
-
gap: 8px;
|
|
552
|
-
}
|
|
553
|
-
.form-row .form-field {
|
|
554
|
-
flex: 1;
|
|
555
|
-
}
|
|
556
|
-
.modal-footer {
|
|
557
|
-
padding: 16px 20px;
|
|
558
|
-
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
559
|
-
display: flex;
|
|
560
|
-
justify-content: flex-end;
|
|
561
|
-
gap: 12px;
|
|
562
|
-
background-color: rgba(0, 0, 0, 0.1);
|
|
563
|
-
border-bottom-left-radius: 16px;
|
|
564
|
-
border-bottom-right-radius: 16px;
|
|
565
|
-
}
|
|
566
|
-
.btn {
|
|
567
|
-
padding: 8px 16px;
|
|
568
|
-
font-size: 14px;
|
|
569
|
-
font-weight: 600;
|
|
570
|
-
border-radius: 96px;
|
|
571
|
-
cursor: pointer;
|
|
572
|
-
border: none;
|
|
573
|
-
font-family: inherit;
|
|
574
|
-
transition: all 0.2s;
|
|
575
|
-
}
|
|
576
|
-
.btn-cancel {
|
|
577
|
-
background-color: transparent;
|
|
578
|
-
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
579
|
-
color: var(--viking-metallic-200);
|
|
580
|
-
}
|
|
581
|
-
.btn-cancel:hover {
|
|
582
|
-
background-color: rgba(255, 255, 255, 0.05);
|
|
583
|
-
color: var(--viking-white);
|
|
584
|
-
}
|
|
585
|
-
.btn-submit {
|
|
586
|
-
background-color: var(--viking-blue-500);
|
|
587
|
-
color: white;
|
|
588
|
-
}
|
|
589
|
-
.btn-submit:hover:not(:disabled) {
|
|
590
|
-
opacity: 1;
|
|
591
|
-
background-color: var(--viking-teal-600);
|
|
592
|
-
}
|
|
593
|
-
.btn-submit:disabled {
|
|
594
|
-
opacity: 0.5;
|
|
595
|
-
cursor: not-allowed;
|
|
596
|
-
}
|
|
597
|
-
.status-msg {
|
|
598
|
-
padding: 12px;
|
|
599
|
-
border-radius: 8px;
|
|
600
|
-
font-size: 14px;
|
|
601
|
-
font-weight: 500;
|
|
602
|
-
margin-top: 12px;
|
|
603
|
-
}
|
|
604
|
-
.status-msg.success {
|
|
605
|
-
background-color: rgba(21, 128, 61, 0.2);
|
|
606
|
-
border: 1px solid rgba(21, 128, 61, 0.3);
|
|
607
|
-
color: var(--viking-green-500);
|
|
608
|
-
}
|
|
609
|
-
.status-msg.error {
|
|
610
|
-
background-color: rgba(185, 28, 28, 0.2);
|
|
611
|
-
border: 1px solid rgba(185, 28, 28, 0.3);
|
|
612
|
-
color: var(--viking-crimson-400);
|
|
613
|
-
}
|
|
614
|
-
.status-msg.warning {
|
|
615
|
-
background-color: rgba(180, 83, 9, 0.2);
|
|
616
|
-
border: 1px solid rgba(180, 83, 9, 0.3);
|
|
617
|
-
color: var(--viking-gold-500);
|
|
618
|
-
}
|
|
619
|
-
.honeypot-field {
|
|
620
|
-
position: absolute !important;
|
|
621
|
-
left: -9999px !important;
|
|
622
|
-
top: -9999px !important;
|
|
623
|
-
opacity: 0 !important;
|
|
624
|
-
pointer-events: none !important;
|
|
625
|
-
}
|
|
626
|
-
.security-banner {
|
|
627
|
-
display: flex;
|
|
628
|
-
gap: 8px;
|
|
629
|
-
background-color: var(--viking-white-pure)beb;
|
|
630
|
-
border: 1px solid color-mix(in srgb, var(--viking-gold-500) 55%, transparent);
|
|
631
|
-
color: var(--viking-crimson-700);
|
|
632
|
-
padding: 16px;
|
|
633
|
-
border-radius: 8px;
|
|
634
|
-
font-size: 16px;
|
|
635
|
-
line-height: 1.4;
|
|
636
|
-
margin-bottom: 8px;
|
|
637
|
-
}
|
|
638
|
-
.security-banner svg {
|
|
639
|
-
flex-shrink: 0;
|
|
640
|
-
margin-top: 0px;
|
|
641
|
-
color: var(--viking-gold-500);
|
|
642
|
-
}
|
|
643
|
-
</style>
|
|
349
|
+
<link rel="stylesheet" href="${scriptOrigin}/assets/viking-ui.css" />
|
|
644
350
|
<div class="widget-container">
|
|
645
351
|
<a class="widget-link" href="${statusPageUrl(frontendHost, pageId)}" target="_blank">
|
|
646
352
|
<span class="status-dot"></span>
|