@ni/nimble-components 29.2.1 → 29.2.3

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.
@@ -14,6 +14,7 @@ export const styles = css `
14
14
  font-size: 12.8px;
15
15
  align-items: top;
16
16
  overflow: hidden;
17
+ overflow-wrap: anywhere;
17
18
  }
18
19
 
19
20
  :host(:not([open])) {
@@ -45,7 +46,6 @@ export const styles = css `
45
46
  display: inline;
46
47
  font-weight: bold;
47
48
  padding-right: 8px;
48
- white-space: nowrap;
49
49
  }
50
50
 
51
51
  :host([title-hidden]) slot[name='title'] {
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/banner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;;;;;;;;iBAWP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA4BpB,gBAAgB;;;;kBAIR,aAAa;;;;;;sBAMT,YAAY;UACxB,aAAa,CAAC,iBAAiB,KAAK,iBAAiB;;;;;;uBAMxC,eAAe;;;;;;;;;;;;;CAarC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,OAAO;;;;8BAIP,cAAc;;;;8BAId,iBAAiB;;;;8BAIjB,qBAAqB;;SAE1C,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,OAAO;;;;8BAIP,mBAAmB;;;;8BAInB,gBAAgB;;;;8BAIhB,oBAAoB;;SAEzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,0BAA0B;;;;8BAI1B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAElD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n BannerFail100DarkUi,\n Black75,\n Fail100LightUi,\n Information100DarkUi,\n Information100LightUi,\n Warning100DarkUi,\n Warning100LightUi,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\n\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n controlHeight,\n controlSlimHeight,\n smallPadding,\n standardPadding\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n font: ${bodyFont};\n font-size: 12.8px;\n align-items: top;\n overflow: hidden;\n }\n\n :host(:not([open])) {\n display: none;\n }\n\n .container {\n color: ${bodyFontColor};\n display: flex;\n width: 100%;\n }\n\n .icon {\n width: 48px;\n display: flex;\n justify-content: center;\n margin-top: 8px;\n flex: 0 0 auto;\n opacity: 0.6;\n }\n\n .text {\n display: inline;\n margin-top: 7px;\n margin-bottom: 7px;\n }\n\n slot[name='title'] {\n display: inline;\n font-weight: bold;\n padding-right: 8px;\n white-space: nowrap;\n }\n\n :host([title-hidden]) slot[name='title'] {\n ${accessiblyHidden}\n }\n\n .controls {\n height: ${controlHeight};\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: flex-start;\n margin-top: ${smallPadding};\n ${controlHeight.cssCustomProperty}: ${controlSlimHeight};\n }\n\n slot[name='action'] {\n display: flex;\n align-content: center;\n margin-left: ${standardPadding};\n white-space: nowrap;\n }\n\n slot[name='action']::slotted(nimble-anchor) {\n font-size: 12.8px;\n }\n\n .dismiss {\n width: 48px;\n display: flex;\n justify-content: center;\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host {\n background: ${Black75};\n }\n\n :host([severity='error']) {\n background: ${Fail100LightUi};\n }\n\n :host([severity='warning']) {\n background: ${Warning100LightUi};\n }\n\n :host([severity='information']) {\n background: ${Information100LightUi};\n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n background: ${Black75};\n }\n\n :host([severity='error']) {\n background: ${BannerFail100DarkUi};\n }\n\n :host([severity='warning']) {\n background: ${Warning100DarkUi};\n }\n\n :host([severity='information']) {\n background: ${Information100DarkUi};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n :host {\n background: ${applicationBackgroundColor};\n }\n\n .container {\n background: ${hexToRgbaCssColor(White, 0.3)};\n }\n `\n )\n);\n"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/banner/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACH,mBAAmB,EACnB,OAAO,EACP,cAAc,EACd,oBAAoB,EACpB,qBAAqB,EACrB,gBAAgB,EAChB,iBAAiB,EACjB,KAAK,EACR,MAAM,kDAAkD,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,0BAA0B,EAC1B,QAAQ,EACR,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,eAAe,EAClB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;;;;;;;;;;;;iBAYP,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;UA2BpB,gBAAgB;;;;kBAIR,aAAa;;;;;;sBAMT,YAAY;UACxB,aAAa,CAAC,iBAAiB,KAAK,iBAAiB;;;;;;uBAMxC,eAAe;;;;;;;;;;;;;CAarC,CAAC,aAAa,CACX,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,OAAO;;;;8BAIP,cAAc;;;;8BAId,iBAAiB;;;;8BAIjB,qBAAqB;;SAE1C,CACJ,EACD,aAAa,CACT,KAAK,CAAC,IAAI,EACV,GAAG,CAAA;;8BAEmB,OAAO;;;;8BAIP,mBAAmB;;;;8BAInB,gBAAgB;;;;8BAIhB,oBAAoB;;SAEzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;8BAEmB,0BAA0B;;;;8BAI1B,iBAAiB,CAAC,KAAK,EAAE,GAAG,CAAC;;SAElD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport {\n BannerFail100DarkUi,\n Black75,\n Fail100LightUi,\n Information100DarkUi,\n Information100LightUi,\n Warning100DarkUi,\n Warning100LightUi,\n White\n} from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../utilities/style/display';\n\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n controlHeight,\n controlSlimHeight,\n smallPadding,\n standardPadding\n} from '../theme-provider/design-tokens';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { accessiblyHidden } from '../utilities/style/accessibly-hidden';\n\nexport const styles = css`\n ${display('flex')}\n\n :host {\n font: ${bodyFont};\n font-size: 12.8px;\n align-items: top;\n overflow: hidden;\n overflow-wrap: anywhere;\n }\n\n :host(:not([open])) {\n display: none;\n }\n\n .container {\n color: ${bodyFontColor};\n display: flex;\n width: 100%;\n }\n\n .icon {\n width: 48px;\n display: flex;\n justify-content: center;\n margin-top: 8px;\n flex: 0 0 auto;\n opacity: 0.6;\n }\n\n .text {\n display: inline;\n margin-top: 7px;\n margin-bottom: 7px;\n }\n\n slot[name='title'] {\n display: inline;\n font-weight: bold;\n padding-right: 8px;\n }\n\n :host([title-hidden]) slot[name='title'] {\n ${accessiblyHidden}\n }\n\n .controls {\n height: ${controlHeight};\n margin-left: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n align-self: flex-start;\n margin-top: ${smallPadding};\n ${controlHeight.cssCustomProperty}: ${controlSlimHeight};\n }\n\n slot[name='action'] {\n display: flex;\n align-content: center;\n margin-left: ${standardPadding};\n white-space: nowrap;\n }\n\n slot[name='action']::slotted(nimble-anchor) {\n font-size: 12.8px;\n }\n\n .dismiss {\n width: 48px;\n display: flex;\n justify-content: center;\n }\n`.withBehaviors(\n themeBehavior(\n Theme.light,\n css`\n :host {\n background: ${Black75};\n }\n\n :host([severity='error']) {\n background: ${Fail100LightUi};\n }\n\n :host([severity='warning']) {\n background: ${Warning100LightUi};\n }\n\n :host([severity='information']) {\n background: ${Information100LightUi};\n }\n `\n ),\n themeBehavior(\n Theme.dark,\n css`\n :host {\n background: ${Black75};\n }\n\n :host([severity='error']) {\n background: ${BannerFail100DarkUi};\n }\n\n :host([severity='warning']) {\n background: ${Warning100DarkUi};\n }\n\n :host([severity='information']) {\n background: ${Information100DarkUi};\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n :host {\n background: ${applicationBackgroundColor};\n }\n\n .container {\n background: ${hexToRgbaCssColor(White, 0.3)};\n }\n `\n )\n);\n"]}
@@ -1,7 +1,7 @@
1
1
  import { __decorate } from "tslib";
2
2
  import { attr, nullableNumberConverter } from '@microsoft/fast-element';
3
3
  import { DesignSystem, Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
4
- import { check16X16, minus16X16 } from '@ni/nimble-tokens/dist/icons/js';
4
+ import { checkLarge16X16, minus16X16 } from '@ni/nimble-tokens/dist/icons/js';
5
5
  import { styles } from './styles';
6
6
  import { template } from './template';
7
7
  /**
@@ -24,7 +24,7 @@ const nimbleCheckbox = Checkbox.compose({
24
24
  baseClass: FoundationCheckbox,
25
25
  template,
26
26
  styles,
27
- checkedIndicator: check16X16.data,
27
+ checkedIndicator: checkLarge16X16.data,
28
28
  indeterminateIndicator: minus16X16.data
29
29
  });
30
30
  DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAEjC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAS5C;;OAEG;IACH,IAAW,gBAAgB;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC;QACpC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,CAAC;IACrD,CAAC;CACJ;AATmB;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;0CAClC;AAWtC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,gBAAgB,EAAE,UAAU,CAAC,IAAI;IACjC,sBAAsB,EAAE,UAAU,CAAC,IAAI;CAC1C,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@microsoft/fast-element';\nimport {\n DesignSystem,\n Checkbox as FoundationCheckbox,\n CheckboxOptions\n} from '@microsoft/fast-foundation';\nimport { check16X16, minus16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-checkbox': Checkbox;\n }\n}\n\n/**\n * A nimble-styled checkbox control.\n */\nexport class Checkbox extends FoundationCheckbox {\n /**\n * @public\n * @remarks\n * HTML Attribute: tabindex\n */\n @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n public override tabIndex!: number;\n\n /**\n * @internal\n */\n public get resolvedTabindex(): string | undefined {\n const tabIndex = this.tabIndex ?? 0;\n return this.disabled ? undefined : `${tabIndex}`;\n }\n}\n\nconst nimbleCheckbox = Checkbox.compose<CheckboxOptions>({\n baseName: 'checkbox',\n baseClass: FoundationCheckbox,\n template,\n styles,\n checkedIndicator: check16X16.data,\n indeterminateIndicator: minus16X16.data\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());\nexport const checkboxTag = 'nimble-checkbox';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/checkbox/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AACxE,OAAO,EACH,YAAY,EACZ,QAAQ,IAAI,kBAAkB,EAEjC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,QAAS,SAAQ,kBAAkB;IAS5C;;OAEG;IACH,IAAW,gBAAgB;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,CAAC;QACpC,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,QAAQ,EAAE,CAAC;IACrD,CAAC;CACJ;AATmB;IADf,IAAI,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC;0CAClC;AAWtC,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAkB;IACrD,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ;IACR,MAAM;IACN,gBAAgB,EAAE,eAAe,CAAC,IAAI;IACtC,sBAAsB,EAAE,UAAU,CAAC,IAAI;CAC1C,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,cAAc,EAAE,CAAC,CAAC;AAC3E,MAAM,CAAC,MAAM,WAAW,GAAG,iBAAiB,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@microsoft/fast-element';\nimport {\n DesignSystem,\n Checkbox as FoundationCheckbox,\n CheckboxOptions\n} from '@microsoft/fast-foundation';\nimport { checkLarge16X16, minus16X16 } from '@ni/nimble-tokens/dist/icons/js';\nimport { styles } from './styles';\nimport { template } from './template';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-checkbox': Checkbox;\n }\n}\n\n/**\n * A nimble-styled checkbox control.\n */\nexport class Checkbox extends FoundationCheckbox {\n /**\n * @public\n * @remarks\n * HTML Attribute: tabindex\n */\n @attr({ attribute: 'tabindex', converter: nullableNumberConverter })\n public override tabIndex!: number;\n\n /**\n * @internal\n */\n public get resolvedTabindex(): string | undefined {\n const tabIndex = this.tabIndex ?? 0;\n return this.disabled ? undefined : `${tabIndex}`;\n }\n}\n\nconst nimbleCheckbox = Checkbox.compose<CheckboxOptions>({\n baseName: 'checkbox',\n baseClass: FoundationCheckbox,\n template,\n styles,\n checkedIndicator: checkLarge16X16.data,\n indeterminateIndicator: minus16X16.data\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleCheckbox());\nexport const checkboxTag = 'nimble-checkbox';\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ni/nimble-components",
3
- "version": "29.2.1",
3
+ "version": "29.2.3",
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",