@siemens/ix 3.0.0-alpha.4 → 3.0.0

package/dist/siemens-ix/p-66fb6549.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["buttonCss","Button","constructor","hostRef","this","variant","outline","ghost","disabled","type","loading","alignment","iconSize","handleClick","event","stopPropagation","preventDefault","componentDidLoad","submitButton","document","createElement","style","display","tabIndex","hostElement","appendChild","submitButtonElement","componentDidRender","contains","dispatchFormEvents","click","setFocus","_a","shadowRoot","querySelector","focus","render","baseButtonProps","iconOnly","iconOval","selected","icon","onClick","h","Host","key","tabindex","class","onFocus","BaseButton","Object","assign"],"sources":["src/components/button/button.scss?tag=ix-button&encapsulation=shadow","src/components/button/button.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@import './button-mixin';\n\n@include btn;\n$button-categories: (danger, primary, secondary);\n@each $category in $button-categories {\n  @include btn-variant($category);\n  @include btn-variant('outline-#{$category}');\n  @include btn-variant('invisible-#{$category}', false);\n}\n\n:host {\n  min-width: 5rem;\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, Element, h, Host, Listen, Prop } from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from './base-button';\nimport { IxButtonComponent } from './button-component';\n\nexport type ButtonVariant = 'danger' | 'primary' | 'secondary';\n\n@Component({\n  tag: 'ix-button',\n  shadow: true,\n  styleUrl: './button.scss',\n})\nexport class Button implements IxButtonComponent {\n  /**\n   * Button variant\n   * @since 2.3.0 - variant danger\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Type of the button\n   */\n  @Prop() type: 'button' | 'submit' = 'button';\n\n  /**\n   * Loading button\n   *\n   * @since 2.0.0\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /** @internal */\n  @Prop() alignment: 'center' | 'start' = 'center';\n\n  /** @internal */\n  @Prop() iconSize: '12' | '16' | '24' = '24';\n\n  @Element() hostElement!: HTMLIxButtonElement;\n\n  /**\n   * Temp. workaround until stencil issue is fixed (https://github.com/ionic-team/stencil/issues/2284)\n   */\n  submitButtonElement?: HTMLButtonElement;\n\n  @Listen('click', { capture: true })\n  handleClick(event: Event) {\n    if (this.disabled || this.loading) {\n      event.stopPropagation();\n      event.preventDefault();\n    }\n  }\n\n  componentDidLoad() {\n    if (this.type === 'submit') {\n      const submitButton = document.createElement('button');\n      submitButton.style.display = 'none';\n      submitButton.type = 'submit';\n      submitButton.tabIndex = -1;\n      this.hostElement.appendChild(submitButton);\n\n      this.submitButtonElement = submitButton;\n    }\n  }\n\n  componentDidRender() {\n    if (\n      this.submitButtonElement &&\n      !this.hostElement.contains(this.submitButtonElement)\n    ) {\n      this.hostElement.appendChild(this.submitButtonElement);\n    }\n  }\n\n  dispatchFormEvents() {\n    if (\n      this.type === 'submit' &&\n      this.submitButtonElement &&\n      !this.disabled &&\n      !this.loading\n    ) {\n      this.submitButtonElement.click();\n    }\n  }\n\n  setFocus() {\n    this.hostElement.shadowRoot!.querySelector('button')?.focus();\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      selected: false,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      iconSize: this.iconSize,\n      loading: this.loading,\n      onClick: () => this.dispatchFormEvents(),\n      type: this.type,\n      alignment: this.alignment,\n      tabIndex: this.hostElement.tabIndex,\n    };\n\n    return (\n      <Host\n        tabindex={this.disabled ? -1 : 0}\n        class={{\n          disabled: this.disabled || this.loading,\n        }}\n        onFocus={() => this.setFocus()}\n      >\n        <BaseButton {...baseButtonProps}>\n          <slot></slot>\n        </BaseButton>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAY,oyrB,MCoBLC,EAAM,MALnB,WAAAC,CAAAC,G,UAUUC,KAAOC,QAAkB,UAKzBD,KAAOE,QAAG,MAKVF,KAAKG,MAAG,MAKSH,KAAQI,SAAG,MAK5BJ,KAAIK,KAAwB,SAO5BL,KAAOM,QAAY,MAQnBN,KAASO,UAAuB,SAGhCP,KAAQQ,SAAuB,IAqFxC,CA3EC,WAAAC,CAAYC,GACV,GAAIV,KAAKI,UAAYJ,KAAKM,QAAS,CACjCI,EAAMC,kBACND,EAAME,gB,EAIV,gBAAAC,GACE,GAAIb,KAAKK,OAAS,SAAU,CAC1B,MAAMS,EAAeC,SAASC,cAAc,UAC5CF,EAAaG,MAAMC,QAAU,OAC7BJ,EAAaT,KAAO,SACpBS,EAAaK,UAAW,EACxBnB,KAAKoB,YAAYC,YAAYP,GAE7Bd,KAAKsB,oBAAsBR,C,EAI/B,kBAAAS,GACE,GACEvB,KAAKsB,sBACJtB,KAAKoB,YAAYI,SAASxB,KAAKsB,qBAChC,CACAtB,KAAKoB,YAAYC,YAAYrB,KAAKsB,oB,EAItC,kBAAAG,GACE,GACEzB,KAAKK,OAAS,UACdL,KAAKsB,sBACJtB,KAAKI,WACLJ,KAAKM,QACN,CACAN,KAAKsB,oBAAoBI,O,EAI7B,QAAAC,G,OACEC,EAAA5B,KAAKoB,YAAYS,WAAYC,cAAc,aAAW,MAAAF,SAAA,SAAAA,EAAAG,O,CAGxD,MAAAC,GACE,MAAMC,EAAmC,CACvChC,QAASD,KAAKC,QACdC,QAASF,KAAKE,QACdC,MAAOH,KAAKG,MACZ+B,SAAU,MACVC,SAAU,MACVC,SAAU,MACVhC,SAAUJ,KAAKI,UAAYJ,KAAKM,QAChC+B,KAAMrC,KAAKqC,KACX7B,SAAUR,KAAKQ,SACfF,QAASN,KAAKM,QACdgC,QAAS,IAAMtC,KAAKyB,qBACpBpB,KAAML,KAAKK,KACXE,UAAWP,KAAKO,UAChBY,SAAUnB,KAAKoB,YAAYD,UAG7B,OACEoB,EAACC,EAAI,CAAAC,IAAA,2CACHC,SAAU1C,KAAKI,UAAW,EAAK,EAC/BuC,MAAO,CACLvC,SAAUJ,KAAKI,UAAYJ,KAAKM,SAElCsC,QAAS,IAAM5C,KAAK2B,YAEpBY,EAACM,EAAUC,OAAAC,OAAA,CAAAN,IAAA,4CAAKR,GACdM,EAAa,QAAAE,IAAA,8C","ignoreList":[]}

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

@@ -1,2 +0,0 @@
-import{r as e,h as i,H as t,g as s}from"./p-BNpBEtDH.js";import{H as a}from"./p-2j3Ly91D.js";const n=":host{display:inline-block;position:relative}:host .checkbox-container{display:flex;flex-direction:column;gap:1rem;margin:0.375rem 0;flex-wrap:wrap}:host .checkbox-container.row-layout{flex-direction:row}";var o=undefined&&undefined.__decorate||function(e,i,t,s){var a=arguments.length,n=a<3?i:s===null?s=Object.getOwnPropertyDescriptor(i,t):s,o;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")n=Reflect.decorate(e,i,t,s);else for(var l=e.length-1;l>=0;l--)if(o=e[l])n=(a<3?o(n):a>3?o(i,t,n):o(i,t))||n;return a>3&&n&&Object.defineProperty(i,t,n),n};const l=class{constructor(i){e(this,i);this.direction="column";this.showTextAsTooltip=false;this.isInvalid=false;this.isInfo=false;this.isValid=false;this.isWarning=false}onClassFieldUpdate({isInvalid:e,isInvalidByRequired:i,isInfo:t,isValid:s,isWarning:a}){this.isInvalid=e||i;this.isInfo=t;this.isValid=s;this.isWarning=a}render(){return i(t,{key:"27aee735ce40e2c2f3b019afad6a44ed1029c2c6"},i("ix-field-wrapper",{key:"70b0666837cc8ed83defc9844cc58003f489a22e",label:this.label,helperText:this.helperText,invalidText:this.invalidText,infoText:this.infoText,validText:this.validText,warningText:this.warningText,showTextAsTooltip:this.showTextAsTooltip,isInvalid:this.isInvalid,isInfo:this.isInfo,isValid:this.isValid,isWarning:this.isWarning},i("div",{key:"59485040ff9509b58b7bd8f7f50e53970585ffb5",class:{"checkbox-container":true,"row-layout":this.direction==="row"}},i("slot",{key:"af5f7db97a6efec492299336428bbb9ded00fbca"}))))}get hostElement(){return s(this)}};o([a({includeChildren:true})],l.prototype,"onClassFieldUpdate",null);l.style=n;export{l as ix_checkbox_group};
-//# sourceMappingURL=p-6d197072.entry.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["checkboxGroupCss","CheckboxGroup","constructor","hostRef","this","direction","showTextAsTooltip","isInvalid","isInfo","isValid","isWarning","onClassFieldUpdate","isInvalidByRequired","render","h","Host","key","label","helperText","invalidText","infoText","validText","warningText","class","__decorate","HookValidationLifecycle","includeChildren","prototype"],"sources":["src/components/checkbox-group/checkbox-group.scss?tag=ix-checkbox-group&encapsulation=shadow","src/components/checkbox-group/checkbox-group.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  display: inline-block;\n  position: relative;\n\n  .checkbox-container {\n    display: flex;\n    flex-direction: column;\n    gap: 1rem;\n    margin: 0.375rem 0;\n    flex-wrap: wrap;\n\n    &.row-layout {\n      flex-direction: row;\n    }\n  }\n}\n","import { Component, Element, Host, Prop, State, h } from '@stencil/core';\nimport {\n  FieldWrapperInterface,\n  HookValidationLifecycle,\n  IxFormValidationState,\n  ValidationResults,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-checkbox-group',\n  styleUrl: 'checkbox-group.scss',\n  shadow: true,\n})\nexport class CheckboxGroup\n  implements FieldWrapperInterface, IxFormValidationState, IxComponent\n{\n  @Element() hostElement!: HTMLIxCheckboxGroupElement;\n  /**\n   * Optional helper text displayed below the checkbox group\n   */\n  @Prop() helperText?: string;\n\n  /**\n   * Label for the checkbox group\n   */\n  @Prop() label?: string;\n\n  /**\n   * Alignment of the checkboxes in the group\n   */\n  @Prop() direction: 'row' | 'column' = 'column';\n\n  /**\n   * Error text for the checkbox group\n   */\n  @Prop() invalidText?: string;\n\n  /**\n   * Info text for the checkbox group\n   */\n  @Prop() infoText?: string;\n  /**\n   * Valid text for the checkbox group\n   */\n  @Prop() validText?: string;\n  /**\n   * Warning text for the checkbox group\n   */\n  @Prop() warningText?: string;\n\n  /**\n   * Show helper, info, warning, error and valid text as tooltip\n   */\n  @Prop() showTextAsTooltip = false;\n\n  @State() isInvalid = false;\n  @State() isInfo = false;\n  @State() isValid = false;\n  @State() isWarning = false;\n\n  @HookValidationLifecycle({\n    includeChildren: true,\n  })\n  onClassFieldUpdate({\n    isInvalid,\n    isInvalidByRequired,\n    isInfo,\n    isValid,\n    isWarning,\n  }: ValidationResults) {\n    this.isInvalid = isInvalid || isInvalidByRequired;\n    this.isInfo = isInfo;\n    this.isValid = isValid;\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          invalidText={this.invalidText}\n          infoText={this.infoText}\n          validText={this.validText}\n          warningText={this.warningText}\n          showTextAsTooltip={this.showTextAsTooltip}\n          isInvalid={this.isInvalid}\n          isInfo={this.isInfo}\n          isValid={this.isValid}\n          isWarning={this.isWarning}\n        >\n          <div\n            class={{\n              'checkbox-container': true,\n              'row-layout': this.direction === 'row',\n            }}\n          >\n            <slot></slot>\n          </div>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAmB,+M,iXCkBZC,EAAa,MAL1B,WAAAC,CAAAC,G,UAsBUC,KAASC,UAAqB,SAuB9BD,KAAiBE,kBAAG,MAEnBF,KAASG,UAAG,MACZH,KAAMI,OAAG,MACTJ,KAAOK,QAAG,MACVL,KAASM,UAAG,KA8CtB,CAzCC,kBAAAC,EAAmBJ,UACjBA,EAASK,oBACTA,EAAmBJ,OACnBA,EAAMC,QACNA,EAAOC,UACPA,IAEAN,KAAKG,UAAYA,GAAaK,EAC9BR,KAAKI,OAASA,EACdJ,KAAKK,QAAUA,EACfL,KAAKM,UAAYA,C,CAGnB,MAAAG,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,oBAAAE,IAAA,2CACEC,MAAOb,KAAKa,MACZC,WAAYd,KAAKc,WACjBC,YAAaf,KAAKe,YAClBC,SAAUhB,KAAKgB,SACfC,UAAWjB,KAAKiB,UAChBC,YAAalB,KAAKkB,YAClBhB,kBAAmBF,KAAKE,kBACxBC,UAAWH,KAAKG,UAChBC,OAAQJ,KAAKI,OACbC,QAASL,KAAKK,QACdC,UAAWN,KAAKM,WAEhBI,EAAA,OAAAE,IAAA,2CACEO,MAAO,CACL,qBAAsB,KACtB,aAAcnB,KAAKC,YAAc,QAGnCS,EAAA,QAAAE,IAAA,+C,oCAnCVQ,EAAA,CAHCC,EAAwB,CACvBC,gBAAiB,QAalBzB,EAAA0B,UAAA,2B","ignoreList":[]}

package/dist/siemens-ix/p-734bcb23.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["chipCss","Chip","constructor","hostRef","this","variant","active","closable","outline","tooltipText","containerElementRef","makeRef","getCloseButton","h","class","type","icon","iconCloseSmall","oval","size","style","color","chipColor","ghost","onClick","event","closeChip","emit","stopPropagation","getTooltip","hostElement","hasAttribute","text","trim","_a","textContent","for","waitForCurrent","render","isInactive","customStyle","background","Host","key","tabIndex","inactive","ref","Object","assign","container","alarm","critical","info","neutral","primary","success","warning","custom","hidden","name"],"sources":["src/components/chip/chip.scss?tag=ix-chip&encapsulation=shadow","src/components/chip/chip.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@import 'common-variables';\n@import 'mixins/text-truncation';\n@import './chip-mixin';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n  height: 2rem;\n  max-height: 2rem;\n  margin-left: $tiny-space;\n}\n\n:host(.inactive) {\n  pointer-events: none;\n}\n\n@include chip-container;\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 { iconCloseSmall } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\nimport { makeRef } from '../utils/make-ref';\n\n@Component({\n  tag: 'ix-chip',\n  styleUrl: 'chip.scss',\n  shadow: true,\n})\nexport class Chip {\n  @Element() hostElement!: HTMLIxChipElement;\n\n  /**\n   * Chip variant\n   */\n  @Prop({ reflect: true }) variant:\n    | 'primary'\n    | 'alarm'\n    | 'critical'\n    | 'warning'\n    | 'info'\n    | 'neutral'\n    | 'success'\n    | 'custom' = 'primary';\n\n  /**\n   * Determines if the chip is interactive. If false no user input (e.g. mouse states, keyboard navigation)\n   * will be possible and also the close button will not be present.\n   */\n  @Prop() active = true;\n\n  /**\n   * Show close icon\n   */\n  @Prop() closable = false;\n\n  /**\n   * Show icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Custom background color.\n   * Only has an effect on chips with `variant='custom'`\n   */\n  @Prop() background: string | undefined;\n\n  /**\n   * Custom font and icon color.\n   * Only has an effect on chips with `variant='custom'`\n   */\n  @Prop() chipColor: string | undefined;\n\n  /**\n   * Show chip with outline style\n   */\n  @Prop() outline = false;\n\n  /**\n   * Display a tooltip. By default, no tooltip will be displayed.\n   * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.\n   * @since 3.0.0\n   */\n  @Prop() tooltipText: string | boolean = false;\n\n  /**\n   * Fire event if close button is clicked\n   *\n   * @since 1.5.0\n   */\n  @Event() closeChip!: EventEmitter;\n\n  private readonly containerElementRef = makeRef<HTMLElement>();\n\n  private getCloseButton() {\n    return (\n      <div class=\"close-button-container\">\n        <ix-icon-button\n          type=\"button\"\n          variant=\"secondary\"\n          icon={iconCloseSmall}\n          class=\"close-button\"\n          oval\n          size=\"16\"\n          style={this.variant === 'custom' ? { color: this.chipColor } : {}}\n          ghost\n          onClick={(event) => {\n            this.closeChip.emit(event);\n            event.stopPropagation();\n          }}\n        ></ix-icon-button>\n      </div>\n    );\n  }\n\n  private getTooltip() {\n    if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {\n      return null;\n    }\n\n    const text =\n      typeof this.tooltipText === 'string' && this.tooltipText.trim()\n        ? this.tooltipText\n        : this.hostElement.textContent?.trim();\n\n    return (\n      <ix-tooltip for={this.containerElementRef.waitForCurrent()}>\n        {text}\n      </ix-tooltip>\n    );\n  }\n\n  render() {\n    const isInactive = this.active === false;\n\n    let customStyle = {};\n\n    if (this.variant === 'custom') {\n      customStyle = {\n        color: this.chipColor,\n        [this.outline ? 'borderColor' : 'backgroundColor']: this.background,\n      };\n    }\n\n    return (\n      <Host\n        tabIndex=\"-1\"\n        class={{\n          inactive: isInactive,\n        }}\n        style={\n          this.variant === 'custom'\n            ? {\n                '--ix-icon-button-color': this.chipColor,\n              }\n            : {}\n        }\n      >\n        <div\n          ref={this.containerElementRef}\n          style={{ ...customStyle }}\n          class={{\n            container: true,\n            outline: this.outline,\n            inactive: isInactive,\n            alarm: this.variant === 'alarm',\n            critical: this.variant === 'critical',\n            info: this.variant === 'info',\n            neutral: this.variant === 'neutral',\n            primary: this.variant === 'primary',\n            success: this.variant === 'success',\n            warning: this.variant === 'warning',\n            custom: this.variant === 'custom',\n            closable: this.closable,\n            icon: !!this.icon,\n          }}\n        >\n          <ix-icon\n            class={{\n              'with-icon': true,\n              hidden: !this.icon,\n            }}\n            name={this.icon}\n            size={'24'}\n          />\n          <span class=\"slot-container\">\n            <slot></slot>\n          </span>\n          {isInactive === false && this.closable ? this.getCloseButton() : null}\n        </div>\n        {this.getTooltip()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"wIAAA,MAAMA,EAAU,m4X,MC0BHC,EAAI,MALjB,WAAAC,CAAAC,G,+CAW2BC,KAAOC,QAQjB,UAMPD,KAAME,OAAG,KAKTF,KAAQG,SAAG,MAsBXH,KAAOI,QAAG,MAOVJ,KAAWK,YAAqB,MASvBL,KAAmBM,oBAAGC,GAsGxC,CApGS,cAAAC,GACN,OACEC,EAAA,OAAKC,MAAM,0BACTD,EACE,kBAAAE,KAAK,SACLV,QAAQ,YACRW,KAAMC,EACNH,MAAM,eACNI,KAAI,KACJC,KAAK,KACLC,MAAOhB,KAAKC,UAAY,SAAW,CAAEgB,MAAOjB,KAAKkB,WAAc,GAC/DC,MAAK,KACLC,QAAUC,IACRrB,KAAKsB,UAAUC,KAAKF,GACpBA,EAAMG,iBAAiB,I,CAOzB,UAAAC,G,MACN,IAAKzB,KAAKK,cAAgBL,KAAK0B,YAAYC,aAAa,gBAAiB,CACvE,OAAO,I,CAGT,MAAMC,SACG5B,KAAKK,cAAgB,UAAYL,KAAKK,YAAYwB,OACrD7B,KAAKK,aACLyB,EAAA9B,KAAK0B,YAAYK,eAAW,MAAAD,SAAA,SAAAA,EAAED,OAEpC,OACEpB,EAAA,cAAYuB,IAAKhC,KAAKM,oBAAoB2B,kBACvCL,E,CAKP,MAAAM,GACE,MAAMC,EAAanC,KAAKE,SAAW,MAEnC,IAAIkC,EAAc,GAElB,GAAIpC,KAAKC,UAAY,SAAU,CAC7BmC,EAAc,CACZnB,MAAOjB,KAAKkB,UACZ,CAAClB,KAAKI,QAAU,cAAgB,mBAAoBJ,KAAKqC,W,CAI7D,OACE5B,EAAC6B,EAAI,CAAAC,IAAA,2CACHC,SAAS,KACT9B,MAAO,CACL+B,SAAUN,GAEZnB,MACEhB,KAAKC,UAAY,SACb,CACE,yBAA0BD,KAAKkB,WAEjC,IAGNT,EACE,OAAA8B,IAAA,2CAAAG,IAAK1C,KAAKM,oBACVU,MAAY2B,OAAAC,OAAA,GAAAR,GACZ1B,MAAO,CACLmC,UAAW,KACXzC,QAASJ,KAAKI,QACdqC,SAAUN,EACVW,MAAO9C,KAAKC,UAAY,QACxB8C,SAAU/C,KAAKC,UAAY,WAC3B+C,KAAMhD,KAAKC,UAAY,OACvBgD,QAASjD,KAAKC,UAAY,UAC1BiD,QAASlD,KAAKC,UAAY,UAC1BkD,QAASnD,KAAKC,UAAY,UAC1BmD,QAASpD,KAAKC,UAAY,UAC1BoD,OAAQrD,KAAKC,UAAY,SACzBE,SAAUH,KAAKG,SACfS,OAAQZ,KAAKY,OAGfH,EAAA,WAAA8B,IAAA,2CACE7B,MAAO,CACL,YAAa,KACb4C,QAAStD,KAAKY,MAEhB2C,KAAMvD,KAAKY,KACXG,KAAM,OAERN,EAAM,QAAA8B,IAAA,2CAAA7B,MAAM,kBACVD,EAAA,QAAA8B,IAAA,8CAEDJ,IAAe,OAASnC,KAAKG,SAAWH,KAAKQ,iBAAmB,MAElER,KAAKyB,a","ignoreList":[]}

package/dist/siemens-ix/p-7abb0f0c.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as i,H as e,g as s}from"./p-BNpBEtDH.js";import{H as n}from"./p-2j3Ly91D.js";const a=":host{display:block;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}";var f=undefined&&undefined.__decorate||function(t,i,e,s){var n=arguments.length,a=n<3?i:s===null?s=Object.getOwnPropertyDescriptor(i,e):s,f;if(typeof Reflect==="object"&&typeof Reflect.decorate==="function")a=Reflect.decorate(t,i,e,s);else for(var d=t.length-1;d>=0;d--)if(f=t[d])a=(n<3?f(a):n>3?f(i,e,a):f(i,e))||a;return n>3&&a&&Object.defineProperty(i,e,a),a};const d=class{constructor(i){t(this,i);this.required=false;this.isInvalid=false;this.isValid=false;this.isInfo=false;this.isWarning=false}updateValidationState({isInvalid:t,isValid:i,isInfo:e,isWarning:s}){this.isInvalid=t;this.isValid=i;this.isInfo=e;this.isWarning=s}render(){return i(e,{key:"bb181d52fe217d477896a57dec475edcc6b6e5df"},i("ix-field-wrapper",{key:"3a164633b9955fbd86efefdaa9926b61dc45d39f",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:"d9b814b0f59dbc837443826bb5513172aba0b0a3"})))}get hostElement(){return s(this)}};f([n({includeChildren:true})],d.prototype,"updateValidationState",null);d.style=a;export{d as ix_custom_field};
-//# sourceMappingURL=p-7abb0f0c.entry.js.map

