@siemens/ix-docs 4.3.0 → 5.0.0

package/build/static/demo/v2/preview/html/assets/ix-input.entry-rRAFXarT.js

@@ -0,0 +1,250 @@
+import { a as registerInstance, c as createEvent, g as getElement, h, H as Host } from "./global-DjWMysHf.js";
+import { B as iconEye, C as iconEyeCancelled } from "./index-Cl7fhG1I-C77BCFLW.js";
+import { m as makeRef } from "./make-ref-Djkc69iv-BpP6uHEs.js";
+import { m as mapValidationResult, b as addDisposableChangesAndVisibilityObservers, c as adjustPaddingForStartAndEnd, e as checkInternalValidity, h as getAriaAttributesForInput, a as SlotStart, I as InputElement, j as onInputBlurWithChange, o as onEnterKeyChangeEmit, k as onInputFocus, d as checkAllowedKeys, S as SlotEnd } from "./input.fc-DjE-oOZc-BEHk-Hap.js";
+import { H as HookValidationLifecycle } from "./validation-BT5aAuSO-CbQmWD6n.js";
+import "./a11y-B5k8YVR0-BOSd6BQK.js";
+import "./mutation-observer-CX81WQtk-DFcmhOTk.js";
+import "./rwd.util-JJddxCCh-B7dE3uhl.js";
+import "./anime.esm-DhE1t8Qh-cS95-bBh.js";
+import "./animation-DNIQ2C1K-BYpQk_MF.js";
+import "./index-XBTykBKS-D8xrYMLu.js";
+const inputCss = () => `input{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:"clig" off, "liga" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}input[type=number]{text-align:right}input[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}input:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input:-webkit-autofill,input:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}input::-moz-placeholder{color:var(--theme-input-hint--color)}input::placeholder{color:var(--theme-input-hint--color)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),input:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}input:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}input.read-only,input:read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}input.read-only::-moz-placeholder,input:read-only::-moz-placeholder{color:transparent}input:-moz-read-only::placeholder{color:transparent}input.read-only::placeholder,input:read-only::placeholder{color:transparent}input:disabled,input.disabled{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}input:disabled::-moz-placeholder,input.disabled::-moz-placeholder{color:transparent}input:disabled::placeholder,input.disabled::placeholder{color:transparent}textarea{min-height:2rem;width:auto;padding:0.25rem 0.5rem;background-color:var(--theme-input--background);color:var(--theme-input--color);-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield;text-overflow:ellipsis;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color);border-radius:var(--theme-input--border-radius);box-shadow:var(--theme-input--box-shadow);font-feature-settings:"clig" off, "liga" off;font-family:Siemens Sans, Siemens Sans, Arial, Helvetica, sans-serif;font-style:normal;font-size:var(--theme-ms-0);line-height:var(--theme-line-height-md);font-weight:var(--theme-font-weight-normal);letter-spacing:var(--theme-letter-spacing-xl);text-decoration:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}textarea[type=number]{text-align:right}textarea[type=number]::-webkit-inner-spin-button{margin-right:-2px;margin-left:2px;display:none}textarea:-webkit-autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea:-webkit-autofill,textarea:autofill{-webkit-box-shadow:0 0 0 1000px var(--theme-color-component-info) inset !important;-webkit-text-fill-color:var(--theme-input--color--autofill) !important;background-color:var(--theme-input--background--autofill) !important;border:var(--theme-input--border-thickness, 1px) solid var(--theme-input--border-color--autofill) !important;color:var(--theme-input--color--autofill) !important}textarea::-moz-placeholder{color:var(--theme-input-hint--color)}textarea::placeholder{color:var(--theme-input-hint--color)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:hover:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:-moz-read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea.focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only),textarea:focus:not(.readonly,.read-only,.disabled,[readonly],[disabled],:read-only){outline:1px solid var(--theme-color-focus-bdr);outline-offset:var(--theme-input--focus--outline-offset);border-color:var(--theme-input--border-color--focus) !important}textarea:-moz-read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}textarea.read-only,textarea:read-only{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--readonly)}textarea.read-only::-moz-placeholder,textarea:read-only::-moz-placeholder{color:transparent}textarea:-moz-read-only::placeholder{color:transparent}textarea.read-only::placeholder,textarea:read-only::placeholder{color:transparent}textarea:disabled,textarea.disabled{box-shadow:none;background-color:transparent;outline:none;border:var(--theme-input--border-thickness) solid var(--theme-input--border-color--disabled)}textarea:disabled::-moz-placeholder,textarea.disabled::-moz-placeholder{color:transparent}textarea:disabled::placeholder,textarea.disabled::placeholder{color:transparent}textarea{min-height:2rem;padding:calc(0.375rem - var(--theme-input--border-thickness)) calc(0.5rem - var(--theme-input--border-thickness))}textarea:not([rows]){height:3.25rem}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){border-color:var(--theme-input--border-color--info)}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{border-color:var(--theme-input--border-color--info--hover) !important}textarea.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--info--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--hover) !important}textarea.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--warning--active) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]),input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]){background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):hover{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}textarea[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active,input[class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly]):active{border-color:var(--theme-input--border-color--invalid--active) !important}:host{display:inline-block;position:relative;width:auto}:host *,:host *::after,:host *::before{box-sizing:border-box}:host ::-webkit-scrollbar-button{display:none}@-moz-document url-prefix(){:host *{scrollbar-color:var(--theme-scrollbar-thumb--background) var(--theme-scrollbar-track--background);scrollbar-width:thin}}:host{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .input-wrapper{display:flex;position:relative;align-items:center;width:100%;height:100%}:host input{width:100%;height:100%}:host .start-container,:host .end-container{display:flex;position:absolute;align-items:center;justify-content:center;z-index:1}:host .start-container{left:var(--theme-input--border-thickness)}:host .end-container{right:0.25rem}:host .start-container ::slotted(*){margin-left:0.5rem}:host .start-container ::slotted(ix-icon.size-24),:host .start-container ::slotted(ix-icon-button.btn-icon-16){margin-left:0.25rem}:host .start-container ::slotted(ix-icon-button.btn-icon-32){margin-left:0}:host .end-container ::slotted(*){margin-right:calc(0.5rem - 0.25rem)}:host .end-container ::slotted(ix-icon.size-24),:host .end-container ::slotted(ix-icon-button.btn-icon-16){margin-right:calc(0.25rem - 0.25rem)}:host .end-container ::slotted(ix-icon-button.btn-icon-32){margin-right:calc(0rem - 0.25rem)}:host .bottom-text{margin-top:0.25rem;margin-bottom:0.25rem}:host .input-wrapper:hover input:not(:disabled):not(:-moz-read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host .input-wrapper:hover input:not(:disabled):not(:read-only){border-color:var(--theme-input--border-color--hover) !important;background-color:var(--theme-input--background--hover)}:host(.disabled){pointer-events:none}:host(.disabled) input,:host(.disabled) textarea{pointer-events:none}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{border-color:var(--theme-input--border-color--info)}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{border-color:var(--theme-input--border-color--info--hover) !important}:host(.ix-info:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--info--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{background-color:var(--theme-input--background--warning);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{background-color:var(--theme-input--background--warning--hover);border-color:var(--theme-input--border-color--warning--active) !important}:host(.ix-warning:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--warning--active) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input{background-color:var(--theme-input--background--invalid);border-color:var(--theme-input--border-color--invalid) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:hover,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) .input-wrapper:hover input{background-color:var(--theme-input--background--invalid--hover);border-color:var(--theme-input--border-color--invalid--hover) !important}:host([class*=ix-invalid]:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active,:host(.ix-invalid--required:not(.disabled):not(:disabled):not([disabled]):not(.readonly):not([readonly])) input:active{border-color:var(--theme-input--border-color--invalid--active) !important}:host input[type=password]::-ms-reveal,:host input[type=password]::-ms-clear{display:none}:host input[type=password]::-webkit-credentials-auto-fill-button,:host input[type=password]::-webkit-textfield-decoration-container,:host input[type=password]::-webkit-contacts-auto-fill-button,:host input[type=password]::-webkit-caps-lock-indicator{visibility:hidden;pointer-events:none}:host .password-eye.eye-hidden{display:none}`;
+var __decorate = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+let inputIds = 0;
+const Input = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.validityStateChange = createEvent(this, "validityStateChange", 7);
+    this.ixBlur = createEvent(this, "ixBlur", 7);
+    this.ixChange = createEvent(this, "ixChange", 7);
+    if (hostRef.$hostElement$["s-ei"]) {
+      this.formInternals = hostRef.$hostElement$["s-ei"];
+    } else {
+      this.formInternals = hostRef.$hostElement$.attachInternals();
+      hostRef.$hostElement$["s-ei"] = this.formInternals;
+    }
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  formInternals;
+  /**
+   * The type of the text field. Possible values are 'text', 'email', or 'password'.
+   */
+  type = "text";
+  /**
+   * The name of the text field.
+   */
+  name;
+  /**
+   * The placeholder text for the text field.
+   */
+  placeholder;
+  /**
+   * The value of the text field.
+   */
+  value = "";
+  /**
+   * Specifies whether the text field is required.
+   */
+  required = false;
+  /**
+   * Specifies whether the text field is disabled.
+   */
+  disabled = false;
+  /**
+   * Specifies whether the text field is readonly.
+   */
+  readonly = false;
+  /**
+   * The helper text for the text field.
+   */
+  helperText;
+  /**
+   * The info text for the text field.
+   */
+  infoText;
+  /**
+   * Specifies whether to show the text as a tooltip.
+   */
+  showTextAsTooltip;
+  /**
+   * The valid text for the text field.
+   */
+  validText;
+  /**
+   * The warning text for the text field.
+   */
+  warningText;
+  /**
+   * The label for the text field.
+   */
+  label;
+  /**
+   * The error text for the text field.
+   */
+  invalidText;
+  /**
+   * The pattern for the text field.
+   */
+  pattern;
+  /**
+   * The maximum length of the text field.
+   */
+  maxLength;
+  /**
+   * The minimum length of the text field.
+   */
+  minLength;
+  /**
+   * The allowed characters pattern for the text field.
+   */
+  allowedCharactersPattern;
+  /**
+   * If false, pressing Enter will submit the form (if inside a form).
+   * Set to true to suppress submit on Enter.
+   */
+  suppressSubmitOnEnter = false;
+  /**
+   * Text alignment within the input. 'start' aligns the text to the start of the input, 'end' aligns the text to the end of the input.
+   */
+  textAlignment = "start";
+  /**
+   * Event emitted when the value of the text field changes.
+   */
+  valueChange;
+  /**
+   * Event emitted when the validity state of the text field changes.
+   */
+  validityStateChange;
+  /**
+   * Event emitted when the text field loses focus.
+   */
+  ixBlur;
+  /**
+   * Event emitted when the text field loses focus and the value has changed.
+   * @since 4.4.0
+   */
+  ixChange;
+  isInvalid = false;
+  isValid = false;
+  isInfo = false;
+  isWarning = false;
+  isInvalidByRequired = false;
+  inputType = "text";
+  /** @internal */
+  initialValue;
+  inputRef = makeRef();
+  slotEndRef = makeRef();
+  slotStartRef = makeRef();
+  inputId = `input-${inputIds++}`;
+  touched = false;
+  disposableChangesAndVisibilityObservers;
+  updateClassMappings(result) {
+    mapValidationResult(this, result);
+  }
+  updateInputType() {
+    this.inputType = this.type;
+  }
+  componentWillLoad() {
+    this.updateFormInternalValue(this.value);
+    this.inputType = this.type;
+  }
+  connectedCallback() {
+    this.disposableChangesAndVisibilityObservers = addDisposableChangesAndVisibilityObservers(this.hostElement, this.updatePaddings.bind(this));
+  }
+  updatePaddings() {
+    adjustPaddingForStartAndEnd(this.slotStartRef.current, this.slotEndRef.current, this.inputRef.current);
+  }
+  disconnectedCallback() {
+    this.disposableChangesAndVisibilityObservers?.();
+  }
+  updateFormInternalValue(value) {
+    this.formInternals.setFormValue(value);
+    this.value = value;
+    if (this.inputRef.current && this.touched) {
+      checkInternalValidity(this, this.inputRef.current);
+    }
+  }
+  /** @internal */
+  async getAssociatedFormElement() {
+    return this.formInternals.form;
+  }
+  /** @internal */
+  hasValidValue() {
+    return Promise.resolve(!!this.value);
+  }
+  /**
+   * Returns the native input element used in the text field.
+   */
+  getNativeInputElement() {
+    return this.inputRef.waitForCurrent();
+  }
+  /**
+   * Returns the validity state of the input field.
+   */
+  async getValidityState() {
+    const input = await this.inputRef.waitForCurrent();
+    return Promise.resolve(input.validity);
+  }
+  /**
+   * Focuses the input field
+   */
+  async focusInput() {
+    return (await this.getNativeInputElement()).focus();
+  }
+  /**
+   * Returns whether the text field has been touched.
+   * @internal
+   */
+  isTouched() {
+    return Promise.resolve(this.touched);
+  }
+  render() {
+    const inputAria = getAriaAttributesForInput(this);
+    return h(Host, { key: "e5c0380187e14c515c1920ff753f02d954b0c468", class: {
+      disabled: this.disabled,
+      readonly: this.readonly
+    } }, h("ix-field-wrapper", { key: "00ae4da738996eb5fb3fceb3fd2f4bf8f293fd5c", required: this.required, label: this.label, helperText: this.helperText, invalidText: this.invalidText, infoText: this.infoText, warningText: this.warningText, validText: this.validText, showTextAsTooltip: this.showTextAsTooltip, isInvalid: this.isInvalid, isValid: this.isValid, isInfo: this.isInfo, isWarning: this.isWarning, controlRef: this.inputRef }, h("div", { key: "ed44a7d89133fcb9ce2574346364212ddbe13630", class: "input-wrapper" }, h(SlotStart, { key: "f6e0cf1aaa1bb3a945882d89356efd2e15be20df", slotStartRef: this.slotStartRef, onSlotChange: () => this.updatePaddings() }), h(InputElement, { key: "a0263a3186ba0aed9dc7f873f209e32008571336", id: this.inputId, readonly: this.readonly, disabled: this.disabled, maxLength: this.maxLength, minLength: this.minLength, pattern: this.pattern, type: this.inputType, isInvalid: this.isInvalid, required: this.required, value: this.value, placeholder: this.placeholder, inputRef: this.inputRef, onKeyPress: (event) => checkAllowedKeys(this, event), onFocus: () => onInputFocus(this, this.value), onEnterKeyChange: (event) => onEnterKeyChangeEmit(event, this, this.value), valueChange: (value) => this.valueChange.emit(value), updateFormInternalValue: (value) => this.updateFormInternalValue(value), onBlur: () => {
+      onInputBlurWithChange(this, this.inputRef.current, this.value);
+      this.touched = true;
+    }, ariaAttributes: inputAria, form: this.formInternals.form ?? void 0, suppressSubmitOnEnter: this.suppressSubmitOnEnter, textAlignment: this.textAlignment }), h(SlotEnd, { key: "ddaf9b30b725f84934c937711cdd5cc6aa4e564b", slotEndRef: this.slotEndRef, onSlotChange: () => this.updatePaddings() }, h("ix-icon-button", { key: "216ce61735239e8b67f767ec08a37976a03ed74b", color: "color-weak-text", class: {
+      "password-eye": true,
+      "eye-hidden": this.type !== "password" || this.disabled
+    }, variant: "tertiary", size: "16", icon: this.inputType === "password" ? iconEye : iconEyeCancelled, onClick: () => {
+      if (this.inputType === "password") {
+        this.inputType = "text";
+        return;
+      }
+      this.inputType = "password";
+    } }))), !!this.maxLength && this.maxLength > 0 && h("ix-typography", { key: "e90d202b3bd47dfd3056c1140f2cabb6aea4e82a", class: "bottom-text", slot: "bottom-right", textColor: "soft" }, (this.value ?? "").length, "/", this.maxLength)));
+  }
+  static get formAssociated() {
+    return true;
+  }
+  static get watchers() {
+    return {
+      "type": [{
+        "updateInputType": 0
+      }]
+    };
+  }
+};
+__decorate([
+  HookValidationLifecycle()
+], Input.prototype, "updateClassMappings", null);
+Input.style = inputCss();
+export {
+  Input as ix_input
+};

