@ni/nimble-components 32.9.1 → 32.9.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/all-components-bundle.js +464 -346
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +2170 -2154
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/number-field/index.js +2 -1
- package/dist/esm/number-field/index.js.map +1 -1
- package/dist/esm/number-field/template.d.ts +8 -0
- package/dist/esm/number-field/template.js +89 -0
- package/dist/esm/number-field/template.js.map +1 -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/template.d.ts +8 -0
- package/dist/esm/text-field/template.js +73 -0
- package/dist/esm/text-field/template.js.map +1 -0
- package/package.json +2 -3
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { attr, html } from '@microsoft/fast-element';
|
|
3
|
-
import { DesignSystem, NumberField as FoundationNumberField
|
|
3
|
+
import { DesignSystem, NumberField as FoundationNumberField } from '@microsoft/fast-foundation';
|
|
4
4
|
import { styles } from './styles';
|
|
5
5
|
import { NumberFieldAppearance } from './types';
|
|
6
6
|
import { errorTextTemplate } from '../patterns/error/template';
|
|
@@ -10,6 +10,7 @@ import { iconMinusWideTag } from '../icons/minus-wide';
|
|
|
10
10
|
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
|
+
import { template } from './template';
|
|
13
14
|
/**
|
|
14
15
|
* A nimble-styled HTML number input
|
|
15
16
|
*/
|
|
@@ -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,
|
|
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;AAQtC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,iBAAiB,CAAC,qBAAqB,CAAC;IAAzE;;QAEW,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';\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(FoundationNumberField) {\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"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import { FoundationElementTemplate, NumberFieldOptions } from '@microsoft/fast-foundation';
|
|
3
|
+
import type { NumberField } from '.';
|
|
4
|
+
/**
|
|
5
|
+
* The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
export declare const template: FoundationElementTemplate<ViewTemplate<NumberField>, NumberFieldOptions>;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { html, ref, slotted, when } from '@microsoft/fast-element';
|
|
2
|
+
import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation';
|
|
3
|
+
/**
|
|
4
|
+
* The template for the {@link @microsoft/fast-foundation#(NumberField:class)} component.
|
|
5
|
+
* @public
|
|
6
|
+
*/
|
|
7
|
+
export const template = (context, definition) => html `
|
|
8
|
+
<template class="${x => (x.readOnly ? 'readonly' : '')}">
|
|
9
|
+
<label
|
|
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>
|
|
18
|
+
<div class="root" part="root">
|
|
19
|
+
${startSlotTemplate(context, definition)}
|
|
20
|
+
<input
|
|
21
|
+
class="control"
|
|
22
|
+
part="control"
|
|
23
|
+
id="control"
|
|
24
|
+
@input="${x => x.handleTextInput()}"
|
|
25
|
+
@change="${x => x.handleChange()}"
|
|
26
|
+
@keydown="${(x, c) => x.handleKeyDown(c.event)}"
|
|
27
|
+
@blur="${x => x.handleBlur()}"
|
|
28
|
+
?autofocus="${x => x.autofocus}"
|
|
29
|
+
?disabled="${x => x.disabled}"
|
|
30
|
+
list="${x => x.list}"
|
|
31
|
+
maxlength="${x => x.maxlength}"
|
|
32
|
+
minlength="${x => x.minlength}"
|
|
33
|
+
placeholder="${x => x.placeholder}"
|
|
34
|
+
?readonly="${x => x.readOnly}"
|
|
35
|
+
?required="${x => x.required}"
|
|
36
|
+
size="${x => x.size}"
|
|
37
|
+
type="text"
|
|
38
|
+
inputmode="numeric"
|
|
39
|
+
min="${x => x.min}"
|
|
40
|
+
max="${x => x.max}"
|
|
41
|
+
step="${x => x.step}"
|
|
42
|
+
aria-atomic="${x => x.ariaAtomic}"
|
|
43
|
+
aria-busy="${x => x.ariaBusy}"
|
|
44
|
+
aria-controls="${x => x.ariaControls}"
|
|
45
|
+
aria-current="${x => x.ariaCurrent}"
|
|
46
|
+
aria-describedby="${x => x.ariaDescribedby}"
|
|
47
|
+
aria-details="${x => x.ariaDetails}"
|
|
48
|
+
aria-disabled="${x => x.ariaDisabled}"
|
|
49
|
+
aria-errormessage="${x => x.ariaErrormessage}"
|
|
50
|
+
aria-flowto="${x => x.ariaFlowto}"
|
|
51
|
+
aria-haspopup="${x => x.ariaHaspopup}"
|
|
52
|
+
aria-hidden="${x => x.ariaHidden}"
|
|
53
|
+
aria-invalid="${x => x.ariaInvalid}"
|
|
54
|
+
aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
|
|
55
|
+
aria-label="${x => x.ariaLabel}"
|
|
56
|
+
aria-labelledby="${x => x.ariaLabelledby}"
|
|
57
|
+
aria-live="${x => x.ariaLive}"
|
|
58
|
+
aria-owns="${x => x.ariaOwns}"
|
|
59
|
+
aria-relevant="${x => x.ariaRelevant}"
|
|
60
|
+
aria-roledescription="${x => x.ariaRoledescription}"
|
|
61
|
+
${ref('control')}
|
|
62
|
+
/>
|
|
63
|
+
${when(x => !x.hideStep && !x.readOnly && !x.disabled, html `
|
|
64
|
+
<div class="controls" part="controls">
|
|
65
|
+
<div
|
|
66
|
+
class="step-up"
|
|
67
|
+
part="step-up"
|
|
68
|
+
@click="${x => x.stepUp()}"
|
|
69
|
+
>
|
|
70
|
+
<slot name="step-up-glyph">
|
|
71
|
+
${definition.stepUpGlyph || ''}
|
|
72
|
+
</slot>
|
|
73
|
+
</div>
|
|
74
|
+
<div
|
|
75
|
+
class="step-down"
|
|
76
|
+
part="step-down"
|
|
77
|
+
@click="${x => x.stepDown()}"
|
|
78
|
+
>
|
|
79
|
+
<slot name="step-down-glyph">
|
|
80
|
+
${definition.stepDownGlyph || ''}
|
|
81
|
+
</slot>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
`)}
|
|
85
|
+
${endSlotTemplate(context, definition)}
|
|
86
|
+
</div>
|
|
87
|
+
</template>
|
|
88
|
+
`;
|
|
89
|
+
//# sourceMappingURL=template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
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 '.';\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 <label\n part=\"label\"\n for=\"control\"\n class=\"${x => (x.defaultSlottedNodes?.length\n ? 'label'\n : 'label label__hidden')}\"\n >\n <slot ${slotted('defaultSlottedNodes')}></slot>\n </label>\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 ${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"]}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import { __decorate } from "tslib";
|
|
2
2
|
import { attr, html } from '@microsoft/fast-element';
|
|
3
|
-
import { DesignSystem, TextField as FoundationTextField
|
|
3
|
+
import { DesignSystem, TextField as FoundationTextField } from '@microsoft/fast-foundation';
|
|
4
4
|
import { styles } from './styles';
|
|
5
5
|
import { TextFieldAppearance } from './types';
|
|
6
6
|
import { errorTextTemplate } from '../patterns/error/template';
|
|
7
7
|
import { mixinErrorPattern } from '../patterns/error/types';
|
|
8
8
|
import { iconExclamationMarkTag } from '../icons/exclamation-mark';
|
|
9
|
+
import { template } from './template';
|
|
9
10
|
/**
|
|
10
11
|
* A nimble-styed HTML text input
|
|
11
12
|
*/
|
|
@@ -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,
|
|
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;AAQtC;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,iBAAiB,CAAC,mBAAmB,CAAC;IAArE;;QACI;;;;;;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';\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(FoundationTextField) {\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"]}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { ViewTemplate } from '@microsoft/fast-element';
|
|
2
|
+
import { FoundationElementTemplate, TextFieldOptions } from '@microsoft/fast-foundation';
|
|
3
|
+
import type { TextField } from '.';
|
|
4
|
+
/**
|
|
5
|
+
* The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.
|
|
6
|
+
* @public
|
|
7
|
+
*/
|
|
8
|
+
export declare const template: FoundationElementTemplate<ViewTemplate<TextField>, TextFieldOptions>;
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { html, ref, slotted } from '@microsoft/fast-element';
|
|
2
|
+
import { whitespaceFilter, startSlotTemplate, endSlotTemplate } from '@microsoft/fast-foundation';
|
|
3
|
+
/**
|
|
4
|
+
* The template for the {@link @microsoft/fast-foundation#(TextField:class)} component.
|
|
5
|
+
* @public
|
|
6
|
+
*/
|
|
7
|
+
export const template = (context, definition) => html `
|
|
8
|
+
<template
|
|
9
|
+
class="
|
|
10
|
+
${x => (x.readOnly ? 'readonly' : '')}
|
|
11
|
+
"
|
|
12
|
+
>
|
|
13
|
+
<label
|
|
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>
|
|
27
|
+
<div class="root" part="root">
|
|
28
|
+
${startSlotTemplate(context, definition)}
|
|
29
|
+
<input
|
|
30
|
+
class="control"
|
|
31
|
+
part="control"
|
|
32
|
+
id="control"
|
|
33
|
+
@input="${x => x.handleTextInput()}"
|
|
34
|
+
@change="${x => x.handleChange()}"
|
|
35
|
+
?autofocus="${x => x.autofocus}"
|
|
36
|
+
?disabled="${x => x.disabled}"
|
|
37
|
+
list="${x => x.list}"
|
|
38
|
+
maxlength="${x => x.maxlength}"
|
|
39
|
+
minlength="${x => x.minlength}"
|
|
40
|
+
pattern="${x => x.pattern}"
|
|
41
|
+
placeholder="${x => x.placeholder}"
|
|
42
|
+
?readonly="${x => x.readOnly}"
|
|
43
|
+
?required="${x => x.required}"
|
|
44
|
+
size="${x => x.size}"
|
|
45
|
+
?spellcheck="${x => x.spellcheck}"
|
|
46
|
+
:value="${x => x.value}"
|
|
47
|
+
type="${x => x.type}"
|
|
48
|
+
aria-atomic="${x => x.ariaAtomic}"
|
|
49
|
+
aria-busy="${x => x.ariaBusy}"
|
|
50
|
+
aria-controls="${x => x.ariaControls}"
|
|
51
|
+
aria-current="${x => x.ariaCurrent}"
|
|
52
|
+
aria-describedby="${x => x.ariaDescribedby}"
|
|
53
|
+
aria-details="${x => x.ariaDetails}"
|
|
54
|
+
aria-disabled="${x => x.ariaDisabled}"
|
|
55
|
+
aria-errormessage="${x => x.ariaErrormessage}"
|
|
56
|
+
aria-flowto="${x => x.ariaFlowto}"
|
|
57
|
+
aria-haspopup="${x => x.ariaHaspopup}"
|
|
58
|
+
aria-hidden="${x => x.ariaHidden}"
|
|
59
|
+
aria-invalid="${x => x.ariaInvalid}"
|
|
60
|
+
aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
|
|
61
|
+
aria-label="${x => x.ariaLabel}"
|
|
62
|
+
aria-labelledby="${x => x.ariaLabelledby}"
|
|
63
|
+
aria-live="${x => x.ariaLive}"
|
|
64
|
+
aria-owns="${x => x.ariaOwns}"
|
|
65
|
+
aria-relevant="${x => x.ariaRelevant}"
|
|
66
|
+
aria-roledescription="${x => x.ariaRoledescription}"
|
|
67
|
+
${ref('control')}
|
|
68
|
+
/>
|
|
69
|
+
${endSlotTemplate(context, definition)}
|
|
70
|
+
</div>
|
|
71
|
+
</template>
|
|
72
|
+
`;
|
|
73
|
+
//# sourceMappingURL=template.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/text-field/template.ts"],"names":[],"mappings":"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","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 '.';\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 <label\n part=\"label\"\n for=\"control\"\n class=\"${x => (x.defaultSlottedNodes?.length\n ? 'label'\n : 'label label__hidden')}\"\n >\n <slot\n ${slotted({\n property: 'defaultSlottedNodes',\n filter: whitespaceFilter\n })}\n ></slot>\n </label>\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 ${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.9.
|
|
3
|
+
"version": "32.9.3",
|
|
4
4
|
"description": "Styled web components for the NI Nimble Design System",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
"@ni-private/eslint-config-nimble": "*",
|
|
105
105
|
"@ni/jasmine-parameterized": "^1.0.0",
|
|
106
106
|
"@rollup/plugin-commonjs": "^28.0.0",
|
|
107
|
-
"@rollup/plugin-node-resolve": "^
|
|
107
|
+
"@rollup/plugin-node-resolve": "^16.0.0",
|
|
108
108
|
"@rollup/plugin-replace": "^6.0.0",
|
|
109
109
|
"@rollup/plugin-terser": "^0.4.0",
|
|
110
110
|
"@types/jasmine": "^5.1.4",
|
|
@@ -132,7 +132,6 @@
|
|
|
132
132
|
"terser-webpack-plugin": "^5.3.10",
|
|
133
133
|
"typescript": "~5.4.5",
|
|
134
134
|
"webpack": "^5.75.0",
|
|
135
|
-
"webpack-cli": "^5.0.1",
|
|
136
135
|
"webpack-dev-middleware": "^7.0.0"
|
|
137
136
|
}
|
|
138
137
|
}
|