@ni/nimble-components 35.12.0 → 35.12.2

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.
Files changed (9) hide show
  1. package/dist/all-components-bundle.js +5355 -2995
  2. package/dist/all-components-bundle.js.map +1 -1
  3. package/dist/all-components-bundle.min.js +3507 -3075
  4. package/dist/all-components-bundle.min.js.map +1 -1
  5. package/dist/esm/patterns/step/styles.js +150 -16
  6. package/dist/esm/patterns/step/styles.js.map +1 -1
  7. package/dist/esm/rich-text/editor/models/create-tiptap-editor.js +16 -2
  8. package/dist/esm/rich-text/editor/models/create-tiptap-editor.js.map +1 -1
  9. package/package.json +13 -13
package/dist/esm/patterns/step/styles.js CHANGED
@@ -137,18 +137,18 @@ Defines an interaction area clip-path that leaves out the severity text so it is
137
137
  }
138
138
 
139
139
  :host([severity="error"]) .control {
140
- --ni-private-step-icon-color: ${failColor};
140
+ --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
141
141
  --ni-private-step-icon-border-color: ${failColor};
142
- --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
143
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
142
+ --ni-private-step-icon-background-color: ${failColor};
143
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
144
144
  --ni-private-step-line-color: ${failColor};
145
145
  }
146
146
 
147
147
  :host([severity="warning"]) .control {
148
- --ni-private-step-icon-color: ${warningColor};
148
+ --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
149
149
  --ni-private-step-icon-border-color: ${warningColor};
150
- --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
151
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
150
+ --ni-private-step-icon-background-color: ${warningColor};
151
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
152
152
  --ni-private-step-line-color: ${warningColor};
153
153
  }
154
154
 
@@ -169,6 +169,27 @@ Defines an interaction area clip-path that leaves out the severity text so it is
169
169
  --ni-private-step-line-color: ${borderHoverColor};
170
170
  }
171
171
 
172
+ :host([selected][severity="error"]) .control {
173
+ --ni-private-step-icon-color: ${failColor};
174
+ --ni-private-step-icon-border-color: ${failColor};
175
+ --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
176
+ --ni-private-step-line-color: ${failColor};
177
+ }
178
+
179
+ :host([selected][severity="warning"]) .control {
180
+ --ni-private-step-icon-color: ${warningColor};
181
+ --ni-private-step-icon-border-color: ${warningColor};
182
+ --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
183
+ --ni-private-step-line-color: ${warningColor};
184
+ }
185
+
186
+ :host([selected][severity="success"]) .control {
187
+ --ni-private-step-icon-color: ${passColor};
188
+ --ni-private-step-icon-border-color: ${passColor};
189
+ --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
190
+ --ni-private-step-line-color: ${passColor};
191
+ }
192
+
172
193
  .icon-background {
173
194
  grid-area: icon;
174
195
  display: inline-block;
@@ -237,7 +258,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
237
258
  display: none;
238
259
  }
239
260
 
240
- :host([selected]) .step-indicator,
241
261
  :host([disabled]) .step-indicator {
242
262
  display: contents;
243
263
  }
@@ -252,7 +272,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
252
272
  display: contents;
253
273
  }
254
274
 
255
- :host([selected]) .icon-severity,
256
275
  :host([disabled]) .icon-severity {
257
276
  display: none;
258
277
  }
@@ -343,14 +362,16 @@ Defines an interaction area clip-path that leaves out the severity text so it is
343
362
  }
344
363
 
345
364
  :host([severity="error"]) .control:hover {
365
+ --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
346
366
  --ni-private-step-icon-border-color: ${failColor};
347
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
367
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
348
368
  --ni-private-step-line-color: ${failColor};
349
369
  }
350
370
 
351
371
  :host([severity="warning"]) .control:hover {
372
+ --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
352
373
  --ni-private-step-icon-border-color: ${warningColor};
353
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
374
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
354
375
  --ni-private-step-line-color: ${warningColor};
355
376
  }
356
377
 
@@ -362,12 +383,37 @@ Defines an interaction area clip-path that leaves out the severity text so it is
362
383
  }
363
384
 
364
385
  :host([selected]) .control:hover {
365
- --ni-private-step-icon-color: ${buttonLabelFontColor};
386
+ --ni-private-step-icon-color: ${borderHoverColor};
366
387
  --ni-private-step-icon-border-color: ${borderHoverColor};
367
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
388
+ --ni-private-step-icon-border-width: 3px;
389
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
368
390
  --ni-private-step-line-color: ${borderHoverColor};
369
391
  }
370
392
 
393
+ :host([selected][severity="error"]) .control:hover {
394
+ --ni-private-step-icon-color: ${failColor};
395
+ --ni-private-step-icon-border-color: ${failColor};
396
+ --ni-private-step-icon-border-width: 3px;
397
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
398
+ --ni-private-step-line-color: ${failColor};
399
+ }
400
+
401
+ :host([selected][severity="warning"]) .control:hover {
402
+ --ni-private-step-icon-color: ${warningColor};
403
+ --ni-private-step-icon-border-color: ${warningColor};
404
+ --ni-private-step-icon-border-width: 3px;
405
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
406
+ --ni-private-step-line-color: ${warningColor};
407
+ }
408
+
409
+ :host([selected][severity="success"]) .control:hover {
410
+ --ni-private-step-icon-color: ${passColor};
411
+ --ni-private-step-icon-border-color: ${passColor};
412
+ --ni-private-step-icon-border-width: 3px;
413
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
414
+ --ni-private-step-line-color: ${passColor};
415
+ }
416
+
371
417
  :host([readonly]) .control:hover {
372
418
  --ni-private-step-icon-color: revert-layer;
373
419
  --ni-private-step-icon-border-color: revert-layer;
@@ -376,6 +422,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
376
422
  --ni-private-step-line-color: revert-layer;
377
423
  }
378
424
 
425
+ :host([selected][readonly]) .control:hover {
426
+ --ni-private-step-icon-color: revert-layer;
427
+ --ni-private-step-icon-border-color: revert-layer;
428
+ --ni-private-step-icon-border-width: revert-layer;
429
+ --ni-private-step-icon-background-size: revert-layer;
430
+ --ni-private-step-line-color: revert-layer;
431
+ }
432
+
379
433
  .control:hover .line {
380
434
  transform: scale(1, 2);
381
435
  }
@@ -399,16 +453,18 @@ Defines an interaction area clip-path that leaves out the severity text so it is
399
453
  }
400
454
 
401
455
  :host([severity="error"]) .control${focusVisible} {
456
+ --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
402
457
  --ni-private-step-icon-border-color: ${failColor};
403
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
404
- --ni-private-step-icon-outline-inset-color: ${failColor};
458
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
459
+ --ni-private-step-icon-outline-inset-color: transparent;
405
460
  --ni-private-step-line-color: ${failColor};
406
461
  }
407
462
 
408
463
  :host([severity="warning"]) .control${focusVisible} {
464
+ --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);
409
465
  --ni-private-step-icon-border-color: ${warningColor};
410
- --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
411
- --ni-private-step-icon-outline-inset-color: ${warningColor};
466
+ --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
467
+ --ni-private-step-icon-outline-inset-color: transparent;
412
468
  --ni-private-step-line-color: ${warningColor};
413
469
  }
414
470
 
@@ -428,6 +484,27 @@ Defines an interaction area clip-path that leaves out the severity text so it is
428
484
  --ni-private-step-line-color: ${borderHoverColor};
429
485
  }
430
486
 
487
+ :host([selected][severity="error"]) .control${focusVisible} {
488
+ --ni-private-step-icon-color: ${failColor};
489
+ --ni-private-step-icon-border-color: ${failColor};
490
+ --ni-private-step-icon-outline-inset-color: ${failColor};
491
+ --ni-private-step-line-color: ${failColor};
492
+ }
493
+
494
+ :host([selected][severity="warning"]) .control${focusVisible} {
495
+ --ni-private-step-icon-color: ${warningColor};
496
+ --ni-private-step-icon-border-color: ${warningColor};
497
+ --ni-private-step-icon-outline-inset-color: ${warningColor};
498
+ --ni-private-step-line-color: ${warningColor};
499
+ }
500
+
501
+ :host([selected][severity="success"]) .control${focusVisible} {
502
+ --ni-private-step-icon-color: ${passColor};
503
+ --ni-private-step-icon-border-color: ${passColor};
504
+ --ni-private-step-icon-outline-inset-color: ${passColor};
505
+ --ni-private-step-line-color: ${passColor};
506
+ }
507
+
431
508
  .control${focusVisible} .icon::before {
432
509
  outline-width: ${borderWidth};
433
510
  ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}