package/build/static/demo/v2/preview/html/assets/ix-key-value-list.entry-CvLX0mY-.js

@@ -0,0 +1,18 @@
+import { a as registerInstance, h, H as Host } from "./global-DjWMysHf.js";
+const keyValueListCss = () => `:host(.keyValueList) ::slotted(ix-key-value){border-bottom:1px solid var(--theme-color-weak-bdr)}:host(.keyValueList.keyValueList--striped) ::slotted(ix-key-value:nth-child(odd)){background:var(--theme-color-ghost-alt)}`;
+const KeyValueList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  /**
+   * Optional striped key value list style
+   */
+  striped = false;
+  render() {
+    return h(Host, { key: "b77626b4307e170ebcd609232d6b51e6352d77fc", class: { keyValueList: true, "keyValueList--striped": this.striped } }, h("slot", { key: "5519febab149c0a10baf26a47fcb0cfecf14cfb2" }));
+  }
+};
+KeyValueList.style = keyValueListCss();
+export {
+  KeyValueList as ix_key_value_list
+};

package/build/static/demo/v2/preview/html/assets/ix-key-value.entry-CB_BWx7i.js

@@ -0,0 +1,39 @@
+import { a as registerInstance, h, H as Host } from "./global-DjWMysHf.js";
+const keyValueCss = () => `:host(.keyValue){display:flex;flex-direction:row;align-items:center;gap:1rem}:host(.keyValue) .keyValue__icon{padding:0.25rem 0}:host(.keyValue) .keyValue__content{display:flex;flex-grow:1;align-items:flex-start}:host(.keyValue) .keyValue__content,:host(.keyValue) .keyValue__content .content__label,:host(.keyValue) .keyValue__content .content__value{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.keyValue) .keyValue__content .content__label{color:var(--theme-color-soft-text)}:host(.keyValue) .keyValue__content .content__value{width:100%}:host(.keyValue.keyValue--column){padding:0.5rem 0;border-bottom:1px solid var(--theme-color-soft-bdr)}:host(.keyValue.keyValue--column) .keyValue__content{flex-direction:column}:host(.keyValue.keyValue--column) .keyValue__content .content__label,:host(.keyValue.keyValue--column) .keyValue__content .content__value:not(.has-customValue){padding:2px 0}:host(.keyValue.keyValue--row){padding:0.25rem 0}:host(.keyValue.keyValue--row) .keyValue__content{flex-direction:row;gap:1rem;align-items:center}:host(.keyValue.keyValue--row) .keyValue__content .content__label,:host(.keyValue.keyValue--row) .keyValue__content .content__value:not(.has-customValue){padding:6px 0}:host(.keyValue.keyValue--row) .keyValue__content .content__label{min-width:8rem}`;
+const KeyValue = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  /**
+   * Optional key value icon
+   */
+  icon;
+  /**
+   * ARIA label for the icon
+   *
+   * @since 3.2.0
+   */
+  ariaLabelIcon;
+  /**
+   * Key value label
+   */
+  label;
+  /**
+   * Optional key value label position - 'top' or 'left'
+   */
+  labelPosition = "top";
+  /**
+   * Optional key value text value
+   */
+  value;
+  render() {
+    return h(Host, { key: "af5e03b72f520823744f01a43cb9a1e126095a62", class: `keyValue keyValue--${this.labelPosition === "top" ? "column" : "row"}` }, this.icon && h("ix-icon", { key: "425d6eae99291316992748089cbeb77308b920d6", name: this.icon, size: "24", class: "keyValue__icon", "aria-label": this.ariaLabelIcon }), h("div", { key: "ce5eb1beac504b0887aa33afd74e1b44afd8b466", class: "keyValue__content" }, h("div", { key: "0c884df43d337cffb68175a91acb8537698645db", class: "content__label" }, this.label), h("div", { key: "b274e8cb81453c64291cce2e23883b07beae523c", class: {
+      content__value: true,
+      "has-customValue": this.value === void 0
+    } }, this.value !== void 0 ? this.value : h("slot", { name: "custom-value" }))));
+  }
+};
+KeyValue.style = keyValueCss();
+export {
+  KeyValue as ix_key_value
+};

