@ni/nimble-components 29.1.1 → 29.1.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.
- package/dist/all-components-bundle.js +10 -5
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +2354 -2349
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/select/styles.js +3 -3
- package/dist/esm/select/styles.js.map +1 -1
- package/dist/esm/select/template.js +2 -2
- package/dist/esm/select/template.js.map +1 -1
- package/dist/esm/text-field/styles.js +6 -2
- package/dist/esm/text-field/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@ import { css } from '@microsoft/fast-element';
|
|
|
2
2
|
import { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';
|
|
3
3
|
import { styles as dropdownStyles } from '../patterns/dropdown/styles';
|
|
4
4
|
import { styles as errorStyles } from '../patterns/error/styles';
|
|
5
|
-
import { borderRgbPartialColor, borderWidth, controlHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, mediumPadding, placeholderFontColor, smallPadding } from '../theme-provider/design-tokens';
|
|
5
|
+
import { borderRgbPartialColor, borderWidth, controlHeight, controlSlimHeight, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, iconColor, mediumPadding, placeholderFontColor, smallPadding } from '../theme-provider/design-tokens';
|
|
6
6
|
import { appearanceBehavior } from '../utilities/style/appearance';
|
|
7
7
|
import { DropdownAppearance } from './types';
|
|
8
8
|
import { focusVisible } from '../utilities/style/focus';
|
|
@@ -27,8 +27,7 @@ export const styles = css `
|
|
|
27
27
|
|
|
28
28
|
.clear-button {
|
|
29
29
|
order: 3;
|
|
30
|
-
|
|
31
|
-
height: auto;
|
|
30
|
+
height: ${controlSlimHeight};
|
|
32
31
|
margin-left: ${smallPadding};
|
|
33
32
|
}
|
|
34
33
|
|
|
@@ -90,6 +89,7 @@ export const styles = css `
|
|
|
90
89
|
|
|
91
90
|
.filter-icon {
|
|
92
91
|
padding-left: ${smallPadding};
|
|
92
|
+
${iconColor.cssCustomProperty}: ${placeholderFontColor};
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
.filter-input {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;MAEX;AACE;gGACgG,CAAC,EACrG;;;iBAGa,oBAAoB
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/select/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,kDAAkD,CAAC;AACzE,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EACH,qBAAqB,EACrB,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,SAAS,EACT,aAAa,EACb,oBAAoB,EACpB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAE9D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,cAAc;MACd,WAAW;;MAEX;AACE;gGACgG,CAAC,EACrG;;;iBAGa,oBAAoB;;;;;;;;;kBASnB,iBAAiB;uBACZ,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA+BjB,aAAa;;;;;;;;8BAQD,qBAAqB;uBAC5B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIrC,WAAW;;;;;;;8BAOf,qBAAqB;oBAC/B,aAAa,MAAM,YAAY,MAAM,WAAW;;;;kCAIlC,WAAW;;;;wBAIrB,YAAY;UAC1B,SAAS,CAAC,iBAAiB,KAAK,oBAAoB;;;;;;;;;qBASzC,YAAY,MAAM,aAAa;;;;;iBAKnC,oBAAoB;;;mBAGlB,YAAY;;;;;;;;;;;;;4BAaH,cAAc;;;;4BAId,iBAAiB;;;;4BAIjB,sBAAsB;;;;iBAIjC,oBAAoB;kBACnB,aAAa;;;mBAGZ,YAAY,IAAI,aAAa;;CAE/C,CAAC,aAAa,CACX,kBAAkB,CACd,kBAAkB,CAAC,KAAK,EACxB,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;8BAGmB,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC;;SAEnD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { styles as dropdownStyles } from '../patterns/dropdown/styles';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport {\n borderRgbPartialColor,\n borderWidth,\n controlHeight,\n controlSlimHeight,\n fillHoverColor,\n fillHoverSelectedColor,\n fillSelectedColor,\n iconColor,\n mediumPadding,\n placeholderFontColor,\n smallPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { DropdownAppearance } from './types';\nimport { focusVisible } from '../utilities/style/focus';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { Theme } from '../theme-provider/types';\nimport { hexToRgbaCssColor } from '../utilities/style/colors';\n\nexport const styles = css`\n ${dropdownStyles}\n ${errorStyles}\n\n ${\n /* We are using flex `order` to define the visual ordering of the selected value,\n error icon, and dropdown arrow because they are not \"interactive\" i.e. part of the tab order */ ''\n }\n\n .selected-value.placeholder {\n color: ${placeholderFontColor};\n }\n\n .selected-value {\n order: 1;\n }\n\n .clear-button {\n order: 3;\n height: ${controlSlimHeight};\n margin-left: ${smallPadding};\n }\n\n [part='indicator'] {\n order: 4;\n }\n\n .error-icon {\n order: 2;\n }\n\n [part='end'] {\n display: contents;\n }\n\n .listbox {\n overflow-x: clip;\n }\n\n .listbox.empty slot {\n display: none;\n }\n\n .listbox.above {\n flex-flow: column-reverse;\n }\n\n .filter-field {\n display: flex;\n flex-direction: row;\n align-items: center;\n height: ${controlHeight};\n background: transparent;\n }\n\n .filter-field::before {\n content: '';\n position: absolute;\n height: 0px;\n border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n bottom: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n }\n\n .filter-field.above::before {\n width: calc(100% - (2 * ${borderWidth}));\n }\n\n .filter-field::after {\n content: '';\n position: absolute;\n height: 0px;\n border-bottom: rgba(${borderRgbPartialColor}, 0.1) 2px solid;\n top: calc(${controlHeight} + ${smallPadding} - ${borderWidth});\n }\n\n .filter-field:not(.above)::after {\n width: calc(100% - (2 * ${borderWidth}));\n }\n\n .filter-icon {\n padding-left: ${smallPadding};\n ${iconColor.cssCustomProperty}: ${placeholderFontColor};\n }\n\n .filter-input {\n background: transparent;\n border: none;\n color: inherit;\n font: inherit;\n height: var(--ni-nimble-control-height);\n padding: 0 ${smallPadding} 0 ${mediumPadding};\n width: 100%;\n }\n\n .filter-input::placeholder {\n color: ${placeholderFontColor};\n }\n\n .filter-input${focusVisible} {\n outline: 0px;\n }\n\n .scrollable-region {\n overflow: auto;\n }\n\n ::slotted([role='option']) {\n background-color: transparent;\n }\n\n ::slotted([role='option']:hover) {\n background-color: ${fillHoverColor};\n }\n\n ::slotted([role='option'][active-option]) {\n background-color: ${fillSelectedColor};\n }\n\n ::slotted([role='option'][active-option]:hover) {\n background-color: ${fillHoverSelectedColor};\n }\n\n .no-results-label {\n color: ${placeholderFontColor};\n height: ${controlHeight};\n display: inline-flex;\n align-items: center;\n padding: ${smallPadding} ${mediumPadding};\n }\n`.withBehaviors(\n appearanceBehavior(\n DropdownAppearance.block,\n css`\n :host([error-visible]) .control {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n .filter-field,\n .no-results-label {\n background: ${hexToRgbaCssColor(White, 0.15)};\n }\n `\n )\n);\n"]}
|
|
@@ -7,7 +7,7 @@ import { iconMagnifyingGlassTag } from '../icons/magnifying-glass';
|
|
|
7
7
|
import { filterNoResultsLabel, filterSearchLabel } from '../label-provider/core/label-tokens';
|
|
8
8
|
import { FilterMode } from './types';
|
|
9
9
|
import { buttonTag } from '../button';
|
|
10
|
-
import {
|
|
10
|
+
import { iconTimesTag } from '../icons/times';
|
|
11
11
|
/* eslint-disable @typescript-eslint/indent */
|
|
12
12
|
// prettier-ignore
|
|
13
13
|
export const template = (context, definition) => html `
|
|
@@ -54,7 +54,7 @@ export const template = (context, definition) => html `
|
|
|
54
54
|
content-hidden
|
|
55
55
|
appearance="ghost"
|
|
56
56
|
@click="${(x, c) => x.clearClickHandler(c.event)}">
|
|
57
|
-
<${
|
|
57
|
+
<${iconTimesTag} slot="start"></${iconTimesTag}>
|
|
58
58
|
</${buttonTag}>
|
|
59
59
|
`)}
|
|
60
60
|
<div aria-hidden="true" class="indicator" part="indicator">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/select/template.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n html,\n ref,\n slotted,\n ViewTemplate,\n when\n} from '@microsoft/fast-element';\nimport {\n endSlotTemplate,\n FoundationElementTemplate,\n SelectOptions,\n startSlotTemplate,\n isListboxOption\n} from '@microsoft/fast-foundation';\nimport type { Select } from '.';\nimport { anchoredRegionTag } from '../anchored-region';\nimport { DropdownPosition } from '../patterns/dropdown/types';\nimport { overflow } from '../utilities/directive/overflow';\nimport { iconMagnifyingGlassTag } from '../icons/magnifying-glass';\nimport {\n filterNoResultsLabel,\n filterSearchLabel\n} from '../label-provider/core/label-tokens';\nimport { FilterMode } from './types';\nimport { buttonTag } from '../button';\nimport { iconXmarkTag } from '../icons/xmark';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<Select>,\nSelectOptions\n> = (context, definition) => html<Select>`\n <template\n class=\"${x => [\n x.collapsible && 'collapsible',\n x.collapsible && x.open && 'open',\n x.disabled && 'disabled',\n x.collapsible && x.position,\n ].filter(Boolean).join(' ')}\"\n aria-activedescendant=\"${x => (x.filterMode === FilterMode.none ? x.ariaActiveDescendant : null)}\"\n aria-controls=\"${x => (x.filterMode === FilterMode.none ? x.ariaControls : null)}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-expanded=\"${x => x.ariaExpanded}\"\n aria-haspopup=\"${x => (x.collapsible ? 'listbox' : null)}\"\n aria-multiselectable=\"${x => x.ariaMultiSelectable}\"\n ?open=\"${x => x.open}\"\n role=\"combobox\"\n tabindex=\"${x => (!x.disabled ? '0' : null)}\"\n @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n @contentchange=\"${x => x.updateDisplayValue()}\"\n @focusin=\"${(x, c) => x.focusinHandler(c.event as FocusEvent)}\"\n @focusout=\"${(x, c) => x.focusoutHandler(c.event as FocusEvent)}\"\n @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n @mousedown=\"${(x, c) => x.mousedownHandler(c.event as MouseEvent)}\"\n >\n ${when(x => x.collapsible, html<Select>`\n <div\n class=\"control\"\n part=\"control\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('control')}\n >\n ${startSlotTemplate(context, definition)}\n <slot name=\"button-container\">\n <div class=\"selected-value ${x => (x.displayPlaceholder ? 'placeholder' : '')}\" part=\"selected-value\" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>\n <slot name=\"selected-value\">${x => x.displayValue}</slot>\n </div>\n ${when(x => !x.disabled && x.clearable && !x.displayPlaceholder && x.selectedIndex >= 0, html<Select>`\n <${buttonTag} \n class=\"clear-button\"\n tabindex=\"-1\"\n part=\"clear-button\"\n content-hidden\n appearance=\"ghost\"\n @click=\"${(x, c) => x.clearClickHandler(c.event as MouseEvent)}\">\n <${iconXmarkTag} slot=\"start\"></${iconXmarkTag}>\n </${buttonTag}>\n `)}\n <div aria-hidden=\"true\" class=\"indicator\" part=\"indicator\">\n <slot name=\"indicator\">\n ${definition.indicator || ''}\n </slot>\n </div>\n </slot>\n ${endSlotTemplate(context, definition)}\n </div>\n `)\n }\n <${anchoredRegionTag}\n ${ref('anchoredRegion')}\n class=\"anchored-region\"\n fixed-placement\n auto-update-mode=\"auto\"\n vertical-default-position=\"${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}\"\n vertical-positioning-mode=\"${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}\"\n horizontal-default-position=\"center\"\n horizontal-positioning-mode=\"locktodefault\"\n horizontal-scaling=\"anchor\"\n @loaded=\"${x => x.regionLoadedHandler()}\"\n ?hidden=\"${x => (x.collapsible ? !x.open : false)}\">\n <div class=\"listbox-background\">\n <div\n class=\"\n listbox \n ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}\n ${x => x.positionAttribute}\n \"\n id=\"${x => x.listboxId}\"\n part=\"listbox\"\n role=\"listbox\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('listbox')}\n >\n ${when(x => x.filterMode !== FilterMode.none, html<Select>`\n <div class=\"filter-field ${x => x.positionAttribute}\">\n <${iconMagnifyingGlassTag} class=\"filter-icon\"></${iconMagnifyingGlassTag}>\n <input\n ${ref('filterInput')}\n class=\"filter-input\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-activedescendant=\"${x => x.ariaActiveDescendant}\"\n @input=\"${(x, c) => x.inputHandler(c.event as InputEvent)}\"\n @click=\"${(x, c) => x.inputClickHandler(c.event as MouseEvent)}\"\n placeholder=\"${x => filterSearchLabel.getValueFor(x)}\"\n value=\"${x => x.filter}\"\n />\n </div>\n `)}\n <div ${ref('scrollableRegion')}\n class=\"scrollable-region\">\n <slot\n ${slotted({\n filter: (n: Node) => n instanceof HTMLElement && isListboxOption(n),\n flatten: true,\n property: 'slottedOptions',\n })}\n ></slot>\n </div>\n ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0), html<Select>`\n <span class=\"no-results-label ${x => x.positionAttribute}\">\n ${x => filterNoResultsLabel.getValueFor(x)}\n </span>\n `)}\n </div>\n </div>\n </${anchoredRegionTag}>\n </template>\n`;\n"]}
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/select/template.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n html,\n ref,\n slotted,\n ViewTemplate,\n when\n} from '@microsoft/fast-element';\nimport {\n endSlotTemplate,\n FoundationElementTemplate,\n SelectOptions,\n startSlotTemplate,\n isListboxOption\n} from '@microsoft/fast-foundation';\nimport type { Select } from '.';\nimport { anchoredRegionTag } from '../anchored-region';\nimport { DropdownPosition } from '../patterns/dropdown/types';\nimport { overflow } from '../utilities/directive/overflow';\nimport { iconMagnifyingGlassTag } from '../icons/magnifying-glass';\nimport {\n filterNoResultsLabel,\n filterSearchLabel\n} from '../label-provider/core/label-tokens';\nimport { FilterMode } from './types';\nimport { buttonTag } from '../button';\nimport { iconTimesTag } from '../icons/times';\n\n/* eslint-disable @typescript-eslint/indent */\n// prettier-ignore\nexport const template: FoundationElementTemplate<\nViewTemplate<Select>,\nSelectOptions\n> = (context, definition) => html<Select>`\n <template\n class=\"${x => [\n x.collapsible && 'collapsible',\n x.collapsible && x.open && 'open',\n x.disabled && 'disabled',\n x.collapsible && x.position,\n ].filter(Boolean).join(' ')}\"\n aria-activedescendant=\"${x => (x.filterMode === FilterMode.none ? x.ariaActiveDescendant : null)}\"\n aria-controls=\"${x => (x.filterMode === FilterMode.none ? x.ariaControls : null)}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-expanded=\"${x => x.ariaExpanded}\"\n aria-haspopup=\"${x => (x.collapsible ? 'listbox' : null)}\"\n aria-multiselectable=\"${x => x.ariaMultiSelectable}\"\n ?open=\"${x => x.open}\"\n role=\"combobox\"\n tabindex=\"${x => (!x.disabled ? '0' : null)}\"\n @click=\"${(x, c) => x.clickHandler(c.event as MouseEvent)}\"\n @contentchange=\"${x => x.updateDisplayValue()}\"\n @focusin=\"${(x, c) => x.focusinHandler(c.event as FocusEvent)}\"\n @focusout=\"${(x, c) => x.focusoutHandler(c.event as FocusEvent)}\"\n @keydown=\"${(x, c) => x.keydownHandler(c.event as KeyboardEvent)}\"\n @mousedown=\"${(x, c) => x.mousedownHandler(c.event as MouseEvent)}\"\n >\n ${when(x => x.collapsible, html<Select>`\n <div\n class=\"control\"\n part=\"control\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('control')}\n >\n ${startSlotTemplate(context, definition)}\n <slot name=\"button-container\">\n <div class=\"selected-value ${x => (x.displayPlaceholder ? 'placeholder' : '')}\" part=\"selected-value\" ${overflow('hasOverflow')} title=${x => (x.hasOverflow && x.displayValue ? x.displayValue : null)}>\n <slot name=\"selected-value\">${x => x.displayValue}</slot>\n </div>\n ${when(x => !x.disabled && x.clearable && !x.displayPlaceholder && x.selectedIndex >= 0, html<Select>`\n <${buttonTag} \n class=\"clear-button\"\n tabindex=\"-1\"\n part=\"clear-button\"\n content-hidden\n appearance=\"ghost\"\n @click=\"${(x, c) => x.clearClickHandler(c.event as MouseEvent)}\">\n <${iconTimesTag} slot=\"start\"></${iconTimesTag}>\n </${buttonTag}>\n `)}\n <div aria-hidden=\"true\" class=\"indicator\" part=\"indicator\">\n <slot name=\"indicator\">\n ${definition.indicator || ''}\n </slot>\n </div>\n </slot>\n ${endSlotTemplate(context, definition)}\n </div>\n `)\n }\n <${anchoredRegionTag}\n ${ref('anchoredRegion')}\n class=\"anchored-region\"\n fixed-placement\n auto-update-mode=\"auto\"\n vertical-default-position=\"${x => (x.positionAttribute === DropdownPosition.above ? 'top' : 'bottom')}\"\n vertical-positioning-mode=\"${x => (!x.positionAttribute ? 'dynamic' : 'locktodefault')}\"\n horizontal-default-position=\"center\"\n horizontal-positioning-mode=\"locktodefault\"\n horizontal-scaling=\"anchor\"\n @loaded=\"${x => x.regionLoadedHandler()}\"\n ?hidden=\"${x => (x.collapsible ? !x.open : false)}\">\n <div class=\"listbox-background\">\n <div\n class=\"\n listbox \n ${x => (x.filteredOptions.length === 0 ? 'empty' : '')}\n ${x => x.positionAttribute}\n \"\n id=\"${x => x.listboxId}\"\n part=\"listbox\"\n role=\"listbox\"\n ?disabled=\"${x => x.disabled}\"\n ${ref('listbox')}\n >\n ${when(x => x.filterMode !== FilterMode.none, html<Select>`\n <div class=\"filter-field ${x => x.positionAttribute}\">\n <${iconMagnifyingGlassTag} class=\"filter-icon\"></${iconMagnifyingGlassTag}>\n <input\n ${ref('filterInput')}\n class=\"filter-input\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-activedescendant=\"${x => x.ariaActiveDescendant}\"\n @input=\"${(x, c) => x.inputHandler(c.event as InputEvent)}\"\n @click=\"${(x, c) => x.inputClickHandler(c.event as MouseEvent)}\"\n placeholder=\"${x => filterSearchLabel.getValueFor(x)}\"\n value=\"${x => x.filter}\"\n />\n </div>\n `)}\n <div ${ref('scrollableRegion')}\n class=\"scrollable-region\">\n <slot\n ${slotted({\n filter: (n: Node) => n instanceof HTMLElement && isListboxOption(n),\n flatten: true,\n property: 'slottedOptions',\n })}\n ></slot>\n </div>\n ${when(x => (x.filterMode !== FilterMode.none && x.filteredOptions.length === 0), html<Select>`\n <span class=\"no-results-label ${x => x.positionAttribute}\">\n ${x => filterNoResultsLabel.getValueFor(x)}\n </span>\n `)}\n </div>\n </div>\n </${anchoredRegionTag}>\n </template>\n`;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css } from '@microsoft/fast-element';
|
|
2
2
|
import { display } from '../utilities/style/display';
|
|
3
|
-
import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor, mediumPadding
|
|
3
|
+
import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bodyDisabledFontColor, controlHeight, failColor, smallDelay, controlLabelFont, bodyFont, controlLabelFontColor, controlLabelDisabledFontColor, mediumPadding } from '../theme-provider/design-tokens';
|
|
4
4
|
import { appearanceBehavior } from '../utilities/style/appearance';
|
|
5
5
|
import { TextFieldAppearance } from './types';
|
|
6
6
|
import { Theme } from '../theme-provider/types';
|
|
@@ -101,7 +101,11 @@ export const styles = css `
|
|
|
101
101
|
|
|
102
102
|
slot[name='start']::slotted(*) {
|
|
103
103
|
flex: none;
|
|
104
|
-
|
|
104
|
+
opacity: 0.6;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
:host([disabled]) slot[name='start']::slotted(*) {
|
|
108
|
+
opacity: 0.3;
|
|
105
109
|
}
|
|
106
110
|
|
|
107
111
|
.control {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,aAAa,
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,aAAa,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;gBAGD,QAAQ;;UAEd,cAAc;iBACP,aAAa;mDACqB,WAAW;;cAEhD,aAAa,UAAU,WAAW;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;;iCAYb,qBAAqB;eACvC,aAAa;mBACT,WAAW;;;;6BAID,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA0Cd;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;4BAUV,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;UAiB9B,aAAa,CAAC,iBAAiB;;CAExC,CAAC,aAAa,CACX,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,KAAK,EACzB,GAAG,CAAA;;yCAE8B,qBAAqB;;;;gCAI9B,WAAW;iCACV,WAAW;;;;;uCAKL,WAAW;;;;;;;;;yCAST,qBAAqB;;;;;yCAKrB,qBAAqB;;SAErD,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,OAAO,EAC3B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,EACD,kBAAkB,CACd,mBAAmB,CAAC,SAAS,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;iCACV,WAAW;;;;;;SAMnC,CACJ,EACD,aAAa,CACT,KAAK,CAAC,KAAK,EACX,GAAG,CAAA;;;;SAIF,CACJ,EACD,aAAa,CACT,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC,KAAK,CAAC,EACzB,GAAG,CAAA;;;;SAIF,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n failColor,\n smallDelay,\n controlLabelFont,\n bodyFont,\n controlLabelFontColor,\n controlLabelDisabledFontColor,\n mediumPadding\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { TextFieldAppearance } from './types';\nimport { Theme } from '../theme-provider/types';\nimport { themeBehavior } from '../utilities/style/theme';\nimport { styles as errorStyles } from '../patterns/error/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-block')}\n ${errorStyles}\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 .label {\n display: flex;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .root {\n box-sizing: border-box;\n position: relative;\n display: flex;\n flex-direction: row;\n border-radius: 0px;\n font: inherit;\n align-items: center;\n justify-content: center;\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n gap: ${mediumPadding};\n padding: ${borderWidth};\n }\n\n :host([readonly]) .root {\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\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:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([appearance='frameless'][full-bleed]) .root {\n padding-left: 0px;\n padding-right: 0px;\n }\n\n .root::before {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n :host([appearance='frameless'][full-bleed]) .root::before {\n display: none;\n }\n\n .root::after {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n :host([appearance='frameless'][full-bleed]) .root::after {\n display: none;\n }\n\n [part='start'] {\n display: contents;\n }\n\n slot[name='start']::slotted(*) {\n flex: none;\n opacity: 0.6;\n }\n\n :host([disabled]) slot[name='start']::slotted(*) {\n opacity: 0.3;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n color: inherit;\n padding: 0px;\n height: var(--ni-private-height-within-border);\n width: 100%;\n margin-top: auto;\n margin-bottom: auto;\n border: none;\n text-overflow: ellipsis;\n }\n\n .control:hover,\n .control:focus,\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n .control:disabled {\n ${\n /* There's an issue with the input element where the ellipsized\n overflowed text is blank when scrolled into view, so just clip instead.\n See https://webcompat.com/issues/104481 */ ''\n }\n text-overflow: clip;\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .control[disabled]::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n [part='end'] {\n display: contents;\n }\n\n [part='end']::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 [part='end']::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) [part='end']::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) [part='end']::after {\n width: 100%;\n }\n\n :host([disabled]:hover) [part='end']::after,\n :host([readonly]:hover) [part='end']::after {\n width: 0px;\n }\n\n [part='actions'] {\n display: contents;\n }\n\n slot[name='actions']::slotted(*) {\n ${controlHeight.cssCustomProperty}: 24px;\n }\n`.withBehaviors(\n appearanceBehavior(\n TextFieldAppearance.underline,\n css`\n .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.block,\n css`\n .root {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .control {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\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 padding-bottom: 0;\n }\n\n :host([readonly]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n border-color: transparent;\n }\n\n :host([disabled]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.outline,\n css`\n .root {\n border-width: ${borderWidth};\n padding: 0;\n }\n `\n ),\n appearanceBehavior(\n TextFieldAppearance.frameless,\n css`\n .control {\n padding-left: ${borderWidth};\n padding-right: ${borderWidth};\n }\n\n :host([readonly]) .root {\n border-color: transparent;\n }\n `\n ),\n themeBehavior(\n Theme.light,\n css`\n .control::-ms-reveal {\n filter: invert(0%);\n }\n `\n ),\n themeBehavior(\n [Theme.dark, Theme.color],\n css`\n .control::-ms-reveal {\n filter: invert(100%);\n }\n `\n )\n);\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "29.1.
|
|
3
|
+
"version": "29.1.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",
|