@siemens/ix 0.0.0-pr-1318-20240627080522 → 0.0.0-pr-1373-20240705054533

package/dist/siemens-ix/p-42c66a44.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["async","shouldSuppressInternalValidation","host","getAssociatedFormElement","form","noValidate","createClassMutationObserver","element","callback","options","observer","MutationObserver","observe","subtree","includeChildren","childList","attributes","attributeFilter","destroy","disconnect","containsClass","hostElement","className","classList","contains","querySelector","checkFieldClasses","isInvalid","isInvalidByRequired","isValid","isInfo","isWarning","HookValidationLifecycle","proto","methodName","checkIfRequiredFunction","classMutationObserver","componentWillLoad","disconnectedCallback","connectedCallback","getElement","this","skipValidation","hasValidValue","hasValue","required","toggle","remove","getValidityState","validityState","Object","keys","filter","key","includes","forEach","addEventListener","setTimeout","call","result","removeEventListener"],"sources":["src/components/utils/field/validation.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { getElement } from '@stencil/core';\nimport { HTMLIxFormComponentElement, IxFormComponent } from '.';\nimport { IxComponent } from '../internal';\n\nexport type ClassMutationObserver = {\n  destroy: () => void;\n};\n\nexport async function shouldSuppressInternalValidation(\n  host: IxFormComponent<unknown>\n) {\n  if (\n    host.getAssociatedFormElement &&\n    typeof host.getAssociatedFormElement === 'function'\n  ) {\n    const form = await host.getAssociatedFormElement();\n\n    if (!form) {\n      return false;\n    }\n\n    return form.noValidate;\n  }\n\n  return false;\n}\n\nexport function createClassMutationObserver(\n  element: HTMLElement,\n  callback: () => void,\n  options?: {\n    includeChildren?: boolean;\n  }\n): ClassMutationObserver {\n  const observer = new MutationObserver(callback);\n  observer.observe(element, {\n    subtree: options?.includeChildren,\n    childList: options?.includeChildren,\n    attributes: true,\n    attributeFilter: ['class'],\n  });\n\n  return {\n    destroy() {\n      observer.disconnect();\n    },\n  };\n}\n\nexport type ValidationResultProperty =\n  | 'isInvalid'\n  | 'isInvalidByRequired'\n  | 'isValid'\n  | 'isInfo'\n  | 'isWarning';\nexport type ValidationResults = Record<ValidationResultProperty, boolean>;\n\nfunction containsClass(\n  hostElement: HTMLIxFormComponentElement<unknown>,\n  className: string,\n  includeChildren: boolean\n) {\n  return (\n    hostElement.classList.contains(`${className}`) ||\n    (includeChildren ? !!hostElement.querySelector(`.${className}`) : false)\n  );\n}\n\nexport function checkFieldClasses(\n  hostElement: HTMLIxFormComponentElement<unknown>,\n  includeChildren = false\n): ValidationResults {\n  return {\n    isInvalid: containsClass(hostElement, 'ix-invalid', includeChildren),\n    isInvalidByRequired: containsClass(\n      hostElement,\n      'ix-invalid--required',\n      includeChildren\n    ),\n    isValid: containsClass(hostElement, 'ix-valid', includeChildren),\n    isInfo: containsClass(hostElement, 'ix-info', includeChildren),\n    isWarning: containsClass(hostElement, 'ix-warning', includeChildren),\n  };\n}\n\nexport function HookValidationLifecycle(options?: {\n  includeChildren?: boolean;\n}) {\n  return (proto: IxComponent, methodName: string) => {\n    let checkIfRequiredFunction: () => void;\n    let classMutationObserver: ClassMutationObserver | null;\n    const { componentWillLoad, disconnectedCallback, connectedCallback } =\n      proto;\n\n    proto.connectedCallback = function () {\n      const host = getElement(\n        this\n      ) as unknown as HTMLIxFormComponentElement<unknown>;\n\n      checkIfRequiredFunction = async () => {\n        const skipValidation = await shouldSuppressInternalValidation(host);\n        if (skipValidation) {\n          return;\n        }\n\n        if (host.hasValidValue && typeof host.hasValidValue === 'function') {\n          const hasValue = await host.hasValidValue();\n          if (host.required) {\n            host.classList.toggle('ix-invalid--required', !hasValue);\n          } else {\n            host.classList.remove('ix-invalid--required');\n          }\n        }\n\n        if (\n          host.getValidityState &&\n          typeof host.getValidityState === 'function'\n        ) {\n          const validityState = await host.getValidityState();\n          Object.keys(validityState)\n            // Use only the keys that are relevant for the validation state\n            // patternMismatch used for `ix-date-field`\n            .filter((key) => ['patternMismatch'].includes(key))\n            .forEach((key) => {\n              host.classList.toggle(`ix-invalid--${key}`, validityState[key]);\n            });\n        }\n      };\n\n      host.addEventListener('valueChange', checkIfRequiredFunction);\n      setTimeout(checkIfRequiredFunction);\n      return connectedCallback && connectedCallback.call(this);\n    };\n\n    proto.componentWillLoad = function () {\n      const host = getElement(\n        this\n      ) as unknown as HTMLIxFormComponentElement<unknown>;\n      classMutationObserver = createClassMutationObserver(\n        host,\n        () => {\n          const result = checkFieldClasses(host, options?.includeChildren);\n          proto[methodName].call(this, result);\n        },\n        options\n      );\n      const result = checkFieldClasses(host, options?.includeChildren);\n      proto[methodName].call(this, result);\n      return componentWillLoad && componentWillLoad.call(this);\n    };\n\n    proto.disconnectedCallback = function () {\n      const host = getElement(this);\n\n      if (host && classMutationObserver) {\n        classMutationObserver.destroy();\n        classMutationObserver = null;\n      }\n\n      if (host && checkIfRequiredFunction) {\n        host.removeEventListener('valueChange', checkIfRequiredFunction);\n      }\n\n      return disconnectedCallback && disconnectedCallback.call(this);\n    };\n  };\n}\n"],"mappings":"oCAgBOA,eAAeC,EACpBC,GAEA,GACEA,EAAKC,iCACED,EAAKC,2BAA6B,WACzC,CACA,MAAMC,QAAaF,EAAKC,2BAExB,IAAKC,EAAM,CACT,OAAO,K,CAGT,OAAOA,EAAKC,U,CAGd,OAAO,KACT,C,SAEgBC,EACdC,EACAC,EACAC,GAIA,MAAMC,EAAW,IAAIC,iBAAiBH,GACtCE,EAASE,QAAQL,EAAS,CACxBM,QAASJ,IAAO,MAAPA,SAAO,SAAPA,EAASK,gBAClBC,UAAWN,IAAO,MAAPA,SAAO,SAAPA,EAASK,gBACpBE,WAAY,KACZC,gBAAiB,CAAC,WAGpB,MAAO,CACL,OAAAC,GACER,EAASS,Y,EAGf,CAUA,SAASC,EACPC,EACAC,EACAR,GAEA,OACEO,EAAYE,UAAUC,SAAS,GAAGF,OACjCR,IAAoBO,EAAYI,cAAc,IAAIH,KAAe,MAEtE,C,SAEgBI,EACdL,EACAP,EAAkB,OAElB,MAAO,CACLa,UAAWP,EAAcC,EAAa,aAAcP,GACpDc,oBAAqBR,EACnBC,EACA,uBACAP,GAEFe,QAAST,EAAcC,EAAa,WAAYP,GAChDgB,OAAQV,EAAcC,EAAa,UAAWP,GAC9CiB,UAAWX,EAAcC,EAAa,aAAcP,GAExD,C,SAEgBkB,EAAwBvB,GAGtC,MAAO,CAACwB,EAAoBC,KAC1B,IAAIC,EACJ,IAAIC,EACJ,MAAMC,kBAAEA,EAAiBC,qBAAEA,EAAoBC,kBAAEA,GAC/CN,EAEFA,EAAMM,kBAAoB,WACxB,MAAMrC,EAAOsC,EACXC,MAGFN,EAA0BnC,UACxB,MAAM0C,QAAuBzC,EAAiCC,GAC9D,GAAIwC,EAAgB,CAClB,M,CAGF,GAAIxC,EAAKyC,sBAAwBzC,EAAKyC,gBAAkB,WAAY,CAClE,MAAMC,QAAiB1C,EAAKyC,gBAC5B,GAAIzC,EAAK2C,SAAU,CACjB3C,EAAKqB,UAAUuB,OAAO,wBAAyBF,E,KAC1C,CACL1C,EAAKqB,UAAUwB,OAAO,uB,EAI1B,GACE7C,EAAK8C,yBACE9C,EAAK8C,mBAAqB,WACjC,CACA,MAAMC,QAAsB/C,EAAK8C,mBACjCE,OAAOC,KAAKF,GAGTG,QAAQC,GAAQ,CAAC,mBAAmBC,SAASD,KAC7CE,SAASF,IACRnD,EAAKqB,UAAUuB,OAAO,eAAeO,IAAOJ,EAAcI,GAAK,G,GAKvEnD,EAAKsD,iBAAiB,cAAerB,GACrCsB,WAAWtB,GACX,OAAOI,GAAqBA,EAAkBmB,KAAKjB,K,EAGrDR,EAAMI,kBAAoB,WACxB,MAAMnC,EAAOsC,EACXC,MAEFL,EAAwB9B,EACtBJ,GACA,KACE,MAAMyD,EAASjC,EAAkBxB,EAAMO,IAAO,MAAPA,SAAO,SAAPA,EAASK,iBAChDmB,EAAMC,GAAYwB,KAAKjB,KAAMkB,EAAO,GAEtClD,GAEF,MAAMkD,EAASjC,EAAkBxB,EAAMO,IAAO,MAAPA,SAAO,SAAPA,EAASK,iBAChDmB,EAAMC,GAAYwB,KAAKjB,KAAMkB,GAC7B,OAAOtB,GAAqBA,EAAkBqB,KAAKjB,K,EAGrDR,EAAMK,qBAAuB,WAC3B,MAAMpC,EAAOsC,EAAWC,MAExB,GAAIvC,GAAQkC,EAAuB,CACjCA,EAAsBlB,UACtBkB,EAAwB,I,CAG1B,GAAIlC,GAAQiC,EAAyB,CACnCjC,EAAK0D,oBAAoB,cAAezB,E,CAG1C,OAAOG,GAAwBA,EAAqBoB,KAAKjB,K,CAC1D,CAEL,Q"}

package/dist/siemens-ix/p-4a335b55.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as i,H as t,g as s}from"./p-f86a894a.js";import{H as n}from"./p-42c66a44.js";const a=":host{display:block}";const d=a;var f=undefined&&undefined.__decorate||function(e,i,t,s){var n=arguments.length,a=n<3?i:s===null?s=Object.getOwnPropertyDescriptor(i,t):s,d;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(e,i,t,s);else for(var f=e.length-1;f>=0;f--)if(d=e[f])a=(n<3?d(a):n>3?d(i,t,a):d(i,t))||a;return n>3&&a&&Object.defineProperty(i,t,a),a};const l=class{constructor(i){e(this,i);this.required=false;this.label=undefined;this.helperText=undefined;this.infoText=undefined;this.warningText=undefined;this.invalidText=undefined;this.validText=undefined;this.showTextAsTooltip=undefined;this.isInvalid=false;this.isValid=false;this.isInfo=false;this.isWarning=false}updateValidationState({isInvalid:e,isValid:i,isInfo:t,isWarning:s}){this.isInvalid=e;this.isValid=i;this.isInfo=t;this.isWarning=s}render(){return i(t,{key:"8cd88436071cb1e86ffd0ae60b2a8e4d887e0ced"},i("ix-field-wrapper",{key:"c8af2e041a46a796294cc0dab48fc28431eeea09",label:this.label,helperText:this.helperText,infoText:this.infoText,warningText:this.warningText,invalidText:this.invalidText,validText:this.validText,showTextAsTooltip:this.showTextAsTooltip,isInvalid:this.isInvalid,isValid:this.isValid,isInfo:this.isInfo,isWarning:this.isWarning,required:this.required},i("slot",{key:"13677ef3d54cc08f52e99671d3e368bd7291d73a",name:"label",slot:"label"}),i("slot",{key:"a930518f66ff298d4b9595316bb41135e6261fd4"})))}get hostElement(){return s(this)}};f([n({includeChildren:true})],l.prototype,"updateValidationState",null);l.style=d;export{l as ix_custom_field};
-//# sourceMappingURL=p-4a335b55.entry.js.map

package/dist/siemens-ix/p-4a335b55.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["customFieldCss","IxCustomFieldStyle0","CustomField","updateValidationState","isInvalid","isValid","isInfo","isWarning","this","render","h","Host","key","label","helperText","infoText","warningText","invalidText","validText","showTextAsTooltip","required","name","slot","__decorate","HookValidationLifecycle","includeChildren"],"sources":["src/components/custom-field/custom-field.scss?tag=ix-custom-field&encapsulation=shadow","src/components/custom-field/custom-field.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n  display: block;\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Host, Prop, State, h, Element } from '@stencil/core';\nimport {\n  FieldWrapperInterface,\n  HookValidationLifecycle,\n  IxFormValidationState,\n  ValidationResults,\n} from '../utils/field';\nimport { IxComponent } from '../utils/internal';\n\n/**\n * @since 2.4.0\n */\n@Component({\n  tag: 'ix-custom-field',\n  styleUrl: 'custom-field.scss',\n  shadow: true,\n})\nexport class CustomField\n  implements FieldWrapperInterface, IxFormValidationState, IxComponent\n{\n  @Element() hostElement!: HTMLIxCustomFieldElement;\n  /**\n   * A value is required or must be checked for the form to be submittable\n   */\n  @Prop() required: boolean = false;\n\n  /**\n   * Label for the field component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Show text below the field component which show additional information\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Info text for the field component\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Warning text for the field component\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Error text for the field component\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Valid text for the field component\n   */\n  @Prop() validText?: string;\n\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  updateValidationState({\n    isInvalid,\n    isValid,\n    isInfo,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid;\n    this.isValid = isValid;\n    this.isInfo = isInfo;\n    this.isWarning = isWarning;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-field-wrapper\n          label={this.label}\n          helperText={this.helperText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          invalidText={this.invalidText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          required={this.required}\n        >\n          <slot name=\"label\" slot=\"label\"></slot>\n\n          <slot></slot>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,uBACvB,MAAAC,EAAeD,E,iXCyBFE,EAAW,M,uCAOM,M,sMAqCP,M,aACF,M,YACD,M,eACG,K,CAKrB,qBAAAC,EAAsBC,UACpBA,EAASC,QACTA,EAAOC,OACPA,EAAMC,UACNA,IAEAC,KAAKJ,UAAYA,EACjBI,KAAKH,QAAUA,EACfG,KAAKF,OAASA,EACdE,KAAKD,UAAYA,C,CAGnB,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,oBAAAE,IAAA,2CACEC,MAAOL,KAAKK,MACZC,WAAYN,KAAKM,WACjBC,SAAUP,KAAKO,SACfC,YAAaR,KAAKQ,YAClBC,YAAaT,KAAKS,YAClBC,UAAWV,KAAKU,UAChBC,kBAAmBX,KAAKW,kBACxBf,UAAWI,KAAKJ,UAChBC,QAASG,KAAKH,QACdC,OAAQE,KAAKF,OACbC,UAAWC,KAAKD,UAChBa,SAAUZ,KAAKY,UAEfV,EAAA,QAAAE,IAAA,2CAAMS,KAAK,QAAQC,KAAK,UAExBZ,EAAA,QAAAE,IAAA,8C,oCA/BRW,EAAA,CAHCC,EAAwB,CACvBC,gBAAiB,Q"}

package/dist/siemens-ix/p-50cae62d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as e,h as s,H as i,g as n}from"./p-f86a894a.js";import{m as c}from"./p-dead9c8e.js";const o=":host{display:contents}";const r=o;const a=class{constructor(s){t(this,s);this.itemClick=e(this,"itemClick",7);this.wrapperRef=c();this.icon=undefined;this.label=undefined}async getDropdownItemElement(){return this.wrapperRef.waitForCurrent()}render(){return s(i,{key:"67c94f23aecf74d819719ad2490ea4955a4f687b"},s("ix-dropdown-item",{key:"6781c392a05678c10cc636269c1a4185f26e6a82",ref:this.wrapperRef,suppressChecked:true,icon:this.icon,label:this.label,onItemClick:t=>{t.preventDefault();t.stopPropagation()},onClick:t=>this.itemClick.emit(t)}))}get hostElement(){return n(this)}};a.style=r;export{a as ix_split_button_item};
-//# sourceMappingURL=p-50cae62d.entry.js.map

package/dist/siemens-ix/p-53e62b51.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as n,H as a}from"./p-f86a894a.js";const t=":host{display:flex;justify-content:center;align-items:center;margin-inline-start:1.5rem;margin-inline-end:1.5rem;margin-block-end:0.25rem}:host slot::slotted(*){display:flex;margin-inline-end:0.625rem}";const r=t;const s=class{constructor(n){e(this,n)}render(){return n(a,{key:"340641a72961969a0718bd26bda9b4d2cfd269fb"},n("slot",{key:"66489fa79ac1ce69e3aa59ce89bc08208aad20d9"}))}};s.style=r;export{s as ix_dropdown_quick_actions};
-//# sourceMappingURL=p-53e62b51.entry.js.map

