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

package/dist/collection/components/select/single-select/select.stories.js

@@ -22,6 +22,7 @@ export default {
     title: 'Components/Select/Single Select',
     // tags: ['autodocs'],
     args: {
+        label: '',
         size: 'm',
         showSearch: true,
         searchPlaceholderValue: 'Search...',
@@ -29,7 +30,6 @@ export default {
         placeholderValue: 'Placeholder',
         error: false,
         errorMessage: 'Some error',
-        label: '',
         disabled: false,
         // type: 'single', //for later implementation
     },
@@ -39,51 +39,108 @@ export default {
         //   control: false,
         // },
         size: {
-            options: {
-                'small (36px)': 's',
-                'medium (40px)': 'm',
-            },
-            control: {
-                type: 'radio',
-            },
+            description: 'Specifies the size. Options: small - s (36px) medium - m (40px).',
+            control: 'radio',
+            options: ['s', 'm'],
+            table: {
+                category: 'ifx-select props',
+                defaultValue: {
+                    summary: 'm'
+                }
+            }
         },
         placeholder: {
-            options: [true, false],
-            control: { type: 'radio' },
+            description: 'Determines whether a placeholder is displayed or not.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-select props',
+                defaultValue: {
+                    summary: true
+                }
+            }
+        },
+        placeholderValue: {
+            description: 'Sets the text displayed as the placeholder when placeholder is set to true.',
+            table: {
+                category: 'ifx-select props'
+            }
         },
-        placeholderValue: { control: 'text' },
-        // value: { for later implementation
-        //   control: 'text',
-        //   description: 'Programmatically set the selected value',
-        // },
         error: {
-            options: [true, false],
-            control: { type: 'radio' },
+            description: 'Displays an error state.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-select props',
+                defaultValue: {
+                    summary: false
+                }
+            }
+        },
+        errorMessage: {
+            description: 'Message displayed when error is set to true.',
+            table: {
+                category: 'ifx-select props'
+            }
+        },
+        label: {
+            description: 'Sets the label.',
+            table: {
+                category: 'ifx-select props'
+            }
         },
-        errorMessage: { control: 'text' },
-        label: { control: 'text' },
         disabled: {
-            options: [true, false],
-            control: { type: 'radio' },
+            description: 'Disables the dropdown.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-select props',
+                defaultValue: {
+                    summary: false
+                }
+            }
         },
         showSearch: {
-            options: [true, false],
-            control: { type: 'radio' },
+            description: 'Enables a search bar inside the dropdown to filter options.',
+            control: 'boolean',
+            table: {
+                category: 'ifx-select props',
+                defaultValue: {
+                    summary: true
+                }
+            }
+        },
+        searchPlaceholderValue: {
+            description: 'Placeholder text for the search input field.',
+            table: {
+                category: 'ifx-select props'
+            }
         },
-        searchPlaceholderValue: { control: { type: 'text' } },
         options: {
-            description: 'Takes an array of objects in the following format',
+            description: 'Takes an array of objects in the following format.',
+            table: {
+                category: 'ifx-select props'
+            }
         },
         ifxSelect: {
             action: 'ifxSelect',
-            description: 'Custom event emitted when item is selected',
+            description: 'Custom event emitted when item is selected.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxSelect={handleInput}\nVue:@ifxSelect="handleInput"\nAngular:(ifxSelect)="handleInput()"\nVanillaJs:.addEventListener("ifxSelect", (event) => {//handle input});',
                 },
             },
         },