package/build/static/demo/v2/preview/html/assets/ix-kpi.entry-BPKDjexq.js

@@ -0,0 +1,70 @@
+import { a as registerInstance, h, H as Host } from "./global-DjWMysHf.js";
+import { S as iconWarning, i as iconAlarm } from "./index-Cl7fhG1I-C77BCFLW.js";
+const kpiCss = () => `:host{display:flex;flex-grow:1;height:2.5rem;border-radius:var(--theme-kpi--border-radius);padding:0.375rem 0.25rem;min-width:0}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .kpi-container{display:flex;height:100%;width:100%;border-block-end:2px solid grey}:host .kpi-container.alarm{border-block-end-color:var(--theme-color-alarm)}:host .kpi-container.warning{border-block-end-color:var(--theme-color-warning)}:host .kpi-container .kpi-label{display:flex;align-items:center;color:var(--theme-kpi-display-label--color);flex-grow:1;flex-shrink:9999}:host .kpi-container .kpi-label ix-icon{margin-inline-end:0.25rem}:host .kpi-container .kpi-value-container{display:flex;align-items:flex-end}:host .kpi-container .kpi-value{color:var(--theme-kpi-display-value--color);font-family:Siemens Sans, sans-serif;font-size:1.375rem;font-weight:400;line-height:1.091em;color:var(--theme-color-std-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smooting:grayscale}:host .kpi-container .kpi-unit{margin-inline-start:0.5rem;color:var(--theme-kpi-display-units--color)}:host .kpi-container .kpi-label,:host .kpi-container .kpi-unit{margin-block-start:0.125rem}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):hover,:host:not(.disabled):not(:disabled).hover{background-color:var(--theme-kpi-display--background--hover)}:host:not(.disabled):not(:disabled){cursor:pointer}:host:not(.disabled):not(:disabled):active,:host:not(.disabled):not(:disabled).active{background-color:var(--theme-kpi-display--background--active)}:host:not(.disabled):not(:disabled):focus-visible{outline:1px solid var(--focus--border-color)}:host(.stacked){height:3.75rem}:host(.stacked) .kpi-container{justify-content:center;flex-wrap:wrap}:host(.stacked) .kpi-container .kpi-label{width:100%;justify-content:center}`;
+const Kpi = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  /**
+   *
+   */
+  label;
+  /**
+   * ARIA label for the alarm icon
+   *
+   * @since 3.2.0
+   */
+  ariaLabelAlarmIcon;
+  /**
+   * ARIA label for the warning icon
+   *
+   * @since 3.2.0
+   */
+  ariaLabelWarningIcon;
+  /**
+   *
+   */
+  value;
+  /**
+   *
+   */
+  unit;
+  /**
+   *
+   */
+  state = "neutral";
+  /**
+   *
+   */
+  orientation = "horizontal";
+  getStateIcon() {
+    switch (this.state) {
+      case "alarm":
+        return h("ix-icon", { color: "kpi-display-icon--color", name: iconAlarm, size: "16", "aria-label": this.ariaLabelAlarmIcon });
+      case "warning":
+        return h("ix-icon", { color: "kpi-display-icon--color", name: iconWarning, size: "16", "aria-label": this.ariaLabelWarningIcon });
+      default:
+        return "";
+    }
+  }
+  getTooltipText() {
+    let tooltip = `${this.label}: ${this.value}`;
+    if (this.unit) {
+      tooltip = tooltip.concat(` ${this.unit}`);
+    }
+    return tooltip;
+  }
+  render() {
+    return h(Host, { key: "d215b422347ffdcb0c46a2a964ccfcd3f4b0a6d2", title: this.getTooltipText(), tabindex: "1", class: {
+      stacked: this.orientation === "vertical"
+    } }, h("div", { key: "8095eb708071a93c90570eb1e80658f410791e0e", class: {
+      "kpi-container": true,
+      alarm: this.state === "alarm",
+      warning: this.state === "warning"
+    } }, h("span", { key: "00141bb9ab93b22647de0c9ea4cc26d2912eeae5", class: "kpi-label" }, this.getStateIcon(), h("span", { key: "fe025474c9b78ec444200a56c0e2cf2bcb4721f3", class: "kpi-label-text" }, this.label)), h("span", { key: "816283cf52380e84dc60243f23184d5c791ef07c", class: "kpi-value-container" }, h("span", { key: "0d5b79ee139486c5838e3e78426582bc540585ce", class: "kpi-value" }, this.value), this.unit ? h("span", { class: "kpi-unit" }, this.unit) : "")));
+  }
+};
+Kpi.style = kpiCss();
+export {
+  Kpi as ix_kpi
+};