package/dist/siemens-ix/p-56d01130.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as o,h as t,H as r,g as a}from"./p-f86a894a.js";import{g as n,h as i}from"./p-da8517ed.js";import{H as l}from"./p-42c66a44.js";import{m as d}from"./p-dead9c8e.js";import{m as s,c,b,I as p,d as h,o as m,P as u,g as v}from"./p-cce7a3d5.js";import"./p-36c0f378.js";import"./p-71206084.js";const f="label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),input.ix-info:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid)}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--invalid--active) !important}label{color:var(--theme-color-soft-text);padding:2px 0px}label.label-alignment-left{padding:6px 0px}input{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,input:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,input:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}input:disabled::-moz-placeholder{color:transparent}input:disabled::placeholder{color:transparent}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea{padding:0.375rem 1.25rem 0.375rem 0.5rem}textarea{font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;min-height:2rem;width:100%;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow)}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).hover,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).hover,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):hover{border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only).focus,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:-moz-read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only).focus,textarea:not(.readonly):not([readonly]):not([readOnly]):not(:read-only):focus{outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:none;border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled{box-shadow:none;background-color:transparent;outline:none;border:none;color:var(--theme-input--color--disabled);border-bottom:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color-bottom--disabled)}textarea:disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder{color:transparent}textarea~.valid-feedback,textarea~.invalid-feedback,input~.valid-feedback,input~.invalid-feedback{display:none;font-feature-settings:\"clig\" off, \"liga\" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}form textarea~.valid-feedback,form input~.valid-feedback{color:var(--theme-color-success)}form textarea~.invalid-feedback,form input~.invalid-feedback{color:var(--theme-color-alarm-text)}form:not([novalidate]) :invalid,form:not([novalidate]) .is-invalid,form.was-validated :invalid,form.was-validated .is-invalid{background-color:var(--theme-input-error--background);border-color:var(--theme-input-error--border-color);background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='512px' height='512px' viewBox='0 0 512 512' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3C!-- Generator: sketchtool 62 (101010) - https://sketch.com --%3E%3Ctitle%3Eerror%3C/title%3E%3Cdesc%3ECreated with sketchtool.%3C/desc%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.75'%3E%3Cg id='error' fill='%23ff2640'%3E%3Cg id='error/error'%3E%3Cpath d='M256,42.6666667 C373.626371,42.6666667 469.333333,138.373627 469.333333,256 C469.333333,373.626371 373.626371,469.333333 256,469.333333 C138.373627,469.333333 42.6666667,373.626371 42.6666667,256 C42.6666667,138.373627 138.373627,42.6666667 256,42.6666667 Z M256,85.3333333 C161.559631,85.3333333 85.3333333,161.559631 85.3333333,256 C85.3333333,350.44037 161.559631,426.666667 256,426.666667 C350.44037,426.666667 426.666667,350.44037 426.666667,256 C426.666667,161.559631 350.44037,85.3333333 256,85.3333333 Z M326.248389,155.581722 L356.418278,185.751611 L286.168667,255.999667 L356.418278,326.248389 L326.248389,356.418278 L255.999667,286.168667 L185.751611,356.418278 L155.581722,326.248389 L225.829667,255.999667 L155.581722,185.751611 L185.751611,155.581722 L255.999667,225.829667 L326.248389,155.581722 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\") !important;background-position:left calc(0.375em + 0.1875rem) center;padding-right:0.75rem;padding-left:calc(1.5em + 0.75rem);background-size:18px;background-repeat:no-repeat}form:not([novalidate]) :invalid~.invalid-feedback,form:not([novalidate]) .is-invalid~.invalid-feedback,form.was-validated :invalid~.invalid-feedback,form.was-validated .is-invalid~.invalid-feedback{display:block}form:not([novalidate]) :valid~.valid-feedback,form:not([novalidate]) .is-valid~.valid-feedback,form.was-validated :valid~.valid-feedback,form.was-validated .is-valid~.valid-feedback{display:block}form:not(.was-validated) .invalid-feedback,form:not(.was-validated) .valid-feedback{display:none !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]),input.ix-info:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid)}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]){border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):hover{border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .input-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .prefix-container,:host .postfix-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .prefix-container{left:0.5rem}:host .postfix-container{right:0.5rem}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid)}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input{border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}:host .password-eye{margin-left:0.125rem;color:red}";const x=f;var g=undefined&&undefined.__decorate||function(e,o,t,r){var a=arguments.length,n=a<3?o:r===null?r=Object.getOwnPropertyDescriptor(o,t):r,i;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(e,o,t,r);else for(var l=e.length-1;l>=0;l--)if(i=e[l])n=(a<3?i(n):a>3?i(o,t,n):i(o,t))||n;return a>3&&n&&Object.defineProperty(o,t,n),n};let y=0;const k=class{constructor(t){e(this,t);this.valueChange=o(this,"valueChange",7);this.validityStateChange=o(this,"validityStateChange",7);this.ixBlur=o(this,"ixBlur",7);if(t.$hostElement$["s-ei"]){this.formInternals=t.$hostElement$["s-ei"]}else{this.formInternals=t.$hostElement$.attachInternals();t.$hostElement$["s-ei"]=this.formInternals}this.inputRef=d();this.postfixRef=d();this.prefixRef=d();this.textFieldId=`text-field-${y++}`;this.type="text";this.name=undefined;this.placeholder=undefined;this.value="";this.required=false;this.disabled=false;this.readonly=false;this.helperText=undefined;this.infoText=undefined;this.showTextAsTooltip=undefined;this.validText=undefined;this.warningText=undefined;this.label=undefined;this.invalidText=undefined;this.pattern=undefined;this.maxLength=undefined;this.minLength=undefined;this.allowedCharactersPattern=undefined;this.isInvalid=false;this.isValid=false;this.isInfo=false;this.isWarning=false;this.isInvalidByRequired=false;this.inputType="text"}updateClassMappings(e){s(this,e)}updateInputType(){this.inputType=this.type}componentWillLoad(){this.updateFormInternalValue(this.value);this.inputType=this.type}componentDidRender(){setTimeout((()=>this.updatePaddings()))}updatePaddings(){var e,o;const t=(e=this.prefixRef.current)===null||e===void 0?void 0:e.getBoundingClientRect();const r=(o=this.postfixRef.current)===null||o===void 0?void 0:o.getBoundingClientRect();if(t){c(this.inputRef.current,t.width,{postfix:false})}if(r){c(this.inputRef.current,r.width,{postfix:true})}}updateFormInternalValue(e){this.formInternals.setFormValue(e);this.value=e}async getAssociatedFormElement(){return this.formInternals.form}hasValidValue(){return Promise.resolve(!!this.value)}getNativeInputElement(){return this.inputRef.waitForCurrent()}render(){var e;const o=v(this);return t(r,{key:"69e94d66d7a3739e875d03bcdfd919ac92e7cf67",class:{disabled:this.disabled,readonly:this.readonly}},t("ix-field-wrapper",{key:"76b8f9940fa9e3f326bdbef1f75c24b9465dfc24",htmlForLabel:this.textFieldId,required:this.required,label:this.label,helperText:this.helperText,invalidText:this.invalidText,infoText:this.infoText,warningText:this.warningText,validText:this.validText,showTextAsTooltip:this.showTextAsTooltip,isInvalid:this.isInvalid,isValid:this.isValid,isInfo:this.isInfo,isWarning:this.isWarning,controlRef:this.inputRef},t("slot",{key:"be76706fe20f7ac88ff99884456f93f6dcbd96b4",name:"label",slot:"label"}),t("div",{key:"4f0381e2bc0c52b45058b9985b4a1b9c25e3791f",class:"input-wrapper"},t(b,{key:"b1811ecb3b2a26d80bfcee41ed91e25ff700c33f",prefixRef:this.prefixRef,onSlotChange:()=>this.updatePaddings()}),t(p,{key:"615ddcda6868bd0015bea4f4d2a2c7ee66cdc85c",id:this.textFieldId,readonly:this.readonly,disabled:this.disabled,maxLength:this.maxLength,minLength:this.minLength,pattern:this.pattern,type:this.inputType,isInvalid:this.isInvalid,required:this.required,value:this.value,placeholder:this.placeholder,inputRef:this.inputRef,onKeyPress:e=>h(this,e),valueChange:e=>this.valueChange.emit(e),updateFormInternalValue:e=>this.updateFormInternalValue(e),onBlur:()=>m(this,this.inputRef.current),ariaAttributes:o}),t(u,{key:"6a0651d8aa7ce74e93f9ab4b50783f2fac888666",postfixRef:this.postfixRef,onSlotChange:()=>this.updatePaddings()},this.type==="password"&&t("ix-icon-button",{key:"576f6283a6c05faa6ddae9c622ea358b2c026b0c",color:"color-weak-text",class:"password-eye",ghost:true,icon:this.inputType==="password"?n:i,onClick:()=>{if(this.inputType==="password"){this.inputType="text";return}this.inputType="password"}}))),this.maxLength&&t("ix-typography",{key:"09455f93522242114026a1bad75f7afc68229446",slot:"bottom-right",color:"weak"},(e=this.value)===null||e===void 0?void 0:e.length,"/",this.maxLength)))}static get formAssociated(){return true}get hostElement(){return a(this)}static get watchers(){return{type:["updateInputType"]}}};g([l()],k.prototype,"updateClassMappings",null);k.style=x;export{k as ix_text_field};
-//# sourceMappingURL=p-56d01130.entry.js.map

package/dist/siemens-ix/p-56d01130.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["textFieldCss","IxTextFieldStyle0","textFieldIds","TextField","this","inputRef","makeRef","postfixRef","prefixRef","textFieldId","updateClassMappings","result","mapValidationResult","updateInputType","inputType","type","componentWillLoad","updateFormInternalValue","value","componentDidRender","setTimeout","updatePaddings","prefixBoundingRect","_a","current","getBoundingClientRect","postfixBoundingRect","_b","applyPostfixPadding","width","postfix","formInternals","setFormValue","getAssociatedFormElement","form","hasValidValue","Promise","resolve","getNativeInputElement","waitForCurrent","render","inputAria","getAriaAttributesForInput","h","Host","key","class","disabled","readonly","htmlForLabel","required","label","helperText","invalidText","infoText","warningText","validText","showTextAsTooltip","isInvalid","isValid","isInfo","isWarning","controlRef","name","slot","PrefixSlot","onSlotChange","InputElement","id","maxLength","minLength","pattern","placeholder","onKeyPress","event","checkAllowedKeys","valueChange","emit","onBlur","onInputBlur","ariaAttributes","PostfixSlot","color","ghost","icon","iconEye","iconEyeCancelled","onClick","length","__decorate","HookValidationLifecycle"],"sources":["src/components/text-field/text-field.scss?tag=ix-text-field&encapsulation=shadow","src/components/text-field/text-field.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'components/form/input';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/validation/form-component';\n@import './text-field.mixins.scss';\n\n@include input-field;\n\n:host {\n  .password-eye {\n    margin-left: 0.125rem;\n    color: red;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { iconEye, iconEyeCancelled } from '@siemens/ix-icons/icons';\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n  h,\n} from '@stencil/core';\nimport { A11yAttributes } from '../utils/a11y';\nimport {\n  HookValidationLifecycle,\n  IxInputFieldComponent,\n  ValidationResults,\n} from '../utils/field';\nimport { makeRef } from '../utils/make-ref';\nimport { InputElement, PostfixSlot, PrefixSlot } from './input.fc';\nimport {\n  applyPostfixPadding,\n  checkAllowedKeys,\n  getAriaAttributesForInput,\n  mapValidationResult,\n  onInputBlur,\n} from './text-field.util';\n\nlet textFieldIds = 0;\n\n/**\n * @since 2.4.0\n * @form-ready 2.4.0\n */\n@Component({\n  tag: 'ix-text-field',\n  styleUrl: 'text-field.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class TextField implements IxInputFieldComponent<string> {\n  @Element() hostElement!: HTMLIxTextFieldElement;\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * The type of the text field. Possible values are 'text', 'email', or 'password'.\n   */\n  @Prop() type: 'text' | 'email' | 'password' = 'text';\n\n  /**\n   * The name of the text field.\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * The placeholder text for the text field.\n   */\n  @Prop({ reflect: true }) placeholder?: string;\n\n  /**\n   * The value of the text field.\n   */\n  @Prop({ reflect: true, mutable: true }) value: string = '';\n\n  /**\n   * Specifies whether the text field is required.\n   */\n  @Prop({ reflect: true }) required: boolean = false;\n\n  /**\n   * Specifies whether the text field is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Specifies whether the text field is readonly.\n   */\n  @Prop({ reflect: true }) readonly: boolean = false;\n\n  /**\n   * The helper text for the text field.\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * The info text for the text field.\n   */\n  @Prop() infoText?: string;\n\n  /**\n   * Specifies whether to show the text as a tooltip.\n   */\n  @Prop() showTextAsTooltip?: boolean;\n\n  /**\n   * The valid text for the text field.\n   */\n  @Prop() validText?: string;\n\n  /**\n   * The warning text for the text field.\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * The label for the text field.\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The error text for the text field.\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * The pattern for the text field.\n   */\n  @Prop() pattern?: string;\n\n  /**\n   * The maximum length of the text field.\n   */\n  @Prop() maxLength?: number;\n\n  /**\n   * The minimum length of the text field.\n   */\n  @Prop() minLength?: number;\n\n  /**\n   * The allowed characters pattern for the text field.\n   */\n  @Prop() allowedCharactersPattern?: string;\n\n  /**\n   * Event emitted when the value of the text field changes.\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the validity state of the text field changes.\n   */\n  @Event() validityStateChange!: EventEmitter<ValidityState>;\n\n  /**\n   * Event emitted when the text field loses focus.\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  @State() isInvalid = false;\n  @State() isValid = false;\n  @State() isInfo = false;\n  @State() isWarning = false;\n  @State() isInvalidByRequired = false;\n\n  @State() inputType = 'text';\n\n  private inputRef = makeRef<HTMLInputElement>();\n  private postfixRef = makeRef<HTMLDivElement>();\n  private prefixRef = makeRef<HTMLDivElement>();\n\n  private textFieldId = `text-field-${textFieldIds++}`;\n\n  @HookValidationLifecycle()\n  updateClassMappings(result: ValidationResults) {\n    mapValidationResult(this, result);\n  }\n\n  @Watch('type')\n  updateInputType() {\n    this.inputType = this.type;\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue(this.value);\n    this.inputType = this.type;\n  }\n\n  componentDidRender() {\n    setTimeout(() => this.updatePaddings());\n  }\n\n  private updatePaddings() {\n    const prefixBoundingRect = this.prefixRef.current?.getBoundingClientRect();\n    const postfixBoundingRect =\n      this.postfixRef.current?.getBoundingClientRect();\n\n    if (prefixBoundingRect) {\n      applyPostfixPadding(this.inputRef.current, prefixBoundingRect.width, {\n        postfix: false,\n      });\n    }\n\n    if (postfixBoundingRect) {\n      applyPostfixPadding(this.inputRef.current, postfixBoundingRect.width, {\n        postfix: true,\n      });\n    }\n  }\n\n  updateFormInternalValue(value: string) {\n    this.formInternals.setFormValue(value);\n    this.value = value;\n  }\n\n  /** @internal */\n  @Method()\n  async getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return this.formInternals.form;\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(!!this.value);\n  }\n\n  /**\n   * Returns the native input element used in the text field.\n   */\n  @Method()\n  getNativeInputElement() {\n    return this.inputRef.waitForCurrent();\n  }\n\n  render() {\n    const inputAria: A11yAttributes = getAriaAttributesForInput(this);\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n          readonly: this.readonly,\n        }}\n      >\n        <ix-field-wrapper\n          htmlForLabel={this.textFieldId}\n          required={this.required}\n          label={this.label}\n          helperText={this.helperText}\n          invalidText={this.invalidText}\n          infoText={this.infoText}\n          warningText={this.warningText}\n          validText={this.validText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isValid={this.isValid}\n          isInfo={this.isInfo}\n          isWarning={this.isWarning}\n          controlRef={this.inputRef}\n        >\n          <slot name=\"label\" slot=\"label\"></slot>\n          <div class=\"input-wrapper\">\n            <PrefixSlot\n              prefixRef={this.prefixRef}\n              onSlotChange={() => this.updatePaddings()}\n            ></PrefixSlot>\n            <InputElement\n              id={this.textFieldId}\n              readonly={this.readonly}\n              disabled={this.disabled}\n              maxLength={this.maxLength}\n              minLength={this.minLength}\n              pattern={this.pattern}\n              type={this.inputType}\n              isInvalid={this.isInvalid}\n              required={this.required}\n              value={this.value}\n              placeholder={this.placeholder}\n              inputRef={this.inputRef}\n              onKeyPress={(event) => checkAllowedKeys(this, event)}\n              valueChange={(value) => this.valueChange.emit(value)}\n              updateFormInternalValue={(value) =>\n                this.updateFormInternalValue(value)\n              }\n              onBlur={() => onInputBlur(this, this.inputRef.current)}\n              ariaAttributes={inputAria}\n            ></InputElement>\n            <PostfixSlot\n              postfixRef={this.postfixRef}\n              onSlotChange={() => this.updatePaddings()}\n            >\n              {this.type === 'password' && (\n                <ix-icon-button\n                  color=\"color-weak-text\"\n                  class={'password-eye'}\n                  ghost\n                  icon={\n                    this.inputType === 'password' ? iconEye : iconEyeCancelled\n                  }\n                  onClick={() => {\n                    if (this.inputType === 'password') {\n                      this.inputType = 'text';\n                      return;\n                    }\n\n                    this.inputType = 'password';\n                  }}\n                ></ix-icon-button>\n              )}\n            </PostfixSlot>\n          </div>\n          {this.maxLength && (\n            <ix-typography slot=\"bottom-right\" color=\"weak\">\n              {this.value?.length}/{this.maxLength}\n            </ix-typography>\n          )}\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8SAAA,MAAMA,EAAe,sr6BACrB,MAAAC,EAAeD,E,2WCsCf,IAAIE,EAAe,E,MAYNC,EAAS,M,sUAqHZC,KAAAC,SAAWC,IACXF,KAAAG,WAAaD,IACbF,KAAAI,UAAYF,IAEZF,KAAAK,YAAc,cAAcP,M,UAlHU,O,0DAeU,G,cAKX,M,cAKA,M,cAKA,M,uTAwExB,M,aACF,M,YACD,M,eACG,M,yBACU,M,eAEV,M,CASrB,mBAAAQ,CAAoBC,GAClBC,EAAoBR,KAAMO,E,CAI5B,eAAAE,GACET,KAAKU,UAAYV,KAAKW,I,CAGxB,iBAAAC,GACEZ,KAAKa,wBAAwBb,KAAKc,OAClCd,KAAKU,UAAYV,KAAKW,I,CAGxB,kBAAAI,GACEC,YAAW,IAAMhB,KAAKiB,kB,CAGhB,cAAAA,G,QACN,MAAMC,GAAqBC,EAAAnB,KAAKI,UAAUgB,WAAO,MAAAD,SAAA,SAAAA,EAAEE,wBACnD,MAAMC,GACJC,EAAAvB,KAAKG,WAAWiB,WAAO,MAAAG,SAAA,SAAAA,EAAEF,wBAE3B,GAAIH,EAAoB,CACtBM,EAAoBxB,KAAKC,SAASmB,QAASF,EAAmBO,MAAO,CACnEC,QAAS,O,CAIb,GAAIJ,EAAqB,CACvBE,EAAoBxB,KAAKC,SAASmB,QAASE,EAAoBG,MAAO,CACpEC,QAAS,M,EAKf,uBAAAb,CAAwBC,GACtBd,KAAK2B,cAAcC,aAAad,GAChCd,KAAKc,MAAQA,C,CAKf,8BAAMe,GACJ,OAAO7B,KAAK2B,cAAcG,I,CAK5B,aAAAC,GACE,OAAOC,QAAQC,UAAUjC,KAAKc,M,CAOhC,qBAAAoB,GACE,OAAOlC,KAAKC,SAASkC,gB,CAGvB,MAAAC,G,MACE,MAAMC,EAA4BC,EAA0BtC,MAE5D,OACEuC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,SAAU3C,KAAK2C,SACfC,SAAU5C,KAAK4C,WAGjBL,EAAA,oBAAAE,IAAA,2CACEI,aAAc7C,KAAKK,YACnByC,SAAU9C,KAAK8C,SACfC,MAAO/C,KAAK+C,MACZC,WAAYhD,KAAKgD,WACjBC,YAAajD,KAAKiD,YAClBC,SAAUlD,KAAKkD,SACfC,YAAanD,KAAKmD,YAClBC,UAAWpD,KAAKoD,UAChBC,kBAAmBrD,KAAKqD,kBACxBC,UAAWtD,KAAKsD,UAChBC,QAASvD,KAAKuD,QACdC,OAAQxD,KAAKwD,OACbC,UAAWzD,KAAKyD,UAChBC,WAAY1D,KAAKC,UAEjBsC,EAAA,QAAAE,IAAA,2CAAMkB,KAAK,QAAQC,KAAK,UACxBrB,EAAA,OAAAE,IAAA,2CAAKC,MAAM,iBACTH,EAACsB,EAAU,CAAApB,IAAA,2CACTrC,UAAWJ,KAAKI,UAChB0D,aAAc,IAAM9D,KAAKiB,mBAE3BsB,EAACwB,EAAY,CAAAtB,IAAA,2CACXuB,GAAIhE,KAAKK,YACTuC,SAAU5C,KAAK4C,SACfD,SAAU3C,KAAK2C,SACfsB,UAAWjE,KAAKiE,UAChBC,UAAWlE,KAAKkE,UAChBC,QAASnE,KAAKmE,QACdxD,KAAMX,KAAKU,UACX4C,UAAWtD,KAAKsD,UAChBR,SAAU9C,KAAK8C,SACfhC,MAAOd,KAAKc,MACZsD,YAAapE,KAAKoE,YAClBnE,SAAUD,KAAKC,SACfoE,WAAaC,GAAUC,EAAiBvE,KAAMsE,GAC9CE,YAAc1D,GAAUd,KAAKwE,YAAYC,KAAK3D,GAC9CD,wBAA0BC,GACxBd,KAAKa,wBAAwBC,GAE/B4D,OAAQ,IAAMC,EAAY3E,KAAMA,KAAKC,SAASmB,SAC9CwD,eAAgBvC,IAElBE,EAACsC,EAAW,CAAApC,IAAA,2CACVtC,WAAYH,KAAKG,WACjB2D,aAAc,IAAM9D,KAAKiB,kBAExBjB,KAAKW,OAAS,YACb4B,EAAA,kBAAAE,IAAA,2CACEqC,MAAM,kBACNpC,MAAO,eACPqC,MAAK,KACLC,KACEhF,KAAKU,YAAc,WAAauE,EAAUC,EAE5CC,QAAS,KACP,GAAInF,KAAKU,YAAc,WAAY,CACjCV,KAAKU,UAAY,OACjB,M,CAGFV,KAAKU,UAAY,UAAU,MAMpCV,KAAKiE,WACJ1B,EAAA,iBAAAE,IAAA,2CAAemB,KAAK,eAAekB,MAAM,SACtC3D,EAAAnB,KAAKc,SAAK,MAAAK,SAAA,S,EAAEiE,OAAM,IAAGpF,KAAKiE,Y,mIA5IvCoB,EAAA,CADCC,K"}

