@ni/nimble-components 32.10.0 → 32.11.0
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 +35 -33
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +2710 -2706
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/number-field/index.d.ts +7 -0
- package/dist/esm/number-field/index.js +2 -1
- package/dist/esm/number-field/index.js.map +1 -1
- package/dist/esm/number-field/styles.js +2 -0
- package/dist/esm/number-field/styles.js.map +1 -1
- package/dist/esm/number-field/template.js +10 -9
- package/dist/esm/number-field/template.js.map +1 -1
- package/dist/esm/text-field/index.d.ts +7 -0
- package/dist/esm/text-field/index.js +2 -1
- package/dist/esm/text-field/index.js.map +1 -1
- package/dist/esm/text-field/styles.js +2 -0
- package/dist/esm/text-field/styles.js.map +1 -1
- package/dist/esm/text-field/template.js +15 -14
- package/dist/esm/text-field/template.js.map +1 -1
- package/package.json +1 -1
|
@@ -14,6 +14,13 @@ declare const NumberField_base: (abstract new (...args: any[]) => {
|
|
|
14
14
|
connectedCallback(): void;
|
|
15
15
|
disconnectedCallback(): void;
|
|
16
16
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
17
|
+
}) & (abstract new (...args: any[]) => {
|
|
18
|
+
requiredVisible: boolean;
|
|
19
|
+
readonly $fastController: import("@microsoft/fast-element").Controller;
|
|
20
|
+
$emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
|
|
21
|
+
connectedCallback(): void;
|
|
22
|
+
disconnectedCallback(): void;
|
|
23
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
17
24
|
}) & typeof FoundationNumberField;
|
|
18
25
|
/**
|
|
19
26
|
* A nimble-styled HTML number input
|
|
@@ -11,10 +11,11 @@ import { iconAddTag } from '../icons/add';
|
|
|
11
11
|
import { iconExclamationMarkTag } from '../icons/exclamation-mark';
|
|
12
12
|
import { numericDecrementLabel, numericIncrementLabel } from '../label-provider/core/label-tokens';
|
|
13
13
|
import { template } from './template';
|
|
14
|
+
import { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';
|
|
14
15
|
/**
|
|
15
16
|
* A nimble-styled HTML number input
|
|
16
17
|
*/
|
|
17
|
-
export class NumberField extends mixinErrorPattern(FoundationNumberField) {
|
|
18
|
+
export class NumberField extends mixinErrorPattern(mixinRequiredVisiblePattern(FoundationNumberField)) {
|
|
18
19
|
constructor() {
|
|
19
20
|
super(...arguments);
|
|
20
21
|
this.appearance = NumberFieldAppearance.underline;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEvC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EACH,qBAAqB,EACrB,qBAAqB,EACxB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/number-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,WAAW,IAAI,qBAAqB,EAEvC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EACH,qBAAqB,EACrB,qBAAqB,EACxB,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAQjF;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB,CAC9C,2BAA2B,CAAC,qBAAqB,CAAC,CACrD;IAFD;;QAIW,eAAU,GAA0B,qBAAqB,CAAC,SAAS,CAAC;IAQ/E,CAAC;IANmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,qFAAqF;QACrF,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACpD,CAAC;CACJ;AARU;IADN,IAAI;+CACsE;AAU/E;;;;;;;GAOG;AACH,MAAM,iBAAiB,GAAG,WAAW,CAAC,OAAO,CAAqB;IAC9D,QAAQ,EAAE,cAAc;IACxB,SAAS,EAAE,qBAAqB;IAChC,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,aAAa,EAAE,IAAI,CAAa;WACzB,SAAS;;;;;;;cAON,CAAC,CAAC,EAAE,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;eACxC,gBAAgB;;;gBAGf,gBAAgB;YACpB,SAAS;KAChB;IACD,WAAW,EAAE,IAAI,CAAa;WACvB,SAAS;;;;;;;cAON,CAAC,CAAC,EAAE,CAAC,qBAAqB,CAAC,WAAW,CAAC,CAAC,CAAC;eACxC,UAAU;;gBAET,UAAU;YACd,SAAS;KAChB;IACD,GAAG,EAAE,IAAI,CAAa;WACf,sBAAsB;;;aAGpB,sBAAsB;UACzB,iBAAiB;KACtB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC9E,MAAM,CAAC,MAAM,cAAc,GAAG,qBAAqB,CAAC","sourcesContent":["import { attr, html } from '@microsoft/fast-element';\nimport {\n DesignSystem,\n NumberField as FoundationNumberField,\n NumberFieldOptions\n} from '@microsoft/fast-foundation';\nimport { styles } from './styles';\nimport { NumberFieldAppearance } from './types';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { mixinErrorPattern } from '../patterns/error/types';\nimport { buttonTag } from '../button';\nimport { iconMinusWideTag } from '../icons/minus-wide';\nimport { iconAddTag } from '../icons/add';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport {\n numericDecrementLabel,\n numericIncrementLabel\n} from '../label-provider/core/label-tokens';\nimport { template } from './template';\nimport { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-number-field': NumberField;\n }\n}\n\n/**\n * A nimble-styled HTML number input\n */\nexport class NumberField extends mixinErrorPattern(\n mixinRequiredVisiblePattern(FoundationNumberField)\n) {\n @attr\n public appearance: NumberFieldAppearance = NumberFieldAppearance.underline;\n\n public override connectedCallback(): void {\n super.connectedCallback();\n\n // This is a workaround for FAST issue: https://github.com/microsoft/fast/issues/6148\n this.control.setAttribute('role', 'spinbutton');\n }\n}\n\n/**\n * A function that returns a number-field registration for configuring the component with a DesignSystem.\n *\n * @public\n * @remarks\n * Generates HTML Element: \\<nimble-number-field\\>\n *\n */\nconst nimbleNumberField = NumberField.compose<NumberFieldOptions>({\n baseName: 'number-field',\n baseClass: FoundationNumberField,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n },\n stepDownGlyph: html<NumberField>`\n <${buttonTag}\n class=\"step-up-down-button\"\n appearance=\"ghost\"\n content-hidden\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n ${x => numericDecrementLabel.getValueFor(x)}\n <${iconMinusWideTag}\n slot=\"start\"\n >\n </${iconMinusWideTag}>\n </${buttonTag}>\n `,\n stepUpGlyph: html<NumberField>`\n <${buttonTag}\n class=\"step-up-down-button\"\n appearance=\"ghost\"\n content-hidden\n tabindex=\"-1\"\n aria-hidden=\"true\"\n >\n ${x => numericIncrementLabel.getValueFor(x)}\n <${iconAddTag}\n slot=\"start\">\n </${iconAddTag}>\n </${buttonTag}>\n `,\n end: html<NumberField>`\n <${iconExclamationMarkTag}\n severity=\"error\"\n class=\"error-icon\"\n ></${iconExclamationMarkTag}>\n ${errorTextTemplate}\n `\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleNumberField());\nexport const numberFieldTag = 'nimble-number-field';\n"]}
|
|
@@ -4,10 +4,12 @@ import { borderRgbPartialColor, borderHoverColor, borderWidth, bodyFontColor, bo
|
|
|
4
4
|
import { appearanceBehavior } from '../utilities/style/appearance';
|
|
5
5
|
import { NumberFieldAppearance } from './types';
|
|
6
6
|
import { styles as errorStyles } from '../patterns/error/styles';
|
|
7
|
+
import { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';
|
|
7
8
|
import { userSelectNone } from '../utilities/style/user-select';
|
|
8
9
|
export const styles = css `
|
|
9
10
|
${display('inline-block')}
|
|
10
11
|
${errorStyles}
|
|
12
|
+
${requiredVisibleStyles}
|
|
11
13
|
|
|
12
14
|
:host {
|
|
13
15
|
font: ${bodyFont};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/number-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,aAAa,EACb,YAAY,EACZ,6BAA6B,EAChC,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AACnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAChD,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;;;;;iBAK/B,qBAAqB;;;;;;iBAMrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;iCAUb,qBAAqB;mBACnC,WAAW;;;;+BAIC,gBAAgB;;;;;6BAKlB,qBAAqB;;;;+BAInB,SAAS;;;;UAI9B,CAAA,yCAA0C,EAAE;;;;UAI5C,cAAc;;;;;;4BAMI,WAAW;;;yBAGd,gBAAgB;;4BAEb,UAAU;;;;;;;;;;+BAUP,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;wBAyBhB,aAAa;;;;;;;;;;;iBAWpB,qBAAqB;;;;iBAIrB,qBAAqB;;;;;;;MAOhC;AACE;sFACsF,CAAC,EAC3F;;;yBAGqB,YAAY;;;;;;;;UAQ3B,aAAa,CAAC,iBAAiB;;;;;;;;;wBASjB,YAAY;;CAEnC,CAAC,aAAa,CACX,kBAAkB,CACd,qBAAqB,CAAC,SAAS,EAC/B,GAAG,CAAA;;uCAE4B,WAAW;;;SAGzC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,KAAK,EAC3B,GAAG,CAAA;;yCAE8B,qBAAqB;;;;;uCAKvB,WAAW;;;;;uCAKX,WAAW;;;;;;yCAMT,qBAAqB;;;;;;;uCAOvB,SAAS;;SAEvC,CACJ,EACD,kBAAkB,CACd,qBAAqB,CAAC,OAAO,EAC7B,GAAG,CAAA;;gCAEqB,WAAW;;;SAGlC,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n controlLabelFont,\n controlLabelFontColor,\n smallDelay,\n bodyFont,\n failColor,\n mediumPadding,\n smallPadding,\n controlLabelDisabledFontColor\n} from '../theme-provider/design-tokens';\nimport { appearanceBehavior } from '../utilities/style/appearance';\nimport { NumberFieldAppearance } from './types';\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 }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n cursor: default;\n }\n\n .label {\n display: flex;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .root {\n position: relative;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n border-radius: 0px;\n border: 0px solid rgba(${borderRgbPartialColor}, 0.3);\n padding: ${borderWidth};\n }\n\n .root:focus-within {\n border-bottom-color: ${borderHoverColor};\n }\n\n :host([readonly]) .root,\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::before {\n ${/* Empty string causes alignment issue */ ''}\n content: ' ';\n color: transparent;\n width: 0px;\n ${userSelectNone}\n }\n\n .root::after {\n content: '';\n position: absolute;\n bottom: calc(-1 * ${borderWidth});\n width: 0px;\n height: 0px;\n border-bottom: ${borderHoverColor}\n var(--ni-private-hover-indicator-width) solid;\n transition: width ${smallDelay} ease-in;\n }\n\n @media (prefers-reduced-motion) {\n .root::after {\n transition-duration: 0s;\n }\n }\n\n :host([error-visible]) .root::after {\n border-bottom-color: ${failColor};\n }\n\n :host(:hover) .root::after {\n width: 100%;\n }\n\n :host([readonly]:hover) .root::after,\n :host([disabled]:hover) .root::after {\n width: 0px;\n }\n\n [part='start'] {\n display: none;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n color: inherit;\n height: var(--ni-private-height-within-border);\n width: 100%;\n border: none;\n padding: 0px;\n padding-left: ${mediumPadding};\n }\n\n .control:hover,\n .control:focus,\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .control[disabled]::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n .controls {\n display: contents;\n }\n\n ${\n /* We are using flex `order` to define the visual ordering of the inc/dec buttons\n and the invalid icon because they are not \"interactive\" i.e. part of the tab order */ ''\n }\n .step-up {\n order: 3;\n padding-right: ${smallPadding};\n }\n\n .step-down {\n order: 2;\n }\n\n .step-up-down-button {\n ${controlHeight.cssCustomProperty}: 24px;\n }\n\n [part='end'] {\n display: contents;\n }\n\n .error-icon {\n order: 1;\n margin-right: ${smallPadding};\n }\n`.withBehaviors(\n appearanceBehavior(\n NumberFieldAppearance.underline,\n css`\n .root {\n border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.block,\n css`\n .root {\n background-color: rgba(${borderRgbPartialColor}, 0.1);\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 border-bottom-width: ${borderWidth};\n padding-bottom: 0;\n }\n\n :host([readonly]) .root,\n :host([disabled]) .root {\n background-color: rgba(${borderRgbPartialColor}, 0.07);\n border-color: transparent;\n }\n\n :host([error-visible][readonly]) .root,\n :host([error-visible][disabled]) .root {\n padding-bottom: 0;\n border-bottom-color: ${failColor};\n }\n `\n ),\n appearanceBehavior(\n NumberFieldAppearance.outline,\n css`\n .root {\n border-width: ${borderWidth};\n padding: 0;\n }\n `\n )\n);\n"]}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { html, ref, slotted, when } from '@microsoft/fast-element';
|
|
2
2
|
import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation';
|
|
3
|
+
import { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';
|
|
4
|
+
const labelTemplate = createRequiredVisibleLabelTemplate(html `<label
|
|
5
|
+
part="label"
|
|
6
|
+
for="control"
|
|
7
|
+
class="${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}"
|
|
8
|
+
>
|
|
9
|
+
<slot ${slotted('defaultSlottedNodes')}></slot>
|
|
10
|
+
</label>`);
|
|
3
11
|
/**
|
|
4
12
|
* The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
|
|
5
13
|
* @public
|
|
6
14
|
*/
|
|
7
15
|
export const template = (context, definition) => html `
|
|
8
16
|
<template class="${x => (x.readOnly ? 'readonly' : '')}">
|
|
9
|
-
|
|
10
|
-
part="label"
|
|
11
|
-
for="control"
|
|
12
|
-
class="${x => (x.defaultSlottedNodes?.length
|
|
13
|
-
? 'label'
|
|
14
|
-
: 'label label__hidden')}"
|
|
15
|
-
>
|
|
16
|
-
<slot ${slotted('defaultSlottedNodes')}></slot>
|
|
17
|
-
</label>
|
|
17
|
+
${labelTemplate}
|
|
18
18
|
<div class="root" part="root">
|
|
19
19
|
${startSlotTemplate(context, definition)}
|
|
20
20
|
<input
|
|
@@ -58,6 +58,7 @@ export const template = (context, definition) => html `
|
|
|
58
58
|
aria-owns="${x => x.ariaOwns}"
|
|
59
59
|
aria-relevant="${x => x.ariaRelevant}"
|
|
60
60
|
aria-roledescription="${x => x.ariaRoledescription}"
|
|
61
|
+
aria-required="${x => x.requiredVisible}"
|
|
61
62
|
${ref('control')}
|
|
62
63
|
/>
|
|
63
64
|
${when(x => !x.hideStep && !x.readOnly && !x.disabled, html `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/number-field/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,EACH,eAAe,EAGf,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/number-field/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, ref, slotted, when } from '@microsoft/fast-element';\nimport type { ViewTemplate } from '@microsoft/fast-element';\nimport {\n endSlotTemplate,\n FoundationElementTemplate,\n NumberFieldOptions,\n startSlotTemplate\n} from '@microsoft/fast-foundation';\nimport type { NumberField } from '.';\nimport { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';\n\nconst labelTemplate = createRequiredVisibleLabelTemplate(\n html<NumberField>`<label\n part=\"label\"\n for=\"control\"\n class=\"${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}\"\n >\n <slot ${slotted('defaultSlottedNodes')}></slot>\n </label>`\n);\n\n/**\n * The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.\n * @public\n */\nexport const template: FoundationElementTemplate<\nViewTemplate<NumberField>,\nNumberFieldOptions\n> = (context, definition) => html`\n <template class=\"${x => (x.readOnly ? 'readonly' : '')}\">\n ${labelTemplate}\n <div class=\"root\" part=\"root\">\n ${startSlotTemplate(context, definition)}\n <input\n class=\"control\"\n part=\"control\"\n id=\"control\"\n @input=\"${x => x.handleTextInput()}\"\n @change=\"${x => x.handleChange()}\"\n @keydown=\"${(x, c) => x.handleKeyDown(c.event as KeyboardEvent)}\"\n @blur=\"${x => x.handleBlur()}\"\n ?autofocus=\"${x => x.autofocus}\"\n ?disabled=\"${x => x.disabled}\"\n list=\"${x => x.list}\"\n maxlength=\"${x => x.maxlength}\"\n minlength=\"${x => x.minlength}\"\n placeholder=\"${x => x.placeholder}\"\n ?readonly=\"${x => x.readOnly}\"\n ?required=\"${x => x.required}\"\n size=\"${x => x.size}\"\n type=\"text\"\n inputmode=\"numeric\"\n min=\"${x => x.min}\"\n max=\"${x => x.max}\"\n step=\"${x => x.step}\"\n aria-atomic=\"${x => x.ariaAtomic}\"\n aria-busy=\"${x => x.ariaBusy}\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-current=\"${x => x.ariaCurrent}\"\n aria-describedby=\"${x => x.ariaDescribedby}\"\n aria-details=\"${x => x.ariaDetails}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-errormessage=\"${x => x.ariaErrormessage}\"\n aria-flowto=\"${x => x.ariaFlowto}\"\n aria-haspopup=\"${x => x.ariaHaspopup}\"\n aria-hidden=\"${x => x.ariaHidden}\"\n aria-invalid=\"${x => x.ariaInvalid}\"\n aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n aria-label=\"${x => x.ariaLabel}\"\n aria-labelledby=\"${x => x.ariaLabelledby}\"\n aria-live=\"${x => x.ariaLive}\"\n aria-owns=\"${x => x.ariaOwns}\"\n aria-relevant=\"${x => x.ariaRelevant}\"\n aria-roledescription=\"${x => x.ariaRoledescription}\"\n aria-required=\"${x => x.requiredVisible}\"\n ${ref('control')}\n />\n ${when(\n x => !x.hideStep && !x.readOnly && !x.disabled,\n html<NumberField>`\n <div class=\"controls\" part=\"controls\">\n <div\n class=\"step-up\"\n part=\"step-up\"\n @click=\"${x => x.stepUp()}\"\n >\n <slot name=\"step-up-glyph\">\n ${definition.stepUpGlyph || ''}\n </slot>\n </div>\n <div\n class=\"step-down\"\n part=\"step-down\"\n @click=\"${x => x.stepDown()}\"\n >\n <slot name=\"step-down-glyph\">\n ${definition.stepDownGlyph || ''}\n </slot>\n </div>\n </div>\n `\n )}\n ${endSlotTemplate(context, definition)}\n </div>\n </template>\n`;\n"]}
|
|
@@ -14,6 +14,13 @@ declare const TextField_base: (abstract new (...args: any[]) => {
|
|
|
14
14
|
connectedCallback(): void;
|
|
15
15
|
disconnectedCallback(): void;
|
|
16
16
|
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
17
|
+
}) & (abstract new (...args: any[]) => {
|
|
18
|
+
requiredVisible: boolean;
|
|
19
|
+
readonly $fastController: import("@microsoft/fast-element").Controller;
|
|
20
|
+
$emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
|
|
21
|
+
connectedCallback(): void;
|
|
22
|
+
disconnectedCallback(): void;
|
|
23
|
+
attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
|
|
17
24
|
}) & typeof FoundationTextField;
|
|
18
25
|
/**
|
|
19
26
|
* A nimble-styed HTML text input
|
|
@@ -7,10 +7,11 @@ import { errorTextTemplate } from '../patterns/error/template';
|
|
|
7
7
|
import { mixinErrorPattern } from '../patterns/error/types';
|
|
8
8
|
import { iconExclamationMarkTag } from '../icons/exclamation-mark';
|
|
9
9
|
import { template } from './template';
|
|
10
|
+
import { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';
|
|
10
11
|
/**
|
|
11
12
|
* A nimble-styed HTML text input
|
|
12
13
|
*/
|
|
13
|
-
export class TextField extends mixinErrorPattern(FoundationTextField) {
|
|
14
|
+
export class TextField extends mixinErrorPattern(mixinRequiredVisiblePattern(FoundationTextField)) {
|
|
14
15
|
constructor() {
|
|
15
16
|
super(...arguments);
|
|
16
17
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEnC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/text-field/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EACH,YAAY,EACZ,SAAS,IAAI,mBAAmB,EAEnC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,2BAA2B,EAAE,MAAM,oCAAoC,CAAC;AAQjF;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,iBAAiB,CAC5C,2BAA2B,CAAC,mBAAmB,CAAC,CACnD;IAFD;;QAGI;;;;;;WAMG;QAEI,eAAU,GAAwB,mBAAmB,CAAC,SAAS,CAAC;QAGhE,cAAS,GAAG,KAAK,CAAC;IAC7B,CAAC;CAAA;AAJU;IADN,IAAI;6CACkE;AAGhE;IADN,IAAI,CAAC,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;4CAC1B;AAG7B,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAmB;IACxD,QAAQ,EAAE,YAAY;IACtB,SAAS,EAAE,mBAAmB;IAC9B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;IACD,GAAG,EAAE,IAAI,CAAW;WACb,sBAAsB;;;aAGpB,sBAAsB;;;;UAIzB,iBAAiB;KACtB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,mBAAmB,CAAC","sourcesContent":["import { attr, html } from '@microsoft/fast-element';\nimport {\n DesignSystem,\n TextField as FoundationTextField,\n TextFieldOptions\n} from '@microsoft/fast-foundation';\nimport { styles } from './styles';\nimport { TextFieldAppearance } from './types';\nimport { errorTextTemplate } from '../patterns/error/template';\nimport { mixinErrorPattern } from '../patterns/error/types';\nimport { iconExclamationMarkTag } from '../icons/exclamation-mark';\nimport { template } from './template';\nimport { mixinRequiredVisiblePattern } from '../patterns/required-visible/types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nimble-text-field': TextField;\n }\n}\n\n/**\n * A nimble-styed HTML text input\n */\nexport class TextField extends mixinErrorPattern(\n mixinRequiredVisiblePattern(FoundationTextField)\n) {\n /**\n * The appearance the text field should have.\n *\n * @public\n * @remarks\n * HTML Attribute: appearance\n */\n @attr\n public appearance: TextFieldAppearance = TextFieldAppearance.underline;\n\n @attr({ attribute: 'full-bleed', mode: 'boolean' })\n public fullBleed = false;\n}\n\nconst nimbleTextField = TextField.compose<TextFieldOptions>({\n baseName: 'text-field',\n baseClass: FoundationTextField,\n template,\n styles,\n shadowOptions: {\n delegatesFocus: true\n },\n end: html<TextField>`\n <${iconExclamationMarkTag}\n severity=\"error\"\n class=\"error-icon\"\n ></${iconExclamationMarkTag}>\n <span part=\"actions\">\n <slot name=\"actions\"></slot>\n </span>\n ${errorTextTemplate}\n `\n});\n\nDesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTextField());\nexport const textFieldTag = 'nimble-text-field';\n"]}
|
|
@@ -6,10 +6,12 @@ import { TextFieldAppearance } from './types';
|
|
|
6
6
|
import { Theme } from '../theme-provider/types';
|
|
7
7
|
import { themeBehavior } from '../utilities/style/theme';
|
|
8
8
|
import { styles as errorStyles } from '../patterns/error/styles';
|
|
9
|
+
import { styles as requiredVisibleStyles } from '../patterns/required-visible/styles';
|
|
9
10
|
import { userSelectNone } from '../utilities/style/user-select';
|
|
10
11
|
export const styles = css `
|
|
11
12
|
${display('inline-block')}
|
|
12
13
|
${errorStyles}
|
|
14
|
+
${requiredVisibleStyles}
|
|
13
15
|
|
|
14
16
|
:host {
|
|
15
17
|
font: ${bodyFont};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,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,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAEhE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,cAAc,CAAC;MACvB,WAAW;;;
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/text-field/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,WAAW,EACX,aAAa,EACb,qBAAqB,EACrB,aAAa,EACb,SAAS,EACT,UAAU,EACV,gBAAgB,EAChB,QAAQ,EACR,qBAAqB,EACrB,6BAA6B,EAC7B,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;;;;;iBAK/B,qBAAqB;;;;;iBAKrB,qBAAqB;gBACtB,gBAAgB;;;;iBAIf,6BAA6B;;;;;;;;;;;iCAWb,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA6B1B;AACE;;6CAE6C,CAAC,EAClD;;;;;iBAKS,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 '@microsoft/fast-element';\nimport { display } from '../utilities/style/display';\n\nimport {\n borderRgbPartialColor,\n borderHoverColor,\n borderWidth,\n bodyFontColor,\n bodyDisabledFontColor,\n controlHeight,\n failColor,\n smallDelay,\n controlLabelFont,\n bodyFont,\n controlLabelFontColor,\n controlLabelDisabledFontColor,\n 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 }\n\n :host([disabled]) {\n color: ${bodyDisabledFontColor};\n }\n\n .label {\n display: flex;\n color: ${controlLabelFontColor};\n font: ${controlLabelFont};\n }\n\n :host([disabled]) .label {\n color: ${controlLabelDisabledFontColor};\n }\n\n .root {\n 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: 0.6;\n margin-right: ${smallPadding};\n }\n\n :host([disabled]) slot[name='start']::slotted(*) {\n opacity: 0.3;\n }\n\n .control {\n -webkit-appearance: none;\n font: inherit;\n background: transparent;\n color: inherit;\n padding: 0px;\n height: var(--ni-private-height-within-border);\n width: 100%;\n margin-top: auto;\n margin-bottom: auto;\n border: none;\n text-overflow: ellipsis;\n }\n\n .control:hover,\n .control:focus,\n .control:disabled,\n .control:active {\n outline: none;\n }\n\n .control:disabled {\n ${\n /* There's an issue with the input element where the ellipsized\n overflowed text is blank when scrolled into view, so just clip instead.\n See https://webcompat.com/issues/104481 */ ''\n }\n text-overflow: clip;\n }\n\n .control::placeholder {\n color: ${controlLabelFontColor};\n }\n\n .control[disabled]::placeholder {\n color: ${bodyDisabledFontColor};\n }\n\n [part='end'] {\n display: contents;\n }\n\n [part='end']::after {\n content: '';\n position: absolute;\n 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,5 +1,18 @@
|
|
|
1
1
|
import { html, ref, slotted } from '@microsoft/fast-element';
|
|
2
2
|
import { whitespaceFilter, startSlotTemplate, endSlotTemplate } from '@microsoft/fast-foundation';
|
|
3
|
+
import { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';
|
|
4
|
+
const labelTemplate = createRequiredVisibleLabelTemplate(html `<label
|
|
5
|
+
part="label"
|
|
6
|
+
for="control"
|
|
7
|
+
class="${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}"
|
|
8
|
+
>
|
|
9
|
+
<slot
|
|
10
|
+
${slotted({
|
|
11
|
+
property: 'defaultSlottedNodes',
|
|
12
|
+
filter: whitespaceFilter
|
|
13
|
+
})}
|
|
14
|
+
></slot>
|
|
15
|
+
</label>`);
|
|
3
16
|
/**
|
|
4
17
|
* The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.
|
|
5
18
|
* @public
|
|
@@ -10,20 +23,7 @@ export const template = (context, definition) => html `
|
|
|
10
23
|
${x => (x.readOnly ? 'readonly' : '')}
|
|
11
24
|
"
|
|
12
25
|
>
|
|
13
|
-
|
|
14
|
-
part="label"
|
|
15
|
-
for="control"
|
|
16
|
-
class="${x => (x.defaultSlottedNodes?.length
|
|
17
|
-
? 'label'
|
|
18
|
-
: 'label label__hidden')}"
|
|
19
|
-
>
|
|
20
|
-
<slot
|
|
21
|
-
${slotted({
|
|
22
|
-
property: 'defaultSlottedNodes',
|
|
23
|
-
filter: whitespaceFilter
|
|
24
|
-
})}
|
|
25
|
-
></slot>
|
|
26
|
-
</label>
|
|
26
|
+
${labelTemplate}
|
|
27
27
|
<div class="root" part="root">
|
|
28
28
|
${startSlotTemplate(context, definition)}
|
|
29
29
|
<input
|
|
@@ -64,6 +64,7 @@ export const template = (context, definition) => html `
|
|
|
64
64
|
aria-owns="${x => x.ariaOwns}"
|
|
65
65
|
aria-relevant="${x => x.ariaRelevant}"
|
|
66
66
|
aria-roledescription="${x => x.ariaRoledescription}"
|
|
67
|
+
aria-required="${x => x.requiredVisible}"
|
|
67
68
|
${ref('control')}
|
|
68
69
|
/>
|
|
69
70
|
${endSlotTemplate(context, definition)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/text-field/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAGH,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EAClB,MAAM,4BAA4B,CAAC;
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/text-field/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAE7D,OAAO,EAGH,gBAAgB,EAChB,iBAAiB,EACjB,eAAe,EAClB,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAE,kCAAkC,EAAE,MAAM,uCAAuC,CAAC;AAE3F,MAAM,aAAa,GAAG,kCAAkC,CACpD,IAAI,CAAW;;;iBAGF,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,mBAAmB,EAAE,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;;;cAGzE,OAAO,CAAC;IACd,QAAQ,EAAE,qBAAqB;IAC/B,MAAM,EAAE,gBAAgB;CAC3B,CAAC;;aAEO,CACZ,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAA;;;cAGnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;;;UAGvC,aAAa;;cAET,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;;0BAK1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;2BACvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE;8BAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;6BACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;wBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;6BACN,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;6BAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;2BAClB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO;+BACV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;6BACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;6BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;wBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;+BACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;0BACtB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK;wBACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;+BACJ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;6BACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;iCACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;gCACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;oCACd,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;gCAC1B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;iCACjB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;qCACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;+BAC7B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;iCACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;+BACrB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU;gCAChB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW;qCACb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB;8BAC9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS;mCACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;6BAC3B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;6BACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;iCACX,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY;wCACZ,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,mBAAmB;iCACjC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe;kBACrC,GAAG,CAAC,SAAS,CAAC;;cAElB,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;;CAGjD,CAAC","sourcesContent":["import { html, ref, slotted } from '@microsoft/fast-element';\nimport type { ViewTemplate } from '@microsoft/fast-element';\nimport {\n FoundationElementTemplate,\n TextFieldOptions,\n whitespaceFilter,\n startSlotTemplate,\n endSlotTemplate\n} from '@microsoft/fast-foundation';\nimport type { TextField } from '.';\nimport { createRequiredVisibleLabelTemplate } from '../patterns/required-visible/template';\n\nconst labelTemplate = createRequiredVisibleLabelTemplate(\n html<TextField>`<label\n part=\"label\"\n for=\"control\"\n class=\"${x => (x.defaultSlottedNodes?.length ? 'label' : 'label label__hidden')}\"\n >\n <slot\n ${slotted({\n property: 'defaultSlottedNodes',\n filter: whitespaceFilter\n })}\n ></slot>\n </label>`\n);\n\n/**\n * The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.\n * @public\n */\nexport const template: FoundationElementTemplate<\nViewTemplate<TextField>,\nTextFieldOptions\n> = (context, definition) => html`\n <template\n class=\"\n ${x => (x.readOnly ? 'readonly' : '')}\n \"\n >\n ${labelTemplate}\n <div class=\"root\" part=\"root\">\n ${startSlotTemplate(context, definition)}\n <input\n class=\"control\"\n part=\"control\"\n id=\"control\"\n @input=\"${x => x.handleTextInput()}\"\n @change=\"${x => x.handleChange()}\"\n ?autofocus=\"${x => x.autofocus}\"\n ?disabled=\"${x => x.disabled}\"\n list=\"${x => x.list}\"\n maxlength=\"${x => x.maxlength}\"\n minlength=\"${x => x.minlength}\"\n pattern=\"${x => x.pattern}\"\n placeholder=\"${x => x.placeholder}\"\n ?readonly=\"${x => x.readOnly}\"\n ?required=\"${x => x.required}\"\n size=\"${x => x.size}\"\n ?spellcheck=\"${x => x.spellcheck}\"\n :value=\"${x => x.value}\"\n type=\"${x => x.type}\"\n aria-atomic=\"${x => x.ariaAtomic}\"\n aria-busy=\"${x => x.ariaBusy}\"\n aria-controls=\"${x => x.ariaControls}\"\n aria-current=\"${x => x.ariaCurrent}\"\n aria-describedby=\"${x => x.ariaDescribedby}\"\n aria-details=\"${x => x.ariaDetails}\"\n aria-disabled=\"${x => x.ariaDisabled}\"\n aria-errormessage=\"${x => x.ariaErrormessage}\"\n aria-flowto=\"${x => x.ariaFlowto}\"\n aria-haspopup=\"${x => x.ariaHaspopup}\"\n aria-hidden=\"${x => x.ariaHidden}\"\n aria-invalid=\"${x => x.ariaInvalid}\"\n aria-keyshortcuts=\"${x => x.ariaKeyshortcuts}\"\n aria-label=\"${x => x.ariaLabel}\"\n aria-labelledby=\"${x => x.ariaLabelledby}\"\n aria-live=\"${x => x.ariaLive}\"\n aria-owns=\"${x => x.ariaOwns}\"\n aria-relevant=\"${x => x.ariaRelevant}\"\n aria-roledescription=\"${x => x.ariaRoledescription}\"\n aria-required=\"${x => x.requiredVisible}\"\n ${ref('control')}\n />\n ${endSlotTemplate(context, definition)}\n </div>\n </template>\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ni/nimble-components",
|
|
3
|
-
"version": "32.
|
|
3
|
+
"version": "32.11.0",
|
|
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",
|