package/build/static/demo/v2/preview/html/assets/ix-layout-auto.entry-Bq1YV9k2.js

@@ -0,0 +1,93 @@
+import { a as registerInstance, g as getElement, h, H as Host } from "./global-DjWMysHf.js";
+const layoutAutoCss = () => `:host{display:block;position:relative;margin:0 0.75rem;--ix-layout-grid-gap:1.5rem}:host .container{display:flex;align-items:stretch;flex-wrap:wrap;gap:var(--ix-layout-grid-gap)}:host ::slotted(*){flex-grow:0;flex-shrink:0}`;
+const LayoutForm = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  /**
+   * Defines the layout of the form.
+   */
+  layout = [
+    { minWidth: "0", columns: 1 },
+    { minWidth: "48em", columns: 2 }
+  ];
+  mediaQueryList = [];
+  observer = new MutationObserver(() => this.calculateGridTemplateColumns());
+  resizeObserver = new ResizeObserver(() => {
+    this.calculateGridTemplateColumns();
+  });
+  connectedCallback() {
+    this.observer.observe(this.hostElement, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-colspan"]
+    });
+    this.resizeObserver.observe(this.hostElement);
+    this.calculateGridTemplateColumns();
+  }
+  componentWillLoad() {
+    this.calculateGridTemplateColumns();
+  }
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+    }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+    }
+  }
+  updateMediaQueryList() {
+    this.mediaQueryList = [];
+    this.layout.forEach((layout) => {
+      const mediaQuery = window.matchMedia(`(min-width: ${layout.minWidth})`);
+      this.mediaQueryList.push({
+        mediaQuery,
+        layout
+      });
+    });
+  }
+  parseNumber(number) {
+    if (!number) {
+      return 1;
+    }
+    const result = parseInt(number);
+    if (isNaN(result)) {
+      return 1;
+    }
+    return result;
+  }
+  calculateGridTemplateColumns() {
+    this.updateMediaQueryList();
+    let layoutColumns = 1;
+    let columnSpacing = "var(--ix-layout-grid-gap)";
+    this.mediaQueryList.forEach((mediaQuery) => {
+      if (mediaQuery.mediaQuery.matches) {
+        layoutColumns = mediaQuery.layout.columns;
+      }
+    });
+    Array.from(this.hostElement.children).forEach((child) => {
+      let colspan = this.parseNumber(child.getAttribute("data-colspan"));
+      colspan = Math.min(colspan, layoutColumns);
+      const childRatio = colspan / layoutColumns;
+      child.style.width = `calc(${childRatio * 99.9}% - ${1 - childRatio} * ${columnSpacing})`;
+    });
+  }
+  render() {
+    return h(Host, { key: "fe057d2efd5bd08cfea04c9fa270f462b6883362" }, h("div", { key: "d26f958f45b56d993527c00c552638352fbbfc17", class: "container" }, h("slot", { key: "6b27323636d5ef2b8be0900bf41f0807e99c0f53" })));
+  }
+  static get watchers() {
+    return {
+      "layout": [{
+        "updateMediaQueryList": 0
+      }]
+    };
+  }
+};
+LayoutForm.style = layoutAutoCss();
+export {
+  LayoutForm as ix_layout_auto
+};