+        ifxInput: {
+            action: 'ifxInput',
+            description: 'A custom event *ifxInput* is emitted immediately after the value of *Search* 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});',
+                },
+            },
+        },
     },
 };
 const DefaultTemplate = args => {

package/dist/collection/components/select/single-select/select.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.stories.js","sourceRoot":"","sources":["../../../../src/components/select/single-select/select.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\n//use string instead of json format here to avoid ugly formatting in the storybook code snippet\n// let options = \"[{'value': 'a','label': 'option a','selected': 'false'},{'value': 'b','label': 'option b','selected': 'false'},{'value': 'c','label': 'option c','selected': 'false'}]\"\nconst options = [\n  {\n    value: 'a',\n    label: 'option a',\n    selected: false,\n  },\n  {\n    value: 'b',\n    label: 'option b',\n    selected: false,\n  },\n  {\n    value: 'c',\n    label: 'option c',\n    selected: false,\n  },\n];\n\nexport default {\n  title: 'Components/Select/Single Select',\n  // tags: ['autodocs'],\n  args: {\n    size: 'm',\n    showSearch: true,\n    searchPlaceholderValue: 'Search...',\n    placeholder: true,\n    placeholderValue: 'Placeholder',\n    error: false,\n    errorMessage: 'Some error',\n    label: '',\n    disabled: false,\n    // type: 'single', //for later implementation\n  },\n\n  argTypes: {\n    // type: { //for later implementation\n    //   // control: { type: 'radio' },\n    //   control: false,\n    // },\n    size: {\n      options: {\n        'small (36px)': 's',\n        'medium (40px)': 'm',\n      },\n      control: {\n        type: 'radio',\n      },\n    },\n    placeholder: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    placeholderValue: { control: 'text' },\n    // value: { for later implementation\n    //   control: 'text',\n    //   description: 'Programmatically set the selected value',\n    // },\n    error: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    errorMessage: { control: 'text' },\n    label: { control: 'text' },\n    disabled: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    showSearch: {\n      options: [true, false],\n      control: { type: 'radio' },\n    },\n    searchPlaceholderValue: { control: { type: 'text' } },\n\n    options: {\n      description: 'Takes an array of objects in the following format',\n    },\n    ifxSelect: {\n      action: 'ifxSelect',\n      description: 'Custom event emitted when item is selected',\n      table: {\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxSelect={handleInput}\\nVue:@ifxSelect=\"handleInput\"\\nAngular:(ifxSelect)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxSelect\", (event) => {//handle input});',\n        },\n      },\n    },\n  },\n};\n\nconst DefaultTemplate = args => {\n  const template = `<ifx-select \n  size='${args.size}'\n  placeholder='${args.placeholder}'\n  show-search='${args.showSearch}'\n  search-placeholder-value='${args.searchPlaceholderValue}'\n  disabled='${args.disabled}'\n  error='${args.error}'\n  error-message='${args.errorMessage}'\n  label='${args.label}'\n  placeholder-value='${args.placeholderValue}'\n  options='${JSON.stringify(args.options)}' >\n </ifx-select>`;\n  setTimeout(() => {\n    document.querySelector('ifx-select')?.addEventListener('ifxSelect', action('ifxSelect'));\n    document.querySelector('ifx-select')?.addEventListener('ifxInput', action('ifxInput'));\n  }, 0);\n\n  return template;\n};\n\nexport const Single = DefaultTemplate.bind({});\nSingle.args = {\n  // type: 'single',\n  options: options,\n};\n\n// export const Text = DefaultTemplate.bind({});\n// Text.args = {\n//   type: 'text',\n//   name: 'text',\n//   value: 'Placeholder',\n//   allowHTML: true,\n//   delimiter: ',',\n//   editItems: true,\n//   maxItemCount: 5,\n// };\n\n// export const Text = DefaultTemplate.bind({});\n// Text.args = {\n//   type: 'multiple',\n//   name: 'multiple',\n//   choices: 'Choice 1, Choice 2, Choice 3',\n// };\n\n// export const SingleWithIcon = DefaultTemplate.bind({});\n// SingleWithIcon.args = {\n//   type: 'single',\n//   choices: \"Choice 1, Choice 2 <ifx-icon icon='check16'></ifx-icon>, Choice 3 <ifx-icon icon='check16'></ifx-icon>\",\n// };\n\n// export const MultiselectCombobox = DefaultTemplate.bind({});\n// MultiselectCombobox.args = {\n//   type: 'multiple',\n//   // removeItemButton: true,\n// };\n"]}
+{"version":3,"file":"select.stories.js","sourceRoot":"","sources":["../../../../src/components/select/single-select/select.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { action } from '@storybook/addon-actions';\n\n//use string instead of json format here to avoid ugly formatting in the storybook code snippet\n// let options = \"[{'value': 'a','label': 'option a','selected': 'false'},{'value': 'b','label': 'option b','selected': 'false'},{'value': 'c','label': 'option c','selected': 'false'}]\"\nconst options = [\n  {\n    value: 'a',\n    label: 'option a',\n    selected: false,\n  },\n  {\n    value: 'b',\n    label: 'option b',\n    selected: false,\n  },\n  {\n    value: 'c',\n    label: 'option c',\n    selected: false,\n  },\n];\n\nexport default {\n  title: 'Components/Select/Single Select',\n  // tags: ['autodocs'],\n  args: {\n    label: '',\n    size: 'm',\n    showSearch: true,\n    searchPlaceholderValue: 'Search...',\n    placeholder: true,\n    placeholderValue: 'Placeholder',\n    error: false,\n    errorMessage: 'Some error',\n    disabled: false,\n    // type: 'single', //for later implementation\n  },\n\n  argTypes: {\n    // type: { //for later implementation\n    //   // control: { type: 'radio' },\n    //   control: false,\n    // },\n    size: {\n      description: 'Specifies the size. Options: small - s (36px) medium - m (40px).',\n      control: 'radio',\n      options: ['s', 'm'],\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: 'm'\n        }\n      }\n    },\n    placeholder: {\n      description: 'Determines whether a placeholder is displayed or not.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    placeholderValue: {\n      description: 'Sets the text displayed as the placeholder when placeholder is set to true.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    error: {\n      description: 'Displays an error state.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    errorMessage: {\n      description: 'Message displayed when error is set to true.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    label: {\n      description: 'Sets the label.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    disabled: {\n      description: 'Disables the dropdown.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: false\n        }\n      }\n    },\n    showSearch: {\n      description: 'Enables a search bar inside the dropdown to filter options.',\n      control: 'boolean',\n      table: {\n        category: 'ifx-select props',\n        defaultValue: {\n          summary: true\n        }\n      }\n    },\n    searchPlaceholderValue: {\n      description: 'Placeholder text for the search input field.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    options: {\n      description: 'Takes an array of objects in the following format.',\n      table: {\n        category: 'ifx-select props'\n      }\n    },\n    ifxSelect: {\n      action: 'ifxSelect',\n      description: 'Custom event emitted when item is selected.',\n      table: {\n        category: 'custom events',\n        type: {\n          summary: 'Framework integration',\n          detail:\n            'React: onIfxSelect={handleInput}\\nVue:@ifxSelect=\"handleInput\"\\nAngular:(ifxSelect)=\"handleInput()\"\\nVanillaJs:.addEventListener(\"ifxSelect\", (event) => {//handle input});',\n        },\n      },\n    },\n    ifxInput: {\n      action: 'ifxInput',\n      description: 'A custom event *ifxInput* is emitted immediately after the value of *Search* changes.',\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 = args => {\n  const template = `<ifx-select \n  size='${args.size}'\n  placeholder='${args.placeholder}'\n  show-search='${args.showSearch}'\n  search-placeholder-value='${args.searchPlaceholderValue}'\n  disabled='${args.disabled}'\n  error='${args.error}'\n  error-message='${args.errorMessage}'\n  label='${args.label}'\n  placeholder-value='${args.placeholderValue}'\n  options='${JSON.stringify(args.options)}' >\n </ifx-select>`;\n  setTimeout(() => {\n    document.querySelector('ifx-select')?.addEventListener('ifxSelect', action('ifxSelect'));\n    document.querySelector('ifx-select')?.addEventListener('ifxInput', action('ifxInput'));\n  }, 0);\n\n  return template;\n};\n\nexport const Single = DefaultTemplate.bind({});\nSingle.args = {\n  // type: 'single',\n  options: options,\n};\n\n// export const Text = DefaultTemplate.bind({});\n// Text.args = {\n//   type: 'text',\n//   name: 'text',\n//   value: 'Placeholder',\n//   allowHTML: true,\n//   delimiter: ',',\n//   editItems: true,\n//   maxItemCount: 5,\n// };\n\n// export const Text = DefaultTemplate.bind({});\n// Text.args = {\n//   type: 'multiple',\n//   name: 'multiple',\n//   choices: 'Choice 1, Choice 2, Choice 3',\n// };\n\n// export const SingleWithIcon = DefaultTemplate.bind({});\n// SingleWithIcon.args = {\n//   type: 'single',\n//   choices: \"Choice 1, Choice 2 <ifx-icon icon='check16'></ifx-icon>, Choice 3 <ifx-icon icon='check16'></ifx-icon>\",\n// };\n\n// export const MultiselectCombobox = DefaultTemplate.bind({});\n// MultiselectCombobox.args = {\n//   type: 'multiple',\n//   // removeItemButton: true,\n// };\n"]}

package/dist/collection/components/slider/slider.js

@@ -4,15 +4,8 @@ export class IfxSlider {
         this.min = 0;
         this.max = 100;
         this.step = 1;
-        this.value = undefined;
-        this.minValueHandle = undefined;
-        this.maxValueHandle = undefined;
         this.disabled = false;
         this.showPercentage = false;
-        this.leftIcon = undefined;
-        this.rightIcon = undefined;
-        this.leftText = undefined;
-        this.rightText = undefined;
         this.type = 'single';
         this.internalValue = 0;
         this.percentage = 0;

package/dist/collection/components/slider/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IfxSlider {\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() value: number;\n  @Prop() minValueHandle: number;\n  @Prop() maxValueHandle: number;\n  @Prop() disabled: boolean = false;\n  @Prop() showPercentage: boolean = false;\n  @Prop() leftIcon: string;\n  @Prop() rightIcon: string;\n  @Prop() leftText: string;\n  @Prop() rightText: string;\n  @Prop() type: 'single' | 'double' = 'single';\n  @State() internalValue: number = 0;\n  @State() percentage: number = 0;\n  @State() internalMinValue: number = 0;\n  @State() internalMaxValue: number = 100;\n  @Event() ifxChange: EventEmitter;\n\n  @Element() el;\n\n  private inputRef: HTMLInputElement;\n  private minInputRef: HTMLInputElement;\n  private maxInputRef: HTMLInputElement;\n                                             \n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  @Watch('minValueHandle')\n  minValueChanged(newValue: number) {\n    this.internalMinValue = newValue;\n    this.updateValuePercent();\n  }\n  \n  @Watch('maxValueHandle')\n  maxValueChanged(newValue: number) {\n    this.internalMaxValue = newValue;\n    this.updateValuePercent();\n  }\n\n  getRangeSliderWrapper() {\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n    return rangeSliderWrapper;\n  }\n\n  handleInputChangeOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n      if(target.id === 'max-slider') {\n        this.maxInputRef.value = this.minInputRef.value;\n      }else{\n        this.minInputRef.value = this.maxInputRef.value;\n      }\n    }\n    if(target.id === 'max-slider') {\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\n    } else {\n      this.internalMinValue = parseFloat(this.minInputRef.value);\n    }\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n    this.updateValuePercent();\n    this.updateZIndexIfRangeSlider(target.id)\n  }\n  \n  handleOnMouseLeaveOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const sliderWrapper = this.getRangeSliderWrapper();\n    if(target.id === 'max-slider') {\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n    } else {\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n    }\n  }\n\n  calculatePercentageValue() {\n    const num = (this.internalValue - this.min) * 1.0;\n    const den = this.max - this.min;\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseFloat(target.value);\n    this.ifxChange.emit(this.internalValue);\n    this.calculatePercentageValue();\n    this.updateValuePercent();\n  }\n\n  private roundToValidStep(value: number) {\n    const relativeValue = value - this.min;\n    const remainder = relativeValue % this.step;\n    if (remainder >= this.step / 2) {\n      return this.min + relativeValue + (this.step - remainder);\n    } else {\n      return this.min + relativeValue - remainder;\n    }\n  }\n\n  updateValuePercent() {\n    const den = this.max - this.min;\n    if(this.type === 'double'){\n      if (this.minInputRef) {\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\n        const minPercent = (num/den) * 100;\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n      }\n\n      if (this.maxInputRef) {\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n        const maxPercent = (num/den) * 100;\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n      }\n\n    } else {\n\n      if (this.inputRef) {\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n        const den = this.max - this.min;\n        const percentage = (num/den) * 100;\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n      }\n\n    }\n  }  \n  \n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n  // if min and max thumbs take the same value.\n  updateZIndexIfRangeSlider(targetId: string = '') {\n    if (targetId === 'max-slider') {\n      this.minInputRef.style.zIndex = '1';\n      this.maxInputRef.style.zIndex = '2';\n    } else {\n      this.minInputRef.style.zIndex = '2';\n      this.maxInputRef.style.zIndex = '1';\n    }\n  }\n\n  componentWillLoad() {\n    if(this.value === undefined) {\n      this.internalValue = (this.max-this.min) / 2;\n    } else {\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n    }\n\n    this.calculatePercentageValue();\n\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n    else this.internalMinValue = this.min;\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n    else this.internalMaxValue = this.max;\n  }\n\n  componentDidLoad() {\n    this.updateValuePercent();\n\n  }\n\n\n  render() {\n    return (\n      <div class=\"ifx-slider\">\n        {this.leftText && (\n          <span class={`left-text`}>\n            {this.leftText}\n          </span>\n        )}\n        {this.leftIcon && (\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {\n          (this.type !== 'double') ?\n            <input\n              type=\"range\"\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.internalValue}\n              disabled={this.disabled}\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\n              onInput={(event) => this.handleInputChange(event)}\n              aria-label='a slider'\n              aria-value={this.value}\n              aria-disabled={this.disabled}\n              /> \n              :\n            <div class = 'range-slider__wrapper' aria-label='a range slider' aria-value={this.value} aria-disabled={this.disabled} >\n              <input \n                id='min-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMinValue}\n                disabled={this.disabled}\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n              <input \n                id='max-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMaxValue}\n                disabled={this.disabled}\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n\n            </div>\n        }\n        {this.rightIcon && (\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {this.rightText && (\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n            {this.rightText}\n          </span>\n        )}\n\n        {this.showPercentage && (this.type !== \"double\") && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.percentage}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}"]}
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../../../src/components/slider/slider.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Event, EventEmitter, State, Watch, Element } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-slider',\n  styleUrl: 'slider.scss',\n  shadow: true,\n})\nexport class IfxSlider {\n  @Prop() min: number = 0;\n  @Prop() max: number = 100;\n  @Prop() step: number = 1;\n  @Prop() value: number;\n  @Prop() minValueHandle: number;\n  @Prop() maxValueHandle: number;\n  @Prop() disabled: boolean = false;\n  @Prop() showPercentage: boolean = false;\n  @Prop() leftIcon: string;\n  @Prop() rightIcon: string;\n  @Prop() leftText: string;\n  @Prop() rightText: string;\n  @Prop() type: 'single' | 'double' = 'single';\n  @State() internalValue: number = 0;\n  @State() percentage: number = 0;\n  @State() internalMinValue: number = 0;\n  @State() internalMaxValue: number = 100;\n  @Event() ifxChange: EventEmitter;\n\n  @Element() el;\n\n  private inputRef: HTMLInputElement;\n  private minInputRef: HTMLInputElement;\n  private maxInputRef: HTMLInputElement;\n                                             \n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  @Watch('minValueHandle')\n  minValueChanged(newValue: number) {\n    this.internalMinValue = newValue;\n    this.updateValuePercent();\n  }\n  \n  @Watch('maxValueHandle')\n  maxValueChanged(newValue: number) {\n    this.internalMaxValue = newValue;\n    this.updateValuePercent();\n  }\n\n  getRangeSliderWrapper() {\n    const rangeSliderWrapper = this.el.shadowRoot.querySelector('.range-slider__wrapper');\n    return rangeSliderWrapper;\n  }\n\n  handleInputChangeOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    if(parseFloat(this.maxInputRef.value) - parseFloat(this.minInputRef.value) <= 0) {\n      if(target.id === 'max-slider') {\n        this.maxInputRef.value = this.minInputRef.value;\n      }else{\n        this.minInputRef.value = this.maxInputRef.value;\n      }\n    }\n    if(target.id === 'max-slider') {\n      this.internalMaxValue = parseFloat(this.maxInputRef.value);\n    } else {\n      this.internalMinValue = parseFloat(this.minInputRef.value);\n    }\n    this.ifxChange.emit({minVal: this.internalMinValue, maxVal: this.internalMaxValue});\n    this.updateValuePercent();\n    this.updateZIndexIfRangeSlider(target.id)\n  }\n  \n  handleOnMouseLeaveOfRangeSlider(event: Event) {\n    const target = event.target as HTMLInputElement;\n    const sliderWrapper = this.getRangeSliderWrapper();\n    if(target.id === 'max-slider') {\n      sliderWrapper.insertBefore(this.maxInputRef, this.minInputRef);\n    } else {\n      sliderWrapper.insertBefore(this.minInputRef, this.maxInputRef);\n    }\n  }\n\n  calculatePercentageValue() {\n    const num = (this.internalValue - this.min) * 1.0;\n    const den = this.max - this.min;\n    this.percentage = +parseFloat(String((num/den)*100)).toFixed(2);\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseFloat(target.value);\n    this.ifxChange.emit(this.internalValue);\n    this.calculatePercentageValue();\n    this.updateValuePercent();\n  }\n\n  private roundToValidStep(value: number) {\n    const relativeValue = value - this.min;\n    const remainder = relativeValue % this.step;\n    if (remainder >= this.step / 2) {\n      return this.min + relativeValue + (this.step - remainder);\n    } else {\n      return this.min + relativeValue - remainder;\n    }\n  }\n\n  updateValuePercent() {\n    const den = this.max - this.min;\n    if(this.type === 'double'){\n      if (this.minInputRef) {\n        const num = (this.roundToValidStep(this.internalMinValue) - this.min) * 1.0;\n        const minPercent = (num/den) * 100;\n        this.minInputRef.parentElement.style.setProperty('--min-value-percent', `${minPercent}%`);\n      }\n\n      if (this.maxInputRef) {\n        const num = (this.roundToValidStep(this.internalMaxValue) - this.min) * 1.0;\n        const maxPercent = (num/den) * 100;\n        this.maxInputRef.parentElement.style.setProperty('--max-value-percent', `${maxPercent}%`);\n      }\n\n    } else {\n\n      if (this.inputRef) {\n        const num = (this.roundToValidStep(this.internalValue) - this.min) * 1.0;\n        const den = this.max - this.min;\n        const percentage = (num/den) * 100;\n        this.inputRef.style.setProperty('--value-percent', `${percentage}%`);\n      }\n\n    }\n  }  \n  \n  // Ensures that the last used slider thumb stays on top of the other thumb in order to handle correct overlapping \n  // if min and max thumbs take the same value.\n  updateZIndexIfRangeSlider(targetId: string = '') {\n    if (targetId === 'max-slider') {\n      this.minInputRef.style.zIndex = '1';\n      this.maxInputRef.style.zIndex = '2';\n    } else {\n      this.minInputRef.style.zIndex = '2';\n      this.maxInputRef.style.zIndex = '1';\n    }\n  }\n\n  componentWillLoad() {\n    if(this.value === undefined) {\n      this.internalValue = (this.max-this.min) / 2;\n    } else {\n      this.internalValue = Math.max(this.min, Math.min(this.max, this.value));\n    }\n\n    this.calculatePercentageValue();\n\n    if(this.minValueHandle !== undefined) this.internalMinValue = this.minValueHandle;\n    else this.internalMinValue = this.min;\n    if(this.maxValueHandle !== undefined) this.internalMaxValue = this.maxValueHandle;\n    else this.internalMaxValue = this.max;\n  }\n\n  componentDidLoad() {\n    this.updateValuePercent();\n\n  }\n\n\n  render() {\n    return (\n      <div class=\"ifx-slider\">\n        {this.leftText && (\n          <span class={`left-text`}>\n            {this.leftText}\n          </span>\n        )}\n        {this.leftIcon && (\n          <ifx-icon icon={this.leftIcon} class={`left-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {\n          (this.type !== 'double') ?\n            <input\n              type=\"range\"\n              min={this.min}\n              max={this.max}\n              step={this.step}\n              value={this.internalValue}\n              disabled={this.disabled}\n              ref={(el) => (this.inputRef = el as HTMLInputElement)}\n              onInput={(event) => this.handleInputChange(event)}\n              aria-label='a slider'\n              aria-value={this.value}\n              aria-disabled={this.disabled}\n              /> \n              :\n            <div class = 'range-slider__wrapper' aria-label='a range slider' aria-value={this.value} aria-disabled={this.disabled} >\n              <input \n                id='min-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMinValue}\n                disabled={this.disabled}\n                ref={(el) => (this.minInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n              <input \n                id='max-slider'\n                type='range'\n                min={this.min}\n                max={this.max}\n                step={this.step}\n                value={this.internalMaxValue}\n                disabled={this.disabled}\n                ref={(el) => (this.maxInputRef = el as HTMLInputElement)}\n                onInput={(event) => this.handleInputChangeOfRangeSlider(event)}\n                onMouseUp={(event) => this.handleOnMouseLeaveOfRangeSlider(event)}\n              />\n\n            </div>\n        }\n        {this.rightIcon && (\n          <ifx-icon icon={this.rightIcon} class={`right-icon${this.disabled ? ' disabled' : ''}`} />\n        )}\n        {this.rightText && (\n          <span class={`right-text${this.disabled ? ' disabled' : ''}`}>\n            {this.rightText}\n          </span>\n        )}\n\n        {this.showPercentage && (this.type !== \"double\") && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.percentage}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}"]}

package/dist/collection/components/slider/slider.stories.js

@@ -5,36 +5,120 @@ export default {
     component: 'ifx-slider',
     tags: ['autodocs'],
     argTypes: {
-        min: { control: 'number' },
-        max: { control: 'number' },
-        step: { control: 'number' },
-        type: { control: 'radio', options: ['single', 'double'] },
-        value: { control: 'number', if: { arg: 'type', eq: 'single' } },
-        minValueHandle: { control: 'number', if: { arg: 'type', eq: 'double' } },
-        maxValueHandle: { control: 'number', if: { arg: 'type', eq: 'double' } },
-        showPercentage: { control: 'boolean', if: { arg: 'type', eq: 'single' } },
-        disabled: { control: 'boolean' },
+        min: { control: 'number',
+            description: 'The minimum value of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: '0' },
+                type: { summary: 'number' }
+            }
+        },
+        max: { control: 'number',
+            description: 'The maximum value of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: '100' },
+                type: { summary: 'number' }
+            }
+        },
+        step: { control: 'number',
+            description: 'The step value of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: '1' },
+                type: { summary: 'number' }
+            }
+        },
+        type: { control: 'radio', options: ['single', 'double'],
+            description: 'The type of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: 'single' },
+                type: { summary: 'single | double' }
+            }
+        },
+        value: { control: 'number', if: { arg: 'type', eq: 'single' },
+            description: 'The current value of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'number ' }
+            }
+        },
+        minValueHandle: { control: 'number', if: { arg: 'type', eq: 'double' },
+            description: 'The minimum value of the handle in double slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'number' }
+            }
+        },
+        maxValueHandle: { control: 'number', if: { arg: 'type', eq: 'double' },
+            description: 'The maximum value of the handle in double slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'number' }
+            },
+        },
+        showPercentage: {
+            control: 'boolean', if: { arg: 'type', eq: 'single' },
+            description: 'Show the percentage of the slider value.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' }
+            }
+        },
+        disabled: { control: 'boolean',
+            description: 'Disable the slider.',
+            table: {
+                category: 'ifx-slider props',
+                defaultValue: { summary: 'false' },
+                type: { summary: 'boolean' }
+            }
+        },
         leftIcon: {
             options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
+            description: 'The icon on the left of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'string' }
+            }
         },
         rightIcon: {
             options: Object.values(icons).map(i => i['name']),
             control: { type: 'select' },
+            description: 'The icon on the right of the slider.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'string' }
+            }
+        },
+        leftText: { control: 'text',
+            description: 'The text on the left side.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'string' }
+            }
+        },
+        rightText: { control: 'text',
+            description: 'The text on the right side.',
+            table: {
+                category: 'ifx-slider props',
+                type: { summary: 'string' }
+            }
         },
