@ni/nimble-components 33.3.0 → 33.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all-components-bundle.js +41 -2
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +3055 -3025
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/number-field/index.d.ts +1 -0
- package/dist/esm/number-field/index.js +4 -0
- package/dist/esm/number-field/index.js.map +1 -1
- package/dist/esm/number-field/styles.js +9 -0
- package/dist/esm/number-field/styles.js.map +1 -1
- package/dist/esm/number-field/types.d.ts +1 -0
- package/dist/esm/number-field/types.js +2 -1
- package/dist/esm/number-field/types.js.map +1 -1
- package/dist/esm/text-area/index.d.ts +1 -0
- package/dist/esm/text-area/index.js +4 -0
- package/dist/esm/text-area/index.js.map +1 -1
- package/dist/esm/text-area/styles.js +22 -1
- package/dist/esm/text-area/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -27,6 +27,7 @@ declare const NumberField_base: (abstract new (...args: any[]) => {
|
|
|
27
27
|
*/
|
|
28
28
|
export declare class NumberField extends NumberField_base {
|
|
29
29
|
appearance: NumberFieldAppearance;
|
|
30
|
+
fullBleed: boolean;
|
|
30
31
|
appearanceReadOnly: boolean;
|
|
31
32
|
connectedCallback(): void;
|
|
32
33
|
}
|
|
@@ -19,6 +19,7 @@ export class NumberField extends mixinErrorPattern(mixinRequiredVisiblePattern(F
|
|
|
19
19
|
constructor() {
|
|
20
20
|
super(...arguments);
|
|
21
21
|
this.appearance = NumberFieldAppearance.underline;
|
|
22
|
+
this.fullBleed = false;
|
|
22
23
|
this.appearanceReadOnly = false;
|
|
23
24
|
}
|
|
24
25
|
connectedCallback() {
|
|
@@ -30,6 +31,9 @@ export class NumberField extends mixinErrorPattern(mixinRequiredVisiblePattern(F
|
|
|
30
31
|
__decorate([
|
|
31
32
|
attr
|
|
32
33
|
], NumberField.prototype, "appearance", void 0);
|
|
34
|
+
__decorate([
|
|
35
|
+
attr({ attribute: 'full-bleed', mode: 'boolean' })
|
|
36
|
+
], NumberField.prototype, "fullBleed", void 0);
|
|
33
37
|
__decorate([
|
|
34
38
|
attr({ attribute: 'appearance-readonly', mode: 'boolean' })
|
|
35
39
|
], NumberField.prototype, "appearanceReadOnly", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEvC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EACH,qBAAqB,EACrB,qBAAqB,EACxB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAQjF;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB,CAC9C,2BAA2B,CAAC,qBAAqB,CAAC,CACrD;IAFD;;QAIW,eAAU,GAA0B,qBAAqB,CAAC,SAAS,CAAC;QAGpE,uBAAkB,GAAG,KAAK,CAAC;IAQtC,CAAC;IANmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,qFAAqF;QACrF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACpD,CAAC;CACJ;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEvC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EACH,qBAAqB,EACrB,qBAAqB,EACxB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAQjF;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB,CAC9C,2BAA2B,CAAC,qBAAqB,CAAC,CACrD;IAFD;;QAIW,eAAU,GAA0B,qBAAqB,CAAC,SAAS,CAAC;QAGpE,cAAS,GAAG,KAAK,CAAC;QAGlB,uBAAkB,GAAG,KAAK,CAAC;IAQtC,CAAC;IANmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,qFAAqF;QACrF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACpD,CAAC;CACJ;AAdU;IADN,IAAI;+CACsE;AAGpE;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;8CAC1B;AAGlB;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uDAC1B;AAUtC;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAqB;IAC9D,QAAQ,EAAE,cAAc;IACxB,SAAS,EAAE,qBAAqB;IAChC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,aAAa,EAAE,IAAI,CAAa;WACzB,SAAS;;;;;;;cAON,CAAC,CAAC,EAAE,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;eACxC,gBAAgB;;;gBAGf,gBAAgB;YACpB,SAAS;KAChB;IACD,WAAW,EAAE,IAAI,CAAa;WACvB,SAAS;;;;;;;cAON,CAAC,CAAC,EAAE,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;eACxC,UAAU;;gBAET,UAAU;YACd,SAAS;KAChB;IACD,GAAG,EAAE,IAAI,CAAa;WACf,sBAAsB;;;aAGpB,sBAAsB;UACzB,iBAAiB;KACtB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr, html } from '@ni/fast-element';\nimport {\n DesignSystem,\n NumberField as FoundationNumberField,\n type NumberFieldOptions\n} from '@ni/fast-foundation';\nimport { styles } from './styles';\nimport { NumberFieldAppearance } from './types';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { mixinErrorPattern } from '../patterns/error/types';\nimport { buttonTag } from '../button';\nimport { iconMinusWideTag } from '../icons/minus-wide';\nimport { iconAddTag } from '../icons/add';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport {\n numericDecrementLabel,\n numericIncrementLabel\n} from '../label-provider/core/label-tokens';\nimport { template } from './template';\nimport { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-number-field': NumberField;\n }\n}\n\n/**\n * A nimble-styled HTML number input\n */\nexport class NumberField extends mixinErrorPattern(\n mixinRequiredVisiblePattern(FoundationNumberField)\n) {\n @attr\n public appearance: NumberFieldAppearance = NumberFieldAppearance.underline;\n\n @attr({ attribute: 'full-bleed', mode: 'boolean' })\n public fullBleed = false;\n\n @attr({ attribute: 'appearance-readonly', mode: 'boolean' })\n public appearanceReadOnly = false;\n\n public override connectedCallback(): void {\n super.connectedCallback();\n\n // This is a workaround for FAST issue: https://github.com/microsoft/fast/issues/6148\n this.control.setAttribute('role', 'spinbutton');\n }\n}\n\n/**\n * A function that returns a number-field registration for configuring the component with a DesignSystem.\n *\n * @public\n * @remarks\n * Generates HTML Element: \\<nimble-number-field\\>\n *\n */\nconst nimbleNumberField = NumberField.compose<NumberFieldOptions>({\n baseName: 'number-field',\n baseClass: FoundationNumberField,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n },\n stepDownGlyph: html<NumberField>`\n <${buttonTag}\n class=\"step-up-down-button\"\n appearance=\"ghost\"\n content-hidden\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n ${x => numericDecrementLabel.getValueFor(x)}\n <${iconMinusWideTag}\n slot=\"start\"\n >\n </${iconMinusWideTag}>\n </${buttonTag}>\n `,\n stepUpGlyph: html<NumberField>`\n <${buttonTag}\n class=\"step-up-down-button\"\n appearance=\"ghost\"\n content-hidden\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n ${x => numericIncrementLabel.getValueFor(x)}\n <${iconAddTag}\n slot=\"start\">\n </${iconAddTag}>\n </${buttonTag}>\n `,\n end: html<NumberField>`\n <${iconExclamationMarkTag}\n severity=\"error\"\n class=\"error-icon\"\n ></${iconExclamationMarkTag}>\n ${errorTextTemplate}\n `\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());\nexport const numberFieldTag = 'nimble-number-field';\n"]}
|
|
@@ -210,5 +210,14 @@ export const styles = css `
|
|
|
210
210
|
border-width: ${borderWidth};
|
|
211
211
|
padding: 0;
|
|
212
212
|
}
|
|
213
|
+
`), appearanceBehavior(NumberFieldAppearance.frameless, css `
|
|
214
|
+
.root {
|
|
215
|
+
padding-left: ${borderWidth};
|
|
216
|
+
padding-right: ${borderWidth};
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
:host([full-bleed]) .control {
|
|
220
|
+
padding-left: 0px;
|
|
221
|
+
}
|
|
213
222
|
`));
|
|
214
223
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;iCAUL,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;;6BAKlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;4BAMI,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBAyBhB,aAAa;;;;;;;;;;;;;;;iBAepB,qBAAqB;;;;iBAIrB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE;sFACsF,CAAC,EAC3F;;;yBAGqB,YAAY;;;;;;;;UAQ3B,aAAa,CAAC,iBAAiB;;;;;;;;;wBASjB,YAAY;;CAEnC,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;uCAKX,WAAW;;;;;;yCAMT,qBAAqB;;;;;;;uCAOvB,SAAS;;SAEvC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n controlLabelFont,\n controlLabelFontColor,\n smallDelay,\n bodyFont,\n failColor,\n mediumPadding,\n smallPadding,\n controlLabelDisabledFontColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { NumberFieldAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-block')}\n ${errorStyles}\n ${requiredVisibleStyles}\n\n :host {\n font: ${bodyFont};\n outline: none;\n ${userSelectNone}\n color: ${bodyFontColor};\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n --ni-private-height-within-border: calc(\n ${controlHeight} - 2 * ${borderWidth}\n );\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) {\n color: ${bodyFontColor};\n }\n\n .label {\n display: flex;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .label {\n color: ${controlLabelFontColor};\n }\n\n .root {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 0px;\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n padding: ${borderWidth};\n }\n\n .root:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([readonly]) .root,\n :host([disabled]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([error-visible]) .root {\n border-bottom-color: ${failColor};\n }\n\n .root::before {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n .root::after {\n content: '';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n .root::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) .root::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) .root::after {\n width: 100%;\n }\n\n :host([readonly]:hover) .root::after,\n :host([disabled]:hover) .root::after {\n width: 0px;\n }\n\n [part='start'] {\n display: none;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n color: inherit;\n height: var(--ni-private-height-within-border);\n width: 100%;\n border: none;\n padding: 0px;\n padding-left: ${mediumPadding};\n }\n\n .control:hover,\n .control:focus,\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n :host([disabled][appearance-readonly]) .control {\n cursor: text;\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n :host([disabled]) .control::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .controls {\n display: contents;\n }\n\n ${\n /* We are using flex `order` to define the visual ordering of the inc/dec buttons\n and the invalid icon because they are not \"interactive\" i.e. part of the tab order */ ''\n }\n .step-up {\n order: 3;\n padding-right: ${smallPadding};\n }\n\n .step-down {\n order: 2;\n }\n\n .step-up-down-button {\n ${controlHeight.cssCustomProperty}: 24px;\n }\n\n [part='end'] {\n display: contents;\n }\n\n .error-icon {\n order: 1;\n margin-right: ${smallPadding};\n }\n`.withBehaviors(\n appearanceBehavior(\n NumberFieldAppearance.underline,\n css`\n .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.block,\n css`\n .root {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .root:focus-within,\n :host([error-visible]) .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host(:hover) .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host([readonly]) .root,\n :host([disabled]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n border-color: transparent;\n }\n\n :host([error-visible][readonly]) .root,\n :host([error-visible][disabled]) .root {\n padding-bottom: 0;\n border-bottom-color: ${failColor};\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.outline,\n css`\n .root {\n border-width: ${borderWidth};\n padding: 0;\n }\n `\n )\n);\n"]}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;iCAUL,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;;6BAKlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;4BAMI,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBAyBhB,aAAa;;;;;;;;;;;;;;;iBAepB,qBAAqB;;;;iBAIrB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE;sFACsF,CAAC,EAC3F;;;yBAGqB,YAAY;;;;;;;;UAQ3B,aAAa,CAAC,iBAAiB;;;;;;;;;wBASjB,YAAY;;CAEnC,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;uCAKX,WAAW;;;;;;yCAMT,qBAAqB;;;;;;;uCAOvB,SAAS;;SAEvC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n controlLabelFont,\n controlLabelFontColor,\n smallDelay,\n bodyFont,\n failColor,\n mediumPadding,\n smallPadding,\n controlLabelDisabledFontColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { NumberFieldAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-block')}\n ${errorStyles}\n ${requiredVisibleStyles}\n\n :host {\n font: ${bodyFont};\n outline: none;\n ${userSelectNone}\n color: ${bodyFontColor};\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n --ni-private-height-within-border: calc(\n ${controlHeight} - 2 * ${borderWidth}\n );\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) {\n color: ${bodyFontColor};\n }\n\n .label {\n display: flex;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .label {\n color: ${controlLabelFontColor};\n }\n\n .root {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 0px;\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n padding: ${borderWidth};\n }\n\n .root:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([readonly]) .root,\n :host([disabled]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([error-visible]) .root {\n border-bottom-color: ${failColor};\n }\n\n .root::before {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n .root::after {\n content: '';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n .root::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) .root::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) .root::after {\n width: 100%;\n }\n\n :host([readonly]:hover) .root::after,\n :host([disabled]:hover) .root::after {\n width: 0px;\n }\n\n [part='start'] {\n display: none;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n color: inherit;\n height: var(--ni-private-height-within-border);\n width: 100%;\n border: none;\n padding: 0px;\n padding-left: ${mediumPadding};\n }\n\n .control:hover,\n .control:focus,\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n :host([disabled][appearance-readonly]) .control {\n cursor: text;\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n :host([disabled]) .control::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .controls {\n display: contents;\n }\n\n ${\n /* We are using flex `order` to define the visual ordering of the inc/dec buttons\n and the invalid icon because they are not \"interactive\" i.e. part of the tab order */ ''\n }\n .step-up {\n order: 3;\n padding-right: ${smallPadding};\n }\n\n .step-down {\n order: 2;\n }\n\n .step-up-down-button {\n ${controlHeight.cssCustomProperty}: 24px;\n }\n\n [part='end'] {\n display: contents;\n }\n\n .error-icon {\n order: 1;\n margin-right: ${smallPadding};\n }\n`.withBehaviors(\n appearanceBehavior(\n NumberFieldAppearance.underline,\n css`\n .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.block,\n css`\n .root {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .root:focus-within,\n :host([error-visible]) .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host(:hover) .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host([readonly]) .root,\n :host([disabled]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n border-color: transparent;\n }\n\n :host([error-visible][readonly]) .root,\n :host([error-visible][disabled]) .root {\n padding-bottom: 0;\n border-bottom-color: ${failColor};\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.outline,\n css`\n .root {\n border-width: ${borderWidth};\n padding: 0;\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.frameless,\n css`\n .root {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\n }\n\n :host([full-bleed]) .control {\n padding-left: 0px;\n }\n `\n )\n);\n"]}
|
|
@@ -5,5 +5,6 @@ export declare const NumberFieldAppearance: {
|
|
|
5
5
|
readonly underline: "underline";
|
|
6
6
|
readonly outline: "outline";
|
|
7
7
|
readonly block: "block";
|
|
8
|
+
readonly frameless: "frameless";
|
|
8
9
|
};
|
|
9
10
|
export type NumberFieldAppearance = (typeof NumberFieldAppearance)[keyof typeof NumberFieldAppearance];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/number-field/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/number-field/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,WAAW;CAChB,CAAC","sourcesContent":["/**\n * Values for the 'appearance' property of the number field\n */\nexport const NumberFieldAppearance = {\n underline: 'underline',\n outline: 'outline',\n block: 'block',\n frameless: 'frameless'\n} as const;\n\nexport type NumberFieldAppearance =\n (typeof NumberFieldAppearance)[keyof typeof NumberFieldAppearance];\n"]}
|
|
@@ -20,6 +20,7 @@ export class TextArea extends mixinErrorPattern(mixinRequiredVisiblePattern(Foun
|
|
|
20
20
|
* HTML Attribute: appearance
|
|
21
21
|
*/
|
|
22
22
|
this.appearance = TextAreaAppearance.outline;
|
|
23
|
+
this.appearanceReadOnly = false;
|
|
23
24
|
/**
|
|
24
25
|
* The width of the vertical scrollbar, if displayed.
|
|
25
26
|
* @internal
|
|
@@ -90,6 +91,9 @@ export class TextArea extends mixinErrorPattern(mixinRequiredVisiblePattern(Foun
|
|
|
90
91
|
__decorate([
|
|
91
92
|
attr
|
|
92
93
|
], TextArea.prototype, "appearance", void 0);
|
|
94
|
+
__decorate([
|
|
95
|
+
attr({ attribute: 'appearance-readonly', mode: 'boolean' })
|
|
96
|
+
], TextArea.prototype, "appearanceReadOnly", void 0);
|
|
93
97
|
__decorate([
|
|
94
98
|
observable
|
|
95
99
|
], TextArea.prototype, "scrollbarWidth", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-area/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EACjC,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAQjF;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,iBAAiB,CAC3C,2BAA2B,CAAC,kBAAkB,CAAC,CAClD;IAFD;;QAGI;;;;;;WAMG;QAEI,eAAU,GAAuB,kBAAkB,CAAC,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-area/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, DOM, observable } from '@ni/fast-element';\nimport {\n DesignSystem,\n TextArea as FoundationTextArea\n} from '@ni/fast-foundation';\nimport { mixinErrorPattern } from '../patterns/error/types';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { TextAreaAppearance } from './types';\nimport { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-text-area': TextArea;\n }\n}\n\n/**\n * A nimble-styed HTML text area\n */\nexport class TextArea extends mixinErrorPattern(\n mixinRequiredVisiblePattern(FoundationTextArea)\n) {\n /**\n * The appearance the text area should have.\n *\n * @public\n * @remarks\n * HTML Attribute: appearance\n */\n @attr\n public appearance: TextAreaAppearance = TextAreaAppearance.outline;\n\n @attr({ attribute: 'appearance-readonly', mode: 'boolean' })\n public appearanceReadOnly = false;\n\n /**\n * The width of the vertical scrollbar, if displayed.\n * @internal\n */\n @observable\n public scrollbarWidth = -1;\n\n private resizeObserver?: ResizeObserver;\n private updateScrollbarWidthQueued = false;\n\n /**\n * @internal\n */\n public override connectedCallback(): void {\n super.connectedCallback();\n this.resizeObserver = new ResizeObserver(() => this.onResize());\n this.resizeObserver.observe(this);\n }\n\n /**\n * @internal\n */\n public override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.resizeObserver?.disconnect();\n }\n\n /**\n * @internal\n */\n public onTextAreaInput(): void {\n this.handleTextInput();\n this.queueUpdateScrollbarWidth();\n }\n\n // If a property can affect whether a scrollbar is visible, we need to\n // call queueUpdateScrollbarWidth() when it changes. The exceptions are\n // properties that affect size (e.g. height, width, cols, rows), because\n // we already have a ResizeObserver handling those changes. Also,\n // a change to errorVisible cannot cause scrollbar visibility to change,\n // because we always reserve space for the error icon.\n\n /**\n * @internal\n */\n public placeholderChanged(): void {\n this.queueUpdateScrollbarWidth();\n }\n\n /**\n * @internal\n */\n public override valueChanged(previous: string, next: string): void {\n super.valueChanged(previous, next);\n this.queueUpdateScrollbarWidth();\n }\n\n private onResize(): void {\n // Do this directly instead of calling updateScrollbarWidth, b/c we don't want to\n // interfere with queue.\n this.scrollbarWidth = this.control.offsetWidth - this.control.clientWidth;\n }\n\n private queueUpdateScrollbarWidth(): void {\n if (!this.$fastController.isConnected) {\n return;\n }\n if (!this.updateScrollbarWidthQueued) {\n this.updateScrollbarWidthQueued = true;\n DOM.queueUpdate(() => this.updateScrollbarWidth());\n }\n }\n\n private updateScrollbarWidth(): void {\n this.updateScrollbarWidthQueued = false;\n this.scrollbarWidth = this.control.offsetWidth - this.control.clientWidth;\n }\n}\n\nconst nimbleTextArea = TextArea.compose({\n baseName: 'text-area',\n baseClass: FoundationTextArea,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n }\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextArea());\nexport const textAreaTag = 'nimble-text-area';\n"]}
|
|
@@ -25,6 +25,10 @@ export const styles = css `
|
|
|
25
25
|
color: ${bodyDisabledFontColor};
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
+
:host([disabled][appearance-readonly]) {
|
|
29
|
+
color: ${bodyFontColor};
|
|
30
|
+
}
|
|
31
|
+
|
|
28
32
|
.label {
|
|
29
33
|
display: block;
|
|
30
34
|
color: ${controlLabelFontColor};
|
|
@@ -35,6 +39,10 @@ export const styles = css `
|
|
|
35
39
|
color: ${controlLabelDisabledFontColor};
|
|
36
40
|
}
|
|
37
41
|
|
|
42
|
+
:host([disabled][appearance-readonly]) .label {
|
|
43
|
+
color: ${controlLabelFontColor};
|
|
44
|
+
}
|
|
45
|
+
|
|
38
46
|
.container {
|
|
39
47
|
display: flex;
|
|
40
48
|
justify-content: center;
|
|
@@ -111,6 +119,10 @@ export const styles = css `
|
|
|
111
119
|
border-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
112
120
|
}
|
|
113
121
|
|
|
122
|
+
:host([disabled][appearance-readonly]) .control {
|
|
123
|
+
cursor: text;
|
|
124
|
+
}
|
|
125
|
+
|
|
114
126
|
:host([error-visible]) .control {
|
|
115
127
|
border-bottom-color: ${failColor};
|
|
116
128
|
}
|
|
@@ -123,10 +135,14 @@ export const styles = css `
|
|
|
123
135
|
color: ${controlLabelFontColor};
|
|
124
136
|
}
|
|
125
137
|
|
|
126
|
-
|
|
138
|
+
:host([disabled]) .control::placeholder {
|
|
127
139
|
color: ${controlLabelDisabledFontColor};
|
|
128
140
|
}
|
|
129
141
|
|
|
142
|
+
:host([disabled][appearance-readonly]) .control::placeholder {
|
|
143
|
+
color: ${controlLabelFontColor};
|
|
144
|
+
}
|
|
145
|
+
|
|
130
146
|
:host([resize='both']) .control {
|
|
131
147
|
resize: both;
|
|
132
148
|
}
|
|
@@ -166,6 +182,11 @@ export const styles = css `
|
|
|
166
182
|
background-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
167
183
|
}
|
|
168
184
|
|
|
185
|
+
:host([disabled][appearance-readonly]) .control {
|
|
186
|
+
border-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
187
|
+
background-color: transparent;
|
|
188
|
+
}
|
|
189
|
+
|
|
169
190
|
:host([error-visible][disabled]) .control {
|
|
170
191
|
border-bottom-color: ${failColor};
|
|
171
192
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;mDAGqB,WAAW;;;;iBAI7C,qBAAqB;;;;;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-area/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,UAAU,EACV,aAAa,EACb,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,QAAQ,EACR,6BAA6B,EAC7B,QAAQ,EACR,SAAS,EACT,eAAe,EACf,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;MACtB,WAAW;MACX,qBAAqB;;;gBAGX,QAAQ;;UAEd,cAAc;iBACP,aAAa;;;mDAGqB,WAAW;;;;iBAI7C,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;;;;4BAcV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;kBAqBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;;;;;+BAQnB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;;;;;;;;;;eAoBvB,aAAa;;;CAG3B,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,OAAO,EAC1B,GAAG,CAAA;;qCAE0B,qBAAqB;;;SAGjD,CACJ,EACD,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;;;;;yCASrB,qBAAqB;;;;qCAIzB,qBAAqB;;;;;uCAKnB,SAAS;;SAEvC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n smallDelay,\n bodyFontColor,\n bodyDisabledFontColor,\n controlLabelFont,\n controlLabelFontColor,\n bodyFont,\n controlLabelDisabledFontColor,\n iconSize,\n failColor,\n standardPadding,\n mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextAreaAppearance } from './types';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-flex')}\n ${errorStyles}\n ${requiredVisibleStyles}\n\n :host {\n font: ${bodyFont};\n outline: none;\n ${userSelectNone}\n color: ${bodyFontColor};\n flex-direction: column;\n vertical-align: top;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) {\n color: ${bodyFontColor};\n }\n\n .label {\n display: block;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .label {\n color: ${controlLabelFontColor};\n }\n\n .container {\n display: flex;\n justify-content: center;\n position: relative;\n height: 100%;\n width: 100%;\n }\n\n .container::after {\n content: ' ';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n .container::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) .container::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) .container::after {\n width: 100%;\n }\n\n :host([disabled]:hover) .container::after,\n :host([readonly]:hover) .container::after {\n width: 0px;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n flex-grow: 1;\n outline: none;\n position: relative;\n color: inherit;\n border-radius: 0px;\n align-items: flex-end;\n border: ${borderWidth} solid transparent;\n min-width: 100px;\n min-height: calc(${iconSize} + ${standardPadding});\n padding: 8px;\n ${\n /* This padding ensures that showing/hiding the error icon doesn't affect text layout */ ''\n }\n padding-right: calc(${iconSize});\n margin: 0px;\n resize: none;\n }\n\n @media (prefers-reduced-motion) {\n .control {\n transition-duration: 0s;\n }\n }\n\n .control:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n .control[readonly],\n .control[readonly]:hover,\n .control[readonly]:hover:focus-within,\n .control[disabled],\n .control[disabled]:hover {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled][appearance-readonly]) .control {\n cursor: text;\n }\n\n :host([error-visible]) .control {\n border-bottom-color: ${failColor};\n }\n\n :host([error-visible]) .control[readonly]:hover:focus-within {\n border-bottom-color: ${failColor};\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n :host([disabled]) .control::placeholder {\n color: ${controlLabelDisabledFontColor};\n }\n\n :host([disabled][appearance-readonly]) .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n :host([resize='both']) .control {\n resize: both;\n }\n :host([resize='horizontal']) .control {\n resize: horizontal;\n }\n :host([resize='vertical']) .control {\n resize: vertical;\n }\n\n :host([error-visible]) .error-icon {\n display: none;\n }\n\n :host([error-visible]) .error-icon.scrollbar-width-calculated {\n display: inline-flex;\n position: absolute;\n top: ${mediumPadding};\n right: var(--ni-private-scrollbar-width);\n }\n`.withBehaviors(\n appearanceBehavior(\n TextAreaAppearance.outline,\n css`\n .control {\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n background-color: transparent;\n }\n `\n ),\n appearanceBehavior(\n TextAreaAppearance.block,\n css`\n .control {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([readonly]) .control {\n background-color: transparent;\n }\n\n :host([disabled]) .control {\n border-color: transparent;\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled][appearance-readonly]) .control {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n background-color: transparent;\n }\n\n :host([error-visible][disabled]) .control {\n border-bottom-color: ${failColor};\n }\n `\n )\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "33.
|
|
3
|
+
"version": "33.5.0",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",
|