@infineon/infineon-design-system-stencil 33.1.1--canary.1824.75b5030250f4474f2c947b6e8dc7055bdc915c43.0 → 33.1.1--canary.1818.94e54a71935d0367c21fd257850df436af269985.0

package/dist/components/p-4213a3a9.js

@@ -0,0 +1,68 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-2cc378b8.js';
+import { d as defineCustomElement$2 } from './p-e7551b24.js';
+import { d as defineCustomElement$1 } from './p-2eee9126.js';
+
+const notificationCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.ifx-notification__wrapper{display:flex;flex-direction:row;align-items:center;padding:8px 16px;background-color:#FFFFFF;font-family:var(--ifx-font-family, Source Sans 3);color:#1D1D1D;border:1px solid #EEEDED}.ifx-notification__wrapper.ifx-notification__wrapper--success{border-left:4px solid #4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--success .ifx-notification__icon{color:#4CA460}.ifx-notification__wrapper.ifx-notification__wrapper--locked{border-left:4px solid #E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--locked .ifx-notification__icon{color:#E16B25}.ifx-notification__wrapper.ifx-notification__wrapper--error{border-left:4px solid #CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--error .ifx-notification__icon{color:#CD002F}.ifx-notification__wrapper.ifx-notification__wrapper--neutral{border-left:4px solid #0A8276}.ifx-notification__wrapper.ifx-notification__wrapper--neutral .ifx-notification__icon{color:#0A8276}.ifx-notification__wrapper .ifx-notification__icon{margin-right:8px;display:flex;align-self:center}.ifx-notification__wrapper .ifx-notification__body{display:flex;flex-direction:row;flex-grow:1;font-size:0.875rem}.ifx-notification__wrapper .ifx-notification__body .ifx-notification__slot{flex-grow:1;display:inline-flex;align-items:center}.ifx-notification__wrapper .ifx-notification__link{font-size:0.875rem}@media (max-width: 576px){.ifx-notification__wrapper .ifx-notification__icon{align-self:flex-start}.ifx-notification__wrapper .ifx-notification__body{flex-direction:column}.ifx-notification__wrapper .ifx-notification__link{margin-top:8px}}";
+const IfxNotificationStyle0 = notificationCss;
+
+const Notification = /*@__PURE__*/ proxyCustomElement(class Notification extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.variant = 'success';
+        this.linkTarget = '_blank';
+    }
+    getClassName() {
+        switch (this.variant) {
+            case 'success':
+                return 'ifx-notification__wrapper--success';
+            case 'locked':
+                return 'ifx-notification__wrapper--locked';
+            case 'error':
+                return 'ifx-notification__wrapper--error';
+            case 'neutral':
+                return 'ifx-notification__wrapper--neutral';
+            default:
+                return 'ifx-notification__wrapper--success';
+        }
+    }
+    render() {
+        return (h(Host, { key: '58c1e582dacc8ce8e0023a33fbad8385256ee061' }, h("div", { key: '72b9751e1e25424ac7b65de457cdf19f58dc3c1d', class: "ifx-notification__wrapper " + this.getClassName() }, h("div", { key: '7e5278aa5a6d87f865a42ca43aee7218f8497758', class: "ifx-notification__icon" }, h("ifx-icon", { key: '51b76a1c0ac9b6a1a0ce8cb94402d985dc1f84bf', icon: this.icon })), h("div", { key: '0ec9c7e9e5f95d65f8ff3e0fd08b350f2147b9fc', class: "ifx-notification__body" }, h("div", { key: '3eb4c1b5dd82d6d8fcbad40f5894bae6ba6bbc46', class: "ifx-notification__slot" }, h("slot", { key: 'ab0f20176ba655ae1d6114436e5a91e2228b5382' })), this.linkText && this.linkHref &&
+            h("div", { key: 'b1886bb5eda5799c83f2153eadde9559640594fc', class: "ifx-notification__link" }, h("ifx-link", { key: 'be4defdd90d68907de57cce3810e0c682a13141b', href: this.linkHref, target: this.linkTarget }, this.linkText, h("ifx-icon", { key: '1ffc89db07072d1e83f51f9c7ebba662d2254bff', icon: "arrow-right-16" })))))));
+    }
+    static get style() { return IfxNotificationStyle0; }
+}, [1, "ifx-notification", {
+        "icon": [1],
+        "variant": [1],
+        "linkText": [1, "link-text"],
+        "linkHref": [1, "link-href"],
+        "linkTarget": [1, "link-target"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["ifx-notification", "ifx-icon", "ifx-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "ifx-notification":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Notification);
+            }
+            break;
+        case "ifx-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "ifx-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Notification as N, defineCustomElement as d };
+
+//# sourceMappingURL=p-4213a3a9.js.map

package/dist/components/p-4213a3a9.js.map

@@ -0,0 +1 @@
+{"file":"p-4213a3a9.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,8qDAA8qD,CAAC;AACvsD,8BAAe,eAAe;;MCQjB,YAAY;IALzB;;;;QAOU,YAAO,GAAwB,SAAS,CAAC;QAGzC,eAAU,GAAW,QAAQ,CAAC;KA0CvC;IAvCS,YAAY;QAClB,QAAQ,IAAI,CAAC,OAAO;YAClB,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C,KAAK,QAAQ;gBACX,OAAO,mCAAmC,CAAC;YAC7C,KAAK,OAAO;gBACV,OAAO,kCAAkC,CAAC;YAC5C,KAAK,SAAS;gBACZ,OAAO,oCAAoC,CAAC;YAC9C;gBACE,OAAO,oCAAoC,CAAC;SAC/C;KACF;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,4BAA4B,GAAG,IAAI,CAAC,YAAY,EAAE,IAC5D,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,IAAI,GAAa,CAClC,EACN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,8DAAO,CACH,EACJ,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,iEAAU,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,UAAU,IACnD,IAAI,CAAC,QAAQ,EAAC,iEAAU,IAAI,EAAC,gBAAgB,GACrC,CACA,CACP,CAEF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/notification/notification.scss?tag=ifx-notification&encapsulation=shadow","src/components/notification/notification.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n@use \"../../global/font.scss\";\n\n.ifx-notification__wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n\n  padding: tokens.$ifxSpace100 tokens.$ifxSpace200;\n\n  background-color: tokens.$ifxColorBaseWhite;\n  font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n  color: tokens.$ifxColorBaseBlack;\n\n  border: tokens.$ifxBorderWidth12 solid tokens.$ifxColorEngineering200;\n\n  &.ifx-notification__wrapper--success {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorGreen500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorGreen500;\n    }\n  }\n\n  &.ifx-notification__wrapper--locked {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOrange500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOrange500;\n    }\n  }\n\n  &.ifx-notification__wrapper--error {\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorRed500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorRed500;\n    }\n  }\n\n  &.ifx-notification__wrapper--neutral{\n    border-left: tokens.$ifxBorderWidth50 solid tokens.$ifxColorOcean500;\n\n    & .ifx-notification__icon {\n      color: tokens.$ifxColorOcean500;\n    }\n  }\n\n  & .ifx-notification__icon {\n    margin-right: tokens.$ifxSpace100;\n    display: flex;\n    align-self: center;\n  }\n\n  & .ifx-notification__body {\n    display: flex;\n    flex-direction: row;\n    flex-grow: 1;\n    font-size: tokens.$ifxFontSizeS;\n\n    & .ifx-notification__slot {\n      flex-grow: 1;\n      display: inline-flex;\n      align-items: center;\n    }\n  }\n\n  & .ifx-notification__link {\n    font-size: tokens.$ifxFontSizeS;\n  }\n\n  @media (max-width: tokens.$ifxBreakpointXs) {\n    & .ifx-notification__icon {\n      align-self: flex-start;\n    }\n\n    & .ifx-notification__body {\n      flex-direction: column;\n    }\n\n    & .ifx-notification__link {\n      margin-top: tokens.$ifxSpace100;\n    }\n  }\n}","import { Component, h, Host, Prop } from '@stencil/core';\n \nexport type NotificationVariant = 'success' | 'locked' | 'error' | 'neutral';\n\n@Component({\n  tag: 'ifx-notification',\n  styleUrl: 'notification.scss',\n  shadow: true\n})\nexport class Notification {\n  @Prop() icon: string;\n  @Prop() variant: NotificationVariant = 'success';\n  @Prop() linkText: string; \n  @Prop() linkHref: string;\n  @Prop() linkTarget: string = '_blank';\n\n\n  private getClassName(): string {\n    switch (this.variant) {\n      case 'success':\n        return 'ifx-notification__wrapper--success';\n      case 'locked':\n        return 'ifx-notification__wrapper--locked';\n      case 'error':\n        return 'ifx-notification__wrapper--error';\n      case 'neutral':\n        return 'ifx-notification__wrapper--neutral';\n      default:\n        return 'ifx-notification__wrapper--success';\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={\"ifx-notification__wrapper \" + this.getClassName()}>\n          <div class=\"ifx-notification__icon\">\n            <ifx-icon icon={this.icon}></ifx-icon>\n          </div>\n          <div class=\"ifx-notification__body\">\n            <div class=\"ifx-notification__slot\">\n              <slot/>\n            </div>\n            { this.linkText && this.linkHref && \n            <div class=\"ifx-notification__link\">\n              <ifx-link href={this.linkHref} target={this.linkTarget}>\n                {this.linkText}<ifx-icon icon=\"arrow-right-16\">\n              </ifx-icon>\n              </ifx-link>\n            </div>\n          }\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}"],"version":3}

package/dist/components/{p-846923e6.js → p-48300c0e.js}

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-2cc378b8.js';
-import { d as defineCustomElement$1 } from './p-35d83f23.js';
+import { d as defineCustomElement$1 } from './p-e7551b24.js';
 
-const checkboxCss = ":host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:top;padding:0px;gap:8px;font-family:var(--ifx-font-family)}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate){background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:\"\";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}";
+const checkboxCss = ":host{display:inline-flex;vertical-align:top}.checkbox__container{box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:top;padding:0px;gap:8px;font-family:var(--ifx-font-family, Source Sans 3)}.checkbox__container .checkbox__wrapper{box-sizing:border-box;display:flex;position:relative;justify-content:center;align-items:center;width:20px;height:20px;background-color:#FFFFFF;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0;align-self:flex-start}.checkbox__container .checkbox__wrapper.checkbox-m{height:24px;width:24px}.checkbox__container .checkbox__wrapper.error{border-color:#CD002F}.checkbox__container .checkbox__wrapper:focus-visible{border:1px solid #575352;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper:hover{background-color:#EEEDED;border:1px solid #575352;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.disabled{background-color:#BFBBBB;border-color:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate){background-color:#0A8276;border-radius:1px;border-color:transparent;flex:none;order:0;flex-grow:0;color:#FFFFFF}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).error{background-color:#CD002F}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):focus-visible{border:1px solid transparent;outline:2px solid #0A8276;outline-offset:2px}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate):hover{background-color:#08665C;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.checked:not(.indeterminate).disabled{background:#BFBBBB;border-radius:1px;flex:none;order:0;flex-grow:0}.checkbox__container .checkbox__wrapper.indeterminate:before{content:\"\";display:block;width:70%;height:2px;background-color:#08665C;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}.checkbox__container .label{font-style:normal;font-weight:400;font-size:0.875rem;line-height:1.25rem;color:#1D1D1D;overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;max-width:100%}.checkbox__container .label.label-m{font-size:1rem;line-height:1.5rem}.checkbox__container .label.disabled{color:#BFBBBB}.checkbox__container .checkbox__wrapper:hover,.checkbox__container .label:hover{cursor:pointer}";
 const IfxCheckboxStyle0 = checkboxCss;
 
 const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
@@ -154,4 +154,4 @@ function defineCustomElement() {
 
 export { Checkbox as C, defineCustomElement as d };
 
-//# sourceMappingURL=p-846923e6.js.map
+//# sourceMappingURL=p-48300c0e.js.map

package/dist/components/p-48300c0e.js.map

@@ -0,0 +1 @@
+{"file":"p-48300c0e.js","mappings":"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","names":[],"sources":["src/components/checkbox/checkbox.scss?tag=ifx-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["@use \"~@infineon/design-system-tokens/dist/tokens\";\n\n:host {\n    display: inline-flex;\n    vertical-align: top;\n}\n\n.checkbox__container {\n    box-sizing: border-box;\n    display: inline-flex;\n    flex-direction: row;\n    align-items: top;\n    padding: 0px;\n    gap: tokens.$ifxSpace100;\n    font-family: var(--ifx-font-family, #{tokens.$ifxFontFamilyBody});\n\n    & .checkbox__wrapper {\n        box-sizing: border-box;\n        display: flex;\n        position: relative; //needs to be added for the indeterminate state of the checkbox\n        justify-content: center;\n        align-items: center;\n        width: tokens.$ifxSize250;\n        height: tokens.$ifxSize250;\n        background-color: tokens.$ifxColorBaseWhite;\n        border: 1px solid #575352;\n        border-radius: tokens.$ifxBorderRadius12;\n        flex: none;\n        order: 0;\n        flex-grow: 0;\n        align-self: flex-start;\n\n        &.checkbox-m {\n            height: tokens.$ifxSize300;\n            width: tokens.$ifxSize300;\n        }\n\n        &.error {\n            border-color: #CD002F;\n        }\n\n        &:focus-visible {\n            border: 1px solid #575352;\n            outline: 2px solid #0A8276;\n            outline-offset: 2px;\n        }\n\n        &:hover {\n            background-color: #EEEDED;\n            border: 1px solid #575352;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.disabled {\n            background-color: #BFBBBB;\n            border-color: #BFBBBB;\n            border-radius: tokens.$ifxBorderRadius12;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n        }\n\n        &.checked:not(.indeterminate) {\n            background-color: #0A8276;\n            border-radius: tokens.$ifxBorderRadius12;\n            border-color: tokens.$ifxColorBaseTransparent;\n            flex: none;\n            order: 0;\n            flex-grow: 0;\n            color: tokens.$ifxColorBaseWhite;\n\n            &.error {\n                background-color: #CD002F;\n            }\n\n            &:focus-visible {\n                border: 1px solid transparent;\n                outline: 2px solid #0A8276;\n                outline-offset: 2px;\n            }\n\n            &:hover {\n                background-color: #08665C;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n\n            &.disabled {\n                background: #BFBBBB;\n                border-radius: tokens.$ifxBorderRadius12;\n                flex: none;\n                order: 0;\n                flex-grow: 0;\n            }\n        }\n\n        &.indeterminate {\n            &:before {\n                content: \"\";\n                display: block;\n                width: 70%; // Adjust as needed for the width of the minus sign\n                height: 2px; // Adjust for thickness of the minus sign\n                background-color: #08665C; // Color of the minus sign\n                position: absolute;\n                top: 50%;\n                left: 50%;\n                transform: translate(-50%, -50%);\n            }\n        }\n\n    }\n\n    & .label {\n        font-style: normal;\n        font-weight: 400;\n        font-size: tokens.$ifxFontSizeS;\n        line-height: tokens.$ifxLineHeightS;\n        color: tokens.$ifxColorBaseBlack;\n        overflow-wrap: break-word;\n        word-wrap: break-word;\n        word-break: break-all;\n        max-width: 100%;\n\n        &.label-m {\n            font-size: tokens.$ifxFontSizeM;\n            line-height: tokens.$ifxLineHeightM;\n        }\n\n        &.disabled {\n            color: #BFBBBB;\n        }\n    }\n\n    & .checkbox__wrapper,\n    & .label {\n        &:hover {\n            cursor: pointer;\n        }\n    }\n}","import { Component, h, Prop, Element, State, Event, EventEmitter, Watch, Method, AttachInternals } from '@stencil/core';\n\n@Component({\n  tag: 'ifx-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true\n})\n\nexport class Checkbox {\n  private inputElement: HTMLInputElement;\n\n  @Element() el;\n  @Prop() disabled: boolean = false;\n  @Prop() checked: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() size: string = 'm';\n  @Prop() indeterminate: boolean = false;\n  @Prop() value: string;\n  @State() internalChecked: boolean;\n  @State() internalIndeterminate: boolean;\n\n  @AttachInternals() internals: ElementInternals;\n\n  @Event({ bubbles: true, composed: true }) ifxChange: EventEmitter;\n  @Event({ bubbles: true, composed: true }) ifxError: EventEmitter;\n\n  handleCheckbox() {\n    if (!this.disabled) {\n      if (!this.inputElement.indeterminate) {\n        this.internalChecked = !this.internalChecked;\n      } \n      if (this.internalChecked && !this.internalIndeterminate) {\n        if (this.value !== undefined) {\n          this.internals.setFormValue(this.value);\n        } else {\n          this.internals.setFormValue(\"on\")\n        }\n      } else {\n        this.internals.setFormValue(null)\n      }\n      this.ifxChange.emit(this.internalChecked);\n    }\n  }\n\n  @Method()\n  async isChecked(): Promise<boolean> {\n    return this.internalChecked;\n  }\n\n  @Method()\n  async toggleCheckedState(newVal: boolean) {\n    this.internalChecked = newVal;\n  }\n\n  @Watch('checked')\n  valueChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalChecked = newValue;\n      this.inputElement.checked = this.internalChecked; // update the checkbox's checked property\n    }\n  }\n\n  @Watch('error')\n  errorChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.ifxError.emit(newValue);\n    }\n  }\n\n  @Watch('indeterminate')\n  indeterminateChanged(newValue: boolean, oldValue: boolean) {\n    if (newValue !== oldValue) {\n      this.internalIndeterminate = newValue;\n      this.inputElement.indeterminate = this.internalIndeterminate; // update the checkbox's indeterminate property\n    }\n  }\n\n  handleKeydown(event) {\n    // Keycode 32 corresponds to the Space key, 13 corresponds to the Enter key\n    if (event.keyCode === 32 || event.keyCode === 13) {\n      this.handleCheckbox();\n      event.preventDefault();  // prevent the default action when space or enter is pressed\n    }\n  }\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    this.internalIndeterminate = this.indeterminate;\n  }\n\n  componentDidRender() {\n    this.inputElement.indeterminate = this.internalIndeterminate;\n  }\n\n  /**\n   * Callback for form association.\n   * Called whenever the form is reset.\n   */\n  formResetCallback() {\n    this.internals.setFormValue(null);\n  }\n\n  getCheckedClassName() {\n    if (this.error) {\n      if (this.internalChecked) {\n        return \"checked error\"\n      } else {\n        return \"error\"\n      }\n    } else if (this.internalChecked) {\n      return \"checked\";\n    } else return \"\"\n  }\n\n  render() {\n    const slot = this.el.innerHTML;\n    let hasSlot = false;\n    if (slot) {\n      hasSlot = true;\n    }\n    return (\n      <div class=\"checkbox__container\">\n        <input\n          type=\"checkbox\"\n          hidden\n          ref={(el) => (this.inputElement = el)}\n          checked={this.internalChecked}\n          onChange={this.handleCheckbox.bind(this)} // Listen for changes here\n          id='checkbox'\n          value={`${this.value}`}\n          disabled={this.disabled ? true : undefined}\n        />\n        <div\n          tabindex=\"0\"\n          onClick={this.handleCheckbox.bind(this)}\n          onKeyDown={this.handleKeydown.bind(this)}\n          role=\"checkbox\"\n          aria-checked={this.indeterminate ? 'mixed' : this.internalChecked.toString()}\n          aria-disabled={this.disabled}\n          aria-labelledby=\"label\"\n          class={`checkbox__wrapper \n          ${this.getCheckedClassName()}\n        ${this.size === \"m\" ? \"checkbox-m\" : \"\"}\n        ${this.indeterminate ? 'indeterminate' : \"\"}\n        ${this.disabled ? 'disabled' : \"\"}`}\n        >\n          {this.internalChecked && !this.internalIndeterminate && <ifx-icon icon=\"check-12\" aria-hidden=\"true\"></ifx-icon>}\n        </div>\n        {hasSlot &&\n          <div id=\"label\" class={`label ${this.size === \"m\" ? \"label-m\" : \"\"} ${this.disabled ? 'disabled' : \"\"} `} onClick={this.handleCheckbox.bind(this)}>\n            <slot />\n          </div>}\n      </div>\n    );\n  }\n}"],"version":3}

package/dist/components/{p-bef5241a.js → p-4db82ee0.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './p-2cc378b8.js';
-import { d as defineCustomElement$1 } from './p-35d83f23.js';
+import { d as defineCustomElement$1 } from './p-e7551b24.js';
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -6831,7 +6831,7 @@ function isJSONParseable(str) {
     }
 }
 
-const selectCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.ifx-select-container{box-sizing:border-box;font-family:var(--ifx-font-family);}.ifx-select-container.small-select{height:36px}.ifx-select-container.medium-select{height:40px}.ifx-select-container:hover{cursor:pointer}.ifx-select-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%;overflow:hidden}.ifx-select-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%;overflow:hidden}.ifx-select-container .ifx-choices__wrapper{background-color:#FFFFFF;box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;font-weight:400;font-style:normal;width:100%}.ifx-select-container .ifx-choices__wrapper .choices{flex-grow:1;overflow:hidden}.ifx-select-container .ifx-choices__wrapper .single__select-icon-container{display:flex;align-items:center;margin-left:auto}.ifx-select-container .ifx-choices__wrapper.small-select{height:36px;line-height:20px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-select-container .ifx-choices__wrapper.medium-select{height:40px;line-height:24px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-select-container .ifx-choices__wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-select-container .ifx-choices__wrapper.disabled .ifx-choices__icon-wrapper-down:hover{cursor:default}.ifx-select-container .ifx-choices__wrapper.error{border-color:#CD002F}.ifx-select-container .ifx-choices__wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-select-container .ifx-choices__wrapper.active{border-color:#0A8276 !important}.ifx-select-container .ifx-choices__wrapper.active .ifx-choices__icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-select-container .ifx-choices__wrapper.active .ifx-choices__icon-wrapper-down{display:none}.ifx-select-container .ifx-choices__wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-select-container .ifx-choices__wrapper:focus-visible:not(.active):not(:active)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-select-container .ifx-choices__wrapper:focus:not(.active,:active):not(.disabled)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%)}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-up{display:none}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-up:hover{cursor:pointer}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-down:hover{cursor:pointer}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-delete{display:flex;align-items:center;justify-content:center}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-delete.hide{display:none}.ifx-select-container .choices{width:100%}.ifx-select-container .choices:focus{outline:none}.choices .ifx-select-container.is-focused{outline:none}.ifx-select-container .choices:last-child{margin-bottom:0}.ifx-select-container .choices.is-disabled .choices__inner,.ifx-select-container .choices.is-disabled .choices__input{cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-select-container .choices.is-disabled .choices__item{cursor:default;color:#575352}.ifx-select-container .choices [hidden]{display:none !important}.ifx-select-container .choices[data-type*=select-one]{cursor:pointer}.ifx-select-container .choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:8px 16px;border-bottom:1px solid #8D8786;background-color:#ffffff;margin:0;font-style:normal;font-weight:400}.ifx-select-container .choices[data-type*=select-one] .choices__input.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-select-container .choices[data-type*=select-one] .choices__input.medium-select{font-size:1rem;line-height:1.5rem}.ifx-select-container .choices[data-type*=select-one] .choices__single-button{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:0.5}.ifx-select-container .choices[data-type*=select-one] .choices__single-button:hover,.ifx-select-container .choices[data-type*=select-one] .choices__single-button:focus{opacity:1}.ifx-select-container .choices[data-type*=select-one] .choices__single-button:focus{box-shadow:0px 0px 0px 2px #0A8276}.ifx-select-container .choices[data-type*=select-one] .choices__item[data-value=\"\"] .choices__single-button{display:none}.ifx-select-container .choices[data-type*=select-one].is-open:after{margin-top:-7.5px}.ifx-select-container .choices[data-type*=select-one][dir=rtl]:after{left:11.5px;right:auto}.ifx-select-container .choices[data-type*=select-one][dir=rtl] .choices__single-button{right:auto;left:0;margin-left:25px;margin-right:0}.ifx-select-container .choices[data-type*=select-multiple]{cursor:pointer}.ifx-select-container .choices[data-type*=select-multiple] .choices__input{display:block;width:100%;margin:0}.ifx-select-container .choices[data-type*=select-multiple] .choices__inner,.ifx-select-container .choices[data-type*=text] .choices__inner{cursor:text}.ifx-select-container .choices[data-type*=select-multiple] .choices__button,.ifx-select-container .choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin-top:0;margin-right:-4px;margin-bottom:0;margin-left:8px;padding-left:16px;border-left:1px solid #0A8276;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);background-size:8px;width:8px;line-height:1;opacity:0.75;border-radius:0}.ifx-select-container .choices[data-type*=select-multiple] .choices__button:hover,.ifx-select-container .choices[data-type*=select-multiple] .choices__button:focus,.ifx-select-container .choices[data-type*=text] .choices__button:hover,.ifx-select-container .choices[data-type*=text] .choices__button:focus{opacity:1}.ifx-select-container .choices__inner{overflow:hidden}.ifx-select-container .choices__inner .choices__list .choices__item span{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-select-container .is-focused .choices__inner,.ifx-select-container .is-open .choices__inner{border-color:#b7b7b7}.ifx-select-container .is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.ifx-select-container .is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.ifx-select-container .choices__list{margin:0;padding-left:0;list-style:none}.ifx-select-container .choices__list--single .choices__item{width:100%;display:flex;justify-content:space-between}.ifx-select-container .disabled>.choices__list--single .choices__item[data-value=\"\"]{color:#8D8786;}.ifx-select-container .choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:0.75rem;line-height:1rem;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#0A8276;border:1px solid #0A8276;color:#FFFFFF;word-break:break-all;box-sizing:border-box}.ifx-select-container .choices__list--multiple .choices__item[data-deletable]{padding-right:5px}.ifx-select-container [dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.ifx-select-container .choices__list--multiple .choices__item.is-highlighted{background-color:#EEEDED;border:1px solid #0A8276}.ifx-select-container .choices__list--dropdown{display:none;visibility:hidden;box-sizing:border-box;position:absolute;width:100%;background-color:#fff;top:100%;margin-top:-1px;overflow:hidden;word-break:break-all;will-change:visibility;box-shadow:0px 0px 16px rgba(29, 29, 29, 0.12);border-radius:1px;margin-top:8px;z-index:1000;left:0}.ifx-select-container .choices__list--dropdown.is-active{display:block;visibility:visible}.ifx-select-container .is-open .choices__list--dropdown{border-color:#b7b7b7}.ifx-select-container .is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:0.25rem 0.25rem 0 0}.ifx-select-container .choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.ifx-select-container .choices__list--dropdown .choices__item{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;justify-content:space-between;font-style:normal;font-weight:400}.ifx-select-container .choices__list--dropdown .choices__item.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-select-container .choices__list--dropdown .choices__item.medium-select{font-size:1rem;line-height:1.5rem}.ifx-select-container .choices__list--dropdown .choices__item.selected{color:#0A8276}.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item{text-align:right}@media (min-width: 640px){.ifx-select-container .choices__list--dropdown .choices__item--selectable:after{font-size:0.75rem;line-height:1rem;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item--selectable{text-align:right;padding-left:100px;padding-right:10px}.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item--selectable:after{right:auto;left:10px}}.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#EEEDED}.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted.selected{color:#0A8276}.ifx-select-container .choices__list--dropdown .choices__item--selectable:hover{background-color:#EEEDED}.ifx-select-container .choices__list--dropdown .choices__item--selectable:hover.selected{color:#0A8276}.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:0.5}.ifx-select-container .choices__item{cursor:default}.ifx-select-container .choices__item--selectable{cursor:pointer}.ifx-select-container .choices__item--disabled{cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none;opacity:0.5}.ifx-select-container .choices__heading{font-weight:600;font-size:0.75rem;line-height:1rem;padding:10px;border-bottom:1px solid #f7f7f7;color:#1D1D1D}.ifx-select-container .choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.ifx-select-container .choices__button:focus{outline:none}.ifx-select-container .choices__single-button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer;visibility:hidden}.ifx-select-container .choices__single-button:focus{outline:none}.ifx-select-container .choices__input{display:inline-block;vertical-align:baseline;background-color:#f9f9f9;font-size:0.875rem;line-height:1.25rem;margin-bottom:5px;border:0;border-radius:0;max-width:100%}.ifx-select-container .choices__input--cloned{background-color:transparent}.ifx-select-container .choices__input::-ms-clear{display:none;width:0;height:0}.ifx-select-container .choices__input::-ms-reveal{display:none;width:0;height:0}.ifx-select-container .choices__input::-webkit-search-decoration,.ifx-select-container .choices__input::-webkit-search-cancel-button,.ifx-select-container .choices__input::-webkit-search-results-button,.ifx-select-container .choices__input::-webkit-search-results-decoration{display:none}.ifx-select-container .choices__input:focus{outline:0}.ifx-select-container [dir=rtl] .choices__input{padding-right:2px;padding-left:0}.ifx-select-container .choices__placeholder{opacity:0.5}";
+const selectCss = ":root{--ifx-font-family:\"Source Sans 3\";font-family:var(--ifx-font-family, sans-serif)}.ifx-select-container{box-sizing:border-box;font-family:var(--ifx-font-family, Source Sans 3);}.ifx-select-container.small-select{height:36px}.ifx-select-container.medium-select{height:40px}.ifx-select-container:hover{cursor:pointer}.ifx-select-container .ifx-label-wrapper{font-size:1rem;line-height:1.5rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%;overflow:hidden}.ifx-select-container .ifx-error-message-wrapper{color:#CD002F;font-size:0.75rem;line-height:1rem;white-space:pre-wrap;word-wrap:break-word;overflow-wrap:anywhere;max-width:100%;overflow:hidden}.ifx-select-container .ifx-choices__wrapper{background-color:#FFFFFF;box-sizing:border-box;position:relative;display:flex;align-items:center;border:1px solid #8D8786;border-radius:1px;font-weight:400;font-style:normal;width:100%}.ifx-select-container .ifx-choices__wrapper .choices{flex-grow:1;overflow:hidden}.ifx-select-container .ifx-choices__wrapper .single__select-icon-container{display:flex;align-items:center;margin-left:auto}.ifx-select-container .ifx-choices__wrapper.small-select{height:36px;line-height:20px;padding:8px 12px;font-size:0.875rem;line-height:1.25rem}.ifx-select-container .ifx-choices__wrapper.medium-select{height:40px;line-height:24px;padding:8px 16px;font-size:1rem;line-height:1.5rem}.ifx-select-container .ifx-choices__wrapper.disabled{background:#EEEDED;color:#575352;border-color:#575352;cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-select-container .ifx-choices__wrapper.disabled .ifx-choices__icon-wrapper-down:hover{cursor:default}.ifx-select-container .ifx-choices__wrapper.error{border-color:#CD002F}.ifx-select-container .ifx-choices__wrapper:hover:not(.focus,:focus){border-color:#575352}.ifx-select-container .ifx-choices__wrapper.active{border-color:#0A8276 !important}.ifx-select-container .ifx-choices__wrapper.active .ifx-choices__icon-wrapper-up{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-select-container .ifx-choices__wrapper.active .ifx-choices__icon-wrapper-down{display:none}.ifx-select-container .ifx-choices__wrapper:focus-visible:not(.active):not(:active){outline:none}.ifx-select-container .ifx-choices__wrapper:focus-visible:not(.active):not(:active)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%);border:2px solid #0A8276;border-radius:2px}.ifx-select-container .ifx-choices__wrapper:focus:not(.active,:active):not(.disabled)::before{content:\"\";position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);top:50%;left:50%;transform:translate(-50%, -50%)}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-up{display:none}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-up:hover{cursor:pointer}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-down{display:flex;align-items:center;justify-content:center;padding-left:8px}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-down:hover{cursor:pointer}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-delete{display:flex;align-items:center;justify-content:center}.ifx-select-container .ifx-choices__wrapper .ifx-choices__icon-wrapper-delete.hide{display:none}.ifx-select-container .choices{width:100%}.ifx-select-container .choices:focus{outline:none}.choices .ifx-select-container.is-focused{outline:none}.ifx-select-container .choices:last-child{margin-bottom:0}.ifx-select-container .choices.is-disabled .choices__inner,.ifx-select-container .choices.is-disabled .choices__input{cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ifx-select-container .choices.is-disabled .choices__item{cursor:default;color:#575352}.ifx-select-container .choices [hidden]{display:none !important}.ifx-select-container .choices[data-type*=select-one]{cursor:pointer}.ifx-select-container .choices[data-type*=select-one] .choices__input{display:block;width:100%;padding:8px 16px;border-bottom:1px solid #8D8786;background-color:#ffffff;margin:0;font-style:normal;font-weight:400}.ifx-select-container .choices[data-type*=select-one] .choices__input.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-select-container .choices[data-type*=select-one] .choices__input.medium-select{font-size:1rem;line-height:1.5rem}.ifx-select-container .choices[data-type*=select-one] .choices__single-button{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);padding:0;background-size:8px;position:absolute;top:50%;right:0;margin-top:-10px;margin-right:25px;height:20px;width:20px;border-radius:10em;opacity:0.5}.ifx-select-container .choices[data-type*=select-one] .choices__single-button:hover,.ifx-select-container .choices[data-type*=select-one] .choices__single-button:focus{opacity:1}.ifx-select-container .choices[data-type*=select-one] .choices__single-button:focus{box-shadow:0px 0px 0px 2px #0A8276}.ifx-select-container .choices[data-type*=select-one] .choices__item[data-value=\"\"] .choices__single-button{display:none}.ifx-select-container .choices[data-type*=select-one].is-open:after{margin-top:-7.5px}.ifx-select-container .choices[data-type*=select-one][dir=rtl]:after{left:11.5px;right:auto}.ifx-select-container .choices[data-type*=select-one][dir=rtl] .choices__single-button{right:auto;left:0;margin-left:25px;margin-right:0}.ifx-select-container .choices[data-type*=select-multiple]{cursor:pointer}.ifx-select-container .choices[data-type*=select-multiple] .choices__input{display:block;width:100%;margin:0}.ifx-select-container .choices[data-type*=select-multiple] .choices__inner,.ifx-select-container .choices[data-type*=text] .choices__inner{cursor:text}.ifx-select-container .choices[data-type*=select-multiple] .choices__button,.ifx-select-container .choices[data-type*=text] .choices__button{position:relative;display:inline-block;margin-top:0;margin-right:-4px;margin-bottom:0;margin-left:8px;padding-left:16px;border-left:1px solid #0A8276;background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjRkZGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);background-size:8px;width:8px;line-height:1;opacity:0.75;border-radius:0}.ifx-select-container .choices[data-type*=select-multiple] .choices__button:hover,.ifx-select-container .choices[data-type*=select-multiple] .choices__button:focus,.ifx-select-container .choices[data-type*=text] .choices__button:hover,.ifx-select-container .choices[data-type*=text] .choices__button:focus{opacity:1}.ifx-select-container .choices__inner{overflow:hidden}.ifx-select-container .choices__inner .choices__list .choices__item span{flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ifx-select-container .is-focused .choices__inner,.ifx-select-container .is-open .choices__inner{border-color:#b7b7b7}.ifx-select-container .is-open .choices__inner{border-radius:2.5px 2.5px 0 0}.ifx-select-container .is-flipped.is-open .choices__inner{border-radius:0 0 2.5px 2.5px}.ifx-select-container .choices__list{margin:0;padding-left:0;list-style:none}.ifx-select-container .choices__list--single .choices__item{width:100%;display:flex;justify-content:space-between}.ifx-select-container .disabled>.choices__list--single .choices__item[data-value=\"\"]{color:#8D8786;}.ifx-select-container .choices__list--multiple .choices__item{display:inline-block;vertical-align:middle;border-radius:20px;padding:4px 10px;font-size:0.75rem;line-height:1rem;font-weight:500;margin-right:3.75px;margin-bottom:3.75px;background-color:#0A8276;border:1px solid #0A8276;color:#FFFFFF;word-break:break-all;box-sizing:border-box}.ifx-select-container .choices__list--multiple .choices__item[data-deletable]{padding-right:5px}.ifx-select-container [dir=rtl] .choices__list--multiple .choices__item{margin-right:0;margin-left:3.75px}.ifx-select-container .choices__list--multiple .choices__item.is-highlighted{background-color:#EEEDED;border:1px solid #0A8276}.ifx-select-container .choices__list--dropdown{display:none;visibility:hidden;box-sizing:border-box;position:absolute;width:100%;background-color:#fff;top:100%;margin-top:-1px;overflow:hidden;word-break:break-all;will-change:visibility;box-shadow:0px 0px 16px rgba(29, 29, 29, 0.12);border-radius:1px;margin-top:8px;z-index:1000;left:0}.ifx-select-container .choices__list--dropdown.is-active{display:block;visibility:visible}.ifx-select-container .is-open .choices__list--dropdown{border-color:#b7b7b7}.ifx-select-container .is-flipped .choices__list--dropdown{top:auto;bottom:100%;margin-top:0;margin-bottom:-1px;border-radius:0.25rem 0.25rem 0 0}.ifx-select-container .choices__list--dropdown .choices__list{position:relative;max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;will-change:scroll-position}.ifx-select-container .choices__list--dropdown .choices__item{position:relative;padding:8px 16px;gap:8px;align-items:center;display:flex;justify-content:space-between;font-style:normal;font-weight:400}.ifx-select-container .choices__list--dropdown .choices__item.small-select{font-size:0.875rem;line-height:1.25rem}.ifx-select-container .choices__list--dropdown .choices__item.medium-select{font-size:1rem;line-height:1.5rem}.ifx-select-container .choices__list--dropdown .choices__item.selected{color:#0A8276}.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item{text-align:right}@media (min-width: 640px){.ifx-select-container .choices__list--dropdown .choices__item--selectable:after{font-size:0.75rem;line-height:1rem;opacity:0;position:absolute;right:10px;top:50%;transform:translateY(-50%)}.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item--selectable{text-align:right;padding-left:100px;padding-right:10px}.ifx-select-container [dir=rtl] .choices__list--dropdown .choices__item--selectable:after{right:auto;left:10px}}.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted{background-color:#EEEDED}.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted.selected{color:#0A8276}.ifx-select-container .choices__list--dropdown .choices__item--selectable:hover{background-color:#EEEDED}.ifx-select-container .choices__list--dropdown .choices__item--selectable:hover.selected{color:#0A8276}.ifx-select-container .choices__list--dropdown .choices__item--selectable.is-highlighted:after{opacity:0.5}.ifx-select-container .choices__item{cursor:default}.ifx-select-container .choices__item--selectable{cursor:pointer}.ifx-select-container .choices__item--disabled{cursor:default;-webkit-user-select:none;-ms-user-select:none;user-select:none;opacity:0.5}.ifx-select-container .choices__heading{font-weight:600;font-size:0.75rem;line-height:1rem;padding:10px;border-bottom:1px solid #f7f7f7;color:#1D1D1D}.ifx-select-container .choices__button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer}.ifx-select-container .choices__button:focus{outline:none}.ifx-select-container .choices__single-button{text-indent:-9999px;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;background-color:transparent;background-repeat:no-repeat;background-position:center;cursor:pointer;visibility:hidden}.ifx-select-container .choices__single-button:focus{outline:none}.ifx-select-container .choices__input{display:inline-block;vertical-align:baseline;background-color:#f9f9f9;font-size:0.875rem;line-height:1.25rem;margin-bottom:5px;border:0;border-radius:0;max-width:100%}.ifx-select-container .choices__input--cloned{background-color:transparent}.ifx-select-container .choices__input::-ms-clear{display:none;width:0;height:0}.ifx-select-container .choices__input::-ms-reveal{display:none;width:0;height:0}.ifx-select-container .choices__input::-webkit-search-decoration,.ifx-select-container .choices__input::-webkit-search-cancel-button,.ifx-select-container .choices__input::-webkit-search-results-button,.ifx-select-container .choices__input::-webkit-search-results-decoration{display:none}.ifx-select-container .choices__input:focus{outline:0}.ifx-select-container [dir=rtl] .choices__input{padding-right:2px;padding-left:0}.ifx-select-container .choices__placeholder{opacity:0.5}";
 const IfxSelectStyle0 = selectCss;
 
 const Choices = /*@__PURE__*/ proxyCustomElement(class Choices extends H {
@@ -7055,9 +7055,9 @@ const Choices = /*@__PURE__*/ proxyCustomElement(class Choices extends H {
         // destroy choices element to restore previous dom structure
         // so vdom can replace the element correctly
         this.destroy();
-        return (h("div", { key: 'd1084afed1846d9318dc8197686dba20012ae2a5', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: 'bf90f1b486e2b0e85adcc1ec65cf5bb1851defc3', class: `${choicesWrapperClass} 
+        return (h("div", { key: '4c8d53aa45b4271d4605d53fab95930cfa238e41', class: `ifx-select-container` }, this.label ? (h("div", { class: "ifx-label-wrapper" }, h("span", null, this.label))) : null, h("div", { key: 'dd8a78c93962d3a2c23cb9166b1790f1aa52b0d2', class: `${choicesWrapperClass} 
             ${this.disabled ? 'disabled' : ''} 
-            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : (e) => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '285000685100dd8cf19f71fbf7b7796a99b6d925', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '9046acceca10d77f7e3b944b6a08f0ebd7d5135b', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '429c3bf05d709ed77af0b2428ea8cde1767c5c7a', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '2df6b18d6aa7ffdefc285931f8715b4e1c430845', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '45426b047419d3cc73085b998c5753bfd4ee36b7', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: 'fce02b9aab8cef05106c3da223019786821a6273', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
+            ${this.error ? 'error' : ''}`, onClick: this.disabled ? undefined : (e) => this.handleWrapperClick(e), onKeyDown: event => this.handleKeyDown(event) }, h("select", Object.assign({ key: '79659e3d6add1302f4b311f1b911dd8f6a472718', class: 'single__select-input-field', disabled: this.disabled }, attributes, { "data-trigger": true, onChange: () => this.handleChange() }), this.createSelectOptions(this.options)), h("div", { key: '8ed023feb5d55c75083dc43403c3c3365d58fcd2', class: "single__select-icon-container" }, this.optionIsSelected && (h("div", { key: '40b5fbb5bb07bd23aa49c2f0485855e6f9604cf7', class: "ifx-choices__icon-wrapper-delete" }, h("ifx-icon", { key: '81ecbe40f43c555df8990ce2a393170193e5c6d7', icon: "cremove16", onClick: () => this.handleDeleteSelection() }))), h("div", { key: '2aabe5ee5ecce1ff833e26c62b514f41209cef5b', class: "ifx-choices__icon-wrapper-up" }, h("ifx-icon", { key: "icon-up", icon: "chevronup-16" })), h("div", { key: 'b89f70067c4da987d24eb9da9835287e94819d3a', class: "ifx-choices__icon-wrapper-down" }, h("ifx-icon", { key: "icon-down", icon: "chevron-down-16" })))), this.error ? (h("div", { class: "ifx-error-message-wrapper" }, h("span", null, this.errorMessage))) : null));
     }
     toggleDropdown() {
         const div = this.root.querySelector('.ifx-choices__wrapper');
@@ -7382,4 +7382,4 @@ function defineCustomElement() {
 
 export { Choices as C, defineCustomElement as d };
 
-//# sourceMappingURL=p-bef5241a.js.map
+//# sourceMappingURL=p-4db82ee0.js.map