@siemens/ix 3.0.0-alpha.4 → 3.0.0

package/components/ix-checkbox-group.js.map

@@ -1 +1 @@
-{"file":"ix-checkbox-group.js","mappings":";;;;;;;AAAA,MAAM,gBAAgB,GAAG,8MAA8M;;;;;;;;;;;;MCkB1N,aAAa,iBAAAA,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAL1B,IAAA,WAAA,GAAA;;;;AAmBE;;AAEG;AACK,QAAA,IAAS,CAAA,SAAA,GAAqB,QAAQ;AAoB9C;;AAEG;AACK,QAAA,IAAiB,CAAA,iBAAA,GAAG,KAAK;AAExB,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AACjB,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AACd,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AACf,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AA8C3B;IAzCC,kBAAkB,CAAC,EACjB,SAAS,EACT,mBAAmB,EACnB,MAAM,EACN,OAAO,EACP,SAAS,GACS,EAAA;AAClB,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS,IAAI,mBAAmB;AACjD,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;AACpB,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;;IAG5B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,SAAS,EAAE,IAAI,CAAC,SAAS,EAAA,EAEzB,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,oBAAoB,EAAE,IAAI;AAC1B,gBAAA,YAAY,EAAE,IAAI,CAAC,SAAS,KAAK,KAAK;AACvC,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACT,CACW,CACd;;;;;;;;;;;;;;;;;;AAtCX,UAAA,CAAA;AAHC,IAAA,uBAAuB,CAAC;AACvB,QAAA,eAAe,EAAE,IAAI;KACtB;CAYA,EAAA,aAAA,CAAA,SAAA,EAAA,oBAAA,EAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}
+{"file":"ix-checkbox-group.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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 {\n  Component,\n  Element,\n  Host,\n  Method,\n  Prop,\n  State,\n  h,\n} from '@stencil/core';\nimport {\n  FieldWrapperInterface,\n  HookValidationLifecycle,\n  IxFormValidationState,\n  ValidationResults,\n} from '../utils/input';\nimport { IxComponent } from '../utils/internal';\nimport { makeRef } from '../utils/make-ref';\n\n/**\n * @form-ready\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  /**\n   * @internal\n   */\n  @Prop() required = false;\n\n  @State() isInvalid = false;\n  @State() isInfo = false;\n  @State() isValid = false;\n  @State() isWarning = false;\n\n  private touched = false;\n  private readonly groupRef = makeRef<HTMLIxCheckboxGroupElement>();\n\n  get checkboxElements(): HTMLIxCheckboxElement[] {\n    return Array.from(this.hostElement.querySelectorAll('ix-checkbox'));\n  }\n\n  private readonly observer = new MutationObserver(() => {\n    this.checkForRequiredCheckbox();\n  });\n\n  private checkForRequiredCheckbox() {\n    this.required = this.checkboxElements.some((checkbox) => checkbox.required);\n  }\n\n  connectedCallback(): void {\n    this.observer.observe(this.hostElement, {\n      childList: true,\n      subtree: true,\n      attributes: true,\n      attributeFilter: ['checked', 'required'],\n    });\n  }\n\n  componentWillLoad(): void | Promise<void> {\n    this.checkForRequiredCheckbox();\n  }\n\n  disconnectedCallback(): void {\n    if (this.observer) {\n      this.observer.disconnect();\n    }\n  }\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  /**\n   * @internal\n   */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  /**\n   * @internal\n   */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(\n      this.checkboxElements.some((checkbox) => checkbox.checked)\n    );\n  }\n\n  render() {\n    return (\n      <Host ref={this.groupRef} onIxBlur={() => (this.touched = true)}>\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          controlRef={this.groupRef}\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"],"version":3}

package/components/ix-checkbox.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment, d as Host } from './p-BA1wZ05L.js';
-import { H as HookValidationLifecycle } from './p-DGeWaNlt.js';
-import { m as makeRef } from './p-bcj7UEIC.js';
 import { a as a11yBoolean } from './p-Bb7pDeaQ.js';
-import { d as defineCustomElement$2 } from './p-Dfzl82x1.js';
+import { H as HookValidationLifecycle } from './p-aw_FhcJ5.js';
+import { m as makeRef } from './p-bcj7UEIC.js';
+import { d as defineCustomElement$2 } from './p-B19EzNYi.js';
 
 const checkboxCss = ":host{--ix-checkbox-check-color:var(--theme-color-primary--contrast);display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host button{all:unset;display:inline-flex;position:relative;align-items:center;justify-content:center;width:1.125rem;min-width:1.125rem;max-width:1.125rem;height:1.125rem;min-height:1.125rem;max-height:1.125rem;margin-right:0.5rem}:host button:disabled{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host button:focus-visible{outline:0.0625rem solid var(--theme-color-focus-bdr);outline-offset:var(--theme-checkbox--focus--outline-offset)}:host input[type=checkbox]{display:none}:host label{display:flex;justify-content:flex-start;align-items:flex-start;width:100%;height:100%}:host ix-typography{margin-top:0.125rem}:host button{background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.checked) button,:host(.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.checked:hover) button,:host(.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.checked:active) button,:host(.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.checked.disabled) button,:host(.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-info) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--info\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--info--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--info--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--info\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--info--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--info--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--info\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--info--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--info--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--info\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--info--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--info--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--info\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--info--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--info--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--info\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--info--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--info--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-info:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-info:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-info.checked) button,:host(.ix-info.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-info.checked:hover) button,:host(.ix-info.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-info.checked:active) button,:host(.ix-info.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-info.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-info.checked.disabled) button,:host(.ix-info.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-warning) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--warning\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--warning--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--warning--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--warning\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--warning--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--warning--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--warning\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--warning--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--warning--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--warning\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--warning--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--warning--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--warning\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--warning--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--warning--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--warning\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--warning--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--warning--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-warning:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-warning:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-warning.checked) button,:host(.ix-warning.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-warning.checked:hover) button,:host(.ix-warning.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-warning.checked:active) button,:host(.ix-warning.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-warning.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-warning.checked.disabled) button,:host(.ix-warning.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid--required) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--invalid\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--invalid--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--invalid--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--invalid\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--invalid--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--invalid--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--invalid\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--invalid--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--invalid--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--invalid\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--invalid--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--invalid--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--invalid\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--invalid--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--invalid--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--invalid\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--invalid--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--invalid--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid--required:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid--required:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid--required.checked) button,:host(.ix-invalid--required.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid--required.checked:hover) button,:host(.ix-invalid--required.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid--required.checked:active) button,:host(.ix-invalid--required.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid--required.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid--required.checked.disabled) button,:host(.ix-invalid--required.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.ix-invalid) button{--theme-checkbox-unchecked--background:var(\n    --theme-checkbox-unchecked--background--invalid\n  );--theme-checkbox-unchecked--background--hover:var(\n    --theme-checkbox-unchecked--background--invalid--hover\n  );--theme-checkbox-unchecked--background--active:var(\n    --theme-checkbox-unchecked--background--invalid--active\n  );--theme-checkbox-unchecked--border-color:var(\n    --theme-checkbox-unchecked--border-color--invalid\n  );--theme-checkbox-unchecked--border-color--hover:var(\n    --theme-checkbox-unchecked--border-color--invalid--hover\n  );--theme-checkbox-unchecked--border-color--active:var(\n    --theme-checkbox-unchecked--border-color--invalid--active\n  );--theme-checkbox-checked--background:var(\n    --theme-checkbox-checked--background--invalid\n  );--theme-checkbox-checked--background--hover:var(\n    --theme-checkbox-checked--background--invalid--hover\n  );--theme-checkbox-checked--background--active:var(\n    --theme-checkbox-checked--background--invalid--active\n  );--theme-checkbox-checked--border-color:var(\n    --theme-checkbox-checked--border-color--invalid\n  );--theme-checkbox-checked--border-color--hover:var(\n    --theme-checkbox-checked--border-color--invalid--hover\n  );--theme-checkbox-checked--border-color--active:var(\n    --theme-checkbox-checked--border-color--invalid--active\n  );--theme-checkbox-mixed--background:var(\n    --theme-checkbox-mixed--background--invalid\n  );--theme-checkbox-mixed--background--hover:var(\n    --theme-checkbox-mixed--background--invalid--hover\n  );--theme-checkbox-mixed--background--active:var(\n    --theme-checkbox-mixed--background--invalid--active\n  );--theme-checkbox-mixed--border-color:var(\n    --theme-checkbox-mixed--border-color--invalid\n  );--theme-checkbox-mixed--border-color--hover:var(\n    --theme-checkbox-mixed--border-color--invalid--hover\n  );--theme-checkbox-mixed--border-color--active:var(\n    --theme-checkbox-mixed--border-color--invalid--active\n  );background-color:var(--theme-checkbox-unchecked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color)}:host(.ix-invalid:hover) button{background-color:var(--theme-checkbox-unchecked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--hover)}:host(.ix-invalid:active) button{background-color:var(--theme-checkbox-unchecked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--active)}:host(.ix-invalid.checked) button,:host(.ix-invalid.indeterminate) button{background-color:var(--theme-checkbox-checked--background);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color)}:host(.ix-invalid.checked:hover) button,:host(.ix-invalid.indeterminate:hover) button{background-color:var(--theme-checkbox-checked--background--hover);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--hover)}:host(.ix-invalid.checked:active) button,:host(.ix-invalid.indeterminate:active) button{background-color:var(--theme-checkbox-checked--background--active);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--active)}:host(.ix-invalid.disabled) button{background-color:var(--theme-checkbox-unchecked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-unchecked--border-color--disabled)}:host(.ix-invalid.checked.disabled) button,:host(.ix-invalid.indeterminate.disabled) button{background-color:var(--theme-checkbox-checked--background--disabled);border:var(--theme-checkbox--border-thickness) solid var(--theme-checkbox-checked--border-color--disabled)}:host(.disabled){pointer-events:none}:host(.disabled) button,:host(.disabled) label,:host(.disabled) input{pointer-events:none}";
 
