@infineon/infineon-design-system-stencil 30.9.3--canary.1677.79bde5cb960ca0ee87364cb0899d078b69a61f7b.0 → 30.9.3--canary.1640.c246fbcdce3247ffada7a2fffa49d05593d4088f.0

package/dist/collection/components/progress-bar/progress-bar.stories.js

@@ -3,17 +3,40 @@ export default {
     tags: ['autodocs'],
     args: {
         size: 'm',
-        percentage: 50,
+        value: 50,
         showLabel: false,
     },
     argTypes: {
-        percentage: {
+        value: {
+            description: 'The percentage of the progress bar.',
             control: { type: 'range', min: 0, max: 100 },
+            table: {
+                category: 'ifx-progress-bar props',
+                defaultValue: {
+                    summary: 50
+                }
+            }
+        },
+        showLabel: {
+            description: 'Shows the percentage of the progress bar. Does not fit in size ***s***.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-progress-bar props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
         size: {
-            description: 'Size options: s (36px) and m (40px) - default: m',
+            description: 'Sets the size of the progress bar. Options: s (36px) and m (40px).',
+            control: 'radio',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-progress-bar props',
+                defaultValue: {
+                    summary: 'm'
+                }
+            }
         },
     },
 };
@@ -21,7 +44,7 @@ const Template = args => {
     const wrapper = document.createElement('div');
     wrapper.innerHTML = `
     <ifx-progress-bar
-      value="${args.percentage}"
+      value="${args.value}"
       size="${args.size}"
       show-label="${args.showLabel}"
     ></ifx-progress-bar>
@@ -31,17 +54,17 @@ const Template = args => {
 export const Default = Template.bind({});
 Default.args = {
     size: 'm',
-    percentage: 50,
+    value: 50,
     showLabel: false,
 };
 export const Small = Template.bind({});
 Small.args = {
-    percentage: 75,
+    value: 75,
     size: 's',
 };
 export const WithLabel = Template.bind({});
 WithLabel.args = {
-    percentage: 25,
+    value: 25,
     showLabel: true,
 };
 //# sourceMappingURL=progress-bar.stories.js.map

package/dist/collection/components/progress-bar/progress-bar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.stories.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,UAAU,EAAE,EAAE;QACd,SAAS,EAAE,KAAK;KACjB;IACD,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;SAC7C;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,kDAAkD;YAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;eAEP,IAAI,CAAC,UAAU;cAChB,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,SAAS;;GAE/B,CAAC;IAEF,OAAO,OAAO,CAAC,SAAS,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,GAAG;IACT,UAAU,EAAE,EAAE;IACd,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,UAAU,EAAE,EAAE;IACd,IAAI,EAAE,GAAG;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,UAAU,EAAE,EAAE;IACd,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["export default {\n  title: 'Components/Progress Bar',\n  tags: ['autodocs'],\n\n  args: {\n    size: 'm',\n    percentage: 50,\n    showLabel: false,\n  },\n  argTypes: {\n    percentage: {\n      control: { type: 'range', min: 0, max: 100 },\n    },\n    size: {\n      description: 'Size options: s (36px) and m (40px) - default: m',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n    },\n  },\n};\n\nconst Template = args => {\n  const wrapper = document.createElement('div');\n  wrapper.innerHTML = `\n    <ifx-progress-bar\n      value=\"${args.percentage}\"\n      size=\"${args.size}\"\n      show-label=\"${args.showLabel}\"\n    ></ifx-progress-bar>\n  `;\n\n  return wrapper.innerHTML;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  size: 'm',\n  percentage: 50,\n  showLabel: false,\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n  percentage: 75,\n  size: 's',\n};\n\nexport const WithLabel = Template.bind({});\nWithLabel.args = {\n  percentage: 25,\n  showLabel: true,\n};\n"]}
+{"version":3,"file":"progress-bar.stories.js","sourceRoot":"","sources":["../../../src/components/progress-bar/progress-bar.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,KAAK;KACjB;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,WAAW,EAAE,qCAAqC;YAClD,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE;YAC5C,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,EAAE;iBACZ;aACF;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,yEAAyE;YACtF,OAAO,EAAE,SAAS;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,KAAK;iBACf;aACF;SACF;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,oEAAoE;YACjF,OAAO,EAAE,OAAO;YAChB,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,wBAAwB;gBAClC,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE;IACtB,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG;;eAEP,IAAI,CAAC,KAAK;cACX,IAAI,CAAC,IAAI;oBACH,IAAI,CAAC,SAAS;;GAE/B,CAAC;IAEF,OAAO,OAAO,CAAC,SAAS,CAAC;AAC3B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,GAAG;IACT,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,KAAK;CACjB,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;IACX,KAAK,EAAE,EAAE;IACT,IAAI,EAAE,GAAG;CACV,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,GAAG;IACf,KAAK,EAAE,EAAE;IACT,SAAS,EAAE,IAAI;CAChB,CAAC","sourcesContent":["export default {\n  title: 'Components/Progress Bar',\n  tags: ['autodocs'],\n\n  args: {\n    size: 'm',\n    value: 50,\n    showLabel: false,\n  },\n  argTypes: {\n    value: {\n      description: 'The percentage of the progress bar.',\n      control: { type: 'range', min: 0, max: 100 },\n      table: {\n        category: 'ifx-progress-bar props',\n        defaultValue: {\n          summary: 50\n        }\n      }\n    },\n    showLabel: {\n      description: 'Shows the percentage of the progress bar. Does not fit in size ***s***.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-progress-bar props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    size: {\n      description: 'Sets the size of the progress bar. Options: s (36px) and m (40px).',\n      control: 'radio',\n      options: ['s', 'm'],\n      table: {\n        category: 'ifx-progress-bar props',\n        defaultValue: {\n          summary: 'm'\n        }\n      }\n    },\n  },\n};\n\nconst Template = args => {\n  const wrapper = document.createElement('div');\n  wrapper.innerHTML = `\n    <ifx-progress-bar\n      value=\"${args.value}\"\n      size=\"${args.size}\"\n      show-label=\"${args.showLabel}\"\n    ></ifx-progress-bar>\n  `;\n\n  return wrapper.innerHTML;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  size: 'm',\n  value: 50,\n  showLabel: false,\n};\n\nexport const Small = Template.bind({});\nSmall.args = {\n  value: 75,\n  size: 's',\n};\n\nexport const WithLabel = Template.bind({});\nWithLabel.args = {\n  value: 25,\n  showLabel: true,\n};\n"]}

package/dist/collection/components/radio-button/radio-button.js

@@ -2,14 +2,10 @@ import { h } from "@stencil/core";
 export class RadioButton {
     constructor() {
         this.disabled = false;
-        this.value = undefined;
         this.error = false;
         this.size = "s";
-        this.name = undefined;
-        this.checked = undefined;
         this.internalChecked = false;
         this.hasSlot = true;
-        this.inputElement = undefined;
     }
     /**
      * @returns whether the radio button is checked.

package/dist/collection/components/radio-button/radio-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: false,\n  formAssociated: false\n})\nexport class RadioButton {\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop() size: \"s\" | \"m\" = \"s\";\n  @Prop() name: string;\n  @Prop() checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = true;\n\n  @State() inputElement: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n  /**\n   * @returns whether the radio button is checked.\n   */\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n  \n  componentWillLoad() {\n    if (this.checked) this.internalChecked = this.checked;\n    const slot = this.el.innerHTML;\n    if (slot) {\n      this.hasSlot = true;\n    } else this.hasSlot = false;\n  }\n\n\n  /**\n   * Click the hidden input element to let it handle the state\n   * and emit ifxChange event.\n   */\n  handleRadioButtonClick(event: PointerEvent) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  /**\n   * Listen to all change events.\n   * Needed to get informed when another button of the group gets chcked \n   * and this one needs to become unchecked. \n   * \n   * @param event \n   */\n  @Listen('change', { target: 'window' }) \n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if (target.name === this.name) {\n      this.internalChecked = this.inputElement.checked;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={this.handleRadioButtonClick.bind(this)}\n      >\n        <div\n          class={`radioButton__wrapper \n          ${this.internalChecked ? 'checked' : ''} \n          ${this.disabled ? 'disabled' : ''} \n          ${this.error ? 'error' : ''}`}\n          tabIndex={this.disabled ? -1 : 0}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n        <input\n          type=\"radio\" \n          hidden \n          ref={el => this.inputElement = el as HTMLInputElement} \n          name={this.name}  \n          value={this.value}\n          checked={this.internalChecked}        \n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}></input>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"radio-button.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Element, State, Event, EventEmitter, Listen, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-radio-button',\n  styleUrl: 'radio-button.scss',\n  shadow: false,\n  formAssociated: false\n})\nexport class RadioButton {\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() value: string;\n  @Prop() error: boolean = false;\n  @Prop() size: \"s\" | \"m\" = \"s\";\n  @Prop() name: string;\n  @Prop() checked: boolean;\n  @State() internalChecked: boolean = false;\n  @State() hasSlot: boolean = true;\n\n  @State() inputElement: HTMLInputElement;\n\n  @Event({ eventName: 'ifxChange' }) ifxChange: EventEmitter;\n\n  /**\n   * @returns whether the radio button is checked.\n   */\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n  \n  componentWillLoad() {\n    if (this.checked) this.internalChecked = this.checked;\n    const slot = this.el.innerHTML;\n    if (slot) {\n      this.hasSlot = true;\n    } else this.hasSlot = false;\n  }\n\n\n  /**\n   * Click the hidden input element to let it handle the state\n   * and emit ifxChange event.\n   */\n  handleRadioButtonClick(event: PointerEvent) {\n    if (this.disabled) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.inputElement.click();\n    this.internalChecked = this.inputElement.checked;\n    this.ifxChange.emit(this.internalChecked);\n  }\n\n  /**\n   * Listen to all change events.\n   * Needed to get informed when another button of the group gets chcked \n   * and this one needs to become unchecked. \n   * \n   * @param event \n   */\n  @Listen('change', { target: 'window' }) \n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if (target.name === this.name) {\n      this.internalChecked = this.inputElement.checked;\n    }\n  }\n\n  render() {\n    return (\n      <div\n        aria-label='a radio button' aria-value={this.value} aria-disabled={this.disabled}\n        class={`radioButton__container ${this.size} ${this.disabled ? 'disabled' : ''}`}\n        onClick={this.handleRadioButtonClick.bind(this)}\n      >\n        <div\n          class={`radioButton__wrapper \n          ${this.internalChecked ? 'checked' : ''} \n          ${this.disabled ? 'disabled' : ''} \n          ${this.error ? 'error' : ''}`}\n          tabIndex={this.disabled ? -1 : 0}\n        >\n          {this.internalChecked && <div class=\"radioButton__wrapper-mark\"></div>}\n        </div>\n        {this.hasSlot && (\n          <div class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : ''}`}>\n            <slot />\n          </div>\n        )}\n        <input\n          type=\"radio\" \n          hidden \n          ref={el => this.inputElement = el as HTMLInputElement} \n          name={this.name}  \n          value={this.value}\n          checked={this.internalChecked}        \n          disabled={this.disabled}\n          onClick={(e) => e.stopPropagation()}></input>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/radio-button/radio-button.stories.js

@@ -3,35 +3,88 @@ export default {
     title: 'Components/Radio Button',
     // tags: ['autodocs'],
     args: {
+        label: 'Text',
         error: false,
         disabled: false,
         checked: false,
         size: 's',
-        label: 'Text',
         name: 'radio-button',
         value: 'radio',
     },
     argTypes: {
-        ifxChange: {
-            description: 'Custom event emitted when radio button checked and unchecked',
+        error: {
+            description: 'Indicates whether the radio button is in an error state.',
+            control: 'boolean',
             table: {
-                type: {
-                    summary: 'Framework integration',
-                    detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
-                },
-            },
-            action: 'ifxChange',
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the radio button.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        checked: {
+            description: 'Determines whether the radio button is selected by default.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        label: {
+            name: 'Label of Radio Button',
+            description: 'Set the label displayed next to *<ifx-radio-button>*.',
+            table: {
+                category: 'story controls',
+            }
         },
         size: {
-            description: 'Size options: s (20px) and m (24px) - default: s',
+            description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',
+            control: 'radio',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-radio-button props',
+                defaultValue: {
+                    summary: 's'
+                },
+                type: {
+                    summary: 's | m'
+                }
+            }
         },
         name: {
-            description: 'Name of the element, that is used as reference when a form is submitted.'
+            description: 'Name of the element, that is used as reference when a form is submitted.',
+            table: {
+                category: 'ifx-radio-button props'
+            }
         },
         value: {
-            description: 'The value that gets submitted, when the radio button is checked'
+            description: 'The value that gets submitted, when the radio button is checked.',
+            table: {
+                category: 'ifx-radio-button props'
+            }
+        },
+        ifxChange: {
+            description: 'Custom event emitted when radio button checked and unchecked.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
+                },
+            },
+            action: 'ifxChange',
         }
     },
 };

package/dist/collection/components/radio-button/radio-button.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,yBAAyB;IAChC,sBAAsB;IAEtB,IAAI,EAAE;QACJ,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAK;QACf,OAAO,EAAE,KAAK;QACd,IAAI,EAAE,GAAG;QACT,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,cAAc;QACpB,KAAK,EAAE,OAAO;KACf;IACD,QAAQ,EAAE;QACR,SAAS,EAAE;YACT,WAAW,EAAE,8DAA8D;YAC3E,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,iLAAiL;iBACpL;aACF;YAED,MAAM,EAAE,WAAW;SACpB;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,kDAAkD;YAC/D,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;QACD,IAAI,EAAE;YACJ,WAAW,EAAE,0EAA0E;SACxF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,iEAAiE;SAC/E;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE;IAC7B,kCAAkC;IAClC,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;IAE3D,qBAAqB;IACrB,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1C,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAChD,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;IAC9C,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAE1C,+BAA+B;IAC/B,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;IAEzD,yBAAyB;IACzB,OAAO,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;IAE3D,qBAAqB;IACrB,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Radio Button',\n  // tags: ['autodocs'],\n\n  args: {\n    error: false,\n    disabled: false,\n    checked: false,\n    size: 's',\n    label: 'Text',\n    name: 'radio-button',\n    value: 'radio',\n  },\n  argTypes: {\n    ifxChange: {\n      description: 'Custom event emitted when radio button checked and unchecked',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n\n      action: 'ifxChange',\n    },\n    size: {\n      description: 'Size options: s (20px) and m (24px) - default: s',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n    },\n    name: {\n      description: 'Name of the element, that is used as reference when a form is submitted.'\n    },\n    value: {\n      description: 'The value that gets submitted, when the radio button is checked'\n    }\n  },\n};\n\nconst DefaultTemplate = args => {\n  // Create the radio button element\n  const element = document.createElement('ifx-radio-button');\n\n  // Set the attributes\n  element.setAttribute('error', args.error);\n  element.setAttribute('disabled', args.disabled);\n  element.setAttribute('checked', args.checked);\n  element.setAttribute('size', args.size);\n  element.setAttribute('name', args.name);\n  element.setAttribute('value', args.value);\n\n  // Add the label as a text node\n  element.appendChild(document.createTextNode(args.label));\n\n  // Add the event listener\n  element.addEventListener('ifxChange', action('ifxChange'));\n\n  // Return the element\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}
+{"version":3,"file":"radio-button.stories.js","sourceRoot":"","sources":["../../../src/components/radio-button/radio-button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Radio Button',\n  // tags: ['autodocs'],\n\n  args: {\n    label: 'Text',\n    error: false,\n    disabled: false,\n    checked: false,\n    size: 's',\n    name: 'radio-button',\n    value: 'radio',\n  },\n  argTypes: {\n    error: {\n      description: 'Indicates whether the radio button is in an error state.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    disabled: {\n      description: 'Disables the radio button.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    checked: {\n      description: 'Determines whether the radio button is selected by default.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    label: {\n      name: 'Label of Radio Button',\n      description: 'Set the label displayed next to *<ifx-radio-button>*.',\n      table: {\n        category: 'story controls',\n      }\n    },\n    size: {\n      description: 'Specifies the size of the radio button. Options: s (20px) and m (24px).',\n      control: 'radio',\n      options: ['s', 'm'],\n      table: {\n        category: 'ifx-radio-button props',\n        defaultValue: {\n          summary: 's'\n        },\n        type: {\n          summary: 's | m'\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-radio-button props'\n      }\n    },\n    value: {\n      description: 'The value that gets submitted, when the radio button is checked.',\n      table: {\n        category: 'ifx-radio-button props'\n      }\n    },\n    ifxChange: {\n      description: 'Custom event emitted when radio button checked and unchecked.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxChange={handleChange}\\nVue:@ifxChange=\"handleChange\"\\nAngular:(ifxChange)=\"handleChange()\"\\nVanillaJs:.addEventListener(\"ifxChange\", (event) => {//handle change});',\n        },\n      },\n\n      action: 'ifxChange',\n    }\n  },\n};\n\nconst DefaultTemplate = args => {\n  // Create the radio button element\n  const element = document.createElement('ifx-radio-button');\n\n  // Set the attributes\n  element.setAttribute('error', args.error);\n  element.setAttribute('disabled', args.disabled);\n  element.setAttribute('checked', args.checked);\n  element.setAttribute('size', args.size);\n  element.setAttribute('name', args.name);\n  element.setAttribute('value', args.value);\n\n  // Add the label as a text node\n  element.appendChild(document.createTextNode(args.label));\n\n  // Add the event listener\n  element.addEventListener('ifxChange', action('ifxChange'));\n\n  // Return the element\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\n"]}

package/dist/collection/components/search-bar/search-bar.js

@@ -1,21 +1,18 @@
 import { h } from "@stencil/core";
 export class SearchBar {
     constructor() {
+        this.isOpen = true;
+        this.disabled = false;
         this.handleCloseButton = () => {
             this.internalState = !this.internalState;
-            this.ifxSearchBarIsOpen.emit(this.internalState);
+            this.ifxOpen.emit(this.internalState);
         };
         this.handleFocus = () => {
             this.internalState = true;
         };
-        this.isOpen = true;
-        this.disabled = false;
-        this.internalState = undefined;
-        this.value = undefined;
-        this.maxlength = undefined;
     }
     async onNavbarMobile() {
-        this.ifxSearchBarIsOpen.emit(false);
+        this.ifxOpen.emit(false);
         this.internalState = false;
     }
     handlePropChange() {
@@ -26,13 +23,13 @@ export class SearchBar {
     }
     componentWillLoad() {
         this.setInitialState();
-        this.ifxSearchBarIsOpen.emit(this.internalState);
+        this.ifxOpen.emit(this.internalState);
     }
     handleInput(event) {
         this.value = event.detail;
     }
     render() {
-        return (h("div", { key: '80312faf68e6b0af2260c977d53f23b42067813f', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
+        return (h("div", { key: 'e1875ac2a7a96e59f77f3ecf7cc4079fe8509bf8', "aria-label": 'a search bar', "aria-disabled": this.disabled, class: `search-bar ${this.internalState ? 'open' : 'closed'}` }, this.internalState ? (h("div", { class: "search-bar-wrapper" }, h("ifx-search-field", { disabled: this.disabled, value: this.value, maxlength: this.maxlength, onIfxInput: this.handleInput.bind(this) }, h("ifx-icon", { icon: "search-16", slot: "search-icon" })), h("a", { tabindex: "-1", href: 'javascript:void(0)', onClick: this.handleCloseButton }, "Close"))) : (h("div", { class: "search-bar__icon-wrapper", onClick: this.handleCloseButton }, h("ifx-icon", { icon: "search-16" })))));
     }
     static get is() { return "ifx-search-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -150,8 +147,8 @@ export class SearchBar {
                     "references": {}
                 }
             }, {
-                "method": "ifxSearchBarIsOpen",
-                "name": "ifxSearchBarIsOpen",
+                "method": "ifxOpen",
+                "name": "ifxOpen",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/components/search-bar/search-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQvG,MAAM,OAAO,SAAS;;QAqBpB,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;YACzC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QAClD,CAAC,CAAA;QAkBD,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC,CAAA;sBA3CyB,IAAI;wBACF,KAAK;;;;;IASjC,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACnC,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAOD,eAAe;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAID,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IAClD,CAAC;IAGD,WAAW,CAAC,KAAkB;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,0EAAgB,cAAc,mBAAgB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,IACvH,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,oBAAoB;YAC7B,wBAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC9H,gBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC;YAEnB,SAAG,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAAW,CACjF,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB;YACnE,gBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Prop() maxlength?: number;\n  @Event() ifxInput: EventEmitter;\n  @Event() ifxSearchBarIsOpen: EventEmitter;\n  @Element() el;\n\n  @Method()\n  async onNavbarMobile() {\n    this.ifxSearchBarIsOpen.emit(false)\n    this.internalState = false;\n  }\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n    this.ifxSearchBarIsOpen.emit(this.internalState)\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  \n\n  componentWillLoad() {\n    this.setInitialState();\n    this.ifxSearchBarIsOpen.emit(this.internalState)\n  }\n\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n\n            <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"search-bar.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAQvG,MAAM,OAAO,SAAS;IALtB;QAMU,WAAM,GAAY,IAAI,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;QAmBlC,sBAAiB,GAAG,GAAG,EAAE;YACvB,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC;YACzC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;QACvC,CAAC,CAAA;QAkBD,gBAAW,GAAG,GAAG,EAAE;YACjB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;QAC5B,CAAC,CAAA;KAsBF;IAvDC,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACxB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;IAC7B,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAOD,eAAe;QACb,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;IACnC,CAAC;IAID,iBAAiB;QACf,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IACvC,CAAC;IAGD,WAAW,CAAC,KAAkB;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC;IAC5B,CAAC;IAOD,MAAM;QACJ,OAAO,CACL,0EAAgB,cAAc,mBAAgB,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,EAAE,IACvH,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,CACpB,WAAK,KAAK,EAAC,oBAAoB;YAC7B,wBAAkB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,EAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;gBAC9H,gBAAU,IAAI,EAAC,WAAW,EAAC,IAAI,EAAC,aAAa,GAAY,CACxC;YAEnB,SAAG,QAAQ,EAAC,IAAI,EAAC,IAAI,EAAC,oBAAoB,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB,YAAW,CACjF,CACP,CAAC,CAAC,CAAC,CACF,WAAK,KAAK,EAAC,0BAA0B,EAAC,OAAO,EAAE,IAAI,CAAC,iBAAiB;YACnE,gBAAU,IAAI,EAAC,WAAW,GAAY,CAClC,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element, Method } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-search-bar',\n  styleUrl: 'search-bar.scss',\n  shadow: true,\n})\nexport class SearchBar {\n  @Prop() isOpen: boolean = true;\n  @Prop() disabled: boolean = false;\n  @State() internalState: boolean;\n  @Prop({ mutable: true }) value: string;\n  @Prop() maxlength?: number;\n  @Event() ifxInput: EventEmitter;\n  @Event() ifxOpen: EventEmitter;\n  @Element() el;\n\n  @Method()\n  async onNavbarMobile() {\n    this.ifxOpen.emit(false)\n    this.internalState = false;\n  }\n\n  @Watch('isOpen')\n  handlePropChange() {\n    this.internalState = this.isOpen;\n  }\n\n  handleCloseButton = () => {\n    this.internalState = !this.internalState;\n    this.ifxOpen.emit(this.internalState)\n  }\n\n  setInitialState() {\n    this.internalState = this.isOpen;\n  }\n\n  \n\n  componentWillLoad() {\n    this.setInitialState();\n    this.ifxOpen.emit(this.internalState)\n  }\n\n\n  handleInput(event: CustomEvent) {\n    this.value = event.detail;\n  }\n\n  handleFocus = () => {\n    this.internalState = true;\n  }\n\n\n  render() {\n    return (\n      <div aria-label='a search bar' aria-disabled={this.disabled} class={`search-bar ${this.internalState ? 'open' : 'closed'}`}>\n        {this.internalState ? (\n          <div class=\"search-bar-wrapper\">\n            <ifx-search-field disabled={this.disabled} value={this.value} maxlength={this.maxlength} onIfxInput={this.handleInput.bind(this)}>\n              <ifx-icon icon=\"search-16\" slot=\"search-icon\"></ifx-icon>\n            </ifx-search-field>\n\n            <a tabindex=\"-1\" href='javascript:void(0)' onClick={this.handleCloseButton}>Close</a>\n          </div>\n        ) : (\n          <div class=\"search-bar__icon-wrapper\" onClick={this.handleCloseButton}>\n            <ifx-icon icon=\"search-16\"></ifx-icon>\n          </div>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/search-bar/search-bar.stories.js

@@ -5,33 +5,82 @@ export default {
     args: {
         disabled: false,
         isOpen: true,
+        value: '',
     },
     argTypes: {
-        ifxInput: {
-            action: 'ifxInput',
-            description: 'Custom event emitted on input\n\n(see below for Two Way Data Binding in different JS frameworks)',
+        isOpen: {
+            description: 'Controls the display of the search bar.',
+            control: { type: 'boolean' },
+            table: {
+                defaultValue: { summary: 'true' },
+                category: 'ifx-search-bar props',
+                type: {
+                    summary: 'boolean',
+                },
+            },
+        },
+        disabled: {
+            description: 'Disables the search bar.',
+            control: { type: 'boolean' },
+            table: {
+                defaultValue: { summary: 'false' },
+                category: 'ifx-search-bar props',
+                type: {
+                    summary: 'boolean',
+                },
+            },
+        },
+        value: {
+            description: 'The value is used to handle the search bar input.',
+            control: { type: 'text' },
+            table: {
+                category: 'ifx-search-bar props',
+                type: {
+                    summary: 'string',
+                },
+            },
         },
         maxlength: {
-            description: 'Maximum input length',
-            control: { type: 'number' }
+            description: 'Maximum input length.',
+            control: { type: 'number' },
+            table: {
+                category: 'ifx-search-bar props',
+                type: {
+                    summary: 'number',
+                },
+            },
         },
-        ifxSearchBarIsOpen: {
+        ifxInput: {
             action: 'ifxInput',
-            description: 'Custom event',
+            description: 'Custom event emitted on input.',
+            table: {
+                category: 'custom events',
+                type: {
+                    summary: 'Framework integration',
+                    detail: `React: onIfxInput={handleInput}\nVue:@ifxInput="handleInput"\nAngular:(ifxInput)="handleInput()"\nVanillaJs:.addEventListener("ifxInput", (event) => {//handle input});`,
+                }
+            }
+        },
+        ifxOpen: {
+            action: 'ifxOpen',
+            description: 'Custom event emitted when the state of *isOpen* changes.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
-                    detail: 'React: onIfxInput={handleInput}\nVue:@ifxInput="handleInput"\nAngular:(ifxInput)="handleInput()"\nVanillaJs:.addEventListener("ifxInput", (event) => {//handle input});',
+                    detail: `React: onIfxOpen={handleOpen}\nVue:@ifxOpen="handleOpen"\nAngular:(ifxOpen)="handleOpen()"\nVanillaJs:.addEventListener("ifxOpen", (event) => {//handle open});`,
                 },
             },
         },
     },
 };
-const DefaultTemplate = ({ isOpen, disabled, maxlength }) => {
+const DefaultTemplate = ({ isOpen, disabled, maxlength, value }) => {
     const element = document.createElement('ifx-search-bar');
     element.setAttribute('is-open', isOpen);
     element.setAttribute('disabled', disabled);
+    element.setAttribute('value', value);
     element.addEventListener('ifxInput', action('ifxInput'));
+    element.addEventListener('ifxOpen', action('ifxOpen'));
     if (maxlength != undefined)
         element.setAttribute('maxlength', maxlength);
     return element;

package/dist/collection/components/search-bar/search-bar.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-bar.stories.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,IAAI;KACb;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,kGAAkG;SAChH;QACD,SAAS,EAAE;YACT,WAAW,EAAE,sBAAsB;YACnC,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAC;SAC1B;QACD,kBAAkB,EAAE;YAClB,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,cAAc;YAC3B,KAAK,EAAE;gBACL,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,yKAAyK;iBAC5K;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,EAAE;IAC1D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IACzD,IAAG,SAAS,IAAI,SAAS;QAAE,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAExE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Search Bar',\n  // tags: ['autodocs'],\n\n  args: {\n    disabled: false,\n    isOpen: true,\n  },\n  argTypes: {\n    ifxInput: {\n      action: 'ifxInput',\n      description: 'Custom event emitted on input\\n\\n(see below for Two Way Data Binding in different JS frameworks)',\n    },\n    maxlength: {\n      description: 'Maximum input length',\n      control: {type: 'number'}\n    },\n    ifxSearchBarIsOpen: {\n      action: 'ifxInput',\n      description: 'Custom event',\n      table: {\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 = ({ isOpen, disabled, maxlength }) => {\n  const element = document.createElement('ifx-search-bar');\n  element.setAttribute('is-open', isOpen);\n  element.setAttribute('disabled', disabled);\n  element.addEventListener('ifxInput', action('ifxInput'));\n  if(maxlength != undefined) element.setAttribute('maxlength', maxlength);\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {};\n"]}
+{"version":3,"file":"search-bar.stories.js","sourceRoot":"","sources":["../../../src/components/search-bar/search-bar.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,sBAAsB;IAEtB,IAAI,EAAE;QACJ,QAAQ,EAAE,KAAK;QACf,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,EAAE;KACV;IAED,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,WAAW,EAAE,yCAAyC;YACtD,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;YAC5B,KAAK,EAAE;gBACL,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;gBACjC,QAAQ,EAAE,sBAAsB;gBAChC,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,0BAA0B;YACvC,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;YAC5B,KAAK,EAAE;gBACL,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;gBAClC,QAAQ,EAAE,sBAAsB;gBAChC,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;QACD,KAAK,EAAE;YACL,WAAW,EAAE,mDAAmD;YAChE,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;YACzB,KAAK,EACL;gBACE,QAAQ,EAAE,sBAAsB;gBAChC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,SAAS,EAAE;YACT,WAAW,EAAE,uBAAuB;YACpC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,KAAK,EACL;gBACE,QAAQ,EAAE,sBAAsB;gBAChC,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,MAAM,EAAE,UAAU;YAClB,WAAW,EAAE,gCAAgC;YAC7C,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EAAE,yKAAyK;iBAClL;aACF;SACF;QACD,OAAO,EAAE;YACP,MAAM,EAAE,SAAS;YACjB,WAAW,EAAE,0DAA0D;YACvE,KAAK,EAAE;gBACL,QAAQ,EAAE,eAAe;gBACzB,IAAI,EAAE;oBACJ,OAAO,EAAE,uBAAuB;oBAChC,MAAM,EACJ,iKAAiK;iBACpK;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,EAAE;IACjE,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;IACzD,OAAO,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;IACxC,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;IAC3C,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACrC,OAAO,CAAC,gBAAgB,CAAC,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC;IACzD,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC;IAEvD,IAAI,SAAS,IAAI,SAAS;QAAE,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;IAEzE,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,IAAI,GAAG,EAAE,CAAC","sourcesContent":["import { action } from '@storybook/addon-actions';\n\nexport default {\n  title: 'Components/Search Bar',\n  // tags: ['autodocs'],\n\n  args: {\n    disabled: false,\n    isOpen: true,\n    value: '',\n  },\n\n  argTypes: {\n    isOpen: {\n      description: 'Controls the display of the search bar.',\n      control: { type: 'boolean' },\n      table: {\n        defaultValue: { summary: 'true' },\n        category: 'ifx-search-bar props',\n        type: {\n          summary: 'boolean',\n        },\n      },\n    },\n    disabled: {\n      description: 'Disables the search bar.',\n      control: { type: 'boolean' },\n      table: {\n        defaultValue: { summary: 'false' },\n        category: 'ifx-search-bar props',\n        type: {\n          summary: 'boolean',\n        },\n      },\n    },\n    value: {\n      description: 'The value is used to handle the search bar input.',\n      control: { type: 'text' },\n      table:\n      {\n        category: 'ifx-search-bar props',\n        type: {\n          summary: 'string',\n        },\n      },\n    },\n    maxlength: {\n      description: 'Maximum input length.',\n      control: { type: 'number' },\n      table:\n      {\n        category: 'ifx-search-bar props',\n        type: {\n          summary: 'number',\n        },\n      },\n    },\n    ifxInput: {\n      action: 'ifxInput',\n      description: 'Custom event emitted on input.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail: `React: onIfxInput={handleInput}\\nVue:@ifxInput=\"handleInput\"\\nAngular:(ifxInput)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxInput\", (event) => {//handle input});`,\n        }\n      }\n    },\n    ifxOpen: {\n      action: 'ifxOpen',\n      description: 'Custom event emitted when the state of *isOpen* changes.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            `React: onIfxOpen={handleOpen}\\nVue:@ifxOpen=\"handleOpen\"\\nAngular:(ifxOpen)=\"handleOpen()\"\\nVanillaJs:.addEventListener(\"ifxOpen\", (event) => {//handle open});`,\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = ({ isOpen, disabled, maxlength, value }) => {\n  const element = document.createElement('ifx-search-bar');\n  element.setAttribute('is-open', isOpen);\n  element.setAttribute('disabled', disabled);\n  element.setAttribute('value', value);\n  element.addEventListener('ifxInput', action('ifxInput'));\n  element.addEventListener('ifxOpen', action('ifxOpen'));\n\n  if (maxlength != undefined) element.setAttribute('maxlength', maxlength);\n\n  return element;\n};\n\nexport const Default = DefaultTemplate.bind({});\nDefault.args = {};\n"]}

package/dist/collection/components/search-field/search-field.js

@@ -2,6 +2,15 @@ import { h } from "@stencil/core";
 import classNames from "classnames";
 export class SearchField {
     constructor() {
+        this.value = '';
+        this.insideDropdown = false;
+        this.showDeleteIcon = false;
+        this.showDeleteIconInternalState = false;
+        this.disabled = false;
+        this.size = 'l';
+        this.isFocused = false;
+        this.placeholder = "Search...";
+        this.maxlength = null;
         this.handleInput = () => {
             const query = this.inputElement.value;
             this.value = query; // update the value property when input changes
@@ -12,15 +21,6 @@ export class SearchField {
             this.value = "";
             this.ifxInput.emit(this.value);
         };
-        this.value = '';
-        this.insideDropdown = false;
-        this.showDeleteIcon = false;
-        this.showDeleteIconInternalState = false;
-        this.disabled = false;
-        this.size = 'l';
-        this.isFocused = false;
-        this.placeholder = "Search...";
-        this.maxlength = null;
     }
     handleOutsideClick(event) {
         const path = event.composedPath();

package/dist/collection/components/search-field/search-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"search-field.js","sourceRoot":"","sources":["../../../src/components/search-field/search-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n  \n\n\n\n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"]}
+{"version":3,"file":"search-field.js","sourceRoot":"","sources":["../../../src/components/search-field/search-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAgB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,UAAU,MAAM,YAAY,CAAC;AAWpC,MAAM,OAAO,WAAW;IAPxB;QAS2B,UAAK,GAAW,EAAE,CAAC;QAGnC,mBAAc,GAAY,KAAK,CAAC;QAEjC,mBAAc,GAAY,KAAK,CAAC;QAC/B,gCAA2B,GAAY,KAAK,CAAC;QAC9C,aAAQ,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAW,GAAG,CAAC;QAClB,cAAS,GAAY,KAAK,CAAC;QAC5B,gBAAW,GAAW,WAAW,CAAC;QAClC,cAAS,GAAY,IAAI,CAAC;QAkBlC,gBAAW,GAAG,GAAG,EAAE;YACjB,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC;YACtC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,CAAC,+CAA+C;YACnE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;QAEF,iBAAY,GAAG,GAAG,EAAE;YAClB,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,EAAE,CAAC;YAC7B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAA;KAyDF;IAlFC,kBAAkB,CAAC,KAAiB;QAClC,MAAM,IAAI,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,CAAC;YACtC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;IACH,CAAC;IAGD,YAAY,CAAC,QAAgB;QAC3B,IAAI,QAAQ,KAAK,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;YACzC,IAAI,CAAC,YAAY,CAAC,KAAK,GAAG,QAAQ,CAAC;QACrC,CAAC;IACH,CAAC;IAeD,UAAU;QACR,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;IACxB,CAAC;IAKD,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,KAAK,EAAE,EAAE,CAAC;YACtB,IAAI,CAAC,2BAA2B,GAAG,IAAI,CAAC;QAC1C,CAAC;;YAAM,IAAI,CAAC,2BAA2B,GAAG,KAAK,CAAC;IAClD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,0EAAgB,+BAA+B,mBAAgB,IAAI,CAAC,QAAQ,gBAAc,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,cAAc;YACxH,4DAAK,KAAK,EAAE,IAAI,CAAC,oBAAoB,EAAE,EACrC,QAAQ,EAAE,CAAC,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE,EAChC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,EAAE;gBAEhC,iEAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,GAAY;gBAC1D,8DACE,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC,EACrC,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE,EACjC,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB;gBACD,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,2BAA2B,CAAC,CAAC,CAAC,CACzD,gBAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,GAC9D,CACZ,CAAC,CAAC,CAAC,IAAI,CACJ,CACF,CACP,CAAC;IACJ,CAAC;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;YAC3B,CAAC,CAAC,yBAAyB;YAC3B,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAGD,oBAAoB;QAClB,OAAO,UAAU,CACf,uBAAuB,EACvB,yBAAyB,IAAI,CAAC,YAAY,EAAE,EAAE,EAC9C,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CACrC,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, EventEmitter, h, Event, Prop, Watch, State, Listen } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n\n@Component({\n  tag: 'ifx-search-field',\n  styleUrl: 'search-field.scss',\n  shadow: true\n})\n\n\nexport class SearchField {\n  private inputElement: HTMLInputElement;\n  @Prop({ mutable: true }) value: string = '';\n\n  @Event() ifxInput: EventEmitter<String>;\n  @State() insideDropdown: boolean = false;\n\n  @Prop() showDeleteIcon: boolean = false;\n  @State() showDeleteIconInternalState: boolean = false;\n  @Prop() disabled: boolean = false;\n  @Prop() size: string = 'l';\n  @State() isFocused: boolean = false;\n  @Prop() placeholder: string = \"Search...\";\n  @Prop() maxlength?: number = null;  \n\n  @Listen('mousedown', { target: 'document' })\n  handleOutsideClick(event: MouseEvent) {\n    const path = event.composedPath();\n    if (!path.includes(this.inputElement)) {\n      this.isFocused = false;\n    }\n  }\n\n  @Watch('value')\n  valueWatcher(newValue: string) {\n    if (newValue !== this.inputElement.value) {\n      this.inputElement.value = newValue;\n    }\n  }\n\n\n  handleInput = () => {\n    const query = this.inputElement.value;\n    this.value = query; // update the value property when input changes\n    this.ifxInput.emit(this.value);\n  };\n\n  handleDelete = () => {\n    this.inputElement.value = '';\n    this.value = \"\";\n    this.ifxInput.emit(this.value);\n  }\n\n  focusInput() {\n    this.inputElement.focus();\n    this.isFocused = true;\n  }\n  \n\n\n\n  componentWillUpdate() {\n    if (this.value !== \"\") {\n      this.showDeleteIconInternalState = true;\n    } else this.showDeleteIconInternalState = false;\n  }\n\n  render() {\n    return (\n      <div aria-label=\"a search field for user input\" aria-disabled={this.disabled} aria-value={this.value} class='search-field'>\n        <div class={this.getWrapperClassNames()}\n          tabindex={1}\n          onFocus={() => this.focusInput()}\n          onClick={() => this.focusInput()}\n        >\n          <ifx-icon icon=\"search-16\" class=\"search-icon\"></ifx-icon>\n          <input\n            ref={(el) => (this.inputElement = el)}\n            type=\"text\"\n            onInput={() => this.handleInput()}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            maxlength={this.maxlength}\n            value={this.value} // bind the value property to input element\n          />\n          {this.showDeleteIcon && this.showDeleteIconInternalState ? (\n            <ifx-icon icon=\"cremove16\" class=\"delete-icon\" onClick={this.handleDelete}>\n            </ifx-icon>\n          ) : null}\n        </div>\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"search-field__wrapper-s\"\n      : \"\";\n  }\n\n\n  getWrapperClassNames() {\n    return classNames(\n      `search-field__wrapper`,\n      `search-field__wrapper ${this.getSizeClass()}`,\n      `${this.isFocused ? 'focused' : \"\"}`\n    );\n  }\n}"]}

package/dist/collection/components/search-field/search-field.stories.js

@@ -6,25 +6,70 @@ export default {
         showDeleteIcon: true,
         disabled: false,
         size: 'm',
+        value: '',
+        placeholder: 'Search...',
     },
     argTypes: {
+        showDeleteIcon: {
+            description: 'Determines whether a delete icon is shown in the search field.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-search-field props',
+                defaultValue: {
+                    summary: true
+                }
+            }
+        },
+        disabled: {
+            description: 'Disables the search field, preventing user interaction.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-search-field props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
         size: {
-            description: 'Size options: s (36px) and m (40px) - default: m',
+            description: 'Size options: s (36px) and m (40px) - default: m.',
+            control: 'radio',
             options: ['s', 'm'],
-            control: { type: 'radio' },
+            table: {
+                category: 'ifx-search-field props',
+                defaultValue: {
+                    summary: 'm'
+                }
+            }
         },
         placeholder: {
-            description: 'Place holder text - default value: "Search..."',
-            control: { type: 'text' }
+            description: 'Placeholder text displayed in the search field when it is empty.',
+            control: 'text',
+            table: {
+                category: 'ifx-search-field props',
+                defaultValue: {
+                    summary: 'Search...'
+                }
+            }
         },
         maxlength: {
-            description: 'Maximum input length',
-            control: { type: 'number' }
+            description: 'Specifies the maximum number of characters that can be entered into the search field.',
+            control: 'number',
+            table: {
+                category: 'ifx-search-field props'
+            }
+        },
+        value: {
+            description: 'The value of the search field. It is used for the form submission.',
+            control: 'text',
+            table: {
+                category: 'ifx-search-field props'
+            }
         },
         ifxInput: {
             action: 'ifxInput',
-            description: 'Custom event',
+            description: 'A custom event triggered whenever there is input in the search field.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxInput={handleInput}\nVue:@ifxInput="handleInput"\nAngular:(ifxInput)="handleInput()"\nVanillaJs:.addEventListener("ifxInput", (event) => {//handle input});',
@@ -33,11 +78,12 @@ export default {
         },
     },
 };
-const DefaultTemplate = ({ disabled, size, showDeleteIcon, placeholder, maxlength }) => {
+const DefaultTemplate = ({ disabled, size, showDeleteIcon, placeholder, maxlength, value }) => {
     const element = document.createElement('ifx-search-field');
     element.setAttribute('size', size);
     element.setAttribute('disabled', disabled);
     element.setAttribute('show-delete-icon', showDeleteIcon);
+    element.setAttribute('value', value);
     if (placeholder != undefined)
         element.setAttribute('placeholder', placeholder);
     if (maxlength != undefined)