@momentum-design/components 0.21.0 → 0.22.1

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.
@@ -175,6 +175,12 @@ declare class Input extends Input_base {
175
175
  * @param event - Event which contains information about the value change.
176
176
  */
177
177
  private onChange;
178
+ /**
179
+ * Handles the keydown event of the input field.
180
+ * If the key pressed is 'Enter', it submits the form.
181
+ * @param event - Keyboard event
182
+ */
183
+ private handleKeyDown;
178
184
  /**
179
185
  * Renders the leading icon before the input field.
180
186
  * If the leading icon is not set, it will not be displayed.
@@ -212,6 +212,17 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
212
212
  const EventConstructor = event.constructor;
213
213
  this.dispatchEvent(new EventConstructor(event.type, event));
214
214
  }
215
+ /**
216
+ * Handles the keydown event of the input field.
217
+ * If the key pressed is 'Enter', it submits the form.
218
+ * @param event - Keyboard event
219
+ */
220
+ handleKeyDown(event) {
221
+ var _a;
222
+ if (event.key === 'Enter') {
223
+ (_a = this.internals.form) === null || _a === void 0 ? void 0 : _a.requestSubmit();
224
+ }
225
+ }
215
226
  /**
216
227
  * Renders the leading icon before the input field.
217
228
  * If the leading icon is not set, it will not be displayed.
@@ -319,6 +330,7 @@ class Input extends DataAriaLabelMixin(ValueMixin(NameMixin(FormfieldWrapper)))
319
330
  size=${ifDefined(this.size)}
320
331
  @input=${this.onInput}
321
332
  @change=${this.onChange}
333
+ @keydown=${this.handleKeyDown}
322
334
  />
323
335
  </slot>
324
336
  </div>
@@ -3518,6 +3518,21 @@
3518
3518
  ],
3519
3519
  "description": "Handles the change event of the input field.\nUpdates the value and sets the validity of the input field.\n\nThe 'change' event does not bubble up through the shadow DOM as it was not composed.\nTherefore, we need to re-dispatch the same event to ensure it is propagated correctly.\nRead more: https://developer.mozilla.org/en-US/docs/Web/API/Event/composed"
3520
3520
  },
3521
+ {
3522
+ "kind": "method",
3523
+ "name": "handleKeyDown",
3524
+ "privacy": "private",
3525
+ "parameters": [
3526
+ {
3527
+ "name": "event",
3528
+ "type": {
3529
+ "text": "KeyboardEvent"
3530
+ },
3531
+ "description": "Keyboard event"
3532
+ }
3533
+ ],
3534
+ "description": "Handles the keydown event of the input field.\nIf the key pressed is 'Enter', it submits the form."
3535
+ },
3521
3536
  {
3522
3537
  "kind": "method",
3523
3538
  "name": "renderLeadingIcon",
@@ -5176,6 +5191,90 @@
5176
5191
  }
5177
5192
  ]
5178
5193
  },
5194
+ {
5195
+ "kind": "javascript-module",
5196
+ "path": "components/text/text.component.js",
5197
+ "declarations": [
5198
+ {
5199
+ "kind": "class",
5200
+ "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
5201
+ "name": "Text",
5202
+ "cssParts": [
5203
+ {
5204
+ "description": "The text element",
5205
+ "name": "text"
5206
+ }
5207
+ ],
5208
+ "slots": [
5209
+ {
5210
+ "description": "Default slot for text content",
5211
+ "name": ""
5212
+ }
5213
+ ],
5214
+ "members": [
5215
+ {
5216
+ "kind": "field",
5217
+ "name": "type",
5218
+ "type": {
5219
+ "text": "TextType"
5220
+ },
5221
+ "privacy": "public",
5222
+ "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
5223
+ "default": "body-large-regular",
5224
+ "attribute": "type",
5225
+ "reflects": true
5226
+ },
5227
+ {
5228
+ "kind": "field",
5229
+ "name": "tagname",
5230
+ "type": {
5231
+ "text": "TagName | undefined"
5232
+ },
5233
+ "privacy": "public",
5234
+ "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
5235
+ "attribute": "tagname",
5236
+ "reflects": true
5237
+ }
5238
+ ],
5239
+ "attributes": [
5240
+ {
5241
+ "name": "type",
5242
+ "type": {
5243
+ "text": "TextType"
5244
+ },
5245
+ "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
5246
+ "default": "body-large-regular",
5247
+ "fieldName": "type"
5248
+ },
5249
+ {
5250
+ "name": "tagname",
5251
+ "type": {
5252
+ "text": "TagName | undefined"
5253
+ },
5254
+ "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
5255
+ "fieldName": "tagname"
5256
+ }
5257
+ ],
5258
+ "superclass": {
5259
+ "name": "Component",
5260
+ "module": "/src/models"
5261
+ },
5262
+ "tagName": "mdc-text",
5263
+ "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
5264
+ "customElement": true
5265
+ }
5266
+ ],
5267
+ "exports": [
5268
+ {
5269
+ "kind": "js",
5270
+ "name": "default",
5271
+ "declaration": {
5272
+ "name": "Text",
5273
+ "module": "components/text/text.component.js"
5274
+ }
5275
+ }
5276
+ ]
5277
+ },
5179
5278
  {
5180
5279
  "kind": "javascript-module",
5181
5280
  "path": "components/themeprovider/themeprovider.component.js",
@@ -5780,90 +5879,6 @@
5780
5879
  }
5781
5880
  ]
5782
5881
  },
5783
- {
5784
- "kind": "javascript-module",
5785
- "path": "components/text/text.component.js",
5786
- "declarations": [
5787
- {
5788
- "kind": "class",
5789
- "description": "Text component for creating styled text elements.\nIt has to be mounted within the ThemeProvider to access color and font tokens.\n\nThe `type` attribute allows changing the text style.\nThe `tagname` attribute allows changing the tag name of the text element.\nThe default tag name is `p`.\n\nThe `tagname` attribute should be a valid HTML tag name.\nIf the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n\nThe styling is applied based on the `type` attribute.",
5790
- "name": "Text",
5791
- "cssParts": [
5792
- {
5793
- "description": "The text element",
5794
- "name": "text"
5795
- }
5796
- ],
5797
- "slots": [
5798
- {
5799
- "description": "Default slot for text content",
5800
- "name": ""
5801
- }
5802
- ],
5803
- "members": [
5804
- {
5805
- "kind": "field",
5806
- "name": "type",
5807
- "type": {
5808
- "text": "TextType"
5809
- },
5810
- "privacy": "public",
5811
- "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
5812
- "default": "body-large-regular",
5813
- "attribute": "type",
5814
- "reflects": true
5815
- },
5816
- {
5817
- "kind": "field",
5818
- "name": "tagname",
5819
- "type": {
5820
- "text": "TagName | undefined"
5821
- },
5822
- "privacy": "public",
5823
- "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
5824
- "attribute": "tagname",
5825
- "reflects": true
5826
- }
5827
- ],
5828
- "attributes": [
5829
- {
5830
- "name": "type",
5831
- "type": {
5832
- "text": "TextType"
5833
- },
5834
- "description": "Specifies the text style to be applied.\n\nAcceptable values include:\n\n- 'body-small-regular'\n- 'body-small-medium'\n- 'body-small-bold'\n- 'body-midsize-regular'\n- 'body-midsize-medium'\n- 'body-midsize-bold'\n- 'body-large-regular'\n- 'body-large-medium'\n- 'body-large-bold'\n- 'body-small-regular-underline'\n- 'body-small-medium-underline'\n- 'body-midsize-regular-underline'\n- 'body-midsize-medium-underline'\n- 'body-large-regular-underline'\n- 'body-large-medium-underline'\n- 'heading-small-regular'\n- 'heading-small-medium'\n- 'heading-small-bold'\n- 'heading-midsize-regular'\n- 'heading-midsize-medium'\n- 'heading-midsize-bold'\n- 'heading-large-regular'\n- 'heading-large-medium'\n- 'heading-large-bold'\n- 'heading-xlarge-regular'\n- 'heading-xlarge-medium'\n- 'heading-xlarge-bold'\n- 'headline-small-light'\n- 'headline-small-regular'",
5835
- "default": "body-large-regular",
5836
- "fieldName": "type"
5837
- },
5838
- {
5839
- "name": "tagname",
5840
- "type": {
5841
- "text": "TagName | undefined"
5842
- },
5843
- "description": "Specifies the HTML tag name for the text element. The default tag name is `p`.\nThis attribute is optional. When set, it changes the tag name of the text element.\n\nAcceptable values include:\n\n- 'h1'\n- 'h2'\n- 'h3'\n- 'h4'\n- 'h5'\n- 'h6'\n- 'p'\n- 'small'\n- 'span'\n- 'div'\n\nFor instance, setting this attribute to `h2` will render the text element as an `h2` element.\nNote that the styling is determined by the `type` attribute.",
5844
- "fieldName": "tagname"
5845
- }
5846
- ],
5847
- "superclass": {
5848
- "name": "Component",
5849
- "module": "/src/models"
5850
- },
5851
- "tagName": "mdc-text",
5852
- "jsDoc": "/**\n * Text component for creating styled text elements.\n * It has to be mounted within the ThemeProvider to access color and font tokens.\n *\n * The `type` attribute allows changing the text style.\n * The `tagname` attribute allows changing the tag name of the text element.\n * The default tag name is `p`.\n *\n * The `tagname` attribute should be a valid HTML tag name.\n * If the `tagname` attribute is not a valid HTML tag name, the default tag name will be used.\n *\n * The styling is applied based on the `type` attribute.\n *\n * @tagname mdc-text\n * @slot - Default slot for text content\n *\n * @csspart text - The text element\n */",
5853
- "customElement": true
5854
- }
5855
- ],
5856
- "exports": [
5857
- {
5858
- "kind": "js",
5859
- "name": "default",
5860
- "declaration": {
5861
- "name": "Text",
5862
- "module": "components/text/text.component.js"
5863
- }
5864
- }
5865
- ]
5866
- },
5867
5882
  {
5868
5883
  "kind": "javascript-module",
5869
5884
  "path": "utils/mixins/AvatarComponentMixin.js",
@@ -15,6 +15,6 @@ export { default as Marker } from './marker';
15
15
  export { default as Modalcontainer } from './modalcontainer';
16
16
  export { default as Presence } from './presence';
17
17
  export { default as Radio } from './radio';
18
+ export { default as Text } from './text';
18
19
  export { default as ThemeProvider } from './themeprovider';
19
20
  export { default as Toggle } from './toggle';
20
- export { default as Text } from './text';
@@ -15,6 +15,6 @@ export { default as Marker } from './marker';
15
15
  export { default as Modalcontainer } from './modalcontainer';
16
16
  export { default as Presence } from './presence';
17
17
  export { default as Radio } from './radio';
18
+ export { default as Text } from './text';
18
19
  export { default as ThemeProvider } from './themeprovider';
19
20
  export { default as Toggle } from './toggle';
20
- export { default as Text } from './text';
package/package.json CHANGED
@@ -36,5 +36,5 @@
36
36
  "lit": "^3.2.0",
37
37
  "uuid": "^11.0.5"
38
38
  },
39
- "version": "0.21.0"
39
+ "version": "0.22.1"
40
40
  }