@@ -453,12 +530,14 @@ Defines an interaction area clip-path that leaves out the severity text so it is
453
530
  }
454
531
 
455
532
  :host([severity="error"]) .control:active {
533
+ --ni-private-step-icon-color: ${failColor};
456
534
  --ni-private-step-icon-border-color: ${failColor};
457
535
  --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
458
536
  --ni-private-step-line-color: ${failColor};
459
537
  }
460
538
 
461
539
  :host([severity="warning"]) .control:active {
540
+ --ni-private-step-icon-color: ${warningColor};
462
541
  --ni-private-step-icon-border-color: ${warningColor};
463
542
  --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
464
543
  --ni-private-step-line-color: ${warningColor};
@@ -478,6 +557,27 @@ Defines an interaction area clip-path that leaves out the severity text so it is
478
557
  --ni-private-step-line-color: ${borderHoverColor};
479
558
  }
480
559
 
560
+ :host([selected][severity="error"]) .control:active {
561
+ --ni-private-step-icon-color: ${failColor};
562
+ --ni-private-step-icon-border-color: ${failColor};
563
+ --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
564
+ --ni-private-step-line-color: ${failColor};
565
+ }
566
+
567
+ :host([selected][severity="warning"]) .control:active {
568
+ --ni-private-step-icon-color: ${warningColor};
569
+ --ni-private-step-icon-border-color: ${warningColor};
570
+ --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
571
+ --ni-private-step-line-color: ${warningColor};
572
+ }
573
+
574
+ :host([selected][severity="success"]) .control:active {
575
+ --ni-private-step-icon-color: ${buttonLabelFontColor};
576
+ --ni-private-step-icon-border-color: ${passColor};
577
+ --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
578
+ --ni-private-step-line-color: ${passColor};
579
+ }
580
+
481
581
  :host([readonly]) .control:active {
482
582
  --ni-private-step-icon-color: revert-layer;
483
583
  --ni-private-step-icon-border-color: revert-layer;
@@ -487,6 +587,15 @@ Defines an interaction area clip-path that leaves out the severity text so it is
487
587
  --ni-private-step-line-color: revert-layer;
488
588
  }
489
589
 
590
+ :host([selected][readonly]) .control:active {
591
+ --ni-private-step-icon-color: revert-layer;
592
+ --ni-private-step-icon-border-color: revert-layer;
593
+ --ni-private-step-icon-border-width: revert-layer;
594
+ --ni-private-step-icon-background-color: revert-layer;
595
+ --ni-private-step-icon-background-size: revert-layer;
596
+ --ni-private-step-line-color: revert-layer;
597
+ }
598
+
490
599
  .control:active .icon::before {
491
600
  outline-width: 0px;
492
601
  outline-offset: -1px;
@@ -553,9 +662,34 @@ Defines an interaction area clip-path that leaves out the severity text so it is
553
662
  --ni-private-step-icon-inverse-color: ${Black15};
554
663
  }
555
664
 
665
+ :host([severity="error"]) .control {
666
+ --ni-private-step-icon-border-color:: rgb(from ${failColor} r g b / 30%);
667
+ --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);
668
+ }
669
+
670
+ :host([severity="warning"]) .control {
671
+ --ni-private-step-icon-border-color:: rgb(from ${warningColor} r g b / 30%);
672
+ --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);
673
+ }
674
+
556
675
  :host([severity="success"]) .control {
676
+ --ni-private-step-icon-border-color:: rgb(from ${passColor} r g b / 30%);
557
677
  --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);
558
678
  }
559
679
  }