@@ -31,6 +31,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
         this.__attachShadow();
         this.checkedChange = createEvent(this, "checkedChange", 7);
         this.valueChange = createEvent(this, "valueChange", 7);
+        this.ixBlur = createEvent(this, "ixBlur", 7);
         this.formInternals = this.attachInternals();
         /**
          * Value of the checkbox component
@@ -54,6 +55,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
          * If true, checkbox needs to be checked to be valid
          */
         this.required = false;
+        this.touched = false;
         this.inputRef = makeRef((checkboxRef) => {
             checkboxRef.checked = this.checked;
         });
@@ -63,6 +65,7 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
         this.checkedChange.emit(this.checked);
     }
     onCheckedChange() {
+        this.touched = true;
         this.updateFormInternalValue();
     }
     onValueChange() {
@@ -88,6 +91,10 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
     getAssociatedFormElement() {
         return Promise.resolve(this.formInternals.form);
     }
+    /** @internal */
+    isTouched() {
+        return Promise.resolve(this.touched);
+    }
     updateClassMappings() {
         /** This function is intentionally empty */
     }
@@ -95,13 +102,13 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
         return (h("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, this.indeterminate && (h(Fragment, null, h("rect", { width: "18", height: "18", fill: "transparent" }), h("rect", { x: "3", y: "8", width: "12", height: "2", fill: "var(--ix-checkbox-check-color)" }))), this.checked && (h("path", { d: "M3.65625 8.15625L8.4375 12.9375L14.625 3.9375", stroke: "var(--ix-checkbox-check-color)", "stroke-width": "2" }))));
     }
     render() {
-        return (h(Host, { key: 'd089bc3c663788b708f2ceb7fd1bbb21706a1534', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "checkbox", class: {
+        return (h(Host, { key: '2562db7e75c07d8cf18e7bd977ffc2bb85efe22c', "aria-checked": a11yBoolean(this.checked), "aria-disabled": a11yBoolean(this.disabled), role: "checkbox", class: {
                 disabled: this.disabled,
                 checked: this.checked,
                 indeterminate: this.indeterminate,
-            } }, h("label", { key: 'c80b9d8f724f6b76bfaffb2f5a1a182bb8753e53' }, h("input", { key: 'ab21dcea80e6823ae3029ba769853be39cab7bf4', "aria-checked": a11yBoolean(this.checked), disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("button", { key: '100dc970576623fc11099abfefc9a51479c9ea14', disabled: this.disabled, class: {
+            }, onFocus: () => (this.touched = true), onBlur: () => this.ixBlur.emit() }, h("label", { key: 'a9163950ab9493863c2d8b6deae758d237d3d582' }, h("input", { key: '361a23e529e302daef40e6eb79a1bbc6a2ec7f0d', "aria-checked": a11yBoolean(this.checked), required: this.required, disabled: this.disabled, checked: this.checked, ref: this.inputRef, type: "checkbox", onChange: () => this.setCheckedState(!this.checked) }), h("button", { key: 'bed5a7cd29b5469e653dfacdc831a9a7de0d2953', disabled: this.disabled, class: {
                 checked: this.checked,
-            }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark()), h("ix-typography", { key: '0852bd38494e0d39fc8d37d8e1f5b8469fe8b811', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '9ec03a9c86d0ec8e1306320963fc690640a55723' })))));
+            }, onClick: () => this.setCheckedState(!this.checked) }, this.renderCheckmark()), h("ix-typography", { key: 'fc6e95e6e9fef24068f4081461e54288a4c8bcfa', format: "label", textColor: this.disabled ? 'weak' : 'std' }, this.label, h("slot", { key: '9147eda9d809b21d83abd752a223023e7550909a' })))));
     }
     static get formAssociated() { return true; }
     get hostElement() { return this; }
@@ -119,7 +126,8 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends H {
         "indeterminate": [516],
         "required": [516],
         "hasValidValue": [64],
-        "getAssociatedFormElement": [64]
+        "getAssociatedFormElement": [64],
+        "isTouched": [64]
     }, undefined, {
         "checked": ["onCheckedChange"],
         "value": ["onValueChange"]

package/components/ix-checkbox.js.map

@@ -1 +1 @@
-{"file":"ix-checkbox.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkbox/checkbox.scss?tag=ix-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  --ix-checkbox-check-color: var(--theme-color-primary--contrast);\n\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n\n  button {\n    all: unset;\n    display: inline-flex;\n    position: relative;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 1.125rem;\n    min-width: 1.125rem;\n    max-width: 1.125rem;\n    height: 1.125rem;\n    min-height: 1.125rem;\n    max-height: 1.125rem;\n    margin-right: 0.5rem;\n  }\n\n  button:disabled {\n    background-color: var(--theme-checkbox-unchecked--background--disabled);\n    border: var(--theme-checkbox--border-thickness) solid\n      var(--theme-checkbox-unchecked--border-color--disabled);\n  }\n\n  button:focus-visible {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: var(--theme-checkbox--focus--outline-offset);\n  }\n\n  input[type='checkbox'] {\n    display: none;\n  }\n\n  label {\n    display: flex;\n\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    width: 100%;\n    height: 100%;\n  }\n\n  ix-typography {\n    margin-top: 0.125rem;\n  }\n}\n\n@mixin checkbox-base() {\n  :host {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color);\n    }\n  }\n\n  :host(:hover) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--hover);\n    }\n  }\n\n  :host(:active) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--active);\n    }\n  }\n\n  :host(.checked),\n  :host(.indeterminate) {\n    button {\n      background-color: var(--theme-checkbox-checked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color);\n    }\n  }\n\n  :host(.checked:hover),\n  :host(.indeterminate:hover) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--hover);\n    }\n  }\n\n  :host(.checked:active),\n  :host(.indeterminate:active) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--active);\n    }\n  }\n\n  :host(.disabled) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(.checked.disabled),\n  :host(.indeterminate.disabled) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin checkbox-variant($selector) {\n  :host(#{$selector}) {\n    button {\n      @content;\n      background-color: var(--theme-checkbox-unchecked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color);\n    }\n  }\n\n  :host(#{$selector}:hover) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}:active) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.checked),\n  :host(#{$selector}.indeterminate) {\n    button {\n      background-color: var(--theme-checkbox-checked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color);\n    }\n  }\n\n  :host(#{$selector}.checked:hover),\n  :host(#{$selector}.indeterminate:hover) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}.checked:active),\n  :host(#{$selector}.indeterminate:active) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.disabled) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(#{$selector}.checked.disabled),\n  :host(#{$selector}.indeterminate.disabled) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin define-checkbox-vars($state, $type) {\n  --theme-checkbox-#{$state}--background: var(\n    --theme-checkbox-#{$state}--background--#{$type}\n  );\n  --theme-checkbox-#{$state}--background--hover: var(\n    --theme-checkbox-#{$state}--background--#{$type}--hover\n  );\n  --theme-checkbox-#{$state}--background--active: var(\n    --theme-checkbox-#{$state}--background--#{$type}--active\n  );\n\n  --theme-checkbox-#{$state}--border-color: var(\n    --theme-checkbox-#{$state}--border-color--#{$type}\n  );\n  --theme-checkbox-#{$state}--border-color--hover: var(\n    --theme-checkbox-#{$state}--border-color--#{$type}--hover\n  );\n  --theme-checkbox-#{$state}--border-color--active: var(\n    --theme-checkbox-#{$state}--border-color--#{$type}--active\n  );\n}\n\n@include checkbox-base();\n@include checkbox-variant($selector: '.ix-info') {\n  @include define-checkbox-vars('unchecked', 'info');\n  @include define-checkbox-vars('checked', 'info');\n  @include define-checkbox-vars('mixed', 'info');\n}\n\n@include checkbox-variant($selector: '.ix-warning') {\n  @include define-checkbox-vars('unchecked', 'warning');\n  @include define-checkbox-vars('checked', 'warning');\n  @include define-checkbox-vars('mixed', 'warning');\n}\n\n@include checkbox-variant($selector: '.ix-invalid--required') {\n  @include define-checkbox-vars('unchecked', 'invalid');\n  @include define-checkbox-vars('checked', 'invalid');\n  @include define-checkbox-vars('mixed', 'invalid');\n}\n\n@include checkbox-variant($selector: '.ix-invalid') {\n  @include define-checkbox-vars('unchecked', 'invalid');\n  @include define-checkbox-vars('checked', 'invalid');\n  @include define-checkbox-vars('mixed', 'invalid');\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  button,\n  label,\n  input {\n    pointer-events: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  AttachInternals,\n  Component,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  Watch,\n  h,\n  Element,\n  Method,\n  Fragment,\n} from '@stencil/core';\nimport { HookValidationLifecycle, IxFormComponent } from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\nimport { a11yBoolean } from '../utils/a11y';\n\n/**\n * @since 2.6.0\n * @form-ready 2.6.0\n */\n@Component({\n  tag: 'ix-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Checkbox implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxCheckboxElement;\n\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the checkbox component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the checkbox component\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * Label for the checkbox component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Checked state of the checkbox component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Disabled state of the checkbox component\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Indeterminate state of the checkbox component\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /**\n   * Required state of the checkbox component.\n   *\n   * If true, checkbox needs to be checked to be valid\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * Event emitted when the checked state of the checkbox changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the checkbox changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  private readonly inputRef = makeRef<HTMLInputElement>((checkboxRef) => {\n    checkboxRef.checked = this.checked;\n  });\n\n  private setCheckedState(newChecked: boolean) {\n    this.checked = newChecked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  @Watch('checked')\n  onCheckedChange() {\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  @HookValidationLifecycle()\n  updateClassMappings() {\n    /** This function is intentionally empty */\n  }\n\n  private renderCheckmark() {\n    return (\n      <svg\n        width=\"18\"\n        height=\"18\"\n        viewBox=\"0 0 18 18\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {this.indeterminate && (\n          <Fragment>\n            <rect width=\"18\" height=\"18\" fill=\"transparent\" />\n            <rect\n              x=\"3\"\n              y=\"8\"\n              width=\"12\"\n              height=\"2\"\n              fill=\"var(--ix-checkbox-check-color)\"\n            />\n          </Fragment>\n        )}\n\n        {this.checked && (\n          <path\n            d=\"M3.65625 8.15625L8.4375 12.9375L14.625 3.9375\"\n            stroke=\"var(--ix-checkbox-check-color)\"\n            stroke-width=\"2\"\n          />\n        )}\n      </svg>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        aria-checked={a11yBoolean(this.checked)}\n        aria-disabled={a11yBoolean(this.disabled)}\n        role=\"checkbox\"\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n          indeterminate: this.indeterminate,\n        }}\n      >\n        <label>\n          <input\n            aria-checked={a11yBoolean(this.checked)}\n            disabled={this.disabled}\n            checked={this.checked}\n            ref={this.inputRef}\n            type=\"checkbox\"\n            onChange={() => this.setCheckedState(!this.checked)}\n          />\n          <button\n            disabled={this.disabled}\n            class={{\n              checked: this.checked,\n            }}\n            onClick={() => this.setCheckedState(!this.checked)}\n          >\n            {this.renderCheckmark()}\n          </button>\n          <ix-typography\n            format=\"label\"\n            textColor={this.disabled ? 'weak' : 'std'}\n          >\n            {this.label}\n            <slot></slot>\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-checkbox.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/checkbox/checkbox.scss?tag=ix-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n@import 'mixins/shadow-dom/component';\n\n:host {\n  --ix-checkbox-check-color: var(--theme-color-primary--contrast);\n\n  @include ix-component;\n  display: inline-block;\n  position: relative;\n\n  button {\n    all: unset;\n    display: inline-flex;\n    position: relative;\n\n    align-items: center;\n    justify-content: center;\n\n    width: 1.125rem;\n    min-width: 1.125rem;\n    max-width: 1.125rem;\n    height: 1.125rem;\n    min-height: 1.125rem;\n    max-height: 1.125rem;\n    margin-right: 0.5rem;\n  }\n\n  button:disabled {\n    background-color: var(--theme-checkbox-unchecked--background--disabled);\n    border: var(--theme-checkbox--border-thickness) solid\n      var(--theme-checkbox-unchecked--border-color--disabled);\n  }\n\n  button:focus-visible {\n    outline: 0.0625rem solid var(--theme-color-focus-bdr);\n    outline-offset: var(--theme-checkbox--focus--outline-offset);\n  }\n\n  input[type='checkbox'] {\n    display: none;\n  }\n\n  label {\n    display: flex;\n\n    justify-content: flex-start;\n    align-items: flex-start;\n\n    width: 100%;\n    height: 100%;\n  }\n\n  ix-typography {\n    margin-top: 0.125rem;\n  }\n}\n\n@mixin checkbox-base() {\n  :host {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color);\n    }\n  }\n\n  :host(:hover) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--hover);\n    }\n  }\n\n  :host(:active) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--active);\n    }\n  }\n\n  :host(.checked),\n  :host(.indeterminate) {\n    button {\n      background-color: var(--theme-checkbox-checked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color);\n    }\n  }\n\n  :host(.checked:hover),\n  :host(.indeterminate:hover) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--hover);\n    }\n  }\n\n  :host(.checked:active),\n  :host(.indeterminate:active) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--active);\n    }\n  }\n\n  :host(.disabled) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(.checked.disabled),\n  :host(.indeterminate.disabled) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin checkbox-variant($selector) {\n  :host(#{$selector}) {\n    button {\n      @content;\n      background-color: var(--theme-checkbox-unchecked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color);\n    }\n  }\n\n  :host(#{$selector}:hover) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}:active) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.checked),\n  :host(#{$selector}.indeterminate) {\n    button {\n      background-color: var(--theme-checkbox-checked--background);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color);\n    }\n  }\n\n  :host(#{$selector}.checked:hover),\n  :host(#{$selector}.indeterminate:hover) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--hover);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--hover);\n    }\n  }\n\n  :host(#{$selector}.checked:active),\n  :host(#{$selector}.indeterminate:active) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--active);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--active);\n    }\n  }\n\n  :host(#{$selector}.disabled) {\n    button {\n      background-color: var(--theme-checkbox-unchecked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-unchecked--border-color--disabled);\n    }\n  }\n\n  :host(#{$selector}.checked.disabled),\n  :host(#{$selector}.indeterminate.disabled) {\n    button {\n      background-color: var(--theme-checkbox-checked--background--disabled);\n      border: var(--theme-checkbox--border-thickness) solid\n        var(--theme-checkbox-checked--border-color--disabled);\n    }\n  }\n}\n\n@mixin define-checkbox-vars($state, $type) {\n  --theme-checkbox-#{$state}--background: var(\n    --theme-checkbox-#{$state}--background--#{$type}\n  );\n  --theme-checkbox-#{$state}--background--hover: var(\n    --theme-checkbox-#{$state}--background--#{$type}--hover\n  );\n  --theme-checkbox-#{$state}--background--active: var(\n    --theme-checkbox-#{$state}--background--#{$type}--active\n  );\n\n  --theme-checkbox-#{$state}--border-color: var(\n    --theme-checkbox-#{$state}--border-color--#{$type}\n  );\n  --theme-checkbox-#{$state}--border-color--hover: var(\n    --theme-checkbox-#{$state}--border-color--#{$type}--hover\n  );\n  --theme-checkbox-#{$state}--border-color--active: var(\n    --theme-checkbox-#{$state}--border-color--#{$type}--active\n  );\n}\n\n@include checkbox-base();\n@include checkbox-variant($selector: '.ix-info') {\n  @include define-checkbox-vars('unchecked', 'info');\n  @include define-checkbox-vars('checked', 'info');\n  @include define-checkbox-vars('mixed', 'info');\n}\n\n@include checkbox-variant($selector: '.ix-warning') {\n  @include define-checkbox-vars('unchecked', 'warning');\n  @include define-checkbox-vars('checked', 'warning');\n  @include define-checkbox-vars('mixed', 'warning');\n}\n\n@include checkbox-variant($selector: '.ix-invalid--required') {\n  @include define-checkbox-vars('unchecked', 'invalid');\n  @include define-checkbox-vars('checked', 'invalid');\n  @include define-checkbox-vars('mixed', 'invalid');\n}\n\n@include checkbox-variant($selector: '.ix-invalid') {\n  @include define-checkbox-vars('unchecked', 'invalid');\n  @include define-checkbox-vars('checked', 'invalid');\n  @include define-checkbox-vars('mixed', 'invalid');\n}\n\n:host(.disabled) {\n  pointer-events: none;\n\n  button,\n  label,\n  input {\n    pointer-events: none;\n  }\n}\n","/*\n * SPDX-FileCopyrightText: 2024 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  AttachInternals,\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Fragment,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport { a11yBoolean } from '../utils/a11y';\nimport { HookValidationLifecycle, IxFormComponent } from '../utils/input';\nimport { makeRef } from '../utils/make-ref';\n\n/**\n * @form-ready\n */\n@Component({\n  tag: 'ix-checkbox',\n  styleUrl: 'checkbox.scss',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Checkbox implements IxFormComponent<string> {\n  @Element() hostElement!: HTMLIxCheckboxElement;\n\n  @AttachInternals() formInternals!: ElementInternals;\n\n  /**\n   * Name of the checkbox component\n   */\n  @Prop({ reflect: true }) name?: string;\n\n  /**\n   * Value of the checkbox component\n   */\n  @Prop({ reflect: true }) value: string = 'on';\n\n  /**\n   * Label for the checkbox component\n   */\n  @Prop() label?: string;\n\n  /**\n   * Checked state of the checkbox component\n   */\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n  /**\n   * Disabled state of the checkbox component\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * Indeterminate state of the checkbox component\n   */\n  @Prop({ reflect: true }) indeterminate: boolean = false;\n\n  /**\n   * Required state of the checkbox component.\n   *\n   * If true, checkbox needs to be checked to be valid\n   */\n  @Prop({ reflect: true }) required = false;\n\n  /**\n   * Event emitted when the checked state of the checkbox changes\n   */\n  @Event() checkedChange!: EventEmitter<boolean>;\n\n  /**\n   * Event emitted when the value of the checkbox changes\n   */\n  @Event() valueChange!: EventEmitter<string>;\n\n  /**\n   * Event emitted when the checkbox is blurred\n   */\n  @Event() ixBlur!: EventEmitter<void>;\n\n  private touched = false;\n\n  private readonly inputRef = makeRef<HTMLInputElement>((checkboxRef) => {\n    checkboxRef.checked = this.checked;\n  });\n\n  private setCheckedState(newChecked: boolean) {\n    this.checked = newChecked;\n    this.checkedChange.emit(this.checked);\n  }\n\n  @Watch('checked')\n  onCheckedChange() {\n    this.touched = true;\n    this.updateFormInternalValue();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    this.valueChange.emit(this.value);\n  }\n\n  componentWillLoad() {\n    this.updateFormInternalValue();\n  }\n\n  updateFormInternalValue() {\n    if (this.checked) {\n      this.formInternals.setFormValue(this.value ?? 'on');\n    } else {\n      this.formInternals.setFormValue(null);\n    }\n  }\n\n  /** @internal */\n  @Method()\n  hasValidValue(): Promise<boolean> {\n    return Promise.resolve(this.checked);\n  }\n\n  /** @internal */\n  @Method()\n  getAssociatedFormElement(): Promise<HTMLFormElement | null> {\n    return Promise.resolve(this.formInternals.form);\n  }\n\n  /** @internal */\n  @Method()\n  isTouched(): Promise<boolean> {\n    return Promise.resolve(this.touched);\n  }\n\n  @HookValidationLifecycle()\n  updateClassMappings() {\n    /** This function is intentionally empty */\n  }\n\n  private renderCheckmark() {\n    return (\n      <svg\n        width=\"18\"\n        height=\"18\"\n        viewBox=\"0 0 18 18\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        {this.indeterminate && (\n          <Fragment>\n            <rect width=\"18\" height=\"18\" fill=\"transparent\" />\n            <rect\n              x=\"3\"\n              y=\"8\"\n              width=\"12\"\n              height=\"2\"\n              fill=\"var(--ix-checkbox-check-color)\"\n            />\n          </Fragment>\n        )}\n\n        {this.checked && (\n          <path\n            d=\"M3.65625 8.15625L8.4375 12.9375L14.625 3.9375\"\n            stroke=\"var(--ix-checkbox-check-color)\"\n            stroke-width=\"2\"\n          />\n        )}\n      </svg>\n    );\n  }\n\n  render() {\n    return (\n      <Host\n        aria-checked={a11yBoolean(this.checked)}\n        aria-disabled={a11yBoolean(this.disabled)}\n        role=\"checkbox\"\n        class={{\n          disabled: this.disabled,\n          checked: this.checked,\n          indeterminate: this.indeterminate,\n        }}\n        onFocus={() => (this.touched = true)}\n        onBlur={() => this.ixBlur.emit()}\n      >\n        <label>\n          <input\n            aria-checked={a11yBoolean(this.checked)}\n            required={this.required}\n            disabled={this.disabled}\n            checked={this.checked}\n            ref={this.inputRef}\n            type=\"checkbox\"\n            onChange={() => this.setCheckedState(!this.checked)}\n          />\n          <button\n            disabled={this.disabled}\n            class={{\n              checked: this.checked,\n            }}\n            onClick={() => this.setCheckedState(!this.checked)}\n          >\n            {this.renderCheckmark()}\n          </button>\n          <ix-typography\n            format=\"label\"\n            textColor={this.disabled ? 'weak' : 'std'}\n          >\n            {this.label}\n            <slot></slot>\n          </ix-typography>\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-chip.js

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BA1wZ05L.js';
 import { g as iconCloseSmall } from './p-Dn_WjwtW.js';
 import { m as makeRef } from './p-bcj7UEIC.js';
-import { d as defineCustomElement$5 } from './p-D_wwWxx8.js';
+import { d as defineCustomElement$5 } from './p-d7CnwTHv.js';
 import { d as defineCustomElement$4 } from './p-Dlmgmbod.js';
-import { d as defineCustomElement$3 } from './p-CB1ADCkU.js';
-import { d as defineCustomElement$2 } from './p-Dfzl82x1.js';
+import { d as defineCustomElement$3 } from './p-B_C2-EkQ.js';
+import { d as defineCustomElement$2 } from './p-B19EzNYi.js';
 
 const chipCss = ":host{display:inline-block;position:relative;height:2rem;max-height:2rem;margin-left:0.25rem}: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(.inactive){pointer-events:none}.container{display:inline-flex;width:inherit;box-sizing:border-box;position:relative;align-items:center;border-radius:100px;padding:0.5rem;height:2rem;max-height:2rem;cursor:pointer}.container .with-icon{margin-right:0.25rem}.container .hidden{display:none;width:0;margin-right:0}.container .close-button-container{display:inline-flex;margin-left:auto;padding-left:0.5rem}.container .slot-container{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.container.outline.icon{padding-left:calc(0.75rem - 1px)}.container.outline:not(.icon){padding-left:calc(0.5rem - 1px)}.container.outline.closable:not(.inactive){padding-right:calc(0.25rem - 1px)}.container.outline.closable.inactive,.container.outline:not(.closable){padding-right:calc(0.5rem - 1px)}.container.outline.icon:not(.closable){padding-right:calc(0.75rem - 1px)}.container:not(.outline).icon{padding-left:0.75rem}.container:not(.outline):not(.icon){padding-left:0.5rem}.container:not(.outline).closable:not(.inactive){padding-right:0.25rem}.container:not(.outline).closable.inactive{padding-right:0.5rem}.container:not(.outline):not(.closable).icon{padding-right:0.75rem}.container:not(.outline):not(.closable):not(.icon){padding-right:0.5rem}.container.primary{background-color:var(--theme-color-primary);color:var(--theme-chip-primary--color)}.container.primary .close-button{color:var(--theme-chip-primary--color);--ix-icon-button-color:var(--theme-chip-primary--color);pointer-events:auto}.container.primary:hover{background-color:var(--theme-chip-primary--background--hover)}.container.primary:active{background-color:var(--theme-chip-primary--background--active)}.container.primary:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.primary.outline{color:var(--theme-chip-primary-outline--color);background-color:transparent;border:solid 1px var(--theme-chip-primary-outline--border-color)}.container.primary.outline .close-button{color:var(--theme-chip-primary-outline--color);--ix-icon-button-color:var(--theme-chip-primary-outline--color)}.container.primary.outline:hover{background-color:var(--theme-chip-primary-outline--background--hover)}.container.primary.outline:active{background-color:var(--theme-chip-primary-outline--background--active)}.container.outline{border-width:1px;border-style:solid}.container.alarm{color:var(--theme-color-alarm--contrast)}.container.alarm:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.alarm.active::after,.container.alarm:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.alarm:not(.outline){background-color:var(--theme-color-alarm)}.container.alarm:not(.outline) .close-button{color:var(--theme-color-alarm--contrast);--ix-icon-button-color:var(--theme-color-alarm--contrast)}.container.alarm:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.alarm:not(.outline).active::after,.container.alarm:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.alarm.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-alarm)}.container.alarm.outline:hover::after{display:none}.container.alarm.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.alarm.outline.active::after,.container.alarm.outline:active::after{display:none}.container.alarm.outline.active,.container.alarm.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.alarm:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.critical{color:var(--theme-color-critical--contrast)}.container.critical:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.critical.active::after,.container.critical:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.critical:not(.outline){background-color:var(--theme-color-critical)}.container.critical:not(.outline) .close-button{color:var(--theme-color-critical--contrast);--ix-icon-button-color:var(--theme-color-critical--contrast)}.container.critical:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.critical:not(.outline).active::after,.container.critical:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.critical.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-critical)}.container.critical.outline:hover::after{display:none}.container.critical.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.critical.outline.active::after,.container.critical.outline:active::after{display:none}.container.critical.outline.active,.container.critical.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.critical:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.warning{color:var(--theme-color-warning--contrast)}.container.warning:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.warning.active::after,.container.warning:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.warning:not(.outline){background-color:var(--theme-color-warning)}.container.warning:not(.outline) .close-button{color:var(--theme-color-warning--contrast);--ix-icon-button-color:var(--theme-color-warning--contrast)}.container.warning:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.warning:not(.outline).active::after,.container.warning:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.warning.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-warning)}.container.warning.outline:hover::after{display:none}.container.warning.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.warning.outline.active::after,.container.warning.outline:active::after{display:none}.container.warning.outline.active,.container.warning.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.warning:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.info{color:var(--theme-color-info--contrast)}.container.info:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.info.active::after,.container.info:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.info:not(.outline){background-color:var(--theme-color-info)}.container.info:not(.outline) .close-button{color:var(--theme-color-info--contrast);--ix-icon-button-color:var(--theme-color-info--contrast)}.container.info:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.info:not(.outline).active::after,.container.info:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.info.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-info)}.container.info.outline:hover::after{display:none}.container.info.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.info.outline.active::after,.container.info.outline:active::after{display:none}.container.info.outline.active,.container.info.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.info:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.neutral{color:var(--theme-color-neutral--contrast)}.container.neutral:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.neutral.active::after,.container.neutral:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.neutral:not(.outline){background-color:var(--theme-color-neutral)}.container.neutral:not(.outline) .close-button{color:var(--theme-color-neutral--contrast);--ix-icon-button-color:var(--theme-color-neutral--contrast)}.container.neutral:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.neutral:not(.outline).active::after,.container.neutral:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.neutral.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-neutral)}.container.neutral.outline:hover::after{display:none}.container.neutral.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.neutral.outline.active::after,.container.neutral.outline:active::after{display:none}.container.neutral.outline.active,.container.neutral.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.neutral:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}.container.success{color:var(--theme-color-success--contrast)}.container.success:hover::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.05);left:0;border-radius:100px;pointer-events:none}.container.success.active::after,.container.success:active::after{content:\"\";display:block;position:absolute;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.1);left:0;border-radius:100px;pointer-events:none}.container.success:not(.outline){background-color:var(--theme-color-success)}.container.success:not(.outline) .close-button{color:var(--theme-color-success--contrast);--ix-icon-button-color:var(--theme-color-success--contrast)}.container.success:not(.outline):hover::after{content:\"\";background-color:rgba(0, 0, 0, 0.05)}.container.success:not(.outline).active::after,.container.success:not(.outline):active::after{background-color:rgba(0, 0, 0, 0.1)}.container.success.outline{color:var(--theme-chip-outline--color);border-color:var(--theme-color-success)}.container.success.outline:hover::after{display:none}.container.success.outline:hover{background-color:var(--theme-chip-outline--background--hover)}.container.success.outline.active::after,.container.success.outline:active::after{display:none}.container.success.outline.active,.container.success.outline:active{background-color:var(--theme-chip-outline--background--active)}.container.success:focus-visible{outline:1px solid #199fff;outline-offset:var(--theme-btn--focus--outline-offset)}";
 
@@ -34,6 +34,7 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends H {
         /**
          * Display a tooltip. By default, no tooltip will be displayed.
          * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.
+         *
          * @since 3.0.0
          */
         this.tooltipText = false;
@@ -64,13 +65,13 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends H {
                 [this.outline ? 'borderColor' : 'backgroundColor']: this.background,
             };
         }
-        return (h(Host, { key: '7bbabe583825abcde45af20f5fe5eed80ba4141b', tabIndex: "-1", class: {
+        return (h(Host, { key: '4d2b258d01d16b9345263141abe7d7d3388123c5', tabIndex: "-1", class: {
                 inactive: isInactive,
             }, style: this.variant === 'custom'
                 ? {
                     '--ix-icon-button-color': this.chipColor,
                 }
-                : {} }, h("div", { key: '64464d3cad83f4d9c0c7efbdd8d7a406f08f1118', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
+                : {} }, h("div", { key: '9aa88bf1c31f0946a77eea368ed03b13e031cfa1', ref: this.containerElementRef, style: Object.assign({}, customStyle), class: {
                 container: true,
                 outline: this.outline,
                 inactive: isInactive,
@@ -84,10 +85,10 @@ const Chip = /*@__PURE__*/ proxyCustomElement(class Chip extends H {
                 custom: this.variant === 'custom',
                 closable: this.closable,
                 icon: !!this.icon,
-            } }, h("ix-icon", { key: 'b38f0215ea69d966ab7bf8a6af178aa69db8e712', class: {
+            } }, h("ix-icon", { key: '904f4f03b99a5777696d4fb16e731660b965168d', class: {
                 'with-icon': true,
                 hidden: !this.icon,
-            }, name: this.icon, size: '24' }), h("span", { key: '6229fc50ae6394772a580c69eaf087cb5300801a', class: "slot-container" }, h("slot", { key: 'c11dd7e4f666ad9f6e39efdc9085ba42792a4481' })), isInactive === false && this.closable ? this.getCloseButton() : null), this.getTooltip()));
+            }, name: this.icon, size: '24' }), h("span", { key: '2163059e60b87e55ba0e961bc3c9a10ab4fe2f0e', class: "slot-container" }, h("slot", { key: '905355f990900be5cb82ddab1ef8ddd68598d9f1' })), isInactive === false && this.closable ? this.getCloseButton() : null), this.getTooltip()));
     }
     get hostElement() { return this; }
     static get style() { return chipCss; }

package/components/ix-chip.js.map

@@ -1 +1 @@
-{"file":"ix-chip.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}
+{"file":"ix-chip.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"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   *\n   * @since 3.0.0\n   */\n  @Prop() tooltipText: string | boolean = false;\n\n  /**\n   * Fire event if close button is clicked\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"],"version":3}

package/components/ix-col.js

@@ -1,4 +1,4 @@
-import { C as Col, d as defineCustomElement$1 } from './p-C7EBCKmV.js';
+import { C as Col, d as defineCustomElement$1 } from './p-CKoR0lxP.js';
 
 const IxCol = Col;
 const defineCustomElement = defineCustomElement$1;

package/components/ix-content-header.js

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, e as createEvent, h, d as Host } from './p-BA1wZ05L.js';
 import { h as iconArrowLeft } from './p-Dn_WjwtW.js';
-import { d as defineCustomElement$4 } from './p-D_wwWxx8.js';
+import { d as defineCustomElement$4 } from './p-d7CnwTHv.js';
 import { d as defineCustomElement$3 } from './p-Dlmgmbod.js';
-import { d as defineCustomElement$2 } from './p-Dfzl82x1.js';
+import { d as defineCustomElement$2 } from './p-B19EzNYi.js';
 
 const contentHeaderCss = ":host{display:flex;flex-direction:row;align-items:flex-start;padding:0}:host .titleGroup{display:flex;flex-direction:column;flex:1 1 0}:host .titleGroup .secondary{padding:0.25rem 0}:host .subtitle{margin-top:-0.125rem}:host .backButton{margin-right:0.5rem}:host .buttons{flex:0 0 auto}";
 

package/components/ix-content.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-BA1wZ05L.js';
 import { h as hasSlottedElements } from './p-Bi1VyG64.js';
 
-const contentCss = ":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 0rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}: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 .content{flex-grow:1;overflow:auto;padding-right:1.5rem;position:relative}:host .content-header.slotted{margin-bottom:1rem;padding-right:1.5rem}";
+const contentCss = ":host{display:flex;flex-direction:column;position:relative;padding:1.5rem 2rem 0.25rem 2rem;width:100%;height:100%;overflow:hidden}: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 .content{flex-grow:1;overflow:auto;position:relative}:host .content-header.slotted{margin-bottom:1rem}";
 
 const Content = /*@__PURE__*/ proxyCustomElement(class Content extends H {
     constructor() {
@@ -14,12 +14,12 @@ const Content = /*@__PURE__*/ proxyCustomElement(class Content extends H {
         return this.hostElement.shadowRoot.querySelector('.content-header slot');
     }
     render() {
-        return (h(Host, { key: '5ff3dde4c94bd5f40598a6b8fc9043ab2755c9a7' }, h("div", { key: 'cb2d5d8d011649e5f2cb67d8b7857b7bd096ca44', class: {
+        return (h(Host, { key: '3c3c64e2754e169fb11710f049e434c52ad8f541' }, h("div", { key: '4ccc370d1e12bdf3a8c2992c9d453002892ef948', class: {
                 'content-header': true,
                 slotted: this.isContentHeaderSlotted,
-            } }, h("slot", { key: '1a0c6b612ff4364e6bdd10b15745160925b61efd', name: "header", onSlotchange: () => {
+            } }, h("slot", { key: 'b028f5424366302f93a8c873102b21ad619c35d1', name: "header", onSlotchange: () => {
                 this.isContentHeaderSlotted = hasSlottedElements(this.contentHeaderSlot);
-            } })), h("div", { key: '5eabaf6bcd0c33d982bd1b88862873383b58fae6', class: "content" }, h("slot", { key: '25fa713021e9c01c08282da185c2fc14b6d06b3f' }))));
+            } })), h("div", { key: '2a7fb716ca17249c9757d77f2774692e26851f39', class: "content" }, h("slot", { key: 'b3f6363475f45f36837120f2ecfda6aa4b751a09' }))));
     }
     get hostElement() { return this; }
     static get style() { return contentCss; }

package/components/ix-content.js.map

@@ -1 +1 @@
-{"file":"ix-content.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,mhCAAmhC;;MCqBzhC,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;AAQW,QAAA,IAAsB,CAAA,sBAAA,GAAG,KAAK;AAgCxC;AA9BC,IAAA,IAAI,iBAAiB,GAAA;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAC/C,sBAAsB,CACJ;;IAGtB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;gBACtB,OAAO,EAAE,IAAI,CAAC,sBAAsB;AACrC,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAK;gBACjB,IAAI,CAAC,sBAAsB,GAAG,kBAAkB,CAC9C,IAAI,CAAC,iBAAiB,CACvB;AACH,aAAC,GACK,CACJ,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/content/content.scss?tag=ix-content&encapsulation=shadow","src/components/content/content.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:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  padding: 1.5rem 0rem 0.25rem 2rem;\n\n  width: 100%;\n  height: 100%;\n\n  overflow: hidden;\n\n  .content {\n    flex-grow: 1;\n    overflow: auto;\n    padding-right: 1.5rem;\n    position: relative;\n  }\n\n  .content-header.slotted {\n    margin-bottom: 1rem;\n    padding-right: 1.5rem;\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, Element, h, Host, State } from '@stencil/core';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n/**\n * @since 2.1.0\n * @slot header - Display content at the top of the content page\n */\n@Component({\n  tag: 'ix-content',\n  styleUrl: 'content.scss',\n  shadow: true,\n})\nexport class Content {\n  @Element() hostElement!: HTMLIxContentElement;\n\n  @State() isContentHeaderSlotted = false;\n\n  get contentHeaderSlot() {\n    return this.hostElement.shadowRoot!.querySelector(\n      '.content-header slot'\n    ) as HTMLSlotElement;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'content-header': true,\n            slotted: this.isContentHeaderSlotted,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => {\n              this.isContentHeaderSlotted = hasSlottedElements(\n                this.contentHeaderSlot\n              );\n            }}\n          ></slot>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"ix-content.js","mappings":";;;AAAA,MAAM,UAAU,GAAG,y+BAAy+B;;MCoB/+B,OAAO,iBAAAA,kBAAA,CAAA,MAAA,OAAA,SAAAC,CAAA,CAAA;AALpB,IAAA,WAAA,GAAA;;;;AAQW,QAAA,IAAsB,CAAA,sBAAA,GAAG,KAAK;AAgCxC;AA9BC,IAAA,IAAI,iBAAiB,GAAA;QACnB,OAAO,IAAI,CAAC,WAAW,CAAC,UAAW,CAAC,aAAa,CAC/C,sBAAsB,CACJ;;IAGtB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;gBACtB,OAAO,EAAE,IAAI,CAAC,sBAAsB;AACrC,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,YAAY,EAAE,MAAK;gBACjB,IAAI,CAAC,sBAAsB,GAAG,kBAAkB,CAC9C,IAAI,CAAC,iBAAiB,CACvB;AACH,aAAC,GACK,CACJ,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/content/content.scss?tag=ix-content&encapsulation=shadow","src/components/content/content.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:host {\n  @include ix-component;\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  padding: 1.5rem 2rem 0.25rem 2rem;\n\n  width: 100%;\n  height: 100%;\n\n  overflow: hidden;\n\n  .content {\n    flex-grow: 1;\n    overflow: auto;\n    position: relative;\n  }\n\n  .content-header.slotted {\n    margin-bottom: 1rem;\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, Element, h, Host, State } from '@stencil/core';\nimport { hasSlottedElements } from '../utils/shadow-dom';\n\n/**\n * @slot header - Display content at the top of the content page\n */\n@Component({\n  tag: 'ix-content',\n  styleUrl: 'content.scss',\n  shadow: true,\n})\nexport class Content {\n  @Element() hostElement!: HTMLIxContentElement;\n\n  @State() isContentHeaderSlotted = false;\n\n  get contentHeaderSlot() {\n    return this.hostElement.shadowRoot!.querySelector(\n      '.content-header slot'\n    ) as HTMLSlotElement;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={{\n            'content-header': true,\n            slotted: this.isContentHeaderSlotted,\n          }}\n        >\n          <slot\n            name=\"header\"\n            onSlotchange={() => {\n              this.isContentHeaderSlotted = hasSlottedElements(\n                this.contentHeaderSlot\n              );\n            }}\n          ></slot>\n        </div>\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/ix-custom-field.js

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-BA1wZ05L.js';
-import { H as HookValidationLifecycle } from './p-DGeWaNlt.js';
-import { d as defineCustomElement$5 } from './p-BuK5WByk.js';
-import { d as defineCustomElement$4 } from './p-B-zHEqXz.js';
-import { d as defineCustomElement$3 } from './p-CB1ADCkU.js';
-import { d as defineCustomElement$2 } from './p-Dfzl82x1.js';
+import { H as HookValidationLifecycle } from './p-aw_FhcJ5.js';
+import { d as defineCustomElement$5 } from './p-B9XDeCpV.js';
+import { d as defineCustomElement$4 } from './p-Cyxle5Ec.js';
+import { d as defineCustomElement$3 } from './p-B_C2-EkQ.js';
+import { d as defineCustomElement$2 } from './p-B19EzNYi.js';
 
 const customFieldCss = ":host{display:block;width:-moz-fit-content;width:fit-content;height:-moz-fit-content;height:fit-content}";
 
@@ -46,7 +46,7 @@ const CustomField = /*@__PURE__*/ proxyCustomElement(class CustomField extends H
         this.isWarning = isWarning;
     }
     render() {
-        return (h(Host, { key: 'bb181d52fe217d477896a57dec475edcc6b6e5df' }, h("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 }, h("slot", { key: 'd9b814b0f59dbc837443826bb5513172aba0b0a3' }))));
+        return (h(Host, { key: '50b7e5f59f28a32b2e4b9795efc2f0a9e753813e' }, h("ix-field-wrapper", { key: 'c761f7f018a021ff7014b30e34a2d87ae91bb367', 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 }, h("slot", { key: '0a12c0d2a8cd5152aa926e3aa9633c1f0f76ea02' }))));
     }
     get hostElement() { return this; }
     static get style() { return customFieldCss; }

package/components/ix-custom-field.js.map

@@ -1 +1 @@
-{"file":"ix-custom-field.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,0GAA0G;;ACAjI;;;;;;;AAOG;;;;;;;;;;;MAmBU,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;AASE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAqCxB,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AACjB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AACf,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AACd,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAuC3B;IAlCC,qBAAqB,CAAC,EACpB,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,GACS,EAAA;AAClB,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;;IAG5B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACd;;;;;;;;;;;;;;;;;;AA/BX,UAAA,CAAA;AAHC,IAAA,uBAAuB,CAAC;AACvB,QAAA,eAAe,EAAE,IAAI;KACtB;CAWA,EAAA,WAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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"],"version":3}
+{"file":"ix-custom-field.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,0GAA0G;;ACAjI;;;;;;;AAOG;;;;;;;;;;;MAgBU,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;AASE;;AAEG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAqCxB,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AACjB,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AACf,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AACd,QAAA,IAAS,CAAA,SAAA,GAAG,KAAK;AAuC3B;IAlCC,qBAAqB,CAAC,EACpB,SAAS,EACT,OAAO,EACP,MAAM,EACN,SAAS,GACS,EAAA;AAClB,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;AAC1B,QAAA,IAAI,CAAC,OAAO,GAAG,OAAO;AACtB,QAAA,IAAI,CAAC,MAAM,GAAG,MAAM;AACpB,QAAA,IAAI,CAAC,SAAS,GAAG,SAAS;;IAG5B,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,IAAI,CAAC,UAAU,EAC3B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,EAEvB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACd;;;;;;;;;;;;;;;;;;AA/BX,UAAA,CAAA;AAHC,IAAA,uBAAuB,CAAC;AACvB,QAAA,eAAe,EAAE,IAAI;KACtB;CAWA,EAAA,WAAA,CAAA,SAAA,EAAA,uBAAA,EAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"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@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"],"version":3}

package/components/ix-date-dropdown.js

@@ -2,15 +2,15 @@ import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment, d as Ho
 import { D as DateTime } from './p-bDicGJUN.js';
 import { m as makeRef } from './p-bcj7UEIC.js';
 import { j as iconHistory } from './p-Dn_WjwtW.js';
-import { d as defineCustomElement$b } from './p-DylMlJTZ.js';
-import { d as defineCustomElement$a } from './p-C7EBCKmV.js';
-import { d as defineCustomElement$9 } from './p-DM43N7pD.js';
-import { d as defineCustomElement$8 } from './p-DXzHgqiB.js';
-import { d as defineCustomElement$7 } from './p-Dy35mbzK.js';
+import { d as defineCustomElement$b } from './p-C8xOvcAt.js';
+import { d as defineCustomElement$a } from './p-CKoR0lxP.js';
+import { d as defineCustomElement$9 } from './p-VXLdiXU0.js';
+import { d as defineCustomElement$8 } from './p-Cu4GsGII.js';
+import { d as defineCustomElement$7 } from './p-uhiF1LKf.js';
 import { d as defineCustomElement$6 } from './p-BtKUjD8M.js';
-import { d as defineCustomElement$5 } from './p-D_wwWxx8.js';
-import { d as defineCustomElement$4 } from './p-DFQ_caA4.js';
-import { d as defineCustomElement$3 } from './p-C1BF91hb.js';
+import { d as defineCustomElement$5 } from './p-d7CnwTHv.js';
+import { d as defineCustomElement$4 } from './p-8eL4ti2y.js';
+import { d as defineCustomElement$3 } from './p-CufZ3bGn.js';
 import { d as defineCustomElement$2 } from './p-Dlmgmbod.js';
 
 const dateDropdownCss = ":host{display:inline-block;position:relative}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host ::-webkit-scrollbar-track{border-radius:5px;background:var(--theme-scrollbar-track--background)}:host ::-webkit-scrollbar-track:hover{background:var(--theme-scrollbar-track--background--hover)}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}@media (max-width: 48em){:host .min-width{width:-moz-min-content;width:min-content}}@media (min-width: 48em){:host .border-right{border-right:var(--theme-x-weak-bdr-2)}}:host ix-button{width:100%}:host .max-height{max-height:-moz-max-content;max-height:max-content}:host .no-margin{margin:0;padding:0}:host .pull-right{float:right;padding:0 1rem 0.75rem 1rem}";
@@ -23,8 +23,6 @@ const DateDropdown = /*@__PURE__*/ proxyCustomElement(class DateDropdown extends
         this.dateRangeChange = createEvent(this, "dateRangeChange", 7);
         /**
          * Disable the button that opens the dropdown containing the date picker.
-         *
-         * @since 2.3.0
          */
         this.disabled = false;
         /**
@@ -110,8 +108,6 @@ const DateDropdown = /*@__PURE__*/ proxyCustomElement(class DateDropdown extends
         /**
          * The index of which day to start the week on, based on the Locale#weekdays array.
          * E.g. if the locale is en-us, weekStartIndex = 1 results in starting the week on monday.
-         *
-         * @since 2.6.0
          */
         this.weekStartIndex = 0;
         /**
@@ -238,21 +234,21 @@ const DateDropdown = /*@__PURE__*/ proxyCustomElement(class DateDropdown extends
     }
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: 'fb251840a006c5efa804f444e52dd938fc7e6eda' }, h("ix-button", { key: '7e7e4c12a2eb502564baaa5679969917aa40403c', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, ghost: this.ghost, outline: this.outline, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled }, this.getButtonLabel()), h("ix-dropdown", { key: 'a80a5f47757956fe5340acbe28a2634bcc46f30e', "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
+        return (h(Host, { key: '8a5ae63cb553e80b85681b489b6ea97350827867' }, h("ix-button", { key: '0608d3a9063c9b729fbdda08b9a4f4441a19d039', "data-testid": "date-dropdown-trigger", "data-date-dropdown-trigger": true, variant: this.variant, ghost: this.ghost, outline: this.outline, loading: this.loading, icon: iconHistory, ref: this.triggerRef, disabled: this.disabled }, this.getButtonLabel()), h("ix-dropdown", { key: 'd266a82bca22d8fe1009d55a29f485778ebf8b4c', "data-testid": "date-dropdown", "data-date-dropdown": true, class: "min-width max-height", trigger: this.triggerRef.waitForCurrent(), closeBehavior: "outside", placement: "bottom-start", onShowChanged: ({ detail: show }) => {
                 if (!show &&
                     this.selectedDateRangeId === 'custom' &&
                     this.datePickerTouched &&
                     this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
                 }
-            } }, h("ix-layout-grid", { key: 'd7cba7d46b7c7dfd545e41c5895842f5cbcd8f5a', noMargin: true }, h("ix-row", { key: 'ad8958836b662def55cc51d52864639a25718ece' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("ix-col", { key: 'a830a5768c0e72f5710440c9a4199a794ff4667e', class: {
+            } }, h("ix-layout-grid", { key: 'c7a01092a838122a1041651c6a0f9c5eb74c2aae', noMargin: true }, h("ix-row", { key: 'a6ed728fd08a35d8f0b3e71f115e0c258780474b' }, ((_a = this.dateRangeOptions) === null || _a === void 0 ? void 0 : _a.length) > 1 && (h("ix-col", { key: 'e698f56587ad326e808bf8972c856fb74ac60ee9', class: {
                 'no-margin': true,
                 'border-right': this.selectedDateRangeId === 'custom',
-            } }, this.dateRangeOptions.map((dateRangeOption) => (h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), h("div", { key: '4d1899c246bc6995852e25078a33bf297e7bdd6b', hidden: !this.customRangeAllowed }, h("ix-dropdown-item", { key: '5e61b21055860fc54d84cf14a1678b773e7a3ba2', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), h("ix-col", { key: '5d33b5d8f022fa59492c5ddd1eb71bb5afd2af67', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, { key: '46229de1218d9b719fa8f5af3b784cac99e57b82' }, h("ix-date-picker", { key: '87f3f37847b277dc0220b0a6a9769a332a39e59b', standaloneAppearance: false, locale: this.locale, onDateChange: (e) => {
+            } }, this.dateRangeOptions.map((dateRangeOption) => (h("ix-dropdown-item", { label: dateRangeOption.label, onClick: () => this.onRangeListSelect(dateRangeOption.id), checked: this.selectedDateRangeId === dateRangeOption.id }))), h("div", { key: 'd2c9d06535272b384b6d730c885c8c1db8071c07', hidden: !this.customRangeAllowed }, h("ix-dropdown-item", { key: '067c2ff3f3f977876a5b554dfd0c16b67fbab5b7', label: this.i18nCustomItem, checked: this.selectedDateRangeId === 'custom', onClick: () => this.onRangeListSelect('custom') })))), h("ix-col", { key: 'af0d3397302ba7891efa9953f5ec2805255acc23', class: "no-margin" }, this.selectedDateRangeId === 'custom' && (h(Fragment, { key: '715a8468214d59dd7f4891d78fb781c7c1987685' }, h("ix-date-picker", { key: 'cbcc5f9b33b736444359fb67fa96a22d82713013', standaloneAppearance: false, locale: this.locale, onDateChange: (e) => {
                 e.stopPropagation();
                 this.currentRangeValue = Object.assign(Object.assign({}, e.detail), { id: 'custom' });
                 this.datePickerTouched = true;
-            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, range: this.range, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: 'dac27dc2ebbf00321384691bdf1c0badb8d2df6a', class: "pull-right" }, h("ix-button", { key: '44668c59a0dfe7c428dc28fe518f6ca6012f37a0', onClick: () => {
+            }, onDateRangeChange: (e) => e.stopPropagation(), format: this.format, range: this.range, from: this.from || ((_b = this.currentRangeValue) === null || _b === void 0 ? void 0 : _b.from), to: this.to || ((_c = this.currentRangeValue) === null || _c === void 0 ? void 0 : _c.to), minDate: this.minDate, maxDate: this.maxDate, today: this.today, weekStartIndex: this.weekStartIndex, showWeekNumbers: this.showWeekNumbers }), h("div", { key: 'd98f59b3e959f64fd5d7c4be6e19486616568865', class: "pull-right" }, h("ix-button", { key: 'e30da682a1d4fecd958b6ed3c70d5f4bccc3e141', onClick: () => {
                 if (this.currentRangeValue) {
                     this.onDateSelect(this.currentRangeValue);
                 }