@infineon/infineon-design-system-stencil 18.4.1 → 18.5.0

package/dist/cjs/ifx-slider.cjs.entry.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-daa22998.js');
+
+const sliderCss = "*{font-family:\"Source Sans Pro\"}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.8125rem;color:#7d6f72;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#dcd5d7}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:100px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:linear-gradient(to right, #378375 0%, #378375 var(--value-percent, 0%), #ebe9e9 var(--value-percent, 0%), #ebe9e9 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]:disabled{background:#dcd5d7;cursor:default}.ifx-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#378375;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]::-webkit-slider-thumb:hover{box-shadow:0px 1px 4px rgba(0, 0, 0, 0.4);background:#2d6357}.ifx-slider input[type=range]::-webkit-slider-thumb:active{box-shadow:0px 1px 6px rgba(0, 0, 0, 0.6);background:#28594e}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#378375;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]::-moz-range-thumb:hover{box-shadow:0px 1px 4px rgba(0, 0, 0, 0.4);background:#2d6357}.ifx-slider input[type=range]::-moz-range-thumb:active{box-shadow:0px 1px 6px rgba(0, 0, 0, 0.6);background:#28594e}";
+
+const IfxSlider = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ifxChanged = index.createEvent(this, "ifxChanged", 7);
+    this.min = 0;
+    this.max = 100;
+    this.value = 0;
+    this.disabled = false;
+    this.showPercentage = false;
+    this.leftIcon = undefined;
+    this.rightIcon = undefined;
+    this.leftText = undefined;
+    this.rightText = undefined;
+    this.internalValue = 0;
+  }
+  valueChanged(newValue) {
+    this.internalValue = newValue;
+    this.updateValuePercent();
+  }
+  handleInputChange(event) {
+    const target = event.target;
+    this.internalValue = parseInt(target.value);
+    this.ifxChanged.emit(this.internalValue);
+    this.updateValuePercent();
+  }
+  updateValuePercent() {
+    if (this.inputRef) {
+      const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;
+      this.inputRef.style.setProperty('--value-percent', `${percent}%`);
+    }
+  }
+  componentWillLoad() {
+    this.internalValue = this.value;
+  }
+  componentDidLoad() {
+    this.updateValuePercent();
+  }
+  render() {
+    return (index.h("div", { class: "ifx-slider" }, this.leftText && (index.h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (index.h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), index.h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event) }), this.rightIcon && (index.h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (index.h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (index.h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.value, "%"))));
+  }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+};
+IfxSlider.style = sliderCss;
+
+exports.ifx_slider = IfxSlider;
+
+//# sourceMappingURL=ifx-slider.cjs.entry.js.map

package/dist/cjs/ifx-slider.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ifx-slider.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,SAAS,GAAG,onDAAonD;;MCOznD,SAAS;;;;eACE,CAAC;eACD,GAAG;iBACD,CAAC;oBACG,KAAK;0BACC,KAAK;;;;;yBAKN,CAAC;;EAMlC,YAAY,CAAC,QAAgB;IAC3B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,iBAAiB,CAAC,KAAY;IAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;IAChD,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACzC,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;MAChF,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC;KACnE;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;GACjC;EAED,gBAAgB;IACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAGD,MAAM;IACJ,QACEA,iBAAK,KAAK,EAAC,YAAY,IACpB,IAAI,CAAC,QAAQ,KACZA,kBAAM,KAAK,EAAE,WAAW,IACrB,IAAI,CAAC,QAAQ,CACT,CACR,EACA,IAAI,CAAC,QAAQ,KACZA,sBAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,GAAI,CACzF,EAEDA,mBACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAsB,CAAC,EACrD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GACjD,EACD,IAAI,CAAC,SAAS,KACbA,sBAAU,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,GAAI,CAC3F,EACA,IAAI,CAAC,SAAS,KACbA,kBAAM,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,IACzD,IAAI,CAAC,SAAS,CACV,CACR,EAEA,IAAI,CAAC,cAAc,KAClBA,kBACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,IAE7D,IAAI,CAAC,KAAK,MACN,CACR,CACG,EACN;GACH;;;;;;;;;","names":["h"],"sources":["./src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","./src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n// ifx-slider.scss\n:host {\n  display: inline-block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n  font-size: tokens.$font-size-s;\n  color: tokens.$color-gray-500;\n  margin-left: 8px;\n\n  &.disabled {\n    // Add the disabled state for the percentage display\n    color: tokens.$color-gray-300;\n  }\n}\n\n.left-icon,\n.left-text {\n  margin-right: 8px;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n  margin-left: 8px;\n}\n\n.ifx-slider {\n  display: flex;\n  align-items: center;\n  padding: tokens.$spacing-xxs tokens.$spacing-m;\n  border-radius: tokens.$border-radius-pill;\n\n  input[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 3px;\n    background: linear-gradient(to right, tokens.$color-default-500 0%, tokens.$color-default-500 var(--value-percent, 0%), tokens.$color-gray-200 var(--value-percent, 0%), tokens.$color-gray-200 100%);\n    outline: none;\n    cursor: pointer;\n    transition: 0.2s;\n\n    &:disabled {\n      background: tokens.$color-gray-300;\n      cursor: default;\n    }\n\n    &::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      appearance: none;\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      background: tokens.$color-default-500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n\n      &:hover {\n        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);\n        background: tokens.$color-default-600;\n      }\n\n      &:active {\n        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);\n        background: tokens.$color-default-700;\n      }\n    }\n\n    &::-moz-range-thumb {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      background: tokens.$color-default-500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n\n      &:hover {\n        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);\n        background: tokens.$color-default-600;\n      }\n\n      &:active {\n        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);\n        background: tokens.$color-default-700;\n      }\n    }\n  }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\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() value: number = 0;\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  @State() internalValue: number = 0;\n  @Event() ifxChanged: EventEmitter<number>;\n\n  private inputRef: HTMLInputElement;\n\n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseInt(target.value);\n    this.ifxChanged.emit(this.internalValue);\n    this.updateValuePercent();\n  }\n\n  updateValuePercent() {\n    if (this.inputRef) {\n      const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;\n      this.inputRef.style.setProperty('--value-percent', `${percent}%`);\n    }\n  }\n\n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n  componentDidLoad() {\n    this.updateValuePercent();\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        <input\n          type=\"range\"\n          min={this.min}\n          max={this.max}\n          disabled={this.disabled}\n          value={this.internalValue}\n          ref={(el) => (this.inputRef = el as HTMLInputElement)}\n          onInput={(event) => this.handleInputChange(event)}\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 && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.value}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/infineon-design-system-stencil.cjs.js