package/dist/siemens-ix/p-7abb0f0c.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["customFieldCss","CustomField","constructor","hostRef","this","required","isInvalid","isValid","isInfo","isWarning","updateValidationState","render","h","Host","key","label","helperText","infoText","warningText","invalidText","validText","showTextAsTooltip","__decorate","HookValidationLifecycle","includeChildren","prototype"],"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  width: fit-content;\n  height: fit-content;\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/input';\nimport { IxComponent } from '../utils/internal';\n\n/**\n * @since 2.6.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></slot>\n        </ix-field-wrapper>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAiB,2G,iXC0BVC,EAAW,MALxB,WAAAC,CAAAC,G,UAYUC,KAAQC,SAAY,MAqCnBD,KAASE,UAAG,MACZF,KAAOG,QAAG,MACVH,KAAMI,OAAG,MACTJ,KAASK,UAAG,KAuCtB,CAlCC,qBAAAC,EAAsBJ,UACpBA,EAASC,QACTA,EAAOC,OACPA,EAAMC,UACNA,IAEAL,KAAKE,UAAYA,EACjBF,KAAKG,QAAUA,EACfH,KAAKI,OAASA,EACdJ,KAAKK,UAAYA,C,CAGnB,MAAAE,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,oBAAAE,IAAA,2CACEC,MAAOX,KAAKW,MACZC,WAAYZ,KAAKY,WACjBC,SAAUb,KAAKa,SACfC,YAAad,KAAKc,YAClBC,YAAaf,KAAKe,YAClBC,UAAWhB,KAAKgB,UAChBC,kBAAmBjB,KAAKiB,kBACxBf,UAAWF,KAAKE,UAChBC,QAASH,KAAKG,QACdC,OAAQJ,KAAKI,OACbC,UAAWL,KAAKK,UAChBJ,SAAUD,KAAKC,UAEfO,EAAa,QAAAE,IAAA,8C,oCA7BrBQ,EAAA,CAHCC,EAAwB,CACvBC,gBAAiB,QAYlBvB,EAAAwB,UAAA,8B","ignoreList":[]}

package/dist/siemens-ix/p-87b30e60.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["toggleButtonCss","ToggleButton","constructor","hostRef","this","variant","outline","ghost","disabled","loading","pressed","isIllegalToggleButtonConfig","logIllegalConfig","console","warn","onVariantChange","onGhostChange","onOutlineChange","componentDidLoad","dispatchPressedChange","pressedChange","emit","render","baseButtonProps","iconOnly","iconOval","selected","icon","onClick","type","ariaAttributes","a11yBoolean","h","Host","key","class","BaseButton","Object","assign"],"sources":["src/components/toggle-button/toggle-button.scss?tag=ix-toggle-button&encapsulation=shadow","src/components/toggle-button/toggle-button.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 'legacy/components/buttons';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n  display: inline-block;\n  width: auto;\n  height: $x-large-space;\n  vertical-align: middle;\n\n  .btn {\n    width: 100%;\n    height: 100%;\n  }\n\n  button:not(:disabled) {\n    cursor: pointer;\n  }\n}\n\n:host(.disabled) {\n  pointer-events: none;\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  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { ButtonVariant } from '../button/button';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-toggle-button',\n  shadow: true,\n  styleUrl: './toggle-button.scss',\n})\nexport class ToggleButton {\n  /**\n   * Button variant.\n   * Important: Variant 'primary' can only be combined with either outline or ghost.\n   */\n  @Prop() variant: ButtonVariant = 'secondary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = false;\n\n  /**\n   * Disable the button\n   */\n  @Prop({ reflect: true }) disabled = false;\n\n  /**\n   * Loading button\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Icon name\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Show button as pressed\n   */\n  @Prop() pressed = false;\n\n  /**\n   * Pressed change event\n   */\n  @Event() pressedChange!: EventEmitter<boolean>;\n\n  private isIllegalToggleButtonConfig() {\n    return this.variant === 'primary' && (this.outline || this.ghost);\n  }\n\n  private logIllegalConfig() {\n    console.warn(\n      'iX toggle button with illegal configuration detected. Variant \"primary\" can only be combined with \"outline\" or \"ghost\".'\n    );\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    if (this.isIllegalToggleButtonConfig()) {\n      this.logIllegalConfig();\n    }\n  }\n\n  @Watch('ghost')\n  onGhostChange() {\n    this.onVariantChange();\n  }\n\n  @Watch('outline')\n  onOutlineChange() {\n    this.onVariantChange();\n  }\n\n  componentDidLoad() {\n    this.onVariantChange();\n  }\n\n  private dispatchPressedChange() {\n    this.pressedChange.emit(!this.pressed);\n  }\n\n  render() {\n    const baseButtonProps: BaseButtonProps = {\n      variant: this.variant,\n      outline: this.outline,\n      ghost: this.ghost,\n      iconOnly: false,\n      iconOval: false,\n      selected: this.pressed,\n      disabled: this.disabled || this.loading,\n      icon: this.icon,\n      loading: this.loading,\n      onClick: () => this.dispatchPressedChange(),\n      type: 'button',\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.pressed),\n      },\n    };\n\n    return (\n      <Host\n        class={{\n          disabled: this.disabled || this.loading,\n        }}\n      >\n        <BaseButton {...baseButtonProps}>\n          <slot></slot>\n        </BaseButton>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iIAAA,MAAMA,EAAkB,i7a,MC8BXC,EAAY,MALzB,WAAAC,CAAAC,G,uDAUUC,KAAOC,QAAkB,YAKzBD,KAAOE,QAAG,MAKVF,KAAKG,MAAG,MAKSH,KAAQI,SAAG,MAK5BJ,KAAOK,QAAY,MAUnBL,KAAOM,QAAG,KAwEnB,CAjES,2BAAAC,GACN,OAAOP,KAAKC,UAAY,YAAcD,KAAKE,SAAWF,KAAKG,M,CAGrD,gBAAAK,GACNC,QAAQC,KACN,0H,CAKJ,eAAAC,GACE,GAAIX,KAAKO,8BAA+B,CACtCP,KAAKQ,kB,EAKT,aAAAI,GACEZ,KAAKW,iB,CAIP,eAAAE,GACEb,KAAKW,iB,CAGP,gBAAAG,GACEd,KAAKW,iB,CAGC,qBAAAI,GACNf,KAAKgB,cAAcC,MAAMjB,KAAKM,Q,CAGhC,MAAAY,GACE,MAAMC,EAAmC,CACvClB,QAASD,KAAKC,QACdC,QAASF,KAAKE,QACdC,MAAOH,KAAKG,MACZiB,SAAU,MACVC,SAAU,MACVC,SAAUtB,KAAKM,QACfF,SAAUJ,KAAKI,UAAYJ,KAAKK,QAChCkB,KAAMvB,KAAKuB,KACXlB,QAASL,KAAKK,QACdmB,QAAS,IAAMxB,KAAKe,wBACpBU,KAAM,SACNC,eAAgB,CACd,eAAgBC,EAAY3B,KAAKM,WAIrC,OACEsB,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL3B,SAAUJ,KAAKI,UAAYJ,KAAKK,UAGlCuB,EAACI,EAAUC,OAAAC,OAAA,CAAAJ,IAAA,4CAAKX,GACdS,EAAa,QAAAE,IAAA,8C","ignoreList":[]}

package/dist/siemens-ix/p-87c777a1.entry.js

@@ -1,2 +0,0 @@
-import{r,h as e,H as a}from"./p-BNpBEtDH.js";const o=":host{}: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 .card{background-color:var(--theme-menu--background);width:100%;box-shadow:none;border:none;border-radius:unset;display:flex;flex-direction:column}:host .card.standaloneAppearance{box-shadow:0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 12px 18px 0 rgba(0, 0, 0, 0.1);border-radius:4px}:host .card.rounded{border-radius:4px}:host .card.left{border-radius:4px 0 0 4px;height:100%}:host .card.right{border-radius:0 4px 4px 0;height:100%}:host .card .header{padding:1rem;flex:0 1 auto}:host .card .separator{border:1px solid var(--theme-datepicker-separator--background);width:100%;flex:0 1 auto}:host .card .content{padding:0 1rem 1rem 1rem;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}";const t=class{constructor(e){r(this,e);this.individual=true;this.corners="rounded"}cardClasses(){var r;return{card:true,standaloneAppearance:(r=this.standaloneAppearance)!==null&&r!==void 0?r:this.individual,rounded:this.corners==="rounded",left:this.corners==="left",right:this.corners==="right"}}render(){return e(a,{key:"9310b246c56469a92bf77d955c88bb4005d6c5a1"},e("div",{key:"041094bc9a9a9049bbcdc5f24f4987ee547bb7b0",class:this.cardClasses()},e("div",{key:"80c76215cebf46bb7cb9cb3caf0ff74e9dc6cbda",class:"header"},e("slot",{key:"e1844c4fb35169db3a9077bc6dcabd260a99629f",name:"header"})),e("div",{key:"49cbbfa20d3a2e2751a974152efb03ecaa74b128",class:"separator"}),e("div",{key:"6583ffd0762ad265b6e2c8ba2a536af743669abe",class:"content"},e("slot",{key:"ee6202f5162c4972ee04cf548aa0e541e62f994d"}))))}};t.style=o;export{t as ix_date_time_card};
-//# sourceMappingURL=p-87c777a1.entry.js.map