680
+
681
+ @layer focusVisible {
682
+ :host([severity="error"]) .control${focusVisible} {
683
+ --ni-private-step-icon-outline-inset-color: ${failColor};
684
+ }
685
+
686
+ :host([severity="warning"]) .control${focusVisible} {
687
+ --ni-private-step-icon-outline-inset-color: ${warningColor};
688
+ }
689
+
690
+ :host([severity="success"]) .control${focusVisible} {
691
+ --ni-private-step-icon-outline-inset-color: ${passColor};
692
+ }
693
+ }
560
694
  `));
561
695
  //# sourceMappingURL=styles.js.map
package/dist/esm/patterns/step/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/step/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport { Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n buttonLabelFont,\n buttonLabelFontColor,\n smallPadding,\n bodyFont,\n errorTextFont,\n controlSlimHeight,\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n smallDelay,\n fillSelectedColor,\n passColor,\n failColor,\n warningColor,\n buttonLabelDisabledFontColor,\n iconColor,\n standardPadding,\n controlHeight,\n errorTextFontLineHeight,\n} from '../../theme-provider/design-tokens';\nimport { styles as severityStyles } from '../severity/styles';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { userSelectNone } from '../../utilities/style/user-select';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { Theme } from '../../theme-provider/types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-flex')}\n ${severityStyles}\n :host {\n color: ${buttonLabelFontColor};\n font: ${buttonLabelFont};\n white-space: nowrap;\n outline: none;\n border: none;\n }\n\n ${'' /* Container wrapper for severity text to position against */}\n .container {\n display: inline-flex;\n width: 100%;\n height: 100%;\n position: relative;\n list-style: none;\n --ni-private-step-content-height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight});\n --ni-private-step-content-offset: calc(${controlHeight} + ${smallPadding});\n }\n\n .control {\n display: inline-grid;\n height: 100%;\n width: 100%;\n grid-template-areas:\n \"icon top-spacer top-spacer\"\n \"icon title line\"\n \"icon subtitle subtitle\";\n grid-template-columns:\n ${controlHeight} ${'' /* Icon width */}\n min-content ${'' /* Show the full title and subtitle */}\n 1fr; ${'' /* Line is only fr unit so fills remaining space */}\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n min-content;\n column-gap: 4px;\n\n align-items: start;\n margin: 0;\n padding: 0;\n color: inherit;\n background-color: transparent;\n cursor: pointer;\n outline: none;\n --ni-private-step-icon-background-full-size: scale(1,1);\n ${'' /* (32px - 2 * (2px focus border + 1px inset gap)) / 32px = .8125 */}\n --ni-private-step-icon-background-inset-size: scale(0.8125, 0.8125);\n --ni-private-step-icon-background-none-size: scale(0,0);\n\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: transparent;\n --ni-private-step-icon-border-width: 1px;\n --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .container.last .control {\n grid-template-areas:\n \"icon top-spacer\"\n \"icon title\"\n \"icon subtitle\";\n grid-template-columns:\n ${controlHeight}\n min-content;\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n min-content;\n }\n\n .container.vertical .control {\n ${''/*\n Defines an interaction area clip-path that leaves out the severity text so it is easily selectable:\n 1----------------2\n | title |\n | subtitle |\n | 4-------------3\n | | severity-text\n | |\n 6--5\n */}\n clip-path: polygon(\n 0% 0%,\n 100% 0%,\n 100% var(--ni-private-step-content-height),\n var(--ni-private-step-content-offset) var(--ni-private-step-content-height),\n var(--ni-private-step-content-offset) 100%,\n 0% 100%\n );\n grid-template-areas:\n \"icon top-spacer\"\n \"icon title\"\n \"icon subtitle\"\n \"line subtitle\"\n \"line .\";\n grid-template-columns:\n ${controlHeight}\n min-content;\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n calc(${controlHeight} - ${smallPadding} - ${controlSlimHeight})\n min-content\n 1fr;\n }\n\n .container.vertical.last .control {\n grid-template-areas:\n \"icon top-spacer\"\n \"icon title\"\n \"icon subtitle\";\n grid-template-columns:\n ${controlHeight}\n min-content;\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n min-content;\n }\n\n :host([severity=\"error\"]) .control {\n --ni-private-step-icon-color: ${failColor};\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control {\n --ni-private-step-icon-color: ${warningColor};\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-color: ${passColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([selected]) .control {\n --ni-private-step-icon-color: ${borderHoverColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n .icon-background {\n grid-area: icon;\n display: inline-block;\n height: ${controlHeight};\n width: ${controlHeight};\n ${userSelectNone};\n background-color: var(--ni-private-step-icon-background-color);\n transform: var(--ni-private-step-icon-background-size);\n border: none;\n border-radius: 100%;\n transition:\n transform ${smallDelay} ease-in-out;\n }\n\n .icon {\n grid-area: icon;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n height: ${controlHeight};\n width: ${controlHeight};\n ${userSelectNone};\n font: ${buttonLabelFont};\n color: var(--ni-private-step-icon-color);\n ${iconColor.cssCustomProperty}: var(--ni-private-step-icon-color);\n border: none;\n border-radius: 100%;\n box-shadow: inset 0px 0px 0px var(--ni-private-step-icon-border-width) var(--ni-private-step-icon-border-color);\n position: relative;\n transition:\n box-shadow ${smallDelay} ease-in-out;\n }\n\n .icon::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n outline-color: var(--ni-private-step-icon-outline-inset-color);\n outline-style: solid;\n outline-width: 0px;\n ${'' /* outline-offset should always be <=-1 to always render inset */}\n outline-offset: -1px;\n border: none;\n border-radius: 100%;\n color: transparent;\n transition:\n outline-color ${smallDelay} ease-in-out,\n outline-width ${smallDelay} ease-in-out,\n outline-offset ${smallDelay} ease-in-out;\n }\n\n .current-label {\n ${accessiblyHidden}\n }\n\n .step-indicator {\n display: contents;\n }\n\n :host([severity=\"error\"]) .step-indicator,\n :host([severity=\"warning\"]) .step-indicator,\n :host([severity=\"success\"]) .step-indicator {\n display: none;\n }\n\n :host([selected]) .step-indicator,\n :host([disabled]) .step-indicator {\n display: contents;\n }\n\n .icon-severity {\n display: none;\n }\n\n :host([severity=\"error\"]) .icon-severity,\n :host([severity=\"warning\"]) .icon-severity,\n :host([severity=\"success\"]) .icon-severity {\n display: contents;\n }\n\n :host([selected]) .icon-severity,\n :host([disabled]) .icon-severity {\n display: none;\n }\n\n .top-spacer {\n grid-area: top-spacer;\n height: ${smallPadding};\n }\n\n .title {\n grid-area: title;\n min-width: min-content;\n height: ${controlSlimHeight};\n display: inline-block;\n align-content: center;\n font: ${bodyFont};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n [part='start'] {\n display: none;\n }\n\n [part='end'] {\n display: none;\n }\n\n .line {\n grid-area: line;\n align-self: center;\n justify-self: center;\n display: inline-block;\n width: 100%;\n min-width: ${standardPadding};\n height: 1px;\n min-height: 1px;\n transform: scale(1, 1);\n background: var(--ni-private-step-line-color);\n background-clip: content-box;\n transition:\n background-color ${smallDelay} ease-in-out,\n transform ${smallDelay} ease-in-out;\n }\n\n .container.last .line {\n display: none;\n }\n\n .container.vertical .line {\n width: 1px;\n min-width: 1px;\n height: 100%;\n min-height: ${standardPadding};\n padding-top: ${smallPadding};\n }\n\n .subtitle {\n grid-area: subtitle;\n display: inline-block;\n min-width: min-content;\n height: ${errorTextFontLineHeight};\n align-content: center;\n font: ${errorTextFont};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .severity-text {\n left: 0px;\n top: var(--ni-private-step-content-height);\n }\n\n .container.vertical .severity-text {\n width: calc(100% - var(--ni-private-step-content-offset));\n left: var(--ni-private-step-content-offset);\n }\n }\n\n @layer hover {\n .control:hover {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([severity=\"error\"]) .control:hover {\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control:hover {\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control:hover {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([selected]) .control:hover {\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([readonly]) .control:hover {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n .control:hover .line {\n transform: scale(1, 2);\n }\n\n .container.vertical .control:hover .line {\n transform: scale(2, 1);\n }\n\n :host([readonly]) .container .control:hover .line {\n transform: revert-layer;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-outline-inset-color: ${borderHoverColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([severity=\"error\"]) .control${focusVisible} {\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-icon-outline-inset-color: ${failColor};\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control${focusVisible} {\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-icon-outline-inset-color: ${warningColor};\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control${focusVisible} {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([selected]) .control${focusVisible} {\n --ni-private-step-icon-color: ${borderHoverColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-icon-outline-inset-color: ${borderHoverColor};\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n .control${focusVisible} .icon::before {\n outline-width: ${borderWidth};\n ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}\n outline-offset: -4px;\n }\n\n .control${focusVisible} .line {\n transform: scale(1, 2);\n }\n\n .container.vertical .control${focusVisible} .line {\n transform: scale(2, 1);\n }\n }\n\n @layer active {\n .control:active {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-background-color: ${fillSelectedColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([severity=\"error\"]) .control:active {\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control:active {\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control:active {\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([selected]) .control:active {\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([readonly]) .control:active {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-color: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n .control:active .icon::before {\n outline-width: 0px;\n outline-offset: -1px;\n }\n\n :host([readonly]) .control:active .icon::before {\n outline-width: revert-layer;\n outline-offset: revert-layer;\n }\n\n .control:active .line {\n transform: scale(1, 1);\n }\n\n :host([readonly]) .control:active .line {\n transform: revert-layer;\n }\n }\n\n @layer disabled {\n :host([readonly]) .control {\n cursor: default;\n }\n\n :host([disabled]) .control {\n cursor: default;\n color: ${buttonLabelDisabledFontColor};\n --ni-private-step-icon-color: rgb(from ${buttonLabelFontColor} r g b / 30%);\n --ni-private-step-icon-border-color: transparent;\n --ni-private-step-icon-border-width: 1px;\n --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled]) .line {\n transform: scale(1, 1);\n }\n }\n\n @layer top {\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n @layer base {\n .control {\n --ni-private-step-icon-inverse-color: ${White};\n }\n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n @layer base {\n .control {\n --ni-private-step-icon-inverse-color: ${Black91};\n }\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n @layer base {\n .control {\n --ni-private-step-icon-inverse-color: ${Black15};\n }\n\n :host([severity=\"success\"]) .control {\n --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n }\n }\n `\n )\n);\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/step/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport { Black15, Black91, White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n buttonLabelFont,\n buttonLabelFontColor,\n smallPadding,\n bodyFont,\n errorTextFont,\n controlSlimHeight,\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n smallDelay,\n fillSelectedColor,\n passColor,\n failColor,\n warningColor,\n buttonLabelDisabledFontColor,\n iconColor,\n standardPadding,\n controlHeight,\n errorTextFontLineHeight,\n} from '../../theme-provider/design-tokens';\nimport { styles as severityStyles } from '../severity/styles';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { userSelectNone } from '../../utilities/style/user-select';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { Theme } from '../../theme-provider/types';\nimport { accessiblyHidden } from '../../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-flex')}\n ${severityStyles}\n :host {\n color: ${buttonLabelFontColor};\n font: ${buttonLabelFont};\n white-space: nowrap;\n outline: none;\n border: none;\n }\n\n ${'' /* Container wrapper for severity text to position against */}\n .container {\n display: inline-flex;\n width: 100%;\n height: 100%;\n position: relative;\n list-style: none;\n --ni-private-step-content-height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight});\n --ni-private-step-content-offset: calc(${controlHeight} + ${smallPadding});\n }\n\n .control {\n display: inline-grid;\n height: 100%;\n width: 100%;\n grid-template-areas:\n \"icon top-spacer top-spacer\"\n \"icon title line\"\n \"icon subtitle subtitle\";\n grid-template-columns:\n ${controlHeight} ${'' /* Icon width */}\n min-content ${'' /* Show the full title and subtitle */}\n 1fr; ${'' /* Line is only fr unit so fills remaining space */}\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n min-content;\n column-gap: 4px;\n\n align-items: start;\n margin: 0;\n padding: 0;\n color: inherit;\n background-color: transparent;\n cursor: pointer;\n outline: none;\n --ni-private-step-icon-background-full-size: scale(1,1);\n ${'' /* (32px - 2 * (2px focus border + 1px inset gap)) / 32px = .8125 */}\n --ni-private-step-icon-background-inset-size: scale(0.8125, 0.8125);\n --ni-private-step-icon-background-none-size: scale(0,0);\n\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: transparent;\n --ni-private-step-icon-border-width: 1px;\n --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .container.last .control {\n grid-template-areas:\n \"icon top-spacer\"\n \"icon title\"\n \"icon subtitle\";\n grid-template-columns:\n ${controlHeight}\n min-content;\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n min-content;\n }\n\n .container.vertical .control {\n ${''/*\n Defines an interaction area clip-path that leaves out the severity text so it is easily selectable:\n 1----------------2\n | title |\n | subtitle |\n | 4-------------3\n | | severity-text\n | |\n 6--5\n */}\n clip-path: polygon(\n 0% 0%,\n 100% 0%,\n 100% var(--ni-private-step-content-height),\n var(--ni-private-step-content-offset) var(--ni-private-step-content-height),\n var(--ni-private-step-content-offset) 100%,\n 0% 100%\n );\n grid-template-areas:\n \"icon top-spacer\"\n \"icon title\"\n \"icon subtitle\"\n \"line subtitle\"\n \"line .\";\n grid-template-columns:\n ${controlHeight}\n min-content;\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n calc(${controlHeight} - ${smallPadding} - ${controlSlimHeight})\n min-content\n 1fr;\n }\n\n .container.vertical.last .control {\n grid-template-areas:\n \"icon top-spacer\"\n \"icon title\"\n \"icon subtitle\";\n grid-template-columns:\n ${controlHeight}\n min-content;\n grid-template-rows:\n ${smallPadding}\n ${controlSlimHeight}\n min-content;\n }\n\n :host([severity=\"error\"]) .control {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-color: ${failColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-color: ${warningColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-color: ${passColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([selected]) .control {\n --ni-private-step-icon-color: ${borderHoverColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([selected][severity=\"error\"]) .control {\n --ni-private-step-icon-color: ${failColor};\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([selected][severity=\"warning\"]) .control {\n --ni-private-step-icon-color: ${warningColor};\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([selected][severity=\"success\"]) .control {\n --ni-private-step-icon-color: ${passColor};\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n --ni-private-step-line-color: ${passColor};\n }\n\n .icon-background {\n grid-area: icon;\n display: inline-block;\n height: ${controlHeight};\n width: ${controlHeight};\n ${userSelectNone};\n background-color: var(--ni-private-step-icon-background-color);\n transform: var(--ni-private-step-icon-background-size);\n border: none;\n border-radius: 100%;\n transition:\n transform ${smallDelay} ease-in-out;\n }\n\n .icon {\n grid-area: icon;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n height: ${controlHeight};\n width: ${controlHeight};\n ${userSelectNone};\n font: ${buttonLabelFont};\n color: var(--ni-private-step-icon-color);\n ${iconColor.cssCustomProperty}: var(--ni-private-step-icon-color);\n border: none;\n border-radius: 100%;\n box-shadow: inset 0px 0px 0px var(--ni-private-step-icon-border-width) var(--ni-private-step-icon-border-color);\n position: relative;\n transition:\n box-shadow ${smallDelay} ease-in-out;\n }\n\n .icon::before {\n content: '';\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n outline-color: var(--ni-private-step-icon-outline-inset-color);\n outline-style: solid;\n outline-width: 0px;\n ${'' /* outline-offset should always be <=-1 to always render inset */}\n outline-offset: -1px;\n border: none;\n border-radius: 100%;\n color: transparent;\n transition:\n outline-color ${smallDelay} ease-in-out,\n outline-width ${smallDelay} ease-in-out,\n outline-offset ${smallDelay} ease-in-out;\n }\n\n .current-label {\n ${accessiblyHidden}\n }\n\n .step-indicator {\n display: contents;\n }\n\n :host([severity=\"error\"]) .step-indicator,\n :host([severity=\"warning\"]) .step-indicator,\n :host([severity=\"success\"]) .step-indicator {\n display: none;\n }\n\n :host([disabled]) .step-indicator {\n display: contents;\n }\n\n .icon-severity {\n display: none;\n }\n\n :host([severity=\"error\"]) .icon-severity,\n :host([severity=\"warning\"]) .icon-severity,\n :host([severity=\"success\"]) .icon-severity {\n display: contents;\n }\n\n :host([disabled]) .icon-severity {\n display: none;\n }\n\n .top-spacer {\n grid-area: top-spacer;\n height: ${smallPadding};\n }\n\n .title {\n grid-area: title;\n min-width: min-content;\n height: ${controlSlimHeight};\n display: inline-block;\n align-content: center;\n font: ${bodyFont};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n [part='start'] {\n display: none;\n }\n\n [part='end'] {\n display: none;\n }\n\n .line {\n grid-area: line;\n align-self: center;\n justify-self: center;\n display: inline-block;\n width: 100%;\n min-width: ${standardPadding};\n height: 1px;\n min-height: 1px;\n transform: scale(1, 1);\n background: var(--ni-private-step-line-color);\n background-clip: content-box;\n transition:\n background-color ${smallDelay} ease-in-out,\n transform ${smallDelay} ease-in-out;\n }\n\n .container.last .line {\n display: none;\n }\n\n .container.vertical .line {\n width: 1px;\n min-width: 1px;\n height: 100%;\n min-height: ${standardPadding};\n padding-top: ${smallPadding};\n }\n\n .subtitle {\n grid-area: subtitle;\n display: inline-block;\n min-width: min-content;\n height: ${errorTextFontLineHeight};\n align-content: center;\n font: ${errorTextFont};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .severity-text {\n left: 0px;\n top: var(--ni-private-step-content-height);\n }\n\n .container.vertical .severity-text {\n width: calc(100% - var(--ni-private-step-content-offset));\n left: var(--ni-private-step-content-offset);\n }\n }\n\n @layer hover {\n .control:hover {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([severity=\"error\"]) .control:hover {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control:hover {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control:hover {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([selected]) .control:hover {\n --ni-private-step-icon-color: ${borderHoverColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 3px;\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([selected][severity=\"error\"]) .control:hover {\n --ni-private-step-icon-color: ${failColor};\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-border-width: 3px;\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([selected][severity=\"warning\"]) .control:hover {\n --ni-private-step-icon-color: ${warningColor};\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-border-width: 3px;\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([selected][severity=\"success\"]) .control:hover {\n --ni-private-step-icon-color: ${passColor};\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-border-width: 3px;\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([readonly]) .control:hover {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n :host([selected][readonly]) .control:hover {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n .control:hover .line {\n transform: scale(1, 2);\n }\n\n .container.vertical .control:hover .line {\n transform: scale(2, 1);\n }\n\n :host([readonly]) .container .control:hover .line {\n transform: revert-layer;\n }\n }\n\n @layer focusVisible {\n .control${focusVisible} {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-outline-inset-color: ${borderHoverColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([severity=\"error\"]) .control${focusVisible} {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control${focusVisible} {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control${focusVisible} {\n --ni-private-step-icon-color: var(--ni-private-step-icon-inverse-color);\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([selected]) .control${focusVisible} {\n --ni-private-step-icon-color: ${borderHoverColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);\n --ni-private-step-icon-outline-inset-color: ${borderHoverColor};\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([selected][severity=\"error\"]) .control${focusVisible} {\n --ni-private-step-icon-color: ${failColor};\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-outline-inset-color: ${failColor};\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([selected][severity=\"warning\"]) .control${focusVisible} {\n --ni-private-step-icon-color: ${warningColor};\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-outline-inset-color: ${warningColor};\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([selected][severity=\"success\"]) .control${focusVisible} {\n --ni-private-step-icon-color: ${passColor};\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-outline-inset-color: ${passColor};\n --ni-private-step-line-color: ${passColor};\n }\n\n .control${focusVisible} .icon::before {\n outline-width: ${borderWidth};\n ${'' /* -1px control to outline edge -2px focus border -1px inset gap */}\n outline-offset: -4px;\n }\n\n .control${focusVisible} .line {\n transform: scale(1, 2);\n }\n\n .container.vertical .control${focusVisible} .line {\n transform: scale(2, 1);\n }\n }\n\n @layer active {\n .control:active {\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-border-width: 2px;\n --ni-private-step-icon-background-color: ${fillSelectedColor};\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([severity=\"error\"]) .control:active {\n --ni-private-step-icon-color: ${failColor};\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control:active {\n --ni-private-step-icon-color: ${warningColor};\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control:active {\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([selected]) .control:active {\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: ${borderHoverColor};\n --ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);\n --ni-private-step-line-color: ${borderHoverColor};\n }\n\n :host([selected][severity=\"error\"]) .control:active {\n --ni-private-step-icon-color: ${failColor};\n --ni-private-step-icon-border-color: ${failColor};\n --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n --ni-private-step-line-color: ${failColor};\n }\n\n :host([selected][severity=\"warning\"]) .control:active {\n --ni-private-step-icon-color: ${warningColor};\n --ni-private-step-icon-border-color: ${warningColor};\n --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n --ni-private-step-line-color: ${warningColor};\n }\n\n :host([selected][severity=\"success\"]) .control:active {\n --ni-private-step-icon-color: ${buttonLabelFontColor};\n --ni-private-step-icon-border-color: ${passColor};\n --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n --ni-private-step-line-color: ${passColor};\n }\n\n :host([readonly]) .control:active {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-color: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n :host([selected][readonly]) .control:active {\n --ni-private-step-icon-color: revert-layer;\n --ni-private-step-icon-border-color: revert-layer;\n --ni-private-step-icon-border-width: revert-layer;\n --ni-private-step-icon-background-color: revert-layer;\n --ni-private-step-icon-background-size: revert-layer;\n --ni-private-step-line-color: revert-layer;\n }\n\n .control:active .icon::before {\n outline-width: 0px;\n outline-offset: -1px;\n }\n\n :host([readonly]) .control:active .icon::before {\n outline-width: revert-layer;\n outline-offset: revert-layer;\n }\n\n .control:active .line {\n transform: scale(1, 1);\n }\n\n :host([readonly]) .control:active .line {\n transform: revert-layer;\n }\n }\n\n @layer disabled {\n :host([readonly]) .control {\n cursor: default;\n }\n\n :host([disabled]) .control {\n cursor: default;\n color: ${buttonLabelDisabledFontColor};\n --ni-private-step-icon-color: rgb(from ${buttonLabelFontColor} r g b / 30%);\n --ni-private-step-icon-border-color: transparent;\n --ni-private-step-icon-border-width: 1px;\n --ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);\n --ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);\n --ni-private-step-icon-outline-inset-color: transparent;\n --ni-private-step-line-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled]) .line {\n transform: scale(1, 1);\n }\n }\n\n @layer top {\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n @layer base {\n .control {\n --ni-private-step-icon-inverse-color: ${White};\n }\n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n @layer base {\n .control {\n --ni-private-step-icon-inverse-color: ${Black91};\n }\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n @layer base {\n .control {\n --ni-private-step-icon-inverse-color: ${Black15};\n }\n\n :host([severity=\"error\"]) .control {\n --ni-private-step-icon-border-color:: rgb(from ${failColor} r g b / 30%);\n --ni-private-step-icon-background-color: rgb(from ${failColor} r g b / 30%);\n }\n\n :host([severity=\"warning\"]) .control {\n --ni-private-step-icon-border-color:: rgb(from ${warningColor} r g b / 30%);\n --ni-private-step-icon-background-color: rgb(from ${warningColor} r g b / 30%);\n }\n\n :host([severity=\"success\"]) .control {\n --ni-private-step-icon-border-color:: rgb(from ${passColor} r g b / 30%);\n --ni-private-step-icon-background-color: rgb(from ${passColor} r g b / 30%);\n }\n }\n\n @layer focusVisible {\n :host([severity=\"error\"]) .control${focusVisible} {\n --ni-private-step-icon-outline-inset-color: ${failColor};\n }\n\n :host([severity=\"warning\"]) .control${focusVisible} {\n --ni-private-step-icon-outline-inset-color: ${warningColor};\n }\n\n :host([severity=\"success\"]) .control${focusVisible} {\n --ni-private-step-icon-outline-inset-color: ${passColor};\n }\n }\n `\n )\n);\n"]}
package/dist/esm/rich-text/editor/models/create-tiptap-editor.js CHANGED
@@ -188,6 +188,18 @@ function createCustomMentionExtension(config, activeMentionCharacterEmitter, act
188
188
  allowSpaces: true,
189
189
  render: () => {
190
190
  let inSuggestionMode = false;
191
+ // Tracks the query for which a `mention-update` event was last emitted.
192
+ // The tiptap suggestion plugin invokes `onStart`/`onUpdate` multiple times
193
+ // for a single query change (e.g. an initial render plus loading and resolved
194
+ // states of its async item fetch). We only want to emit `mention-update` once
195
+ // per distinct query, so we deduplicate against the last emitted query.
196
+ let lastEmittedQuery;
197
+ const emitMentionUpdateIfQueryChanged = (query) => {
198
+ if (query !== lastEmittedQuery) {
199
+ lastEmittedQuery = query;
200
+ config.mentionUpdateEmitter(query);
201
+ }
202
+ };
191
203
  return {
192
204
  onStart: (props) => {
193
205
  /**
@@ -200,7 +212,7 @@ function createCustomMentionExtension(config, activeMentionCharacterEmitter, act
200
212
  return;
201
213
  }
202
214
  inSuggestionMode = true;
203
- config.mentionUpdateEmitter(props.query);
215
+ emitMentionUpdateIfQueryChanged(props.query);
204
216
  activeMentionCharacterEmitter(props.text.slice(0, 1));
205
217
  activeMentionCommandEmitter(props.command);
206
218
  mentionListbox?.show({
@@ -212,7 +224,7 @@ function createCustomMentionExtension(config, activeMentionCharacterEmitter, act
212
224
  if (!inSuggestionMode) {
213
225
  return;
214
226
  }
215
- config.mentionUpdateEmitter(props.query);
227
+ emitMentionUpdateIfQueryChanged(props.query);
216
228
  activeMentionCommandEmitter(props.command);
217
229
  mentionListbox?.show({
218
230
  filter: props.query,
@@ -229,6 +241,8 @@ function createCustomMentionExtension(config, activeMentionCharacterEmitter, act
229
241
  return (mentionListbox?.keydownHandler(props.event) ?? false);
230
242
  },
231
243
  onExit: () => {
244
+ inSuggestionMode = false;
245
+ lastEmittedQuery = undefined;
232
246
  activeMentionCharacterEmitter('');
233
247
  activeMentionCommandEmitter(undefined);
234
248
  mentionListbox?.close();
package/dist/esm/rich-text/editor/models/create-tiptap-editor.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"create-tiptap-editor.js","sourceRoot":"","sources":["../../../../../src/rich-text/editor/models/create-tiptap-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { Editor, Mark, Node, mergeAttributes } from '@tiptap/core';\nimport Bold from '@tiptap/extension-bold';\nimport Document from '@tiptap/extension-document';\nimport HardBreak from '@tiptap/extension-hard-break';\nimport Italic from '@tiptap/extension-italic';\nimport Link from '@tiptap/extension-link';\nimport { BulletList, ListItem, OrderedList } from '@tiptap/extension-list';\nimport Mention from '@tiptap/extension-mention';\nimport Paragraph from '@tiptap/extension-paragraph';\nimport Text from '@tiptap/extension-text';\nimport { Placeholder, UndoRedo } from '@tiptap/extensions';\nimport { Slice, Fragment, Node as FragmentNode } from 'prosemirror-model';\nimport { PluginKey } from 'prosemirror-state';\n\nimport { keyEscape } from '@ni/fast-web-utilities';\nimport {\n type ActiveMentionCommandEmitter,\n type ActiveMentionCharacterEmitter,\n mentionPluginPrefix\n} from '../types';\n\nimport { anchorTag } from '../../../anchor';\nimport type { MentionExtensionConfiguration } from '../../models/mention-extension-configuration';\nimport type { RichTextMentionListbox } from '../../mention-listbox';\n\nconst validAbsoluteLinkRegex = /^https?:\\/\\//i;\n\nexport function createTiptapEditor(\n activeMentionCharacterEmitter: ActiveMentionCharacterEmitter,\n activeMentionCommandEmitter: ActiveMentionCommandEmitter,\n editor: HTMLDivElement,\n mentionExtensionConfig: MentionExtensionConfiguration[],\n mentionListbox?: RichTextMentionListbox,\n placeholder?: string\n): Editor {\n const customLink = createCustomLinkExtension();\n const mentionExtensions = mentionExtensionConfig.map(config => createCustomMentionExtension(\n config,\n activeMentionCharacterEmitter,\n activeMentionCommandEmitter,\n mentionListbox\n ));\n\n /**\n * For more information on the extensions for the supported formatting options, refer to the links below.\n * Tiptap marks: https://tiptap.dev/api/marks\n * Tiptap nodes: https://tiptap.dev/api/nodes\n */\n const tipTapEditor = new Editor({\n element: editor,\n // The editor will detect markdown syntax for an input only for these items\n // https://tiptap.dev/api/editor#enable-input-rules\n enableInputRules: [BulletList, OrderedList],\n // The editor will not detect markdown syntax when pasting content in any supported items\n // Lists do not have any default paste rules, they have only input rules, so disabled paste rules\n // https://tiptap.dev/api/editor#enable-paste-rules\n enablePasteRules: false,\n editorProps: {\n // Validating whether the links in the pasted content belongs to the supported scheme (HTTPS/HTTP),\n // and rendering it as a link in the editor. If not, rendering it as a plain text.\n // Also, updating the link text content with its href as we support only the absolute link.\n\n // `transformPasted` can be updated/removed when hyperlink support added\n // See: https://github.com/ni/nimble/issues/1527\n transformPasted\n },\n extensions: [\n Document,\n Paragraph,\n Text,\n BulletList,\n OrderedList,\n ListItem,\n Bold,\n Italic,\n UndoRedo,\n Placeholder.configure({\n placeholder,\n showOnlyWhenEditable: false\n }),\n HardBreak,\n customLink,\n ...mentionExtensions\n ]\n });\n\n /**\n * @param slice contains the Fragment of the copied content. If the content is a link, the slice contains Text node with Link mark.\n * ProseMirror reference for `transformPasted`: https://prosemirror.net/docs/ref/#view.EditorProps.transformPasted\n */\n function transformPasted(slice: Slice): Slice {\n const modifiedFragment = updateLinkAndMentionNodes(\n tipTapEditor,\n slice.content\n );\n return new Slice(modifiedFragment, slice.openStart, slice.openEnd);\n }\n\n return tipTapEditor;\n}\n\n/**\n * Extending the default link mark schema defined in the TipTap.\n *\n * \"excludes\": https://prosemirror.net/docs/ref/#model.MarkSpec.excludes\n * \"inclusive\": https://prosemirror.net/docs/ref/#model.MarkSpec.inclusive\n * \"parseHTML\": https://tiptap.dev/guide/custom-extensions#parse-html\n * \"renderHTML\": https://tiptap.dev/guide/custom-extensions/#render-html\n */\nfunction createCustomLinkExtension(): Mark {\n return Link.extend({\n // Excludes can be removed/enabled when hyperlink support added\n // See: https://github.com/ni/nimble/issues/1527\n excludes: '_',\n // Inclusive can be updated when hyperlink support added\n // See: https://github.com/ni/nimble/issues/1527\n inclusive: false,\n parseHTML() {\n return [\n // To load the `nimble-anchor` from the HTML parsed content by markdown-parser as links in the Tiptap editor, the `parseHTML`\n // of Link extension should return nimble `anchorTag`.\n // This is because the link mark schema in `markdown-parser.ts` file uses `<nimble-anchor>` as anchor tag and not `<a>`.\n {\n tag: anchorTag\n },\n // `<a>` tag is added here to support when pasting a link from external source.\n {\n tag: 'a'\n }\n ];\n },\n // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap\n renderHTML({\n // eslint-disable-next-line @typescript-eslint/naming-convention\n HTMLAttributes\n }: {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n HTMLAttributes: { [key: string]: string }\n }) {\n // The below 'a' tag should be replaced with 'nimble-anchor' once the below issue is fixed.\n // https://github.com/ni/nimble/issues/1516\n return ['a', HTMLAttributes];\n }\n }).configure({\n // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap\n // eslint-disable-next-line @typescript-eslint/naming-convention\n HTMLAttributes: {\n rel: 'noopener noreferrer',\n target: null,\n // Adding `class` here is a workaround to render two mentions without a whitespace as display names\n // For more details on this behavior, refer to the issue below:\n // https://github.com/ni/nimble/issues/1707\n class: ''\n },\n autolink: true,\n openOnClick: false,\n // linkOnPaste can be enabled when hyperlink support added\n // See: https://github.com/ni/nimble/issues/1527\n linkOnPaste: false,\n shouldAutoLink: href => validAbsoluteLinkRegex.test(href)\n });\n}\n\nfunction createCustomMentionExtension(\n config: MentionExtensionConfiguration,\n activeMentionCharacterEmitter: ActiveMentionCharacterEmitter,\n activeMentionCommandEmitter: ActiveMentionCommandEmitter,\n mentionListbox?: RichTextMentionListbox\n): Node {\n return Mention.extend({\n name: config.name,\n parseHTML() {\n return [\n {\n tag: config.viewElement\n }\n ];\n },\n addAttributes() {\n return {\n href: {\n default: null,\n parseHTML: (element: HTMLElement) => element.getAttribute('mention-href'),\n renderHTML: (attributes: { [key: string]: string }) => {\n return {\n 'mention-href': attributes.href\n };\n }\n },\n label: {\n default: null,\n parseHTML: (element: HTMLElement) => element.getAttribute('mention-label'),\n renderHTML: (attributes: { [key: string]: string }) => {\n return {\n 'mention-label': attributes.label\n };\n }\n },\n disabled: {\n default: null,\n parseHTML: (element: HTMLElement) => element.getAttribute('disabled'),\n renderHTML: (attributes: { [key: string]: string }) => {\n return {\n disabled: attributes.disabled\n };\n }\n }\n };\n },\n renderHTML({\n node,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n HTMLAttributes\n }: {\n node: FragmentNode,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n HTMLAttributes: { [key: string]: string }\n }) {\n return [\n config.viewElement,\n mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n this.options.renderText({\n options: this.options,\n node,\n suggestion: null\n })\n ];\n }\n }).configure({\n suggestion: {\n char: config.character,\n decorationClass: 'nimble-mention-view-edit',\n pluginKey: new PluginKey(config.key),\n allowSpaces: true,\n render: () => {\n let inSuggestionMode = false;\n return {\n onStart: (props): void => {\n /**\n * If the cursor position moves to outside of the mention and configuration element changes,\n * the setMarkdown() will trigger this `onStart` without a decoration node because the cursor\n * position is temporarily moved out of the suggestion decoration. Ignore `onStart` in that case\n * and don't show the mention list box since it doesn't have anything to anchor to.\n */\n if (props.decorationNode === null) {\n return;\n }\n inSuggestionMode = true;\n config.mentionUpdateEmitter(props.query);\n activeMentionCharacterEmitter(props.text.slice(0, 1));\n activeMentionCommandEmitter(props.command);\n mentionListbox?.show({\n filter: props.query,\n anchorNode: props.decorationNode as HTMLElement\n });\n },\n onUpdate: (props): void => {\n if (!inSuggestionMode) {\n return;\n }\n config.mentionUpdateEmitter(props.query);\n activeMentionCommandEmitter(props.command);\n mentionListbox?.show({\n filter: props.query,\n anchorNode: props.decorationNode as HTMLElement\n });\n },\n onKeyDown: (props): boolean => {\n if (!inSuggestionMode) {\n return false;\n }\n if (props.event.key === keyEscape) {\n inSuggestionMode = false;\n }\n return (\n mentionListbox?.keydownHandler(props.event) ?? false\n );\n },\n onExit: (): void => {\n activeMentionCharacterEmitter('');\n activeMentionCommandEmitter(undefined);\n mentionListbox?.close();\n }\n };\n }\n }\n });\n}\n\n/**\n * This method finds the Link mark in the pasted content and update its Text node.\n * If there is no text node, pass the node's fragment recursively and updates only node containing Link mark.\n * If the Text node does not contains Link mark, push the same node to `updatedNodes`.\n *\n * @param fragment Fragment containing the pasted content. [Fragment](https://prosemirror.net/docs/ref/#model.Fragment)\n * @returns modified fragment from the `updatedNode` after updating the valid link text with its href value.\n */\nfunction updateLinkAndMentionNodes(\n tiptapEditor: Editor,\n fragment: Fragment\n): Fragment {\n const updatedNodes: FragmentNode[] = [];\n\n fragment.forEach(node => {\n if (node.isText && node.marks.length > 0) {\n const linkMark = node.marks.find(\n mark => mark.type.name === 'link'\n );\n if (linkMark) {\n // Checks if the link is valid link or not\n // Needing to separately validate the link on paste is a workaround for a tiptap issue\n // See: https://github.com/ni/nimble/issues/1527\n if (\n validAbsoluteLinkRegex.test(linkMark.attrs.href as string)\n ) {\n // The below lines of code is responsible for updating the text content with its href value and creates a new updated text node.\n // This code needs an update when the hyperlink support is added.\n // See: https://github.com/ni/nimble/issues/1527\n updatedNodes.push(\n tiptapEditor.schema.text(\n linkMark.attrs.href as string,\n node.marks\n )\n );\n } else {\n // If it is a invalid link, creates a new Text node with the same text content and without a Link mark.\n updatedNodes.push(\n tiptapEditor.schema.text(\n node.textContent,\n linkMark.removeFromSet(node.marks)\n )\n );\n }\n } else {\n updatedNodes.push(node);\n }\n } else if (node.type.name.startsWith(mentionPluginPrefix)) {\n updatedNodes.push(\n tiptapEditor.schema.text(node.attrs.label as string)\n );\n } else {\n const updatedContent = updateLinkAndMentionNodes(\n tiptapEditor,\n node.content\n );\n updatedNodes.push(node.copy(updatedContent));\n }\n });\n\n return Fragment.fromArray(updatedNodes);\n}\n"]}
1
+ {"version":3,"file":"create-tiptap-editor.js","sourceRoot":"","sources":["../../../../../src/rich-text/editor/models/create-tiptap-editor.ts"],"names":[],"mappings":"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","sourcesContent":["import { Editor, Mark, Node, mergeAttributes } from '@tiptap/core';\nimport Bold from '@tiptap/extension-bold';\nimport Document from '@tiptap/extension-document';\nimport HardBreak from '@tiptap/extension-hard-break';\nimport Italic from '@tiptap/extension-italic';\nimport Link from '@tiptap/extension-link';\nimport { BulletList, ListItem, OrderedList } from '@tiptap/extension-list';\nimport Mention from '@tiptap/extension-mention';\nimport Paragraph from '@tiptap/extension-paragraph';\nimport Text from '@tiptap/extension-text';\nimport { Placeholder, UndoRedo } from '@tiptap/extensions';\nimport { Slice, Fragment, Node as FragmentNode } from 'prosemirror-model';\nimport { PluginKey } from 'prosemirror-state';\n\nimport { keyEscape } from '@ni/fast-web-utilities';\nimport {\n type ActiveMentionCommandEmitter,\n type ActiveMentionCharacterEmitter,\n mentionPluginPrefix\n} from '../types';\n\nimport { anchorTag } from '../../../anchor';\nimport type { MentionExtensionConfiguration } from '../../models/mention-extension-configuration';\nimport type { RichTextMentionListbox } from '../../mention-listbox';\n\nconst validAbsoluteLinkRegex = /^https?:\\/\\//i;\n\nexport function createTiptapEditor(\n activeMentionCharacterEmitter: ActiveMentionCharacterEmitter,\n activeMentionCommandEmitter: ActiveMentionCommandEmitter,\n editor: HTMLDivElement,\n mentionExtensionConfig: MentionExtensionConfiguration[],\n mentionListbox?: RichTextMentionListbox,\n placeholder?: string\n): Editor {\n const customLink = createCustomLinkExtension();\n const mentionExtensions = mentionExtensionConfig.map(config => createCustomMentionExtension(\n config,\n activeMentionCharacterEmitter,\n activeMentionCommandEmitter,\n mentionListbox\n ));\n\n /**\n * For more information on the extensions for the supported formatting options, refer to the links below.\n * Tiptap marks: https://tiptap.dev/api/marks\n * Tiptap nodes: https://tiptap.dev/api/nodes\n */\n const tipTapEditor = new Editor({\n element: editor,\n // The editor will detect markdown syntax for an input only for these items\n // https://tiptap.dev/api/editor#enable-input-rules\n enableInputRules: [BulletList, OrderedList],\n // The editor will not detect markdown syntax when pasting content in any supported items\n // Lists do not have any default paste rules, they have only input rules, so disabled paste rules\n // https://tiptap.dev/api/editor#enable-paste-rules\n enablePasteRules: false,\n editorProps: {\n // Validating whether the links in the pasted content belongs to the supported scheme (HTTPS/HTTP),\n // and rendering it as a link in the editor. If not, rendering it as a plain text.\n // Also, updating the link text content with its href as we support only the absolute link.\n\n // `transformPasted` can be updated/removed when hyperlink support added\n // See: https://github.com/ni/nimble/issues/1527\n transformPasted\n },\n extensions: [\n Document,\n Paragraph,\n Text,\n BulletList,\n OrderedList,\n ListItem,\n Bold,\n Italic,\n UndoRedo,\n Placeholder.configure({\n placeholder,\n showOnlyWhenEditable: false\n }),\n HardBreak,\n customLink,\n ...mentionExtensions\n ]\n });\n\n /**\n * @param slice contains the Fragment of the copied content. If the content is a link, the slice contains Text node with Link mark.\n * ProseMirror reference for `transformPasted`: https://prosemirror.net/docs/ref/#view.EditorProps.transformPasted\n */\n function transformPasted(slice: Slice): Slice {\n const modifiedFragment = updateLinkAndMentionNodes(\n tipTapEditor,\n slice.content\n );\n return new Slice(modifiedFragment, slice.openStart, slice.openEnd);\n }\n\n return tipTapEditor;\n}\n\n/**\n * Extending the default link mark schema defined in the TipTap.\n *\n * \"excludes\": https://prosemirror.net/docs/ref/#model.MarkSpec.excludes\n * \"inclusive\": https://prosemirror.net/docs/ref/#model.MarkSpec.inclusive\n * \"parseHTML\": https://tiptap.dev/guide/custom-extensions#parse-html\n * \"renderHTML\": https://tiptap.dev/guide/custom-extensions/#render-html\n */\nfunction createCustomLinkExtension(): Mark {\n return Link.extend({\n // Excludes can be removed/enabled when hyperlink support added\n // See: https://github.com/ni/nimble/issues/1527\n excludes: '_',\n // Inclusive can be updated when hyperlink support added\n // See: https://github.com/ni/nimble/issues/1527\n inclusive: false,\n parseHTML() {\n return [\n // To load the `nimble-anchor` from the HTML parsed content by markdown-parser as links in the Tiptap editor, the `parseHTML`\n // of Link extension should return nimble `anchorTag`.\n // This is because the link mark schema in `markdown-parser.ts` file uses `<nimble-anchor>` as anchor tag and not `<a>`.\n {\n tag: anchorTag\n },\n // `<a>` tag is added here to support when pasting a link from external source.\n {\n tag: 'a'\n }\n ];\n },\n // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap\n renderHTML({\n // eslint-disable-next-line @typescript-eslint/naming-convention\n HTMLAttributes\n }: {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n HTMLAttributes: { [key: string]: string }\n }) {\n // The below 'a' tag should be replaced with 'nimble-anchor' once the below issue is fixed.\n // https://github.com/ni/nimble/issues/1516\n return ['a', HTMLAttributes];\n }\n }).configure({\n // HTMLAttribute cannot be in camelCase as we want to match it with the name in Tiptap\n // eslint-disable-next-line @typescript-eslint/naming-convention\n HTMLAttributes: {\n rel: 'noopener noreferrer',\n target: null,\n // Adding `class` here is a workaround to render two mentions without a whitespace as display names\n // For more details on this behavior, refer to the issue below:\n // https://github.com/ni/nimble/issues/1707\n class: ''\n },\n autolink: true,\n openOnClick: false,\n // linkOnPaste can be enabled when hyperlink support added\n // See: https://github.com/ni/nimble/issues/1527\n linkOnPaste: false,\n shouldAutoLink: href => validAbsoluteLinkRegex.test(href)\n });\n}\n\nfunction createCustomMentionExtension(\n config: MentionExtensionConfiguration,\n activeMentionCharacterEmitter: ActiveMentionCharacterEmitter,\n activeMentionCommandEmitter: ActiveMentionCommandEmitter,\n mentionListbox?: RichTextMentionListbox\n): Node {\n return Mention.extend({\n name: config.name,\n parseHTML() {\n return [\n {\n tag: config.viewElement\n }\n ];\n },\n addAttributes() {\n return {\n href: {\n default: null,\n parseHTML: (element: HTMLElement) => element.getAttribute('mention-href'),\n renderHTML: (attributes: { [key: string]: string }) => {\n return {\n 'mention-href': attributes.href\n };\n }\n },\n label: {\n default: null,\n parseHTML: (element: HTMLElement) => element.getAttribute('mention-label'),\n renderHTML: (attributes: { [key: string]: string }) => {\n return {\n 'mention-label': attributes.label\n };\n }\n },\n disabled: {\n default: null,\n parseHTML: (element: HTMLElement) => element.getAttribute('disabled'),\n renderHTML: (attributes: { [key: string]: string }) => {\n return {\n disabled: attributes.disabled\n };\n }\n }\n };\n },\n renderHTML({\n node,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n HTMLAttributes\n }: {\n node: FragmentNode,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n HTMLAttributes: { [key: string]: string }\n }) {\n return [\n config.viewElement,\n mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n this.options.renderText({\n options: this.options,\n node,\n suggestion: null\n })\n ];\n }\n }).configure({\n suggestion: {\n char: config.character,\n decorationClass: 'nimble-mention-view-edit',\n pluginKey: new PluginKey(config.key),\n allowSpaces: true,\n render: () => {\n let inSuggestionMode = false;\n // Tracks the query for which a `mention-update` event was last emitted.\n // The tiptap suggestion plugin invokes `onStart`/`onUpdate` multiple times\n // for a single query change (e.g. an initial render plus loading and resolved\n // states of its async item fetch). We only want to emit `mention-update` once\n // per distinct query, so we deduplicate against the last emitted query.\n let lastEmittedQuery: string | undefined;\n const emitMentionUpdateIfQueryChanged = (query: string): void => {\n if (query !== lastEmittedQuery) {\n lastEmittedQuery = query;\n config.mentionUpdateEmitter(query);\n }\n };\n return {\n onStart: (props): void => {\n /**\n * If the cursor position moves to outside of the mention and configuration element changes,\n * the setMarkdown() will trigger this `onStart` without a decoration node because the cursor\n * position is temporarily moved out of the suggestion decoration. Ignore `onStart` in that case\n * and don't show the mention list box since it doesn't have anything to anchor to.\n */\n if (props.decorationNode === null) {\n return;\n }\n inSuggestionMode = true;\n emitMentionUpdateIfQueryChanged(props.query);\n activeMentionCharacterEmitter(props.text.slice(0, 1));\n activeMentionCommandEmitter(props.command);\n mentionListbox?.show({\n filter: props.query,\n anchorNode: props.decorationNode as HTMLElement\n });\n },\n onUpdate: (props): void => {\n if (!inSuggestionMode) {\n return;\n }\n emitMentionUpdateIfQueryChanged(props.query);\n activeMentionCommandEmitter(props.command);\n mentionListbox?.show({\n filter: props.query,\n anchorNode: props.decorationNode as HTMLElement\n });\n },\n onKeyDown: (props): boolean => {\n if (!inSuggestionMode) {\n return false;\n }\n if (props.event.key === keyEscape) {\n inSuggestionMode = false;\n }\n return (\n mentionListbox?.keydownHandler(props.event) ?? false\n );\n },\n onExit: (): void => {\n inSuggestionMode = false;\n lastEmittedQuery = undefined;\n activeMentionCharacterEmitter('');\n activeMentionCommandEmitter(undefined);\n mentionListbox?.close();\n }\n };\n }\n }\n });\n}\n\n/**\n * This method finds the Link mark in the pasted content and update its Text node.\n * If there is no text node, pass the node's fragment recursively and updates only node containing Link mark.\n * If the Text node does not contains Link mark, push the same node to `updatedNodes`.\n *\n * @param fragment Fragment containing the pasted content. [Fragment](https://prosemirror.net/docs/ref/#model.Fragment)\n * @returns modified fragment from the `updatedNode` after updating the valid link text with its href value.\n */\nfunction updateLinkAndMentionNodes(\n tiptapEditor: Editor,\n fragment: Fragment\n): Fragment {\n const updatedNodes: FragmentNode[] = [];\n\n fragment.forEach(node => {\n if (node.isText && node.marks.length > 0) {\n const linkMark = node.marks.find(\n mark => mark.type.name === 'link'\n );\n if (linkMark) {\n // Checks if the link is valid link or not\n // Needing to separately validate the link on paste is a workaround for a tiptap issue\n // See: https://github.com/ni/nimble/issues/1527\n if (\n validAbsoluteLinkRegex.test(linkMark.attrs.href as string)\n ) {\n // The below lines of code is responsible for updating the text content with its href value and creates a new updated text node.\n // This code needs an update when the hyperlink support is added.\n // See: https://github.com/ni/nimble/issues/1527\n updatedNodes.push(\n tiptapEditor.schema.text(\n linkMark.attrs.href as string,\n node.marks\n )\n );\n } else {\n // If it is a invalid link, creates a new Text node with the same text content and without a Link mark.\n updatedNodes.push(\n tiptapEditor.schema.text(\n node.textContent,\n linkMark.removeFromSet(node.marks)\n )\n );\n }\n } else {\n updatedNodes.push(node);\n }\n } else if (node.type.name.startsWith(mentionPluginPrefix)) {\n updatedNodes.push(\n tiptapEditor.schema.text(node.attrs.label as string)\n );\n } else {\n const updatedContent = updateLinkAndMentionNodes(\n tiptapEditor,\n node.content\n );\n updatedNodes.push(node.copy(updatedContent));\n }\n });\n\n return Fragment.fromArray(updatedNodes);\n}\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ni/nimble-components",
3
- "version": "35.12.0",
3
+ "version": "35.12.2",
4
4
  "description": "Styled web components for the NI Nimble Design System",
5
5
  "scripts": {
6
6
  "build": "npm run build:icons && npm run build:workers && npm run build:components && npm run build:scss && npm run build:cem",
@@ -53,18 +53,18 @@
53
53
  "@ni/unit-format": "^1.0.5",
54
54
  "@tanstack/table-core": "^8.19.3",
55
55
  "@tanstack/virtual-core": "^3.14.0",
56
- "@tiptap/core": "^3.22.5",
57
- "@tiptap/extension-bold": "^3.22.5",
58
- "@tiptap/extension-document": "^3.22.5",
59
- "@tiptap/extension-hard-break": "^3.22.5",
60
- "@tiptap/extension-italic": "^3.22.5",
61
- "@tiptap/extension-link": "^3.22.5",
62
- "@tiptap/extension-list": "^3.22.5",
63
- "@tiptap/extension-mention": "^3.22.5",
64
- "@tiptap/extension-paragraph": "^3.22.5",
65
- "@tiptap/extension-text": "^3.22.5",
66
- "@tiptap/extensions": "^3.22.5",
67
- "@tiptap/suggestion": "^3.22.5",
56
+ "@tiptap/core": "^3.27.1",
57
+ "@tiptap/extension-bold": "^3.27.1",
58
+ "@tiptap/extension-document": "^3.27.1",
59
+ "@tiptap/extension-hard-break": "^3.27.1",
60
+ "@tiptap/extension-italic": "^3.27.1",
61
+ "@tiptap/extension-link": "^3.27.1",
62
+ "@tiptap/extension-list": "^3.27.1",
63
+ "@tiptap/extension-mention": "^3.27.1",
64
+ "@tiptap/extension-paragraph": "^3.27.1",
65
+ "@tiptap/extension-text": "^3.27.1",
66
+ "@tiptap/extensions": "^3.27.1",
67
+ "@tiptap/suggestion": "^3.27.1",
68
68
  "@types/d3-array": "^3.0.4",
69
69
  "@types/d3-random": "^3.0.1",
70
70
  "@types/d3-scale": "^4.0.2",