package/build/static/demo/v2/preview/html/assets/ix-link-button.entry-DcdLS8G8.js

@@ -0,0 +1,35 @@
+import { a as registerInstance, h, H as Host } from "./global-DjWMysHf.js";
+import { j as iconChevronRightSmall } from "./index-Cl7fhG1I-C77BCFLW.js";
+const linkButtonCss = () => `:host{display:inline-flex;height:2rem;font-size:0.875rem;font-weight:400;min-width:2rem}:host .link-button{display:inline-flex;position:relative;width:100%;padding:0 0.25rem 0 0;align-items:center;justify-content:center;background-color:transparent;color:var(--theme-color-primary);cursor:pointer;text-decoration:none}:host .link-button .link{display:block;position:relative;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-decoration:underline;text-underline-offset:0.2rem}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):hover,:host .link-button:not(.disabled):not(:disabled).hover{color:var(--theme-color-dynamic--hover)}:host .link-button:not(.disabled):not(:disabled){cursor:pointer}:host .link-button:not(.disabled):not(:disabled):active,:host .link-button:not(.disabled):not(:disabled).active{color:var(--theme-color-dynamic--active)}:host .link-button.disabled{cursor:default;color:var(--theme-color-weak-text)}:host .link-button a{all:unset}:host :focus-visible{outline:1px solid var(--theme-color-focus-bdr)}`;
+const LinkButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  /**
+   * Disable the link button
+   */
+  disabled = false;
+  /**
+   * Url for the link button
+   */
+  url;
+  /**
+   * Specifies where to open the link
+   *
+   * https://www.w3schools.com/html/html_links.asp
+   */
+  target = "_self";
+  render() {
+    return h(Host, { key: "99e0bfd85187215ee07ccdb1b8480148524b76d7" }, h("a", { key: "81cc5552afe3b2d8dceae94fef7cdd5324fb77a5", title: this.url, tabindex: "0", class: {
+      "link-button": true,
+      disabled: this.disabled
+    }, href: this.disabled ? void 0 : this.url, target: this.target }, h("ix-icon", { key: "1fcde8efc7c175f30d8d39833ef99bf204e6e436", class: "icon", name: iconChevronRightSmall, size: "16", "aria-hidden": "true" }), h("div", { key: "54fc7768b69d4dd4f41d4903b7a305bf580d3ce0", class: {
+      link: true,
+      disabled: this.disabled
+    } }, h("slot", { key: "471e61a08556e26bce42f032620a3c625ae9f702" }))));
+  }
+};
+LinkButton.style = linkButtonCss();
+export {
+  LinkButton as ix_link_button
+};