-        leftText: { control: 'text' },
-        rightText: { control: 'text' },
         ifxChange: {
             action: 'ifxChange',
-            description: 'Custom event emitted on input change',
+            description: 'Custom event emitted on input change.',
             table: {
+                category: 'custom events',
                 type: {
                     summary: 'Framework integration',
                     detail: 'React: onIfxChange={handleChange}\nVue:@ifxChange="handleChange"\nAngular:(ifxChange)="handleChange()"\nVanillaJs:.addEventListener("ifxChange", (event) => {//handle change});',
                 },
             },
         },
-    },
+    }
 };
 const Template = args => {
     const sliderElement = document.createElement('ifx-slider');

package/dist/collection/components/slider/slider.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"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/Slider',\n  component: 'ifx-slider',\n  tags: ['autodocs'],\n\n  argTypes: {\n    min: { control: 'number' },\n    max: { control: 'number' },\n    step: { control: 'number' },\n    type: { control: 'radio', options: ['single', 'double']},\n    value: { control: 'number', if: { arg: 'type', eq: 'single'} },\n    minValueHandle : {control :'number', if: { arg: 'type', eq: 'double'}},\n    maxValueHandle : {control :'number', if: { arg: 'type', eq: 'double'}},\n    showPercentage: { control: 'boolean', if: { arg: 'type', eq: 'single'} },\n    disabled: { control: 'boolean' },\n    leftIcon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    rightIcon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n    },\n    leftText: { control: 'text' },\n    rightText: { control: 'text' },\n    ifxChange: {\n      action: 'ifxChange',\n      description: 'Custom event emitted on input change',\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  },\n};\n\nconst Template = args => {\n  const sliderElement = document.createElement('ifx-slider');\n  sliderElement.setAttribute('value', args.value);\n  sliderElement.setAttribute('min', args.min);\n  sliderElement.setAttribute('max', args.max);\n  sliderElement.setAttribute('step', args.step)\n  sliderElement.setAttribute('min-value-handle', args.minValueHandle);\n  sliderElement.setAttribute('max-value-handle', args.maxValueHandle);\n  sliderElement.setAttribute('type', args.type);\n  if (args.showPercentage) {\n    sliderElement.setAttribute('show-percentage', 'true');\n  }\n  if (args.disabled) {\n    sliderElement.setAttribute('disabled', 'true'); // Set disabled attribute\n  }\n\n  if (args.leftIcon) {\n    sliderElement.setAttribute('left-icon', args.leftIcon);\n  }\n  if (args.rightIcon) {\n    sliderElement.setAttribute('right-icon', args.rightIcon);\n  }\n  if (args.leftText) {\n    sliderElement.setAttribute('left-text', args.leftText);\n  }\n  if (args.rightText) {\n    sliderElement.setAttribute('right-text', args.rightText);\n  }\n  sliderElement.addEventListener('ifxChange', action('ifxChange'));\n\n  return sliderElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  min: 0,\n  max: 100,\n  step: 1,\n  value: 50,\n  minValueHandle: 20,\n  maxValueHandle: 80,\n  showPercentage: false,\n  disabled: false,\n  type: 'single'\n};\n\nexport const WithPercentageDisplay = Template.bind({});\nWithPercentageDisplay.args = {\n  ...Default.args,\n  showPercentage: true,\n  disabled: false,\n};\n\nexport const WithIcons = Template.bind({});\nWithIcons.args = {\n  ...Default.args,\n  leftIcon: 'cogwheel-16',\n  rightIcon: 'cogwheel-16',\n};\n\nexport const WithTexts = Template.bind({});\nWithTexts.args = {\n  ...Default.args,\n  leftText: 'LeftText',\n  rightText: 'RightText',\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  ...Default.args,\n  disabled: true,\n};\n"]}
+{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"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/Slider',\n  component: 'ifx-slider',\n  tags: ['autodocs'],\n\n  argTypes: {\n    min: { control: 'number',\n      description: 'The minimum value of the slider.',\n    table:{\n      category: 'ifx-slider props',\n      defaultValue: { summary: '0' },\n      type: { summary: 'number' }\n    }\n  },\n    max: { control: 'number',\n      description: 'The maximum value of the slider.',\n      table:{\n        category: 'ifx-slider props',\n        defaultValue: { summary: '100' },\n        type: { summary: 'number' }\n      } \n    },\n    step: { control: 'number',\n      description: 'The step value of the slider.',\n      table:{\n        category: 'ifx-slider props',\n        defaultValue: { summary: '1' },\n        type: { summary: 'number' }\n      }\n     },\n    type: { control: 'radio', options: ['single', 'double'],\n      description: 'The type of the slider.',\n        table: {\n          category: 'ifx-slider props',\n          defaultValue: { summary: 'single' },\n          type: { summary: 'single | double' }\n       }\n    },\n    value: { control: 'number', if: { arg: 'type', eq: 'single'},\n      description: 'The current value of the slider.',\n      table: {  \n        category: 'ifx-slider props',\n        type: { summary: 'number ' }\n      }\n    },  \n    minValueHandle : {control :'number', if: { arg: 'type', eq: 'double'},\n      description: 'The minimum value of the handle in double slider.',\n      table: {\n      category: 'ifx-slider props',\n      type: { summary: 'number' }\n    }\n  },\n    maxValueHandle : {control :'number', if: { arg: 'type', eq: 'double'},\n      description: 'The maximum value of the handle in double slider.',\n      table: {\n      category: 'ifx-slider props',\n      type: { summary: 'number' }\n    },\n  }, \n    showPercentage: { \n      control: 'boolean', if: { arg: 'type', eq: 'single'},\n      description: 'Show the percentage of the slider value.',\n      table: {\n        category: 'ifx-slider props',\n        defaultValue: { summary: 'false' },\n        type: { summary: 'boolean' }\n      }\n    },\n    disabled: { control: 'boolean',\n      description: 'Disable the slider.',\n      table: {\n        category: 'ifx-slider props',\n        defaultValue: { summary: 'false' },\n        type: { summary: 'boolean' }\n      }\n    },\n    leftIcon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select'},\n        description: 'The icon on the left of the slider.',\n        table: {\n          category: 'ifx-slider props',\n          type: { summary: 'string' }\n        }\n       },\n    rightIcon: {\n      options: Object.values(icons).map(i => i['name']),\n      control: { type: 'select' },\n      description: 'The icon on the right of the slider.',\n      table: {\n        category: 'ifx-slider props',\n        type: { summary: 'string' }\n      }\n    },\n    leftText: { control: 'text',\n      description: 'The text on the left side.',\n      table: {\n        category: 'ifx-slider props',\n        type: { summary: 'string' }\n      }\n    },\n    rightText: { control: 'text',\n      description: 'The text on the right side.',\n      table: {\n        category: 'ifx-slider props',\n        type: { summary: 'string' }\n      }\n    },\n    ifxChange: {\n      action: 'ifxChange',\n      description: 'Custom event emitted on input change.',\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  }\n}\n\nconst Template = args => {\n  const sliderElement = document.createElement('ifx-slider');\n  sliderElement.setAttribute('value', args.value);\n  sliderElement.setAttribute('min', args.min);\n  sliderElement.setAttribute('max', args.max);\n  sliderElement.setAttribute('step', args.step)\n  sliderElement.setAttribute('min-value-handle', args.minValueHandle);\n  sliderElement.setAttribute('max-value-handle', args.maxValueHandle);\n  sliderElement.setAttribute('type', args.type);\n  if (args.showPercentage) {\n    sliderElement.setAttribute('show-percentage', 'true');\n  }\n  if (args.disabled) {\n    sliderElement.setAttribute('disabled', 'true'); // Set disabled attribute\n  }\n\n  if (args.leftIcon) {\n    sliderElement.setAttribute('left-icon', args.leftIcon);\n  }\n  if (args.rightIcon) {\n    sliderElement.setAttribute('right-icon', args.rightIcon);\n  }\n  if (args.leftText) {\n    sliderElement.setAttribute('left-text', args.leftText);\n  }\n  if (args.rightText) {\n    sliderElement.setAttribute('right-text', args.rightText);\n  }\n  sliderElement.addEventListener('ifxChange', action('ifxChange'));\n\n  return sliderElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  min: 0,\n  max: 100,\n  step: 1,\n  value: 50,\n  minValueHandle: 20,\n  maxValueHandle: 80,\n  showPercentage: false,\n  disabled: false,\n  type: 'single'\n};\n\nexport const WithPercentageDisplay = Template.bind({});\nWithPercentageDisplay.args = {\n  ...Default.args,\n  showPercentage: true,\n  disabled: false,\n};\n\nexport const WithIcons = Template.bind({});\nWithIcons.args = {\n  ...Default.args,\n  leftIcon: 'cogwheel-16',\n  rightIcon: 'cogwheel-16',\n};\n\nexport const WithTexts = Template.bind({});\nWithTexts.args = {\n  ...Default.args,\n  leftText: 'LeftText',\n  rightText: 'RightText',\n};\n\nexport const Disabled = Template.bind({});\nDisabled.args = {\n  ...Default.args,\n  disabled: true,\n};\n"]}

