Merge remote-tracking branch 'origin/main' into release-3.0.0

siemens · Dec 6, 2024 · 5e7ba49 · 5e7ba49
2 parents 84f67bc + 77f76fe
commit 5e7ba49
Show file tree

Hide file tree

Showing 173 changed files with 941 additions and 976 deletions.
diff --git a/.changeset/lazy-birds-dream.md b/.changeset/lazy-birds-dream.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+Fix undefined access of **ix-select** during rendering of label
diff --git a/.changeset/tender-hounds-change.md b/.changeset/tender-hounds-change.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+Enable the possibility to use autofocus within **ix-modal**
diff --git a/packages/angular-test-app/src/preview-examples/modal-by-instance-content.ts b/packages/angular-test-app/src/preview-examples/modal-by-instance-content.ts
@@ -25,7 +25,11 @@ import { IxActiveModal } from '@siemens/ix-angular';
       >
         Cancel
       </ix-button>
-      <ix-button class="close-modal" (click)="activeModal.close('okay')">
+      <ix-button
+        autofocus
+        class="close-modal"
+        (click)="activeModal.close('okay')"
+      >
         OK
       </ix-button>
     </ix-modal-footer>

diff --git a/packages/angular/src/control-value-accessors/text-value-accessor.ts b/packages/angular/src/control-value-accessors/text-value-accessor.ts
@@ -11,7 +11,7 @@ import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ValueAccessor } from './value-accessor';
 
 @Directive({
-  selector: 'ix-input,ix-number-input,ix-textarea-field',
+  selector: 'ix-input,ix-number-input,ix-textarea',
   providers: [
     {
       provide: NG_VALUE_ACCESSOR,

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1192,7 +1192,9 @@ export namespace Components {
         "value": string;
     }
     interface IxFieldLabel {
-        "controlRef"?: MakeRef<HTMLElement>;
+        "controlRef"?: | MakeRef<HTMLElement>
+    | MakeRef<HTMLInputElement>
+    | MakeRef<HTMLTextAreaElement>;
         /**
           * The id of the form element that the label is associated with
          */
@@ -1207,7 +1209,9 @@ export namespace Components {
         /**
           * The control element that the label is associated with
          */
-        "controlRef"?: MakeRef<HTMLElement>;
+        "controlRef"?: | MakeRef<HTMLElement>
+    | MakeRef<HTMLInputElement>
+    | MakeRef<HTMLTextAreaElement>;
         /**
           * Show text below the field component
          */
@@ -6141,7 +6145,9 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface IxFieldLabel {
-        "controlRef"?: MakeRef<HTMLElement>;
+        "controlRef"?: | MakeRef<HTMLElement>
+    | MakeRef<HTMLInputElement>
+    | MakeRef<HTMLTextAreaElement>;
         /**
           * The id of the form element that the label is associated with
          */
@@ -6156,7 +6162,9 @@ declare namespace LocalJSX {
         /**
           * The control element that the label is associated with
          */
-        "controlRef"?: MakeRef<HTMLElement>;
+        "controlRef"?: | MakeRef<HTMLElement>
+    | MakeRef<HTMLInputElement>
+    | MakeRef<HTMLTextAreaElement>;
         /**
           * Show text below the field component
          */

diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
@@ -100,6 +100,10 @@ export class Button {
     }
   }
 
+  setFocus() {
+    this.hostElement.shadowRoot!.querySelector('button')?.focus();
+  }
+
   render() {
     const baseButtonProps: BaseButtonProps = {
       variant: this.variant,
@@ -115,13 +119,16 @@ export class Button {
       onClick: () => this.dispatchFormEvents(),
       type: this.type,
       alignment: this.alignment,
+      tabIndex: this.hostElement.tabIndex,
     };
 
     return (
       <Host
+        tabindex={this.disabled ? -1 : 0}
         class={{
           disabled: this.disabled || this.loading,
         }}
+        onFocus={() => this.setFocus()}
       >
         <BaseButton {...baseButtonProps}>
           <slot></slot>

diff --git a/packages/core/src/components/date-input/date-input.tsx b/packages/core/src/components/date-input/date-input.tsx
@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { iconCalendar } from '@siemens/ix-icons/icons';
 import {
   AttachInternals,
   Component,
@@ -22,17 +23,16 @@ import {
 } from '@stencil/core';
 import { DateTime } from 'luxon';
 import { dropdownController } from '../dropdown/dropdown-controller';
-import { MakeRef, makeRef } from '../utils/make-ref';
+import { SlotEnd, SlotStart } from '../input/input.fc';
+import { adjustPaddingForStartAndEnd } from '../input/input.util';
 import {
   ClassMutationObserver,
   HookValidationLifecycle,
   IxInputFieldComponent,
   ValidationResults,
   createClassMutationObserver,
 } from '../utils/input';
-import { SlotEnd, SlotStart } from '../input/input.fc';
-import { adjustPaddingForStartAndEnd } from '../input/input.util';
-import { iconCalendar } from '@siemens/ix-icons/icons';
+import { makeRef } from '../utils/make-ref';
 
 export type DateInputValidityState = {
   patternMismatch: boolean;
@@ -435,7 +435,7 @@ export class DateInput implements IxInputFieldComponent<string> {
           validText={this.validText}
           showTextAsTooltip={this.showTextAsTooltip}
           required={this.required}
-          controlRef={this.inputElementRef as unknown as MakeRef<HTMLElement>}
+          controlRef={this.inputElementRef}
         >
           {this.renderInput()}
         </ix-field-wrapper>

diff --git a/packages/core/src/components/field-label/field-label.tsx b/packages/core/src/components/field-label/field-label.tsx
@@ -7,15 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, Host, Prop, h, Element, Watch } from '@stencil/core';
-import { IxComponent } from '../utils/internal';
+import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+import { A11yAttributes, a11yHostAttributes } from '../utils/a11y';
 import {
   ClassMutationObserver,
   createClassMutationObserver,
   HTMLIxFormComponentElement,
   isIxInputFieldComponent,
 } from '../utils/input';
-import { A11yAttributes, a11yHostAttributes } from '../utils/a11y';
+import { IxComponent } from '../utils/internal';
 import { MakeRef, makeRef } from '../utils/make-ref';
 
 @Component({
@@ -37,7 +37,10 @@ export class FormFieldLabel implements IxComponent {
   @Prop({ reflect: true }) htmlFor?: string;
 
   /** @internal */
-  @Prop() controlRef?: MakeRef<HTMLElement>;
+  @Prop() controlRef?:
+    | MakeRef<HTMLElement>
+    | MakeRef<HTMLInputElement>
+    | MakeRef<HTMLTextAreaElement>;
 
   /** @internal */
   @Prop({ mutable: true }) isInvalid: boolean = false;

diff --git a/packages/core/src/components/field-wrapper/field-wrapper.tsx b/packages/core/src/components/field-wrapper/field-wrapper.tsx
@@ -88,7 +88,10 @@ export class FieldWrapper implements FieldWrapperInterface {
   /**
    * The control element that the label is associated with
    */
-  @Prop() controlRef?: MakeRef<HTMLElement>;
+  @Prop() controlRef?:
+    | MakeRef<HTMLElement>
+    | MakeRef<HTMLInputElement>
+    | MakeRef<HTMLTextAreaElement>;
 
   private readonly slotRef = makeRef<HTMLDivElement>();
 

diff --git a/packages/core/src/components/input/input.fc.tsx b/packages/core/src/components/input/input.fc.tsx
@@ -45,13 +45,10 @@ export function TextareaElement(props: {
       required={props.required}
       value={props.value}
       placeholder={props.placeholder}
-      onChange={(changeEvent) => {
-        const target = changeEvent.target as HTMLInputElement;
-        props.valueChange(target.value);
-      }}
       onInput={(inputEvent) => {
         const target = inputEvent.target as HTMLInputElement;
         props.updateFormInternalValue(target.value);
+        props.valueChange(target.value);
       }}
       onBlur={() => props.onBlur()}
       style={{
@@ -105,13 +102,10 @@ export function InputElement(props: {
       value={props.value}
       placeholder={props.placeholder}
       onKeyPress={(event) => props.onKeyPress(event)}
-      onChange={(changeEvent) => {
-        const target = changeEvent.target as HTMLInputElement;
-        props.valueChange(target.value);
-      }}
       onInput={(inputEvent) => {
         const target = inputEvent.target as HTMLInputElement;
         props.updateFormInternalValue(target.value);
+        props.valueChange(target.value);
       }}
       onBlur={() => props.onBlur()}
       {...props.ariaAttributes}

diff --git a/packages/core/src/components/input/input.tsx b/packages/core/src/components/input/input.tsx
@@ -27,7 +27,7 @@ import {
   IxInputFieldComponent,
   ValidationResults,
 } from '../utils/input';
-import { MakeRef, makeRef } from '../utils/make-ref';
+import { makeRef } from '../utils/make-ref';
 import { InputElement, SlotEnd, SlotStart } from './input.fc';
 import {
   adjustPaddingForStartAndEnd,
@@ -255,7 +255,7 @@ export class Input implements IxInputFieldComponent<string> {
           isValid={this.isValid}
           isInfo={this.isInfo}
           isWarning={this.isWarning}
-          controlRef={this.inputRef as unknown as MakeRef<HTMLElement>}
+          controlRef={this.inputRef}
         >
           <div class="input-wrapper">
             <SlotStart

diff --git a/packages/core/src/components/input/number-input.tsx b/packages/core/src/components/input/number-input.tsx
@@ -25,7 +25,7 @@ import {
   IxInputFieldComponent,
   ValidationResults,
 } from '../utils/input';
-import { MakeRef, makeRef } from '../utils/make-ref';
+import { makeRef } from '../utils/make-ref';
 import { InputElement, SlotEnd, SlotStart } from './input.fc';
 import {
   adjustPaddingForStartAndEnd,
@@ -246,7 +246,7 @@ export class NumberInput implements IxInputFieldComponent<number> {
           isValid={this.isValid}
           isInfo={this.isInfo}
           isWarning={this.isWarning}
-          controlRef={this.inputRef as unknown as MakeRef<HTMLElement>}
+          controlRef={this.inputRef}
         >
           <div
             class={{

diff --git a/packages/core/src/components/input/textarea.tsx b/packages/core/src/components/input/textarea.tsx
@@ -24,7 +24,7 @@ import {
   IxInputFieldComponent,
   ValidationResults,
 } from '../utils/input';
-import { MakeRef, makeRef } from '../utils/make-ref';
+import { makeRef } from '../utils/make-ref';
 import { TextareaElement } from './input.fc';
 import { mapValidationResult, onInputBlur } from './input.util';
 
@@ -235,7 +235,7 @@ export class Textarea implements IxInputFieldComponent<string> {
           isValid={this.isValid}
           isInfo={this.isInfo}
           isWarning={this.isWarning}
-          controlRef={this.textAreaRef as unknown as MakeRef<HTMLElement>}
+          controlRef={this.textAreaRef}
         >
           {!!this.maxLength && this.maxLength > 0 && (
             <ix-typography