@infineon/infineon-design-system-stencil 32.9.1--canary.1807.cb4f8690776423d0e6ca0cbd55c5923849a12f20.0 → 32.9.1--canary.1807.21c4782cf65ca03365682865b763e8b64c4208df.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.
Files changed (4) hide show
  1. package/dist/collection/components/text-field/text-field.stories.js +17 -2
  2. package/dist/collection/components/text-field/text-field.stories.js.map +1 -1
  3. package/dist/types/components/text-field/text-field.stories.d.ts +14 -0
  4. package/package.json +1 -1
package/dist/collection/components/text-field/text-field.stories.js CHANGED
@@ -19,7 +19,8 @@ export default {
19
19
  maxlength: '',
20
20
  value: '',
21
21
  autocomplete: 'on',
22
- type: 'text'
22
+ type: 'text',
23
+ internalId: 'text-field'
23
24
  },
24
25
  argTypes: {
25
26
  label: {
@@ -140,6 +141,19 @@ export default {
140
141
  }
141
142
  }
142
143
  },
144
+ internalId: {
145
+ description: 'Sets the ID of the internal input and the value of htmlFor for the label element',
146
+ control: 'text',
147
+ table: {
148
+ category: 'ifx-text-field props',
149
+ defaultValue: {
150
+ summary: 'text-field'
151
+ },
152
+ type: {
153
+ summary: 'string'
154
+ }
155
+ }
156
+ },
143
157
  autocomplete: {
144
158
  description: 'Sets the autocomplete attribute. "on" by default.',
145
159
  control: 'text',
@@ -177,7 +191,7 @@ export default {
177
191
  },
178
192
  },
179
193
  };