package/dist/siemens-ix/p-87c777a1.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dateTimeCardCss","DateTimeCard","constructor","hostRef","this","individual","corners","cardClasses","card","standaloneAppearance","_a","rounded","left","right","render","h","Host","key","class","name"],"sources":["src/components/date-time-card/date-time-card.scss?tag=ix-date-time-card&encapsulation=shadow","src/components/date-time-card/date-time-card.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/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  .card {\n    background-color: var(--theme-menu--background);\n    width: 100%;\n    box-shadow: none;\n    border: none;\n    border-radius: unset;\n    display: flex;\n    flex-direction: column;\n\n    &.standaloneAppearance {\n      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.1),\n        0 12px 18px 0 rgba(0, 0, 0, 0.1);\n      border-radius: 4px;\n    }\n\n    &.rounded {\n      border-radius: 4px;\n    }\n\n    &.left {\n      border-radius: 4px 0 0 4px;\n      height: 100%;\n    }\n\n    &.right {\n      border-radius: 0 4px 4px 0;\n      height: 100%;\n    }\n\n    .header {\n      padding: $default-space;\n      flex: 0 1 auto;\n    }\n\n    .separator {\n      border: 1px solid var(--theme-datepicker-separator--background);\n      width: 100%;\n      flex: 0 1 auto;\n    }\n\n    .content {\n      padding: 0 $default-space $default-space $default-space;\n      flex: 1 1 auto;\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\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 { Component, h, Host, Prop } from '@stencil/core';\n\nexport type DateTimeCardCorners = 'rounded' | 'left' | 'right' | 'straight';\n\n/**\n * @internal\n */\n@Component({\n  tag: 'ix-date-time-card',\n  styleUrl: 'date-time-card.scss',\n  shadow: true,\n})\nexport class DateTimeCard {\n  /** @internal */\n  @Prop() standaloneAppearance?: boolean;\n\n  /**\n   * set styles\n   */\n  @Prop() individual: boolean = true;\n\n  /**\n   * Set corners style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  private cardClasses() {\n    return {\n      card: true,\n      standaloneAppearance: this.standaloneAppearance ?? this.individual,\n      rounded: this.corners === 'rounded',\n      left: this.corners === 'left',\n      right: this.corners === 'right',\n    };\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class={this.cardClasses()}>\n          <div class=\"header\">\n            <slot name=\"header\"></slot>\n          </div>\n\n          <div class=\"separator\"></div>\n\n          <div class=\"content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6CAAA,MAAMA,EAAkB,i+C,MCqBXC,EAAY,MALzB,WAAAC,CAAAC,G,UAYUC,KAAUC,WAAY,KAKtBD,KAAOE,QAAwB,SA6BxC,CA3BS,WAAAC,G,MACN,MAAO,CACLC,KAAM,KACNC,sBAAsBC,EAAAN,KAAKK,wBAAwB,MAAAC,SAAA,EAAAA,EAAAN,KAAKC,WACxDM,QAASP,KAAKE,UAAY,UAC1BM,KAAMR,KAAKE,UAAY,OACvBO,MAAOT,KAAKE,UAAY,Q,CAI5B,MAAAQ,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAOd,KAAKG,eACfQ,EAAK,OAAAE,IAAA,2CAAAC,MAAM,UACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,YAGbJ,EAAK,OAAAE,IAAA,2CAAAC,MAAM,cAEXH,EAAK,OAAAE,IAAA,2CAAAC,MAAM,WACTH,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

package/dist/siemens-ix/p-89edecbd.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["expandingSearchCss","ExpandingSearch","expandInput","setTimeout","this","focusTextInput","expanded","collapseInput","isFieldChanged","clearInput","value","onChange","e","target","valueChange","emit","constructor","hostRef","placeholder","fullWidth","variant","outline","ghost","hasFocus","bind","_a","textInput","focus","clearClicked","render","h","Host","key","class","size","icon","iconSearch","onClick","tabindex","color","undefined","collapsed","input","ref","el","type","onBlur","onFocus","onInput","iconClear"],"sources":["src/components/expanding-search/expanding-search.scss?tag=ix-expanding-search&encapsulation=shadow","src/components/expanding-search/expanding-search.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@import 'common-variables';\n@import 'legacy/components/forms';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n$container-width: 11.5625rem;\n\n:host {\n  @include ix-component;\n\n  display: inline-flex;\n  width: auto;\n  height: $x-large-space;\n  align-items: center;\n  justify-content: space-between;\n  position: relative;\n\n  .input-container {\n    transition: all var(--theme-medium-time) ease-in-out;\n  }\n\n  input {\n    box-shadow: var(--theme-input--box-shadow);\n    cursor: auto !important;\n    width: 100%;\n  }\n\n  .expanded {\n    width: $container-width;\n\n    &.fullWidth {\n      width: 100%;\n    }\n  }\n\n  .collapsed {\n    width: $large-space;\n    border: none;\n  }\n\n  /*collapsed view*/\n  .btn-search-icon {\n    align-self: center;\n    margin: auto;\n    position: relative;\n  }\n\n  .btn-search {\n    display: flex;\n    max-width: $x-large-space;\n    max-height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    transition: all var(--theme-default-time) ease-in-out;\n    z-index: 1;\n    align-items: center;\n    position: relative;\n    border: none;\n\n    @include hover {\n      border-color: transparent;\n    }\n\n    @include active {\n      border-color: transparent;\n    }\n\n    @include focus {\n      outline: none;\n    }\n\n    @include focus-visible {\n      outline: var(--focus--border-color);\n      outline-width: 1px;\n      outline-style: solid;\n    }\n  }\n\n  .btn-search.btn-search--expanded {\n    margin-left: 0.25rem;\n    pointer-events: none;\n  }\n\n  .btn-search:active {\n    width: $x-large-space;\n    height: $x-large-space;\n    border-radius: var(--theme-input--border-radius);\n    border: var(--theme-std-bdr-1) !important;\n  }\n\n  /*expanded view*/\n  .input-container {\n    display: flex;\n    position: absolute;\n    align-items: center;\n    flex-wrap: nowrap;\n  }\n\n  .btn-clear {\n    position: absolute;\n    border-radius: var(--theme-input--border-radius);\n    right: 0px;\n    margin-right: 0.25rem;\n  }\n\n  .input {\n    padding-left: $x-large-space !important;\n    padding-right: 2.5rem !important;\n  }\n\n  .opacity-before {\n    opacity: 0;\n  }\n\n  .opacity-after {\n    opacity: 1;\n  }\n}\n\n:host(.right-position) {\n  width: $container-width !important;\n}\n\n:host(.right-position.fullWidth) {\n  width: 100% !important;\n\n  .fullWidth {\n    width: 100% !important;\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 { iconClear, iconSearch } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { ButtonVariant } from '../button/button';\nimport { IxButtonComponent } from '../button/button-component';\n\n@Component({\n  tag: 'ix-expanding-search',\n  styleUrl: 'expanding-search.scss',\n  shadow: true,\n})\nexport class ExpandingSearch\n  implements Omit<IxButtonComponent, 'type' | 'icon' | 'disabled' | 'loading'>\n{\n  /**\n   * Search icon\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder = 'Enter text here';\n\n  /**\n   * Default value\n   */\n  @Prop({ mutable: true }) value = '';\n\n  /**\n   * If true the search field will fill all available horizontal space of it's parent container when expanded.\n   * @since 1.6.0\n   */\n  @Prop() fullWidth = false;\n\n  /**\n   * button variant\n   */\n  @Prop() variant: ButtonVariant = 'primary';\n\n  /**\n   * Outline button\n   */\n  @Prop() outline = false;\n\n  /**\n   * Button with no background or outline\n   */\n  @Prop() ghost = true;\n\n  @State() isFieldChanged = false;\n  @State() expanded = false;\n  @State() hasFocus = false;\n\n  /**\n   * Value changed\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  private expandInput() {\n    setTimeout(this.focusTextInput, 300);\n    this.expanded = true;\n  }\n\n  private collapseInput() {\n    if (!this.isFieldChanged && this.expanded) {\n      this.expanded = false;\n    }\n  }\n\n  private clearInput() {\n    this.value = '';\n    this.isFieldChanged = false;\n  }\n\n  private onChange(e: InputEvent) {\n    this.value = (e.target as HTMLInputElement).value;\n    if (this.isFieldChanged && this.value === '') {\n      this.isFieldChanged = false;\n    } else {\n      this.isFieldChanged = true;\n    }\n\n    this.valueChange.emit(this.value);\n  }\n\n  private textInput?: HTMLInputElement;\n\n  constructor() {\n    this.focusTextInput = this.focusTextInput.bind(this);\n  }\n\n  private focusTextInput() {\n    this.textInput?.focus();\n  }\n\n  private clearClicked() {\n    this.clearInput();\n    this.textInput?.focus();\n    this.valueChange.emit(this.value);\n  }\n\n  render() {\n    return (\n      <Host\n        class={{\n          expanded: this.expanded,\n          'right-position': this.expanded,\n          fullWidth: this.fullWidth,\n        }}\n      >\n        <ix-icon-button\n          size={this.expanded ? '16' : '24'}\n          icon={this.icon ?? iconSearch}\n          variant={this.expanded ? 'primary' : this.variant}\n          ghost={this.ghost || this.expanded}\n          outline={this.outline && !this.expanded}\n          data-testid=\"button\"\n          onClick={() => this.expandInput()}\n          tabindex={this.expanded ? -1 : 0}\n          color={this.hasFocus ? 'input-search-icon--color--focus' : undefined}\n          class={{\n            'btn-search': true,\n            'btn-search--expanded': this.expanded,\n          }}\n        ></ix-icon-button>\n\n        <div\n          class={{\n            expanded: this.expanded,\n            fullWidth: this.fullWidth,\n            collapsed: !this.expanded,\n            'disable-pointer': !this.expanded,\n            'input-container': true,\n          }}\n          data-testid=\"input-wrapper\"\n        >\n          <input\n            class={{\n              'ix-form-control': true,\n              input: this.expanded,\n              'disable-pointer': !this.expanded,\n              'opacity-before': !this.expanded,\n              'opacity-after': this.expanded,\n            }}\n            ref={(el) => (this.textInput = el)}\n            data-testid=\"input\"\n            placeholder={this.placeholder}\n            type=\"text\"\n            value={this.value}\n            onBlur={() => {\n              this.collapseInput();\n              this.hasFocus = false;\n            }}\n            onFocus={() => (this.hasFocus = true)}\n            onInput={(e: InputEvent) => this.onChange(e)}\n            tabindex={this.expanded ? 0 : -1}\n          />\n\n          {this.isFieldChanged ? (\n            <ix-icon-button\n              class=\"btn-clear\"\n              icon={iconClear}\n              ghost={true}\n              size=\"16\"\n              data-testid=\"clear-button\"\n              onClick={() => this.clearClicked()}\n            />\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAqB,qiQ,MC2BdC,EAAe,MAgDlB,WAAAC,GACNC,WAAWC,KAAKC,eAAgB,KAChCD,KAAKE,SAAW,I,CAGV,aAAAC,GACN,IAAKH,KAAKI,gBAAkBJ,KAAKE,SAAU,CACzCF,KAAKE,SAAW,K,EAIZ,UAAAG,GACNL,KAAKM,MAAQ,GACbN,KAAKI,eAAiB,K,CAGhB,QAAAG,CAASC,GACfR,KAAKM,MAASE,EAAEC,OAA4BH,MAC5C,GAAIN,KAAKI,gBAAkBJ,KAAKM,QAAU,GAAI,CAC5CN,KAAKI,eAAiB,K,KACjB,CACLJ,KAAKI,eAAiB,I,CAGxBJ,KAAKU,YAAYC,KAAKX,KAAKM,M,CAK7B,WAAAM,CAAAC,G,mDAlEQb,KAAWc,YAAG,kBAKGd,KAAKM,MAAG,GAMzBN,KAASe,UAAG,MAKZf,KAAOgB,QAAkB,UAKzBhB,KAAOiB,QAAG,MAKVjB,KAAKkB,MAAG,KAEPlB,KAAcI,eAAG,MACjBJ,KAAQE,SAAG,MACXF,KAAQmB,SAAG,MAqClBnB,KAAKC,eAAiBD,KAAKC,eAAemB,KAAKpB,KAChD,CAEO,cAAAC,G,OACNoB,EAAArB,KAAKsB,aAAW,MAAAD,SAAA,SAAAA,EAAAE,O,CAGV,YAAAC,G,MACNxB,KAAKK,cACLgB,EAAArB,KAAKsB,aAAW,MAAAD,SAAA,SAAAA,EAAAE,QAChBvB,KAAKU,YAAYC,KAAKX,KAAKM,M,CAG7B,MAAAmB,G,MACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL3B,SAAUF,KAAKE,SACf,iBAAkBF,KAAKE,SACvBa,UAAWf,KAAKe,YAGlBW,EACE,kBAAAE,IAAA,2CAAAE,KAAM9B,KAAKE,SAAW,KAAO,KAC7B6B,MAAMV,EAAArB,KAAK+B,QAAQ,MAAAV,SAAA,EAAAA,EAAAW,EACnBhB,QAAShB,KAAKE,SAAW,UAAYF,KAAKgB,QAC1CE,MAAOlB,KAAKkB,OAASlB,KAAKE,SAC1Be,QAASjB,KAAKiB,UAAYjB,KAAKE,SAAQ,cAC3B,SACZ+B,QAAS,IAAMjC,KAAKF,cACpBoC,SAAUlC,KAAKE,UAAW,EAAK,EAC/BiC,MAAOnC,KAAKmB,SAAW,kCAAoCiB,UAC3DP,MAAO,CACL,aAAc,KACd,uBAAwB7B,KAAKE,YAIjCwB,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL3B,SAAUF,KAAKE,SACfa,UAAWf,KAAKe,UAChBsB,WAAYrC,KAAKE,SACjB,mBAAoBF,KAAKE,SACzB,kBAAmB,MACpB,cACW,iBAEZwB,EAAA,SAAAE,IAAA,2CACEC,MAAO,CACL,kBAAmB,KACnBS,MAAOtC,KAAKE,SACZ,mBAAoBF,KAAKE,SACzB,kBAAmBF,KAAKE,SACxB,gBAAiBF,KAAKE,UAExBqC,IAAMC,GAAQxC,KAAKsB,UAAYkB,EAAG,cACtB,QACZ1B,YAAad,KAAKc,YAClB2B,KAAK,OACLnC,MAAON,KAAKM,MACZoC,OAAQ,KACN1C,KAAKG,gBACLH,KAAKmB,SAAW,KAAK,EAEvBwB,QAAS,IAAO3C,KAAKmB,SAAW,KAChCyB,QAAUpC,GAAkBR,KAAKO,SAASC,GAC1C0B,SAAUlC,KAAKE,SAAW,GAAI,IAG/BF,KAAKI,eACJsB,EAAA,kBACEG,MAAM,YACNE,KAAMc,EACN3B,MAAO,KACPY,KAAK,KACO,6BACZG,QAAS,IAAMjC,KAAKwB,iBAEpB,M","ignoreList":[]}

package/dist/siemens-ix/p-933f6e1f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabItemCss","TabItem","constructor","hostRef","this","selected","disabled","small","icon","rounded","layout","placement","tabItemClasses","props","stretched","bottom","top","circle","render","h","Host","key","class","tabIndex","onClick","event","defaultPrevented","clientEvent","tabClick","emit","nativeEvent","stopPropagation","text","counter","hidden","undefined","requestAnimationFrameNoNgZone","callback","__zone_symbol__requestAnimationFrame","requestAnimationFrame","setTimeout","tabsCss","Tabs","totalItems","currentScrollAmount","scrollAmount","scrollActionAmount","showArrowPrevious","showArrowNext","windowStartSize","window","innerWidth","clickAction","timeout","isClick","onWindowResize","getTabs","length","move","Array","from","hostElement","querySelectorAll","getTab","getTabsWrapper","_a","shadowRoot","querySelector","initResizeObserver","parentElement","resizeObserver","ResizeObserver","renderArrows","observe","showArrows","tabWrapper","scrollWidth","Math","ceil","getBoundingClientRect","width","error","showPreviousArrow","showNextArrow","tabWrapperRect","amount","click","tabsWrapper","tabsWrapperVisibleWidth","maxScrollWidth","min","styles","join","setAttribute","onSelectedChange","newValue","tabRect","wrapperWidth","clientWidth","arrowWidth","left","right","setSelected","index","clickTab","dragStop","selectedChange","dragStart","element","button","tabPositionX","parseFloat","getComputedStyle","mousedownPositionX","clientX","dragMove","windowClick","removeEventListener","addEventListener","tabX","mousedownX","clearTimeout","componentWillLoad","tabs","map","componentDidRender","componentWillRender","componentDidLoad","forEach","disconnectedCallback","disconnect","onTabClick","target","tab","name","iconChevronLeftSmall","iconChevronRightSmall"],"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   * Emitted when the tab is clicked.\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          if (event.defaultPrevented) return;\n\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: 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@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: 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  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { requestAnimationFrameNoNgZone } from '../utils/requestAnimationFrame';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\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  @State() scrollActionAmount = 0;\n  @State() showArrowPrevious = false;\n  @State() showArrowNext = false;\n\n  private windowStartSize = window.innerWidth;\n  private resizeObserver?: ResizeObserver;\n\n  private clickAction: {\n    timeout: NodeJS.Timeout | null;\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 initResizeObserver() {\n    const parentElement = this.hostElement.parentElement;\n    if (!parentElement) return;\n    this.resizeObserver = new ResizeObserver(() => {\n      this.renderArrows();\n    });\n    this.resizeObserver.observe(parentElement);\n  }\n\n  private showArrows() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n      return (\n        tabWrapper &&\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() === true && this.scrollActionAmount < 0;\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private showNextArrow() {\n    try {\n      const tabWrapper = this.getTabsWrapper();\n\n      if (!tabWrapper) {\n        return false;\n      }\n\n      const tabWrapperRect = tabWrapper.getBoundingClientRect();\n\n      return (\n        this.showArrows() === true &&\n        this.scrollActionAmount >\n          (tabWrapper.scrollWidth - tabWrapperRect.width) * -1\n      );\n    } catch (error) {\n      return false;\n    }\n  }\n\n  private move(amount: number, click = false) {\n    const tabsWrapper = this.getTabsWrapper();\n\n    if (!tabsWrapper) {\n      return;\n    }\n\n    const tabsWrapperVisibleWidth = tabsWrapper.getBoundingClientRect().width;\n    const maxScrollWidth =\n      -this.currentScrollAmount +\n      tabsWrapperVisibleWidth -\n      tabsWrapper.scrollWidth;\n\n    amount = amount < maxScrollWidth ? maxScrollWidth : amount;\n    amount += this.currentScrollAmount;\n    amount = Math.min(amount, 0);\n\n    const styles = [\n      `transform: translateX(${amount}px);`,\n      click ? 'transition: all ease-in-out 400ms;' : '',\n    ].join('');\n\n    tabsWrapper.setAttribute('style', styles);\n\n    if (click) this.currentScrollAmount = this.scrollActionAmount = amount;\n    else this.scrollActionAmount = amount;\n  }\n\n  @Watch('selected')\n  onSelectedChange(newValue: number) {\n    if (!this.showArrows()) return;\n\n    const tabRect = this.getTab(newValue).getBoundingClientRect();\n    const wrapperWidth = this.getTabsWrapper()?.clientWidth;\n    const arrowWidth = 32;\n\n    if (tabRect.left < arrowWidth) {\n      this.move(-tabRect.left + arrowWidth, true);\n    } else if (wrapperWidth && tabRect.right > wrapperWidth - arrowWidth) {\n      this.move(wrapperWidth - tabRect.right - arrowWidth, true);\n    }\n  }\n\n  private setSelected(index: number) {\n    this.selected = index;\n  }\n\n  private clickTab(index: number) {\n    if (!this.clickAction.isClick || 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  }\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    const windowClick = () => {\n      window.removeEventListener('mousemove', move, false);\n      window.removeEventListener('click', windowClick, false);\n      this.dragStop();\n    };\n    window.addEventListener('click', windowClick);\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    if (this.clickAction.timeout) {\n      clearTimeout(this.clickAction.timeout);\n      this.clickAction.timeout = null;\n    }\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    this.initResizeObserver();\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    this.renderArrows();\n  }\n\n  private renderArrows() {\n    requestAnimationFrameNoNgZone(() => {\n      this.showArrowNext = this.showNextArrow();\n      this.showArrowPrevious = this.showPreviousArrow();\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  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\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        {this.showArrowPrevious && (\n          <div class=\"arrow\" onClick={() => this.move(this.scrollAmount, true)}>\n            <ix-icon name={iconChevronLeftSmall}></ix-icon>\n          </div>\n        )}\n        <div\n          class={{\n            'tab-items': true,\n            'overflow-shadow': true,\n            'shadow-left': this.showArrowPrevious,\n            'shadow-right': this.showArrowNext,\n            'shadow-both': this.showArrowNext && this.showArrowPrevious,\n          }}\n        >\n          <div class=\"items-content\">\n            <slot></slot>\n          </div>\n        </div>\n        {this.showArrowNext && (\n          <div\n            class=\"arrow right\"\n            onClick={() => this.move(-this.scrollAmount, true)}\n          >\n            <ix-icon name={iconChevronRightSmall}></ix-icon>\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/p-93ba92af.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["colCss","Col","onResize","forceUpdate","this","getSize","breakpoint","size","sizeSm","sizeMd","sizeLg","getColumnSize","Breakpoints","forEach","isMediaQueryActive","matchBreakpoint","currentSize","getColumnSizeStyling","flex","width","colSize","render","h","Host","key","style","Object","assign","datePickerCss","DatePicker","constructor","hostRef","format","range","corners","minDate","maxDate","i18nDone","weekStartIndex","showWeekNumbers","standaloneAppearance","today","DateTime","now","toISO","selectedYear","tempYear","startYear","endYear","selectedMonth","tempMonth","dropdownButtonRef","makeRef","yearContainerRef","firstMonthRef","focusedDay","isDayFocus","monthChangedFromFocus","DAYS_IN_WEEK","calendar","watchFromPropHandler","newValue","currFromDate","undefined","date","parseDateString","updateSelectedYearMonth","watchToPropHandler","currToDate","onLocaleChange","setTranslations","getCurrentDate","_from","_a","isValid","_b","toFormat","_to","_c","_d","from","to","handleKeyUp","event","_focusedDay","getDaysInCurrentMonth","changeToAdjacentMonth","utc","daysInMonth","getDateTimeNow","fromISO","dateString","fromFormat","console","error","invalidExplanation","year","month","onDayBlur","onDayFocus","componentWillLoad","componentWillRender","calculateCalendar","componentDidRender","dayElem","hostElement","shadowRoot","querySelector","focus","dayNames","rotateWeekDayNames","Info","weekdays","locale","monthNames","months","index","clone","len","length","push","splice","onDone","dateSelect","emit","monthStart","startOf","monthEnd","endOf","startWeek","weekNumber","endWeek","monthStartWeekDayIndex","weekday","monthEndWeekDayIndex","monthStartWeekDayName","findIndex","d","monthEndWeekDayName","correctLastWeek","weeksInWeekYear","correctFirstWeek","currDayNumber","weekIndex","daysArr","j","dayNumbers","selectTempYear","stopPropagation","focusMonth","current","infiniteScrollYears","yearContainer","scroll","scrollTop","maxScroll","scrollHeight","atTop","atBottom","Math","round","offsetHeight","limit","first","firstElementChild","scrollTo","offsetTop","last","lastElementChild","selectMonth","dropdown","show","number","selectDay","selectedDay","target","classList","contains","fromJSDate","Date","onDateChange","then","dateChange","dateRangeChange","getDayClasses","day","todayObj","selectedDayObj","hasSame","selected","disabled","isWithinMinMaxDate","isWithinMinMaxYear","minDateYear","maxDateYear","isBefore","isAfter","isWithinMinMaxMonth","minDateObj","maxDateObj","minDateMonth","maxDateMonth","_minDate","_maxDate","renderYears","rows","class","arrowYear","onClick","onKeyUp","tabIndex","hidden","arrowPosition","name","iconChevronRightSmall","slot","ghost","icon","iconChevronLeftSmall","variant","ref","trigger","waitForCurrent","ignoreRelatedSubmenu","placement","onScroll","map","checkPosition","iconSingleCheck","grid","slice","week","Fragment","id","e","currentTarget","onFocus","onBlur","button","__decorate","OnListener","prototype","layoutGridCss","LayoutGrid","noMargin","gap","columns","rowCss","Row"],"sources":["src/components/col/col.scss?tag=ix-col&encapsulation=shadow","src/components/col/col.tsx","src/components/date-picker/date-picker.scss?tag=ix-date-picker&encapsulation=shadow","src/components/date-picker/date-picker.tsx","src/components/layout-grid/layout-grid.scss?tag=ix-layout-grid&encapsulation=shadow","src/components/layout-grid/layout-grid.tsx","src/components/row/row.scss?tag=ix-row&encapsulation=shadow","src/components/row/row.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  @include ix-component;\n  position: relative;\n  flex-basis: 0;\n  flex-grow: 1;\n  width: 100%;\n  max-width: 100%;\n  min-height: 1px;\n\n  padding: calc(var(--ix-layout-grid-gutter) * 0.5);\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, forceUpdate, h, Host, Listen, Prop } from '@stencil/core';\nimport { Breakpoint, matchBreakpoint } from '../utils/breakpoints';\n\ntype GridBreakpoint = Breakpoint | '';\n\nexport type ColumnSize =\n  | '1'\n  | '2'\n  | '3'\n  | '4'\n  | '5'\n  | '6'\n  | '7'\n  | '8'\n  | '9'\n  | '10'\n  | '11'\n  | '12'\n  | 'auto';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-col',\n  styleUrl: 'col.scss',\n  shadow: true,\n})\nexport class Col {\n  static Breakpoints: GridBreakpoint[] = ['', 'sm', 'md', 'lg'];\n\n  /**\n   * Size of the column\n   */\n  @Prop() size?: ColumnSize;\n\n  /**\n   * Size of the column for sm screens\n   */\n  @Prop() sizeSm?: ColumnSize;\n\n  /**\n   * Size of the column for md screens\n   */\n  @Prop() sizeMd?: ColumnSize;\n\n  /**\n   * Size of the column for lg screens\n   */\n  @Prop() sizeLg?: ColumnSize;\n\n  @Listen('resize', { target: 'window' })\n  onResize() {\n    forceUpdate(this);\n  }\n\n  private getSize(breakpoint: GridBreakpoint) {\n    if (breakpoint === '') {\n      return this.size;\n    }\n\n    if (breakpoint === 'sm') {\n      return this.sizeSm;\n    }\n\n    if (breakpoint === 'md') {\n      return this.sizeMd;\n    }\n\n    if (breakpoint === 'lg') {\n      return this.sizeLg;\n    }\n  }\n\n  private getColumnSize(): ColumnSize | undefined {\n    let size: ColumnSize | undefined;\n    Col.Breakpoints.forEach((breakpoint) => {\n      const isMediaQueryActive =\n        breakpoint !== '' ? matchBreakpoint(breakpoint) : true;\n\n      if (!isMediaQueryActive) {\n        return;\n      }\n\n      const currentSize = this.getSize(breakpoint);\n\n      if (currentSize) {\n        size = currentSize;\n      }\n    });\n\n    return size;\n  }\n\n  private getColumnSizeStyling() {\n    const size = this.getColumnSize();\n\n    if (!size) {\n      return;\n    }\n\n    if (size === 'auto') {\n      return {\n        flex: '0 0 auto',\n        width: 'auto',\n        'max-width': 'auto',\n      };\n    }\n\n    const colSize = `calc(calc(${size} / var(--ix-layout-grid-columns)) * 100%)`;\n\n    return {\n      flex: `0 0 ${colSize}`,\n      width: `${colSize}`,\n      'max-width': `${colSize}`,\n    };\n  }\n\n  render() {\n    return (\n      <Host\n        style={{\n          ...this.getColumnSizeStyling(),\n        }}\n      >\n        <slot></slot>\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\n@import 'common-variables';\n@import 'mixins/shadow-dom/component';\n@import 'mixins/text-truncation';\n\n:host {\n  @include ix-component;\n  display: block;\n  position: relative;\n  width: 21rem;\n\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .disabled-item {\n    pointer-events: none;\n    background-color: var(--theme-datepicker-day--background--disabled);\n    color: var(--theme-datepicker-day--color--disabled);\n    cursor: default;\n  }\n\n  .selector {\n    flex-basis: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: $tiny-space $default-space;\n\n    .dropdown {\n      color: var(--theme-menu-item--color);\n      font-size: 14px;\n      line-height: 20px;\n    }\n\n    .fontSize {\n      font-size: 16px;\n    }\n\n    .capitalize {\n      text-transform: capitalize;\n    }\n\n    .month-dropdown-item {\n      margin-left: 4px;\n      margin-right: 4px;\n\n      &:focus-visible {\n        outline: 1px solid var(--theme-color-focus-bdr);\n        outline-offset: var(--theme-btn--focus--outline-offset);\n      }\n    }\n\n    .arrowYear {\n      display: flex;\n      position: relative;\n      padding: $medium-space $x-large-space;\n      align-items: center;\n      cursor: pointer;\n\n      &:hover {\n        background-color: var(--theme-select-list-item--background--hover);\n      }\n\n      &.selected {\n        background-color: var(--theme-select-list-item--background--selected);\n      }\n\n      .arrowPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 6px);\n      }\n\n      .checkPosition {\n        position: absolute;\n        left: calc(($x-large-space / 2) - 6px);\n        top: calc(50% - 8px);\n      }\n\n      .monthMargin {\n        margin-left: 10px;\n      }\n    }\n  }\n\n  .wrapper {\n    display: flex;\n\n    .overflow {\n      overflow-y: scroll;\n      max-height: 250px;\n    }\n  }\n\n  .grid {\n    display: grid;\n    grid-template-columns: repeat(7, 40px);\n    grid-template-rows: repeat(7, 40px);\n\n    align-items: center;\n    justify-items: center;\n    justify-content: center;\n    color: var(--theme-datepicker-today--color);\n\n    &--show-week-numbers {\n      grid-template-columns: 24px repeat(7, 40px);\n    }\n\n    .calendar-item {\n      position: relative;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      background-color: var(--theme-datepicker-day--background);\n      border: 1px solid var(--theme-datepicker-day--background);\n      width: 40px;\n      height: 40px;\n      cursor: pointer;\n\n      &:first-child {\n        width: 24px;\n      }\n\n      &:focus-visible {\n        outline: 1px solid var(--theme-color-focus-bdr);\n        outline-offset: var(--theme-btn--focus--outline-offset);\n\n        background-color: var(--theme-datepicker-day--background--selected);\n        border: inset 1px solid\n          var(--theme-datepicker-day--border-color--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        font-size: 14px;\n        line-height: 20px;\n        letter-spacing: 0;\n      }\n\n      &.today {\n        border: 1px solid var(--theme-datepicker-today--border-color);\n\n        &:hover {\n          background-color: var(--theme-datepicker-day--background--hover);\n        }\n\n        &:active {\n          background-color: var(--theme-datepicker-day--background--active);\n        }\n\n        &.selected {\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n              --theme-datepicker-day--background--selected-hover\n            );\n          }\n\n          &:active {\n            background-color: var(\n              --theme-datepicker-day--background--selected-active\n            );\n          }\n\n          &.disabled {\n            pointer-events: none;\n            background-color: var(\n              --theme-datepicker-day--background--selected-disabled\n            );\n            border: 1px solid\n              var(--theme-datepicker-day--background--selected-disabled);\n            color: var(--theme-datepicker-day--color--selected-disabled);\n          }\n        }\n\n        &.range {\n          background-color: var(--theme-datepicker-day--background--range);\n          color: var(--theme-datepicker-day--color--range);\n          border: 1px solid var(--theme-datepicker-today--border-color--range);\n          box-shadow: inset 0 0 0 1px white;\n\n          &:hover {\n            background-color: var(\n              --theme-datepicker-day--background--range-hover\n            );\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-hover);\n          }\n\n          &:active {\n            background-color: var(\n              --theme-datepicker-day--background--range-active\n            );\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-active);\n          }\n\n          &.disabled {\n            background-color: var(\n              --theme-datepicker-day--background--range-disabled\n            );\n            color: var(--theme-datepicker-day--color--range-disabled);\n            border: 1px solid\n              var(--theme-datepicker-today--border-color--range-disabled);\n          }\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(--theme-datepicker-day--background--disabled);\n          color: var(--theme-datepicker-day--color--disabled);\n          cursor: default;\n        }\n      }\n\n      &:hover {\n        background-color: var(--theme-datepicker-day--background--hover);\n      }\n\n      &:active {\n        background-color: var(--theme-datepicker-day--background--active);\n      }\n\n      &.selected {\n        background-color: var(--theme-datepicker-day--background--selected);\n        color: var(--theme-datepicker-day--color--selected);\n        border: 1px solid var(--theme-datepicker-day--background--selected);\n\n        &:hover {\n          background-color: var(\n            --theme-datepicker-day--background--selected-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n            --theme-datepicker-day--background--selected-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n            --theme-datepicker-day--background--selected-disabled\n          );\n          color: var(--theme-datepicker-day--color--selected-disabled);\n        }\n      }\n\n      &.range {\n        background-color: var(--theme-datepicker-day--background--range);\n        color: var(--theme-datepicker-day--color--range);\n\n        &:hover {\n          background-color: var(\n            --theme-datepicker-day--background--range-hover\n          );\n        }\n\n        &:active {\n          background-color: var(\n            --theme-datepicker-day--background--range-active\n          );\n        }\n\n        &.disabled {\n          pointer-events: none;\n          background-color: var(\n            --theme-datepicker-day--background--range-disabled\n          );\n          color: var(--theme-datepicker-day--color--range-disabled);\n        }\n      }\n\n      &.disabled {\n        pointer-events: none;\n        background-color: var(--theme-datepicker-day--background--disabled);\n        color: var(--theme-datepicker-day--color--disabled);\n      }\n\n      &.week-day {\n        color: var(--theme-datepicker-weekday--color);\n        font-size: 12px;\n        line-height: 20px;\n        border: none;\n        background: none;\n        cursor: initial;\n\n        .overflow {\n          @include ellipsis;\n        }\n      }\n\n      &.empty-day {\n        border: none;\n        background: none;\n        cursor: initial;\n      }\n\n      &.week-number {\n        font-size: 10px;\n        line-height: 14px;\n        color: var(--theme-datepicker-weekday--color);\n        border: none;\n        background: none;\n        cursor: initial;\n        width: 1.5rem;\n      }\n    }\n  }\n\n  .button {\n    display: flex;\n    justify-content: flex-end;\n    margin-top: $default-space;\n  }\n\n  .hidden {\n    display: none;\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  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { DateTimeCardCorners } from '../date-time-card/date-time-card';\nimport { DateTime, Info } from 'luxon';\nimport { OnListener } from '../utils/listener';\nimport { IxDatePickerComponent } from './date-picker-component';\nimport { makeRef } from '../utils/make-ref';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n  iconSingleCheck,\n} from '@siemens/ix-icons/icons';\n\nexport type DateChangeEvent = {\n  from?: string;\n  to?: string;\n};\n\ninterface CalendarWeek {\n  weekNumber: number;\n  dayNumbers: (number | undefined)[];\n}\n\n@Component({\n  tag: 'ix-date-picker',\n  styleUrl: 'date-picker.scss',\n  shadow: true,\n})\nexport class DatePicker implements IxDatePickerComponent {\n  @Element() hostElement!: HTMLIxDatePickerElement;\n\n  /**\n   * Date format string.\n   * See {@link \"https://moment.github.io/luxon/#/formatting?id=table-of-tokens\"} for all available tokens.\n   */\n  @Prop() format: string = 'yyyy/LL/dd';\n\n  /**\n   * If true a date-range can be selected (from/to).\n   */\n  @Prop() range: boolean = true;\n\n  /**\n   * Corner style\n   */\n  @Prop() corners: DateTimeCardCorners = 'rounded';\n\n  /**\n   * The selected starting date. If the date-picker-rework is not in range mode this is the selected date.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() from: string | undefined;\n\n  @Watch('from')\n  watchFromPropHandler(newValue: string) {\n    if (!newValue) {\n      this.currFromDate = undefined;\n\n      return;\n    }\n\n    const date = this.parseDateString(newValue);\n\n    if (date) {\n      this.currFromDate = date;\n      this.updateSelectedYearMonth(date);\n    }\n  }\n\n  /**\n   * The selected end date. If the the date-picker-rework is not in range mode this property has no impact.\n   * Format has to match the `format` property.\n   *\n   * @since 1.1.0\n   */\n  @Prop() to: string | undefined;\n\n  @Watch('to')\n  watchToPropHandler(newValue: string) {\n    if (!newValue) {\n      this.currToDate = undefined;\n\n      return;\n    }\n\n    const date = this.parseDateString(newValue);\n\n    if (date) {\n      this.currToDate = date;\n      this.updateSelectedYearMonth(date);\n    }\n  }\n\n  /**\n   * The earliest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() minDate = '';\n\n  /**\n   * The latest date that can be selected by the date picker.\n   * If not set there will be no restriction.\n   *\n   * @since 1.1.0\n   */\n  @Prop() maxDate = '';\n\n  /**\n   * Text of date select button\n   *\n   * @since 2.1.0\n   */\n  @Prop({ attribute: 'i18n-done' }) i18nDone = 'Done';\n\n  /**\n   * The index of which day to start the week on, based on the Locale#weekdays array.\n   * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.\n   *\n   * @since 2.1.0\n   */\n  @Prop() weekStartIndex = 0;\n\n  /**\n   * Locale identifier (e.g. 'en' or 'de').\n   *\n   * @since 2.1.0\n   */\n  @Prop() locale?: string;\n\n  @Watch('locale')\n  onLocaleChange() {\n    this.setTranslations();\n  }\n\n  /**\n   * Shows week numbers displayed on the left side of the date picker\n   *\n   * @since 3.0.0\n   */\n  @Prop() showWeekNumbers = false;\n\n  /** @internal */\n  @Prop() standaloneAppearance = true;\n\n  /** @internal */\n  @Prop() today = DateTime.now().toISO();\n\n  /**\n   * Triggers if the date selection changes.\n   * Note: Since 2.0.0 `dateChange` does not dispatch detail property as `string`\n   *\n   * @since 2.1.0\n   */\n  @Event() dateChange!: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Triggers if the date selection changes.\n   * Only triggered if date-picker-rework is in range mode.\n   *\n   * @since 2.1.0\n   */\n  @Event() dateRangeChange!: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Date selection confirmed via button action\n   *\n   * @since 1.1.0\n   */\n  @Event() dateSelect!: EventEmitter<DateChangeEvent>;\n\n  /**\n   * Get the currently selected date-range.\n   */\n  @Method()\n  async getCurrentDate() {\n    const _from = this.currFromDate?.isValid\n      ? this.currFromDate?.toFormat(this.format)\n      : undefined;\n    const _to = this.currToDate?.isValid\n      ? this.currToDate?.toFormat(this.format)\n      : undefined;\n\n    if (this.range) {\n      return {\n        from: _from,\n        to: _to,\n      };\n    }\n\n    return {\n      from: _from,\n      to: undefined,\n    };\n  }\n\n  @State() currFromDate?: DateTime;\n  @State() currToDate?: DateTime;\n\n  @State() selectedYear = 0;\n  @State() tempYear = 0;\n  @State() startYear = 0;\n  @State() endYear = 0;\n  @State() selectedMonth = 0;\n  @State() tempMonth = 0;\n\n  private readonly dropdownButtonRef = makeRef<HTMLElement>();\n  private readonly yearContainerRef = makeRef<HTMLElement>();\n  private readonly firstMonthRef = makeRef<HTMLElement>();\n\n  @State() dayNames!: string[];\n  @State() monthNames!: string[];\n  @State() focusedDay: number = 1;\n\n  private isDayFocus = false;\n  private monthChangedFromFocus = false;\n  private readonly DAYS_IN_WEEK = 7;\n  private calendar: CalendarWeek[] = [];\n\n  @OnListener<DatePicker>('keydown')\n  handleKeyUp(event: KeyboardEvent) {\n    if (!this.isDayFocus) {\n      return;\n    }\n\n    let _focusedDay = this.focusedDay;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        _focusedDay--;\n        break;\n      case 'ArrowRight':\n        _focusedDay++;\n        break;\n      case 'ArrowUp':\n        _focusedDay = _focusedDay - 7;\n        break;\n      case 'ArrowDown':\n        _focusedDay = _focusedDay + 7;\n        break;\n      default:\n        return;\n    }\n\n    if (_focusedDay > this.getDaysInCurrentMonth()) {\n      _focusedDay = _focusedDay - this.getDaysInCurrentMonth();\n      this.changeToAdjacentMonth(1);\n      this.monthChangedFromFocus = true;\n    } else if (_focusedDay < 1) {\n      this.changeToAdjacentMonth(-1);\n      _focusedDay = _focusedDay + this.getDaysInCurrentMonth();\n      this.monthChangedFromFocus = true;\n    }\n\n    this.focusedDay = _focusedDay;\n  }\n\n  private getDaysInCurrentMonth(): number {\n    return (\n      DateTime.utc(this.selectedYear, this.selectedMonth + 1).daysInMonth || 0\n    );\n  }\n\n  private getDateTimeNow() {\n    return DateTime.fromISO(this.today);\n  }\n\n  private parseDateString(dateString: string): DateTime | undefined {\n    const date = DateTime.fromFormat(dateString, this.format);\n\n    if (!date.isValid) {\n      console.error(date.invalidExplanation);\n\n      return undefined;\n    }\n\n    return date;\n  }\n\n  private updateSelectedYearMonth(date: DateTime) {\n    this.selectedYear = date.year;\n    this.selectedMonth = date.month - 1;\n  }\n\n  onDayBlur() {\n    this.isDayFocus = false;\n  }\n\n  onDayFocus() {\n    this.isDayFocus = true;\n  }\n\n  componentWillLoad() {\n    this.setTranslations();\n\n    this.currFromDate = this.from\n      ? DateTime.fromFormat(this.from, this.format)\n      : undefined;\n    this.currToDate = this.to\n      ? DateTime.fromFormat(this.to, this.format)\n      : undefined;\n\n    const year = this.currFromDate?.year ?? this.getDateTimeNow().year;\n    this.startYear = year - 5;\n    this.endYear = year + 5;\n\n    this.selectedMonth =\n      (this.currFromDate?.month ?? this.getDateTimeNow().month) - 1;\n    this.selectedYear = year;\n    this.tempMonth = this.selectedMonth;\n    this.tempYear = this.selectedYear;\n  }\n\n  componentWillRender() {\n    this.calculateCalendar();\n  }\n\n  componentDidRender() {\n    if (!this.monthChangedFromFocus && !this.isDayFocus) {\n      return;\n    }\n\n    const dayElem = this.hostElement.shadowRoot!.querySelector(\n      `[id=day-cell-${this.focusedDay}]`\n    ) as HTMLElement;\n    dayElem.focus();\n  }\n\n  private setTranslations() {\n    this.dayNames = this.rotateWeekDayNames(\n      Info.weekdays('long', {\n        locale: this.locale,\n      }),\n      this.weekStartIndex\n    );\n\n    this.monthNames = Info.months('long', {\n      locale: this.locale,\n    });\n  }\n\n  /**\n   * Rotate the WeekdayNames array.\n   * Based on the position that should be the new 0-index.\n   */\n  private rotateWeekDayNames(weekdays: string[], index: number): string[] {\n    const clone = [...weekdays];\n\n    if (index === 0) {\n      return clone;\n    }\n\n    index = -index;\n    const len = weekdays.length;\n\n    clone.push(...clone.splice(0, ((-index % len) + len) % len));\n    return clone;\n  }\n\n  private async onDone() {\n    const date = await this.getCurrentDate();\n    this.dateSelect.emit(date);\n  }\n\n  private calculateCalendar() {\n    const calendar: CalendarWeek[] = [];\n    const month = DateTime.utc(this.selectedYear, this.selectedMonth + 1);\n    const monthStart = month.startOf('month');\n    const monthEnd = month.endOf('month');\n    let startWeek = monthStart.weekNumber;\n    let endWeek = monthEnd.weekNumber;\n    let monthStartWeekDayIndex = monthStart.weekday - 1;\n    let monthEndWeekDayIndex = monthEnd.weekday - 1;\n\n    if (this.weekStartIndex !== 0) {\n      // Find the positions where to start/stop counting the day-numbers based on which day the week starts\n      const weekdays = Info.weekdays();\n      const monthStartWeekDayName = weekdays[monthStart.weekday];\n\n      monthStartWeekDayIndex = this.dayNames.findIndex(\n        (d) => d === monthStartWeekDayName\n      );\n      const monthEndWeekDayName = weekdays[monthEnd.weekday];\n      monthEndWeekDayIndex = this.dayNames.findIndex(\n        (d) => d === monthEndWeekDayName\n      );\n    }\n\n    let correctLastWeek = false;\n    if (endWeek === 1) {\n      endWeek = monthEnd.weeksInWeekYear + 1;\n      correctLastWeek = true;\n    }\n\n    let correctFirstWeek = false;\n    if (startWeek === monthStart.weeksInWeekYear) {\n      startWeek = 1;\n      endWeek++;\n\n      correctFirstWeek = true;\n    }\n\n    let currDayNumber = 1;\n    for (\n      let weekIndex = startWeek;\n      weekIndex <= endWeek && currDayNumber <= 31;\n      weekIndex++\n    ) {\n      const daysArr: (number | undefined)[] = [];\n\n      for (let j = 0; j < this.DAYS_IN_WEEK && currDayNumber <= 31; j++) {\n        // Display empty cells until the calender starts/has ended\n        if (\n          (weekIndex === startWeek && j < monthStartWeekDayIndex) ||\n          (weekIndex === endWeek && j > monthEndWeekDayIndex)\n        ) {\n          daysArr.push(undefined);\n        } else {\n          daysArr.push(currDayNumber++);\n        }\n      }\n\n      if (correctFirstWeek || correctLastWeek) {\n        if (weekIndex === 1) {\n          calendar.push({\n            weekNumber: monthStart.weeksInWeekYear,\n            dayNumbers: daysArr,\n          });\n        } else if (weekIndex === monthEnd.weekNumber) {\n          calendar.push({\n            weekNumber: 1,\n            dayNumbers: daysArr,\n          });\n        } else {\n          calendar.push({\n            weekNumber: weekIndex - 1,\n            dayNumbers: daysArr,\n          });\n        }\n        continue;\n      }\n\n      calendar.push({\n        weekNumber: weekIndex,\n        dayNumbers: daysArr,\n      });\n    }\n\n    this.calendar = calendar;\n  }\n\n  private selectTempYear(event: MouseEvent, year: number) {\n    event?.stopPropagation();\n    this.tempYear = year;\n  }\n\n  private focusMonth() {\n    this.firstMonthRef.current?.focus();\n  }\n\n  private infiniteScrollYears() {\n    const yearContainer = this.yearContainerRef.current;\n\n    if (!yearContainer) {\n      return;\n    }\n\n    const scroll = yearContainer.scrollTop;\n    const maxScroll = yearContainer.scrollHeight;\n    const atTop = scroll === 0;\n    const atBottom =\n      Math.round(scroll + yearContainer.offsetHeight) >= maxScroll;\n    const limit = 200;\n\n    if (this.endYear - this.startYear > limit) return;\n\n    if (atTop) {\n      const first = yearContainer.firstElementChild as HTMLElement;\n      this.startYear -= 5;\n      yearContainer.scrollTo(0, first.offsetTop);\n\n      return;\n    }\n\n    if (atBottom) {\n      const last = yearContainer.lastElementChild as HTMLElement;\n      this.endYear += 5;\n      yearContainer.scrollTo(0, last.offsetTop);\n    }\n  }\n\n  private selectMonth(month: number) {\n    this.selectedMonth = month;\n    this.selectedYear = this.tempYear;\n    this.tempMonth = month;\n\n    const dropdown = this.hostElement.shadowRoot!.querySelector('ix-dropdown');\n    if (dropdown) {\n      dropdown.show = false;\n    }\n  }\n\n  private changeToAdjacentMonth(number: -1 | 1) {\n    if (this.selectedMonth + number < 0) {\n      this.selectedYear--;\n      this.selectedMonth = 11;\n    } else if (this.selectedMonth + number > 11) {\n      this.selectedYear++;\n      this.selectedMonth = 0;\n    } else {\n      this.selectedMonth += number;\n    }\n  }\n\n  private selectDay(selectedDay: number, target: Element) {\n    if (target.classList.contains('disabled')) {\n      return;\n    }\n\n    const date = DateTime.fromJSDate(\n      new Date(this.selectedYear, this.selectedMonth, selectedDay)\n    );\n\n    if (!this.range || this.currFromDate === undefined) {\n      this.currFromDate = date;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Reset the range selection\n    if (this.currToDate !== undefined) {\n      this.currFromDate = date;\n      this.currToDate = undefined;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Swap from/to if the second date is before the current date\n    if (date < this.currFromDate) {\n      this.currToDate = this.currFromDate;\n      this.currFromDate = date;\n      this.onDateChange();\n\n      return;\n    }\n\n    // Set the range normally\n    this.currToDate = date;\n    this.onDateChange();\n  }\n\n  private onDateChange() {\n    this.getCurrentDate().then((date) => {\n      this.dateChange.emit(date);\n      if (this.range) {\n        this.dateRangeChange.emit(date);\n      }\n    });\n  }\n\n  private getDayClasses(day: number): any {\n    const todayObj = this.getDateTimeNow();\n    const selectedDayObj = DateTime.fromJSDate(\n      new Date(this.selectedYear, this.selectedMonth, day)\n    );\n\n    return {\n      'calendar-item': true,\n      'empty-day': day === undefined,\n      today: todayObj.hasSame(selectedDayObj, 'day'),\n      selected:\n        this.currFromDate?.hasSame(selectedDayObj, 'day') ||\n        this.currToDate?.hasSame(selectedDayObj, 'day'),\n      range:\n        this.currFromDate &&\n        selectedDayObj.startOf('day') > this.currFromDate.startOf('day') &&\n        this.currToDate !== undefined &&\n        selectedDayObj.startOf('day') < this.currToDate?.startOf('day'),\n      disabled: !this.isWithinMinMaxDate(selectedDayObj),\n    };\n  }\n\n  private isWithinMinMaxYear(year: number): boolean {\n    const minDateYear = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format).year\n      : undefined;\n    const maxDateYear = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format).year\n      : undefined;\n    const isBefore = minDateYear ? year < minDateYear : false;\n    const isAfter = maxDateYear ? year > maxDateYear : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private isWithinMinMaxMonth(month: number): boolean {\n    const minDateObj = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : undefined;\n    const maxDateObj = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : undefined;\n    const minDateMonth = minDateObj?.month;\n    const maxDateMonth = maxDateObj?.month;\n    const isBefore = minDateMonth\n      ? this.tempYear === minDateObj.year && month < minDateMonth\n      : false;\n    const isAfter = maxDateMonth\n      ? this.tempYear === maxDateObj.year && month > maxDateMonth\n      : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private isWithinMinMaxDate(date: DateTime): boolean {\n    const _minDate = this.minDate\n      ? DateTime.fromFormat(this.minDate, this.format)\n      : undefined;\n    const _maxDate = this.maxDate\n      ? DateTime.fromFormat(this.maxDate, this.format)\n      : undefined;\n    const isBefore = _minDate\n      ? date.startOf('day') < _minDate.startOf('day')\n      : false;\n    const isAfter = _maxDate\n      ? date.startOf('day') > _maxDate.startOf('day')\n      : false;\n\n    return !isBefore && !isAfter;\n  }\n\n  private renderYears(): any[] {\n    const rows = [];\n\n    for (let year = this.startYear; year <= this.endYear; year++) {\n      rows.push(\n        <div\n          key={year}\n          class={{\n            arrowYear: true,\n            'month-dropdown-item': true,\n            'disabled-item': !this.isWithinMinMaxYear(year),\n          }}\n          onClick={(event) => this.selectTempYear(event, year)}\n          onKeyUp={(event) => {\n            if (event.key === 'Enter') {\n              this.tempYear = year;\n              this.focusMonth();\n            }\n          }}\n          tabIndex={0}\n        >\n          <ix-icon\n            class={{\n              hidden: this.tempYear !== year,\n              arrowPosition: true,\n            }}\n            name={iconChevronRightSmall}\n            size=\"12\"\n          ></ix-icon>\n          <div style={{ 'min-width': 'max-content' }}>{`${year}`}</div>\n        </div>\n      );\n    }\n\n    return rows;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-date-time-card\n          corners={this.corners}\n          standaloneAppearance={this.standaloneAppearance}\n        >\n          <div class=\"header\" slot=\"header\">\n            <ix-icon-button\n              onClick={() => this.changeToAdjacentMonth(-1)}\n              ghost\n              icon={iconChevronLeftSmall}\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n            <div class=\"selector\">\n              <ix-button\n                ghost\n                ref={this.dropdownButtonRef}\n                data-testid=\"year-month-button\"\n              >\n                <span class=\"fontSize capitalize\">\n                  {this.monthNames[this.selectedMonth]} {this.selectedYear}\n                </span>\n              </ix-button>\n              <ix-dropdown\n                data-testid=\"year-month-dropdown\"\n                class=\"dropdown\"\n                trigger={this.dropdownButtonRef.waitForCurrent()}\n                ignoreRelatedSubmenu\n                placement=\"bottom-start\"\n              >\n                <div class=\"wrapper\">\n                  <div\n                    data-testid=\"year-container\"\n                    class=\"overflow\"\n                    onScroll={() => this.infiniteScrollYears()}\n                    ref={this.yearContainerRef}\n                  >\n                    {this.renderYears()}\n                  </div>\n                  <div class=\"overflow\" data-testid=\"month-container\">\n                    {this.monthNames.map((month, index) => (\n                      <div\n                        key={month}\n                        ref={(ref) => {\n                          if (month === this.monthNames[0]) {\n                            this.firstMonthRef(ref);\n                          }\n                        }}\n                        class={{\n                          arrowYear: true,\n                          'month-dropdown-item': true,\n                          selected:\n                            this.tempYear === this.selectedYear &&\n                            this.tempMonth === index,\n                          'disabled-item': !this.isWithinMinMaxMonth(index),\n                        }}\n                        onClick={() => this.selectMonth(index)}\n                        onKeyUp={(event) =>\n                          event.key === 'Enter' && this.selectMonth(index)\n                        }\n                        tabIndex={0}\n                      >\n                        <ix-icon\n                          class={{\n                            hidden:\n                              this.tempYear !== this.selectedYear ||\n                              this.tempMonth !== index,\n                            checkPosition: true,\n                          }}\n                          name={iconSingleCheck}\n                          size=\"16\"\n                        ></ix-icon>\n                        <div>\n                          <span class=\"capitalize monthMargin\">{`${month} ${this.tempYear}`}</span>\n                        </div>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </ix-dropdown>\n            </div>\n            <ix-icon-button\n              onClick={() => this.changeToAdjacentMonth(1)}\n              ghost\n              icon={iconChevronRightSmall}\n              variant=\"primary\"\n              class=\"arrows\"\n            ></ix-icon-button>\n          </div>\n          <div\n            class={{\n              grid: true,\n              'grid--show-week-numbers': this.showWeekNumbers,\n            }}\n          >\n            {this.showWeekNumbers && <div class=\"calendar-item week-day\"></div>}\n            {this.dayNames.map((name) => (\n              <div key={name} class=\"calendar-item week-day\">\n                <div class=\"overflow\">{name.slice(0, 3)}</div>\n              </div>\n            ))}\n            {this.calendar.map((week) => {\n              return (\n                <Fragment>\n                  {this.showWeekNumbers && (\n                    <div class=\"calendar-item week-number\">\n                      {week.weekNumber}\n                    </div>\n                  )}\n                  {week.dayNumbers.map((day) => {\n                    return day ? (\n                      <div\n                        key={day}\n                        id={`day-cell-${day}`}\n                        date-calender-day\n                        class={this.getDayClasses(day)}\n                        onClick={(e) => {\n                          const target = e.currentTarget as HTMLElement;\n                          this.selectDay(day, target);\n                        }}\n                        onKeyUp={(e) => {\n                          const target = e.currentTarget as HTMLElement;\n                          if (e.key === 'Enter') {\n                            this.selectDay(day, target);\n                          }\n                        }}\n                        tabIndex={day === this.focusedDay ? 0 : -1}\n                        onFocus={() => this.onDayFocus()}\n                        onBlur={() => this.onDayBlur()}\n                      >\n                        {day}\n                      </div>\n                    ) : (\n                      <div></div>\n                    );\n                  })}\n                </Fragment>\n              );\n            })}\n          </div>\n          <div\n            class={{\n              button: true,\n              hidden: !this.range || !this.standaloneAppearance,\n            }}\n          >\n            <ix-button onClick={() => this.onDone()}>{this.i18nDone}</ix-button>\n          </div>\n        </ix-date-time-card>\n      </Host>\n    );\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:host {\n  --ix-layout-grid-gutter: 24px;\n\n  display: block;\n  flex: 1 1 0%;\n  width: 100%;\n\n  padding-left: calc(var(--ix-layout-grid-gutter) * 0.5);\n  padding-right: calc(var(--ix-layout-grid-gutter) * 0.5);\n}\n\n:host(.no-margin) {\n  padding-left: 0;\n  padding-right: 0;\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, h, Host, Prop } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-layout-grid',\n  styleUrl: 'layout-grid.scss',\n  shadow: true,\n})\nexport class LayoutGrid {\n  /**\n   * The grid will not have any horizontal padding\n   */\n  @Prop() noMargin = false;\n\n  /**\n   * Grid gap\n   */\n  @Prop() gap: '8' | '12' | '16' | '24' = '24';\n\n  /**\n   * Overwrite the default number of columns. Choose between 2 and 12 columns.\n   */\n  @Prop() columns = 12;\n\n  render() {\n    return (\n      <Host\n        class={{\n          'no-margin': this.noMargin,\n        }}\n        style={{\n          '--ix-layout-grid-columns': `${this.columns}`,\n          '--ix-layout-grid-gutter': `${this.gap}px`,\n        }}\n      >\n        <slot></slot>\n      </Host>\n    );\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\n:host {\n  display: flex;\n  flex-wrap: wrap;\n}\n\n:host(:not(:first-of-type)) {\n  margin-block-start: var(--ix-layout-grid-row-margin, 0);\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, h, Host } from '@stencil/core';\n\n/**\n * @since 2.0.0\n */\n@Component({\n  tag: 'ix-row',\n  styleUrl: 'row.scss',\n  shadow: true,\n})\nexport class Row {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/p-96bbbbcb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["mapNavigationCss","MapNavigation","constructor","hostRef","this","hideContextMenu","isSidebarOpen","hasContentHeader","menu","hostElement","querySelector","menuOverlay","mapNavMenu","shadowRoot","sidebar","overlay","componentDidRender","appendMenu","closeOverlay","componentWillLoad","useContextProvider","ApplicationLayoutContext","hideHeader","host","addEventListener","event","state","detail","toggleSidebar","enableMapExpand","show","undefined","openSidebar","closeSidebar","navigationToggled","emit","toggleMapExpand","anime","targets","duration","defaultTime","marginLeft","opacity","easing","complete","classList","add","begin","remove","openOverlay","name","component","icon","color","slowTime","backdropFilter","translateX","overlayInstance","document","createElement","setAttribute","appendChild","_a","firstChild","checkHasContentHeader","e","nodes","currentTarget","assignedNodes","flatten","length","render","h","Host","key","class","applicationName","slot","navigationTitle","iconContextMenu","ghost","size","variant","onClick","_","contextMenuClick","empty","onSlotchange"],"sources":["src/components/map-navigation/map-navigation.scss?tag=ix-map-navigation&encapsulation=shadow","src/components/map-navigation/map-navigation.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 'legacy/mixins/fonts';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  $appHeaderHeight: 3.5rem;\n  $appHeaderGradientHeight: 4rem;\n  $navHeaderHeight: 11.5rem;\n  $sidebarWidth: 29.75rem;\n\n  display: flex;\n  position: relative;\n  width: 100%;\n  height: 100%;\n\n  .map-nav {\n    display: flex;\n    margin-left: 3.25rem;\n    position: relative;\n    height: 100%;\n    flex-grow: 1;\n    overflow: hidden;\n  }\n\n  .map-nav-sidebar {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    width: $sidebarWidth;\n    max-width: $sidebarWidth;\n    min-width: $sidebarWidth;\n    height: 100%;\n    left: 4rem;\n    background-color: var(--theme-map-navigation--background);\n    border-inline-end: 0.125rem solid\n      var(--theme-map-navigation-separator--background);\n    z-index: 99;\n\n    &.display-none {\n      display: none;\n    }\n  }\n\n  .map-nav-sidebar-content {\n    align-items: center;\n    position: relative;\n    overflow: auto;\n    height: 100%;\n    width: 100%;\n\n    .map-nav-sidebar-static-content {\n      @include text-h2;\n      display: flex;\n      justify-content: space-between;\n      margin-top: 0.437rem;\n      margin-bottom: 0.812rem;\n      margin-left: $default-space;\n      margin-right: $default-space;\n    }\n  }\n\n  .map-nav-header {\n    display: flex;\n    position: relative;\n    align-items: center;\n    height: $appHeaderHeight;\n    min-height: $appHeaderHeight;\n    width: 100%;\n\n    .map-nav-header-brand {\n      background-color: var(--theme-map-navigation-background);\n\n      padding-left: $default-space;\n      padding-right: $default-space;\n      padding-bottom: 0.625rem;\n      height: 100%;\n      width: 100%;\n      --theme-app-header--color: var(--theme-map-navigation-header--color);\n      --theme-app-header-logo--color: var(--theme-map-navigation-logo--color);\n\n      button {\n        margin-left: $default-space;\n      }\n    }\n  }\n\n  .map-nav-header-content {\n    display: flex;\n    height: $appHeaderHeight;\n    align-items: center;\n    overflow: hidden;\n    padding: 0 $default-space;\n\n    &.empty {\n      height: 0;\n    }\n  }\n\n  .map-nav-title {\n    @include text-h2();\n\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n  }\n\n  .content {\n    display: block;\n    flex-grow: 1;\n    position: relative;\n    height: 100%;\n    overflow: hidden;\n    z-index: calc(var(--theme-z-index-sticky) - 1);\n  }\n\n  ::slotted(ix-menu) {\n    position: absolute;\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  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport anime from 'animejs';\nimport { ApplicationLayoutContext } from '../utils/application-layout/context';\nimport { useContextProvider } from '../utils/context';\nimport { iconContextMenu } from '@siemens/ix-icons/icons';\n\n@Component({\n  tag: 'ix-map-navigation',\n  styleUrl: 'map-navigation.scss',\n  shadow: true,\n})\nexport class MapNavigation {\n  private static readonly defaultTime = 150;\n  private static readonly slowTime = 500;\n\n  @Element() hostElement!: HTMLIxMapNavigationElement;\n\n  /**\n   * Application name\n   */\n  @Prop() applicationName?: string;\n\n  /**\n   * Navigation title\n   */\n  @Prop() navigationTitle?: string;\n\n  /**\n   * Hide the sidebar context menu button when set to true\n   */\n  @Prop() hideContextMenu = true;\n\n  /**\n   * Navigation toggled\n   */\n  @Event() navigationToggled!: EventEmitter<boolean>;\n\n  /**\n   * Context menu clicked\n   */\n  @Event() contextMenuClick!: EventEmitter<void>;\n\n  @State() isSidebarOpen = true;\n  @State() hasContentHeader = false;\n\n  get menu() {\n    return this.hostElement.querySelector('ix-menu')!;\n  }\n\n  get menuOverlay() {\n    return this.hostElement.querySelector('ix-menu-overlay')!;\n  }\n\n  get mapNavMenu() {\n    return this.hostElement.shadowRoot!.querySelector('.map-nav-menu')!;\n  }\n\n  get sidebar() {\n    return this.hostElement.shadowRoot!.querySelector('.map-nav-sidebar')!;\n  }\n\n  get overlay() {\n    return this.hostElement.shadowRoot!.querySelector('#overlay')!;\n  }\n\n  componentDidRender() {\n    this.appendMenu();\n    this.closeOverlay();\n  }\n\n  componentWillLoad() {\n    useContextProvider(this.hostElement, ApplicationLayoutContext, {\n      hideHeader: false,\n      host: 'map-navigation',\n    });\n  }\n\n  private appendMenu() {\n    this.menu.addEventListener(\n      'mapExpandChange',\n      (event: CustomEvent<boolean>) => {\n        const state = !event.detail;\n        this.toggleSidebar(state);\n      }\n    );\n    this.menu.enableMapExpand = true;\n  }\n\n  /**\n   * Change the visibility of the sidebar\n   *\n   * @param show new visibility state\n   * @since 1.6.0\n   */\n  @Method()\n  async toggleSidebar(show?: boolean) {\n    if (show !== undefined) {\n      this.isSidebarOpen = show;\n    } else {\n      this.isSidebarOpen = !this.isSidebarOpen;\n    }\n\n    if (this.isSidebarOpen) {\n      this.openSidebar();\n    } else {\n      this.closeSidebar();\n    }\n\n    this.navigationToggled.emit(this.isSidebarOpen);\n    this.menu.toggleMapExpand(this.isSidebarOpen);\n  }\n\n  private closeSidebar() {\n    anime({\n      targets: this.sidebar,\n      duration: MapNavigation.defaultTime,\n      marginLeft: [0, '-29.75rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        this.sidebar.classList.add('display-none');\n      },\n    });\n  }\n\n  private openSidebar() {\n    anime({\n      targets: this.sidebar,\n      duration: MapNavigation.defaultTime,\n      marginLeft: ['-29.75rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.sidebar.classList.remove('display-none');\n      },\n    });\n  }\n\n  /**\n   * Open a overlay inside content area\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   *\n   * @param name\n   * @param component\n   * @param icon\n   * @param color\n   */\n  @Method()\n  async openOverlay(\n    name: string,\n    component: HTMLElement,\n    icon?: string,\n    color?: string\n  ) {\n    anime({\n      targets: this.overlay,\n      duration: MapNavigation.slowTime,\n      backdropFilter: [0, 'blur(1rem)'],\n      translateX: ['-4rem', 0],\n      opacity: [0, 1],\n      easing: 'easeOutSine',\n      begin: () => {\n        this.overlay.classList.remove('display-none');\n      },\n    });\n\n    const overlayInstance = document.createElement('ix-map-navigation-overlay');\n    overlayInstance.setAttribute('color', color ?? '');\n    overlayInstance.setAttribute('name', name);\n    overlayInstance.setAttribute('icon', icon ?? '');\n    overlayInstance.setAttribute('slot', 'overlay');\n    overlayInstance.addEventListener('closeClick', () => this.closeOverlay());\n    overlayInstance.appendChild(component);\n    this.hostElement.appendChild(overlayInstance);\n  }\n\n  /**\n   * Close current shown overlay\n   * @deprecated Will be removed in 2.0.0. Use slot based approach\n   */\n  @Method()\n  async closeOverlay() {\n    anime({\n      targets: this.overlay,\n      duration: MapNavigation.slowTime,\n      backdropFilter: ['blur(1rem)', 0],\n      translateX: [0, '-4rem'],\n      opacity: [1, 0],\n      easing: 'easeInSine',\n      complete: () => {\n        if (!this.overlay) {\n          return;\n        }\n        this.overlay.firstChild?.remove();\n        this.overlay.classList.add('display-none');\n      },\n    });\n  }\n\n  private checkHasContentHeader(e: Event) {\n    const nodes = (e.currentTarget as HTMLSlotElement).assignedNodes({\n      flatten: true,\n    });\n\n    this.hasContentHeader = nodes?.length !== 0;\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot name=\"menu\"></slot>\n        <div class=\"map-nav\">\n          <div class=\"map-nav-sidebar\">\n            <div class=\"map-nav-header\">\n              <ix-application-header\n                name={this.applicationName}\n                class=\"map-nav-header-brand\"\n              >\n                <slot slot=\"logo\" name=\"logo\"></slot>\n              </ix-application-header>\n            </div>\n            <div class=\"map-nav-sidebar-content\">\n              <div class=\"map-nav-sidebar-static-content\">\n                <div class=\"map-nav-title\">{this.navigationTitle}</div>\n                {this.hideContextMenu ? (\n                  ''\n                ) : (\n                  <ix-icon-button\n                    icon={iconContextMenu}\n                    ghost\n                    size=\"24\"\n                    variant=\"secondary\"\n                    onClick={(_) => this.contextMenuClick.emit()}\n                  ></ix-icon-button>\n                )}\n              </div>\n              <div class=\"map-nav-sidebar-user-content\">\n                <slot name=\"sidebar-content\"></slot>\n              </div>\n            </div>\n          </div>\n          <div class=\"content\">\n            <div\n              class={{\n                'map-nav-header-content': true,\n                'bg-2': true,\n                empty: !this.hasContentHeader,\n              }}\n            >\n              <slot\n                name=\"content-header\"\n                onSlotchange={(e) => this.checkHasContentHeader(e)}\n              ></slot>\n            </div>\n            <main>\n              <slot></slot>\n              <slot name=\"overlay\"></slot>\n            </main>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/p-9a679e62.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["filterChipCss","FilterChip","constructor","hostRef","this","disabled","readonly","onCloseClick","event","preventDefault","stopPropagation","closeClick","emit","render","h","Host","key","class","title","hostElement","textContent","ghost","oval","icon","iconCloseSmall","size","tabindex","variant","onClick","e","IxSelectItemLabelChangeEvent","CustomEvent","detail","super","bubbles","IxSelectItemValueChangeEvent","selectItemCss","SelectItem","selected","hover","componentLoaded","getDropdownItemElement","dropdownItem","onItemClick","itemClick","value","querySelector","componentDidRender","undefined","console","warn","onValueChange","newValue","oldValue","dispatchEvent","labelChange","checked","label"],"sources":["src/components/filter-chip/filter-chip.scss?tag=ix-filter-chip&encapsulation=shadow","src/components/filter-chip/filter-chip.tsx","src/components/select-item/events.ts","src/components/select-item/select-item.scss?tag=ix-select-item&encapsulation=shadow","src/components/select-item/select-item.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/hover';\n@import 'mixins/text-truncation';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  height: $large-space;\n  padding-left: $small-space;\n  border: var(--theme-focus--border-thickness) solid\n    var(--theme-chip-primary-outline--border-color);\n  border-radius: $x-large-space;\n  background-color: var(--theme-color-ghost);\n  color: var(--theme-chip-primary-outline--color);\n\n  .slot-container {\n    @include ellipsis;\n\n    :host-context(.disabled) {\n      background-color: var(--theme-color-ghost);\n      border-color: var(--theme-color-component-4);\n      color: var(--theme-color-weak-text);\n    }\n  }\n\n  ix-icon-button {\n    height: $large-space;\n    margin-left: 0.25rem;\n\n    @include focus-visible {\n      outline: none;\n    }\n  }\n}\n\n:host(.disabled) {\n  border: var(--theme-focus--border-thickness) solid\n    var(--theme-color-component-4);\n  color: var(--theme-color-weak-text);\n  padding-right: $small-space;\n\n  cursor: default;\n}\n\n:host(.readonly) {\n  padding-right: $small-space;\n}\n\n@include host-hover {\n  background-color: var(--theme-color-ghost-primary--hover);\n  border-color: var(--theme-chip-primary-outline--border-color--hover);\n  color: var(--theme-chip-primary-outline--color--hover);\n}\n\n@include host-active {\n  background-color: var(--theme-color-ghost-primary--active);\n  border-color: var(--theme-chip-primary-outline--border-color--active);\n  color: var(--theme-chip-primary-outline--color--active);\n}\n\n@include host-focus-visible {\n  outline: var(--theme-color-focus-bdr) solid\n    var(--theme-focus--border-thickness);\n  outline-offset: -0.125rem;\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 { iconCloseSmall } from '@siemens/ix-icons/icons';\nimport {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n} from '@stencil/core';\n\n@Component({\n  tag: 'ix-filter-chip',\n  styleUrl: 'filter-chip.scss',\n  shadow: true,\n})\nexport class FilterChip {\n  @Element() hostElement!: HTMLIxFilterChipElement;\n\n  /**\n   * If true the filter chip will be in disabled state\n   */\n  @Prop() disabled = false;\n\n  /**\n   * If true the filter chip will be in readonly mode\n   * @since 2.0.0\n   */\n  @Prop() readonly = false;\n\n  /**\n   * Close clicked\n   */\n  @Event() closeClick!: EventEmitter<void>;\n\n  private onCloseClick(event: Event) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.closeClick.emit();\n  }\n\n  render() {\n    return (\n      <Host\n        class={{ disabled: this.disabled, readonly: this.readonly }}\n        title={this.hostElement.textContent}\n      >\n        <div class=\"slot-container\">\n          <slot></slot>\n        </div>\n        {!this.disabled && !this.readonly ? (\n          <ix-icon-button\n            ghost\n            oval\n            icon={iconCloseSmall}\n            size=\"16\"\n            tabindex={this.disabled ? -1 : 0}\n            variant=\"primary\"\n            disabled={this.disabled}\n            onClick={(e) => this.onCloseClick(e)}\n          ></ix-icon-button>\n        ) : null}\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 */\nexport class IxSelectItemLabelChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:labelChange', {\n      bubbles: true,\n      detail,\n    });\n  }\n}\n\nexport class IxSelectItemValueChangeEvent extends CustomEvent<{\n  oldValue: string;\n  newValue: string;\n}> {\n  constructor(detail: { oldValue: string; newValue: string }) {\n    super('ix-select-item:valueChange', {\n      bubbles: true,\n      detail,\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\n:host {\n  display: block;\n  position: relative;\n\n  > ix-dropdown-item {\n    width: 100%;\n  }\n\n  ix-dropdown-item {\n    color: var(--theme-color-std-text);\n  }\n\n  .select-item-checked {\n    background-color: var(--theme-select-list-item--background--selected);\n    --ix-dropdown-item-checked-color: var(--theme-color-std-text);\n  }\n}\n\n:host(.display-none) {\n  display: none;\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  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport {\n  IxSelectItemLabelChangeEvent,\n  IxSelectItemValueChangeEvent,\n} from './events';\nimport { DropdownItemWrapper } from '../dropdown/dropdown-controller';\n\n@Component({\n  tag: 'ix-select-item',\n  styleUrl: 'select-item.scss',\n  shadow: true,\n})\nexport class SelectItem implements DropdownItemWrapper {\n  @Element() hostElement!: HTMLIxSelectItemElement;\n\n  /**\n   * Displayed name of the item\n   */\n  @Prop({ reflect: true }) label?: string;\n\n  /**\n   * The value of the item.\n   * Important: The select component uses string values to handle selection and will call toString() on this value.\n   * Therefor a string should be passed to value to prevent unexpected behavior.\n   */\n  @Prop({ reflect: true }) value!: string;\n\n  /**\n   * Flag indicating whether the item is selected\n   */\n  @Prop() selected = false;\n\n  /**\n   * @internal\n   */\n  @Prop() hover = false;\n\n  /**\n   * Item clicked\n   */\n  @Event() itemClick!: EventEmitter<string>;\n\n  private componentLoaded = false;\n\n  /** @internal */\n  @Method()\n  async getDropdownItemElement(): Promise<HTMLIxDropdownItemElement> {\n    return this.dropdownItem!;\n  }\n\n  /**\n   * @internal\n   * @param event\n   */\n  @Method()\n  async onItemClick(event?: CustomEvent<HTMLIxDropdownItemElement>) {\n    event?.preventDefault();\n    event?.stopPropagation();\n\n    this.itemClick.emit(this.value);\n  }\n\n  get dropdownItem() {\n    return this.hostElement.querySelector('ix-dropdown-item');\n  }\n\n  componentDidRender() {\n    if (this.value === undefined || this.value === null) {\n      console.warn('ix-select-item must have a `value` property');\n    }\n    this.componentLoaded = true;\n  }\n\n  @Watch('value')\n  onValueChange(newValue: string, oldValue: string) {\n    if (this.componentLoaded) {\n      this.hostElement.dispatchEvent(\n        new IxSelectItemValueChangeEvent({\n          newValue: newValue,\n          oldValue: oldValue,\n        })\n      );\n    }\n  }\n\n  @Watch('label')\n  labelChange(newValue: string, oldValue: string) {\n    if (this.componentLoaded) {\n      this.hostElement.dispatchEvent(\n        new IxSelectItemLabelChangeEvent({\n          newValue: newValue,\n          oldValue: oldValue,\n        })\n      );\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-dropdown-item\n          class={{\n            'select-item-checked': this.selected,\n          }}\n          checked={this.selected}\n          label={this.label ? this.label : this.value}\n          onItemClick={(e) => this.onItemClick(e)}\n        ></ix-dropdown-item>\n      </Host>\n    );\n  }\n}\n"],"mappings":"oGAAA,MAAMA,EAAgB,20E,MCyBTC,EAAU,MALvB,WAAAC,CAAAC,G,iDAWUC,KAAQC,SAAG,MAMXD,KAAQE,SAAG,KAqCpB,CA9BS,YAAAC,CAAaC,GACnBA,EAAMC,iBACND,EAAME,kBACNN,KAAKO,WAAWC,M,CAGlB,MAAAC,GACE,OACEC,EAACC,EACC,CAAAC,IAAA,2CAAAC,MAAO,CAAEZ,SAAUD,KAAKC,SAAUC,SAAUF,KAAKE,UACjDY,MAAOd,KAAKe,YAAYC,aAExBN,EAAK,OAAAE,IAAA,2CAAAC,MAAM,kBACTH,EAAA,QAAAE,IAAA,+CAEAZ,KAAKC,WAAaD,KAAKE,SACvBQ,EAAA,kBACEO,MACA,KAAAC,KACA,KAAAC,KAAMC,EACNC,KAAK,KACLC,SAAUtB,KAAKC,UAAW,EAAK,EAC/BsB,QAAQ,UACRtB,SAAUD,KAAKC,SACfuB,QAAUC,GAAMzB,KAAKG,aAAasB,KAElC,K,8CC9DN,MAAOC,UAAqCC,YAIhD,WAAA7B,CAAY8B,GACVC,MAAM,6BAA8B,CAClCC,QAAS,KACTF,U,EAKA,MAAOG,UAAqCJ,YAIhD,WAAA7B,CAAY8B,GACVC,MAAM,6BAA8B,CAClCC,QAAS,KACTF,U,EC3BN,MAAMI,EAAgB,mU,MC+BTC,EAAU,MALvB,WAAAnC,CAAAC,G,+CAuBUC,KAAQkC,SAAG,MAKXlC,KAAKmC,MAAG,MAORnC,KAAeoC,gBAAG,KAqE3B,CAjEC,4BAAMC,GACJ,OAAOrC,KAAKsC,Y,CAQd,iBAAMC,CAAYnC,GAChBA,IAAK,MAALA,SAAK,SAALA,EAAOC,iBACPD,IAAK,MAALA,SAAK,SAALA,EAAOE,kBAEPN,KAAKwC,UAAUhC,KAAKR,KAAKyC,M,CAG3B,gBAAIH,GACF,OAAOtC,KAAKe,YAAY2B,cAAc,mB,CAGxC,kBAAAC,GACE,GAAI3C,KAAKyC,QAAUG,WAAa5C,KAAKyC,QAAU,KAAM,CACnDI,QAAQC,KAAK,8C,CAEf9C,KAAKoC,gBAAkB,I,CAIzB,aAAAW,CAAcC,EAAkBC,GAC9B,GAAIjD,KAAKoC,gBAAiB,CACxBpC,KAAKe,YAAYmC,cACf,IAAInB,EAA6B,CAC/BiB,SAAUA,EACVC,SAAUA,I,EAOlB,WAAAE,CAAYH,EAAkBC,GAC5B,GAAIjD,KAAKoC,gBAAiB,CACxBpC,KAAKe,YAAYmC,cACf,IAAIxB,EAA6B,CAC/BsB,SAAUA,EACVC,SAAUA,I,EAMlB,MAAAxC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,oBAAAE,IAAA,2CACEC,MAAO,CACL,sBAAuBb,KAAKkC,UAE9BkB,QAASpD,KAAKkC,SACdmB,MAAOrD,KAAKqD,MAAQrD,KAAKqD,MAAQrD,KAAKyC,MACtCF,YAAcd,GAAMzB,KAAKuC,YAAYd,K","ignoreList":[]}

package/dist/siemens-ix/p-9e3a36df.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["cardListCss","CardListTitle","props","label","h","class","ghost","icon","iconChevronDown","onClick","iconColor","CardList__Title__Button","CardList__Title__Button__Collapsed","isCollapsed","format","hideShowAll","onShowAllClick","showAllLabel","isNaN","showAllCounter","CardList","constructor","hostRef","this","collapse","listStyle","maxVisibleCards","suppressOverflowHandling","i18nShowAll","i18nMoreCards","hasOverflowingElements","numberOfOverflowingElements","numberOfAllChildElements","leftScrollDistance","rightScrollDistance","onCardListVisibilityToggle","collapseChanged","emit","event","showAllClick","nativeEvent","getListChildren","slot","hostElement","shadowRoot","querySelector","assignedElements","flatten","changeVisibilityOfSlotChildren","childElements","forEach","element","index","HTMLElement","classList","add","remove","length","detectOverflow","registerOverflowHandler","observer","createMutationObserver","observe","childList","subtree","requestAnimationFrame","shouldHandleOverflow","listElement","onCardListScroll","isShowMoreCardVisible","getOpacityFromScrollDistance","distance","computeMaskLayer","maxOverflowWidth","maskLayer","clientWidth","scrollWidth","scrollLeft","componentDidLoad","disconnectedCallback","disconnect","render","Host","key","showAllCount","undefined","e","CardList__Overflow","style","CardList__Content","CardList__Content__Collapsed","CardList__Style__Flexbox__Scroll","CardList__Style__Infinite__Scroll","onScroll","onSlotchange","Show__All__Card","showMoreCardClick","name","iconMoreMenu","size"],"sources":["src/components/card-list/card-list.scss?tag=ix-card-list&encapsulation=shadow","src/components/card-list/card-list.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@import 'mixins/shadow-dom/component';\n\n$CardList__Title__Height: 1.5rem;\n\n:host {\n  @include ix-component;\n\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  align-items: flex-start;\n  margin: 0.5rem;\n\n  .CardList_Title {\n    display: flex;\n    position: relative;\n    height: $CardList__Title__Height;\n    align-items: center;\n    width: 100%;\n    margin-bottom: 1rem;\n\n    &__Label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n  }\n\n  .CardList__Title__Button {\n    margin-right: 1rem;\n    transition: var(--theme-default-time) transform ease-in-out;\n  }\n\n  .CardList__Title__Button__Collapsed {\n    transform: rotate(-90deg);\n  }\n\n  .CardList__Title__Show__All {\n    align-self: center;\n    margin-left: auto;\n    margin-right: 0px;\n    flex-shrink: 0;\n  }\n\n  .CardList__Content {\n    display: flex;\n    position: relative;\n    height: calc(100% - #{$CardList__Title__Height});\n    width: 100%;\n    gap: 1.5rem;\n    transition: var(--theme-default-time) ease-in-out;\n    overflow: auto;\n  }\n\n  .CardList__Content__Collapsed {\n    min-height: 0px;\n    max-height: 0px;\n    overflow: hidden;\n    opacity: 0;\n  }\n\n  .CardList__Style__Flexbox__Scroll {\n    flex-wrap: wrap;\n  }\n\n  .CardList__Style__Infinite__Scroll {\n    flex-wrap: nowrap;\n\n    -ms-overflow-style: none;\n    scrollbar-width: none;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .CardList__Overflow {\n    display: block;\n    position: relative;\n    height: 100%;\n    width: 100%;\n    pointer-events: all;\n    mask-image: var(--ix-card-list-overflow, none);\n  }\n\n  .Show__All__Card {\n    display: flex;\n    position: relative;\n\n    align-self: flex-start;\n    justify-self: center;\n\n    max-width: 11.25rem;\n    min-width: 11.25rem;\n    width: 11.25rem;\n\n    min-height: 11.25rem;\n    max-height: 11.25rem;\n    height: 11.25rem;\n\n    --ix-card-border-color: var(--theme-color-primary);\n    color: var(--theme-color-primary);\n  }\n\n  .CardList__Style__Infinite__Scroll .Show__All__Card {\n    margin-top: 2.375rem;\n  }\n\n  .CardList__Style__Flexbox__Scroll .Show__All__Card {\n    margin-bottom: 2.375rem;\n  }\n\n  .Show__All__Card:hover {\n    background-color: var(--theme-color-ghost--hover);\n  }\n\n  .Show__All__Card:active {\n    background-color: var(--theme-color-ghost--active);\n  }\n\n  .Show__All__Card__Content {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n  }\n\n  .Show__All__Card__Icon {\n    display: flex;\n    position: absolute;\n    height: 4rem;\n    width: 4rem;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .Show__All__Card__Text {\n    margin-bottom: 0px;\n    margin-top: auto;\n  }\n}\n\n::slotted(.display-none) {\n  display: none !important;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n  State,\n} from '@stencil/core';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { iconChevronDown, iconMoreMenu } from '@siemens/ix-icons/icons';\n\nfunction CardListTitle(props: {\n  label?: string;\n  isCollapsed: boolean;\n  onClick: (e: MouseEvent) => void;\n  onShowAllClick: (e: MouseEvent) => void;\n  showAllLabel: string;\n  showAllCounter: number;\n  hideShowAll: boolean;\n}) {\n  if (!props.label) {\n    return null;\n  }\n\n  return (\n    <div class=\"CardList_Title\">\n      <ix-icon-button\n        ghost\n        icon={iconChevronDown}\n        onClick={props.onClick}\n        iconColor=\"color-primary\"\n        class={{\n          CardList__Title__Button: true,\n          CardList__Title__Button__Collapsed: props.isCollapsed,\n        }}\n      ></ix-icon-button>\n      <ix-typography class=\"CardList_Title__Label\" format=\"body-lg\">\n        {props.label}\n      </ix-typography>\n      {!props.hideShowAll && (\n        <ix-button\n          class=\"CardList__Title__Show__All\"\n          ghost\n          onClick={props.onShowAllClick}\n        >\n          <span>{props.showAllLabel}</span>\n          <span>\n            {!isNaN(props.showAllCounter) ? ` (${props.showAllCounter})` : null}\n          </span>\n        </ix-button>\n      )}\n    </div>\n  );\n}\n\n/**\n * @since 1.6.0\n */\n@Component({\n  tag: 'ix-card-list',\n  styleUrl: 'card-list.scss',\n  shadow: true,\n})\nexport class CardList {\n  /**\n   * Name the card list\n   */\n  @Prop() label?: string;\n\n  /**\n   * Collapse the list\n   */\n  @Prop({ mutable: true }) collapse = false;\n\n  /**\n   * List style\n   */\n  @Prop() listStyle: 'stack' | 'scroll' = 'stack';\n\n  /**\n   * Maximal visible cards\n   *\n   * @internal\n   */\n  @Prop() maxVisibleCards = 12;\n\n  /**\n   * Overwrite the default show all count.\n   * */\n  @Prop() showAllCount?: number;\n\n  /**\n   * Suppress the overflow handling of child elements\n   */\n  @Prop() suppressOverflowHandling = false;\n\n  /**\n   * Hide the show all button\n   *\n   * @since 2.2.0\n   */\n  @Prop() hideShowAll = false;\n\n  /**\n   * i18n Show all button\n   */\n  @Prop() i18nShowAll = 'Show all';\n\n  /**\n   * i18n More cards available\n   */\n  @Prop() i18nMoreCards = 'There are more cards available';\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() collapseChanged!: EventEmitter<boolean>;\n\n  /**\n   * Fire event when the collapse state is changed by the user\n   */\n  @Event() showAllClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  /**\n   * Fire event when the show more card is clicked.\n   */\n  @Event() showMoreCardClick!: EventEmitter<{\n    nativeEvent: MouseEvent;\n  }>;\n\n  @Element() hostElement!: HTMLIxCardListElement;\n\n  @State() private hasOverflowingElements = false;\n  @State() private numberOfOverflowingElements = 0;\n  @State() private numberOfAllChildElements = 0;\n  @State() private leftScrollDistance = 0;\n  @State() private rightScrollDistance = 0;\n\n  private observer?: MutationObserver;\n\n  private onCardListVisibilityToggle() {\n    this.collapse = !this.collapse;\n    this.collapseChanged.emit(this.collapse);\n  }\n\n  private onShowAllClick(event: MouseEvent) {\n    this.showAllClick.emit({\n      nativeEvent: event,\n    });\n  }\n\n  private getListChildren() {\n    const slot = this.hostElement.shadowRoot!.querySelector(\n      '.CardList__Content > slot'\n    ) as HTMLSlotElement;\n    return slot.assignedElements({ flatten: true });\n  }\n\n  private changeVisibilityOfSlotChildren() {\n    const childElements = this.getListChildren();\n    childElements.forEach((element, index) => {\n      if (element instanceof HTMLElement) {\n        if (index > this.maxVisibleCards - 1) {\n          element.classList.add('display-none');\n          return;\n        }\n        element.classList.remove('display-none');\n      }\n    });\n    this.hasOverflowingElements = childElements.length > this.maxVisibleCards;\n    this.numberOfOverflowingElements =\n      childElements.length - this.maxVisibleCards;\n\n    this.numberOfAllChildElements = childElements.length;\n    this.detectOverflow();\n  }\n\n  private registerOverflowHandler() {\n    this.observer = createMutationObserver(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n\n    this.observer.observe(\n      this.hostElement.shadowRoot!.querySelector('.CardList__Content')!,\n      {\n        childList: true,\n        subtree: true,\n      }\n    );\n\n    requestAnimationFrame(() => {\n      this.changeVisibilityOfSlotChildren();\n    });\n  }\n\n  private shouldHandleOverflow() {\n    if (this.suppressOverflowHandling) {\n      return false;\n    }\n    if (this.listStyle === 'stack' || this.listStyle === 'scroll') {\n      return true;\n    }\n  }\n\n  private get listElement() {\n    return this.hostElement.shadowRoot!.querySelector('.CardList__Content');\n  }\n\n  private onCardListScroll() {\n    this.detectOverflow();\n  }\n\n  private isShowMoreCardVisible() {\n    return (\n      this.suppressOverflowHandling === false && this.hasOverflowingElements\n    );\n  }\n\n  private getOpacityFromScrollDistance(distance: number) {\n    if (!this.listElement) {\n      return 0;\n    }\n\n    if (distance === 0) {\n      return 0;\n    }\n\n    if (distance > 100) {\n      return 1;\n    }\n\n    return distance / 100;\n  }\n\n  private computeMaskLayer() {\n    const maxOverflowWidth = 80;\n    const maskLayer = `linear-gradient(\n      90deg,\n      transparent 0px,\n      black ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.leftScrollDistance) > 0 ? 1 : 0)\n      }px,\n      black calc(100% - ${\n        maxOverflowWidth *\n        (this.getOpacityFromScrollDistance(this.rightScrollDistance) > 0\n          ? 1\n          : 0)\n      }px),\n      transparent 100%\n    )`;\n    return {\n      '--ix-card-list-overflow': maskLayer,\n    };\n  }\n\n  @Listen('resize', { target: 'window' })\n  private detectOverflow() {\n    if (!this.listElement) {\n      return;\n    }\n    const { clientWidth, scrollWidth, scrollLeft } = this.listElement;\n\n    this.leftScrollDistance = scrollLeft;\n    this.rightScrollDistance = scrollWidth - scrollLeft - clientWidth;\n  }\n\n  componentDidLoad() {\n    if (this.shouldHandleOverflow()) {\n      this.registerOverflowHandler();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\n\n  render() {\n    return (\n      <Host>\n        <CardListTitle\n          isCollapsed={this.collapse}\n          label={this.label}\n          showAllLabel={this.i18nShowAll}\n          showAllCounter={\n            this.showAllCount === undefined\n              ? this.numberOfAllChildElements\n              : this.showAllCount\n          }\n          onClick={() => this.onCardListVisibilityToggle()}\n          onShowAllClick={(e) => this.onShowAllClick(e)}\n          hideShowAll={this.hideShowAll}\n        ></CardListTitle>\n        <div\n          class={{\n            CardList__Overflow: true,\n          }}\n          style={this.computeMaskLayer()}\n        >\n          <div\n            class={{\n              CardList__Content: true,\n              CardList__Content__Collapsed: this.collapse,\n              CardList__Style__Flexbox__Scroll: this.listStyle === 'stack',\n              CardList__Style__Infinite__Scroll: this.listStyle === 'scroll',\n            }}\n            onScroll={() => this.onCardListScroll()}\n          >\n            <slot\n              onSlotchange={() => this.changeVisibilityOfSlotChildren()}\n            ></slot>\n            {this.isShowMoreCardVisible() ? (\n              <ix-card\n                class={{\n                  Show__All__Card: true,\n                }}\n                onClick={(event) =>\n                  this.showMoreCardClick.emit({\n                    nativeEvent: event,\n                  })\n                }\n              >\n                <ix-card-content>\n                  <div class=\"Show__All__Card__Content\">\n                    <ix-icon\n                      name={iconMoreMenu}\n                      size={'32'}\n                      class={'Show__All__Card__Icon'}\n                    ></ix-icon>\n                    <span class=\"Show__All__Card__Text\">\n                      {this.i18nMoreCards} ({this.numberOfOverflowingElements})\n                    </span>\n                  </div>\n                </ix-card-content>\n              </ix-card>\n            ) : null}\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/siemens-ix/p-BPfEX8mR.js

@@ -1,2 +0,0 @@
-import{h as n}from"./p-BNpBEtDH.js";import{a as t}from"./p-Bb7pDeaQ.js";import{s as e}from"./p-2j3Ly91D.js";import{c as a}from"./p-CX81WQtk.js";import{c as i}from"./p-pXYAoEyc.js";import{a as r}from"./p-Ou74PMQs.js";function s(t){return n("textarea",Object.assign({readOnly:t.readonly,disabled:t.disabled,maxLength:t.maxLength,minLength:t.minLength,cols:t.textareaCols,rows:t.textareaRows,ref:t.textAreaRef,class:{"is-invalid":t.isInvalid},required:t.required,value:t.value,placeholder:t.placeholder,onInput:n=>{const e=n.target;t.updateFormInternalValue(e.value);t.valueChange(e.value)},onBlur:()=>t.onBlur(),style:{resize:t.resizeBehavior,height:t.textareaHeight,width:t.textareaWidth}},t.ariaAttributes))}function o(t){return n("input",Object.assign({id:t.id,autoComplete:"off",readOnly:t.readonly,disabled:t.disabled,min:t.min,max:t.max,maxLength:t.maxLength?Number(t.maxLength):undefined,minLength:t.maxLength?Number(t.minLength):undefined,ref:t.inputRef,pattern:t.pattern,type:t.type,class:{"is-invalid":t.isInvalid},required:t.required,value:t.value,placeholder:t.placeholder,onKeyPress:n=>t.onKeyPress(n),onInput:n=>{const e=n.target;t.updateFormInternalValue(e.value);t.valueChange(e.value)},onBlur:()=>t.onBlur()},t.ariaAttributes))}const u=(t,e)=>n("div",{class:"end-container",ref:t.slotEndRef},n("slot",{name:"end",onSlotchange:t.onSlotChange}),e);const c=t=>n("div",{class:"start-container",ref:t.slotStartRef},n("slot",{name:"start",onSlotchange:t.onSlotChange}));function l(n){const t=5;r({targets:n,duration:200,easing:"easeInOutSine",loop:2,translateX:[{value:t*-1},{value:t},{value:t/-2},{value:t/2},{value:0}]})}function f(n,t){n.isInvalid=t.isInvalid||t.isInvalidByRequired;n.isValid=t.isValid;n.isInfo=t.isInfo;n.isWarning=t.isWarning}function d(n,t){if(n.allowedCharactersPattern){const e=new RegExp(n.allowedCharactersPattern);if(!e.test(t.key)){t.preventDefault();l(n.inputRef.current)}}}async function m(n,t){const a=t.validity;const i=n.validityStateChange.emit(a);if(i.defaultPrevented){return}if(!n.value){return}const r=await e(n);if(r){return}const{valid:s}=a;n.hostElement.classList.toggle("ix-invalid--validity-invalid",!s)}function p(n,t){n.ixBlur.emit();if(!t){throw new Error("Input element is not available")}t.setAttribute("data-ix-touched","true");m(n,t)}function v(n,t,e){var a;if(!n){return}const r=16;const s=i(t+r/2);if(e.slotEnd){n.style.paddingRight=`calc(${s} + ${(a=e.additionalPaddingRight)!==null&&a!==void 0?a:"0rem"})`}else{n.style.paddingLeft=s}}function h(n,t,e){requestAnimationFrame((()=>{requestAnimationFrame((()=>{if(n){const t=n.getBoundingClientRect();if(t){v(e,t.width,{slotEnd:false})}}if(t){const n=t.getBoundingClientRect();if(n){v(e,n.width,{slotEnd:true})}}}))}))}function b(n){const e={"aria-invalid":`${t(n.isInvalid)}`,"aria-required":`${t(n.required)}`};if(n.isInvalid&&n.invalidText){e["aria-errormessage"]=n.invalidText}return e}const g=(n,t)=>{const e=j(n,t);const i=a(t);i.observe(n,{subtree:true,attributes:true});return()=>{e.disconnect();i.disconnect()}};function j(n,t){const e=new IntersectionObserver((n=>{n.forEach((n=>{if(n.isIntersecting){t()}}))}));e.observe(n);return e}export{o as I,u as S,s as T,g as a,h as b,c,d,m as e,b as g,f as m,p as o};
-//# sourceMappingURL=p-BPfEX8mR.js.map

package/dist/siemens-ix/p-BPfEX8mR.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"p-BPfEX8mR.js","sources":["src/components/input/input.fc.tsx","src/components/input/input.animation.ts","src/components/input/input.util.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 { h, FunctionalComponent } from '@stencil/core';\nimport { MakeRef } from '../utils/make-ref';\nimport { A11yAttributes } from '../utils/a11y';\n\nexport function TextareaElement(props: {\n  resizeBehavior: 'both' | 'horizontal' | 'vertical' | 'none';\n  textareaHeight?: string;\n  textareaWidth?: string;\n  textareaRows?: number;\n  textareaCols?: number;\n  disabled: boolean;\n  readonly: boolean;\n  maxLength?: number;\n  minLength?: number;\n  isInvalid: boolean;\n  required: boolean;\n  value: string;\n  placeholder?: string;\n  textAreaRef: (el: HTMLTextAreaElement | undefined) => void;\n  valueChange: (value: string) => void;\n  updateFormInternalValue: (value: string) => void;\n  onBlur: () => void;\n  ariaAttributes?: A11yAttributes;\n}) {\n  return (\n    <textarea\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      maxLength={props.maxLength}\n      minLength={props.minLength}\n      cols={props.textareaCols}\n      rows={props.textareaRows}\n      ref={props.textAreaRef}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n        props.valueChange(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      style={{\n        resize: props.resizeBehavior,\n        height: props.textareaHeight,\n        width: props.textareaWidth,\n      }}\n      {...props.ariaAttributes}\n    ></textarea>\n  );\n}\n\nexport function InputElement(props: {\n  id: string;\n  disabled: boolean;\n  readonly: boolean;\n  maxLength?: string | number;\n  minLength?: string | number;\n  max?: string | number;\n  min?: string | number;\n  pattern?: string;\n  type: string;\n  isInvalid: boolean;\n  required: boolean;\n  value: string | number;\n  placeholder?: string;\n  inputRef: (el: HTMLInputElement | undefined) => void;\n  onKeyPress: (event: KeyboardEvent) => void;\n  valueChange: (value: string) => void;\n  updateFormInternalValue: (value: string) => void;\n  onBlur: () => void;\n  ariaAttributes?: A11yAttributes;\n}) {\n  return (\n    <input\n      id={props.id}\n      autoComplete=\"off\"\n      readOnly={props.readonly}\n      disabled={props.disabled}\n      min={props.min}\n      max={props.max}\n      maxLength={props.maxLength ? Number(props.maxLength) : undefined}\n      minLength={props.maxLength ? Number(props.minLength) : undefined}\n      ref={props.inputRef}\n      pattern={props.pattern}\n      type={props.type}\n      class={{\n        'is-invalid': props.isInvalid,\n      }}\n      required={props.required}\n      value={props.value}\n      placeholder={props.placeholder}\n      onKeyPress={(event) => props.onKeyPress(event)}\n      onInput={(inputEvent) => {\n        const target = inputEvent.target as HTMLInputElement;\n        props.updateFormInternalValue(target.value);\n        props.valueChange(target.value);\n      }}\n      onBlur={() => props.onBlur()}\n      {...props.ariaAttributes}\n    ></input>\n  );\n}\n\nexport const SlotEnd: FunctionalComponent<{\n  slotEndRef: MakeRef<HTMLDivElement>;\n  onSlotChange?: (e: Event) => void;\n}> = (props, children) => {\n  return (\n    <div class=\"end-container\" ref={props.slotEndRef}>\n      <slot name=\"end\" onSlotchange={props.onSlotChange}></slot>\n      {children}\n    </div>\n  );\n};\n\nexport const SlotStart: FunctionalComponent<{\n  slotStartRef: MakeRef<HTMLDivElement>;\n  onSlotChange?: (e: Event) => void;\n}> = (props) => {\n  return (\n    <div class=\"start-container\" ref={props.slotStartRef}>\n      <slot name=\"start\" onSlotchange={props.onSlotChange}></slot>\n    </div>\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 */\nimport anime from 'animejs';\n\nexport function shakeInput(input: HTMLInputElement) {\n  const xMax = 5;\n  anime({\n    targets: input,\n    duration: 200,\n    easing: 'easeInOutSine',\n    loop: 2,\n    translateX: [\n      {\n        value: xMax * -1,\n      },\n      {\n        value: xMax,\n      },\n      {\n        value: xMax / -2,\n      },\n      {\n        value: xMax / 2,\n      },\n      {\n        value: 0,\n      },\n    ],\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 { A11yAttributes, a11yBoolean } from '../utils/a11y';\nimport {\n  IxFormComponent,\n  IxInputFieldComponent,\n  ValidationResults,\n  shouldSuppressInternalValidation,\n} from '../utils/input';\nimport { createMutationObserver } from '../utils/mutation-observer';\nimport { convertToRemString } from '../utils/rwd.util';\nimport { generateUUID } from '../utils/uuid';\nimport { shakeInput } from './input.animation';\n\nexport function createIdIfNotExists(\n  element: IxFormComponent,\n  idPrefix: string = 'input'\n) {\n  return element.hasAttribute('id')\n    ? element.getAttribute('id')\n    : `${idPrefix}-${generateUUID()}`;\n}\n\nexport function mapValidationResult<T>(\n  ref: IxInputFieldComponent<T>,\n  result: ValidationResults\n) {\n  ref.isInvalid = result.isInvalid || result.isInvalidByRequired;\n  ref.isValid = result.isValid;\n  ref.isInfo = result.isInfo;\n  ref.isWarning = result.isWarning;\n}\n\nexport function checkAllowedKeys<T>(\n  comp: IxInputFieldComponent<T>,\n  event: KeyboardEvent\n) {\n  if (comp.allowedCharactersPattern) {\n    const regex = new RegExp(comp.allowedCharactersPattern);\n    if (!regex.test(event.key)) {\n      event.preventDefault();\n      shakeInput(comp.inputRef.current);\n    }\n  }\n}\n\nexport async function checkInternalValidity<T>(\n  comp: IxFormComponent<T>,\n  input: HTMLInputElement | HTMLTextAreaElement\n) {\n  const validityState = input.validity;\n\n  const eventResult = comp.validityStateChange.emit(validityState);\n\n  if (eventResult.defaultPrevented) {\n    return;\n  }\n\n  if (!comp.value) {\n    return;\n  }\n\n  const skipValidation = await shouldSuppressInternalValidation(comp);\n  if (skipValidation) {\n    return;\n  }\n\n  const { valid } = validityState;\n  comp.hostElement.classList.toggle('ix-invalid--validity-invalid', !valid);\n}\n\nexport function onInputBlur<T>(\n  comp: IxFormComponent<T>,\n  input?: HTMLInputElement | HTMLTextAreaElement | null\n) {\n  comp.ixBlur.emit();\n\n  if (!input) {\n    throw new Error('Input element is not available');\n  }\n\n  input.setAttribute('data-ix-touched', 'true');\n  checkInternalValidity(comp, input);\n}\n\nexport function applyPaddingEnd(\n  inputElement: HTMLElement | null,\n  width: number,\n  options: {\n    slotEnd: boolean;\n    additionalPaddingRight?: string;\n  }\n) {\n  if (!inputElement) {\n    return;\n  }\n\n  const remInPixels = 16;\n  const padding = convertToRemString(width + remInPixels / 2);\n\n  if (options.slotEnd) {\n    inputElement.style.paddingRight = `calc(${padding} + ${\n      options.additionalPaddingRight ?? '0rem'\n    })`;\n  } else {\n    inputElement.style.paddingLeft = padding;\n  }\n}\n\nexport function adjustPaddingForStartAndEnd(\n  startElement: HTMLElement | null,\n  endElement: HTMLElement | null,\n  inputElement: HTMLElement | null\n) {\n  requestAnimationFrame(() => {\n    requestAnimationFrame(() => {\n      if (startElement) {\n        const startBoundingRect = startElement.getBoundingClientRect();\n        if (startBoundingRect) {\n          applyPaddingEnd(inputElement, startBoundingRect.width, {\n            slotEnd: false,\n          });\n        }\n      }\n\n      if (endElement) {\n        const endBoundingRect = endElement.getBoundingClientRect();\n        if (endBoundingRect) {\n          applyPaddingEnd(inputElement, endBoundingRect.width, {\n            slotEnd: true,\n          });\n        }\n      }\n    });\n  });\n}\n\nexport function getAriaAttributesForInput(\n  component: IxInputFieldComponent\n): A11yAttributes {\n  const inputAria: A11yAttributes = {\n    'aria-invalid': `${a11yBoolean(component.isInvalid)}`,\n    'aria-required': `${a11yBoolean(component.required)}`,\n  };\n\n  if (component.isInvalid && component.invalidText) {\n    inputAria['aria-errormessage'] = component.invalidText;\n  }\n  return inputAria;\n}\n\nexport type DisposableChangesAndVisibilityObservers = () => void;\n\nexport const addDisposableChangesAndVisibilityObservers = (\n  element: HTMLElement,\n  callback: () => void\n): DisposableChangesAndVisibilityObservers => {\n  const intersectionObserver = observeElementUntilVisible(element, callback);\n  const mutationObserver = createMutationObserver(callback);\n\n  mutationObserver.observe(element, {\n    subtree: true,\n    attributes: true,\n  });\n\n  return () => {\n    intersectionObserver.disconnect();\n    mutationObserver.disconnect();\n  };\n};\n\nfunction observeElementUntilVisible(\n  hostElement: HTMLElement,\n  updateCallback: () => void\n): IntersectionObserver {\n  const intersectionObserver = new IntersectionObserver((entries) => {\n    entries.forEach((entry) => {\n      if (entry.isIntersecting) {\n        updateCallback();\n      }\n    });\n  });\n\n  intersectionObserver.observe(hostElement);\n  return intersectionObserver;\n}\n"],"names":[],"mappings":"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"}

package/dist/siemens-ix/p-ac5f5042.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["paginationCss","Pagination","constructor","hostRef","this","baseButtonConfig","variant","outline","ghost","iconOnly","iconOval","disabled","icon","loading","selected","type","maxCountPages","advanced","itemCount","showItemCount","count","selectedPage","i18nPage","i18nOf","i18nItems","selectPage","index","oldIndex","defaultPrevented","pageSelected","emit","increase","decrease","getPageButton","baseButtonProps","Object","assign","onClick","ariaAttributes","a11yBoolean","h","BaseButton","renderPageButtons","pagesBeforeOverflow","Math","floor","hasOverflow","hasOverflowStart","hasOverflowEnd","pageButtons","start","end","min","pageCount","max","push","i","class","render","Host","key","iconChevronLeftSmall","format","value","onChange","event","eventTarget","target","Number","parseInt","iconChevronRightSmall","hideListHeader","i18nPlaceholder","i18nSelectListHeader","onValueChange","e","Array","isArray","detail","itemCountChanged","label"],"sources":["src/components/pagination/pagination.scss?tag=ix-pagination&encapsulation=shadow","src/components/pagination/pagination.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2022 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 'legacy/components/forms';\n@import '../icon-button/icon-button';\n@import 'mixins/shadow-dom/component';\n\n:host {\n  @include ix-component;\n\n  &,\n  .advanced-pagination,\n  .item-count {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  .basic-pagination {\n    padding: 0 0.125rem;\n  }\n\n  .advanced-pagination {\n    padding: 0 $medium-space;\n  }\n\n  .page-selection {\n    width: 4.125rem;\n    text-align: center;\n    margin: 0 $small-space;\n    -moz-appearance: textfield;\n    -webkit-appearance: textfield;\n  }\n\n  .page-buttons {\n    white-space: nowrap;\n  }\n\n  .total-count {\n    white-space: nowrap;\n  }\n\n  .item-count {\n    flex-grow: 1;\n    justify-content: flex-end;\n    margin-inline-start: $large-space;\n\n    ix-select {\n      width: 4.5rem;\n      margin-inline-start: $large-space;\n    }\n  }\n\n  button {\n    width: auto;\n    min-width: 2rem;\n    height: 2rem;\n    padding: 0 0.5rem;\n  }\n\n  button + button {\n    margin-inline-start: 0.125rem;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2022 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  Prop,\n} from '@stencil/core';\nimport { BaseButton, BaseButtonProps } from '../button/base-button';\nimport { a11yBoolean } from '../utils/a11y';\nimport {\n  iconChevronLeftSmall,\n  iconChevronRightSmall,\n} from '@siemens/ix-icons/icons';\n\n/**\n * @since 1.5.0\n */\n@Component({\n  tag: 'ix-pagination',\n  styleUrl: 'pagination.scss',\n  shadow: true,\n})\nexport class Pagination {\n  private readonly baseButtonConfig: BaseButtonProps = {\n    variant: 'secondary',\n    outline: false,\n    ghost: true,\n    iconOnly: true,\n    iconOval: false,\n    disabled: false,\n    icon: '',\n    loading: false,\n    selected: false,\n    type: 'button',\n  };\n\n  private readonly maxCountPages = 7;\n\n  @Element() hostElement!: HTMLIxPaginationElement;\n\n  /**\n   * Advanced mode\n   */\n  @Prop() advanced = false;\n\n  /**\n   * Number of items shown at once.\n   * Can only be changed in advaced mode.\n   */\n  @Prop() itemCount = 15;\n\n  /**\n   * Show item count in advanced mode\n   */\n  @Prop() showItemCount = true;\n\n  /**\n   * Total number of pages\n   */\n  @Prop() count: number = 0;\n\n  /**\n   * Zero based index of currently selected page\n   */\n  @Prop({ mutable: true }) selectedPage = 0;\n\n  /**\n   * i18n\n   */\n  @Prop() i18nPage = 'Page';\n\n  /**\n   * i18n\n   */\n  @Prop() i18nOf = 'of';\n\n  /**\n  /**\n   * i18n\n   */\n  @Prop() i18nItems = 'Items';\n\n  /**\n   * Page selection event\n   */\n  @Event() pageSelected!: EventEmitter<number>;\n\n  /**\n   * Item count change event\n   */\n  @Event() itemCountChanged!: EventEmitter<number>;\n\n  private selectPage(index: number) {\n    const oldIndex = this.selectedPage;\n\n    if (index < 0) {\n      this.selectedPage = 0;\n    } else if (index > this.count - 1) {\n      this.selectedPage = this.count - 1;\n    } else {\n      this.selectedPage = index;\n    }\n\n    const { defaultPrevented } = this.pageSelected.emit(this.selectedPage);\n\n    if (defaultPrevented) {\n      this.selectedPage = oldIndex;\n    }\n  }\n\n  private increase() {\n    if (this.selectedPage === this.count - 1) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage + 1);\n  }\n\n  private decrease() {\n    if (this.selectedPage === 0) {\n      return;\n    }\n\n    this.selectPage(this.selectedPage - 1);\n  }\n\n  private getPageButton(index: number) {\n    const baseButtonProps: BaseButtonProps = {\n      ...this.baseButtonConfig,\n      onClick: () => this.selectPage(index),\n      selected: this.selectedPage === index,\n      ariaAttributes: {\n        'aria-pressed': a11yBoolean(this.selectedPage === index),\n      },\n    };\n\n    return <BaseButton {...baseButtonProps}>{index + 1}</BaseButton>;\n  }\n\n  private renderPageButtons() {\n    const pagesBeforeOverflow = Math.floor(this.maxCountPages / 2);\n    const hasOverflow = this.count > this.maxCountPages;\n    const hasOverflowStart =\n      hasOverflow && this.selectedPage > pagesBeforeOverflow;\n    const hasOverflowEnd =\n      hasOverflow && this.selectedPage < this.count - pagesBeforeOverflow - 1;\n    const pageButtons = [];\n\n    let start = 0;\n    let end = Math.min(this.count, this.maxCountPages);\n    let pageCount = Math.floor((this.maxCountPages - 4) / 2);\n\n    if (hasOverflowStart) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowEnd) {\n            this.selectPage(this.selectedPage - Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.count - this.maxCountPages);\n          }\n        },\n      };\n      pageButtons.push(this.getPageButton(0));\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n\n      if (hasOverflowEnd) {\n        start = this.count - this.maxCountPages + 2;\n      } else {\n        start = this.count - this.maxCountPages + 2;\n        end = this.count;\n      }\n    }\n\n    if (hasOverflowEnd) {\n      if (hasOverflowStart) {\n        start = this.selectedPage - pageCount;\n        end = this.selectedPage + pageCount + 1;\n      } else {\n        end = this.maxCountPages - 2;\n      }\n    }\n\n    for (let i = start; i < end; i++) {\n      pageButtons.push(this.getPageButton(i));\n    }\n\n    if (hasOverflowEnd) {\n      const baseButtonProps = {\n        ...this.baseButtonConfig,\n        onClick: () => {\n          if (hasOverflowStart) {\n            this.selectPage(this.selectedPage + Math.max(0, 2 * pageCount + 1));\n          } else {\n            this.selectPage(this.maxCountPages - 1);\n          }\n        },\n      };\n      pageButtons.push(<BaseButton {...baseButtonProps}>...</BaseButton>);\n      pageButtons.push(this.getPageButton(this.count - 1));\n    }\n\n    return <span class=\"page-buttons\">{pageButtons}</span>;\n  }\n\n  render() {\n    return (\n      <Host>\n        <ix-icon-button\n          disabled={!this.count || this.selectedPage === 0}\n          ghost\n          icon={iconChevronLeftSmall}\n          onClick={() => this.decrease()}\n        ></ix-icon-button>\n\n        {this.advanced ? (\n          <div class=\"advanced-pagination\">\n            <ix-typography format=\"body\">{this.i18nPage}</ix-typography>\n            <input\n              class=\"ix-form-control page-selection\"\n              type=\"number\"\n              min=\"1\"\n              max={this.count}\n              value={this.selectedPage + 1}\n              onChange={(event: Event) => {\n                const eventTarget = event.target as HTMLInputElement;\n                if (eventTarget) {\n                  const index = Number.parseInt(eventTarget.value);\n                  this.selectPage(index - 1);\n                }\n              }}\n            />\n            <span class=\"total-count\">\n              <ix-typography format=\"body\">\n                {this.i18nOf} {this.count}\n              </ix-typography>\n            </span>\n          </div>\n        ) : (\n          <span class=\"basic-pagination\">{this.renderPageButtons()} </span>\n        )}\n\n        <ix-icon-button\n          disabled={!this.count || this.selectedPage === this.count - 1}\n          ghost\n          icon={iconChevronRightSmall}\n          onClick={() => this.increase()}\n        ></ix-icon-button>\n\n        {this.advanced && this.showItemCount ? (\n          <span class=\"item-count\">\n            <ix-typography format=\"body\">{this.i18nItems}</ix-typography>\n            <ix-select\n              hideListHeader\n              i18nPlaceholder=\"\"\n              i18nSelectListHeader=\"\"\n              value={`${this.itemCount}`}\n              onValueChange={(e) => {\n                const count = Number.parseInt(\n                  Array.isArray(e.detail) ? e.detail[0] : e.detail\n                );\n\n                this.itemCountChanged.emit(count);\n              }}\n            >\n              <ix-select-item label=\"10\" value=\"10\"></ix-select-item>\n              <ix-select-item label=\"15\" value=\"15\"></ix-select-item>\n              <ix-select-item label=\"20\" value=\"20\"></ix-select-item>\n              <ix-select-item label=\"40\" value=\"40\"></ix-select-item>\n              <ix-select-item label=\"100\" value=\"100\"></ix-select-item>\n            </ix-select>\n          </span>\n        ) : (\n          ''\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAAgB,+r7B,MCiCTC,EAAU,MALvB,WAAAC,CAAAC,G,wGAMmBC,KAAAC,iBAAoC,CACnDC,QAAS,YACTC,QAAS,MACTC,MAAO,KACPC,SAAU,KACVC,SAAU,MACVC,SAAU,MACVC,KAAM,GACNC,QAAS,MACTC,SAAU,MACVC,KAAM,UAGSX,KAAaY,cAAG,EAOzBZ,KAAQa,SAAG,MAMXb,KAASc,UAAG,GAKZd,KAAae,cAAG,KAKhBf,KAAKgB,MAAW,EAKChB,KAAYiB,aAAG,EAKhCjB,KAAQkB,SAAG,OAKXlB,KAAMmB,OAAG,KAMTnB,KAASoB,UAAG,OAsMrB,CA1LS,UAAAC,CAAWC,GACjB,MAAMC,EAAWvB,KAAKiB,aAEtB,GAAIK,EAAQ,EAAG,CACbtB,KAAKiB,aAAe,C,MACf,GAAIK,EAAQtB,KAAKgB,MAAQ,EAAG,CACjChB,KAAKiB,aAAejB,KAAKgB,MAAQ,C,KAC5B,CACLhB,KAAKiB,aAAeK,C,CAGtB,MAAME,iBAAEA,GAAqBxB,KAAKyB,aAAaC,KAAK1B,KAAKiB,cAEzD,GAAIO,EAAkB,CACpBxB,KAAKiB,aAAeM,C,EAIhB,QAAAI,GACN,GAAI3B,KAAKiB,eAAiBjB,KAAKgB,MAAQ,EAAG,CACxC,M,CAGFhB,KAAKqB,WAAWrB,KAAKiB,aAAe,E,CAG9B,QAAAW,GACN,GAAI5B,KAAKiB,eAAiB,EAAG,CAC3B,M,CAGFjB,KAAKqB,WAAWrB,KAAKiB,aAAe,E,CAG9B,aAAAY,CAAcP,GACpB,MAAMQ,EACDC,OAAAC,OAAAD,OAAAC,OAAA,GAAAhC,KAAKC,kBACR,CAAAgC,QAAS,IAAMjC,KAAKqB,WAAWC,GAC/BZ,SAAUV,KAAKiB,eAAiBK,EAChCY,eAAgB,CACd,eAAgBC,EAAYnC,KAAKiB,eAAiBK,MAItD,OAAOc,EAACC,EAAeN,OAAAC,OAAA,GAAAF,GAAkBR,EAAQ,E,CAG3C,iBAAAgB,GACN,MAAMC,EAAsBC,KAAKC,MAAMzC,KAAKY,cAAgB,GAC5D,MAAM8B,EAAc1C,KAAKgB,MAAQhB,KAAKY,cACtC,MAAM+B,EACJD,GAAe1C,KAAKiB,aAAesB,EACrC,MAAMK,EACJF,GAAe1C,KAAKiB,aAAejB,KAAKgB,MAAQuB,EAAsB,EACxE,MAAMM,EAAc,GAEpB,IAAIC,EAAQ,EACZ,IAAIC,EAAMP,KAAKQ,IAAIhD,KAAKgB,MAAOhB,KAAKY,eACpC,IAAIqC,EAAYT,KAAKC,OAAOzC,KAAKY,cAAgB,GAAK,GAEtD,GAAI+B,EAAkB,CACpB,MAAMb,EAAeC,OAAAC,OAAAD,OAAAC,OAAA,GAChBhC,KAAKC,kBACR,CAAAgC,QAAS,KACP,GAAIW,EAAgB,CAClB5C,KAAKqB,WAAWrB,KAAKiB,aAAeuB,KAAKU,IAAI,EAAG,EAAID,EAAY,G,KAC3D,CACLjD,KAAKqB,WAAWrB,KAAKgB,MAAQhB,KAAKY,c,KAIxCiC,EAAYM,KAAKnD,KAAK6B,cAAc,IACpCgB,EAAYM,KAAKf,EAACC,EAAeN,OAAAC,OAAA,GAAAF,GAAiC,QAElE,GAAIc,EAAgB,CAClBE,EAAQ9C,KAAKgB,MAAQhB,KAAKY,cAAgB,C,KACrC,CACLkC,EAAQ9C,KAAKgB,MAAQhB,KAAKY,cAAgB,EAC1CmC,EAAM/C,KAAKgB,K,EAIf,GAAI4B,EAAgB,CAClB,GAAID,EAAkB,CACpBG,EAAQ9C,KAAKiB,aAAegC,EAC5BF,EAAM/C,KAAKiB,aAAegC,EAAY,C,KACjC,CACLF,EAAM/C,KAAKY,cAAgB,C,EAI/B,IAAK,IAAIwC,EAAIN,EAAOM,EAAIL,EAAKK,IAAK,CAChCP,EAAYM,KAAKnD,KAAK6B,cAAcuB,G,CAGtC,GAAIR,EAAgB,CAClB,MAAMd,EAAeC,OAAAC,OAAAD,OAAAC,OAAA,GAChBhC,KAAKC,kBACR,CAAAgC,QAAS,KACP,GAAIU,EAAkB,CACpB3C,KAAKqB,WAAWrB,KAAKiB,aAAeuB,KAAKU,IAAI,EAAG,EAAID,EAAY,G,KAC3D,CACLjD,KAAKqB,WAAWrB,KAAKY,cAAgB,E,KAI3CiC,EAAYM,KAAKf,EAACC,EAAeN,OAAAC,OAAA,GAAAF,GAAiC,QAClEe,EAAYM,KAAKnD,KAAK6B,cAAc7B,KAAKgB,MAAQ,G,CAGnD,OAAOoB,EAAA,QAAMiB,MAAM,gBAAgBR,E,CAGrC,MAAAS,GACE,OACElB,EAACmB,EAAI,CAAAC,IAAA,4CACHpB,EAAA,kBAAAoB,IAAA,2CACEjD,UAAWP,KAAKgB,OAAShB,KAAKiB,eAAiB,EAC/Cb,MACA,KAAAI,KAAMiD,EACNxB,QAAS,IAAMjC,KAAK4B,aAGrB5B,KAAKa,SACJuB,EAAA,OAAKiB,MAAM,uBACTjB,EAAA,iBAAesB,OAAO,QAAQ1D,KAAKkB,UACnCkB,EAAA,SACEiB,MAAM,iCACN1C,KAAK,SACLqC,IAAI,IACJE,IAAKlD,KAAKgB,MACV2C,MAAO3D,KAAKiB,aAAe,EAC3B2C,SAAWC,IACT,MAAMC,EAAcD,EAAME,OAC1B,GAAID,EAAa,CACf,MAAMxC,EAAQ0C,OAAOC,SAASH,EAAYH,OAC1C3D,KAAKqB,WAAWC,EAAQ,E,KAI9Bc,EAAM,QAAAiB,MAAM,eACVjB,EAAe,iBAAAsB,OAAO,QACnB1D,KAAKmB,OAAM,IAAGnB,KAAKgB,SAK1BoB,EAAM,QAAAiB,MAAM,oBAAoBrD,KAAKsC,oBAAmB,KAG1DF,EAAA,kBAAAoB,IAAA,2CACEjD,UAAWP,KAAKgB,OAAShB,KAAKiB,eAAiBjB,KAAKgB,MAAQ,EAC5DZ,MACA,KAAAI,KAAM0D,EACNjC,QAAS,IAAMjC,KAAK2B,aAGrB3B,KAAKa,UAAYb,KAAKe,cACrBqB,EAAM,QAAAiB,MAAM,cACVjB,EAAA,iBAAesB,OAAO,QAAQ1D,KAAKoB,WACnCgB,EACE,aAAA+B,eAAc,KACdC,gBAAgB,GAChBC,qBAAqB,GACrBV,MAAO,GAAG3D,KAAKc,YACfwD,cAAgBC,IACd,MAAMvD,EAAQgD,OAAOC,SACnBO,MAAMC,QAAQF,EAAEG,QAAUH,EAAEG,OAAO,GAAKH,EAAEG,QAG5C1E,KAAK2E,iBAAiBjD,KAAKV,EAAM,GAGnCoB,EAAA,kBAAgBwC,MAAM,KAAKjB,MAAM,OACjCvB,EAAA,kBAAgBwC,MAAM,KAAKjB,MAAM,OACjCvB,EAAA,kBAAgBwC,MAAM,KAAKjB,MAAM,OACjCvB,EAAA,kBAAgBwC,MAAM,KAAKjB,MAAM,OACjCvB,EAAA,kBAAgBwC,MAAM,MAAMjB,MAAM,UAE/B,G","ignoreList":[]}