package/dist/siemens-ix/p-5a6d8b69.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as t,h as o,F as r,H as h,g as i}from"./p-f86a894a.js";import{a as c}from"./p-36c0f378.js";const a=':host{display:inline-flex;position:relative;height:2rem;justify-content:flex-start;align-items:center;margin-right:0.25rem;cursor:pointer}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .switch{position:relative;display:inline-block;width:3rem;min-width:3rem;max-width:3rem;height:1.5rem;margin-right:0.25rem}:host .switch input{opacity:0;width:0;height:0}:host .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--theme-switch-off--background);transition:var(--theme-default-time);border-radius:1.5rem;border:1px solid transparent}:host .slider:before{position:absolute;content:"";height:1.125rem;width:1.125rem;left:4px;bottom:2px;background-color:var(--theme-switch-thumb-off--background);transition:var(--theme-default-time);border-radius:50%}:host input{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}:host input:focus-visible+.switch>.slider{outline:1px solid var(--theme-color-focus-bdr);outline-offset:1px}:host input:checked+.switch>.slider{background-color:var(--theme-switch-on--background)}:host input:checked+.switch>.slider::before{background-color:var(--theme-switch-thumb-on--background);transform:translateX(1.35rem)}:host input+.switch>.slider{border-color:var(--theme-switch-off--border-color)}:host input+.switch:hover>.slider{background-color:var(--theme-switch-off--background--hover);border-color:var(--theme-switch-off--border-color--hover)}:host input+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-off--background--hover)}:host input+.switch:active>.slider{background-color:var(--theme-switch-off--background--active);border-color:var(--theme-switch-off--border-color--active)}:host input+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-off--background--active)}:host input:checked+.switch>.slider{border-color:var(--theme-switch-on--border-color)}:host input:checked+.switch:hover>.slider{background-color:var(--theme-switch-on--background--hover);border-color:var(--theme-switch-on--border-color--hover)}:host input:checked+.switch:hover>.slider:before{background-color:var(--theme-switch-thumb-on--background--hover)}:host input:checked+.switch:active>.slider{background-color:var(--theme-switch-on--background--active);border-color:var(--theme-switch-on--border-color--active)}:host input:checked+.switch:active>.slider:before{background-color:var(--theme-switch-thumb-on--background--active)}:host input:indeterminate+.switch>.slider::before{transform:translateX(0.7rem)}:host .toggle-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(.disabled){pointer-events:none}:host(.disabled) input+.switch{opacity:0.5}:host(.disabled) input+.switch>.slider{background-color:var(--theme-switch-off--background--disabled)}:host(.disabled) input+.switch>.slider:before{background-color:var(--theme-switch-thumb-off--background--disabled)}:host(.disabled) input:checked+.switch>.slider{background-color:var(--theme-switch-on--background--disabled)}:host(.disabled) input:checked+.switch>.slider:before{background-color:var(--theme-switch-thumb-on--background--disabled)}:host(.disabled) .toggle-text{color:var(--theme-color-weak-text)}:host(.ix-info:not(.disabled)) .slider{--theme-switch-off--background:var(--theme-switch-off--background--info);--theme-switch-off--background--hover:var(--theme-switch-off--background--info--hover);--theme-switch-off--background--active:var(--theme-switch-off--background--info--active);--theme-switch-thumb-off--background:var(--theme-switch-thumb-off--background--info);--theme-switch-thumb-off--background--hover:var(--theme-switch-thumb-off--background--info--hover);--theme-switch-thumb-off--background--active:var(--theme-switch-thumb-off--background--info--active);--theme-switch-off--border-color:var(--theme-switch-off--border-color--info);--theme-switch-off--border-color--hover:var(--theme-switch-off--border-color--info--hover);--theme-switch-off--border-color--active:var(--theme-switch-off--border-color--info--active);--theme-switch-on--background:var(--theme-switch-on--background--info);--theme-switch-on--background--hover:var(--theme-switch-on--background--info--hover);--theme-switch-on--background--active:var(--theme-switch-on--background--info--active);--theme-switch-thumb-on--background:var(--theme-switch-thumb-on--background--info);--theme-switch-thumb-on--background--hover:var(--theme-switch-thumb-on--background--info--hover);--theme-switch-thumb-on--background--active:var(--theme-switch-thumb-on--background--info--active);--theme-switch-on--border-color:var(--theme-switch-on--border-color--info);--theme-switch-on--border-color--hover:var(--theme-switch-on--border-color--info--hover);--theme-switch-on--border-color--active:var(--theme-switch-on--border-color--info--active);--theme-switch-mixed--background:var(--theme-switch-mixed--background--info);--theme-switch-mixed--background--hover:var(--theme-switch-mixed--background--info--hover);--theme-switch-mixed--background--active:var(--theme-switch-mixed--background--info--active);--theme-switch-thumb-mixed--background:var(--theme-switch-thumb-mixed--background--info);--theme-switch-thumb-mixed--background--hover:var(--theme-switch-thumb-mixed--background--info--hover);--theme-switch-thumb-mixed--background--active:var(--theme-switch-thumb-mixed--background--info--active);--theme-switch-mixed--border-color:var(--theme-switch-mixed--border-color--info);--theme-switch-mixed--border-color--hover:var(--theme-switch-mixed--border-color--info--hover);--theme-switch-mixed--border-color--active:var(--theme-switch-mixed--border-color--info--active)}:host(.ix-warning:not(.disabled)) .slider{--theme-switch-off--background:var(--theme-switch-off--background--warning);--theme-switch-off--background--hover:var(--theme-switch-off--background--warning--hover);--theme-switch-off--background--active:var(--theme-switch-off--background--warning--active);--theme-switch-thumb-off--background:var(--theme-switch-thumb-off--background--warning);--theme-switch-thumb-off--background--hover:var(--theme-switch-thumb-off--background--warning--hover);--theme-switch-thumb-off--background--active:var(--theme-switch-thumb-off--background--warning--active);--theme-switch-off--border-color:var(--theme-switch-off--border-color--warning);--theme-switch-off--border-color--hover:var(--theme-switch-off--border-color--warning--hover);--theme-switch-off--border-color--active:var(--theme-switch-off--border-color--warning--active);--theme-switch-on--background:var(--theme-switch-on--background--warning);--theme-switch-on--background--hover:var(--theme-switch-on--background--warning--hover);--theme-switch-on--background--active:var(--theme-switch-on--background--warning--active);--theme-switch-thumb-on--background:var(--theme-switch-thumb-on--background--warning);--theme-switch-thumb-on--background--hover:var(--theme-switch-thumb-on--background--warning--hover);--theme-switch-thumb-on--background--active:var(--theme-switch-thumb-on--background--warning--active);--theme-switch-on--border-color:var(--theme-switch-on--border-color--warning);--theme-switch-on--border-color--hover:var(--theme-switch-on--border-color--warning--hover);--theme-switch-on--border-color--active:var(--theme-switch-on--border-color--warning--active);--theme-switch-mixed--background:var(--theme-switch-mixed--background--warning);--theme-switch-mixed--background--hover:var(--theme-switch-mixed--background--warning--hover);--theme-switch-mixed--background--active:var(--theme-switch-mixed--background--warning--active);--theme-switch-thumb-mixed--background:var(--theme-switch-thumb-mixed--background--warning);--theme-switch-thumb-mixed--background--hover:var(--theme-switch-thumb-mixed--background--warning--hover);--theme-switch-thumb-mixed--background--active:var(--theme-switch-thumb-mixed--background--warning--active);--theme-switch-mixed--border-color:var(--theme-switch-mixed--border-color--warning);--theme-switch-mixed--border-color--hover:var(--theme-switch-mixed--border-color--warning--hover);--theme-switch-mixed--border-color--active:var(--theme-switch-mixed--border-color--warning--active)}:host(.ix-invalid--required:not(.disabled)) .slider{--theme-switch-off--background:var(--theme-switch-off--background--invalid);--theme-switch-off--background--hover:var(--theme-switch-off--background--invalid--hover);--theme-switch-off--background--active:var(--theme-switch-off--background--invalid--active);--theme-switch-thumb-off--background:var(--theme-switch-thumb-off--background--invalid);--theme-switch-thumb-off--background--hover:var(--theme-switch-thumb-off--background--invalid--hover);--theme-switch-thumb-off--background--active:var(--theme-switch-thumb-off--background--invalid--active);--theme-switch-off--border-color:var(--theme-switch-off--border-color--invalid);--theme-switch-off--border-color--hover:var(--theme-switch-off--border-color--invalid--hover);--theme-switch-off--border-color--active:var(--theme-switch-off--border-color--invalid--active);--theme-switch-on--background:var(--theme-switch-on--background--invalid);--theme-switch-on--background--hover:var(--theme-switch-on--background--invalid--hover);--theme-switch-on--background--active:var(--theme-switch-on--background--invalid--active);--theme-switch-thumb-on--background:var(--theme-switch-thumb-on--background--invalid);--theme-switch-thumb-on--background--hover:var(--theme-switch-thumb-on--background--invalid--hover);--theme-switch-thumb-on--background--active:var(--theme-switch-thumb-on--background--invalid--active);--theme-switch-on--border-color:var(--theme-switch-on--border-color--invalid);--theme-switch-on--border-color--hover:var(--theme-switch-on--border-color--invalid--hover);--theme-switch-on--border-color--active:var(--theme-switch-on--border-color--invalid--active);--theme-switch-mixed--background:var(--theme-switch-mixed--background--invalid);--theme-switch-mixed--background--hover:var(--theme-switch-mixed--background--invalid--hover);--theme-switch-mixed--background--active:var(--theme-switch-mixed--background--invalid--active);--theme-switch-thumb-mixed--background:var(--theme-switch-thumb-mixed--background--invalid);--theme-switch-thumb-mixed--background--hover:var(--theme-switch-thumb-mixed--background--invalid--hover);--theme-switch-thumb-mixed--background--active:var(--theme-switch-thumb-mixed--background--invalid--active);--theme-switch-mixed--border-color:var(--theme-switch-mixed--border-color--invalid);--theme-switch-mixed--border-color--hover:var(--theme-switch-mixed--border-color--invalid--hover);--theme-switch-mixed--border-color--active:var(--theme-switch-mixed--border-color--invalid--active)}:host(.ix-invalid:not(.disabled)) .slider{--theme-switch-off--background:var(--theme-switch-off--background--invalid);--theme-switch-off--background--hover:var(--theme-switch-off--background--invalid--hover);--theme-switch-off--background--active:var(--theme-switch-off--background--invalid--active);--theme-switch-thumb-off--background:var(--theme-switch-thumb-off--background--invalid);--theme-switch-thumb-off--background--hover:var(--theme-switch-thumb-off--background--invalid--hover);--theme-switch-thumb-off--background--active:var(--theme-switch-thumb-off--background--invalid--active);--theme-switch-off--border-color:var(--theme-switch-off--border-color--invalid);--theme-switch-off--border-color--hover:var(--theme-switch-off--border-color--invalid--hover);--theme-switch-off--border-color--active:var(--theme-switch-off--border-color--invalid--active);--theme-switch-on--background:var(--theme-switch-on--background--invalid);--theme-switch-on--background--hover:var(--theme-switch-on--background--invalid--hover);--theme-switch-on--background--active:var(--theme-switch-on--background--invalid--active);--theme-switch-thumb-on--background:var(--theme-switch-thumb-on--background--invalid);--theme-switch-thumb-on--background--hover:var(--theme-switch-thumb-on--background--invalid--hover);--theme-switch-thumb-on--background--active:var(--theme-switch-thumb-on--background--invalid--active);--theme-switch-on--border-color:var(--theme-switch-on--border-color--invalid);--theme-switch-on--border-color--hover:var(--theme-switch-on--border-color--invalid--hover);--theme-switch-on--border-color--active:var(--theme-switch-on--border-color--invalid--active);--theme-switch-mixed--background:var(--theme-switch-mixed--background--invalid);--theme-switch-mixed--background--hover:var(--theme-switch-mixed--background--invalid--hover);--theme-switch-mixed--background--active:var(--theme-switch-mixed--background--invalid--active);--theme-switch-thumb-mixed--background:var(--theme-switch-thumb-mixed--background--invalid);--theme-switch-thumb-mixed--background--hover:var(--theme-switch-thumb-mixed--background--invalid--hover);--theme-switch-thumb-mixed--background--active:var(--theme-switch-thumb-mixed--background--invalid--active);--theme-switch-mixed--border-color:var(--theme-switch-mixed--border-color--invalid);--theme-switch-mixed--border-color--hover:var(--theme-switch-mixed--border-color--invalid--hover);--theme-switch-mixed--border-color--active:var(--theme-switch-mixed--border-color--invalid--active)}';const d=a;const n=class{constructor(o){e(this,o);this.checkedChange=t(this,"checkedChange",7);this.valueChange=t(this,"valueChange",7);if(o.$hostElement$["s-ei"]){this.formInternals=o.$hostElement$["s-ei"]}else{this.formInternals=o.$hostElement$.attachInternals();o.$hostElement$["s-ei"]=this.formInternals}this.name=undefined;this.value="on";this.checked=false;this.disabled=false;this.indeterminate=false;this.textOn="On";this.textOff="Off";this.textIndeterminate="Mixed";this.hideText=false;this.required=false}onCheckedChange(e){if(this.indeterminate){this.indeterminate=false}this.checked=e;this.checkedChange.emit(this.checked)}componentWillLoad(){this.updateFormInternalValue()}updateFormInternalValue(){if(this.checked){this.formInternals.setFormValue(this.value)}else{this.formInternals.setFormValue(null)}}watchCheckedChange(){this.updateFormInternalValue()}hasValidValue(){return Promise.resolve(this.checked)}getAssociatedFormElement(){return Promise.resolve(this.formInternals.form)}render(){return o(h,{key:"0afa08e1803352f2bb3360c11fcda2745531e20d",class:{disabled:this.disabled},onClick:()=>this.onCheckedChange(!this.checked)},o("input",{key:"37ba0cf086ed01c01e61ff0bb24367759b537cd7",disabled:this.disabled,indeterminate:this.indeterminate,checked:this.checked,role:"switch",tabindex:0,type:"checkbox","aria-checked":c(this.checked),onChange:e=>this.onCheckedChange(e.target.checked)}),o("label",{key:"83d6712432de4b45396b11f7f21cf7072fd19fcd",class:"switch",tabIndex:-1},o("span",{key:"f3f91c36a2043f039813b43bbc6285d67239d050",class:"slider"})),!this.hideText?o(r,null,!this.indeterminate?o("span",{class:"toggle-text","aria-hidden":c(true)},this.checked?this.textOn:this.textOff):o("span",{class:"toggle-text","aria-hidden":c(true)},this.textIndeterminate)):null)}static get formAssociated(){return true}get hostElement(){return i(this)}static get watchers(){return{checked:["watchCheckedChange"]}}};n.style=d;export{n as ix_toggle};
-//# sourceMappingURL=p-5a6d8b69.entry.js.map

