@ni/nimble-components 34.8.3 → 34.8.5
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 +1 -4
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +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/models/expansion-manager.js +1 -1
- package/dist/esm/table/models/expansion-manager.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"]}
|
|
@@ -113,7 +113,7 @@ export class ExpansionManager {
|
|
|
113
113
|
return false;
|
|
114
114
|
}
|
|
115
115
|
return (this.hierarchyOptions.get(id)?.delayedHierarchyState
|
|
116
|
-
=== TableRecordDelayedHierarchyState.loadingChildren
|
|
116
|
+
=== TableRecordDelayedHierarchyState.loadingChildren);
|
|
117
117
|
}
|
|
118
118
|
canLoadDelayedChildren(id) {
|
|
119
119
|
if (!this.isHierarchyEnabled) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"expansion-manager.js","sourceRoot":"","sources":["../../../../src/table/models/expansion-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n Row as TanStackRow,\n Table as TanStackTable\n} from '@tanstack/table-core';\nimport {\n type TableNode,\n type TableRecord,\n type TableSetRecordHierarchyOptions,\n type TableRecordHierarchyOptions,\n TableRecordDelayedHierarchyState\n} from '../types';\n\n/**\n * Manages the expanded/collapsed state of rows in the table.\n *\n * We must track the expansion state separately from TanStack because:\n * 1. TanStack does not support having a different initial expansion state per row unless explicitly\n * specified for each row by ID. This causes problems in the nimble-table because we could have\n * a different initial expansion state for group rows, parent rows, and parent rows with delay-loaded\n * children.\n * 2. TanStack does not remove entries from its expanded state when those rows are no longer present\n * in the data. This is not ideal because the object maintaining the expansion state can grow unbounded.\n */\nexport class ExpansionManager<TData extends TableRecord> {\n private explicitExpansionStates = new Map<string, boolean>();\n private hierarchyOptions = new Map<string, TableRecordHierarchyOptions>();\n private isHierarchyEnabled = false;\n private parentRowsWithChildren = new Set<string>();\n\n public constructor(\n private readonly tanStackTable: TanStackTable<TableNode<TData>>\n ) {}\n\n public isRowExpanded(row: TanStackRow<TableNode<TData>>): boolean {\n if (!this.isRowExpandable(row)) {\n return false;\n }\n\n const expansionState = this.explicitExpansionStates.get(row.id);\n return expansionState ?? this.getDefaultExpansionState(row);\n }\n\n public toggleRowExpansion(row: TanStackRow<TableNode<TData>>): void {\n if (!this.isRowExpandable(row)) {\n return;\n }\n\n const wasExpanded = this.isRowExpanded(row);\n this.explicitExpansionStates.set(row.id, !wasExpanded);\n\n row.toggleExpanded();\n }\n\n public collapseAll(): void {\n this.resetExpansionState();\n\n const rows = this.tanStackTable.getRowModel().flatRows;\n for (const row of rows) {\n if (this.isRowExpandable(row)) {\n this.explicitExpansionStates.set(row.id, false);\n }\n }\n this.tanStackTable.toggleAllRowsExpanded(false);\n }\n\n public resetExpansionState(): void {\n this.explicitExpansionStates.clear();\n }\n\n public resetHierarchyOptions(): void {\n this.hierarchyOptions.clear();\n }\n\n public processDataUpdate(rows: TanStackRow<TableNode<TData>>[]): void {\n if (\n this.explicitExpansionStates.size === 0\n && this.hierarchyOptions.size === 0\n ) {\n return;\n }\n\n const updatedExplicitExpansionStates = new Map<string, boolean>();\n const updatedHierarchyOptions = new Map<\n string,\n TableRecordHierarchyOptions\n >();\n const updatedParentRowsWithChildren = new Set<string>();\n for (const row of rows) {\n const rowId = row.id;\n const isGroupRow = row.getIsGrouped();\n const rowHierarchyOptions = this.hierarchyOptions.get(rowId);\n if (!isGroupRow && rowHierarchyOptions) {\n updatedHierarchyOptions.set(rowId, rowHierarchyOptions);\n }\n\n if (this.isRowExpandable(row)) {\n const expansionState = this.explicitExpansionStates.get(rowId);\n if (expansionState !== undefined) {\n updatedExplicitExpansionStates.set(rowId, expansionState);\n }\n\n if (!isGroupRow) {\n const hasChildRows = row.subRows.length !== 0;\n if (hasChildRows) {\n updatedParentRowsWithChildren.add(rowId);\n } else if (this.parentRowsWithChildren.has(rowId)) {\n // The row used to have children, but now it does not. Therefore,\n // collapse the row.\n updatedExplicitExpansionStates.set(rowId, false);\n }\n }\n }\n }\n\n this.explicitExpansionStates = updatedExplicitExpansionStates;\n this.hierarchyOptions = updatedHierarchyOptions;\n this.parentRowsWithChildren = updatedParentRowsWithChildren;\n }\n\n public setHierarchyOptions(\n hierarchyOptions: TableSetRecordHierarchyOptions[]\n ): void {\n const updatedHierarchyOptions = new Map<\n string,\n TableRecordHierarchyOptions\n >();\n for (const { recordId, options } of hierarchyOptions) {\n updatedHierarchyOptions.set(recordId, options);\n\n const oldState = this.hierarchyOptions.get(recordId)?.delayedHierarchyState;\n const newState = options.delayedHierarchyState;\n if (\n oldState === TableRecordDelayedHierarchyState.loadingChildren\n && newState === TableRecordDelayedHierarchyState.canLoadChildren\n && !this.parentRowsWithChildren.has(recordId)\n ) {\n // If a row without children transitions from loadingChildren to canLoadChildren,\n // put it back in its default state of collapsed.\n this.explicitExpansionStates.delete(recordId);\n }\n }\n this.hierarchyOptions = updatedHierarchyOptions;\n }\n\n public isRowExpandable(row: TanStackRow<TableNode<TData>>): boolean {\n return row.subRows.length > 0 || this.canLoadDelayedChildren(row.id);\n }\n\n public setHierarchyEnabled(isHierarchyEnabled: boolean): void {\n this.isHierarchyEnabled = isHierarchyEnabled;\n }\n\n public isLoadingChildren(id: string): boolean {\n if (!this.isHierarchyEnabled) {\n return false;\n }\n\n return (\n this.hierarchyOptions.get(id)?.delayedHierarchyState\n === TableRecordDelayedHierarchyState.loadingChildren ?? false\n );\n }\n\n private canLoadDelayedChildren(id: string): boolean {\n if (!this.isHierarchyEnabled) {\n return false;\n }\n\n const delayedHierarchyState = this.hierarchyOptions.get(id)?.delayedHierarchyState;\n return delayedHierarchyState !== TableRecordDelayedHierarchyState.none;\n }\n\n private getDefaultExpansionState(\n row: TanStackRow<TableNode<TData>>\n ): boolean {\n // Rows with children (group rows and parent rows with populated children)\n // default to expanded. Other rows (parent rows with lazy-loaded children)\n // default to collapsed.\n return row.subRows.length !== 0;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"expansion-manager.js","sourceRoot":"","sources":["../../../../src/table/models/expansion-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import type {\n Row as TanStackRow,\n Table as TanStackTable\n} from '@tanstack/table-core';\nimport {\n type TableNode,\n type TableRecord,\n type TableSetRecordHierarchyOptions,\n type TableRecordHierarchyOptions,\n TableRecordDelayedHierarchyState\n} from '../types';\n\n/**\n * Manages the expanded/collapsed state of rows in the table.\n *\n * We must track the expansion state separately from TanStack because:\n * 1. TanStack does not support having a different initial expansion state per row unless explicitly\n * specified for each row by ID. This causes problems in the nimble-table because we could have\n * a different initial expansion state for group rows, parent rows, and parent rows with delay-loaded\n * children.\n * 2. TanStack does not remove entries from its expanded state when those rows are no longer present\n * in the data. This is not ideal because the object maintaining the expansion state can grow unbounded.\n */\nexport class ExpansionManager<TData extends TableRecord> {\n private explicitExpansionStates = new Map<string, boolean>();\n private hierarchyOptions = new Map<string, TableRecordHierarchyOptions>();\n private isHierarchyEnabled = false;\n private parentRowsWithChildren = new Set<string>();\n\n public constructor(\n private readonly tanStackTable: TanStackTable<TableNode<TData>>\n ) {}\n\n public isRowExpanded(row: TanStackRow<TableNode<TData>>): boolean {\n if (!this.isRowExpandable(row)) {\n return false;\n }\n\n const expansionState = this.explicitExpansionStates.get(row.id);\n return expansionState ?? this.getDefaultExpansionState(row);\n }\n\n public toggleRowExpansion(row: TanStackRow<TableNode<TData>>): void {\n if (!this.isRowExpandable(row)) {\n return;\n }\n\n const wasExpanded = this.isRowExpanded(row);\n this.explicitExpansionStates.set(row.id, !wasExpanded);\n\n row.toggleExpanded();\n }\n\n public collapseAll(): void {\n this.resetExpansionState();\n\n const rows = this.tanStackTable.getRowModel().flatRows;\n for (const row of rows) {\n if (this.isRowExpandable(row)) {\n this.explicitExpansionStates.set(row.id, false);\n }\n }\n this.tanStackTable.toggleAllRowsExpanded(false);\n }\n\n public resetExpansionState(): void {\n this.explicitExpansionStates.clear();\n }\n\n public resetHierarchyOptions(): void {\n this.hierarchyOptions.clear();\n }\n\n public processDataUpdate(rows: TanStackRow<TableNode<TData>>[]): void {\n if (\n this.explicitExpansionStates.size === 0\n && this.hierarchyOptions.size === 0\n ) {\n return;\n }\n\n const updatedExplicitExpansionStates = new Map<string, boolean>();\n const updatedHierarchyOptions = new Map<\n string,\n TableRecordHierarchyOptions\n >();\n const updatedParentRowsWithChildren = new Set<string>();\n for (const row of rows) {\n const rowId = row.id;\n const isGroupRow = row.getIsGrouped();\n const rowHierarchyOptions = this.hierarchyOptions.get(rowId);\n if (!isGroupRow && rowHierarchyOptions) {\n updatedHierarchyOptions.set(rowId, rowHierarchyOptions);\n }\n\n if (this.isRowExpandable(row)) {\n const expansionState = this.explicitExpansionStates.get(rowId);\n if (expansionState !== undefined) {\n updatedExplicitExpansionStates.set(rowId, expansionState);\n }\n\n if (!isGroupRow) {\n const hasChildRows = row.subRows.length !== 0;\n if (hasChildRows) {\n updatedParentRowsWithChildren.add(rowId);\n } else if (this.parentRowsWithChildren.has(rowId)) {\n // The row used to have children, but now it does not. Therefore,\n // collapse the row.\n updatedExplicitExpansionStates.set(rowId, false);\n }\n }\n }\n }\n\n this.explicitExpansionStates = updatedExplicitExpansionStates;\n this.hierarchyOptions = updatedHierarchyOptions;\n this.parentRowsWithChildren = updatedParentRowsWithChildren;\n }\n\n public setHierarchyOptions(\n hierarchyOptions: TableSetRecordHierarchyOptions[]\n ): void {\n const updatedHierarchyOptions = new Map<\n string,\n TableRecordHierarchyOptions\n >();\n for (const { recordId, options } of hierarchyOptions) {\n updatedHierarchyOptions.set(recordId, options);\n\n const oldState = this.hierarchyOptions.get(recordId)?.delayedHierarchyState;\n const newState = options.delayedHierarchyState;\n if (\n oldState === TableRecordDelayedHierarchyState.loadingChildren\n && newState === TableRecordDelayedHierarchyState.canLoadChildren\n && !this.parentRowsWithChildren.has(recordId)\n ) {\n // If a row without children transitions from loadingChildren to canLoadChildren,\n // put it back in its default state of collapsed.\n this.explicitExpansionStates.delete(recordId);\n }\n }\n this.hierarchyOptions = updatedHierarchyOptions;\n }\n\n public isRowExpandable(row: TanStackRow<TableNode<TData>>): boolean {\n return row.subRows.length > 0 || this.canLoadDelayedChildren(row.id);\n }\n\n public setHierarchyEnabled(isHierarchyEnabled: boolean): void {\n this.isHierarchyEnabled = isHierarchyEnabled;\n }\n\n public isLoadingChildren(id: string): boolean {\n if (!this.isHierarchyEnabled) {\n return false;\n }\n\n return (\n this.hierarchyOptions.get(id)?.delayedHierarchyState\n === TableRecordDelayedHierarchyState.loadingChildren\n );\n }\n\n private canLoadDelayedChildren(id: string): boolean {\n if (!this.isHierarchyEnabled) {\n return false;\n }\n\n const delayedHierarchyState = this.hierarchyOptions.get(id)?.delayedHierarchyState;\n return delayedHierarchyState !== TableRecordDelayedHierarchyState.none;\n }\n\n private getDefaultExpansionState(\n row: TanStackRow<TableNode<TData>>\n ): boolean {\n // Rows with children (group rows and parent rows with populated children)\n // default to expanded. Other rows (parent rows with lazy-loaded children)\n // default to collapsed.\n return row.subRows.length !== 0;\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.5",
|
|
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",
|