@ni/nimble-components 35.5.4 → 35.5.6
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/dist/all-components-bundle.js +229 -32
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +3485 -3383
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +204 -186
- package/dist/custom-elements.md +32 -32
- package/dist/esm/anchor-step/index.d.ts +4 -0
- package/dist/esm/anchor-step/index.js +9 -0
- package/dist/esm/anchor-step/index.js.map +1 -1
- package/dist/esm/anchor-step/template.js +3 -1
- package/dist/esm/anchor-step/template.js.map +1 -1
- package/dist/esm/patterns/step/styles.js +40 -16
- package/dist/esm/patterns/step/styles.js.map +1 -1
- package/dist/esm/patterns/step/testing/step-base.pageobject.d.ts +1 -0
- package/dist/esm/patterns/step/testing/step-base.pageobject.js +3 -0
- package/dist/esm/patterns/step/testing/step-base.pageobject.js.map +1 -1
- package/dist/esm/patterns/step/types.d.ts +5 -0
- package/dist/esm/patterns/step/types.js.map +1 -1
- package/dist/esm/step/index.d.ts +4 -0
- package/dist/esm/step/index.js +9 -0
- package/dist/esm/step/index.js.map +1 -1
- package/dist/esm/step/template.js +3 -1
- package/dist/esm/step/template.js.map +1 -1
- package/dist/esm/stepper/index.d.ts +18 -0
- package/dist/esm/stepper/index.js +82 -1
- package/dist/esm/stepper/index.js.map +1 -1
- package/dist/esm/stepper/styles.js +50 -4
- package/dist/esm/stepper/styles.js.map +1 -1
- package/dist/esm/stepper/template.js +37 -5
- package/dist/esm/stepper/template.js.map +1 -1
- package/dist/esm/stepper/testing/stepper.pageobject.d.ts +17 -0
- package/dist/esm/stepper/testing/stepper.pageobject.js +91 -0
- package/dist/esm/stepper/testing/stepper.pageobject.js.map +1 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-step/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAsD,iBAAiB,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAE7H,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-step/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, ViewTemplate, when } from '@ni/fast-element';\nimport { type FoundationElementTemplate, type AnchorOptions, startSlotTemplate, endSlotTemplate } from '@ni/fast-foundation';\nimport type { AnchorStep } from '.';\nimport { severityTextTemplate } from '../patterns/severity/template';\nimport { Severity } from '../patterns/severity/types';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { iconTriangleFilledTag } from '../icons/triangle-filled';\nimport { iconCheckTag } from '../icons/check';\nimport type { StepPattern } from '../patterns/step/types';\nimport { popupIconCurrentLabel, popupIconErrorLabel, popupIconWarningLabel, popupIconCompletedLabel } from '../label-provider/core/label-tokens';\nimport { StepperOrientation } from '../stepper/types';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<AnchorStep>,\nAnchorOptions\n> = (context, definition) => html<AnchorStep>`\n <template slot=\"step\">\n <li class=\"\n container\n ${x => (x.stepInternals.orientation === StepperOrientation.vertical ? 'vertical' : '')}\n ${x => (x.stepInternals.last ? 'last' : '')}\n \">\n <a\n class=\"control\"\n part=\"control\"\n download=\"${x => x.download}\"\n href=${x => (x.disabled ? null : x.href)}\n hreflang=\"${x => x.hreflang}\"\n ping=\"${x => x.ping}\"\n referrerpolicy=\"${x => x.referrerpolicy}\"\n rel=\"${x => x.rel}\"\n target=\"${x => x.target}\"\n type=\"${x => x.type}\"\n tabindex=\"${x => x.tabIndex}\"\n aria-atomic=\"${x => x.ariaAtomic}\"\n aria-busy=\"${x => x.ariaBusy}\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-current=\"${x => x.ariaCurrent}\"\n aria-describedby=\"${x => x.ariaDescribedby}\"\n aria-details=\"${x => x.ariaDetails}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-errormessage=\"${x => x.ariaErrormessage}\"\n aria-expanded=\"${x => x.ariaExpanded}\"\n aria-flowto=\"${x => x.ariaFlowto}\"\n aria-haspopup=\"${x => x.ariaHaspopup}\"\n aria-hidden=\"${x => x.ariaHidden}\"\n aria-invalid=\"${x => x.ariaInvalid}\"\n aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n aria-label=\"${x => x.ariaLabel}\"\n aria-labelledby=\"${x => x.ariaLabelledby}\"\n aria-live=\"${x => x.ariaLive}\"\n aria-owns=\"${x => x.ariaOwns}\"\n aria-relevant=\"${x => x.ariaRelevant}\"\n aria-roledescription=\"${x => x.ariaRoledescription}\"\n @click=\"${(x, c) => x.onClick(c.event)}\"\n ${ref('control')}\n >\n <div class=\"icon-background\"></div>\n <div class=\"icon\">\n <span class=\"current-label\">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>\n <div class=\"step-indicator\"><slot name=\"step-indicator\"><span aria-hidden=\"true\">${x => x.stepInternals.position}</span></slot></div>\n <div class=\"icon-severity\">\n ${when(\n x => x.severity === Severity.error,\n html<StepPattern>`<${iconExclamationMarkTag} role=\"img\" aria-label=\"${x => popupIconErrorLabel.getValueFor(x)}\"></${iconExclamationMarkTag}>`\n )}\n ${when(\n x => x.severity === Severity.warning,\n html<StepPattern>`<${iconTriangleFilledTag} role=\"img\" aria-label=\"${x => popupIconWarningLabel.getValueFor(x)}\"></${iconTriangleFilledTag}>`\n )}\n ${when(\n x => x.severity === Severity.success,\n html<StepPattern>`<${iconCheckTag} role=\"img\" aria-label=\"${x => popupIconCompletedLabel.getValueFor(x)}\"></${iconCheckTag}>`\n )}\n </div>\n </div>\n <div class=\"top-spacer\"></div>\n <div class=\"title\">${startSlotTemplate(context, definition)}<slot name=\"title\"></slot>${endSlotTemplate(context, definition)}</div>\n <div class=\"line\"></div>\n <div class=\"subtitle\"><slot name=\"subtitle\"></slot></div>\n </a>\n ${severityTextTemplate}\n </li>\n </template>\n`;\n"]}
|
|
@@ -163,6 +163,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
163
163
|
:host([selected]) .control {
|
|
164
164
|
--ni-private-step-icon-color: ${borderHoverColor};
|
|
165
165
|
--ni-private-step-icon-border-color: ${borderHoverColor};
|
|
166
|
+
--ni-private-step-icon-border-width: 2px;
|
|
166
167
|
--ni-private-step-icon-background-color: rgb(from ${borderHoverColor} r g b / 30%);
|
|
167
168
|
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-none-size);
|
|
168
169
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
@@ -202,10 +203,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
202
203
|
box-shadow ${smallDelay} ease-in-out;
|
|
203
204
|
}
|
|
204
205
|
|
|
205
|
-
:host([selected]) .icon {
|
|
206
|
-
--ni-private-step-icon-border-width: 2px;
|
|
207
|
-
}
|
|
208
|
-
|
|
209
206
|
.icon::before {
|
|
210
207
|
content: '';
|
|
211
208
|
position: absolute;
|
|
@@ -215,7 +212,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
215
212
|
outline-color: var(--ni-private-step-icon-outline-inset-color);
|
|
216
213
|
outline-style: solid;
|
|
217
214
|
outline-width: 0px;
|
|
218
|
-
outline-offset
|
|
215
|
+
${'' /* outline-offset should always be <=-1 to always render inset */}
|
|
216
|
+
outline-offset: -1px;
|
|
219
217
|
border: none;
|
|
220
218
|
border-radius: 100%;
|
|
221
219
|
color: transparent;
|
|
@@ -293,9 +291,9 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
293
291
|
min-width: ${standardPadding};
|
|
294
292
|
height: 1px;
|
|
295
293
|
min-height: 1px;
|
|
294
|
+
transform: scale(1, 1);
|
|
296
295
|
background: var(--ni-private-step-line-color);
|
|
297
296
|
background-clip: content-box;
|
|
298
|
-
transform: scale(1, 1);
|
|
299
297
|
transition:
|
|
300
298
|
background-color ${smallDelay} ease-in-out,
|
|
301
299
|
transform ${smallDelay} ease-in-out;
|
|
@@ -309,8 +307,8 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
309
307
|
width: 1px;
|
|
310
308
|
min-width: 1px;
|
|
311
309
|
height: 100%;
|
|
312
|
-
padding-top: ${smallPadding};
|
|
313
310
|
min-height: ${standardPadding};
|
|
311
|
+
padding-top: ${smallPadding};
|
|
314
312
|
}
|
|
315
313
|
|
|
316
314
|
.subtitle {
|
|
@@ -339,6 +337,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
339
337
|
@layer hover {
|
|
340
338
|
.control:hover {
|
|
341
339
|
--ni-private-step-icon-border-color: ${borderHoverColor};
|
|
340
|
+
--ni-private-step-icon-border-width: 2px;
|
|
342
341
|
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
|
|
343
342
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
344
343
|
}
|
|
@@ -369,8 +368,12 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
369
368
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
370
369
|
}
|
|
371
370
|
|
|
372
|
-
.control:hover
|
|
373
|
-
--ni-private-step-icon-
|
|
371
|
+
:host([readonly]) .control:hover {
|
|
372
|
+
--ni-private-step-icon-color: revert-layer;
|
|
373
|
+
--ni-private-step-icon-border-color: revert-layer;
|
|
374
|
+
--ni-private-step-icon-border-width: revert-layer;
|
|
375
|
+
--ni-private-step-icon-background-size: revert-layer;
|
|
376
|
+
--ni-private-step-line-color: revert-layer;
|
|
374
377
|
}
|
|
375
378
|
|
|
376
379
|
.control:hover .line {
|
|
@@ -380,11 +383,16 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
380
383
|
.container.vertical .control:hover .line {
|
|
381
384
|
transform: scale(2, 1);
|
|
382
385
|
}
|
|
386
|
+
|
|
387
|
+
:host([readonly]) .container .control:hover .line {
|
|
388
|
+
transform: revert-layer;
|
|
389
|
+
}
|
|
383
390
|
}
|
|
384
391
|
|
|
385
392
|
@layer focusVisible {
|
|
386
393
|
.control${focusVisible} {
|
|
387
394
|
--ni-private-step-icon-border-color: ${borderHoverColor};
|
|
395
|
+
--ni-private-step-icon-border-width: 2px;
|
|
388
396
|
--ni-private-step-icon-outline-inset-color: ${borderHoverColor};
|
|
389
397
|
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-inset-size);
|
|
390
398
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
@@ -420,10 +428,6 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
420
428
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
421
429
|
}
|
|
422
430
|
|
|
423
|
-
.control${focusVisible} .icon {
|
|
424
|
-
--ni-private-step-icon-border-width: 2px;
|
|
425
|
-
}
|
|
426
|
-
|
|
427
431
|
.control${focusVisible} .icon::before {
|
|
428
432
|
outline-width: ${borderWidth};
|
|
429
433
|
${'' /* -1px control to outline edge -2px focus border -1px inset gap */}
|
|
@@ -442,6 +446,7 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
442
446
|
@layer active {
|
|
443
447
|
.control:active {
|
|
444
448
|
--ni-private-step-icon-border-color: ${borderHoverColor};
|
|
449
|
+
--ni-private-step-icon-border-width: 2px;
|
|
445
450
|
--ni-private-step-icon-background-color: ${fillSelectedColor};
|
|
446
451
|
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
|
|
447
452
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
@@ -473,26 +478,45 @@ Defines an interaction area clip-path that leaves out the severity text so it is
|
|
|
473
478
|
--ni-private-step-line-color: ${borderHoverColor};
|
|
474
479
|
}
|
|
475
480
|
|
|
476
|
-
.control:active
|
|
477
|
-
--ni-private-step-icon-
|
|
481
|
+
:host([readonly]) .control:active {
|
|
482
|
+
--ni-private-step-icon-color: revert-layer;
|
|
483
|
+
--ni-private-step-icon-border-color: revert-layer;
|
|
484
|
+
--ni-private-step-icon-border-width: revert-layer;
|
|
485
|
+
--ni-private-step-icon-background-color: revert-layer;
|
|
486
|
+
--ni-private-step-icon-background-size: revert-layer;
|
|
487
|
+
--ni-private-step-line-color: revert-layer;
|
|
478
488
|
}
|
|
479
489
|
|
|
480
490
|
.control:active .icon::before {
|
|
481
491
|
outline-width: 0px;
|
|
482
|
-
outline-offset:
|
|
492
|
+
outline-offset: -1px;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
:host([readonly]) .control:active .icon::before {
|
|
496
|
+
outline-width: revert-layer;
|
|
497
|
+
outline-offset: revert-layer;
|
|
483
498
|
}
|
|
484
499
|
|
|
485
500
|
.control:active .line {
|
|
486
501
|
transform: scale(1, 1);
|
|
487
502
|
}
|
|
503
|
+
|
|
504
|
+
:host([readonly]) .control:active .line {
|
|
505
|
+
transform: revert-layer;
|
|
506
|
+
}
|
|
488
507
|
}
|
|
489
508
|
|
|
490
509
|
@layer disabled {
|
|
510
|
+
:host([readonly]) .control {
|
|
511
|
+
cursor: default;
|
|
512
|
+
}
|
|
513
|
+
|
|
491
514
|
:host([disabled]) .control {
|
|
492
515
|
cursor: default;
|
|
493
516
|
color: ${buttonLabelDisabledFontColor};
|
|
494
517
|
--ni-private-step-icon-color: rgb(from ${buttonLabelFontColor} r g b / 30%);
|
|
495
518
|
--ni-private-step-icon-border-color: transparent;
|
|
519
|
+
--ni-private-step-icon-border-width: 1px;
|
|
496
520
|
--ni-private-step-icon-background-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
497
521
|
--ni-private-step-icon-background-size: var(--ni-private-step-icon-background-full-size);
|
|
498
522
|
--ni-private-step-icon-outline-inset-color: transparent;
|
|
@@ -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-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 :host([selected]) .icon {\n --ni-private-step-icon-border-width: 2px;\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: 0px;\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 background: var(--ni-private-step-line-color);\n background-clip: content-box;\n transform: scale(1, 1);\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 padding-top: ${smallPadding};\n min-height: ${standardPadding};\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-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 .control:hover .icon {\n --ni-private-step-icon-border-width: 2px;\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\n @layer focusVisible {\n .control${focusVisible} {\n --ni-private-step-icon-border-color: ${borderHoverColor};\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 {\n --ni-private-step-icon-border-width: 2px;\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-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 .control:active .icon {\n --ni-private-step-icon-border-width: 2px;\n }\n\n .control:active .icon::before {\n outline-width: 0px;\n outline-offset: 0px;\n }\n\n .control:active .line {\n transform: scale(1, 1);\n }\n }\n\n @layer disabled {\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-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: ${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 +1 @@
|
|
|
1
|
-
{"version":3,"file":"step-base.pageobject.js","sourceRoot":"","sources":["../../../../../src/patterns/step/testing/step-base.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAGvE;;GAEG;AACH,MAAM,OAAgB,kBAAkB;IACpC,YACuB,OAAU;QAAV,YAAO,GAAP,OAAO,CAAG;IAC9B,CAAC;IAEG,uBAAuB;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,YAAY,cAAc,CAAC,EAAE,SAAS,CAAC;QAC9G,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;QACxD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,qBAAqB;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,sBAAsB,cAAc,CAAC,EAAE,SAAS,CAAC;QACxH,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;QACtD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,uBAAuB;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,qBAAqB,cAAc,CAAC,EAAE,SAAS,CAAC;QACvH,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;QACxD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,qBAAqB;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;QACpF,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;QACtD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;CACJ","sourcesContent":["import { iconCheckTag } from '../../../icons/check';\nimport { iconExclamationMarkTag } from '../../../icons/exclamation-mark';\nimport { iconTriangleFilledTag } from '../../../icons/triangle-filled';\nimport type { StepPattern } from '../types';\n\n/**\n * Page object base for step and anchor step\n */\nexport abstract class StepBasePageObject<T extends StepPattern = StepPattern> {\n public constructor(\n protected readonly element: T,\n ) {}\n\n public getSuccessSeverityLabel(): string {\n const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconCheckTag}[aria-label]`)?.ariaLabel;\n if (typeof label !== 'string') {\n throw new Error('Success severity label not found');\n }\n return label;\n }\n\n public getErrorSeverityLabel(): string {\n const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconExclamationMarkTag}[aria-label]`)?.ariaLabel;\n if (typeof label !== 'string') {\n throw new Error('Error severity label not found');\n }\n return label;\n }\n\n public getWarningSeverityLabel(): string {\n const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconTriangleFilledTag}[aria-label]`)?.ariaLabel;\n if (typeof label !== 'string') {\n throw new Error('Warning severity label not found');\n }\n return label;\n }\n\n public getSelectedStateLabel(): string {\n const label = this.element.shadowRoot?.querySelector('.current-label')?.textContent;\n if (typeof label !== 'string') {\n throw new Error('Selected state label not found');\n }\n return label;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"step-base.pageobject.js","sourceRoot":"","sources":["../../../../../src/patterns/step/testing/step-base.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,sBAAsB,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,qBAAqB,EAAE,MAAM,gCAAgC,CAAC;AAGvE;;GAEG;AACH,MAAM,OAAgB,kBAAkB;IACpC,YACuB,OAAU;QAAV,YAAO,GAAP,OAAO,CAAG;IAC9B,CAAC;IAEG,uBAAuB;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,YAAY,cAAc,CAAC,EAAE,SAAS,CAAC;QAC9G,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;QACxD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,qBAAqB;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,sBAAsB,cAAc,CAAC,EAAE,SAAS,CAAC;QACxH,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;QACtD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,uBAAuB;QAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,kBAAkB,qBAAqB,cAAc,CAAC,EAAE,SAAS,CAAC;QACvH,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,kCAAkC,CAAC,CAAC;QACxD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,qBAAqB;QACxB,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE,aAAa,CAAC,gBAAgB,CAAC,EAAE,WAAW,CAAC;QACpF,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC5B,MAAM,IAAI,KAAK,CAAC,gCAAgC,CAAC,CAAC;QACtD,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IAEM,KAAK;QACR,IAAI,CAAC,OAAO,CAAC,OAAQ,CAAC,KAAK,EAAE,CAAC;IAClC,CAAC;CACJ","sourcesContent":["import { iconCheckTag } from '../../../icons/check';\nimport { iconExclamationMarkTag } from '../../../icons/exclamation-mark';\nimport { iconTriangleFilledTag } from '../../../icons/triangle-filled';\nimport type { StepPattern } from '../types';\n\n/**\n * Page object base for step and anchor step\n */\nexport abstract class StepBasePageObject<T extends StepPattern = StepPattern> {\n public constructor(\n protected readonly element: T,\n ) {}\n\n public getSuccessSeverityLabel(): string {\n const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconCheckTag}[aria-label]`)?.ariaLabel;\n if (typeof label !== 'string') {\n throw new Error('Success severity label not found');\n }\n return label;\n }\n\n public getErrorSeverityLabel(): string {\n const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconExclamationMarkTag}[aria-label]`)?.ariaLabel;\n if (typeof label !== 'string') {\n throw new Error('Error severity label not found');\n }\n return label;\n }\n\n public getWarningSeverityLabel(): string {\n const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconTriangleFilledTag}[aria-label]`)?.ariaLabel;\n if (typeof label !== 'string') {\n throw new Error('Warning severity label not found');\n }\n return label;\n }\n\n public getSelectedStateLabel(): string {\n const label = this.element.shadowRoot?.querySelector('.current-label')?.textContent;\n if (typeof label !== 'string') {\n throw new Error('Selected state label not found');\n }\n return label;\n }\n\n public click(): void {\n this.element.control!.click();\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/step/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { SeverityPattern } from '../severity/types';\nimport type { StepInternals } from './models/step-internals';\n\nexport interface StepPattern extends SeverityPattern, HTMLElement {\n /**\n * Whether or not the step is disabled.\n */\n disabled: boolean;\n\n /**\n * Whether or not the step is readOnly.\n */\n readOnly: boolean;\n\n /**\n * Whether or not the step is selected.\n */\n selected: boolean;\n\n /**\n * Internal step state set by the stepper\n * @internal\n */\n stepInternals: StepInternals;\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/patterns/step/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { SeverityPattern } from '../severity/types';\nimport type { StepInternals } from './models/step-internals';\n\nexport interface StepPattern extends SeverityPattern, HTMLElement {\n /**\n * Whether or not the step is disabled.\n */\n disabled: boolean;\n\n /**\n * Whether or not the step is readOnly.\n */\n readOnly: boolean;\n\n /**\n * Whether or not the step is selected.\n */\n selected: boolean;\n\n /**\n * Internal step state set by the stepper\n * @internal\n */\n stepInternals: StepInternals;\n\n /**\n * Primary control for interactions\n * @internal\n */\n control?: HTMLElement;\n}\n"]}
|
package/dist/esm/step/index.d.ts
CHANGED
|
@@ -49,6 +49,10 @@ export declare class Step extends Step_base implements StepPattern {
|
|
|
49
49
|
* @internal
|
|
50
50
|
*/
|
|
51
51
|
readonly stepInternals: StepInternals;
|
|
52
|
+
/**
|
|
53
|
+
* @internal
|
|
54
|
+
*/
|
|
55
|
+
onClick(e: Event): void;
|
|
52
56
|
}
|
|
53
57
|
export declare const stepTag = "nimble-step";
|
|
54
58
|
export {};
|
package/dist/esm/step/index.js
CHANGED
|
@@ -35,6 +35,15 @@ export class Step extends mixinSeverityPattern(FoundationButton) {
|
|
|
35
35
|
*/
|
|
36
36
|
this.stepInternals = new StepInternals();
|
|
37
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* @internal
|
|
40
|
+
*/
|
|
41
|
+
onClick(e) {
|
|
42
|
+
if (this.disabled || this.readOnly) {
|
|
43
|
+
e.preventDefault();
|
|
44
|
+
e.stopImmediatePropagation();
|
|
45
|
+
}
|
|
46
|
+
}
|
|
38
47
|
}
|
|
39
48
|
__decorate([
|
|
40
49
|
attr()
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/step/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,YAAY,EACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQvC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,oBAAoB,CAAC,gBAAgB,CAAC;IAAhE;;QACI;;;;WAIG;QAEI,aAAQ,GAAiB,YAAY,CAAC,OAAO,CAAC;QAErD;;;;WAIG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAExB;;;;WAIG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAUxB;;WAEG;QACa,kBAAa,GAAG,IAAI,aAAa,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/step/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,MAAM,IAAI,gBAAgB,EAE1B,YAAY,EACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAClE,OAAO,EAAE,aAAa,EAAE,MAAM,wCAAwC,CAAC;AACvE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQvC;;GAEG;AACH,MAAM,OAAO,IAAK,SAAQ,oBAAoB,CAAC,gBAAgB,CAAC;IAAhE;;QACI;;;;WAIG;QAEI,aAAQ,GAAiB,YAAY,CAAC,OAAO,CAAC;QAErD;;;;WAIG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAExB;;;;WAIG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAUxB;;WAEG;QACa,kBAAa,GAAG,IAAI,aAAa,EAAE,CAAC;IAWxD,CAAC;IATG;;OAEG;IACI,OAAO,CAAC,CAAQ;QACnB,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACjC,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,wBAAwB,EAAE,CAAC;QACjC,CAAC;IACL,CAAC;CACJ;AAxCU;IADN,IAAI,EAAE;sCAC8C;AAQ9C;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACzB;AAQjB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;sCACF;AAQR;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;sCAClC;AAkBtC,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAgB;IAC3C,QAAQ,EAAE,MAAM;IAChB,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;AACvE,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC","sourcesContent":["import {\n Button as FoundationButton,\n type ButtonOptions,\n DesignSystem\n} from '@ni/fast-foundation';\nimport { attr, nullableNumberConverter } from '@ni/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport type { StepPattern } from '../patterns/step/types';\nimport { mixinSeverityPattern } from '../patterns/severity/types';\nimport { StepInternals } from '../patterns/step/models/step-internals';\nimport { StepSeverity } from './types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-step': Step;\n }\n}\n\n/**\n * A nimble-styled step for a stepper\n */\nexport class Step extends mixinSeverityPattern(FoundationButton) implements StepPattern {\n /**\n * @public\n * @remarks\n * HTML Attribute: disabled\n */\n @attr()\n public severity: StepSeverity = StepSeverity.default;\n\n /**\n * @public\n * @remarks\n * HTML Attribute: readonly\n */\n @attr({ attribute: 'readonly', mode: 'boolean' })\n public readOnly = false;\n\n /**\n * @public\n * @remarks\n * HTML Attribute: selected\n */\n @attr({ mode: 'boolean' })\n public selected = false;\n\n /**\n * @public\n * @remarks\n * HTML Attribute: tabindex\n */\n @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n public override tabIndex!: number;\n\n /**\n * @internal\n */\n public readonly stepInternals = new StepInternals();\n\n /**\n * @internal\n */\n public onClick(e: Event): void {\n if (this.disabled || this.readOnly) {\n e.preventDefault();\n e.stopImmediatePropagation();\n }\n }\n}\n\nconst nimbleStep = Step.compose<ButtonOptions>({\n baseName: 'step',\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStep());\nexport const stepTag = 'nimble-step';\n"]}
|
|
@@ -6,11 +6,12 @@ import { iconExclamationMarkTag } from '../icons/exclamation-mark';
|
|
|
6
6
|
import { iconTriangleFilledTag } from '../icons/triangle-filled';
|
|
7
7
|
import { Severity } from '../patterns/severity/types';
|
|
8
8
|
import { popupIconCompletedLabel, popupIconCurrentLabel, popupIconErrorLabel, popupIconWarningLabel } from '../label-provider/core/label-tokens';
|
|
9
|
+
import { StepperOrientation } from '../stepper/types';
|
|
9
10
|
export const template = (context, definition) => html `
|
|
10
11
|
<template slot="step">
|
|
11
12
|
<li class="
|
|
12
13
|
container
|
|
13
|
-
${x => (x.stepInternals.orientation ===
|
|
14
|
+
${x => (x.stepInternals.orientation === StepperOrientation.vertical ? 'vertical' : '')}
|
|
14
15
|
${x => (x.stepInternals.last ? 'last' : '')}
|
|
15
16
|
">
|
|
16
17
|
<button
|
|
@@ -49,6 +50,7 @@ export const template = (context, definition) => html `
|
|
|
49
50
|
aria-pressed="${x => x.ariaPressed}"
|
|
50
51
|
aria-relevant="${x => x.ariaRelevant}"
|
|
51
52
|
aria-roledescription="${x => x.ariaRoledescription}"
|
|
53
|
+
@click="${(x, c) => x.onClick(c.event)}"
|
|
52
54
|
${ref('control')}
|
|
53
55
|
>
|
|
54
56
|
<div class="icon-background"></div>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/step/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAsD,MAAM,qBAAqB,CAAC;AAE7H,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/step/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, ViewTemplate, when } from '@ni/fast-element';\nimport { endSlotTemplate, startSlotTemplate, type ButtonOptions, type FoundationElementTemplate } from '@ni/fast-foundation';\nimport type { Step } from '.';\nimport { severityTextTemplate } from '../patterns/severity/template';\nimport { iconCheckTag } from '../icons/check';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { iconTriangleFilledTag } from '../icons/triangle-filled';\nimport { Severity } from '../patterns/severity/types';\nimport { popupIconCompletedLabel, popupIconCurrentLabel, popupIconErrorLabel, popupIconWarningLabel } from '../label-provider/core/label-tokens';\nimport type { StepPattern } from '../patterns/step/types';\nimport { StepperOrientation } from '../stepper/types';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<Step>,\nButtonOptions\n> = (context, definition) => html`\n <template slot=\"step\">\n <li class=\"\n container\n ${x => (x.stepInternals.orientation === StepperOrientation.vertical ? 'vertical' : '')}\n ${x => (x.stepInternals.last ? 'last' : '')}\n \">\n <button\n class=\"control\"\n part=\"control\"\n ?autofocus=\"${x => x.autofocus}\"\n ?disabled=\"${x => x.disabled}\"\n form=\"${x => x.formId}\"\n formaction=\"${x => x.formaction}\"\n formenctype=\"${x => x.formenctype}\"\n formmethod=\"${x => x.formmethod}\"\n formnovalidate=\"${x => x.formnovalidate}\"\n formtarget=\"${x => x.formtarget}\"\n name=\"${x => x.name}\"\n type=\"${x => x.type}\"\n value=\"${x => x.value}\"\n tabindex=\"${x => x.tabIndex}\"\n aria-atomic=\"${x => x.ariaAtomic}\"\n aria-busy=\"${x => x.ariaBusy}\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-current=\"${x => x.ariaCurrent}\"\n aria-describedby=\"${x => x.ariaDescribedby}\"\n aria-details=\"${x => x.ariaDetails}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-errormessage=\"${x => x.ariaErrormessage}\"\n aria-expanded=\"${x => x.ariaExpanded}\"\n aria-flowto=\"${x => x.ariaFlowto}\"\n aria-haspopup=\"${x => x.ariaHaspopup}\"\n aria-hidden=\"${x => x.ariaHidden}\"\n aria-invalid=\"${x => x.ariaInvalid}\"\n aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n aria-label=\"${x => x.ariaLabel}\"\n aria-labelledby=\"${x => x.ariaLabelledby}\"\n aria-live=\"${x => x.ariaLive}\"\n aria-owns=\"${x => x.ariaOwns}\"\n aria-pressed=\"${x => x.ariaPressed}\"\n aria-relevant=\"${x => x.ariaRelevant}\"\n aria-roledescription=\"${x => x.ariaRoledescription}\"\n @click=\"${(x, c) => x.onClick(c.event)}\"\n ${ref('control')}\n >\n <div class=\"icon-background\"></div>\n <div class=\"icon\">\n <span class=\"current-label\">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>\n <div class=\"step-indicator\"><slot name=\"step-indicator\"><span aria-hidden=\"true\">${x => x.stepInternals.position}</span></slot></div>\n <div class=\"icon-severity\">\n ${when(\n x => x.severity === Severity.error,\n html<StepPattern>`<${iconExclamationMarkTag} role=\"img\" aria-label=\"${x => popupIconErrorLabel.getValueFor(x)}\"></${iconExclamationMarkTag}>`\n )}\n ${when(\n x => x.severity === Severity.warning,\n html<StepPattern>`<${iconTriangleFilledTag} role=\"img\" aria-label=\"${x => popupIconWarningLabel.getValueFor(x)}\"></${iconTriangleFilledTag}>`\n )}\n ${when(\n x => x.severity === Severity.success,\n html<StepPattern>`<${iconCheckTag} role=\"img\" aria-label=\"${x => popupIconCompletedLabel.getValueFor(x)}\"></${iconCheckTag}>`\n )}\n </div>\n </div>\n <div class=\"top-spacer\"></div>\n <div class=\"title\">${startSlotTemplate(context, definition)}<slot name=\"title\"></slot>${endSlotTemplate(context, definition)}</div>\n <div class=\"line\"></div>\n <div class=\"subtitle\"><slot name=\"subtitle\"></slot></div>\n </button>\n ${severityTextTemplate}\n </li>\n </template>\n`;\n"]}
|
|
@@ -12,9 +12,27 @@ declare global {
|
|
|
12
12
|
export declare class Stepper extends FoundationElement {
|
|
13
13
|
orientation: StepperOrientation;
|
|
14
14
|
/** @internal */
|
|
15
|
+
showScrollButtons: boolean;
|
|
16
|
+
/** @internal */
|
|
15
17
|
steps?: (StepPattern)[];
|
|
18
|
+
/** @internal */
|
|
19
|
+
list: HTMLElement;
|
|
20
|
+
/** @internal */
|
|
21
|
+
readonly startScrollButton?: HTMLElement;
|
|
22
|
+
private listIntersectionObserver?;
|
|
23
|
+
/** @internal */
|
|
24
|
+
onScrollStartClick(): void;
|
|
25
|
+
/** @internal */
|
|
26
|
+
onScrollEndClick(): void;
|
|
27
|
+
/** @internal */
|
|
28
|
+
connectedCallback(): void;
|
|
29
|
+
/** @internal */
|
|
30
|
+
disconnectedCallback(): void;
|
|
31
|
+
/** @internal */
|
|
32
|
+
isHorizontal(): boolean;
|
|
16
33
|
private orientationChanged;
|
|
17
34
|
private stepsChanged;
|
|
18
35
|
private updateStepInternals;
|
|
36
|
+
private handleListOverflow;
|
|
19
37
|
}
|
|
20
38
|
export declare const stepperTag = "nimble-stepper";
|
|
@@ -11,12 +11,70 @@ export class Stepper extends FoundationElement {
|
|
|
11
11
|
constructor() {
|
|
12
12
|
super(...arguments);
|
|
13
13
|
this.orientation = StepperOrientation.horizontal;
|
|
14
|
+
/** @internal */
|
|
15
|
+
this.showScrollButtons = false;
|
|
16
|
+
}
|
|
17
|
+
/** @internal */
|
|
18
|
+
onScrollStartClick() {
|
|
19
|
+
if (this.isHorizontal()) {
|
|
20
|
+
this.list.scrollBy({
|
|
21
|
+
left: -this.list.clientWidth,
|
|
22
|
+
behavior: 'smooth'
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
else {
|
|
26
|
+
this.list.scrollBy({
|
|
27
|
+
top: -this.list.clientHeight,
|
|
28
|
+
behavior: 'smooth'
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
/** @internal */
|
|
33
|
+
onScrollEndClick() {
|
|
34
|
+
if (this.isHorizontal()) {
|
|
35
|
+
this.list.scrollBy({
|
|
36
|
+
left: this.list.clientWidth,
|
|
37
|
+
behavior: 'smooth'
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
else {
|
|
41
|
+
this.list.scrollBy({
|
|
42
|
+
top: this.list.clientHeight,
|
|
43
|
+
behavior: 'smooth'
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
/** @internal */
|
|
48
|
+
connectedCallback() {
|
|
49
|
+
super.connectedCallback();
|
|
50
|
+
// Steps fill parent container so can't rely on a resize observer to track their space usage.
|
|
51
|
+
// Instead directly track each step's occlusion with intersection observer which is more compute intensive.
|
|
52
|
+
// When available can switch to container scroll state queries, see: https://github.com/ni/nimble/issues/2922
|
|
53
|
+
this.listIntersectionObserver = new IntersectionObserver(_ => {
|
|
54
|
+
this.handleListOverflow();
|
|
55
|
+
}, {
|
|
56
|
+
root: this.list,
|
|
57
|
+
threshold: 1.0
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
/** @internal */
|
|
61
|
+
disconnectedCallback() {
|
|
62
|
+
super.disconnectedCallback();
|
|
63
|
+
this.listIntersectionObserver?.disconnect();
|
|
64
|
+
}
|
|
65
|
+
/** @internal */
|
|
66
|
+
isHorizontal() {
|
|
67
|
+
return this.orientation !== StepperOrientation.vertical;
|
|
14
68
|
}
|
|
15
69
|
orientationChanged() {
|
|
16
70
|
this.updateStepInternals();
|
|
17
71
|
}
|
|
18
72
|
stepsChanged() {
|
|
19
73
|
this.updateStepInternals();
|
|
74
|
+
this.listIntersectionObserver?.disconnect();
|
|
75
|
+
if (this.steps) {
|
|
76
|
+
this.steps.forEach(step => this.listIntersectionObserver?.observe(step));
|
|
77
|
+
}
|
|
20
78
|
}
|
|
21
79
|
updateStepInternals() {
|
|
22
80
|
if (!this.steps) {
|
|
@@ -24,15 +82,38 @@ export class Stepper extends FoundationElement {
|
|
|
24
82
|
}
|
|
25
83
|
const lastIndex = this.steps.length - 1;
|
|
26
84
|
this.steps.forEach((step, index) => {
|
|
27
|
-
step.stepInternals.orientation = this.
|
|
85
|
+
step.stepInternals.orientation = this.isHorizontal()
|
|
86
|
+
? StepperOrientation.horizontal
|
|
87
|
+
: StepperOrientation.vertical;
|
|
28
88
|
step.stepInternals.last = index === lastIndex;
|
|
29
89
|
step.stepInternals.position = index + 1;
|
|
30
90
|
});
|
|
31
91
|
}
|
|
92
|
+
handleListOverflow() {
|
|
93
|
+
let listVisibleSize = this.isHorizontal()
|
|
94
|
+
? this.list.clientWidth
|
|
95
|
+
: this.list.clientHeight;
|
|
96
|
+
if (listVisibleSize !== undefined) {
|
|
97
|
+
const buttonSize = this.isHorizontal()
|
|
98
|
+
? this.startScrollButton?.clientWidth ?? 0
|
|
99
|
+
: this.startScrollButton?.clientHeight ?? 0;
|
|
100
|
+
listVisibleSize = Math.ceil(listVisibleSize);
|
|
101
|
+
if (this.showScrollButtons) {
|
|
102
|
+
listVisibleSize += buttonSize * 2;
|
|
103
|
+
}
|
|
104
|
+
const listScrollSize = this.isHorizontal()
|
|
105
|
+
? this.list.scrollWidth
|
|
106
|
+
: this.list.scrollHeight;
|
|
107
|
+
this.showScrollButtons = listVisibleSize < listScrollSize;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
32
110
|
}
|
|
33
111
|
__decorate([
|
|
34
112
|
attr
|
|
35
113
|
], Stepper.prototype, "orientation", void 0);
|
|
114
|
+
__decorate([
|
|
115
|
+
observable
|
|
116
|
+
], Stepper.prototype, "showScrollButtons", void 0);
|
|
36
117
|
__decorate([
|
|
37
118
|
observable
|
|
38
119
|
], Stepper.prototype, "steps", void 0);
|