@ni/nimble-components 33.3.0 → 33.4.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.
@@ -34,6 +34,7 @@ export declare class TextArea extends TextArea_base {
34
34
  * HTML Attribute: appearance
35
35
  */
36
36
  appearance: TextAreaAppearance;
37
+ appearanceReadOnly: boolean;
37
38
  /**
38
39
  * The width of the vertical scrollbar, if displayed.
39
40
  * @internal
@@ -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":"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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 /**\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"]}
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
- .control[disabled]::placeholder {
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;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;;;4BAclB,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;kBAqBtB,WAAW;;2BAEF,QAAQ,MAAM,eAAe;;UAE9C;AACE,wFAAwF,CAAC,EAC7F;8BACsB,QAAQ;;;;;;;;;;;;+BAYP,gBAAgB;;;;;;;;6BAQlB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,SAAS;;;;iBAIvB,qBAAqB;;;;iBAIrB,6BAA6B;;;;;;;;;;;;;;;;;;;;eAoB/B,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;;;;uCAIvB,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 .label {\n display: block;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\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([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 .control[disabled]::placeholder {\n color: ${controlLabelDisabledFontColor};\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([error-visible][disabled]) .control {\n border-bottom-color: ${failColor};\n }\n `\n )\n);\n"]}
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.0",
3
+ "version": "33.4.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",