package/dist/collection/components/spinner/spinner.js

@@ -2,8 +2,6 @@ import { h } from "@stencil/core";
 import classNames from "classnames";
 export class Spinner {
     constructor() {
-        this.size = undefined;
-        this.variant = undefined;
         this.inverted = false;
     }
     render() {

package/dist/collection/components/spinner/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,UAAU,MAAM,YAAY,CAAC;AAQpC,MAAM,OAAO,OAAO;;;;wBAGU,KAAK;;IAGjC,MAAM;QACJ,OAAO,CACL,0EAAgB,sCAAsC,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;YAChF,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,GAAQ;YACnG,IAAI,CAAC,OAAO,KAAK,OAAO;mBACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;oBACtF,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;wBAC5F,0DAAG,EAAE,EAAC,mBAAmB;4BACvB,6DAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,GAAG,CAC3wC,CACA,CACF,CACJ,CACP,CAAC;IACJ,CAAC;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;YAC3B,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAED,aAAa;QACX,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n\n\n  render() {\n    return (\n      <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n"]}
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,UAAU,MAAM,YAAY,CAAC;AAQpC,MAAM,OAAO,OAAO;IALpB;QAQU,aAAQ,GAAY,KAAK,CAAC;KA+BnC;IA5BC,MAAM;QACJ,OAAO,CACL,0EAAgB,sCAAsC,EAAC,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE;YAChF,4DAAK,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,GAAQ;YACnG,IAAI,CAAC,OAAO,KAAK,OAAO;mBACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;oBACtF,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B;wBAC5F,0DAAG,EAAE,EAAC,mBAAmB;4BACvB,6DAAM,EAAE,EAAC,QAAQ,EAAC,CAAC,EAAC,svCAAsvC,GAAG,CAC3wC,CACA,CACF,CACJ,CACP,CAAC;IACJ,CAAC;IAED,YAAY;QACV,OAAO,GAAG,IAAI,CAAC,IAAI,EAAE,KAAK,GAAG;YAC3B,CAAC,CAAC,GAAG;YACL,CAAC,CAAC,EAAE,CAAC;IACT,CAAC;IAED,aAAa;QACX,OAAO,UAAU,CACf,SAAS,EACT,IAAI,CAAC,IAAI,IAAI,WAAW,IAAI,CAAC,YAAY,EAAE,EAAE,CAC9C,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\nimport classNames from 'classnames';\n \n\n@Component({\n  tag: 'ifx-spinner',\n  styleUrl: 'spinner.scss',\n  shadow: true,\n})\nexport class Spinner {\n  @Prop() size: string;\n  @Prop() variant: string;\n  @Prop() inverted: boolean = false;\n\n\n  render() {\n    return (\n      <div aria-label=\"spinner indicating a loading process\" class={this.getClassNames()}>\n        <div class={`${this.variant !== 'brand' ? 'border' : \"\"} ${this.inverted ? 'inverted' : \"\"}`}></div>\n        {this.variant === 'brand'\n          && <div class={`semiconductor ${this.inverted ? 'inverted' : \"\"} ${this.getSizeClass()}`}>\n            <svg width='40' height='40' viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n              <g id=\"spinner/conductor\">\n                <path id=\"Vector\" d=\"M38.75 18.75C39.4375 18.75 40 19.3125 40 20C40 20.6875 39.4409 21.25 38.75 21.25H35V26.25H38.75C39.4375 26.25 40 26.8125 40 27.5C40 28.1875 39.4409 28.75 38.75 28.75H35V30C35 32.7617 32.7617 35 30 35H28.75V38.75C28.75 39.4409 28.1875 40 27.5 40C26.8125 40 26.25 39.4409 26.25 38.75V35H21.25V38.75C21.25 39.4409 20.6875 40 20 40C19.3125 40 18.75 39.4409 18.75 38.75V35H13.75V38.75C13.75 39.4409 13.1875 40 12.5 40C11.8125 40 11.25 39.4409 11.25 38.75V35H10C7.23828 35 5 32.7617 5 30V28.75H1.25C0.559062 28.75 0 28.1875 0 27.5C0 26.8125 0.559062 26.25 1.25 26.25H5V21.25H1.25C0.559062 21.25 0 20.6875 0 20C0 19.3125 0.559062 18.75 1.25 18.75H5V13.75H1.25C0.559062 13.75 0 13.1875 0 12.5C0 11.8125 0.559062 11.25 1.25 11.25H5V10C5 7.23828 7.23828 5 10 5H11.25V1.25C11.25 0.5625 11.8125 0 12.5 0C13.1875 0 13.75 0.559063 13.75 1.25V5H18.75V1.25C18.75 0.559063 19.3091 0 20 0C20.6909 0 21.25 0.559063 21.25 1.25V5H26.25V1.25C26.25 0.559063 26.8091 0 27.5 0C28.1909 0 28.75 0.559063 28.75 1.25V5H30C32.7617 5 35 7.23828 35 10V11.25H38.75C39.4409 11.25 40 11.8091 40 12.5C40 13.1909 39.4409 13.75 38.75 13.75H35V18.75H38.75ZM32.5 10C32.5 8.62188 31.3781 7.5 30 7.5H10C8.62187 7.5 7.5 8.62188 7.5 10V30C7.5 31.3781 8.62187 32.5 10 32.5H30C31.3781 32.5 32.5 31.3781 32.5 30V10Z\" />\n              </g>\n            </svg>\n          </div>}\n      </div>\n    );\n  }\n\n  getSizeClass() {\n    return `${this.size}` === \"s\"\n      ? \"s\"\n      : \"\";\n  }\n\n  getClassNames() {\n    return classNames(\n      'spinner',\n      this.size && `spinner ${this.getSizeClass()}`\n    );\n  }\n}\n"]}

package/dist/collection/components/spinner/spinner.stories.js

@@ -4,20 +4,52 @@ export default {
     args: {
         size: 'm',
         variant: 'default',
+        inverted: false,
     },
     argTypes: {
         size: {
-            description: 'Size options: s (24px) and m (40px) - default: m',
+            description: 'Size options: s (24px) and m (40px).',
             options: ['s', 'm'],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-spinner props',
+                defaultValue: {
+                    summary: 'm'
+                },
+                type: {
+                    summary: 's | m'
+                }
+            }
         },
         variant: {
+            description: 'Variant of the spinner.',
             options: ['default', 'brand'],
             control: { type: 'radio' },
+            table: {
+                category: 'ifx-spinner props',
+                defaultValue: {
+                    summary: 'default'
+                },
+                type: {
+                    summary: 'string'
+                }
+            },
         },
+        inverted: {
+            description: 'Changes the color of spinner to white.',
+            table: {
+                category: 'ifx-spinner props',
+                defaultValue: {
+                    summary: 'false'
+                },
+                type: {
+                    summary: 'boolean'
+                }
+            }
+        }
     },
 };
-const DefaultTemplate = args => `<ifx-spinner variant="${args.variant}" size="${args.size}"></ifx-spinner>`;
+const DefaultTemplate = args => `<ifx-spinner variant="${args.variant}" size="${args.size}" inverted="${args.inverted}"></ifx-spinner>`;
 export const Default = DefaultTemplate.bind({});
 Default.argsTypes = {};
 //# sourceMappingURL=spinner.stories.js.map

package/dist/collection/components/spinner/spinner.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.ts"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,SAAS;KACnB;IACD,QAAQ,EAAE;QACR,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,OAAO,EAAE;YACP,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;YAC7B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,kBAAkB,CAAC;AAE5G,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC","sourcesContent":["export default {\n  title: 'Components/Spinner',\n  tags: ['autodocs'],\n\n  args: {\n    size: 'm',\n    variant: 'default',\n  },\n  argTypes: {\n    size: {\n      description: 'Size options: s (24px) and m (40px) - default: m',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n    },\n    variant: {\n      options: ['default', 'brand'],\n      control: { type: 'radio' },\n    },\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-spinner variant=\"${args.variant}\" size=\"${args.size}\"></ifx-spinner>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argsTypes = {};\n"]}
+{"version":3,"file":"spinner.stories.js","sourceRoot":"","sources":["../../../src/components/spinner/spinner.stories.ts"],"names":[],"mappings":"AACA,eAAe;IACb,KAAK,EAAE,oBAAoB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAElB,IAAI,EAAE;QACJ,IAAI,EAAE,GAAG;QACT,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,KAAK;KAChB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,WAAW,EAAE,sCAAsC;YACnD,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,GAAG;iBACb;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,OAAO;iBACjB;aACF;SACF;QACD,OAAO,EAAE;YACP,WAAW,EAAE,yBAAyB;YACtC,OAAO,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC;YAC7B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,SAAS;iBACnB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,QAAQ;iBAClB;aACF;SACF;QACD,QAAQ,EAAE;YACR,WAAW,EAAE,wCAAwC;YACrD,KAAK,EAAE;gBACL,QAAQ,EAAE,mBAAmB;gBAC7B,YAAY,EAAE;oBACZ,OAAO,EAAE,OAAO;iBACjB;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,SAAS;iBACnB;aACF;SACF;KACF;CACF,CAAC;AAEF,MAAM,eAAe,GAAG,IAAI,CAAC,EAAE,CAAC,yBAAyB,IAAI,CAAC,OAAO,WAAW,IAAI,CAAC,IAAI,eAAe,IAAI,CAAC,QAAQ,kBAAkB,CAAC;AAExI,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAChD,OAAO,CAAC,SAAS,GAAG,EAAE,CAAC","sourcesContent":["\nexport default {\n  title: 'Components/Spinner',\n  tags: ['autodocs'],\n\n  args: {\n    size: 'm',\n    variant: 'default',\n    inverted: false,\n  },\n  argTypes: {\n    size: {\n      description: 'Size options: s (24px) and m (40px).',\n      options: ['s', 'm'],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-spinner props',\n        defaultValue: {\n          summary: 'm'\n        },\n        type: {\n          summary: 's | m'\n        }\n      }\n    },\n    variant: {\n      description: 'Variant of the spinner.',\n      options: ['default', 'brand'],\n      control: { type: 'radio' },\n      table: {\n        category: 'ifx-spinner props',\n        defaultValue: {\n          summary: 'default'\n        },\n        type: {\n          summary: 'string'\n        }\n      },\n    },\n    inverted: {\n      description: 'Changes the color of spinner to white.',\n      table: {\n        category: 'ifx-spinner props',\n        defaultValue: {\n          summary: 'false'\n        },\n        type: {\n          summary: 'boolean'\n        }\n      }\n    }\n  },\n};\n\nconst DefaultTemplate = args => `<ifx-spinner variant=\"${args.variant}\" size=\"${args.size}\" inverted=\"${args.inverted}\"></ifx-spinner>`;\n\nexport const Default = DefaultTemplate.bind({});\nDefault.argsTypes = {};\n"]}

package/dist/collection/components/status/status.js

@@ -1,7 +1,6 @@
 import { h } from "@stencil/core";
 export class Status {
     constructor() {
-        this.label = undefined;
         this.border = false;
         this.color = 'orange';
     }

package/dist/collection/components/status/status.js.map

@@ -1 +1 @@
-{"version":3,"file":"status.js","sourceRoot":"","sources":["../../../src/components/status/status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,MAAM;;;sBAES,KAAK;qBACyD,QAAQ;;IAIhG,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC;QAE9F,OAAO,CACL,0EAAgB,oBAAoB,gBAAa,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc;YAChF,6DAAM,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,EAAE,GAAS;YACzC,0DAAG,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5B,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-status',\n  styleUrl: 'status.scss',\n  shadow: true\n})\n\nexport class Status {\n  @Prop() label: string;\n  @Prop() border: boolean = false;\n  @Prop() color: 'orange' | 'ocean' | 'grey' | 'light-grey' | 'red' | 'green' | 'berry' = 'orange';\n\n\n\n  render() {\n    const containerClass = this.border ? `container border-${this.color}` : 'container no-border';\n\n    return (\n      <div aria-label=\"a status indicator\" aria-value={this.label} class={containerClass}>\n        <span class={`dot ${this.color}`}></span>\n        <p class=\"text\">{this.label}</p>\n      </div>\n    );\n  }\n}"]}
+{"version":3,"file":"status.js","sourceRoot":"","sources":["../../../src/components/status/status.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,MAAM;IANnB;QAQU,WAAM,GAAY,KAAK,CAAC;QACxB,UAAK,GAA2E,QAAQ,CAAC;KAclG;IAVC,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,qBAAqB,CAAC;QAE9F,OAAO,CACL,0EAAgB,oBAAoB,gBAAa,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,cAAc;YAChF,6DAAM,KAAK,EAAE,OAAO,IAAI,CAAC,KAAK,EAAE,GAAS;YACzC,0DAAG,KAAK,EAAC,MAAM,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5B,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n \n\n@Component({\n  tag: 'ifx-status',\n  styleUrl: 'status.scss',\n  shadow: true\n})\n\nexport class Status {\n  @Prop() label: string;\n  @Prop() border: boolean = false;\n  @Prop() color: 'orange' | 'ocean' | 'grey' | 'light-grey' | 'red' | 'green' | 'berry' = 'orange';\n\n\n\n  render() {\n    const containerClass = this.border ? `container border-${this.color}` : 'container no-border';\n\n    return (\n      <div aria-label=\"a status indicator\" aria-value={this.label} class={containerClass}>\n        <span class={`dot ${this.color}`}></span>\n        <p class=\"text\">{this.label}</p>\n      </div>\n    );\n  }\n}"]}