@@ -20,7 +20,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["ifx-checkbox_9.cjs",[[1,"ifx-search-bar",{"icon":[1],"showCloseButton":[4,"show-close-button"],"isOpen":[1028,"is-open"],"hideLabel":[4,"hide-label"],"size":[1],"value":[1025]}],[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}],[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}],[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}],[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}],[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"internalValue":[32]}],[1,"ifx-search-input",{"value":[1025],"width":[1],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"borderColor":[1,"border-color"],"size":[1],"insideDropdown":[32]}],[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}],[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-faq.cjs",[[1,"ifx-faq"]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-example.cjs",[[1,"ifx-example",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-range.cjs",[[1,"ifx-range",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["ifx-text-input.cjs",[[1,"ifx-text-input",{"placeholder":[1],"value":[1025],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"alignment":[1],"hasAll":[1028,"has-all"],"largeSize":[1028,"large-size"],"smallSize":[1028,"small-size"],"hasBtn":[32],"hasDesc":[32]}]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"direction":[1025],"hasDesc":[1028,"has-desc"]}]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[1028,"has-btn"]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"internalOrientation":[32],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag"]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-accordion_2.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]]], options);
+  return index.bootstrapLazy([["ifx-checkbox_9.cjs",[[1,"ifx-search-bar",{"icon":[1],"showCloseButton":[4,"show-close-button"],"isOpen":[1028,"is-open"],"hideLabel":[4,"hide-label"],"size":[1],"value":[1025]}],[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}],[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}],[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}],[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}],[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"internalValue":[32]}],[1,"ifx-search-input",{"value":[1025],"width":[1],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"borderColor":[1,"border-color"],"size":[1],"insideDropdown":[32]}],[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}],[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-faq.cjs",[[1,"ifx-faq"]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-example.cjs",[[1,"ifx-example",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["ifx-slider.cjs",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-text-input.cjs",[[1,"ifx-text-input",{"placeholder":[1],"value":[1025],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"alignment":[1],"hasAll":[1028,"has-all"],"largeSize":[1028,"large-size"],"smallSize":[1028,"small-size"],"hasBtn":[32],"hasDesc":[32]}]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"direction":[1025],"hasDesc":[1028,"has-desc"]}]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[1028,"has-btn"]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"internalOrientation":[32],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag"]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-accordion_2.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["ifx-checkbox_9.cjs",[[1,"ifx-search-bar",{"icon":[1],"showCloseButton":[4,"show-close-button"],"isOpen":[1028,"is-open"],"hideLabel":[4,"hide-label"],"size":[1],"value":[1025]}],[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}],[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}],[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}],[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}],[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"internalValue":[32]}],[1,"ifx-search-input",{"value":[1025],"width":[1],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"borderColor":[1,"border-color"],"size":[1],"insideDropdown":[32]}],[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}],[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-faq.cjs",[[1,"ifx-faq"]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-example.cjs",[[1,"ifx-example",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-range.cjs",[[1,"ifx-range",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["ifx-text-input.cjs",[[1,"ifx-text-input",{"placeholder":[1],"value":[1025],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"alignment":[1],"hasAll":[1028,"has-all"],"largeSize":[1028,"large-size"],"smallSize":[1028,"small-size"],"hasBtn":[32],"hasDesc":[32]}]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"direction":[1025],"hasDesc":[1028,"has-desc"]}]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[1028,"has-btn"]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"internalOrientation":[32],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag"]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-accordion_2.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]]], options);
+  return index.bootstrapLazy([["ifx-checkbox_9.cjs",[[1,"ifx-search-bar",{"icon":[1],"showCloseButton":[4,"show-close-button"],"isOpen":[1028,"is-open"],"hideLabel":[4,"hide-label"],"size":[1],"value":[1025]}],[1,"ifx-dropdown-item",{"label":[1],"size":[1],"disabled":[4],"icon":[1],"checkable":[4],"value":[1],"url":[1],"target":[1],"checkboxColor":[32]}],[1,"ifx-navbar",{"applicationName":[1,"application-name"],"fixed":[4],"main":[32],"products":[32],"applications":[32],"design":[32],"support":[32],"about":[32],"hasLeftMenuItems":[32]}],[1,"ifx-navbar-menu-item",{"isProfile":[1028,"is-profile"],"hideLabel":[4,"hide-label"],"icon":[1]}],[1,"ifx-dropdown-menu",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"isShown":[32],"isInsideSelect":[32],"isInsideMultiSelect":[32]}],[1,"ifx-checkbox",{"disabled":[4],"value":[4],"error":[4],"name":[1],"internalValue":[32]}],[1,"ifx-search-input",{"value":[1025],"width":[1],"showDeleteIcon":[4,"show-delete-icon"],"disabled":[4],"borderColor":[1,"border-color"],"size":[1],"insideDropdown":[32]}],[1,"ifx-link",{"href":[1],"target":[1],"color":[1],"bold":[4],"underline":[4]}],[0,"ifx-icon",{"icon":[1025],"ifxIcon":[1032,"ifx-icon"]}]]],["ifx-faq.cjs",[[1,"ifx-faq"]]],["ifx-modal.cjs",[[1,"ifx-modal",{"caption":[1],"closeOnOverlayClick":[4,"close-on-overlay-click"],"alertColor":[1,"alert-color"],"alertIcon":[1,"alert-icon"],"showModal":[32],"open":[64],"close":[64]}]]],["ifx-multi-select-input.cjs",[[1,"ifx-multi-select-input",{"Placeholder":[1,"placeholder"],"isEmpty":[32],"isOverflowing":[32]},[[5,"mousedown","handleOutsideClick"],[0,"closed","handleButtonClose"]]]]],["ifx-alert.cjs",[[1,"ifx-alert",{"color":[1],"icon":[1]}]]],["ifx-breadcrumb-item-label.cjs",[[1,"ifx-breadcrumb-item-label",{"icon":[1],"url":[1],"target":[1]}]]],["ifx-chip.cjs",[[1,"ifx-chip",{"placeholder":[1],"isEmpty":[32]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-example.cjs",[[1,"ifx-example",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-icon-button.cjs",[[1,"ifx-icon-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"href":[1],"target":[1],"shape":[1],"setFocus":[64]}]]],["ifx-icons-preview.cjs",[[1,"ifx-icons-preview",{"iconsArray":[32],"isCopied":[32],"copiedIndex":[32],"htmlTag":[32],"iconName":[32]}]]],["ifx-list-item.cjs",[[1,"ifx-list-item",{"isFlush":[1028,"is-flush"],"badge":[4],"badgeValue":[2,"badge-value"],"hasBulletpoint":[32]}]]],["ifx-sidebar-item.cjs",[[1,"ifx-sidebar-item",{"icon":[1],"href":[1],"target":[1],"hasIcon":[32],"hasIconWrapper":[32]},[[0,"consoleError","handleConsoleError"]]]]],["ifx-slider.cjs",[[1,"ifx-slider",{"min":[2],"max":[2],"value":[2],"disabled":[4],"showPercentage":[4,"show-percentage"],"leftIcon":[1,"left-icon"],"rightIcon":[1,"right-icon"],"leftText":[1,"left-text"],"rightText":[1,"right-text"],"internalValue":[32]}]]],["ifx-text-input.cjs",[[1,"ifx-text-input",{"placeholder":[1],"value":[1025],"error":[4],"errorMessage":[1,"error-message"],"success":[4],"disabled":[4],"readonly":[4],"icon":[4]}]]],["ifx-badge.cjs",[[1,"ifx-badge"]]],["ifx-breadcrumb.cjs",[[1,"ifx-breadcrumb"]]],["ifx-breadcrumb-item.cjs",[[1,"ifx-breadcrumb-item",{"isLastItem":[32]},[[5,"mousedown","handleOutsideClick"],[0,"breadcrumbMenuIconWrapper","menuWrapperEventReEmitter"]]]]],["ifx-card.cjs",[[1,"ifx-card",{"direction":[1],"alignment":[1],"hasAll":[1028,"has-all"],"largeSize":[1028,"large-size"],"smallSize":[1028,"small-size"],"hasBtn":[32],"hasDesc":[32]}]]],["ifx-card-headline.cjs",[[1,"ifx-card-headline",{"direction":[1025],"hasDesc":[1028,"has-desc"]}]]],["ifx-card-overline.cjs",[[1,"ifx-card-overline"]]],["ifx-card-text.cjs",[[1,"ifx-card-text",{"hasBtn":[1028,"has-btn"]}]]],["ifx-dropdown.cjs",[[1,"ifx-dropdown",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4]},[[5,"mousedown","handleOutsideClick"]]]]],["ifx-dropdown-divider.cjs",[[1,"ifx-dropdown-divider"]]],["ifx-filter-input.cjs",[[1,"ifx-filter-input",{"label":[1],"size":[1],"disabled":[4],"icon":[4],"search":[4],"filter":[4],"options":[32]}]]],["ifx-footer.cjs",[[1,"ifx-footer",{"variant":[1],"large":[32],"default":[32],"showFacebook":[32]}]]],["ifx-footer-column.cjs",[[1,"ifx-footer-column"]]],["ifx-list-group.cjs",[[1,"ifx-list-group",{"flush":[4],"bulletpoint":[4],"notification":[4]}]]],["ifx-list-notification.cjs",[[1,"ifx-list-notification",{"titleText":[1,"title-text"],"isFlush":[4,"is-flush"],"creationTime":[8,"creation-time"],"postTime":[32],"shownTime":[32]}]]],["ifx-progress-bar.cjs",[[1,"ifx-progress-bar",{"value":[2],"label":[1],"size":[1],"showLabel":[4,"show-label"],"internalValue":[32]}]]],["ifx-radio-button.cjs",[[1,"ifx-radio-button",{"disabled":[4],"value":[4],"error":[4],"size":[1],"internalValue":[32],"hasSlot":[32]}]]],["ifx-select-input.cjs",[[1,"ifx-select-input",null,[[5,"mousedown","handleOutsideClick"]]]]],["ifx-sidebar.cjs",[[1,"ifx-sidebar",{"applicationName":[1,"application-name"]}]]],["ifx-spinner.cjs",[[1,"ifx-spinner",{"size":[1],"variant":[1]}]]],["ifx-status.cjs",[[1,"ifx-status",{"label":[1],"border":[4],"color":[1]}]]],["ifx-switch.cjs",[[1,"ifx-switch",{"value":[4],"name":[1],"internalValue":[32]}]]],["ifx-tab.cjs",[[4,"ifx-tab",{"header":[1]}]]],["ifx-tabs.cjs",[[1,"ifx-tabs",{"tabs":[16],"orientation":[1],"small":[4],"internalOrientation":[32],"activeTabIndex":[32],"tabRefs":[32],"tabHeaderRefs":[32],"tabTitles":[32]},[[0,"slotchange","onSlotChange"]]]]],["ifx-tag.cjs",[[1,"ifx-tag"]]],["ifx-button.cjs",[[1,"ifx-button",{"variant":[1],"color":[1],"size":[1],"disabled":[4],"icon":[1],"position":[1],"href":[1],"target":[1],"type":[1],"internalPosition":[32],"setFocus":[64]}]]],["ifx-multi-select-input-item.cjs",[[1,"ifx-multi-select-input-item",{"content":[1]}]]],["ifx-number-indicator.cjs",[[1,"ifx-number-indicator",{"inverted":[4]}]]],["ifx-accordion_2.cjs",[[1,"ifx-accordion-item",{"caption":[1],"open":[32],"close":[64],"isOpen":[64]}],[1,"ifx-accordion",{"autoCollapse":[4,"auto-collapse"]},[[0,"ifxItemOpen","onItemOpen"]]]]]], options);
   });
 };
 

package/dist/collection/collection-manifest.json

@@ -36,12 +36,12 @@
     "./components/number-indicator/number-indicator.js",
     "./components/progress-bar/progress-bar.js",
     "./components/radio-button/radio-button.js",
-    "./components/range/range.js",
     "./components/search-bar/search-bar.js",
     "./components/search-input/search-input.js",
     "./components/select-input/select-input.js",
     "./components/sidebar/sidebar-item.js",
     "./components/sidebar/sidebar.js",
+    "./components/slider/slider.js",
     "./components/spinner/spinner.js",
     "./components/status/status.js",
     "./components/switch/switch.js",

package/dist/collection/components/{range/range.css → slider/slider.css}

@@ -216,13 +216,13 @@
   margin-left: 8px;
 }
 
-.ifx-range {
+.ifx-slider {
   display: flex;
   align-items: center;
   padding: 2px 16px;
   border-radius: 100px;
 }
-.ifx-range input[type=range] {
+.ifx-slider input[type=range] {
   -webkit-appearance: none;
   width: 100%;
   height: 3px;
@@ -231,11 +231,11 @@
   cursor: pointer;
   transition: 0.2s;
 }
-.ifx-range input[type=range]:disabled {
+.ifx-slider input[type=range]:disabled {
   background: #dcd5d7;
   cursor: default;
 }
-.ifx-range input[type=range]::-webkit-slider-thumb {
+.ifx-slider input[type=range]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
   width: 20px;
@@ -245,15 +245,15 @@
   cursor: pointer;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
 }
-.ifx-range input[type=range]::-webkit-slider-thumb:hover {
+.ifx-slider input[type=range]::-webkit-slider-thumb:hover {
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
   background: #2d6357;
 }
-.ifx-range input[type=range]::-webkit-slider-thumb:active {
+.ifx-slider input[type=range]::-webkit-slider-thumb:active {
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);
   background: #28594e;
 }
-.ifx-range input[type=range]::-moz-range-thumb {
+.ifx-slider input[type=range]::-moz-range-thumb {
   width: 20px;
   height: 20px;
   border-radius: 50%;
@@ -261,11 +261,11 @@
   cursor: pointer;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
 }
-.ifx-range input[type=range]::-moz-range-thumb:hover {
+.ifx-slider input[type=range]::-moz-range-thumb:hover {
   box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
   background: #2d6357;
 }
-.ifx-range input[type=range]::-moz-range-thumb:active {
+.ifx-slider input[type=range]::-moz-range-thumb:active {
   box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);
   background: #28594e;
 }

package/dist/collection/components/{range/range.e2e.js → slider/slider.e2e.js}

@@ -1,57 +1,57 @@
 import { newE2EPage } from '@stencil/core/testing';
-describe('ifx-range', () => {
+describe('ifx-slider', () => {
   it('renders', async () => {
     const page = await newE2EPage();
-    await page.setContent('<ifx-range></ifx-range>');
-    const element = await page.find('ifx-range');
+    await page.setContent('<ifx-slider></ifx-slider>');
+    const element = await page.find('ifx-slider');
     expect(element).toHaveClass('hydrated');
   });
   it('renders changes to the value data', async () => {
     const page = await newE2EPage();
-    await page.setContent('<ifx-range value="50"></ifx-range>');
-    const element = await page.find('ifx-range >>> input');
+    await page.setContent('<ifx-slider value="50"></ifx-slider>');
+    const element = await page.find('ifx-slider >>> input');
     const value = await element.getProperty('value');
     expect(value).toEqual('50');
   });
   it('handles input change', async () => {
     const page = await newE2EPage();
-    await page.setContent('<ifx-range></ifx-range>');
-    const element = await page.find('ifx-range >>> input');
+    await page.setContent('<ifx-slider></ifx-slider>');
+    const element = await page.find('ifx-slider >>> input');
     await element.press('ArrowRight');
     const value = await element.getProperty('value');
     expect(value).toEqual('1');
   });
   it('disables when the disabled property is set', async () => {
     const page = await newE2EPage();
-    await page.setContent('<ifx-range disabled></ifx-range>');
-    const element = await page.find('ifx-range >>> input');
+    await page.setContent('<ifx-slider disabled></ifx-slider>');
+    const element = await page.find('ifx-slider >>> input');
     expect(element.getAttribute('disabled')).not.toBeNull();
   });
   it('renders left text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<ifx-range left-text="Left Text"></ifx-range>');
-    const element = await page.find('ifx-range >>> .left-text');
+    await page.setContent('<ifx-slider left-text="Left Text"></ifx-slider>');
+    const element = await page.find('ifx-slider >>> .left-text');
     expect(element.textContent).toEqual('Left Text');
   });
   it('renders right text', async () => {
     const page = await newE2EPage();
-    await page.setContent('<ifx-range right-text="Right Text"></ifx-range>');
-    const element = await page.find('ifx-range >>> .right-text');
+    await page.setContent('<ifx-slider right-text="Right Text"></ifx-slider>');
+    const element = await page.find('ifx-slider >>> .right-text');
     expect(element.textContent).toEqual('Right Text');
   });
   it('renders percentage if showPercentage is true', async () => {
     const page = await newE2EPage();
-    await page.setContent('<ifx-range value="30" show-percentage></ifx-range>');
-    const element = await page.find('ifx-range >>> .percentage-display');
+    await page.setContent('<ifx-slider value="30" show-percentage></ifx-slider>');
+    const element = await page.find('ifx-slider >>> .percentage-display');
     expect(element.textContent).toEqual('30%');
   });
   it('emits the ifxChanged event when the input changes', async () => {
     const page = await newE2EPage();
-    await page.setContent('<ifx-range value="50"></ifx-range>');
+    await page.setContent('<ifx-slider value="50"></ifx-slider>');
     const spy = await page.spyOnEvent('ifxChanged');
-    const input = await page.find('ifx-range >>> input');
+    const input = await page.find('ifx-slider >>> input');
     await input.press('ArrowRight');
     expect(spy).toHaveReceivedEventDetail(51);
   });
 });
-//# sourceMappingURL=range.e2e.js.map
+//# sourceMappingURL=slider.e2e.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.e2e.js","sourceRoot":"","sources":["../../../src/components/slider/slider.e2e.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('ifx-slider', () => {\n    it('renders', async () => {\n        const page = await newE2EPage();\n        await page.setContent('<ifx-slider></ifx-slider>');\n\n        const element = await page.find('ifx-slider');\n        expect(element).toHaveClass('hydrated');\n    });\n\n    it('renders changes to the value data', async () => {\n        const page = await newE2EPage();\n        await page.setContent('<ifx-slider value=\"50\"></ifx-slider>');\n\n        const element = await page.find('ifx-slider >>> input');\n\n        const value = await element.getProperty('value');\n        expect(value).toEqual('50');\n    });\n\n    it('handles input change', async () => {\n        const page = await newE2EPage();\n        await page.setContent('<ifx-slider></ifx-slider>');\n\n        const element = await page.find('ifx-slider >>> input');\n        await element.press('ArrowRight');\n\n        const value = await element.getProperty('value');\n        expect(value).toEqual('1');\n    });\n\n    it('disables when the disabled property is set', async () => {\n        const page = await newE2EPage();\n        await page.setContent('<ifx-slider disabled></ifx-slider>');\n\n        const element = await page.find('ifx-slider >>> input');\n        expect(element.getAttribute('disabled')).not.toBeNull();\n    });\n\n    it('renders left text', async () => {\n        const page = await newE2EPage();\n        await page.setContent('<ifx-slider left-text=\"Left Text\"></ifx-slider>');\n\n        const element = await page.find('ifx-slider >>> .left-text');\n        expect(element.textContent).toEqual('Left Text');\n    });\n\n    it('renders right text', async () => {\n        const page = await newE2EPage();\n        await page.setContent('<ifx-slider right-text=\"Right Text\"></ifx-slider>');\n\n        const element = await page.find('ifx-slider >>> .right-text');\n        expect(element.textContent).toEqual('Right Text');\n    });\n\n    it('renders percentage if showPercentage is true', async () => {\n        const page = await newE2EPage();\n        await page.setContent('<ifx-slider value=\"30\" show-percentage></ifx-slider>');\n\n        const element = await page.find('ifx-slider >>> .percentage-display');\n        expect(element.textContent).toEqual('30%');\n    });\n\n    it('emits the ifxChanged event when the input changes', async () => {\n        const page = await newE2EPage();\n        await page.setContent('<ifx-slider value=\"50\"></ifx-slider>');\n        const spy = await page.spyOnEvent('ifxChanged');\n\n        const input = await page.find('ifx-slider >>> input');\n        await input.press('ArrowRight');\n\n        expect(spy).toHaveReceivedEventDetail(51);\n    });\n});\n"]}

package/dist/collection/components/{range/range.js → slider/slider.js}

@@ -1,5 +1,5 @@
 import { h } from '@stencil/core';
-export class IfxRange {
+export class IfxSlider {
   constructor() {
     this.min = 0;
     this.max = 100;
@@ -35,18 +35,18 @@ export class IfxRange {
     this.updateValuePercent();
   }
   render() {
-    return (h("div", { class: "ifx-range" }, this.leftText && (h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event) }), this.rightIcon && (h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.value, "%"))));
+    return (h("div", { class: "ifx-slider" }, this.leftText && (h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event) }), this.rightIcon && (h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.value, "%"))));
   }
-  static get is() { return "ifx-range"; }
+  static get is() { return "ifx-slider"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() {
     return {
-      "$": ["range.scss"]
+      "$": ["slider.scss"]
     };
   }
   static get styleUrls() {
     return {
-      "$": ["range.css"]
+      "$": ["slider.css"]
     };
   }
   static get properties() {
@@ -241,4 +241,4 @@ export class IfxRange {
       }];
   }
 }
-//# sourceMappingURL=range.js.map
+//# sourceMappingURL=slider.js.map

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

@@ -0,0 +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 } from '@stencil/core';\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() value: number = 0;\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  @State() internalValue: number = 0;\n  @Event() ifxChanged: EventEmitter<number>;\n\n  private inputRef: HTMLInputElement;\n\n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseInt(target.value);\n    this.ifxChanged.emit(this.internalValue);\n    this.updateValuePercent();\n  }\n\n  updateValuePercent() {\n    if (this.inputRef) {\n      const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;\n      this.inputRef.style.setProperty('--value-percent', `${percent}%`);\n    }\n  }\n\n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n  componentDidLoad() {\n    this.updateValuePercent();\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        <input\n          type=\"range\"\n          min={this.min}\n          max={this.max}\n          disabled={this.disabled}\n          value={this.internalValue}\n          ref={(el) => (this.inputRef = el as HTMLInputElement)}\n          onInput={(event) => this.handleInputChange(event)}\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 && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.value}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/{range/range.stories.js → slider/slider.stories.js}

@@ -1,8 +1,8 @@
 import { action } from '@storybook/addon-actions';
 import { icons } from '@infineon/infineon-icons';
 export default {
-  title: 'Components/Range',
-  component: 'ifx-range',
+  title: 'Components/Slider',
+  component: 'ifx-slider',
   tags: ['autodocs'],
   argTypes: {
     value: { control: 'number' },
@@ -23,30 +23,30 @@ export default {
   },
 };
 const Template = (args) => {
-  const rangeElement = document.createElement('ifx-range');
-  rangeElement.setAttribute('value', args.value);
-  rangeElement.setAttribute('min', args.min);
-  rangeElement.setAttribute('max', args.max);
+  const sliderElement = document.createElement('ifx-slider');
+  sliderElement.setAttribute('value', args.value);
+  sliderElement.setAttribute('min', args.min);
+  sliderElement.setAttribute('max', args.max);
   if (args.showPercentage) {
-    rangeElement.setAttribute('show-percentage', 'true');
+    sliderElement.setAttribute('show-percentage', 'true');
   }
   if (args.disabled) {
-    rangeElement.setAttribute('disabled', 'true'); // Set disabled attribute
+    sliderElement.setAttribute('disabled', 'true'); // Set disabled attribute
   }
   if (args.leftIcon) {
-    rangeElement.setAttribute('left-icon', args.leftIcon);
+    sliderElement.setAttribute('left-icon', args.leftIcon);
   }
   if (args.rightIcon) {
-    rangeElement.setAttribute('right-icon', args.rightIcon);
+    sliderElement.setAttribute('right-icon', args.rightIcon);
   }
   if (args.leftText) {
-    rangeElement.setAttribute('left-text', args.leftText);
+    sliderElement.setAttribute('left-text', args.leftText);
   }
   if (args.rightText) {
-    rangeElement.setAttribute('right-text', args.rightText);
+    sliderElement.setAttribute('right-text', args.rightText);
   }
-  rangeElement.addEventListener('ifxChanged', action('ifxChanged'));
-  return rangeElement;
+  sliderElement.addEventListener('ifxChanged', action('ifxChanged'));
+  return sliderElement;
 };
 export const Default = Template.bind({});
 Default.args = {
@@ -70,4 +70,4 @@ export const WithTexts = Template.bind({});
 WithTexts.args = Object.assign(Object.assign({}, Default.args), { leftText: 'LeftText', rightText: 'RightText' });
 export const Disabled = Template.bind({});
 Disabled.args = Object.assign(Object.assign({}, Default.args), { disabled: true });
-//# sourceMappingURL=range.stories.js.map
+//# sourceMappingURL=slider.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider.stories.js","sourceRoot":"","sources":["../../../src/components/slider/slider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,eAAe;EACb,KAAK,EAAE,mBAAmB;EAC1B,SAAS,EAAE,YAAY;EACvB,IAAI,EAAE,CAAC,UAAU,CAAC;EAElB,QAAQ,EAAE;IACR,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;IAC5B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;IAC1B,GAAG,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE;IAC1B,cAAc,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;IACtC,QAAQ,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;IAChC,QAAQ,EAAE;MACR,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;MACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,SAAS,EAAE;MACT,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;MACjD,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;KAC5B;IACD,QAAQ,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;IAC7B,SAAS,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;GAC/B;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;EACxB,MAAM,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;EAC3D,aAAa,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;EAChD,aAAa,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;EAC5C,aAAa,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC;EAC5C,IAAI,IAAI,CAAC,cAAc,EAAE;IACvB,aAAa,CAAC,YAAY,CAAC,iBAAiB,EAAE,MAAM,CAAC,CAAC;GACvD;EACD,IAAI,IAAI,CAAC,QAAQ,EAAE;IACjB,aAAa,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC,yBAAyB;GAC1E;EAED,IAAI,IAAI,CAAC,QAAQ,EAAE;IACjB,aAAa,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;GACxD;EACD,IAAI,IAAI,CAAC,SAAS,EAAE;IAClB,aAAa,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;GAC1D;EACD,IAAI,IAAI,CAAC,QAAQ,EAAE;IACjB,aAAa,CAAC,YAAY,CAAC,WAAW,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;GACxD;EACD,IAAI,IAAI,CAAC,SAAS,EAAE;IAClB,aAAa,CAAC,YAAY,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;GAC1D;EACD,aAAa,CAAC,gBAAgB,CAAC,YAAY,EAAE,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;EAEnE,OAAO,aAAa,CAAC;AACvB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,OAAO,CAAC,IAAI,GAAG;EACb,KAAK,EAAE,EAAE;EACT,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,GAAG;EACR,cAAc,EAAE,KAAK;EACrB,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvD,qBAAqB,CAAC,IAAI,GAAG;EAC3B,KAAK,EAAE,EAAE;EACT,GAAG,EAAE,CAAC;EACN,GAAG,EAAE,GAAG;EACR,cAAc,EAAE,IAAI;EACpB,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,mCACT,OAAO,CAAC,IAAI,KACf,QAAQ,EAAE,aAAa,EACvB,SAAS,EAAE,aAAa,GACzB,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,IAAI,mCACT,OAAO,CAAC,IAAI,KACf,QAAQ,EAAE,UAAU,EACpB,SAAS,EAAE,WAAW,GACvB,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC1C,QAAQ,CAAC,IAAI,mCACR,OAAO,CAAC,IAAI,KACf,QAAQ,EAAE,IAAI,GACf,CAAC","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    value: { control: 'number' },\n    min: { control: 'number' },\n    max: { control: 'number' },\n    showPercentage: { control: 'boolean' },\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  },\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  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('ifxChanged', action('ifxChanged'));\n\n  return sliderElement;\n};\n\nexport const Default = Template.bind({});\nDefault.args = {\n  value: 50,\n  min: 0,\n  max: 100,\n  showPercentage: false,\n  disabled: false,\n};\n\nexport const WithPercentageDisplay = Template.bind({});\nWithPercentageDisplay.args = {\n  value: 50,\n  min: 0,\n  max: 100,\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\n"]}

package/dist/components/{ifx-range.d.ts → ifx-slider.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface IfxRange extends Components.IfxRange, HTMLElement {}
-export const IfxRange: {
-  prototype: IfxRange;
-  new (): IfxRange;
+interface IfxSlider extends Components.IfxSlider, HTMLElement {}
+export const IfxSlider: {
+  prototype: IfxSlider;
+  new (): IfxSlider;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/ifx-slider.js

@@ -0,0 +1,88 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './infineonIconStencil.js';
+
+const sliderCss = "*{font-family:\"Source Sans Pro\"}:host{display:inline-block}.left-icon,.right-icon,.left-text,.right-text,.percentage-display{font-size:0.8125rem;color:#7d6f72;margin-left:8px}.left-icon.disabled,.right-icon.disabled,.left-text.disabled,.right-text.disabled,.percentage-display.disabled{color:#dcd5d7}.left-icon,.left-text{margin-right:8px}.right-icon,.right-text,.percentage-display{margin-left:8px}.ifx-slider{display:flex;align-items:center;padding:2px 16px;border-radius:100px}.ifx-slider input[type=range]{-webkit-appearance:none;width:100%;height:3px;background:linear-gradient(to right, #378375 0%, #378375 var(--value-percent, 0%), #ebe9e9 var(--value-percent, 0%), #ebe9e9 100%);outline:none;cursor:pointer;transition:0.2s}.ifx-slider input[type=range]:disabled{background:#dcd5d7;cursor:default}.ifx-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#378375;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]::-webkit-slider-thumb:hover{box-shadow:0px 1px 4px rgba(0, 0, 0, 0.4);background:#2d6357}.ifx-slider input[type=range]::-webkit-slider-thumb:active{box-shadow:0px 1px 6px rgba(0, 0, 0, 0.6);background:#28594e}.ifx-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#378375;cursor:pointer;box-shadow:0px 1px 2px rgba(0, 0, 0, 0.2)}.ifx-slider input[type=range]::-moz-range-thumb:hover{box-shadow:0px 1px 4px rgba(0, 0, 0, 0.4);background:#2d6357}.ifx-slider input[type=range]::-moz-range-thumb:active{box-shadow:0px 1px 6px rgba(0, 0, 0, 0.6);background:#28594e}";
+
+const IfxSlider$1 = /*@__PURE__*/ proxyCustomElement(class IfxSlider extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.ifxChanged = createEvent(this, "ifxChanged", 7);
+    this.min = 0;
+    this.max = 100;
+    this.value = 0;
+    this.disabled = false;
+    this.showPercentage = false;
+    this.leftIcon = undefined;
+    this.rightIcon = undefined;
+    this.leftText = undefined;
+    this.rightText = undefined;
+    this.internalValue = 0;
+  }
+  valueChanged(newValue) {
+    this.internalValue = newValue;
+    this.updateValuePercent();
+  }
+  handleInputChange(event) {
+    const target = event.target;
+    this.internalValue = parseInt(target.value);
+    this.ifxChanged.emit(this.internalValue);
+    this.updateValuePercent();
+  }
+  updateValuePercent() {
+    if (this.inputRef) {
+      const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;
+      this.inputRef.style.setProperty('--value-percent', `${percent}%`);
+    }
+  }
+  componentWillLoad() {
+    this.internalValue = this.value;
+  }
+  componentDidLoad() {
+    this.updateValuePercent();
+  }
+  render() {
+    return (h("div", { class: "ifx-slider" }, this.leftText && (h("span", { class: `left-text` }, this.leftText)), this.leftIcon && (h("ifx-icon", { icon: this.leftIcon, class: `left-icon${this.disabled ? ' disabled' : ''}` })), h("input", { type: "range", min: this.min, max: this.max, disabled: this.disabled, value: this.internalValue, ref: (el) => (this.inputRef = el), onInput: (event) => this.handleInputChange(event) }), this.rightIcon && (h("ifx-icon", { icon: this.rightIcon, class: `right-icon${this.disabled ? ' disabled' : ''}` })), this.rightText && (h("span", { class: `right-text${this.disabled ? ' disabled' : ''}` }, this.rightText)), this.showPercentage && (h("span", { class: `percentage-display${this.disabled ? ' disabled' : ''}` }, this.value, "%"))));
+  }
+  static get watchers() { return {
+    "value": ["valueChanged"]
+  }; }
+  static get style() { return sliderCss; }
+}, [1, "ifx-slider", {
+    "min": [2],
+    "max": [2],
+    "value": [2],
+    "disabled": [4],
+    "showPercentage": [4, "show-percentage"],
+    "leftIcon": [1, "left-icon"],
+    "rightIcon": [1, "right-icon"],
+    "leftText": [1, "left-text"],
+    "rightText": [1, "right-text"],
+    "internalValue": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["ifx-slider", "ifx-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "ifx-slider":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, IfxSlider$1);
+      }
+      break;
+    case "ifx-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+
+const IfxSlider = IfxSlider$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { IfxSlider, defineCustomElement };
+
+//# sourceMappingURL=ifx-slider.js.map

package/dist/components/ifx-slider.js.map

@@ -0,0 +1 @@
+{"file":"ifx-slider.js","mappings":";;;AAAA,MAAM,SAAS,GAAG,onDAAonD;;MCOznDA,WAAS;;;;;;eACE,CAAC;eACD,GAAG;iBACD,CAAC;oBACG,KAAK;0BACC,KAAK;;;;;yBAKN,CAAC;;EAMlC,YAAY,CAAC,QAAgB;IAC3B,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAC9B,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,iBAAiB,CAAC,KAAY;IAC5B,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;IAChD,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACzC,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAED,kBAAkB;IAChB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,GAAG,CAAC;MAChF,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,OAAO,GAAG,CAAC,CAAC;KACnE;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;GACjC;EAED,gBAAgB;IACd,IAAI,CAAC,kBAAkB,EAAE,CAAC;GAC3B;EAGD,MAAM;IACJ,QACE,WAAK,KAAK,EAAC,YAAY,IACpB,IAAI,CAAC,QAAQ,KACZ,YAAM,KAAK,EAAE,WAAW,IACrB,IAAI,CAAC,QAAQ,CACT,CACR,EACA,IAAI,CAAC,QAAQ,KACZ,gBAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,YAAY,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,GAAI,CACzF,EAED,aACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,aAAa,EACzB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,QAAQ,GAAG,EAAsB,CAAC,EACrD,OAAO,EAAE,CAAC,KAAK,KAAK,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,GACjD,EACD,IAAI,CAAC,SAAS,KACb,gBAAU,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,GAAI,CAC3F,EACA,IAAI,CAAC,SAAS,KACb,YAAM,KAAK,EAAE,aAAa,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,IACzD,IAAI,CAAC,SAAS,CACV,CACR,EAEA,IAAI,CAAC,cAAc,KAClB,YACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,EAAE,EAAE,IAE7D,IAAI,CAAC,KAAK,MACN,CACR,CACG,EACN;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["IfxSlider"],"sources":["./src/components/slider/slider.scss?tag=ifx-slider&encapsulation=shadow","./src/components/slider/slider.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n\n// ifx-slider.scss\n:host {\n  display: inline-block;\n}\n\n.left-icon,\n.right-icon,\n.left-text,\n.right-text,\n.percentage-display {\n  font-size: tokens.$font-size-s;\n  color: tokens.$color-gray-500;\n  margin-left: 8px;\n\n  &.disabled {\n    // Add the disabled state for the percentage display\n    color: tokens.$color-gray-300;\n  }\n}\n\n.left-icon,\n.left-text {\n  margin-right: 8px;\n}\n\n.right-icon,\n.right-text,\n.percentage-display {\n  margin-left: 8px;\n}\n\n.ifx-slider {\n  display: flex;\n  align-items: center;\n  padding: tokens.$spacing-xxs tokens.$spacing-m;\n  border-radius: tokens.$border-radius-pill;\n\n  input[type='range'] {\n    -webkit-appearance: none;\n    width: 100%;\n    height: 3px;\n    background: linear-gradient(to right, tokens.$color-default-500 0%, tokens.$color-default-500 var(--value-percent, 0%), tokens.$color-gray-200 var(--value-percent, 0%), tokens.$color-gray-200 100%);\n    outline: none;\n    cursor: pointer;\n    transition: 0.2s;\n\n    &:disabled {\n      background: tokens.$color-gray-300;\n      cursor: default;\n    }\n\n    &::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      appearance: none;\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      background: tokens.$color-default-500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n\n      &:hover {\n        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);\n        background: tokens.$color-default-600;\n      }\n\n      &:active {\n        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);\n        background: tokens.$color-default-700;\n      }\n    }\n\n    &::-moz-range-thumb {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      background: tokens.$color-default-500;\n      cursor: pointer;\n      box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);\n\n      &:hover {\n        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);\n        background: tokens.$color-default-600;\n      }\n\n      &:active {\n        box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);\n        background: tokens.$color-default-700;\n      }\n    }\n  }\n}","import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';\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() value: number = 0;\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  @State() internalValue: number = 0;\n  @Event() ifxChanged: EventEmitter<number>;\n\n  private inputRef: HTMLInputElement;\n\n  @Watch('value')\n  valueChanged(newValue: number) {\n    this.internalValue = newValue;\n    this.updateValuePercent();\n  }\n\n  handleInputChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n    this.internalValue = parseInt(target.value);\n    this.ifxChanged.emit(this.internalValue);\n    this.updateValuePercent();\n  }\n\n  updateValuePercent() {\n    if (this.inputRef) {\n      const percent = ((this.internalValue - this.min) / (this.max - this.min)) * 100;\n      this.inputRef.style.setProperty('--value-percent', `${percent}%`);\n    }\n  }\n\n  componentWillLoad() {\n    this.internalValue = this.value;\n  }\n\n  componentDidLoad() {\n    this.updateValuePercent();\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        <input\n          type=\"range\"\n          min={this.min}\n          max={this.max}\n          disabled={this.disabled}\n          value={this.internalValue}\n          ref={(el) => (this.inputRef = el as HTMLInputElement)}\n          onInput={(event) => this.handleInputChange(event)}\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 && (\n          <span\n            class={`percentage-display${this.disabled ? ' disabled' : ''}`}\n          >\n            {this.value}%\n          </span>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}