@porsche-design-system/components-vue 3.29.0-rc.2 → 3.29.0-rc.4

package/esm/lib/components/InputNumberWrapper.vue.d.ts

@@ -1,11 +1,11 @@
-import type { InputNumberAutoComplete, BreakpointCustomizable, InputNumberState, Theme } from '../types';
+import type { BreakpointCustomizable, InputNumberState, Theme } from '../types';
 type PInputNumberProps = {
     /**
-     * Specifies whether the input can be autofilled by the browser
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='postal-code').
      */
-    autoComplete?: InputNumberAutoComplete;
+    autoComplete?: string;
     /**
-     * Displays as a compact version.
+     * A boolean value that, if present, renders the input field as a compact version.
      */
     compact?: boolean;
     /**
@@ -13,23 +13,23 @@ type PInputNumberProps = {
      */
     controls?: boolean;
     /**
-     * The description text.
+     * Supplementary text providing more context or explanation for the input.
      */
     description?: string;
     /**
-     * Marks the number input as disabled.
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
      */
     disabled?: boolean;
     /**
-     * The id of a form element the number input should be associated with.
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
      */
     form?: string;
     /**
-     * Show or hide label and description text. For better accessibility, it is recommended to show the label.
+     * Controls the visibility of the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The label text.
+     * Text content for a user-facing label.
      */
     label?: string;
     /**
@@ -41,7 +41,7 @@ type PInputNumberProps = {
      */
     max?: number;
     /**
-     * The message styled depending on validation state.
+     * Dynamic feedback text for validation or status.
      */
     message?: string;
     /**
@@ -49,23 +49,23 @@ type PInputNumberProps = {
      */
     min?: number;
     /**
-     * The name of the number input.
+     * The name of the input field, used when submitting the form data.
      */
     name: string;
     /**
-     * The placeholder text.
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Enter a number'). This text is displayed when the input field is empty.
      */
     placeholder?: string;
     /**
-     * Specifies whether the number input should be read-only.
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
      */
     readOnly?: boolean;
     /**
-     * Marks the number input as required.
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
      */
     required?: boolean;
     /**
-     * The validation state.
+     * Indicates the validation or overall status of the input component.
      */
     state?: InputNumberState;
     /**
@@ -73,7 +73,7 @@ type PInputNumberProps = {
      */
     step?: number;
     /**
-     * Adapts the color depending on the theme.
+     * Controls the visual appearance of the component.
      */
     theme?: Theme;
     /**
@@ -105,9 +105,9 @@ declare const __VLS_component: import("vue").DefineComponent<PInputNumberProps,
     loading: boolean;
     value: string;
     message: string;
-    controls: boolean;
-    placeholder: string;
     readOnly: boolean;
+    placeholder: string;
+    controls: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/esm/lib/components/InputPasswordWrapper.vue.d.ts

@@ -1,31 +1,31 @@
-import type { InputPasswordAutoComplete, BreakpointCustomizable, InputPasswordState, Theme } from '../types';
+import type { BreakpointCustomizable, InputPasswordState, Theme } from '../types';
 type PInputPasswordProps = {
     /**
-     * Specifies whether the input can be autofilled by the browser
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='current-password', autocomplete='new-password').
      */
-    autoComplete?: InputPasswordAutoComplete;
+    autoComplete?: string;
     /**
-     * Displays as a compact version.
+     * A boolean value that, if present, renders the input field as a compact version.
      */
     compact?: boolean;
     /**
-     * The description text.
+     * Supplementary text providing more context or explanation for the input.
      */
     description?: string;
     /**
-     * Marks the password input as disabled.
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
      */
     disabled?: boolean;
     /**
-     * The id of a form element the password input should be associated with.
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
      */
     form?: string;
     /**
-     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     * Controls the visibility of the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The label text.
+     * Text content for a user-facing label.
      */
     label?: string;
     /**
@@ -33,39 +33,39 @@ type PInputPasswordProps = {
      */
     loading?: boolean;
     /**
-     * The max length of the password input.
+     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
      */
     maxLength?: number;
     /**
-     * The message styled depending on validation state.
+     * Dynamic feedback text for validation or status.
      */
     message?: string;
     /**
-     * The min length of the password input.
+     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
      */
     minLength?: number;
     /**
-     * The name of the password input.
+     * The name of the input field, used when submitting the form data.
      */
     name: string;
     /**
-     * The placeholder text.
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Enter your password'). This text is displayed when the input field is empty.
      */
     placeholder?: string;
     /**
-     * Specifies whether the password input should be read-only.
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
      */
     readOnly?: boolean;
     /**
-     * Marks the password input as required.
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
      */
     required?: boolean;
     /**
-     * The validation state.
+     * Indicates the validation or overall status of the input component.
      */
     state?: InputPasswordState;
     /**
-     * Adapts the color depending on the theme.
+     * Controls the visual appearance of the component.
      */
     theme?: Theme;
     /**
@@ -101,8 +101,8 @@ declare const __VLS_component: import("vue").DefineComponent<PInputPasswordProps
     loading: boolean;
     value: string;
     message: string;
-    placeholder: string;
     readOnly: boolean;
+    placeholder: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/esm/lib/components/InputSearchWrapper.vue.d.ts

@@ -1,31 +1,31 @@
-import type { InputSearchAutoComplete, BreakpointCustomizable, InputSearchState, Theme } from '../types';
+import type { BreakpointCustomizable, InputSearchState, Theme } from '../types';
 type PInputSearchProps = {
     /**
-     * Specifies whether the input can be autofilled by the browser
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='on').
      */
-    autoComplete?: InputSearchAutoComplete;
+    autoComplete?: string;
     /**
      * Show clear input value button
      */
     clear?: boolean;
     /**
-     * Displays as a compact version.
+     * A boolean value that, if present, renders the input field as a compact version.
      */
     compact?: boolean;
     /**
-     * The description text.
+     * Supplementary text providing more context or explanation for the input.
      */
     description?: string;
     /**
-     * Marks the search input as disabled.
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
      */
     disabled?: boolean;
     /**
-     * The id of a form element the search input should be associated with.
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
      */
     form?: string;
     /**
-     * Show or hide label and description text. For better accessibility it is recommended to show the label.
+     * Controls the visibility of the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
@@ -33,7 +33,7 @@ type PInputSearchProps = {
      */
     indicator?: boolean;
     /**
-     * The label text.
+     * Text content for a user-facing label.
      */
     label?: string;
     /**
@@ -41,31 +41,31 @@ type PInputSearchProps = {
      */
     loading?: boolean;
     /**
-     * The message styled depending on validation state.
+     * Dynamic feedback text for validation or status.
      */
     message?: string;
     /**
-     * The name of the search input.
+     * The name of the input field, used when submitting the form data.
      */
     name: string;
     /**
-     * The placeholder text.
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Search...'). This text is displayed when the input field is empty.
      */
     placeholder?: string;
     /**
-     * Specifies whether the search input should be read-only.
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
      */
     readOnly?: boolean;
     /**
-     * Marks the search input as required.
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
      */
     required?: boolean;
     /**
-     * The validation state.
+     * Indicates the validation or overall status of the input component.
      */
     state?: InputSearchState;
     /**
-     * Adapts the color depending on the theme.
+     * Controls the visual appearance of the component.
      */
     theme?: Theme;
     /**
@@ -96,10 +96,10 @@ declare const __VLS_component: import("vue").DefineComponent<PInputSearchProps,
     loading: boolean;
     value: string;
     message: string;
-    placeholder: string;
     readOnly: boolean;
-    clear: boolean;
     indicator: boolean;
+    placeholder: string;
+    clear: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/esm/lib/components/InputTelWrapper.vue.d.ts

@@ -0,0 +1,117 @@
+import type { BreakpointCustomizable, InputTelState, Theme } from '../types';
+type PInputTelProps = {
+    /**
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='tel').
+     */
+    autoComplete?: string;
+    /**
+     * A boolean value that, if present, renders the input field as a compact version.
+     */
+    compact?: boolean;
+    /**
+     * Supplementary text providing more context or explanation for the input.
+     */
+    description?: string;
+    /**
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
+     */
+    form?: string;
+    /**
+     * Controls the visibility of the label.
+     */
+    hideLabel?: BreakpointCustomizable<boolean>;
+    /**
+     * Controls the visibility of the phone icon.
+     */
+    indicator?: boolean;
+    /**
+     * Text content for a user-facing label.
+     */
+    label?: string;
+    /**
+     * @experimental Shows a loading indicator.
+     */
+    loading?: boolean;
+    /**
+     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
+     */
+    maxLength?: number;
+    /**
+     * Dynamic feedback text for validation or status.
+     */
+    message?: string;
+    /**
+     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
+     */
+    minLength?: number;
+    /**
+     * The name of the input field, used when submitting the form data.
+     */
+    name: string;
+    /**
+     * Specifies a regular expression that the input's value must match for the value to pass constraint validation. This allows for more specific tel validation rules than the browser's default. If provided, it overrides the browser's default tel validation.
+     */
+    pattern?: string;
+    /**
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='(123) 456-7890')
+     */
+    placeholder?: string;
+    /**
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
+     */
+    readOnly?: boolean;
+    /**
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
+     */
+    required?: boolean;
+    /**
+     * Indicates the validation or overall status of the input component.
+     */
+    state?: InputTelState;
+    /**
+     * Controls the visual appearance of the component.
+     */
+    theme?: Theme;
+    /**
+     * The tel input value.
+     */
+    value?: string;
+};
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<PInputTelProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    blur: (value: Event) => any;
+    change: (value: Event) => any;
+    input: (value: InputEvent) => any;
+}, string, import("vue").PublicProps, Readonly<PInputTelProps> & Readonly<{
+    onBlur?: ((value: Event) => any) | undefined;
+    onChange?: ((value: Event) => any) | undefined;
+    onInput?: ((value: InputEvent) => any) | undefined;
+}>, {
+    label: string;
+    compact: boolean;
+    description: string;
+    state: InputTelState;
+    required: boolean;
+    disabled: boolean;
+    hideLabel: BreakpointCustomizable<boolean>;
+    loading: boolean;
+    value: string;
+    message: string;
+    readOnly: boolean;
+    indicator: boolean;
+    placeholder: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/esm/lib/components/InputTelWrapper.vue.mjs

@@ -0,0 +1,47 @@
+import { defineComponent as u, ref as m, inject as c, onMounted as i, onUpdated as h, watch as y, openBlock as B, createBlock as g, resolveDynamicComponent as C, unref as _, withCtx as b, renderSlot as v } from "vue";
+import { usePrefix as x, themeInjectionKey as L, addEventListenerToElementRef as o, syncProperties as p } from "../../utils.mjs";
+const P = /* @__PURE__ */ u({
+  __name: "InputTelWrapper",
+  props: {
+    autoComplete: {},
+    compact: { type: Boolean, default: !1 },
+    description: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    form: {},
+    hideLabel: { default: !1 },
+    indicator: { type: Boolean, default: !1 },
+    label: { default: "" },
+    loading: { type: Boolean, default: !1 },
+    maxLength: {},
+    message: { default: "" },
+    minLength: {},
+    name: {},
+    pattern: {},
+    placeholder: { default: "" },
+    readOnly: { type: Boolean, default: !1 },
+    required: { type: Boolean, default: !1 },
+    state: { default: "none" },
+    theme: {},
+    value: { default: "" }
+  },
+  emits: ["blur", "change", "input"],
+  setup(r, { emit: s }) {
+    const d = x("p-input-tel"), t = r, e = m(), n = s, l = c(L), f = () => p(e, { ...t, theme: t.theme || l.value });
+    return i(() => {
+      f(), o(e, "blur", n), o(e, "change", n), o(e, "input", n);
+    }), h(f), y(l, (a) => {
+      p(e, { theme: t.theme || a });
+    }), (a, R) => (B(), g(C(_(d)), {
+      ref_key: "pdsComponentRef",
+      ref: e
+    }, {
+      default: b(() => [
+        v(a.$slots, "default")
+      ]),
+      _: 3
+    }, 512));
+  }
+});
+export {
+  P as default
+};

package/esm/lib/components/InputTelWrapper.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./InputTelWrapper.vue.mjs";
+export {
+  f as default
+};

package/esm/lib/components/InputTextWrapper.vue.d.ts

@@ -1,11 +1,11 @@
-import type { InputTextAutoComplete, BreakpointCustomizable, InputTextState, Theme } from '../types';
+import type { BreakpointCustomizable, InputTextState, Theme } from '../types';
 type PInputTextProps = {
     /**
-     * Specifies whether the input can be autofilled by the browser
+     * Provides a hint to the browser about what type of data the field expects, which can assist with autofill features (e.g., autocomplete='name').
      */
-    autoComplete?: InputTextAutoComplete;
+    autoComplete?: string;
     /**
-     * Displays as a compact version.
+     * A boolean value that, if present, renders the input field as a compact version.
      */
     compact?: boolean;
     /**
@@ -13,23 +13,23 @@ type PInputTextProps = {
      */
     counter?: boolean;
     /**
-     * The description text.
+     * Supplementary text providing more context or explanation for the input.
      */
     description?: string;
     /**
-     * Marks the text input as disabled.
+     * A boolean value that, if present, makes the input field unusable and unclickable. The value will not be submitted with the form.
      */
     disabled?: boolean;
     /**
-     * The id of a form element the text input should be associated with.
+     * Specifies the id of the <form> element that the input belongs to (useful if the input is not a direct descendant of the form).
      */
     form?: string;
     /**
-     * Show or hide label and description text. For better accessibility, it is recommended to show the label.
+     * Controls the visibility of the label.
      */
     hideLabel?: BreakpointCustomizable<boolean>;
     /**
-     * The label text.
+     * Text content for a user-facing label.
      */
     label?: string;
     /**
@@ -37,31 +37,31 @@ type PInputTextProps = {
      */
     loading?: boolean;
     /**
-     * The max length of the text input.
+     * A non-negative integer specifying the maximum number of characters the user can enter into the input.
      */
     maxLength?: number;
     /**
-     * The message styled depending on validation state.
+     * Dynamic feedback text for validation or status.
      */
     message?: string;
     /**
-     * The min length of the text input.
+     * A non-negative integer specifying the minimum number of characters required for the input's value to be considered valid.
      */
     minLength?: number;
     /**
-     * The name of the text input.
+     * The name of the input field, used when submitting the form data.
      */
     name: string;
     /**
-     * The placeholder text.
+     * A string that provides a brief hint to the user about what kind of information is expected in the field (e.g., placeholder='Enter your full name'). This text is displayed when the input field is empty.
      */
     placeholder?: string;
     /**
-     * Specifies whether the text input should be read-only.
+     * A boolean value that, if present, makes the input field uneditable by the user, but its value will still be submitted with the form.
      */
     readOnly?: boolean;
     /**
-     * Marks the text input as required.
+     * A boolean value that, if present, indicates that the input field must be filled out before the form can be submitted.
      */
     required?: boolean;
     /**
@@ -69,11 +69,11 @@ type PInputTextProps = {
      */
     spellCheck?: boolean;
     /**
-     * The validation state.
+     * Indicates the validation or overall status of the input component.
      */
     state?: InputTextState;
     /**
-     * Adapts the color depending on the theme.
+     * Controls the visual appearance of the component.
      */
     theme?: Theme;
     /**
@@ -104,8 +104,8 @@ declare const __VLS_component: import("vue").DefineComponent<PInputTextProps, vo
     loading: boolean;
     value: string;
     message: string;
-    placeholder: string;
     readOnly: boolean;
+    placeholder: string;
     counter: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;