package/build/static/demo/v2/preview/html/assets/ix-menu-about-item.entry-C293RsvJ.js

@@ -0,0 +1,37 @@
+import { M as Mixin, a as registerInstance, c as createEvent, h, H as Host } from "./global-DjWMysHf.js";
+import { B as BaseTabMixin } from "./tab.mixin-2hU1i4Yk-CgX2Dde7.js";
+const MenuAboutItem = class extends Mixin(BaseTabMixin) {
+  constructor(hostRef) {
+    super();
+    registerInstance(this, hostRef);
+    this.labelChange = createEvent(this, "labelChange", 7);
+  }
+  /**
+   * About Item label
+   */
+  label;
+  /**
+   * Label changed
+   */
+  labelChange;
+  watchLabel(newValue, oldValue) {
+    this.labelChange.emit({
+      name: "ix-menu-about-item",
+      oldLabel: oldValue,
+      newLabel: newValue
+    });
+  }
+  render() {
+    return h(Host, { key: "30ba62aac3a8dff2224f9a207ca9f7fd2223bea8" }, h("ix-tab-panel", { key: "524c2909d0a0bec44a1867e8ff1323c0944e49e8", tabKey: this.tabKey }, h("slot", { key: "aaa24a90ca22a0379437a2971b4dc1c52ee81110" })));
+  }
+  static get watchers() {
+    return {
+      "label": [{
+        "watchLabel": 0
+      }]
+    };
+  }
+};
+export {
+  MenuAboutItem as ix_menu_about_item
+};