package/dist/siemens-ix/p-5a6d8b69.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["toggleCss","IxToggleStyle0","Toggle","onCheckedChange","newChecked","this","indeterminate","checked","checkedChange","emit","componentWillLoad","updateFormInternalValue","formInternals","setFormValue","value","watchCheckedChange","hasValidValue","Promise","resolve","getAssociatedFormElement","form","render","h","Host","key","class","disabled","onClick","role","tabindex","type","a11yBoolean","onChange","event","target","tabIndex","hideText","Fragment","textOn","textOff","textIndeterminate"],"sources":["src/components/toggle/toggle.scss?tag=ix-toggle&encapsulation=shadow","src/components/toggle/toggle.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-flex;\n  position: relative;\n  height: 2rem;\n  justify-content: flex-start;\n  align-items: center;\n  margin-right: 0.25rem;\n\n  cursor: pointer;\n\n  .switch {\n    position: relative;\n    display: inline-block;\n    width: 3rem;\n    min-width: 3rem;\n    max-width: 3rem;\n    height: 1.5rem;\n    margin-right: 0.25rem;\n  }\n\n  .switch input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n\n  .slider {\n    position: absolute;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-color: var(--theme-switch-off--background);\n    transition: var(--theme-default-time);\n    border-radius: 1.5rem;\n    border: 1px solid transparent;\n  }\n\n  .slider:before {\n    position: absolute;\n    content: '';\n    height: 1.125rem;\n    width: 1.125rem;\n    left: 4px;\n    bottom: 2px;\n    background-color: var(--theme-switch-thumb-off--background);\n    transition: var(--theme-default-time);\n    border-radius: 50%;\n  }\n\n  input {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n  }\n\n  input:focus-visible + .switch > .slider {\n    outline: 1px solid var(--theme-color-focus-bdr);\n    outline-offset: 1px;\n  }\n\n  input:checked + .switch > .slider {\n    background-color: var(--theme-switch-on--background);\n  }\n\n  input:checked + .switch > .slider::before {\n    background-color: var(--theme-switch-thumb-on--background);\n    transform: translateX(1.35rem);\n  }\n\n  // Toggle NOT checked\n  input + .switch > .slider {\n    border-color: var(--theme-switch-off--border-color);\n  }\n\n  input + .switch:hover > .slider {\n    background-color: var(--theme-switch-off--background--hover);\n    border-color: var(--theme-switch-off--border-color--hover);\n  }\n\n  input + .switch:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--hover);\n  }\n\n  input + .switch:active > .slider {\n    background-color: var(--theme-switch-off--background--active);\n    border-color: var(--theme-switch-off--border-color--active);\n  }\n\n  input + .switch:active > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--active);\n  }\n\n  // Toggle checked\n  input:checked + .switch > .slider {\n    border-color: var(--theme-switch-on--border-color);\n  }\n\n  input:checked + .switch:hover > .slider {\n    background-color: var(--theme-switch-on--background--hover);\n    border-color: var(--theme-switch-on--border-color--hover);\n  }\n\n  input:checked + .switch:hover > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--hover);\n  }\n\n  input:checked + .switch:active > .slider {\n    background-color: var(--theme-switch-on--background--active);\n    border-color: var(--theme-switch-on--border-color--active);\n  }\n\n  input:checked + .switch:active > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--active);\n  }\n\n  input:indeterminate + .switch > .slider::before {\n    transform: translateX(0.7rem);\n  }\n\n  .toggle-text {\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  input + .switch {\n    opacity: 0.5;\n  }\n\n  input + .switch > .slider {\n    background-color: var(--theme-switch-off--background--disabled);\n  }\n\n  input + .switch > .slider:before {\n    background-color: var(--theme-switch-thumb-off--background--disabled);\n  }\n\n  input:checked + .switch > .slider {\n    background-color: var(--theme-switch-on--background--disabled);\n  }\n\n  input:checked + .switch > .slider:before {\n    background-color: var(--theme-switch-thumb-on--background--disabled);\n  }\n\n  .toggle-text {\n    color: var(--theme-color-weak-text);\n  }\n}\n\n@mixin toggle-variant($selector) {\n  :host(#{$selector}:not(.disabled)) {\n    .slider {\n      @content;\n    }\n  }\n}\n\n@mixin define-toggle-vars($state, $type) {\n  --theme-switch-#{$state}--background: var(--theme-switch-#{$state}--background--#{$type});\n  --theme-switch-#{$state}--background--hover: var(--theme-switch-#{$state}--background--#{$type}--hover);\n  --theme-switch-#{$state}--background--active: var(--theme-switch-#{$state}--background--#{$type}--active);\n\n  --theme-switch-thumb-#{$state}--background: var(--theme-switch-thumb-#{$state}--background--#{$type});\n  --theme-switch-thumb-#{$state}--background--hover: var(--theme-switch-thumb-#{$state}--background--#{$type}--hover);\n  --theme-switch-thumb-#{$state}--background--active: var(--theme-switch-thumb-#{$state}--background--#{$type}--active);\n\n  --theme-switch-#{$state}--border-color: var(--theme-switch-#{$state}--border-color--#{$type});\n  --theme-switch-#{$state}--border-color--hover: var(--theme-switch-#{$state}--border-color--#{$type}--hover);\n  --theme-switch-#{$state}--border-color--active: var(--theme-switch-#{$state}--border-color--#{$type}--active);\n}\n\n@include toggle-variant(\n  $selector: '.ix-info',\n) {\n  @include define-toggle-vars('off', 'info');\n  @include define-toggle-vars('on', 'info');\n  @include define-toggle-vars('mixed', 'info');\n}\n\n@include toggle-variant(\n  $selector: '.ix-warning',\n) {\n  @include define-toggle-vars('off', 'warning');\n  @include define-toggle-vars('on', 'warning');\n  @include define-toggle-vars('mixed', 'warning');\n}\n\n@include toggle-variant(\n  $selector: '.ix-invalid--required',\n) {\n  @include define-toggle-vars('off', 'invalid');\n  @include define-toggle-vars('on', 'invalid');\n  @include define-toggle-vars('mixed', 'invalid');\n}\n\n@include toggle-variant(\n  $selector: '.ix-invalid',\n) {\n  @include define-toggle-vars('off', 'invalid');\n  @include define-toggle-vars('on', 'invalid');\n  @include define-toggle-vars('mixed', 'invalid');\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport { IxFormComponent } from '../utils/field';\n\n/**\n * @form-ready 2.4.0\n * */\n@Component({\n  tag: 'ix-toggle',\n  styleUrl: 'toggle.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Toggle implements IxFormComponent<string> {\n  @AttachInternals() formInternals!: ElementInternals;\n\n  @Element() hostElement!: HTMLIxToggleElement;\n\n  /**\n   * Name of the checkbox component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the checkbox component\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * Whether the slide-toggle element is checked or not.\n   */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /**\n   * Whether the slide-toggle element is disabled or not.\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the control is in indeterminate state\n   */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /**\n   * Text for on state\n   */\n  @Prop() textOn = 'On';\n\n  /**\n   * Text for off state\n   */\n  @Prop() textOff = 'Off';\n\n  /**\n   * Text for indeterminate state\n   */\n  @Prop() textIndeterminate = 'Mixed';\n\n  /**\n   * Hide `on` and `off` text\n   */\n  @Prop() hideText = false;\n\n  /**\n   * Required state of the checkbox component.\n   *\n   * If true, checkbox needs to be checked to be valid\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * An event will be dispatched each time the slide-toggle changes its value.\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /** @internal */\n  @Event() valueChange!: EventEmitter<string>;\n\n  onCheckedChange(newChecked: boolean) {\n    if (this.indeterminate) {\n      this.indeterminate = false;\n    }\n    this.checked = newChecked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue(): void {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value);\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  @Watch('checked')\n  watchCheckedChange() {\n    this.updateFormInternalValue();\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          disabled: this.disabled,\n        }}\n        onClick={() => this.onCheckedChange(!this.checked)}\n      >\n        <input\n          disabled={this.disabled}\n          indeterminate={this.indeterminate}\n          checked={this.checked}\n          role=\"switch\"\n          tabindex={0}\n          type=\"checkbox\"\n          aria-checked={a11yBoolean(this.checked)}\n          onChange={(event) =>\n            this.onCheckedChange((event.target as HTMLInputElement).checked)\n          }\n        ></input>\n        <label class=\"switch\" tabIndex={-1}>\n          <span class=\"slider\"></span>\n        </label>\n        {!this.hideText ? (\n          <Fragment>\n            {!this.indeterminate ? (\n              <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n                {this.checked ? this.textOn : this.textOff}\n              </span>\n            ) : (\n              <span class={'toggle-text'} aria-hidden={a11yBoolean(true)}>\n                {this.textIndeterminate}\n              </span>\n            )}\n          </Fragment>\n        ) : null}\n      </Host>\n    );\n  }\n}\n"],"mappings":"2GAAA,MAAMA,EAAY,kpbAClB,MAAAC,EAAeD,E,MCiCFE,EAAM,M,0TAawB,K,aAKS,M,cAK/B,M,mBAKqC,M,YAKvC,K,aAKC,M,uBAKU,Q,cAKT,M,cAOiB,K,CAUpC,eAAAC,CAAgBC,GACd,GAAIC,KAAKC,cAAe,CACtBD,KAAKC,cAAgB,K,CAEvBD,KAAKE,QAAUH,EACfC,KAAKG,cAAcC,KAAKJ,KAAKE,Q,CAG/B,iBAAAG,GACEL,KAAKM,yB,CAGP,uBAAAA,GACE,GAAIN,KAAKE,QAAS,CAChBF,KAAKO,cAAcC,aAAaR,KAAKS,M,KAChC,CACLT,KAAKO,cAAcC,aAAa,K,EAKpC,kBAAAE,GACEV,KAAKM,yB,CAKP,aAAAK,GACE,OAAOC,QAAQC,QAAQb,KAAKE,Q,CAK9B,wBAAAY,GACE,OAAOF,QAAQC,QAAQb,KAAKO,cAAcQ,K,CAG5C,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACLC,SAAUrB,KAAKqB,UAEjBC,QAAS,IAAMtB,KAAKF,iBAAiBE,KAAKE,UAE1Ce,EAAA,SAAAE,IAAA,2CACEE,SAAUrB,KAAKqB,SACfpB,cAAeD,KAAKC,cACpBC,QAASF,KAAKE,QACdqB,KAAK,SACLC,SAAU,EACVC,KAAK,WAAU,eACDC,EAAY1B,KAAKE,SAC/ByB,SAAWC,GACT5B,KAAKF,gBAAiB8B,EAAMC,OAA4B3B,WAG5De,EAAA,SAAAE,IAAA,2CAAOC,MAAM,SAASU,UAAW,GAC/Bb,EAAA,QAAAE,IAAA,2CAAMC,MAAM,aAEZpB,KAAK+B,SACLd,EAACe,EAAQ,MACLhC,KAAKC,cACLgB,EAAA,QAAMG,MAAO,cAAa,cAAeM,EAAY,OAClD1B,KAAKE,QAAUF,KAAKiC,OAASjC,KAAKkC,SAGrCjB,EAAA,QAAMG,MAAO,cAAa,cAAeM,EAAY,OAClD1B,KAAKmC,oBAIV,K"}

package/dist/siemens-ix/p-5bf40a9f.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as a,H as c}from"./p-f86a894a.js";const t=":host{display:flex;justify-content:flex-start;align-items:center;gap:0.5rem;overflow:hidden}:host .loading-text{display:block;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}";const s=t;const o=class{constructor(a){e(this,a)}render(){return a(c,{key:"e6a5ed6cf016a30bd76692c5dcc96924cdfebc6d"},a("ix-spinner",{key:"0979352c75c22f1a97fbad587b2f6648c5fbd867",variant:"primary"}),a("span",{key:"9cc99953a981540e8e2dc9806fd7e481199e1b54",class:"loading-text"},a("slot",{key:"89cc3a8cd66fcff80b72fe2d8ed80cb272cf3201"})))}};o.style=s;export{o as ix_modal_loading};
-//# sourceMappingURL=p-5bf40a9f.entry.js.map

