@ni/spright-components 6.20.0 → 6.20.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.
@@ -101,8 +101,9 @@ export const styles = css `
101
101
 
102
102
  .action-button {
103
103
  align-self: flex-end;
104
- width: 80px;
104
+ width: 48px;
105
105
  margin: ${mediumPadding};
106
+ height: ${controlSlimHeight};
106
107
  }
107
108
 
108
109
  .attachments {
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,SAAS,EACZ,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAC7F,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,WAAW;;;;;;mDAMkC,WAAW;;;;;;;;;;4BAUlC,0BAA0B;kBACpC,WAAW,UAAU,gBAAgB;sBACjC,mBAAmB;;;;;;4BAMb,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;4BAKV,UAAU;;;;+BAIP,gBAAgB;;;;+BAIhB,SAAS;;;;+BAIT,SAAS;;;;+BAIT,SAAS;;;;+BAIT,SAAS;;;;;;;;;;gBAUxB,QAAQ;iBACP,aAAa;;;;;;qCAMO,aAAa;;;;;mBAK/B,aAAa;;;;iBAIf,qBAAqB;;;;;;;;;;eAUvB,aAAa;;;;;;;kBAOV,aAAa;;;;;;;;;;eAUhB,aAAa;mBACT,aAAa;2BACL,iBAAiB,UAAU,aAAa;;;;;kBAKjD,iBAAiB;;;;;;;;;;;;;;;;;;;sBAmBb,aAAa;kBACjB,aAAa;;;;kBAIb,iBAAiB;;CAElC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n borderWidth,\n controlLabelFontColor,\n controlSlimHeight,\n elevation2BoxShadow,\n mediumPadding,\n popupBorderColor,\n borderHoverColor,\n smallDelay,\n failColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { styles as errorStyles } from '@ni/nimble-components/dist/esm/patterns/error/styles';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n ${display('flex')}\n ${errorStyles}\n\n :host {\n width: 100%;\n height: auto;\n outline: none;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n }\n\n .container {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n height: 100%;\n\n background-color: ${applicationBackgroundColor};\n border: ${borderWidth} solid ${popupBorderColor};\n box-shadow: ${elevation2BoxShadow};\n }\n\n .container::after {\n content: '';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n align-self: center;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n :host(:hover) .container::after {\n width: 100%;\n transition: width ${smallDelay} ease-in;\n }\n\n :host(:focus-within) .container {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([error-visible]) .container::after {\n border-bottom-color: ${failColor};\n }\n \n :host([error-visible]) .container {\n border-bottom-color: ${failColor};\n }\n\n :host([error-visible]:hover) .container::after {\n border-bottom-color: ${failColor};\n }\n\n :host([error-visible]:focus-within) .container {\n border-bottom-color: ${failColor};\n }\n\n @media (prefers-reduced-motion) {\n .container::after {\n transition-duration: 0s;\n }\n }\n\n textarea {\n font: ${bodyFont};\n color: ${bodyFontColor};\n background-color: transparent;\n\n width: 100%;\n resize: none;\n height: auto;\n max-height: calc(6lh + 2 * ${mediumPadding});\n field-sizing: content;\n\n border-width: 0px;\n outline: none;\n padding: ${mediumPadding};\n }\n\n textarea::placeholder {\n color: ${controlLabelFontColor};\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\n .action-button {\n align-self: flex-end;\n width: 80px;\n margin: ${mediumPadding};\n }\n\n .attachments {\n display: none;\n }\n\n .attachments.has-content {\n display: flex;\n flex-wrap: wrap;\n gap: ${mediumPadding};\n padding: ${mediumPadding};\n max-height: calc(${controlSlimHeight} * 3 + ${mediumPadding} * 4 );\n overflow-y: auto;\n }\n\n .attachments ::slotted(*) {\n height: ${controlSlimHeight};\n }\n\n .footer {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n justify-content: flex-end;\n }\n\n .footer-actions {\n display: none;\n flex: 1;\n }\n\n .footer-actions.has-content {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n column-gap: ${mediumPadding};\n margin: ${mediumPadding};\n }\n\n .footer-actions ::slotted(*) {\n height: ${controlSlimHeight};\n }\n`;\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/chat/input/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,WAAW,EACX,qBAAqB,EACrB,iBAAiB,EACjB,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EAChB,gBAAgB,EAChB,UAAU,EACV,SAAS,EACZ,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,sDAAsD,CAAC;AAC7F,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;MACf,WAAW;;;;;;mDAMkC,WAAW;;;;;;;;;;4BAUlC,0BAA0B;kBACpC,WAAW,UAAU,gBAAgB;sBACjC,mBAAmB;;;;;;4BAMb,WAAW;;;;yBAId,gBAAgB;;4BAEb,UAAU;;;;;4BAKV,UAAU;;;;+BAIP,gBAAgB;;;;+BAIhB,SAAS;;;;+BAIT,SAAS;;;;+BAIT,SAAS;;;;+BAIT,SAAS;;;;;;;;;;gBAUxB,QAAQ;iBACP,aAAa;;;;;;qCAMO,aAAa;;;;;mBAK/B,aAAa;;;;iBAIf,qBAAqB;;;;;;;;;;eAUvB,aAAa;;;;;;;kBAOV,aAAa;kBACb,iBAAiB;;;;;;;;;;eAUpB,aAAa;mBACT,aAAa;2BACL,iBAAiB,UAAU,aAAa;;;;;kBAKjD,iBAAiB;;;;;;;;;;;;;;;;;;;sBAmBb,aAAa;kBACjB,aAAa;;;;kBAIb,iBAAiB;;CAElC,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n borderWidth,\n controlLabelFontColor,\n controlSlimHeight,\n elevation2BoxShadow,\n mediumPadding,\n popupBorderColor,\n borderHoverColor,\n smallDelay,\n failColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { styles as errorStyles } from '@ni/nimble-components/dist/esm/patterns/error/styles';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n ${display('flex')}\n ${errorStyles}\n\n :host {\n width: 100%;\n height: auto;\n outline: none;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n }\n\n .container {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n height: 100%;\n\n background-color: ${applicationBackgroundColor};\n border: ${borderWidth} solid ${popupBorderColor};\n box-shadow: ${elevation2BoxShadow};\n }\n\n .container::after {\n content: '';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n align-self: center;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n :host(:hover) .container::after {\n width: 100%;\n transition: width ${smallDelay} ease-in;\n }\n\n :host(:focus-within) .container {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([error-visible]) .container::after {\n border-bottom-color: ${failColor};\n }\n \n :host([error-visible]) .container {\n border-bottom-color: ${failColor};\n }\n\n :host([error-visible]:hover) .container::after {\n border-bottom-color: ${failColor};\n }\n\n :host([error-visible]:focus-within) .container {\n border-bottom-color: ${failColor};\n }\n\n @media (prefers-reduced-motion) {\n .container::after {\n transition-duration: 0s;\n }\n }\n\n textarea {\n font: ${bodyFont};\n color: ${bodyFontColor};\n background-color: transparent;\n\n width: 100%;\n resize: none;\n height: auto;\n max-height: calc(6lh + 2 * ${mediumPadding});\n field-sizing: content;\n\n border-width: 0px;\n outline: none;\n padding: ${mediumPadding};\n }\n\n textarea::placeholder {\n color: ${controlLabelFontColor};\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\n .action-button {\n align-self: flex-end;\n width: 48px;\n margin: ${mediumPadding};\n height: ${controlSlimHeight};\n }\n\n .attachments {\n display: none;\n }\n\n .attachments.has-content {\n display: flex;\n flex-wrap: wrap;\n gap: ${mediumPadding};\n padding: ${mediumPadding};\n max-height: calc(${controlSlimHeight} * 3 + ${mediumPadding} * 4 );\n overflow-y: auto;\n }\n\n .attachments ::slotted(*) {\n height: ${controlSlimHeight};\n }\n\n .footer {\n display: flex;\n flex-direction: row;\n align-items: flex-end;\n justify-content: flex-end;\n }\n\n .footer-actions {\n display: none;\n flex: 1;\n }\n\n .footer-actions.has-content {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n column-gap: ${mediumPadding};\n margin: ${mediumPadding};\n }\n\n .footer-actions ::slotted(*) {\n height: ${controlSlimHeight};\n }\n`;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ni/spright-components",
3
- "version": "6.20.0",
3
+ "version": "6.20.1",
4
4
  "description": "NI Spright Components",
5
5
  "scripts": {
6
6
  "build": "npm run build:components && npm run build:cem",