180
- const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value, autocomplete, type }) => {
194
+ const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value, autocomplete, type, internalId }) => {
181
195
  const element = document.createElement('ifx-text-field');
182
196
  element.setAttribute('error', error);
183
197
  element.setAttribute('disabled', disabled);
@@ -193,6 +207,7 @@ const DefaultTemplate = ({ error, disabled, success, size, placeholder, label, c
193
207
  element.setAttribute('value', value);
194
208
  element.setAttribute('autocomplete', autocomplete);
195
209
  element.setAttribute('type', type);
210
+ element.setAttribute('internal-id', internalId);
196
211
  if (maxlength)
197
212
  element.setAttribute('maxlength', maxlength);
198
213
  element.addEventListener('ifxInput', action('ifxInput'));
package/dist/collection/components/text-field/text-field.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"text-field.stories.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Text Field',\n // tags: ['autodocs'],\n\n args: {\n label: 'Label',\n error: false,\n disabled: false,\n size: 'm',\n icon: 'c-info-16',\n success: false,\n placeholder: 'Placeholder',\n caption: 'Caption',\n required: true,\n optional: false,\n name: 'text-field',\n showDeleteIcon: false,\n maxlength: '',\n value: '',\n autocomplete: 'on',\n type: 'text'\n },\n\n argTypes: {\n label: {\n name: 'Label of Text Field',\n description: 'The text label displayed above the *<ifx-text-field>*.',\n table: {\n category: 'story controls',\n }\n },\n error: {\n description: 'Indicates an error state for the text field.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n disabled: {\n description: 'Disables the text field.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n size: {\n description: 'Size options: s (36px) and m (40px) - default: m',\n options: ['s', 'm'],\n control: 'radio',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: 'm'\n }\n }\n },\n icon: {\n description: 'Specifies an icon to display within the text field.',\n options: Object.values(icons).map(i => i['name']),\n control: 'select',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: 'c-info-16'\n }\n }\n },\n success: {\n description: 'Indicates a successful state for the text field.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n placeholder: {\n description: 'Displays a placeholder text inside the text field when it is empty.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n caption: {\n description: 'Text displayed below the text field to provide additional information.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n required: {\n description: 'Marks the text field as required for form submission. Displays an asterisk next to the label when set to **true**.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: true\n }\n }\n },\n optional: {\n description: 'Indicates that the field is optional.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n showDeleteIcon: {\n description: 'Displays a delete icon inside the text field when set to **true**, allowing user to clear the input content.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n maxlength: {\n description: 'Specifies the maximum number of characters that can be entered into the text field.',\n control: 'number',\n table: {\n category: 'ifx-text-field props',\n }\n },\n value: {\n description: 'The value of the text field. It is used for the form submission.',\n control: 'text',\n table: {\n category: 'ifx-text-field props',\n type: {\n summary: 'string'\n }\n }\n },\n autocomplete: {\n description: 'Sets the autocomplete attribute. \"on\" by default.',\n control: 'text',\n table: {\n category: 'ifx-text-field props',\n type: {\n summary: 'string'\n }\n }\n },\n type: {\n description: 'Sets the type attribute. \"Text\" by default.',\n options: ['text', 'password'],\n control: 'radio',\n table: {\n category: 'ifx-text-field props',\n type: {\n summary: 'string'\n },\n defaultValue: {\n summary: 'text'\n }\n }\n },\n ifxInput: {\n action: 'ifxInput',\n description: 'Custom event emitted on input change.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value, autocomplete, type }) => {\n const element = document.createElement('ifx-text-field');\n element.setAttribute('error', error);\n element.setAttribute('disabled', disabled);\n element.setAttribute('size', size);\n element.setAttribute('icon', icon);\n element.setAttribute('success', success);\n element.setAttribute('placeholder', placeholder);\n element.setAttribute('caption', caption);\n element.setAttribute('required', required);\n element.setAttribute('optional', optional);\n element.setAttribute('name', name);\n element.setAttribute('show-delete-icon', showDeleteIcon);\n element.setAttribute('value', value);\n element.setAttribute('autocomplete', autocomplete);\n element.setAttribute('type', type);\n if (maxlength) element.setAttribute('maxlength', maxlength);\n\n element.addEventListener('ifxInput', action('ifxInput'));\n\n\n const slotContent = document.createTextNode(label);\n element.appendChild(slotContent);\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
1
+ {"version":3,"file":"text-field.stories.js","sourceRoot":"","sources":["../../../src/components/text-field/text-field.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\nimport { icons } from '@infineon/infineon-icons';\n\nexport default {\n title: 'Components/Text Field',\n // tags: ['autodocs'],\n\n args: {\n label: 'Label',\n error: false,\n disabled: false,\n size: 'm',\n icon: 'c-info-16',\n success: false,\n placeholder: 'Placeholder',\n caption: 'Caption',\n required: true,\n optional: false,\n name: 'text-field',\n showDeleteIcon: false,\n maxlength: '',\n value: '',\n autocomplete: 'on',\n type: 'text',\n internalId: 'text-field'\n },\n\n argTypes: {\n label: {\n name: 'Label of Text Field',\n description: 'The text label displayed above the *<ifx-text-field>*.',\n table: {\n category: 'story controls',\n }\n },\n error: {\n description: 'Indicates an error state for the text field.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n disabled: {\n description: 'Disables the text field.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n size: {\n description: 'Size options: s (36px) and m (40px) - default: m',\n options: ['s', 'm'],\n control: 'radio',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: 'm'\n }\n }\n },\n icon: {\n description: 'Specifies an icon to display within the text field.',\n options: Object.values(icons).map(i => i['name']),\n control: 'select',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: 'c-info-16'\n }\n }\n },\n success: {\n description: 'Indicates a successful state for the text field.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n placeholder: {\n description: 'Displays a placeholder text inside the text field when it is empty.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n caption: {\n description: 'Text displayed below the text field to provide additional information.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n required: {\n description: 'Marks the text field as required for form submission. Displays an asterisk next to the label when set to **true**.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: true\n }\n }\n },\n optional: {\n description: 'Indicates that the field is optional.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n name: {\n description: 'Name of the element, that is used as reference when a form is submitted.',\n table: {\n category: 'ifx-text-field props',\n }\n },\n showDeleteIcon: {\n description: 'Displays a delete icon inside the text field when set to **true**, allowing user to clear the input content.',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: false\n }\n }\n },\n maxlength: {\n description: 'Specifies the maximum number of characters that can be entered into the text field.',\n control: 'number',\n table: {\n category: 'ifx-text-field props',\n }\n },\n value: {\n description: 'The value of the text field. It is used for the form submission.',\n control: 'text',\n table: {\n category: 'ifx-text-field props',\n type: {\n summary: 'string'\n }\n }\n },\n internalId: {\n description: 'Sets the ID of the internal input and the value of htmlFor for the label element',\n control: 'text',\n table: {\n category: 'ifx-text-field props',\n defaultValue: {\n summary: 'text-field'\n },\n type: {\n summary: 'string'\n }\n }\n },\n autocomplete: {\n description: 'Sets the autocomplete attribute. \"on\" by default.',\n control: 'text',\n table: {\n category: 'ifx-text-field props',\n type: {\n summary: 'string'\n }\n }\n },\n type: {\n description: 'Sets the type attribute. \"Text\" by default.',\n options: ['text', 'password'],\n control: 'radio',\n table: {\n category: 'ifx-text-field props',\n type: {\n summary: 'string'\n },\n defaultValue: {\n summary: 'text'\n }\n }\n },\n ifxInput: {\n action: 'ifxInput',\n description: 'Custom event emitted on input change.',\n table: {\n category: 'custom events',\n type: {\n summary: 'Framework integration',\n detail:\n 'React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});',\n },\n },\n },\n },\n};\n\nconst DefaultTemplate = ({ error, disabled, success, size, placeholder, label, caption, icon, required, optional, name, maxlength, showDeleteIcon, value, autocomplete, type, internalId }) => {\n const element = document.createElement('ifx-text-field');\n element.setAttribute('error', error);\n element.setAttribute('disabled', disabled);\n element.setAttribute('size', size);\n element.setAttribute('icon', icon);\n element.setAttribute('success', success);\n element.setAttribute('placeholder', placeholder);\n element.setAttribute('caption', caption);\n element.setAttribute('required', required);\n element.setAttribute('optional', optional);\n element.setAttribute('name', name);\n element.setAttribute('show-delete-icon', showDeleteIcon);\n element.setAttribute('value', value);\n element.setAttribute('autocomplete', autocomplete);\n element.setAttribute('type', type);\n element.setAttribute('internal-id', internalId);\n if (maxlength) element.setAttribute('maxlength', maxlength);\n\n element.addEventListener('ifxInput', action('ifxInput'));\n\n\n const slotContent = document.createTextNode(label);\n element.appendChild(slotContent);\n\n return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
package/dist/types/components/text-field/text-field.stories.d.ts CHANGED
@@ -17,6 +17,7 @@ declare const _default: {
17
17
  value: string;
18
18
  autocomplete: string;
19
19
  type: string;
20
+ internalId: string;
20
21
  };
21
22
  argTypes: {
22
23
  label: {
@@ -137,6 +138,19 @@ declare const _default: {
137
138
  };
138
139
  };
139
140
  };
141
+ internalId: {
142
+ description: string;
143
+ control: string;
144
+ table: {
145
+ category: string;
146
+ defaultValue: {
147
+ summary: string;
148
+ };
149
+ type: {
150
+ summary: string;
151
+ };
152
+ };
153
+ };
140
154
  autocomplete: {
141
155
  description: string;
142
156
  control: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@infineon/infineon-design-system-stencil",
3
- "version": "32.9.1--canary.1807.cb4f8690776423d0e6ca0cbd55c5923849a12f20.0",
3
+ "version": "32.9.1--canary.1807.21c4782cf65ca03365682865b763e8b64c4208df.0",
4
4
  "private": false,
5
5
  "description": "Infineon design system Stencil web components",
6
6
  "homepage": "https://infineon.github.io/infineon-design-system-stencil",