package/dist/siemens-ix/p-6bd0ba14.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabItemCss","IxTabItemStyle0","TabItem","tabItemClasses","props","selected","disabled","small","icon","stretched","layout","bottom","placement","top","circle","render","h","Host","key","class","this","rounded","tabIndex","onClick","event","clientEvent","tabClick","emit","nativeEvent","defaultPrevented","stopPropagation","text","counter","hidden","undefined","requestAnimationFrameNoNgZone","callback","__zone_symbol__requestAnimationFrame","requestAnimationFrame","setTimeout","tabsCss","IxTabsStyle0","Tabs","windowStartSize","window","innerWidth","clickAction","timeout","isClick","arrowLeftElement","hostElement","shadowRoot","querySelector","arrowRightElement","onWindowResize","totalItems","getTabs","length","move","Array","from","querySelectorAll","getTab","getTabsWrapper","showArrows","tabWrapper","scrollWidth","Math","ceil","getBoundingClientRect","width","error","showPreviousArrow","scrollActionAmount","showNextArrow","tabWrapperRect","getArrowStyle","condition","opacity","zIndex","amount","click","maxScrollWidth","currentScrollAmount","styles","join","setAttribute","moveTabToView","tab","x","setSelected","index","clickTab","dragStop","selectedChange","dragStart","element","button","tabPositionX","parseFloat","getComputedStyle","left","mousedownPositionX","clientX","dragMove","addEventListener","removeEventListener","tabX","mousedownX","clearTimeout","componentWillLoad","tabs","map","componentDidRender","componentWillRender","previousArrow","Object","assign","style","componentDidLoad","forEach","onTabClick","target","scrollAmount","name"],"sources":["src/components/tab-item/tab-item.scss?tag=ix-tab-item&encapsulation=shadow","src/components/tab-item/tab-item.tsx","src/components/utils/requestAnimationFrame.ts","src/components/tabs/tabs.scss?tag=ix-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/hover';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 10px $large-space;\n  line-height: 20px;\n  font-size: 14px;\n  font-weight: bold;\n  background-color: var(--theme-tab--background);\n  color: var(--theme-tab--color);\n\n  &::after {\n    content: '';\n    position: absolute;\n    background-color: var(--theme-tab-indicator--background);\n    width: 100%;\n    height: var(--theme-tab-indicator--height);\n    left: 0;\n  }\n\n  .text {\n    @include ellipsis;\n\n    span,\n    span::before {\n      pointer-events: none;\n    }\n\n    vertical-align: middle;\n  }\n\n  .circle {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 3rem;\n    width: 3rem;\n    background-color: var(--theme-animated-tab-indicator--background);\n    border-radius: 50%;\n    border: 2px solid var(--theme-animated-tab-circle--border-color);\n    color: var(--theme-an…icon--color);\n    cursor: pointer;\n\n    &.selected:not(.disabled) {\n      background-color: var(--theme-animated-tab-circle--background--selected);\n      color: var(--theme-animated-tab-icon--color--selected);\n      border-color: var(--theme-animated-tab-circle--border-color--selected);\n\n      &:hover {\n        background-color: var(\n          --theme-animated-tab-circle--background--selected\n        );\n      }\n    }\n\n    &:hover {\n      background-color: var(--theme-animated-tab-circle--background--hover);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &:active {\n      background-color: var(--theme-animated-tab-circle--background--active);\n    }\n\n    &.disabled {\n      background-color: var(--theme-animated-tab-circle--background--disabled);\n      border-color: var(--theme-animated-tab-circle--border-color--disabled);\n    }\n  }\n\n  .counter {\n    position: absolute;\n    z-index: 1;\n    height: 16px;\n    width: auto;\n    background-color: var(--theme-pill-outline--background);\n    border: 1px solid var(--theme-tab-pill--border-color);\n    border-radius: 100px;\n    bottom: 6px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    padding-left: $tiny-space;\n    padding-right: $tiny-space;\n    font-size: 12px;\n    line-height: 14px;\n    color: var(--theme-pill-outline--color);\n    cursor: pointer;\n\n    &.selected {\n      border-color: var(--theme-tab-pill--border-color--selected);\n    }\n\n    &.disabled {\n      border-color: var(--theme-tab-pill--border-color--disabled);\n    }\n  }\n\n  .hidden {\n    display: none;\n  }\n}\n\n:host(.circle) {\n  height: 72px;\n}\n\n:host(.top) {\n  &::after {\n    top: 0;\n  }\n}\n\n:host(.bottom) {\n  &::after {\n    bottom: 0;\n  }\n}\n\n:host(.stretched) {\n  flex-basis: 100%;\n  width: 100%;\n  @include ellipsis;\n}\n\n:host(:hover:not(.circle)) {\n  background-color: var(--theme-tab--background--hover);\n  color: var(--theme-tab-color-hover);\n  cursor: pointer;\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--hover);\n  }\n}\n\n:host(:active:not(.circle)) {\n  background-color: var(--theme-tab--background--active);\n  color: var(--theme-tab-color--active);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--active);\n  }\n}\n\n:host(:focus-visible) {\n  outline: 0px solid var(--focus--border-color);\n\n  .circle {\n    outline: 1px solid var(--focus--border-color);\n  }\n}\n\n:host(:focus-visible:not(.circle)) {\n  outline: 1px solid var(--focus--border-color);\n}\n\n:host(.disabled) {\n  pointer-events: none;\n  color: var(--theme-tab--color--disabled);\n  background-color: var(--theme-tab--background--disabled);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--disabled);\n  }\n}\n\n:host(.selected:not(.disabled)) {\n  background-color: var(--theme-tab--background--selected);\n  color: var(--theme-tab--color--selected);\n\n  &::after {\n    background-color: var(--theme-tab-indicator--background--selected);\n  }\n}\n\n:host(.icon) {\n  padding: $large-space $small-space;\n}\n\n:host(.small-tab) {\n  height: 32px;\n  padding: $default-space;\n}\n\n:host(.small-tab.icon) {\n  padding: $default-space $tiny-space;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\n\nexport type TabClickDetail = {\n  nativeEvent: MouseEvent;\n};\n\n@Component({\n  tag: 'ix-tab-item',\n  styleUrl: 'tab-item.scss',\n  shadow: true,\n})\nexport class TabItem {\n  /**\n   * Set selected tab\n   */\n  @Prop() selected = false;\n\n  /**\n   * Set disabled tab\n   */\n  @Prop() disabled = false;\n\n  /**\n   * Set small size tab\n   */\n  @Prop() small = false;\n\n  /**\n   * Set icon only tab\n   */\n  @Prop() icon = false;\n\n  /**\n   * Set rounded tab\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set counter value\n   */\n  @Prop() counter: number;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set selected placement\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * On tab click\n   *\n   * @since 2.0.0\n   */\n  @Event() tabClick: EventEmitter<TabClickDetail>;\n\n  private tabItemClasses(props: {\n    selected: boolean;\n    disabled: boolean;\n    small: boolean;\n    icon: boolean;\n    circle: boolean;\n    layout: 'auto' | 'stretched';\n    placement: 'bottom' | 'top';\n  }) {\n    return {\n      selected: props.selected,\n      disabled: props.disabled,\n      'small-tab': props.small,\n      icon: props.small,\n      stretched: props.layout === 'stretched',\n      bottom: props.placement === 'bottom',\n      top: props.placement === 'top',\n      circle: props.circle,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        class={this.tabItemClasses({\n          selected: this.selected,\n          disabled: this.disabled,\n          small: this.small,\n          icon: this.icon,\n          layout: this.layout,\n          placement: this.placement,\n          circle: this.rounded,\n        })}\n        tabIndex={0}\n        onClick={(event: MouseEvent) => {\n          const clientEvent = this.tabClick.emit({\n            nativeEvent: event,\n          });\n\n          if (clientEvent.defaultPrevented) {\n            event.stopPropagation();\n          }\n        }}\n      >\n        <div\n          class={{\n            circle: this.rounded,\n            text: !this.rounded,\n            selected: this.selected,\n            disabled: this.disabled,\n          }}\n        >\n          <slot></slot>\n        </div>\n        <div\n          class={{\n            counter: true,\n            selected: this.selected,\n            hidden: !(this.rounded && this.counter !== undefined),\n            disabled: this.disabled,\n          }}\n        >\n          {this.counter}\n        </div>\n      </Host>\n    );\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\ndeclare const __zone_symbol__requestAnimationFrame: any;\n\n/**\n * Prevents angular from change detection when requesting an animation frame\n *\n * Credits goes to:\n * https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts\n */\nexport const requestAnimationFrameNoNgZone = (\n  callback: (...args: any[]) => void\n) => {\n  if (typeof __zone_symbol__requestAnimationFrame === 'function') {\n    return __zone_symbol__requestAnimationFrame(callback);\n  }\n  if (typeof requestAnimationFrame === 'function') {\n    return requestAnimationFrame(callback);\n  }\n  return setTimeout(callback);\n};\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  width: auto;\n  display: flex;\n  align-items: center;\n  position: relative;\n\n  .tab-items {\n    overflow: hidden;\n    scroll-behavior: smooth;\n    width: 100%;\n\n    .items-content {\n      display: flex;\n      align-items: center;\n    }\n  }\n\n  .arrow {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto 0;\n    border-radius: 4px;\n    color: var(--theme-btn-invisible-primary--color);\n    background-color: var(--theme-btn-invisible-primary--background);\n    z-index: 2;\n\n    &:hover {\n      color: var(--theme-btn-invisible-primary--color--hover);\n      background-color: var(--theme-btn-invisible-primary--background--hover);\n    }\n\n    &:active {\n      color: var(--theme-btn-invisible-primary--color--active);\n      background-color: var(--theme-btn-invisible-primary--background--active);\n    }\n\n    &.right {\n      left: auto;\n      right: 0;\n    }\n  }\n\n  .overflow-shadow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n\n    &.shadow-left {\n      mask-image: linear-gradient(90deg, transparent 0px, black 45px);\n    }\n\n    &.shadow-right {\n      mask-image: linear-gradient(\n        90deg,\n        black calc(100% - 45px),\n        transparent 100%\n      );\n    }\n\n    &.shadow-both {\n      mask-image: linear-gradient(\n        90deg,\n        transparent 0px,\n        black 45px,\n        black calc(100% - 45px),\n        transparent 100%\n      );\n    }\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\n\n@Component({\n  tag: 'ix-tabs',\n  styleUrl: 'tabs.scss',\n  shadow: true,\n})\nexport class Tabs {\n  @Element() hostElement!: HTMLIxTabsElement;\n\n  /**\n   * Set tab items to small size\n   */\n  @Prop() small = false;\n\n  /**\n   * Set rounded tabs\n   */\n  @Prop() rounded = false;\n\n  /**\n   * Set default selected tab by index\n   */\n  @Prop({ mutable: true }) selected = 0;\n\n  /**\n   * Set layout width style\n   */\n  @Prop() layout: 'auto' | 'stretched' = 'auto';\n\n  /**\n   * Set placement style\n   */\n  @Prop() placement: 'bottom' | 'top' = 'bottom';\n\n  /**\n   * `selected` property changed\n   *\n   * @since 2.0.0\n   */\n  @Event() selectedChange: EventEmitter<number>;\n\n  @State() totalItems = 0;\n  @State() currentScrollAmount = 0;\n  @State() scrollAmount = 100;\n\n  @State() scrollActionAmount = 0;\n\n  private windowStartSize = window.innerWidth;\n\n  private get arrowLeftElement() {\n    return this.hostElement.shadowRoot.querySelector(\n      '[data-arrow-left]'\n    ) as HTMLElement;\n  }\n\n  private get arrowRightElement() {\n    return this.hostElement.shadowRoot.querySelector(\n      '[data-arrow-right]'\n    ) as HTMLElement;\n  }\n\n  private clickAction: {\n    timeout: NodeJS.Timeout;\n    isClick: boolean;\n  } = {\n    timeout: null,\n    isClick: true,\n  };\n\n  @Listen('resize', { target: 'window' })\n  onWindowResize() {\n    this.totalItems = 0;\n    this.totalItems = this.getTabs().length;\n\n    if (this.windowStartSize === 0)\n      return (this.windowStartSize = window.innerWidth);\n    this.move(this.windowStartSize - window.innerWidth);\n    this.windowStartSize = window.innerWidth;\n  }\n\n  private getTabs() {\n    return Array.from(this.hostElement.querySelectorAll('ix-tab-item'));\n  }\n\n  private getTab(tabIndex: number) {\n    return this.getTabs()[tabIndex];\n  }\n\n  private getTabsWrapper() {\n    return this.hostElement.shadowRoot.querySelector('.items-content');\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper.scrollWidth >\n          Math.ceil(tabWrapper.getBoundingClientRect().width) &&\n        this.layout === 'auto'\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showPreviousArrow() {\n    try {\n      return this.showArrows() && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private getArrowStyle(condition: boolean) {\n    return {\n      opacity: condition ? '1' : '0',\n      zIndex: condition ? '1' : '-1',\n    };\n  }\n\n  private move(amount: number, click = false) {\n    const tabWrapper = this.getTabsWrapper();\n    const maxScrollWidth =\n      (tabWrapper.scrollWidth - tabWrapper.getBoundingClientRect().width) * -1;\n\n    amount = this.currentScrollAmount + amount;\n    amount = amount > 0 ? 0 : amount < maxScrollWidth ? maxScrollWidth : amount;\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  private moveTabToView(tabIndex: number) {\n    if (!this.showArrows()) return;\n\n    const tab = this.getTab(tabIndex).getBoundingClientRect();\n    const amount = tab.x * -1;\n    this.move(amount, true);\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (this.dragStop()) {\n      return;\n    }\n\n    const { defaultPrevented } = this.selectedChange.emit(index);\n    if (defaultPrevented) {\n      return;\n    }\n\n    this.setSelected(index);\n    this.moveTabToView(index);\n  }\n\n  private dragStart(element: HTMLIxTabItemElement, event: MouseEvent) {\n    if (!this.showArrows()) return;\n    if (event.button > 0) return;\n\n    this.clickAction.timeout =\n      this.clickAction.timeout === null\n        ? setTimeout(() => (this.clickAction.isClick = false), 300)\n        : null;\n\n    const tabPositionX = parseFloat(window.getComputedStyle(element).left);\n    const mousedownPositionX = event.clientX;\n    const move = (event: MouseEvent) =>\n      this.dragMove(event, tabPositionX, mousedownPositionX);\n\n    window.addEventListener('mouseup', () => {\n      window.removeEventListener('mousemove', move, false);\n      this.dragStop();\n    });\n    window.addEventListener('mousemove', move, false);\n  }\n\n  private dragMove(event: MouseEvent, tabX: number, mousedownX: number) {\n    this.move(event.clientX + tabX - mousedownX);\n  }\n\n  private dragStop() {\n    clearTimeout(this.clickAction.timeout);\n    this.clickAction.timeout = null;\n\n    if (this.clickAction.isClick) return false;\n\n    this.currentScrollAmount = this.scrollActionAmount;\n    this.clickAction.isClick = true;\n\n    return true;\n  }\n\n  componentWillLoad() {\n    const tabs = this.getTabs();\n\n    tabs.map((element, index) => {\n      if (this.small) element.setAttribute('small', 'true');\n\n      if (this.rounded) element.setAttribute('rounded', 'true');\n\n      element.setAttribute('layout', this.layout);\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n\n      element.setAttribute('placement', this.placement);\n    });\n  }\n\n  componentDidRender() {\n    const tabs = this.getTabs();\n    this.totalItems = tabs.length;\n\n    tabs.map((element, index) => {\n      element.setAttribute(\n        'selected',\n        index === this.selected ? 'true' : 'false'\n      );\n    });\n  }\n\n  componentWillRender() {\n    requestAnimationFrameNoNgZone(() => {\n      const showNextArrow = this.showNextArrow();\n      const previousArrow = this.showPreviousArrow();\n\n      Object.assign(\n        this.arrowLeftElement.style,\n        this.getArrowStyle(previousArrow)\n      );\n      Object.assign(\n        this.arrowRightElement.style,\n        this.getArrowStyle(showNextArrow)\n      );\n    });\n  }\n\n  componentDidLoad() {\n    const tabs = this.getTabs();\n    tabs.forEach((element) => {\n      element.addEventListener('mousedown', (event) =>\n        this.dragStart(element, event)\n      );\n    });\n  }\n\n  @Listen('tabClick')\n  onTabClick(event: CustomEvent) {\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    const target = event.target;\n    const tabs = this.getTabs();\n\n    tabs.forEach((tab, index) => {\n      if (!tab.disabled && tab === target) {\n        this.clickTab(index);\n      }\n    });\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class=\"arrow\"\n          data-arrow-left\n          onClick={() => this.move(this.scrollAmount, true)}\n        >\n          <ix-icon name={'chevron-left-small'}></ix-icon>\n        </div>\n        <div\n          class={{\n            'tab-items': true,\n            'overflow-shadow': true,\n            'shadow-left': this.showPreviousArrow(),\n            'shadow-right': this.showNextArrow(),\n            'shadow-both': this.showNextArrow() && this.showPreviousArrow(),\n          }}\n        >\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        <div\n          class=\"arrow right\"\n          data-arrow-right\n          onClick={() => this.move(-this.scrollAmount, true)}\n        >\n          <ix-icon name={'chevron-right-small'}></ix-icon>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/siemens-ix/p-6f83793b.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c,h as o,H as r,g as h}from"./p-f86a894a.js";import{H as d}from"./p-42c66a44.js";import{m as t}from"./p-dead9c8e.js";const b=":host{--ix-checkbox-check-color:var(--theme-color-primary--contrast);display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset}:host button{display:inline-flex;position:relative;align-items:center;justify-content:center;width:1.125rem;min-width:1.125rem;max-width:1.125rem;height:1.125rem;min-height:1.125rem;max-height:1.125rem;margin-right:0.5rem}:host button:disabled{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host button:focus-visible{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:var(--theme-checkbox--focus--outline-offset)}:host input[type=checkbox]{display:none}:host label{display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:100%}:host ix-typography{margin-top:0.125rem}:host button{background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.checked) button,:host([indeterminate]) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.checked:hover) button,:host([indeterminate]:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.checked:active) button,:host([indeterminate]:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(:disabled) button,:host(.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.checked:disabled) button,:host(.checked.disabled) button,:host([indeterminate]:disabled) button,:host([indeterminate].disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-info) button{--theme-checkbox-unchecked--background:var(--theme-checkbox-unchecked--background--info);--theme-checkbox-unchecked--background--hover:var(--theme-checkbox-unchecked--background--info--hover);--theme-checkbox-unchecked--background--active:var(--theme-checkbox-unchecked--background--info--active);--theme-checkbox-unchecked--border-color:var(--theme-checkbox-unchecked--border-color--info);--theme-checkbox-unchecked--border-color--hover:var(--theme-checkbox-unchecked--border-color--info--hover);--theme-checkbox-unchecked--border-color--active:var(--theme-checkbox-unchecked--border-color--info--active);--theme-checkbox-checked--background:var(--theme-checkbox-checked--background--info);--theme-checkbox-checked--background--hover:var(--theme-checkbox-checked--background--info--hover);--theme-checkbox-checked--background--active:var(--theme-checkbox-checked--background--info--active);--theme-checkbox-checked--border-color:var(--theme-checkbox-checked--border-color--info);--theme-checkbox-checked--border-color--hover:var(--theme-checkbox-checked--border-color--info--hover);--theme-checkbox-checked--border-color--active:var(--theme-checkbox-checked--border-color--info--active);--theme-checkbox-mixed--background:var(--theme-checkbox-mixed--background--info);--theme-checkbox-mixed--background--hover:var(--theme-checkbox-mixed--background--info--hover);--theme-checkbox-mixed--background--active:var(--theme-checkbox-mixed--background--info--active);--theme-checkbox-mixed--border-color:var(--theme-checkbox-mixed--border-color--info);--theme-checkbox-mixed--border-color--hover:var(--theme-checkbox-mixed--border-color--info--hover);--theme-checkbox-mixed--border-color--active:var(--theme-checkbox-mixed--border-color--info--active)}:host(.ix-info) button{background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-info:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-info:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-info.checked) button,:host(.ix-info[indeterminate]) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-info.checked:hover) button,:host(.ix-info[indeterminate]:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-info.checked:active) button,:host(.ix-info[indeterminate]:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-info:disabled) button,:host(.ix-info.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-info.checked:disabled) button,:host(.ix-info.checked.disabled) button,:host(.ix-info[indeterminate]:disabled) button,:host(.ix-info[indeterminate].disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-warning) button{--theme-checkbox-unchecked--background:var(--theme-checkbox-unchecked--background--warning);--theme-checkbox-unchecked--background--hover:var(--theme-checkbox-unchecked--background--warning--hover);--theme-checkbox-unchecked--background--active:var(--theme-checkbox-unchecked--background--warning--active);--theme-checkbox-unchecked--border-color:var(--theme-checkbox-unchecked--border-color--warning);--theme-checkbox-unchecked--border-color--hover:var(--theme-checkbox-unchecked--border-color--warning--hover);--theme-checkbox-unchecked--border-color--active:var(--theme-checkbox-unchecked--border-color--warning--active);--theme-checkbox-checked--background:var(--theme-checkbox-checked--background--warning);--theme-checkbox-checked--background--hover:var(--theme-checkbox-checked--background--warning--hover);--theme-checkbox-checked--background--active:var(--theme-checkbox-checked--background--warning--active);--theme-checkbox-checked--border-color:var(--theme-checkbox-checked--border-color--warning);--theme-checkbox-checked--border-color--hover:var(--theme-checkbox-checked--border-color--warning--hover);--theme-checkbox-checked--border-color--active:var(--theme-checkbox-checked--border-color--warning--active);--theme-checkbox-mixed--background:var(--theme-checkbox-mixed--background--warning);--theme-checkbox-mixed--background--hover:var(--theme-checkbox-mixed--background--warning--hover);--theme-checkbox-mixed--background--active:var(--theme-checkbox-mixed--background--warning--active);--theme-checkbox-mixed--border-color:var(--theme-checkbox-mixed--border-color--warning);--theme-checkbox-mixed--border-color--hover:var(--theme-checkbox-mixed--border-color--warning--hover);--theme-checkbox-mixed--border-color--active:var(--theme-checkbox-mixed--border-color--warning--active)}:host(.ix-warning) button{background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-warning:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-warning:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-warning.checked) button,:host(.ix-warning[indeterminate]) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-warning.checked:hover) button,:host(.ix-warning[indeterminate]:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-warning.checked:active) button,:host(.ix-warning[indeterminate]:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-warning:disabled) button,:host(.ix-warning.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-warning.checked:disabled) button,:host(.ix-warning.checked.disabled) button,:host(.ix-warning[indeterminate]:disabled) button,:host(.ix-warning[indeterminate].disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid--required) button{--theme-checkbox-unchecked--background:var(--theme-checkbox-unchecked--background--invalid);--theme-checkbox-unchecked--background--hover:var(--theme-checkbox-unchecked--background--invalid--hover);--theme-checkbox-unchecked--background--active:var(--theme-checkbox-unchecked--background--invalid--active);--theme-checkbox-unchecked--border-color:var(--theme-checkbox-unchecked--border-color--invalid);--theme-checkbox-unchecked--border-color--hover:var(--theme-checkbox-unchecked--border-color--invalid--hover);--theme-checkbox-unchecked--border-color--active:var(--theme-checkbox-unchecked--border-color--invalid--active);--theme-checkbox-checked--background:var(--theme-checkbox-checked--background--invalid);--theme-checkbox-checked--background--hover:var(--theme-checkbox-checked--background--invalid--hover);--theme-checkbox-checked--background--active:var(--theme-checkbox-checked--background--invalid--active);--theme-checkbox-checked--border-color:var(--theme-checkbox-checked--border-color--invalid);--theme-checkbox-checked--border-color--hover:var(--theme-checkbox-checked--border-color--invalid--hover);--theme-checkbox-checked--border-color--active:var(--theme-checkbox-checked--border-color--invalid--active);--theme-checkbox-mixed--background:var(--theme-checkbox-mixed--background--invalid);--theme-checkbox-mixed--background--hover:var(--theme-checkbox-mixed--background--invalid--hover);--theme-checkbox-mixed--background--active:var(--theme-checkbox-mixed--background--invalid--active);--theme-checkbox-mixed--border-color:var(--theme-checkbox-mixed--border-color--invalid);--theme-checkbox-mixed--border-color--hover:var(--theme-checkbox-mixed--border-color--invalid--hover);--theme-checkbox-mixed--border-color--active:var(--theme-checkbox-mixed--border-color--invalid--active)}:host(.ix-invalid--required) button{background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid--required:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid--required:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid--required.checked) button,:host(.ix-invalid--required[indeterminate]) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid--required.checked:hover) button,:host(.ix-invalid--required[indeterminate]:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid--required.checked:active) button,:host(.ix-invalid--required[indeterminate]:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid--required:disabled) button,:host(.ix-invalid--required.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid--required.checked:disabled) button,:host(.ix-invalid--required.checked.disabled) button,:host(.ix-invalid--required[indeterminate]:disabled) button,:host(.ix-invalid--required[indeterminate].disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid) button{--theme-checkbox-unchecked--background:var(--theme-checkbox-unchecked--background--invalid);--theme-checkbox-unchecked--background--hover:var(--theme-checkbox-unchecked--background--invalid--hover);--theme-checkbox-unchecked--background--active:var(--theme-checkbox-unchecked--background--invalid--active);--theme-checkbox-unchecked--border-color:var(--theme-checkbox-unchecked--border-color--invalid);--theme-checkbox-unchecked--border-color--hover:var(--theme-checkbox-unchecked--border-color--invalid--hover);--theme-checkbox-unchecked--border-color--active:var(--theme-checkbox-unchecked--border-color--invalid--active);--theme-checkbox-checked--background:var(--theme-checkbox-checked--background--invalid);--theme-checkbox-checked--background--hover:var(--theme-checkbox-checked--background--invalid--hover);--theme-checkbox-checked--background--active:var(--theme-checkbox-checked--background--invalid--active);--theme-checkbox-checked--border-color:var(--theme-checkbox-checked--border-color--invalid);--theme-checkbox-checked--border-color--hover:var(--theme-checkbox-checked--border-color--invalid--hover);--theme-checkbox-checked--border-color--active:var(--theme-checkbox-checked--border-color--invalid--active);--theme-checkbox-mixed--background:var(--theme-checkbox-mixed--background--invalid);--theme-checkbox-mixed--background--hover:var(--theme-checkbox-mixed--background--invalid--hover);--theme-checkbox-mixed--background--active:var(--theme-checkbox-mixed--background--invalid--active);--theme-checkbox-mixed--border-color:var(--theme-checkbox-mixed--border-color--invalid);--theme-checkbox-mixed--border-color--hover:var(--theme-checkbox-mixed--border-color--invalid--hover);--theme-checkbox-mixed--border-color--active:var(--theme-checkbox-mixed--border-color--invalid--active)}:host(.ix-invalid) button{background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid.checked) button,:host(.ix-invalid[indeterminate]) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid.checked:hover) button,:host(.ix-invalid[indeterminate]:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid.checked:active) button,:host(.ix-invalid[indeterminate]:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid:disabled) button,:host(.ix-invalid.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid.checked:disabled) button,:host(.ix-invalid.checked.disabled) button,:host(.ix-invalid[indeterminate]:disabled) button,:host(.ix-invalid[indeterminate].disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(:disabled),:host(.disabled){pointer-events:none}:host(:disabled) button,:host(:disabled) label,:host(:disabled) input,:host(.disabled) button,:host(.disabled) label,:host(.disabled) input{pointer-events:none}";const i=b;var a=undefined&&undefined.__decorate||function(e,c,o,r){var h=arguments.length,d=h<3?c:r===null?r=Object.getOwnPropertyDescriptor(c,o):r,t;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")d=Reflect.decorate(e,c,o,r);else for(var b=e.length-1;b>=0;b--)if(t=e[b])d=(h<3?t(d):h>3?t(c,o,d):t(c,o))||d;return h>3&&d&&Object.defineProperty(c,o,d),d};const k=class{constructor(o){e(this,o);this.checkedChange=c(this,"checkedChange",7);this.valueChange=c(this,"valueChange",7);if(o.$hostElement$["s-ei"]){this.formInternals=o.$hostElement$["s-ei"]}else{this.formInternals=o.$hostElement$.attachInternals();o.$hostElement$["s-ei"]=this.formInternals}this.inputRef=t((e=>{e.checked=this.checked}));this.name=undefined;this.value="on";this.label=undefined;this.checked=false;this.disabled=false;this.indeterminate=false;this.required=false}setCheckedState(e){this.checked=e;this.checkedChange.emit(this.checked)}onCheckedChange(){this.updateFormInternalValue()}onValueChange(){this.valueChange.emit(this.value)}componentWillLoad(){this.updateFormInternalValue()}updateFormInternalValue(){var e;if(this.checked){this.formInternals.setFormValue((e=this.value)!==null&&e!==void 0?e:"on")}else{this.formInternals.setFormValue(null)}}hasValidValue(){return Promise.resolve(this.checked)}getAssociatedFormElement(){return Promise.resolve(this.formInternals.form)}updateClassMappings(){}renderCheckmark(){if(this.checked){return o("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("path",{d:"M3.65625 8.15625L8.4375 12.9375L14.625 3.9375",stroke:"var(--ix-checkbox-check-color)","stroke-width":"2"}))}if(this.indeterminate){return o("svg",{width:"18",height:"18",viewBox:"0 0 18 18",fill:"none",xmlns:"http://www.w3.org/2000/svg"},o("rect",{width:"18",height:"18",fill:"transparent"}),o("rect",{x:"3",y:"8",width:"12",height:"2",fill:"var(--ix-checkbox-check-color)"}))}}render(){return o(r,{key:"0cc32a63622ae40829ef544d116471d5e9666d5f","aria-checked":`${this.checked}`,"aria-disabled":`${this.disabled}`,role:"checkbox",class:{disabled:this.disabled,checked:this.checked}},o("label",{key:"b21ec6c0b7937c5f998fc6edb87a77efa9a0c034"},o("input",{key:"e15124777edfa5841051be691325ea7bbdd47adf","aria-checked":`${this.checked}`,disabled:this.disabled,checked:this.checked,ref:this.inputRef,type:"checkbox",onChange:()=>this.setCheckedState(!this.checked)}),o("button",{key:"572b191b7f83581f70ab168587804e1be60e99c5",disabled:this.disabled,class:{checked:this.checked},onClick:()=>this.setCheckedState(!this.checked)},this.renderCheckmark()),o("ix-typography",{key:"0c757feb616094d959fc67969c291b8b3f280263",format:"label",textColor:this.disabled?"weak":"std"},this.label,o("slot",{key:"ed1f3922fb8d9398224d0f80d86ea87e83a63fb8"}))))}static get formAssociated(){return true}get hostElement(){return h(this)}static get watchers(){return{checked:["onCheckedChange"],value:["onValueChange"]}}};a([d()],k.prototype,"updateClassMappings",null);k.style=i;export{k as ix_checkbox};
-//# sourceMappingURL=p-6f83793b.entry.js.map

