@ni/nimble-components 34.8.4 → 34.8.6
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 +0 -3
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/chip/template.js +0 -1
- package/dist/esm/chip/template.js.map +1 -1
- package/dist/esm/patterns/dropdown/styles.js +0 -1
- package/dist/esm/patterns/dropdown/styles.js.map +1 -1
- package/dist/esm/table-column/menu-button/cell-view/templates.js +0 -1
- package/dist/esm/table-column/menu-button/cell-view/templates.js.map +1 -1
- package/dist/esm/table-column/mixins/custom-sort-order.js.map +1 -1
- package/dist/esm/table-column/mixins/fractional-width-column.js.map +1 -1
- package/dist/esm/table-column/mixins/groupable-column.js.map +1 -1
- package/dist/esm/table-column/mixins/placeholder.js.map +1 -1
- package/dist/esm/table-column/mixins/sortable-column.js.map +1 -1
- package/dist/esm/text-field/styles.js +0 -1
- package/dist/esm/text-field/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -4,7 +4,6 @@ import { overflow } from '../utilities/directive/overflow';
|
|
|
4
4
|
import { buttonTag } from '../button';
|
|
5
5
|
import { iconTimesTag } from '../icons/times';
|
|
6
6
|
import { ButtonAppearance } from '../button/types';
|
|
7
|
-
// prettier-ignore
|
|
8
7
|
export const template = (context, definition) => html `
|
|
9
8
|
${startSlotTemplate(context, definition)}
|
|
10
9
|
<span
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/chip/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAqB,MAAM,kBAAkB,CAAC;AAC/E,OAAO,EACH,eAAe,EACf,iBAAiB,EAEpB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/chip/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAqB,MAAM,kBAAkB,CAAC;AAC/E,OAAO,EACH,eAAe,EACf,iBAAiB,EAEpB,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAM;MACjC,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;UAIlC,QAAQ,CAAC,aAAa,CAAC;gBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,kBAAkB;IACvD,CAAC,CAAC,CAAC,CAAC,kBAAkB;IACtB,CAAC,CAAC,IAAI,CAAC;;;cAGG,GAAG,CAAC,aAAa,CAAC;cAClB,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;;;MAGxC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE,IAAI,CAAM;WAC3C,SAAS;;;0BAGM,gBAAgB,CAAC,KAAK;wBACxB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;sBACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE;;eAEjC,YAAY,mBAAmB,YAAY;cAC5C,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;YAC5B,SAAS;KAChB,CAAC;MACA,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;CACzC,CAAC","sourcesContent":["import { html, ref, slotted, when, type ViewTemplate } from '@ni/fast-element';\nimport {\n endSlotTemplate,\n startSlotTemplate,\n type FoundationElementTemplate\n} from '@ni/fast-foundation';\nimport type { Chip, ChipOptions } from '.';\nimport { overflow } from '../utilities/directive/overflow';\nimport { buttonTag } from '../button';\nimport { iconTimesTag } from '../icons/times';\nimport { ButtonAppearance } from '../button/types';\n\nexport const template: FoundationElementTemplate<\nViewTemplate<Chip>,\nChipOptions\n> = (context, definition) => html<Chip>`\n ${startSlotTemplate(context, definition)}\n <span\n class=\"content\"\n part=\"content\"\n ${overflow('hasOverflow')}\n title=${x => (x.hasOverflow && x.elementTextContent\n ? x.elementTextContent\n : null)}\n >\n <slot\n ${ref('contentSlot')}\n ${slotted({ property: 'content' })}\n ></slot>\n </span>\n ${when(x => x.removable && !x.disabled, html<Chip>`\n <${buttonTag}\n class=\"remove-button\"\n content-hidden\n appearance=\"${ButtonAppearance.ghost}\"\n tabindex=\"${x => x.tabIndex}\"\n @click=\"${x => x.handleRemoveClick()}\"\n >\n <${iconTimesTag} slot=\"start\"></${iconTimesTag}>\n ${x => x.removeButtonContent}\n </${buttonTag}>\n `)}\n ${endSlotTemplate(context, definition)}\n`;\n"]}
|
|
@@ -9,7 +9,6 @@ import { focusVisible } from '../../utilities/style/focus';
|
|
|
9
9
|
import { themeBehavior } from '../../utilities/style/theme';
|
|
10
10
|
import { DropdownAppearance } from './types';
|
|
11
11
|
import { userSelectNone } from '../../utilities/style/user-select';
|
|
12
|
-
// prettier-ignore
|
|
13
12
|
export const styles = css `
|
|
14
13
|
${display('inline-flex')}
|
|
15
14
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n bodyDisabledFontColor,\n borderHoverColor,\n borderWidth,\n controlHeight,\n iconSize,\n menuMinWidth,\n popupBorderColor,\n smallDelay,\n smallPadding,\n borderRgbPartialColor,\n mediumPadding,\n failColor,\n elevation2BoxShadow,\n placeholderFontColor,\n controlLabelFontColor,\n controlLabelFont,\n controlLabelDisabledFontColor\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\n// prettier-ignore\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n color: ${bodyFontColor};\n font: ${bodyFont};\n position: relative;\n flex-direction: column;\n justify-content: flex-start;\n ${userSelectNone}\n min-width: ${menuMinWidth};\n outline: none;\n vertical-align: top;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n --ni-private-focus-indicator-width: 1px;\n --ni-private-indicator-lines-gap: 1px;\n }\n\n :host::before {\n content: '';\n position: absolute;\n bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n width: 0px;\n height: 0px;\n align-self: center;\n border-bottom: ${borderHoverColor}\n var(--ni-private-focus-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n :host::before {\n transition-duration: 0s;\n }\n }\n\n :host(${focusVisible})::before {\n width: calc(100% - 8px);\n }\n\n :host([error-visible]):before {\n border-bottom-color: ${failColor};\n }\n\n :host::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 @media (prefers-reduced-motion) {\n :host::after {\n transition-duration: 0s;\n }\n }\n\n :host(:hover)::after,\n :host(${focusVisible})::after {\n width: 100%;\n }\n\n :host([error-visible]):after {\n border-bottom-color: ${failColor};\n }\n\n :host([disabled]:hover)::after {\n width: 0px;\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 .control {\n align-items: center;\n cursor: pointer;\n display: flex;\n width: 100%;\n height: ${controlHeight};\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n background-color: transparent;\n padding: ${borderWidth};\n }\n\n :host([open]:not(:hover)) .control {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([disabled]) .control {\n cursor: default;\n color: ${bodyDisabledFontColor};\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled][appearance-readonly]) .control {\n color: ${bodyFontColor};\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n }\n\n :host([error-visible]) .control,\n :host([error-visible][open]) .control,\n :host([error-visible][disabled]) .control {\n border-bottom-color: ${failColor};\n }\n\n [part='start'] {\n display: none;\n }\n\n .selected-value {\n flex: auto;\n font-family: inherit;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n padding: 0px;\n padding-left: ${mediumPadding};\n }\n\n :host([disabled][appearance-readonly]) .selected-value {\n cursor: text;\n user-select: text;\n -webkit-user-select: text;\n padding-right: ${smallPadding};\n }\n\n .indicator {\n flex: none;\n margin-left: ${smallPadding};\n padding-right: 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n :host([disabled][appearance-readonly]) .indicator {\n display: none;\n }\n\n .indicator slot[name='indicator'] svg {\n width: ${iconSize};\n height: ${iconSize};\n fill: ${bodyFontColor};\n }\n\n :host([disabled]) .indicator slot[name='indicator'] svg {\n fill: ${bodyDisabledFontColor};\n }\n\n [part='end'] {\n margin-inline-start: auto;\n }\n\n :host([open][position='above']) .anchored-region {\n padding-bottom: ${smallPadding};\n }\n\n :host([open][position='below']) .anchored-region {\n padding-top: ${smallPadding};\n }\n\n .listbox {\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n --ni-private-listbox-visible-option-count: 10.5;\n --ni-private-listbox-anchor-element-gap: ${smallPadding};\n --ni-private-listbox-padding: ${smallPadding};\n --ni-private-listbox-filter-height: 0px;\n --ni-private-listbox-loading-indicator-height: 0px;\n max-height: min(\n calc(\n var(--ni-private-listbox-anchor-element-gap) + \n 2 * ${borderWidth} + \n var(--ni-private-listbox-padding) +\n ${controlHeight} * var(--ni-private-listbox-visible-option-count) +\n var(--ni-private-listbox-filter-height) +\n var(--ni-private-listbox-loading-indicator-height)\n ),\n calc(\n var(--ni-private-listbox-available-viewport-height) - \n var(--ni-private-listbox-anchor-element-gap)\n )\n );\n box-shadow: ${elevation2BoxShadow};\n border: ${borderWidth} solid ${popupBorderColor};\n background-color: ${applicationBackgroundColor};\n }\n\n .listbox:has(.filter-field) {\n --ni-private-listbox-filter-height: ${controlHeight};\n }\n\n .listbox:has(.loading-container) {\n --ni-private-listbox-loading-indicator-height: ${controlHeight};\n }\n\n :host([open][position='above']) .listbox {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :host([open][position='below']) .listbox {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n .scrollable-region {\n overflow-y: auto;\n }\n\n .listbox slot {\n display: block;\n background: transparent;\n padding: var(--ni-private-listbox-padding);\n }\n\n .listbox.empty slot {\n display: none;\n }\n\n ::slotted([role='option']),\n ::slotted(option) {\n flex: none;\n }\n\n .no-results-label {\n color: ${placeholderFontColor};\n height: ${controlHeight};\n display: inline-flex;\n display: flex;\n flex: 1 0 auto;\n align-items: center;\n padding: ${smallPadding} ${mediumPadding};\n }\n`.withBehaviors(\n appearanceBehavior(\n DropdownAppearance.underline,\n css`\n .control {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n appearanceBehavior(\n DropdownAppearance.outline,\n css`\n .control {\n border-width: ${borderWidth};\n padding: 0;\n }\n `\n ),\n appearanceBehavior(\n DropdownAppearance.block,\n css`\n .control {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .control:focus-within {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host([disabled]) .control {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n }\n `\n ),\n appearanceBehavior(\n DropdownAppearance.frameless,\n css`\n .control {\n border-width: 0;\n padding: ${borderWidth};\n }\n\n :host([full-bleed]) .selected-value {\n padding-left: 0;\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n .listbox slot {\n background: ${hexToRgbaCssColor(White, 0.15)};\n }\n `\n )\n);\n"]}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/patterns/dropdown/styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css } from '@ni/fast-element';\nimport { White } from '@ni/nimble-tokens/dist/styledictionary/js/tokens';\nimport { display } from '../../utilities/style/display';\nimport {\n applicationBackgroundColor,\n bodyFont,\n bodyFontColor,\n bodyDisabledFontColor,\n borderHoverColor,\n borderWidth,\n controlHeight,\n iconSize,\n menuMinWidth,\n popupBorderColor,\n smallDelay,\n smallPadding,\n borderRgbPartialColor,\n mediumPadding,\n failColor,\n elevation2BoxShadow,\n placeholderFontColor,\n controlLabelFontColor,\n controlLabelFont,\n controlLabelDisabledFontColor\n} from '../../theme-provider/design-tokens';\nimport { Theme } from '../../theme-provider/types';\nimport { appearanceBehavior } from '../../utilities/style/appearance';\nimport { hexToRgbaCssColor } from '../../utilities/style/colors';\nimport { focusVisible } from '../../utilities/style/focus';\nimport { themeBehavior } from '../../utilities/style/theme';\nimport { DropdownAppearance } from './types';\nimport { userSelectNone } from '../../utilities/style/user-select';\n\nexport const styles = css`\n ${display('inline-flex')}\n\n :host {\n color: ${bodyFontColor};\n font: ${bodyFont};\n position: relative;\n flex-direction: column;\n justify-content: flex-start;\n ${userSelectNone}\n min-width: ${menuMinWidth};\n outline: none;\n vertical-align: top;\n --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);\n --ni-private-focus-indicator-width: 1px;\n --ni-private-indicator-lines-gap: 1px;\n }\n\n :host::before {\n content: '';\n position: absolute;\n bottom: calc(${borderWidth} + var(--ni-private-indicator-lines-gap));\n width: 0px;\n height: 0px;\n align-self: center;\n border-bottom: ${borderHoverColor}\n var(--ni-private-focus-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n :host::before {\n transition-duration: 0s;\n }\n }\n\n :host(${focusVisible})::before {\n width: calc(100% - 8px);\n }\n\n :host([error-visible]):before {\n border-bottom-color: ${failColor};\n }\n\n :host::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 @media (prefers-reduced-motion) {\n :host::after {\n transition-duration: 0s;\n }\n }\n\n :host(:hover)::after,\n :host(${focusVisible})::after {\n width: 100%;\n }\n\n :host([error-visible]):after {\n border-bottom-color: ${failColor};\n }\n\n :host([disabled]:hover)::after {\n width: 0px;\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 .control {\n align-items: center;\n cursor: pointer;\n display: flex;\n width: 100%;\n height: ${controlHeight};\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n background-color: transparent;\n padding: ${borderWidth};\n }\n\n :host([open]:not(:hover)) .control {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([disabled]) .control {\n cursor: default;\n color: ${bodyDisabledFontColor};\n border-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([disabled][appearance-readonly]) .control {\n color: ${bodyFontColor};\n border-color: rgba(${borderRgbPartialColor}, 0.3);\n }\n\n :host([error-visible]) .control,\n :host([error-visible][open]) .control,\n :host([error-visible][disabled]) .control {\n border-bottom-color: ${failColor};\n }\n\n [part='start'] {\n display: none;\n }\n\n .selected-value {\n flex: auto;\n font-family: inherit;\n text-align: start;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n padding: 0px;\n padding-left: ${mediumPadding};\n }\n\n :host([disabled][appearance-readonly]) .selected-value {\n cursor: text;\n user-select: text;\n -webkit-user-select: text;\n padding-right: ${smallPadding};\n }\n\n .indicator {\n flex: none;\n margin-left: ${smallPadding};\n padding-right: 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n\n :host([disabled][appearance-readonly]) .indicator {\n display: none;\n }\n\n .indicator slot[name='indicator'] svg {\n width: ${iconSize};\n height: ${iconSize};\n fill: ${bodyFontColor};\n }\n\n :host([disabled]) .indicator slot[name='indicator'] svg {\n fill: ${bodyDisabledFontColor};\n }\n\n [part='end'] {\n margin-inline-start: auto;\n }\n\n :host([open][position='above']) .anchored-region {\n padding-bottom: ${smallPadding};\n }\n\n :host([open][position='below']) .anchored-region {\n padding-top: ${smallPadding};\n }\n\n .listbox {\n display: inline-flex;\n flex-direction: column;\n width: 100%;\n --ni-private-listbox-visible-option-count: 10.5;\n --ni-private-listbox-anchor-element-gap: ${smallPadding};\n --ni-private-listbox-padding: ${smallPadding};\n --ni-private-listbox-filter-height: 0px;\n --ni-private-listbox-loading-indicator-height: 0px;\n max-height: min(\n calc(\n var(--ni-private-listbox-anchor-element-gap) + \n 2 * ${borderWidth} + \n var(--ni-private-listbox-padding) +\n ${controlHeight} * var(--ni-private-listbox-visible-option-count) +\n var(--ni-private-listbox-filter-height) +\n var(--ni-private-listbox-loading-indicator-height)\n ),\n calc(\n var(--ni-private-listbox-available-viewport-height) - \n var(--ni-private-listbox-anchor-element-gap)\n )\n );\n box-shadow: ${elevation2BoxShadow};\n border: ${borderWidth} solid ${popupBorderColor};\n background-color: ${applicationBackgroundColor};\n }\n\n .listbox:has(.filter-field) {\n --ni-private-listbox-filter-height: ${controlHeight};\n }\n\n .listbox:has(.loading-container) {\n --ni-private-listbox-loading-indicator-height: ${controlHeight};\n }\n\n :host([open][position='above']) .listbox {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n\n :host([open][position='below']) .listbox {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n\n .scrollable-region {\n overflow-y: auto;\n }\n\n .listbox slot {\n display: block;\n background: transparent;\n padding: var(--ni-private-listbox-padding);\n }\n\n .listbox.empty slot {\n display: none;\n }\n\n ::slotted([role='option']),\n ::slotted(option) {\n flex: none;\n }\n\n .no-results-label {\n color: ${placeholderFontColor};\n height: ${controlHeight};\n display: inline-flex;\n display: flex;\n flex: 1 0 auto;\n align-items: center;\n padding: ${smallPadding} ${mediumPadding};\n }\n`.withBehaviors(\n appearanceBehavior(\n DropdownAppearance.underline,\n css`\n .control {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n appearanceBehavior(\n DropdownAppearance.outline,\n css`\n .control {\n border-width: ${borderWidth};\n padding: 0;\n }\n `\n ),\n appearanceBehavior(\n DropdownAppearance.block,\n css`\n .control {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n .control:focus-within {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host([disabled]) .control {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n }\n `\n ),\n appearanceBehavior(\n DropdownAppearance.frameless,\n css`\n .control {\n border-width: 0;\n padding: ${borderWidth};\n }\n\n :host([full-bleed]) .selected-value {\n padding-left: 0;\n }\n `\n ),\n themeBehavior(\n Theme.color,\n css`\n .listbox slot {\n background: ${hexToRgbaCssColor(White, 0.15)};\n }\n `\n )\n);\n"]}
|
|
@@ -3,7 +3,6 @@ import { menuButtonTag } from '../../../menu-button';
|
|
|
3
3
|
import { ButtonAppearance } from '../../../menu-button/types';
|
|
4
4
|
import { iconArrowExpanderDownTag } from '../../../icons/arrow-expander-down';
|
|
5
5
|
import { cellViewMenuSlotName } from '../types';
|
|
6
|
-
// prettier-ignore
|
|
7
6
|
export const template = html `
|
|
8
7
|
${when(x => x.showMenuButton, html `
|
|
9
8
|
<${menuButtonTag}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../../../../src/table-column/menu-button/cell-view/templates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EACH,gBAAgB,EAEnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,
|
|
1
|
+
{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../../../../src/table-column/menu-button/cell-view/templates.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EACH,gBAAgB,EAEnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAC;AAEhD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAA+B;MACrD,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,CAA+B;WAC1D,aAAa;cACV,GAAG,CAAC,YAAY,CAAC;0BACL,gBAAgB,CAAC,KAAK;6BACnB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,KAAiD,CAAC;0BAC5F,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE;yBAC/B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,oBAAoB,EAAE;sBAChC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAK,CAAC;oBACxC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,UAAW,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC;;oBAEjD,GAAG,CAAC,WAAW,CAAC,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAW,CAAC,KAAK;eACrE,wBAAwB,iBAAiB,wBAAwB;;0BAEtD,oBAAoB;YAClC,aAAa;KACpB,CAAC;CACL,CAAC","sourcesContent":["import { html, ref, when } from '@ni/fast-element';\nimport type { TableColumnMenuButtonCellView } from '.';\nimport { menuButtonTag } from '../../../menu-button';\nimport {\n ButtonAppearance,\n type MenuButtonToggleEventDetail\n} from '../../../menu-button/types';\nimport { iconArrowExpanderDownTag } from '../../../icons/arrow-expander-down';\nimport { cellViewMenuSlotName } from '../types';\n\nexport const template = html<TableColumnMenuButtonCellView>`\n ${when(x => x.showMenuButton, html<TableColumnMenuButtonCellView>`\n <${menuButtonTag}\n ${ref('menuButton')}\n appearance=\"${ButtonAppearance.ghost}\"\n @beforetoggle=\"${(x, c) => x.onMenuButtonBeforeToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>)}\"\n @mouseover=\"${x => x.onMenuButtonMouseOver()}\"\n @mouseout=\"${x => x.onMenuButtonMouseOut()}\"\n @click=\"${(x, c) => x.onMenuButtonClick(c.event)}\"\n title=${x => (x.hasOverflow ? x.cellRecord!.value : null)}\n >\n <span ${ref('valueSpan')} class=\"value-label\">${x => x.cellRecord!.value}</span>\n <${iconArrowExpanderDownTag} slot=\"end\"></${iconArrowExpanderDownTag}>\n\n <slot name=\"${cellViewMenuSlotName}\" slot=\"menu\"></slot>\n </${menuButtonTag}>\n `)}\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"custom-sort-order.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/custom-sort-order.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,UAAU,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"custom-sort-order.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/custom-sort-order.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,UAAU,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEnE,OAAO,EAAE,wBAAwB,EAAE,MAAM,eAAe,CAAC;AAUzD,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,6BAA6B,CAG3C,IAAW;IACT;;;OAGG;IACH,MAAe,qBAAsB,SAAQ,IAAI;QAAjD;;YAMI,gBAAgB;YACT,uCAAkC,GAAG;gBACxC,YAAY,EAAE,IAAI,CAAC,iCAAiC,CAAC,IAAI,CAAC,IAAI,CAAC;aAClE,CAAC;QAoEN,CAAC;QAlEU,qCAAqC,CACxC,uBAA2C;YAE3C,OAAO,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ;gBAC3C,CAAC,CAAC,IAAI,CAAC,eAAe;gBACtB,CAAC,CAAC,uBAAuB,CAAC;QAClC,CAAC;QAEM,wBAAwB,CAC3B,oBAA8C;YAE9C,OAAO,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ;gBAC3C,CAAC,CAAC,wBAAwB,CAAC,KAAK;gBAChC,CAAC,CAAC,oBAAoB,CAAC;QAC/B,CAAC;QAED,gBAAgB;QACT,sBAAsB;YACzB,IAAI,CAAC,6BAA6B,EAAE,CAAC;YACrC,IAAI,CAAC,iCAAiC,EAAE,CAAC;YAEzC,IACI,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ;mBACrC,CAAC,IAAI,CAAC,6BAA6B,EACxC,CAAC;gBACC,IAAI,CAAC,6BAA6B,GAAG,UAAU,CAAC,WAAW,CACvD,IAAI,CAAC,eAAe,CACvB,CAAC;gBACF,IAAI,CAAC,6BAA6B,CAAC,SAAS,CACxC,IAAI,CAAC,kCAAkC,CAC1C,CAAC;YACN,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,6BAA6B,EAAE,WAAW,CAC3C,IAAI,CAAC,kCAAkC,CAC1C,CAAC;gBACF,IAAI,CAAC,6BAA6B,GAAG,SAAS,CAAC;YACnD,CAAC;QACL,CAAC;QAID,gBAAgB;QACT,iCAAiC,CACpC,OAAgB,EAChB,IAAa;YAEb,IAAI,IAAI,KAAK,kBAAkB,EAAE,CAAC;gBAC9B,IAAI,CAAC,iCAAiC,EAAE,CAAC;YAC7C,CAAC;QACL,CAAC;QAED,gBAAgB;QACT,iCAAiC;YACpC,MAAM,sBAAsB,GAAG,OAAO,IAAI,CAAC,eAAe,KAAK,QAAQ,CAAC;YACxE,MAAM,iBAAiB,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC;YACjE,MAAM,OAAO,GAAG,CAAC,iBAAiB,IAAI,CAAC,sBAAsB,CAAC;YAC9D,IAAI,OAAO,EAAE,CAAC;gBACV,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,OAAO,CAClC,+BAA+B,CAClC,CAAC;YACN,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,KAAK,CAChC,+BAA+B,CAClC,CAAC;YACN,CAAC;QACL,CAAC;KACJ;IAED,IAAI,CAAC,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC,CACrC,qBAAqB,CAAC,SAAS,EAC/B,iBAAiB,CACpB,CAAC;IAEF,OAAO,qBAAqB,CAAC;AACjC,CAAC","sourcesContent":["import { type Notifier, Observable, attr } from '@ni/fast-element';\nimport type { TableColumn } from '../base';\nimport { TableColumnSortOperation } from '../base/types';\nimport type { ColumnValidator } from '../base/models/column-validator';\n\n// Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)\ntype CustomSortOrderTableColumn<\n TColumnValidator extends ColumnValidator<['invalidCustomSortWithGrouping']>\n> = Pick<TableColumn<unknown, TColumnValidator>, 'columnInternals'>;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype CustomSortOrderTableColumnConstructor<TColumnValidator extends ColumnValidator<['invalidCustomSortWithGrouping']>> = abstract new (...args: any[]) => CustomSortOrderTableColumn<TColumnValidator>;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinCustomSortOrderColumnAPI<\n TBase extends CustomSortOrderTableColumnConstructor<TColumnValidator>,\n TColumnValidator extends ColumnValidator<['invalidCustomSortWithGrouping']>\n>(base: TBase) {\n /**\n * The Mixin that provides a concrete column with the API to allow sorting\n * by a field other than the default for that column.\n */\n abstract class CustomSortOrderColumn extends base {\n public sortByFieldName?: string;\n\n /** @internal */\n public customSortOrderColumnNotifier?: Notifier;\n\n /** @internal */\n public customSortOrderColumnChangeHandler = {\n handleChange: this.handleCustomSortOrderColumnChange.bind(this)\n };\n\n public getResolvedOperandDataRecordFieldName(\n initialOperandFieldName: string | undefined\n ): string | undefined {\n return typeof this.sortByFieldName === 'string'\n ? this.sortByFieldName\n : initialOperandFieldName;\n }\n\n public getResolvedSortOperation(\n initialSortOperation: TableColumnSortOperation\n ): TableColumnSortOperation {\n return typeof this.sortByFieldName === 'string'\n ? TableColumnSortOperation.basic\n : initialSortOperation;\n }\n\n /** @internal */\n public sortByFieldNameChanged(): void {\n this.handleSortConfigurationChange();\n this.updateCustomColumnSortingValidity();\n\n if (\n typeof this.sortByFieldName === 'string'\n && !this.customSortOrderColumnNotifier\n ) {\n this.customSortOrderColumnNotifier = Observable.getNotifier(\n this.columnInternals\n );\n this.customSortOrderColumnNotifier.subscribe(\n this.customSortOrderColumnChangeHandler\n );\n } else {\n this.customSortOrderColumnNotifier?.unsubscribe(\n this.customSortOrderColumnChangeHandler\n );\n this.customSortOrderColumnNotifier = undefined;\n }\n }\n\n public abstract handleSortConfigurationChange(): void;\n\n /** @internal */\n public handleCustomSortOrderColumnChange(\n _source: unknown,\n args: unknown\n ): void {\n if (args === 'groupingDisabled') {\n this.updateCustomColumnSortingValidity();\n }\n }\n\n /** @internal */\n public updateCustomColumnSortingValidity(): void {\n const hasCustomColumnSorting = typeof this.sortByFieldName === 'string';\n const isGroupingEnabled = !this.columnInternals.groupingDisabled;\n const isValid = !isGroupingEnabled || !hasCustomColumnSorting;\n if (isValid) {\n this.columnInternals.validator.untrack(\n 'invalidCustomSortWithGrouping'\n );\n } else {\n this.columnInternals.validator.track(\n 'invalidCustomSortWithGrouping'\n );\n }\n }\n }\n\n attr({ attribute: 'sort-by-field-name' })(\n CustomSortOrderColumn.prototype,\n 'sortByFieldName'\n );\n\n return CustomSortOrderColumn;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fractional-width-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/fractional-width-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEjE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"fractional-width-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/fractional-width-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEjE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAO7E,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,6BAA6B,CAE3C,IAAW;IACT;;;OAGG;IACH,MAAe,qBAAsB,SAAQ,IAAI;QAKtC,sBAAsB;YACzB,IAAI,CAAC,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,IAAI,sBAAsB,CAAC;QAC1F,CAAC;QAEM,oBAAoB;YACvB,IAAI,CAAC,eAAe,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,IAAI,oBAAoB,CAAC;QACpF,CAAC;KACJ;IAED,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC,CACvE,qBAAqB,CAAC,SAAS,EAC/B,iBAAiB,CACpB,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC,CACtE,qBAAqB,CAAC,SAAS,EAC/B,eAAe,CAClB,CAAC;IACF,OAAO,qBAAqB,CAAC;AACjC,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@ni/fast-element';\nimport type { TableColumn } from '../base';\nimport { defaultMinPixelWidth, defaultFractionalWidth } from '../base/types';\n\n// Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)\ntype SizedTableColumn = Pick<TableColumn, 'columnInternals'>;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype SizedTableColumnConstructor = abstract new (...args: any[]) => SizedTableColumn;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinFractionalWidthColumnAPI<\n TBase extends SizedTableColumnConstructor\n>(base: TBase) {\n /**\n * The Mixin that provides a concrete column with the API to support being resized\n * proportionally within a Table.\n */\n abstract class FractionalWidthColumn extends base {\n public fractionalWidth?: number | null;\n\n public minPixelWidth?: number | null;\n\n public fractionalWidthChanged(): void {\n this.columnInternals.fractionalWidth = this.fractionalWidth ?? defaultFractionalWidth;\n }\n\n public minPixelWidthChanged(): void {\n this.columnInternals.minPixelWidth = this.minPixelWidth ?? defaultMinPixelWidth;\n }\n }\n\n attr({ attribute: 'fractional-width', converter: nullableNumberConverter })(\n FractionalWidthColumn.prototype,\n 'fractionalWidth'\n );\n attr({ attribute: 'min-pixel-width', converter: nullableNumberConverter })(\n FractionalWidthColumn.prototype,\n 'minPixelWidth'\n );\n return FractionalWidthColumn;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"groupable-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/groupable-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"groupable-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/groupable-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAQjE,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,uBAAuB,CAErC,IAAW;IACT;;;OAGG;IACH,MAAe,eAAgB,SAAQ,IAAI;QAA3C;;YACW,qBAAgB,GAAG,KAAK,CAAC;QAWpC,CAAC;QAPU,uBAAuB;YAC1B,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAClE,CAAC;QAEM,iBAAiB;YACpB,IAAI,CAAC,eAAe,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,SAAS,CAAC;QACnE,CAAC;KACJ;IACD,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CACrD,eAAe,CAAC,SAAS,EACzB,kBAAkB,CACrB,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC,CAClE,eAAe,CAAC,SAAS,EACzB,YAAY,CACf,CAAC;IAEF,OAAO,eAAe,CAAC;AAC3B,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@ni/fast-element';\nimport type { TableColumn } from '../base';\n\n// Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)\ntype GroupableTableColumn = Pick<TableColumn, 'columnInternals'>;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype GroupableTableColumnConstructor = abstract new (...args: any[]) => GroupableTableColumn;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinGroupableColumnAPI<\n TBase extends GroupableTableColumnConstructor\n>(base: TBase) {\n /**\n * The Mixin that provides a concrete column with the API to allow grouping\n * by the values in that column.\n */\n abstract class GroupableColumn extends base {\n public groupingDisabled = false;\n\n public groupIndex?: number | null;\n\n public groupingDisabledChanged(): void {\n this.columnInternals.groupingDisabled = this.groupingDisabled;\n }\n\n public groupIndexChanged(): void {\n this.columnInternals.groupIndex = this.groupIndex ?? undefined;\n }\n }\n attr({ attribute: 'grouping-disabled', mode: 'boolean' })(\n GroupableColumn.prototype,\n 'groupingDisabled'\n );\n attr({ attribute: 'group-index', converter: nullableNumberConverter })(\n GroupableColumn.prototype,\n 'groupIndex'\n );\n\n return GroupableColumn;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"placeholder.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/placeholder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"placeholder.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/placeholder.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AASxC,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,6BAA6B,CAE3C,IAAW;IACT;;;OAGG;IACH,MAAe,qBAAsB,SAAQ,IAAI;KAKhD;IACD,IAAI,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,CAC9B,qBAAqB,CAAC,SAAS,EAC/B,aAAa,CAChB,CAAC;IAEF,OAAO,qBAAqB,CAAC;AACjC,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport type { TableColumn } from '../base';\n\n// Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)\n// Because the 'placeholder' mixin doesn't depend on any properties of the TableColumn, there are no properties to pick.\ntype TableColumnWithPlaceholder = Pick<TableColumn, never>;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype TableColumnWithPlaceholderConstructor = abstract new (...args: any[]) => TableColumnWithPlaceholder;\n\n// As the returned class is internal to the function, we can't write a signature that uses it directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinColumnWithPlaceholderAPI<\n TBase extends TableColumnWithPlaceholderConstructor\n>(base: TBase) {\n /**\n * The Mixin that provides a concrete column with the API to allow grouping\n * by the values in that column.\n */\n abstract class ColumnWithPlaceholder extends base {\n public placeholder?: string;\n\n /** @internal */\n public abstract placeholderChanged(): void;\n }\n attr({ attribute: 'placeholder' })(\n ColumnWithPlaceholder.prototype,\n 'placeholder'\n );\n\n return ColumnWithPlaceholder;\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sortable-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/sortable-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEjE,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"sortable-column.js","sourceRoot":"","sources":["../../../../src/table-column/mixins/sortable-column.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,uBAAuB,EAAE,MAAM,kBAAkB,CAAC;AAEjE,OAAO,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;AAO7D,4HAA4H;AAC5H,+HAA+H;AAC/H,MAAM,UAAU,sBAAsB,CAEpC,IAAW;IACT;;;OAGG;IACH,MAAe,cAAe,SAAQ,IAAI;QAA1C;;YACW,oBAAe,GAAG,KAAK,CAAC;YAIxB,kBAAa,GAA6B,wBAAwB,CAAC,IAAI,CAAC;QA2BnF,CAAC;QAzBG,gBAAgB;QACT,sBAAsB;YACzB,IAAI,CAAC,eAAe,CAAC,eAAe,GAAG,IAAI,CAAC,eAAe,CAAC;YAC5D,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;gBACvB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,wBAAwB,CAAC,IAAI,CAAC;gBAC1E,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,SAAS,CAAC;YACtD,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC;gBAC/D,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC;YACxE,CAAC;QACL,CAAC;QAED,gBAAgB;QACT,oBAAoB;YACvB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;gBACxB,IAAI,CAAC,eAAe,CAAC,oBAAoB,GAAG,IAAI,CAAC,aAAa,CAAC;YACnE,CAAC;QACL,CAAC;QAED,gBAAgB;QACT,gBAAgB;YACnB,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE,CAAC;gBACxB,IAAI,CAAC,eAAe,CAAC,gBAAgB,GAAG,IAAI,CAAC,SAAS,IAAI,SAAS,CAAC;YACxE,CAAC;QACL,CAAC;KACJ;IACD,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CACpD,cAAc,CAAC,SAAS,EACxB,iBAAiB,CACpB,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,uBAAuB,EAAE,CAAC,CACjE,cAAc,CAAC,SAAS,EACxB,WAAW,CACd,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,EAAE,gBAAgB,EAAE,CAAC,CACjC,cAAc,CAAC,SAAS,EACxB,eAAe,CAClB,CAAC;IAEF,OAAO,cAAc,CAAC;AAC1B,CAAC","sourcesContent":["import { attr, nullableNumberConverter } from '@ni/fast-element';\nimport type { TableColumn } from '../base';\nimport { TableColumnSortDirection } from '../../table/types';\n\n// Pick just the relevant properties the mixin depends on (typescript complains if the mixin declares private / protected base exports)\ntype SortableTableColumn = Pick<TableColumn, 'columnInternals'>;\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype SortableTableColumnConstructor = abstract new (...args: any[]) => SortableTableColumn;\n\n// As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type\nexport function mixinSortableColumnAPI<\n TBase extends SortableTableColumnConstructor\n>(base: TBase) {\n /**\n * The Mixin that provides a concrete column with the API to allow sorting\n * by the values in that column.\n */\n abstract class SortableColumn extends base {\n public sortingDisabled = false;\n\n public sortIndex?: number | null;\n\n public sortDirection: TableColumnSortDirection = TableColumnSortDirection.none;\n\n /** @internal */\n public sortingDisabledChanged(): void {\n this.columnInternals.sortingDisabled = this.sortingDisabled;\n if (this.sortingDisabled) {\n this.columnInternals.currentSortDirection = TableColumnSortDirection.none;\n this.columnInternals.currentSortIndex = undefined;\n } else {\n this.columnInternals.currentSortDirection = this.sortDirection;\n this.columnInternals.currentSortIndex = this.sortIndex ?? undefined;\n }\n }\n\n /** @internal */\n public sortDirectionChanged(): void {\n if (!this.sortingDisabled) {\n this.columnInternals.currentSortDirection = this.sortDirection;\n }\n }\n\n /** @internal */\n public sortIndexChanged(): void {\n if (!this.sortingDisabled) {\n this.columnInternals.currentSortIndex = this.sortIndex ?? undefined;\n }\n }\n }\n attr({ attribute: 'sorting-disabled', mode: 'boolean' })(\n SortableColumn.prototype,\n 'sortingDisabled'\n );\n attr({ attribute: 'sort-index', converter: nullableNumberConverter })(\n SortableColumn.prototype,\n 'sortIndex'\n );\n attr({ attribute: 'sort-direction' })(\n SortableColumn.prototype,\n 'sortDirection'\n );\n\n return SortableColumn;\n}\n"]}
|
|
@@ -8,7 +8,6 @@ import { themeBehavior } from '../utilities/style/theme';
|
|
|
8
8
|
import { styles as errorStyles } from '../patterns/error/styles';
|
|
9
9
|
import { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';
|
|
10
10
|
import { userSelectNone } from '../utilities/style/user-select';
|
|
11
|
-
// prettier-ignore
|
|
12
11
|
export const styles = css `
|
|
13
12
|
${display('inline-block')}
|
|
14
13
|
${errorStyles}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,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,YAAY,EACf,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,MAAM,IAAI,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACtF,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,kBAAkB;AAClB,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;;;;;;iBAM/B,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;iCAWL,qBAAqB;eACvC,YAAY;mBACR,WAAW;6BACD,WAAW,MAAM,YAAY;;;;6BAI7B,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;;wBAcA,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAiC1B;AACE;;6CAE6C,CAAC,EAClD;;;;;;;;;iBASS,qBAAqB;;;;iBAIrB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;kCAUJ,WAAW,MAAM,YAAY;4BACnC,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;;gCAEX,YAAY;;SAEnC,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 '@ni/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 smallPadding\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 { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';\nimport { userSelectNone } from '../utilities/style/user-select';\n\n// prettier-ignore\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 --ni-private-default-start-slot-opacity: 0.6;\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 border-radius: 0px;\n font: inherit;\n align-items: center;\n justify-content: center;\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n gap: ${smallPadding};\n padding: ${borderWidth};\n padding-left: calc(${borderWidth} + ${smallPadding});\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: var(--ni-private-default-start-slot-opacity);\n margin-right: ${smallPadding};\n }\n\n :host([disabled]) slot[name='start']::slotted(*) {\n opacity: 0.3;\n }\n\n :host([disabled][appearance-readonly]) slot[name='start']::slotted(*) {\n opacity: var(--ni-private-default-start-slot-opacity);\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 :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 [part='end'] {\n display: contents;\n }\n\n [part='end']::after {\n content: '';\n position: absolute;\n margin-left: calc(-1 * (${borderWidth} + ${smallPadding}));\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 padding-left: ${smallPadding};\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"]}
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,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,YAAY,EACf,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,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;;;;;;iBAM/B,qBAAqB;;;;iBAIrB,aAAa;;;;;iBAKb,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;iBAI7B,qBAAqB;;;;;;;;;;;iCAWL,qBAAqB;eACvC,YAAY;mBACR,WAAW;6BACD,WAAW,MAAM,YAAY;;;;6BAI7B,qBAAqB;;;;6BAIrB,qBAAqB;;;;+BAInB,SAAS;;;;+BAIT,gBAAgB;;;;;;;;;UASrC,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;UAQd,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;;;;;;;;;wBAcA,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAiC1B;AACE;;6CAE6C,CAAC,EAClD;;;;;;;;;iBASS,qBAAqB;;;;iBAIrB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;;;;kCAUJ,WAAW,MAAM,YAAY;4BACnC,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;;gCAEX,YAAY;;SAEnC,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 '@ni/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 smallPadding\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 { 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 --ni-private-default-start-slot-opacity: 0.6;\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 border-radius: 0px;\n font: inherit;\n align-items: center;\n justify-content: center;\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n gap: ${smallPadding};\n padding: ${borderWidth};\n padding-left: calc(${borderWidth} + ${smallPadding});\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: var(--ni-private-default-start-slot-opacity);\n margin-right: ${smallPadding};\n }\n\n :host([disabled]) slot[name='start']::slotted(*) {\n opacity: 0.3;\n }\n\n :host([disabled][appearance-readonly]) slot[name='start']::slotted(*) {\n opacity: var(--ni-private-default-start-slot-opacity);\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 :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 [part='end'] {\n display: contents;\n }\n\n [part='end']::after {\n content: '';\n position: absolute;\n margin-left: calc(-1 * (${borderWidth} + ${smallPadding}));\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 padding-left: ${smallPadding};\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": "34.8.
|
|
3
|
+
"version": "34.8.6",
|
|
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",
|