@ni/nimble-components 35.4.0 → 35.5.1
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 +331 -155
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +4004 -3898
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/custom-elements.json +105 -2
- package/dist/custom-elements.md +31 -15
- package/dist/esm/anchor-step/template.js +14 -19
- package/dist/esm/anchor-step/template.js.map +1 -1
- package/dist/esm/anchor-step/testing/anchor-step.pageobject.d.ts +7 -0
- package/dist/esm/anchor-step/testing/anchor-step.pageobject.js +7 -0
- package/dist/esm/anchor-step/testing/anchor-step.pageobject.js.map +1 -0
- package/dist/esm/icons/all-icons.d.ts +1 -0
- package/dist/esm/icons/all-icons.js +1 -0
- package/dist/esm/icons/all-icons.js.map +1 -1
- package/dist/esm/icons/user-helmet-safety/index.d.ts +13 -0
- package/dist/esm/icons/user-helmet-safety/index.js +15 -0
- package/dist/esm/icons/user-helmet-safety/index.js.map +1 -0
- package/dist/esm/label-provider/core/index.d.ts +6 -0
- package/dist/esm/label-provider/core/index.js +9 -1
- package/dist/esm/label-provider/core/index.js.map +1 -1
- package/dist/esm/label-provider/core/label-token-defaults.js +2 -0
- package/dist/esm/label-provider/core/label-token-defaults.js.map +1 -1
- package/dist/esm/label-provider/core/label-tokens.d.ts +2 -0
- package/dist/esm/label-provider/core/label-tokens.js +8 -0
- package/dist/esm/label-provider/core/label-tokens.js.map +1 -1
- package/dist/esm/patterns/severity/styles.js +4 -6
- package/dist/esm/patterns/severity/styles.js.map +1 -1
- package/dist/esm/patterns/severity/template.js +1 -0
- package/dist/esm/patterns/severity/template.js.map +1 -1
- package/dist/esm/patterns/severity/testing/severity-pattern.pageobject.d.ts +1 -0
- package/dist/esm/patterns/severity/testing/severity-pattern.pageobject.js +7 -0
- package/dist/esm/patterns/severity/testing/severity-pattern.pageobject.js.map +1 -1
- package/dist/esm/patterns/step/models/step-internals.d.ts +1 -0
- package/dist/esm/patterns/step/models/step-internals.js +4 -0
- package/dist/esm/patterns/step/models/step-internals.js.map +1 -1
- package/dist/esm/patterns/step/styles.js +154 -46
- package/dist/esm/patterns/step/styles.js.map +1 -1
- package/dist/esm/patterns/step/testing/step-base.pageobject.d.ts +12 -0
- package/dist/esm/patterns/step/testing/step-base.pageobject.js +40 -0
- package/dist/esm/patterns/step/testing/step-base.pageobject.js.map +1 -0
- package/dist/esm/patterns/step/types.d.ts +3 -2
- package/dist/esm/patterns/step/types.js.map +1 -1
- package/dist/esm/step/template.js +14 -19
- package/dist/esm/step/template.js.map +1 -1
- package/dist/esm/step/testing/step.pageobject.d.ts +7 -0
- package/dist/esm/step/testing/step.pageobject.js +7 -0
- package/dist/esm/step/testing/step.pageobject.js.map +1 -0
- package/dist/esm/stepper/index.d.ts +8 -0
- package/dist/esm/stepper/index.js +30 -0
- package/dist/esm/stepper/index.js.map +1 -1
- package/dist/esm/stepper/styles.js +18 -1
- package/dist/esm/stepper/styles.js.map +1 -1
- package/dist/esm/stepper/template.js +6 -5
- package/dist/esm/stepper/template.js.map +1 -1
- package/package.json +2 -2
|
@@ -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 menuMinWidth,\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';\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 ${'' /* Based on text layout: Top padding + title height + subtitle height + bottom padding */}\n height: calc(${smallPadding} + ${controlSlimHeight} + ${errorTextFontLineHeight} + ${smallPadding});\n width: ${menuMinWidth};\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 }\n\n .control { \n display: inline-flex;\n align-items: start;\n justify-content: flex-start;\n height: 100%;\n width: 100%;\n color: inherit;\n background-color: transparent;\n gap: ${smallPadding};\n cursor: pointer;\n outline: none;\n margin: 0; \n padding: 0 ${smallPadding} 0 0;\n --ni-private-step-icon-background-full-size: 100% 100%;\n ${'' /* 6px = (2px icon border + 1px inset) * 2 sides */}\n --ni-private-step-icon-background-inset-size: calc(100% - 6px) calc(100% - 6px);\n --ni-private-step-icon-background-none-size: 0% 0%;\n\n --ni-private-step-icon-color: ${buttonLabelFontColor};\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([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 {\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-style: solid;\n border-radius: 100%;\n border-color: var(--ni-private-step-icon-border-color);\n border-width: 1px;\n background-image: radial-gradient(\n closest-side,\n ${'' /* Workaround to prevent aliasing on radial-gradient boundaries, see:\n https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges\n */}\n var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-resolution)),\n transparent 100%\n );\n background-origin: border-box;\n background-size: var(--ni-private-step-icon-background-size);\n background-repeat: no-repeat;\n background-position: center center;\n position: relative;\n transition:\n border-color ${smallDelay} ease-in-out,\n border-width ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-out;\n }\n\n :host([selected]) .icon {\n 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: 1px solid transparent;\n border-radius: 100%;\n color: transparent;\n background-clip: border-box;\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 .icon-slot {\n display: contents;\n }\n\n :host([severity=\"error\"]) .icon-slot,\n :host([severity=\"warning\"]) .icon-slot,\n :host([severity=\"success\"]) .icon-slot {\n display: none;\n }\n\n :host([selected]) .icon-slot,\n :host([disabled]) .icon-slot {\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 .content {\n display: inline-flex;\n ${'' /* Control width - icon size */}\n width: calc(100% - 32px);\n flex-direction: column;\n padding-top: ${smallPadding};\n padding-bottom: ${smallPadding};\n }\n\n .title-wrapper {\n display: inline-flex;\n height: ${controlSlimHeight};\n flex-direction: row;\n align-items: center;\n justify-content: start;\n gap: ${smallPadding};\n font: ${bodyFont};\n }\n\n [part='start'] {\n display: none;\n }\n\n .title {\n display: inline-block;\n flex: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n ${'' /* Content width - (gap + line min width) */}\n max-width: calc(100% - (${smallPadding} + ${standardPadding}));\n }\n\n [part='end'] {\n display: none;\n }\n \n .line {\n display: inline-block;\n flex: 1;\n min-width: ${standardPadding};\n height: 1px;\n background: var(--ni-private-step-line-color);\n transform: scale(1, 1);\n transition:\n background-color ${smallDelay} ease-in-out,\n transform ${smallDelay} ease-in-out;\n }\n\n .subtitle {\n font: ${errorTextFont};\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n ${'' /* Content width */}\n max-width: 100%;\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 border-width: 2px;\n }\n\n .control:hover .line {\n transform: scale(1, 2);\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 border-width: 2px;\n }\n\n .control${focusVisible} .icon::before {\n outline-width: ${borderWidth};\n outline-offset: -2px;\n }\n\n .control${focusVisible} .line {\n transform: scale(1, 2);\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 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: 100% 100%;\n ${'' /* 6px = (2px icon border + 1px inset) * 2 sides */}\n --ni-private-step-icon-background-inset-size: calc(100% - 6px) calc(100% - 6px);\n --ni-private-step-icon-background-none-size: 0% 0%;\n\n --ni-private-step-icon-color: ${buttonLabelFontColor};\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 .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 {\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-style: solid;\n border-radius: 100%;\n border-color: var(--ni-private-step-icon-border-color);\n border-width: 1px;\n background-image: radial-gradient(\n closest-side,\n ${'' /* Workaround to prevent aliasing on radial-gradient boundaries, see:\n https://frontendmasters.com/blog/obsessing-over-smooth-radial-gradient-disc-edges\n */}\n var(--ni-private-step-icon-background-color) calc(100% - 1px/var(--ni-private-device-pixel-ratio, 1)),\n transparent 100%\n );\n background-origin: border-box;\n background-size: var(--ni-private-step-icon-background-size);\n background-repeat: no-repeat;\n background-position: center center;\n position: relative;\n transition:\n border-color ${smallDelay} ease-in-out,\n border-width ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-out;\n }\n\n :host([selected]) .icon {\n 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: 1px solid transparent;\n border-radius: 100%;\n color: transparent;\n background-clip: border-box;\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 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 border-width: 2px;\n }\n\n .control${focusVisible} .icon::before {\n outline-width: ${borderWidth};\n outline-offset: -2px;\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 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"]}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { StepPattern } from '../types';
|
|
2
|
+
/**
|
|
3
|
+
* Page object base for step and anchor step
|
|
4
|
+
*/
|
|
5
|
+
export declare abstract class StepBasePageObject<T extends StepPattern = StepPattern> {
|
|
6
|
+
protected readonly element: T;
|
|
7
|
+
constructor(element: T);
|
|
8
|
+
getSuccessSeverityLabel(): string;
|
|
9
|
+
getErrorSeverityLabel(): string;
|
|
10
|
+
getWarningSeverityLabel(): string;
|
|
11
|
+
getSelectedStateLabel(): string;
|
|
12
|
+
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { iconCheckTag } from '../../../icons/check';
|
|
2
|
+
import { iconExclamationMarkTag } from '../../../icons/exclamation-mark';
|
|
3
|
+
import { iconTriangleFilledTag } from '../../../icons/triangle-filled';
|
|
4
|
+
/**
|
|
5
|
+
* Page object base for step and anchor step
|
|
6
|
+
*/
|
|
7
|
+
export class StepBasePageObject {
|
|
8
|
+
constructor(element) {
|
|
9
|
+
this.element = element;
|
|
10
|
+
}
|
|
11
|
+
getSuccessSeverityLabel() {
|
|
12
|
+
const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconCheckTag}[aria-label]`)?.ariaLabel;
|
|
13
|
+
if (typeof label !== 'string') {
|
|
14
|
+
throw new Error('Success severity label not found');
|
|
15
|
+
}
|
|
16
|
+
return label;
|
|
17
|
+
}
|
|
18
|
+
getErrorSeverityLabel() {
|
|
19
|
+
const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconExclamationMarkTag}[aria-label]`)?.ariaLabel;
|
|
20
|
+
if (typeof label !== 'string') {
|
|
21
|
+
throw new Error('Error severity label not found');
|
|
22
|
+
}
|
|
23
|
+
return label;
|
|
24
|
+
}
|
|
25
|
+
getWarningSeverityLabel() {
|
|
26
|
+
const label = this.element.shadowRoot?.querySelector(`.icon-severity ${iconTriangleFilledTag}[aria-label]`)?.ariaLabel;
|
|
27
|
+
if (typeof label !== 'string') {
|
|
28
|
+
throw new Error('Warning severity label not found');
|
|
29
|
+
}
|
|
30
|
+
return label;
|
|
31
|
+
}
|
|
32
|
+
getSelectedStateLabel() {
|
|
33
|
+
const label = this.element.shadowRoot?.querySelector('.current-label')?.textContent;
|
|
34
|
+
if (typeof label !== 'string') {
|
|
35
|
+
throw new Error('Selected state label not found');
|
|
36
|
+
}
|
|
37
|
+
return label;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
//# sourceMappingURL=step-base.pageobject.js.map
|
|
@@ -0,0 +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,6 +1,6 @@
|
|
|
1
1
|
import type { SeverityPattern } from '../severity/types';
|
|
2
2
|
import type { StepInternals } from './models/step-internals';
|
|
3
|
-
export interface StepPattern extends SeverityPattern {
|
|
3
|
+
export interface StepPattern extends SeverityPattern, HTMLElement {
|
|
4
4
|
/**
|
|
5
5
|
* Whether or not the step is disabled.
|
|
6
6
|
*/
|
|
@@ -14,7 +14,8 @@ export interface StepPattern extends SeverityPattern {
|
|
|
14
14
|
*/
|
|
15
15
|
selected: boolean;
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Internal step state set by the stepper
|
|
18
|
+
* @internal
|
|
18
19
|
*/
|
|
19
20
|
stepInternals: StepInternals;
|
|
20
21
|
}
|
|
@@ -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 {\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 *
|
|
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,13 +1,14 @@
|
|
|
1
|
-
import { html, ref,
|
|
1
|
+
import { html, ref, ViewTemplate, when } from '@ni/fast-element';
|
|
2
2
|
import { endSlotTemplate, startSlotTemplate } from '@ni/fast-foundation';
|
|
3
3
|
import { severityTextTemplate } from '../patterns/severity/template';
|
|
4
4
|
import { iconCheckTag } from '../icons/check';
|
|
5
5
|
import { iconExclamationMarkTag } from '../icons/exclamation-mark';
|
|
6
6
|
import { iconTriangleFilledTag } from '../icons/triangle-filled';
|
|
7
7
|
import { Severity } from '../patterns/severity/types';
|
|
8
|
+
import { popupIconCompletedLabel, popupIconCurrentLabel, popupIconErrorLabel, popupIconWarningLabel } from '../label-provider/core/label-tokens';
|
|
8
9
|
export const template = (context, definition) => html `
|
|
9
10
|
<template slot="step">
|
|
10
|
-
<
|
|
11
|
+
<li class="
|
|
11
12
|
container
|
|
12
13
|
${x => (x.stepInternals.orientation === 'vertical' ? 'vertical' : '')}
|
|
13
14
|
${x => (x.stepInternals.last ? 'last' : '')}
|
|
@@ -50,28 +51,22 @@ export const template = (context, definition) => html `
|
|
|
50
51
|
aria-roledescription="${x => x.ariaRoledescription}"
|
|
51
52
|
${ref('control')}
|
|
52
53
|
>
|
|
53
|
-
<div class="icon">
|
|
54
|
-
<
|
|
54
|
+
<div class="icon">
|
|
55
|
+
<span class="current-label">${x => (x.selected ? popupIconCurrentLabel.getValueFor(x) : '')}</span>
|
|
56
|
+
<div class="step-indicator"><slot name="step-indicator"><span aria-hidden="true">${x => x.stepInternals.position}</span></slot></div>
|
|
55
57
|
<div class="icon-severity">
|
|
56
|
-
${when(x => x.severity === Severity.error, html `<${iconExclamationMarkTag}></${iconExclamationMarkTag}>`)}
|
|
57
|
-
${when(x => x.severity === Severity.warning, html `<${iconTriangleFilledTag}></${iconTriangleFilledTag}>`)}
|
|
58
|
-
${when(x => x.severity === Severity.success, html `<${iconCheckTag}></${iconCheckTag}>`)}
|
|
59
|
-
</div>
|
|
60
|
-
</div>
|
|
61
|
-
<div class="content">
|
|
62
|
-
<div class="title-wrapper">
|
|
63
|
-
${startSlotTemplate(context, definition)}
|
|
64
|
-
<div class="title"><slot name="title"></slot></div>
|
|
65
|
-
${endSlotTemplate(context, definition)}
|
|
66
|
-
<div class="line"></div>
|
|
67
|
-
</div>
|
|
68
|
-
<div class="subtitle">
|
|
69
|
-
<slot name="subtitle"></slot>
|
|
58
|
+
${when(x => x.severity === Severity.error, html `<${iconExclamationMarkTag} role="img" aria-label="${x => popupIconErrorLabel.getValueFor(x)}"></${iconExclamationMarkTag}>`)}
|
|
59
|
+
${when(x => x.severity === Severity.warning, html `<${iconTriangleFilledTag} role="img" aria-label="${x => popupIconWarningLabel.getValueFor(x)}"></${iconTriangleFilledTag}>`)}
|
|
60
|
+
${when(x => x.severity === Severity.success, html `<${iconCheckTag} role="img" aria-label="${x => popupIconCompletedLabel.getValueFor(x)}"></${iconCheckTag}>`)}
|
|
70
61
|
</div>
|
|
71
62
|
</div>
|
|
63
|
+
<div class="top-spacer"></div>
|
|
64
|
+
<div class="title">${startSlotTemplate(context, definition)}<slot name="title"></slot>${endSlotTemplate(context, definition)}</div>
|
|
65
|
+
<div class="line"></div>
|
|
66
|
+
<div class="subtitle"><slot name="subtitle"></slot></div>
|
|
72
67
|
</button>
|
|
73
68
|
${severityTextTemplate}
|
|
74
|
-
</
|
|
69
|
+
</li>
|
|
75
70
|
</template>
|
|
76
71
|
`;
|
|
77
72
|
//# sourceMappingURL=template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/step/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,
|
|
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;AAGjJ,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAA;;;;cAInB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,WAAW,KAAK,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;cACnE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;;;;;8BAKzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;6BACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;wBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;8BACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;+BAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;8BACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;kCACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;8BACzB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;wBACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;wBACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;yBACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;4BACT,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;+BACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;6BACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;iCACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;gCACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;oCACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;gCAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;iCACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;qCACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;iCAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;+BACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;iCACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;+BACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;gCAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;qCACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;8BAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;mCACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;6BAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;6BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;gCACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;iCACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;wCACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;kBAChD,GAAG,CAAC,SAAS,CAAC;;;kDAGkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;uGACR,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,QAAQ;;0BAE1G,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,KAAK,EAClC,IAAI,CAAa,IAAI,sBAAsB,2BAA2B,CAAC,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,sBAAsB,GAAG,CAChJ;0BACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,OAAO,EACpC,IAAI,CAAa,IAAI,qBAAqB,2BAA2B,CAAC,CAAC,EAAE,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,qBAAqB,GAAG,CAChJ;0BACC,IAAI,CACF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,QAAQ,CAAC,OAAO,EACpC,IAAI,CAAa,IAAI,YAAY,2BAA2B,CAAC,CAAC,EAAE,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,YAAY,GAAG,CAChI;;;;qCAIY,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC,6BAA6B,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;;;cAI9H,oBAAoB;;;CAGjC,CAAC","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';\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 === '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 ${ref('control')}\n >\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"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"step.pageobject.js","sourceRoot":"","sources":["../../../../src/step/testing/step.pageobject.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kDAAkD,CAAC;AAEtF;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,kBAAwB;CAE3D","sourcesContent":["import type { Step } from '..';\nimport { StepBasePageObject } from '../../patterns/step/testing/step-base.pageobject';\n\n/**\n * Page object for steps\n */\nexport class StepPageObject extends StepBasePageObject<Step> {\n\n}\n"]}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import { FoundationElement } from '@ni/fast-foundation';
|
|
2
|
+
import { StepperOrientation } from './types';
|
|
3
|
+
import type { StepPattern } from '../patterns/step/types';
|
|
2
4
|
declare global {
|
|
3
5
|
interface HTMLElementTagNameMap {
|
|
4
6
|
'nimble-stepper': Stepper;
|
|
@@ -8,5 +10,11 @@ declare global {
|
|
|
8
10
|
* A nimble-styled stepper
|
|
9
11
|
*/
|
|
10
12
|
export declare class Stepper extends FoundationElement {
|
|
13
|
+
orientation: StepperOrientation;
|
|
14
|
+
/** @internal */
|
|
15
|
+
steps?: (StepPattern)[];
|
|
16
|
+
private orientationChanged;
|
|
17
|
+
private stepsChanged;
|
|
18
|
+
private updateStepInternals;
|
|
11
19
|
}
|
|
12
20
|
export declare const stepperTag = "nimble-stepper";
|
|
@@ -1,11 +1,41 @@
|
|
|
1
|
+
import { __decorate } from "tslib";
|
|
1
2
|
import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
|
|
3
|
+
import { attr, observable } from '@ni/fast-element';
|
|
2
4
|
import { styles } from './styles';
|
|
3
5
|
import { template } from './template';
|
|
6
|
+
import { StepperOrientation } from './types';
|
|
4
7
|
/**
|
|
5
8
|
* A nimble-styled stepper
|
|
6
9
|
*/
|
|
7
10
|
export class Stepper extends FoundationElement {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
this.orientation = StepperOrientation.horizontal;
|
|
14
|
+
}
|
|
15
|
+
orientationChanged() {
|
|
16
|
+
this.updateStepInternals();
|
|
17
|
+
}
|
|
18
|
+
stepsChanged() {
|
|
19
|
+
this.updateStepInternals();
|
|
20
|
+
}
|
|
21
|
+
updateStepInternals() {
|
|
22
|
+
if (!this.steps) {
|
|
23
|
+
return;
|
|
24
|
+
}
|
|
25
|
+
const lastIndex = this.steps.length - 1;
|
|
26
|
+
this.steps.forEach((step, index) => {
|
|
27
|
+
step.stepInternals.orientation = this.orientation;
|
|
28
|
+
step.stepInternals.last = index === lastIndex;
|
|
29
|
+
step.stepInternals.position = index + 1;
|
|
30
|
+
});
|
|
31
|
+
}
|
|
8
32
|
}
|
|
33
|
+
__decorate([
|
|
34
|
+
attr
|
|
35
|
+
], Stepper.prototype, "orientation", void 0);
|
|
36
|
+
__decorate([
|
|
37
|
+
observable
|
|
38
|
+
], Stepper.prototype, "steps", void 0);
|
|
9
39
|
const nimbleStepper = Stepper.compose({
|
|
10
40
|
baseName: 'stepper',
|
|
11
41
|
template,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/stepper/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/stepper/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAS7C;;GAEG;AACH,MAAM,OAAO,OAAQ,SAAQ,iBAAiB;IAA9C;;QAEW,gBAAW,GAAuB,kBAAkB,CAAC,UAAU,CAAC;IAyB3E,CAAC;IAnBW,kBAAkB;QACtB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAEO,YAAY;QAChB,IAAI,CAAC,mBAAmB,EAAE,CAAC;IAC/B,CAAC;IAEO,mBAAmB;QACvB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YACd,OAAO;QACX,CAAC;QACD,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;QACxC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAC/B,IAAI,CAAC,aAAa,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;YAClD,IAAI,CAAC,aAAa,CAAC,IAAI,GAAG,KAAK,KAAK,SAAS,CAAC;YAC9C,IAAI,CAAC,aAAa,CAAC,QAAQ,GAAG,KAAK,GAAG,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;IACP,CAAC;CACJ;AAzBU;IADN,IAAI;4CACkE;AAIhE;IADN,UAAU;sCACoB;AAuBnC,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAClC,QAAQ,EAAE,SAAS;IACnB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,aAAa,EAAE,CAAC,CAAC;AAC1E,MAAM,CAAC,MAAM,UAAU,GAAG,gBAAgB,CAAC","sourcesContent":["import { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport { attr, observable } from '@ni/fast-element';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { StepperOrientation } from './types';\nimport type { StepPattern } from '../patterns/step/types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-stepper': Stepper;\n }\n}\n\n/**\n * A nimble-styled stepper\n */\nexport class Stepper extends FoundationElement {\n @attr\n public orientation: StepperOrientation = StepperOrientation.horizontal;\n\n /** @internal */\n @observable\n public steps?: (StepPattern)[];\n\n private orientationChanged(): void {\n this.updateStepInternals();\n }\n\n private stepsChanged(): void {\n this.updateStepInternals();\n }\n\n private updateStepInternals(): void {\n if (!this.steps) {\n return;\n }\n const lastIndex = this.steps.length - 1;\n this.steps.forEach((step, index) => {\n step.stepInternals.orientation = this.orientation;\n step.stepInternals.last = index === lastIndex;\n step.stepInternals.position = index + 1;\n });\n }\n}\n\nconst nimbleStepper = Stepper.compose({\n baseName: 'stepper',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleStepper());\nexport const stepperTag = 'nimble-stepper';\n"]}
|
|
@@ -1,11 +1,28 @@
|
|
|
1
1
|
import { css } from '@ni/fast-element';
|
|
2
2
|
import { display } from '../utilities/style/display';
|
|
3
|
+
import { smallPadding } from '../theme-provider/design-tokens';
|
|
3
4
|
export const styles = css `
|
|
4
5
|
${display('inline-flex')}
|
|
5
6
|
|
|
6
7
|
:host {
|
|
7
8
|
border: none;
|
|
8
|
-
gap:
|
|
9
|
+
gap: ${smallPadding};
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:host([orientation="vertical"]) {
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
ol {
|
|
17
|
+
display: contents;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
slot[name="step"]::slotted(*) {
|
|
21
|
+
flex-grow: 1;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
slot[name="step"]::slotted(:last-child) {
|
|
25
|
+
flex-grow: 0;
|
|
9
26
|
}
|
|
10
27
|
`;
|
|
11
28
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/stepper/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/stepper/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAE/D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;;eAIb,YAAY;;;;;;;;;;;;;;;;;;CAkB1B,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport { smallPadding } from '../theme-provider/design-tokens';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n border: none;\n gap: ${smallPadding};\n }\n\n :host([orientation=\"vertical\"]) {\n flex-direction: column;\n }\n\n ol {\n display: contents;\n }\n\n slot[name=\"step\"]::slotted(*) {\n flex-grow: 1;\n }\n\n slot[name=\"step\"]::slotted(:last-child) {\n flex-grow: 0;\n }\n`;\n"]}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { html } from '@ni/fast-element';
|
|
1
|
+
import { html, slotted } from '@ni/fast-element';
|
|
2
2
|
import { devicePixelRatio } from '../utilities/models/device-pixel-ratio';
|
|
3
|
-
export const template = html
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
3
|
+
export const template = html `<ol><slot
|
|
4
|
+
style="--ni-private-device-pixel-ratio: ${() => devicePixelRatio.current};"
|
|
5
|
+
name="step"
|
|
6
|
+
${slotted('steps')}
|
|
7
|
+
></slot></ol>`;
|
|
7
8
|
//# sourceMappingURL=template.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/stepper/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/stepper/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAE1E,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;kDACa,GAAG,EAAE,CAAC,gBAAgB,CAAC,OAAO;;UAEtE,OAAO,CAAC,OAAO,CAAC;kBACR,CAAC","sourcesContent":["import { html, slotted } from '@ni/fast-element';\nimport type { Stepper } from '.';\nimport { devicePixelRatio } from '../utilities/models/device-pixel-ratio';\n\nexport const template = html<Stepper>`<ol><slot\n style=\"--ni-private-device-pixel-ratio: ${() => devicePixelRatio.current};\"\n name=\"step\"\n ${slotted('steps')}\n ></slot></ol>`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "35.
|
|
3
|
+
"version": "35.5.1",
|
|
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",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@ni/fast-element": "^10.1.0",
|
|
50
50
|
"@ni/fast-foundation": "^10.2.1",
|
|
51
51
|
"@ni/fast-web-utilities": "^10.0.0",
|
|
52
|
-
"@ni/nimble-tokens": "^8.
|
|
52
|
+
"@ni/nimble-tokens": "^8.17.0",
|
|
53
53
|
"@ni/unit-format": "^1.0.3",
|
|
54
54
|
"@tanstack/table-core": "^8.19.3",
|
|
55
55
|
"@tanstack/virtual-core": "^3.10.6",
|