package/dist/siemens-ix/p-6f83793b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxCss","IxCheckboxStyle0","Checkbox","this","inputRef","makeRef","checkboxRef","checked","setCheckedState","newChecked","checkedChange","emit","onCheckedChange","updateFormInternalValue","onValueChange","valueChange","value","componentWillLoad","formInternals","setFormValue","_a","hasValidValue","Promise","resolve","getAssociatedFormElement","form","updateClassMappings","renderCheckmark","h","width","height","viewBox","fill","xmlns","d","stroke","indeterminate","x","y","render","Host","key","disabled","role","class","ref","type","onChange","onClick","format","textColor","label","__decorate","HookValidationLifecycle"],"sources":["src/components/checkbox/checkbox.scss?tag=ix-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n @import 'mixins/shadow-dom/component';\n\n:host {\n  --ix-checkbox-check-color: var(--theme-color-primary--contrast);\n\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n\n  button {\n    all: unset;\n  }\n\n  button {\n    display: inline-flex;\n    position: relative;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 1.125rem;\n    min-width: 1.125rem;\n    max-width: 1.125rem;\n    height: 1.125rem;\n    min-height: 1.125rem;\n    max-height: 1.125rem;\n    margin-right: 0.5rem;\n  }\n\n  button:disabled {\n    background-color: var(--theme-checkbox-unchecked--background--disabled);\n    border: var(--theme-checkbox--border-thickness) solid\n      var(--theme-checkbox-unchecked--border-color--disabled);\n  }\n\n  button:focus-visible {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: var(--theme-checkbox--focus--outline-offset);\n  }\n\n  input[type=\"checkbox\"] {\n    display: none;\n  }\n\n  label {\n    display: flex;\n\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    width: 100%;\n    height: 100%;\n  }\n\n  ix-typography {\n    margin-top: 0.125rem;\n  }\n}\n\n@mixin checkbox-base() {\n  :host {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color);\n    }\n  }\n\n  :host(:hover) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--hover);\n    }\n  }\n\n  :host(:active) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--active);\n    }\n  }\n\n  :host(.checked),\n  :host([indeterminate]) {\n    button {\n      background-color: var(--theme-checkbox-checked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color);\n    }\n  }\n\n  :host(.checked:hover),\n  :host([indeterminate]:hover) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--hover);\n    }\n  }\n\n  :host(.checked:active),\n  :host([indeterminate]:active) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--active);\n    }\n  }\n\n  :host(:disabled),\n  :host(.disabled) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(.checked:disabled),\n  :host(.checked.disabled),\n  :host([indeterminate]:disabled),\n  :host([indeterminate].disabled) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin checkbox-variant($selector) {\n  :host(#{$selector}) {\n    button {\n      @content;\n    }\n  }\n\n  :host(#{$selector}) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color);\n    }\n  }\n\n  :host(#{$selector}:hover) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}:active) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.checked),\n  :host(#{$selector}[indeterminate]) {\n    button {\n      background-color: var(--theme-checkbox-checked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color);\n    }\n  }\n\n  :host(#{$selector}.checked:hover),\n  :host(#{$selector}[indeterminate]:hover) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}.checked:active),\n  :host(#{$selector}[indeterminate]:active) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}:disabled),\n  :host(#{$selector}.disabled) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(#{$selector}.checked:disabled),\n  :host(#{$selector}.checked.disabled),\n  :host(#{$selector}[indeterminate]:disabled),\n  :host(#{$selector}[indeterminate].disabled) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin define-checkbox-vars($state, $type) {\n  --theme-checkbox-#{$state}--background: var(--theme-checkbox-#{$state}--background--#{$type});\n  --theme-checkbox-#{$state}--background--hover: var(--theme-checkbox-#{$state}--background--#{$type}--hover);\n  --theme-checkbox-#{$state}--background--active: var(--theme-checkbox-#{$state}--background--#{$type}--active);\n\n  --theme-checkbox-#{$state}--border-color: var(--theme-checkbox-#{$state}--border-color--#{$type});\n  --theme-checkbox-#{$state}--border-color--hover: var(--theme-checkbox-#{$state}--border-color--#{$type}--hover);\n  --theme-checkbox-#{$state}--border-color--active: var(--theme-checkbox-#{$state}--border-color--#{$type}--active);\n}\n\n@include checkbox-base();\n@include checkbox-variant(\n  $selector: '.ix-info',\n) {\n  @include define-checkbox-vars('unchecked', 'info');\n  @include define-checkbox-vars('checked', 'info');\n  @include define-checkbox-vars('mixed', 'info');\n}\n\n@include checkbox-variant(\n  $selector: '.ix-warning',\n) {\n  @include define-checkbox-vars('unchecked', 'warning');\n  @include define-checkbox-vars('checked', 'warning');\n  @include define-checkbox-vars('mixed', 'warning');\n}\n\n@include checkbox-variant(\n  $selector: '.ix-invalid--required',\n) {\n  @include define-checkbox-vars('unchecked', 'invalid');\n  @include define-checkbox-vars('checked', 'invalid');\n  @include define-checkbox-vars('mixed', 'invalid');\n}\n\n@include checkbox-variant(\n  $selector: '.ix-invalid',\n) {\n  @include define-checkbox-vars('unchecked', 'invalid');\n  @include define-checkbox-vars('checked', 'invalid');\n  @include define-checkbox-vars('mixed', 'invalid');\n}\n\n:host(:disabled),\n:host(.disabled) {\n  pointer-events: none;\n\n  button,\n  label,\n  input {\n    pointer-events: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Element,\n  Method,\n} from '@stencil/core';\nimport { HookValidationLifecycle, IxFormComponent } from '../utils/field';\nimport { makeRef } from '../utils/make-ref';\n\n/**\n * @since 2.4.0\n * @form-ready 2.4.0\n */\n@Component({\n  tag: 'ix-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Checkbox implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxCheckboxElement;\n\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the checkbox component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the checkbox component\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * Label for the checkbox component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Checked state of the checkbox component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Disabled state of the checkbox component\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Indeterminate state of the checkbox component\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /**\n   * Required state of the checkbox component.\n   *\n   * If true, checkbox needs to be checked to be valid\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * Event emitted when the checked state of the checkbox changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the checkbox changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  private inputRef = makeRef<HTMLInputElement>((checkboxRef) => {\n    checkboxRef.checked = this.checked;\n  });\n\n  private setCheckedState(newChecked: boolean) {\n    this.checked = newChecked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  @Watch('checked')\n  onCheckedChange() {\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  @HookValidationLifecycle()\n  updateClassMappings() {}\n\n  private renderCheckmark() {\n    if (this.checked) {\n      return (\n        <svg\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 18 18\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M3.65625 8.15625L8.4375 12.9375L14.625 3.9375\"\n            stroke=\"var(--ix-checkbox-check-color)\"\n            stroke-width=\"2\"\n          />\n        </svg>\n      );\n    }\n\n    if (this.indeterminate) {\n      return (\n        <svg\n          width=\"18\"\n          height=\"18\"\n          viewBox=\"0 0 18 18\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <rect width=\"18\" height=\"18\" fill=\"transparent\" />\n          <rect\n            x=\"3\"\n            y=\"8\"\n            width=\"12\"\n            height=\"2\"\n            fill=\"var(--ix-checkbox-check-color)\"\n          />\n        </svg>\n      );\n    }\n  }\n\n  render() {\n    return (\n      <Host\n        aria-checked={`${this.checked}`}\n        aria-disabled={`${this.disabled}`}\n        role=\"checkbox\"\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n        }}\n      >\n        <label>\n          <input\n            aria-checked={`${this.checked}`}\n            disabled={this.disabled}\n            checked={this.checked}\n            ref={this.inputRef}\n            type=\"checkbox\"\n            onChange={() => this.setCheckedState(!this.checked)}\n          />\n          <button\n            disabled={this.disabled}\n            class={{\n              checked: this.checked,\n            }}\n            onClick={() => this.setCheckedState(!this.checked)}\n          >\n            {this.renderCheckmark()}\n          </button>\n          <ix-typography\n            format=\"label\"\n            textColor={this.disabled ? 'weak' : 'std'}\n          >\n            {this.label}\n            <slot></slot>\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"mappings":"mIAAA,MAAMA,EAAc,u6kBACpB,MAAAC,EAAeD,E,iXCiCFE,EAAQ,M,2RAoDXC,KAAAC,SAAWC,GAA2BC,IAC5CA,EAAYC,QAAUJ,KAAKI,OAAO,I,+BAxCK,K,kCAUkB,M,cAKd,M,mBAKK,M,cAOd,K,CAgB5B,eAAAC,CAAgBC,GACtBN,KAAKI,QAAUE,EACfN,KAAKO,cAAcC,KAAKR,KAAKI,Q,CAI/B,eAAAK,GACET,KAAKU,yB,CAIP,aAAAC,GACEX,KAAKY,YAAYJ,KAAKR,KAAKa,M,CAG7B,iBAAAC,GACEd,KAAKU,yB,CAGP,uBAAAA,G,MACE,GAAIV,KAAKI,QAAS,CAChBJ,KAAKe,cAAcC,cAAaC,EAAAjB,KAAKa,SAAK,MAAAI,SAAA,EAAAA,EAAI,K,KACzC,CACLjB,KAAKe,cAAcC,aAAa,K,EAMpC,aAAAE,GACE,OAAOC,QAAQC,QAAQpB,KAAKI,Q,CAK9B,wBAAAiB,GACE,OAAOF,QAAQC,QAAQpB,KAAKe,cAAcO,K,CAI5C,mBAAAC,GAAmB,CAEX,eAAAC,GACN,GAAIxB,KAAKI,QAAS,CAChB,OACEqB,EAAA,OACEC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAENL,EAAA,QACEM,EAAE,gDACFC,OAAO,iCAAgC,eAC1B,M,CAMrB,GAAIhC,KAAKiC,cAAe,CACtB,OACER,EAAA,OACEC,MAAM,KACNC,OAAO,KACPC,QAAQ,YACRC,KAAK,OACLC,MAAM,8BAENL,EAAA,QAAMC,MAAM,KAAKC,OAAO,KAAKE,KAAK,gBAClCJ,EAAA,QACES,EAAE,IACFC,EAAE,IACFT,MAAM,KACNC,OAAO,IACPE,KAAK,mC,EAOf,MAAAO,GACE,OACEX,EAACY,EAAI,CAAAC,IAAA,0DACW,GAAGtC,KAAKI,UAAS,gBAChB,GAAGJ,KAAKuC,WACvBC,KAAK,WACLC,MAAO,CACLF,SAAUvC,KAAKuC,SACfnC,QAASJ,KAAKI,UAGhBqB,EAAA,SAAAa,IAAA,4CACEb,EAAA,SAAAa,IAAA,0DACgB,GAAGtC,KAAKI,UACtBmC,SAAUvC,KAAKuC,SACfnC,QAASJ,KAAKI,QACdsC,IAAK1C,KAAKC,SACV0C,KAAK,WACLC,SAAU,IAAM5C,KAAKK,iBAAiBL,KAAKI,WAE7CqB,EAAA,UAAAa,IAAA,2CACEC,SAAUvC,KAAKuC,SACfE,MAAO,CACLrC,QAASJ,KAAKI,SAEhByC,QAAS,IAAM7C,KAAKK,iBAAiBL,KAAKI,UAEzCJ,KAAKwB,mBAERC,EAAA,iBAAAa,IAAA,2CACEQ,OAAO,QACPC,UAAW/C,KAAKuC,SAAW,OAAS,OAEnCvC,KAAKgD,MACNvB,EAAA,QAAAa,IAAA,+C,8JA7EVW,EAAA,CADCC,K"}

package/dist/siemens-ix/p-702f9349.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["debounce","func","delay","timeoutId","debounced","args","clearTimeout","setTimeout","ApplicationLayoutService","constructor","_ApplicationLayoutService_supportedBreakpoints","set","this","_ApplicationLayoutService_breakpointChangeListener","TypedEvent","_ApplicationLayoutService_breakpoint","_ApplicationLayoutService_isDetectionEnabled","debouncedOnResize","onResize","bind","window","addEventListener","breakpoint","__classPrivateFieldGet","onChange","isDetectionEnabled","matchBreakpoints","breakpoints","forEach","match","matchBreakpoint","push","every","_","breakPointIndex","includes","length","emit","__classPrivateFieldSet","reverse","disableBreakpointDetection","enableBreakpointDetection","setBreakpoint","setBreakpoints","applicationLayoutService"],"sources":["src/components/utils/debounce.ts","src/components/utils/application-layout/service.ts"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\ntype AnyFunction = (...args: any[]) => any;\n\nexport function debounce<T extends AnyFunction>(\n  func: T,\n  delay: number\n): (...args: Parameters<T>) => void {\n  let timeoutId: ReturnType<typeof setTimeout>;\n\n  return function debounced(...args: Parameters<T>): void {\n    clearTimeout(timeoutId);\n\n    timeoutId = setTimeout(() => {\n      func(...args);\n    }, delay);\n  };\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\nimport { Breakpoint, matchBreakpoint } from '../breakpoints';\nimport { debounce } from '../debounce';\nimport { TypedEvent } from '../typed-event';\n\nclass ApplicationLayoutService {\n  // Keep order of breakpoints\n  #supportedBreakpoints: Breakpoint[] = ['sm', 'md', 'lg'];\n  #breakpointChangeListener = new TypedEvent<Breakpoint>();\n  #breakpoint: Breakpoint = 'lg';\n\n  #isDetectionEnabled = true;\n  debouncedOnResize = debounce(this.onResize.bind(this), 50);\n\n  constructor() {\n    if (typeof window !== 'undefined') {\n      window.addEventListener('resize', this.debouncedOnResize.bind(this));\n      this.debouncedOnResize();\n    }\n  }\n\n  get breakpoint() {\n    return this.#breakpoint;\n  }\n\n  get onChange() {\n    return this.#breakpointChangeListener;\n  }\n\n  get isDetectionEnabled() {\n    return this.#isDetectionEnabled;\n  }\n\n  private onResize() {\n    if (!this.#isDetectionEnabled) {\n      return;\n    }\n    if (!this.#supportedBreakpoints) {\n      return;\n    }\n    const matchBreakpoints: [Breakpoint, boolean][] = [];\n\n    const breakpoints = this.#supportedBreakpoints;\n\n    breakpoints.forEach((breakpoint) => {\n      const match = matchBreakpoint(breakpoint);\n      matchBreakpoints.push([breakpoint, match]);\n    });\n\n    if (matchBreakpoints.every(([_, match]) => match === false)) {\n      let breakPointIndex = 0;\n      if (!this.#supportedBreakpoints.includes('lg')) {\n        breakPointIndex = matchBreakpoints.length - 1;\n      }\n\n      const [breakpoint, _] = matchBreakpoints[breakPointIndex];\n      this.#breakpointChangeListener.emit(breakpoint);\n      this.#breakpoint = breakpoint;\n      return;\n    }\n\n    for (const [breakpoint, match] of matchBreakpoints.reverse()) {\n      if (match) {\n        this.#breakpointChangeListener.emit(breakpoint);\n        this.#breakpoint = breakpoint;\n        break;\n      }\n    }\n  }\n\n  public disableBreakpointDetection() {\n    this.#isDetectionEnabled = false;\n  }\n\n  public enableBreakpointDetection() {\n    this.#isDetectionEnabled = true;\n  }\n\n  public setBreakpoint(breakpoint: Breakpoint) {\n    this.#breakpoint = breakpoint;\n    this.#breakpointChangeListener.emit(breakpoint);\n  }\n\n  public setBreakpoints(breakpoints: Breakpoint[]) {\n    this.#supportedBreakpoints = breakpoints;\n    this.onResize();\n  }\n}\n\nexport const applicationLayoutService = new ApplicationLayoutService();\n"],"mappings":"iFAUgBA,EACdC,EACAC,GAEA,IAAIC,EAEJ,OAAO,SAASC,KAAaC,GAC3BC,aAAaH,GAEbA,EAAYI,YAAW,KACrBN,KAAQI,EAAK,GACZH,E,CAEP,C,swBCXA,MAAMM,EASJ,WAAAC,GAPAC,EAAAC,IAAAC,KAAsC,CAAC,KAAM,KAAM,OACnDC,EAAAF,IAAAC,KAA4B,IAAIE,GAChCC,EAAAJ,IAAAC,KAA0B,MAE1BI,EAAAL,IAAAC,KAAsB,MACtBA,KAAAK,kBAAoBjB,EAASY,KAAKM,SAASC,KAAKP,MAAO,IAGrD,UAAWQ,SAAW,YAAa,CACjCA,OAAOC,iBAAiB,SAAUT,KAAKK,kBAAkBE,KAAKP,OAC9DA,KAAKK,mB,EAIT,cAAIK,GACF,OAAOC,EAAAX,KAAIG,EAAA,I,CAGb,YAAIS,GACF,OAAOD,EAAAX,KAAIC,EAAA,I,CAGb,sBAAIY,GACF,OAAOF,EAAAX,KAAII,EAAA,I,CAGL,QAAAE,GACN,IAAKK,EAAAX,KAAII,EAAA,KAAsB,CAC7B,M,CAEF,IAAKO,EAAAX,KAAIF,EAAA,KAAwB,CAC/B,M,CAEF,MAAMgB,EAA4C,GAElD,MAAMC,EAAcJ,EAAAX,KAAIF,EAAA,KAExBiB,EAAYC,SAASN,IACnB,MAAMO,EAAQC,EAAgBR,GAC9BI,EAAiBK,KAAK,CAACT,EAAYO,GAAO,IAG5C,GAAIH,EAAiBM,OAAM,EAAEC,EAAGJ,KAAWA,IAAU,QAAQ,CAC3D,IAAIK,EAAkB,EACtB,IAAKX,EAAAX,KAAIF,EAAA,KAAuByB,SAAS,MAAO,CAC9CD,EAAkBR,EAAiBU,OAAS,C,CAG9C,MAAOd,EAAYW,GAAKP,EAAiBQ,GACzCX,EAAAX,KAAIC,EAAA,KAA2BwB,KAAKf,GACpCgB,EAAA1B,KAAIG,EAAeO,EAAU,KAC7B,M,CAGF,IAAK,MAAOA,EAAYO,KAAUH,EAAiBa,UAAW,CAC5D,GAAIV,EAAO,CACTN,EAAAX,KAAIC,EAAA,KAA2BwB,KAAKf,GACpCgB,EAAA1B,KAAIG,EAAeO,EAAU,KAC7B,K,GAKC,0BAAAkB,GACLF,EAAA1B,KAAII,EAAuB,MAAK,I,CAG3B,yBAAAyB,GACLH,EAAA1B,KAAII,EAAuB,KAAI,I,CAG1B,aAAA0B,CAAcpB,GACnBgB,EAAA1B,KAAIG,EAAeO,EAAU,KAC7BC,EAAAX,KAAIC,EAAA,KAA2BwB,KAAKf,E,CAG/B,cAAAqB,CAAehB,GACpBW,EAAA1B,KAAIF,EAAyBiB,EAAW,KACxCf,KAAKM,U,gEAII0B,EAA2B,IAAIpC,S"}

package/dist/siemens-ix/p-70a7bd22.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as i,h as e,H as s,g as o}from"./p-f86a894a.js";import{A as r}from"./p-c09553f3.js";import{O as h}from"./p-224ebf90.js";import{c as n}from"./p-e898862b.js";import{H as a}from"./p-42c66a44.js";import{m as l}from"./p-dead9c8e.js";import{a as d}from"./p-36c0f378.js";const c=":host{display:inline-block;position:relative;min-height:2rem;height:auto;border-radius:var(--theme-input--border-radius)}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .d-none{display:none}:host .select{position:relative;display:flex;align-items:center;width:100%;background-color:var(--theme-input--background);border:var(--theme-input--border-thickness) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);padding:0 0 0 0.5rem;box-shadow:var(--theme-inset-shadow-1) !important}:host .select:not(.disabled):not(:disabled){cursor:pointer}:host .select:not(.disabled):not(:disabled):hover{background-color:var(--theme-input--background--hover);border-color:var(--theme-input--border-color--hover)}:host .select:focus-within{background-color:var(--theme-input--background--focus);border-color:var(--theme-input--border-color--focus);outline:1px solid #119fff;outline-offset:var(--theme-input--focus--outline-offset)}:host .select.readonly,:host .select.disabled{box-shadow:none !important;border:none;border-radius:0;cursor:pointer}:host .select.readonly,:host .select.readonly:hover,:host .select.readonly:active,:host .select.disabled,:host .select.disabled:hover,:host .select.disabled:active{background-color:transparent !important}:host .select.readonly:focus,:host .select.readonly:focus-within,:host .select.readonly:focus-visible,:host .select.disabled:focus,:host .select.disabled:focus-within,:host .select.disabled:focus-visible{outline:none}:host .select.readonly input:focus,:host .select.readonly input:focus-visible,:host .select.disabled input:focus,:host .select.disabled input:focus-visible{outline:none}:host .select.disabled{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-weak-bdr)}:host .select.disabled input{color:var(--theme-color-weak-text)}:host .select.readonly{border-bottom:var(--theme-input--border-thickness) solid var(--theme-color-soft-bdr)}:host .select.readonly input{color:var(--theme-color-std-text)}:host .hidden{display:none !important}:host .trigger{display:flex;align-items:center;flex-grow:1;height:100%}:host .input-container{display:flex;position:relative;align-items:flex-start;width:100%;height:100%}:host .input-container .chips{position:relative;display:flex;align-items:center;flex-wrap:wrap;height:100%;max-height:3.5rem;flex-grow:1;overflow-y:auto}:host .input-container .chips>ix-filter-chip{margin:0.1rem}:host .input-container input{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale;font-family:Siemens Sans, sans-serif;font-size:0.875rem;font-weight:400;line-height:1.429em;color:var(--theme-color-std-text);background:transparent;height:1.75rem;width:100%}:host .input-container input,:host .input-container input:hover,:host .input-container input:focus-visible{border:none;outline:none}:host .input-container input::-moz-placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input::placeholder{color:var(--theme-input-select-icon--color)}:host .input-container input.hide-placeholder::-moz-placeholder{opacity:0}:host .input-container input.hide-placeholder::placeholder{opacity:0}:host .dropdown-visible{--ix-icon-button-color:var(--theme-color-dynamic--hover)}:host .add-item{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%}:host .select-list-header{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;height:2rem;color:var(--theme-select-list-item-hint--color);margin:0 0.5rem 0 1rem}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select:hover{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled])) .select:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select{border-color:var(--theme-input--border-color--warning)}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select:hover{border-color:var(--theme-input--border-color--warning--hover) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled])) .select:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select{border-color:var(--theme-input--border-color--invalid);background-color:var(--theme-input--background--invalid);box-shadow:none}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select:hover{border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled])) .select:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled])) .select:active{border-color:var(--theme-input--border-color--invalid--active) !important}";const u=c;var b=undefined&&undefined.__decorate||function(t,i,e,s){var o=arguments.length,r=o<3?i:s===null?s=Object.getOwnPropertyDescriptor(i,e):s,h;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")r=Reflect.decorate(t,i,e,s);else for(var n=t.length-1;n>=0;n--)if(h=t[n])r=(o<3?h(r):o>3?h(i,e,r):h(i,e))||r;return o>3&&r&&Object.defineProperty(i,e,r),r};const f=class{constructor(e){t(this,e);this.valueChange=i(this,"valueChange",7);this.itemSelectionChange=i(this,"itemSelectionChange",7);this.inputChange=i(this,"inputChange",7);this.addItem=i(this,"addItem",7);this.ixBlur=i(this,"ixBlur",7);if(e.$hostElement$["s-ei"]){this.formInternals=e.$hostElement$["s-ei"]}else{this.formInternals=e.$hostElement$.attachInternals();e.$hostElement$["s-ei"]=this.formInternals}this.inputRef=l();this.focusControllerCallbackBind=this.focusDropdownItem.bind(this);this.itemObserver=n((()=>{this.arrowFocusController.items=this.visibleNonShadowItems}));this.name=undefined;this.required=false;this.label=undefined;this.warningText=undefined;this.infoText=undefined;this.invalidText=undefined;this.validText=undefined;this.helperText=undefined;this.showTextAsTooltip=undefined;this.selectedIndices=undefined;this.value=[];this.allowClear=false;this.mode="single";this.editable=false;this.disabled=false;this.readonly=false;this.i18nPlaceholder="Select an option";this.i18nPlaceholderEditable="Type of select option";this.i18nSelectListHeader="Please select an option";this.i18nNoMatches="No matches";this.hideListHeader=false;this.dropdownShow=false;this.selectedLabels=undefined;this.dropdownWrapperRef=undefined;this.dropdownAnchor=undefined;this.isDropdownEmpty=false;this.navigationItem=null;this.inputFilterText=undefined;this.inputValue=null;this.isInvalid=false;this.isValid=false;this.isInfo=false;this.isWarning=false}get nonShadowItems(){return Array.from(this.hostElement.querySelectorAll("ix-select-item"))}get visibleNonShadowItems(){return this.nonShadowItems.filter((t=>!t.classList.contains("d-none")))}get shadowItems(){return Array.from(this.hostElement.shadowRoot.querySelectorAll("ix-select-item"))}get visibleShadowItems(){return this.shadowItems.filter((t=>!t.classList.contains("d-none")))}get items(){return[...this.nonShadowItems,...this.shadowItems]}get visibleItems(){return this.items.filter((t=>!t.classList.contains("d-none")))}get selectedItems(){return this.items.filter((t=>t.selected))}get addItemButton(){return this.hostElement.shadowRoot.querySelector(".add-item")}get isSingleMode(){return this.mode==="single"}get isMultipleMode(){return this.mode==="multiple"}get isEveryDropdownItemHidden(){return this.items.every((t=>t.classList.contains("d-none")))}watchSelectedIndices(t){this.value=t;this.updateSelection()}watchValue(t){this.selectedIndices=t;this.updateSelection()}watchDropdownShow(t){if(t){this.arrowFocusController=new r(this.visibleNonShadowItems,this.dropdownRef,this.focusControllerCallbackBind);this.arrowFocusController.wrap=!this.editable;this.itemObserver.observe(this.dropdownRef,{childList:true,subtree:true})}else{this.arrowFocusController.disconnect();this.itemObserver.disconnect()}}onItemClicked(t){const i=t.detail;this.itemClick(i)}async updateFormInternalValue(t){if(Array.isArray(t)){this.formInternals.setFormValue(t.join(","));return}this.formInternals.setFormValue(t)}async hasValidValue(){return this.required&&!!this.hasValue()}hasValue(){if(Array.isArray(this.value)){return!!this.value.length}return!!this.value}focusDropdownItem(t){var i,e;this.navigationItem=null;if(t<this.visibleNonShadowItems.length){const s=(e=(i=this.visibleNonShadowItems[t])===null||i===void 0?void 0:i.shadowRoot)===null||e===void 0?void 0:e.querySelector("ix-dropdown-item");requestAnimationFrame((()=>{s.shadowRoot.querySelector("button").focus()}))}}itemClick(t){this.value=this.toggleValue(t);this.updateSelection();this.emitValueChange(this.value)}emitAddItem(t){if(t===undefined||t.trim()===""){return}const i=document.createElement("ix-select-item");i.value=t;i.label=t;this.customItemsContainerRef.appendChild(i);this.clearInput();this.itemClick(t);this.addItem.emit(t)}toggleValue(t){if(!this.isMultipleMode){return t}if(!this.value){return[t]}let i=this.value;if(!Array.isArray(i)){i=[i]}if(i.includes(t)){return i.filter((i=>i!==t))}else{return[...i,t]}}updateSelection(){var t;let i=[];if(this.value){i=Array.isArray(this.value)?[...this.value]:[this.value]}this.items.forEach((t=>{t.selected=i.some((i=>{if(typeof i!==typeof t.value){return i.toString()===t.value.toString()}else{return i===t.value}}))}));this.selectedLabels=this.selectedItems.map((t=>t.label));if(this.isSingleMode&&((t=this.selectedLabels)===null||t===void 0?void 0:t.length)){this.inputValue=this.selectedLabels[0];this.input&&(this.input.value=this.inputValue);return}this.inputValue=null}emitValueChange(t){this.valueChange.emit(t);if(!t){this.itemSelectionChange.emit([])}else{this.itemSelectionChange.emit(Array.isArray(t)?t:[t])}this.updateFormInternalValue(t)}componentDidLoad(){this.input.addEventListener("input",(()=>{this.dropdownShow=true;this.inputChange.emit(this.input.value)}))}componentWillLoad(){if(this.selectedIndices&&!this.value){this.value=this.selectedIndices}this.updateSelection();this.updateFormInternalValue(this.value)}onLabelChange(t){t.preventDefault();t.stopImmediatePropagation();this.updateSelection()}disconnectedCallback(){if(this.itemMutationObserver){this.itemMutationObserver.disconnect()}}itemExists(t){return this.items.find((i=>i.label===t))}dropdownVisibilityChanged(t){this.dropdownShow=t.detail;if(t.detail){this.input.focus();this.input.select();this.removeHiddenFromItems();this.isDropdownEmpty=this.isEveryDropdownItemHidden}else{this.navigationItem=null;this.updateSelection();this.inputFilterText=""}}async onKeyDown(t){if(t.code==="ArrowDown"||t.code==="ArrowUp"){await this.onArrowNavigation(t,t.code)}if(!this.dropdownShow){return}if(t.code==="Enter"||t.code==="NumpadEnter"){await this.onEnterNavigation()}if(t.code==="Escape"){this.dropdownShow=false}}async onEnterNavigation(){var t;if(this.isMultipleMode){return}let i;if(this.editable&&!this.itemExists(this.inputFilterText)){this.emitAddItem(this.inputFilterText);i=this.items[this.items.length-1]}if(i){i.onItemClick()}await((t=this.dropdownRef)===null||t===void 0?void 0:t.updatePosition());if(this.isSingleMode&&!this.editable){this.dropdownShow=false}}async onArrowNavigation(t,i){if(t.defaultPrevented){return}t.preventDefault();t.stopPropagation();this.dropdownShow=true;if(!this.navigationItem&&document.activeElement===this.hostElement){if(this.visibleItems.length){this.applyFocusTo(this.visibleItems.shift())}else if(this.isAddItemVisible()){this.focusAddItemButton()}return}const e=i==="ArrowUp";const s=document.activeElement?this.visibleNonShadowItems.indexOf(document.activeElement):-1;if(s===0){if(!this.visibleShadowItems.length&&this.isAddItemVisible()){this.focusAddItemButton()}else{this.applyFocusTo(this.visibleShadowItems.pop())}return}else if(s!==-1&&s===this.visibleNonShadowItems.length-1){if(this.visibleShadowItems.length){this.applyFocusTo(this.visibleShadowItems.shift())}else if(this.isAddItemVisible()){this.focusAddItemButton()}return}if(!this.navigationItem){return}if(this.isAddItemVisible()&&this.addItemRef.contains(await this.navigationItem.getDropdownItemElement())){if(e){this.applyFocusTo(this.visibleItems.pop())}else{if(this.visibleItems.length){this.applyFocusTo(this.visibleItems.shift())}}return}const o=this.visibleShadowItems.indexOf(this.navigationItem);if(e){if(o===0){if(this.visibleNonShadowItems.length){this.applyFocusTo(this.visibleNonShadowItems.pop())}else if(this.isAddItemVisible()){this.focusAddItemButton()}}else{this.applyFocusTo(this.visibleShadowItems[o-1])}}else{if(o===this.visibleShadowItems.length-1){if(this.isAddItemVisible()){this.focusAddItemButton()}else{this.applyFocusTo(this.visibleItems.shift())}}else{this.applyFocusTo(this.visibleShadowItems[o+1])}}}applyFocusTo(t){if(!t){return}this.navigationItem=t;setTimeout((()=>{t.shadowRoot.querySelector("ix-dropdown-item").shadowRoot.querySelector("button").focus()}))}focusAddItemButton(){var t,i;if(this.addItemButton){(i=(t=this.addItemButton.shadowRoot)===null||t===void 0?void 0:t.querySelector("button"))===null||i===void 0?void 0:i.focus();this.navigationItem=this.addItemRef}}filterItemsWithTypeahead(){this.inputFilterText=this.input.value;if(this.isSingleMode&&this.inputFilterText===this.selectedLabels[0]){return}if(this.inputFilterText){this.items.forEach((t=>{t.classList.remove("d-none");if(!t.label.toLowerCase().includes(this.inputFilterText.toLowerCase())){t.classList.add("d-none")}}))}else{this.removeHiddenFromItems()}if(this.arrowFocusController){this.arrowFocusController.items=this.visibleNonShadowItems}this.isDropdownEmpty=this.isEveryDropdownItemHidden}removeHiddenFromItems(){this.items.forEach((t=>{t.classList.remove("d-none")}))}clearInput(){this.input.value="";this.inputFilterText=""}clear(){this.clearInput();this.selectedLabels=[];this.value=[];this.emitValueChange([]);this.dropdownShow=false}onInputBlur(t){this.ixBlur.emit();if(this.editable){return}if(this.isSingleMode){return}const i=t.target;if(!this.dropdownShow&&this.mode!=="multiple"){i.value=this.selectedLabels.toString()}}placeholderValue(){if(this.disabled){return""}if(this.readonly){return""}if(this.editable){return this.i18nPlaceholderEditable}return this.i18nPlaceholder}isAddItemVisible(){return!this.itemExists(this.inputFilterText)&&this.editable&&this.inputFilterText}onValidationChange({isInvalid:t,isInvalidByRequired:i,isValid:e,isInfo:s,isWarning:o}){this.isInvalid=t||i;this.isValid=e;this.isWarning=o;this.isInfo=s}async getAssociatedFormElement(){return this.formInternals.form}getNativeInputElement(){return Promise.resolve(this.input)}render(){var t,i,o,r;return e(s,{key:"21e0971bd52ae14711ef823e767112aa3ea8427e","aria-disabled":d(this.disabled),class:{disabled:this.disabled}},e("ix-field-wrapper",{key:"709016dc62c4268b208f5469ac94274676fb3ada",required:this.required,label:this.label,helperText:this.helperText,invalidText:this.invalidText,infoText:this.infoText,warningText:this.warningText,validText:this.validText,showTextAsTooltip:this.showTextAsTooltip,isInvalid:this.isInvalid,isValid:this.isValid,isInfo:this.isInfo,isWarning:this.isWarning,controlRef:this.inputRef},e("slot",{key:"d6b6c90ec55424683d484520c6edd3aa2148d153",name:"label",slot:"label"}),e("div",{key:"50c23c58457980fb5d38d80f89f74a0b1d7c32a1",class:{select:true,disabled:this.disabled,readonly:this.readonly},ref:t=>{this.dropdownAnchor=t;if(!this.editable)this.dropdownWrapperRef=t}},e("div",{key:"2c62a44a73929e8f337b1dbbacb4f4e90a972368",class:"input-container"},e("div",{key:"b48c59522094b785eaa673618c500ab957b84916",class:"chips"},this.isMultipleMode?(t=this.selectedItems)===null||t===void 0?void 0:t.map((t=>e("ix-filter-chip",{disabled:this.disabled||this.readonly,key:t.value,onCloseClick:i=>{i.preventDefault();i.stopPropagation();this.itemClick(t.value)}},t.label))):"",e("div",{key:"80412b3e3ff58078d9a15910c552a9fd16cc723d",class:"trigger"},e("input",{key:"8c7c72a83997d0fe82acb4fa1afd2fb1d299d8a5",autocomplete:"off","data-testid":"input",disabled:this.disabled,readOnly:this.readonly,type:"text",class:{"allow-clear":this.allowClear&&!!((i=this.selectedLabels)===null||i===void 0?void 0:i.length)},placeholder:this.placeholderValue(),value:(o=this.inputValue)!==null&&o!==void 0?o:"",ref:t=>{this.input=t;this.inputRef(t)},onBlur:t=>this.onInputBlur(t),onFocus:()=>{this.navigationItem=null},onInput:()=>this.filterItemsWithTypeahead(),onKeyDown:t=>this.onKeyDown(t)}),this.allowClear&&(((r=this.selectedLabels)===null||r===void 0?void 0:r.length)||this.inputFilterText)?e("ix-icon-button",{class:"clear",icon:"clear",ghost:true,oval:true,size:"16",onClick:t=>{t.preventDefault();t.stopPropagation();this.clear()}}):null,this.disabled||this.readonly?null:e("ix-icon-button",{"data-select-dropdown":true,class:{"dropdown-visible":this.dropdownShow},icon:"chevron-down-small",ghost:true,ref:t=>{if(this.editable)this.dropdownWrapperRef=t}})))))),e("ix-dropdown",{key:"eb80a8a205741cb2a095ee8b0bbfafec2558ccaa",ref:t=>this.dropdownRef=t,show:this.dropdownShow,closeBehavior:this.isMultipleMode?"outside":"both",class:{"d-none":this.disabled||this.readonly},anchor:this.dropdownAnchor,trigger:this.dropdownWrapperRef,onShowChanged:t=>this.dropdownVisibilityChanged(t),placement:"bottom-start",overwriteDropdownStyle:async()=>{var t,i;const e=(i=(t=this.hostElement.shadowRoot)===null||t===void 0?void 0:t.querySelector(".select"))===null||i===void 0?void 0:i.getBoundingClientRect().width;return{minWidth:`${e}px`}}},e("div",{key:"9ac7e24e0add43e1f78217adf5afbf75687ac12b",class:{"select-list-header":true,hidden:this.hideListHeader||this.isDropdownEmpty},title:this.i18nSelectListHeader,onClick:t=>t.preventDefault()},this.i18nSelectListHeader),e("slot",{key:"b4ce515c73fc2ffcbab4ce4c34b8eed01904b9e0"}),e("div",{key:"24961fabb03943f19c449f31dd1151e906923620",ref:t=>this.customItemsContainerRef=t,class:"d-contents"}),this.isAddItemVisible()?e("ix-dropdown-item",{"data-testid":"add-item",icon:"plus",class:{"add-item":true},label:this.inputFilterText,onItemClick:t=>{t.preventDefault();t.stopPropagation();this.emitAddItem(this.inputFilterText)},onFocus:()=>this.navigationItem=this.addItemRef,ref:t=>{this.addItemRef=t}}):null,this.isDropdownEmpty&&!this.editable?e("div",{class:"select-list-header"},this.i18nNoMatches):""))}static get formAssociated(){return true}get hostElement(){return o(this)}static get watchers(){return{selectedIndices:["watchSelectedIndices"],value:["watchValue"],dropdownShow:["watchDropdownShow"]}}};b([h("keydown",(t=>t.dropdownShow))],f.prototype,"onKeyDown",null);b([a()],f.prototype,"onValidationChange",null);f.style=u;export{f as ix_select};
-//# sourceMappingURL=p-70a7bd22.entry.js.map