package/build/static/demo/v2/preview/html/assets/ix-menu-about-news.entry-DdbQWbF8.js

@@ -0,0 +1,65 @@
+import { M as Mixin, a as registerInstance, c as createEvent, g as getElement, h, H as Host } from "./global-DjWMysHf.js";
+import { r as iconClose, O as iconShout } from "./index-Cl7fhG1I-C77BCFLW.js";
+import { D as DefaultMixins } from "./component-Chfbghog-DFMCI9TH.js";
+import "./focus-utilities-DnaItyVQ-Degzwldb.js";
+import "./shadow-dom-BIe8Nw9M-DxOF84uP.js";
+const menuAboutNewsCss = () => `:host{--margin:0.5rem;display:block;position:fixed;width:20rem;height:auto;background-color:var(--theme-color-2);border-radius:0.25rem;padding:1rem;left:3.4rem;z-index:10000;transition:left var(--theme-default-time);margin-inline-start:var(--margin) !important;box-shadow:var(--theme-box-shadow-level-4)}: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{}:host ::-webkit-scrollbar{width:0.5rem;height:0.5rem}:host{}: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{}:host ::-webkit-scrollbar-thumb{border-radius:5px;background:var(--theme-scrollbar-thumb--background)}:host{}:host ::-webkit-scrollbar-thumb:hover{background:var(--theme-scrollbar-thumb--background--hover)}:host ::-webkit-scrollbar-corner{display:none}:host .banner-container{position:absolute;top:0.0625rem;left:1rem}:host .banner-container svg{position:absolute;height:3.625rem;width:3rem}:host .banner-container svg polygon{fill:var(--theme-color-primary)}:host .banner-container ix-icon{margin:0.5rem;position:absolute;z-index:1}:host .cui-popover-news-header{margin-bottom:2.5rem;margin-inline-start:4rem;margin-block-start:-0.25rem}:host .popover-body{color:var(--theme-color-std-text)}:host .cui-popover-news-footer{display:flex;justify-content:flex-end;margin-top:1rem}:host ix-icon-button{top:0.5rem;right:0.5rem;position:absolute}:host #arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--theme-color-2);transform:translateX(calc(var(--margin) * -1 - 0.8rem)) rotateZ(45deg)}:host(.expanded){left:calc(3.4rem + 12.7rem)}:host(.show){display:none}@media only screen and (max-width: 48em){:host{display:flex;flex-direction:column;max-height:calc(100vh - 4.75rem);width:calc(100% - 2rem);max-width:30rem;transform:translateX(calc(1rem - 50%));left:calc(50% - 1rem) !important;bottom:1rem !important;margin-inline:0 !important;z-index:calc(var(--theme-z-index-sticky) - 1)}:host .slot-container{overflow-y:auto}:host #arrow{display:none}}`;
+const MenuAboutNews = class extends Mixin(...DefaultMixins) {
+  constructor(hostRef) {
+    super();
+    registerInstance(this, hostRef);
+    this.showMore = createEvent(this, "showMore", 7);
+    this.closePopover = createEvent(this, "closePopover", 7);
+  }
+  get hostElement() {
+    return getElement(this);
+  }
+  /**
+   * Show about news
+   */
+  show = false;
+  /**
+   * Title of the about news
+   */
+  label;
+  /**
+   * i18n label for 'Show more' button
+   */
+  i18nShowMore = "Show more";
+  /**
+   * Subtitle of the about news
+   */
+  aboutItemLabel;
+  /**
+   * Defines which tab should be active, used when the about news is used in combination with ix-menu-about
+   *
+   * @since 5.0.0
+   */
+  activeAboutTabKey;
+  /**
+   * Show More button is pressed
+   */
+  showMore;
+  /**
+   * Popover closed
+   */
+  closePopover;
+  /** @internal */
+  expanded = false;
+  render() {
+    return h(Host, { key: "c284e2ac608e4e039c2df0ee62c2c3befc241391", class: {
+      expanded: this.expanded,
+      show: !this.show
+    } }, h("div", { key: "e4a567021e29740a32199328c1a18024265101a6", class: "banner-container" }, h("ix-icon", { key: "dc9d56156ee0010d675315a3afd03f17f45a9b6f", color: "color-inv-contrast-text", name: iconShout, size: "32" }), h("svg", { key: "95f83ef229d360cc1d65641bcd0f7f377b1f22f7", viewBox: "0 0 48 56", xmlns: "http://www.w3.org/2000/svg" }, h("polygon", { key: "4291b6af8d4b43a13e2e4aa50b9a180ee5903202", points: "0 0 48 0 48 56 24 48 0 56" }))), h("div", { key: "adb50ab8101ff53415ea4fee45e7bc182c9aad00", class: "cui-popover-news-header" }, h("ix-typography", { key: "7b7bdb1153222bbee432ed46c562ac1a6a8d7d3f", format: "label", bold: true }, this.label)), h("ix-icon-button", { key: "6cdc8cf741a65498937db07c1f8d767d11a62f04", size: "24", icon: iconClose, iconColor: "color-soft-text", variant: "tertiary", onClick: () => {
+      this.show = false;
+      this.closePopover.emit();
+    } }), h("div", { key: "9c374a87ff85b7660820b9b57abe8e579190071b", class: "slot-container" }, h("slot", { key: "bd4a92948a87e0e2fb2a0617bedb065147ae3d57" })), this.activeAboutTabKey ? h("div", { class: "cui-popover-news-footer" }, h("ix-button", { variant: "primary", onClick: (event) => {
+      this.show = false;
+      this.showMore.emit(event);
+    } }, this.i18nShowMore)) : null, h("div", { key: "5f13c58d47a92e7acd3212ae7d48cc78ab4a5240", id: "arrow" }));
+  }
+};
+MenuAboutNews.style = menuAboutNewsCss();
+export {
+  MenuAboutNews as ix_menu_about_news
+};