@api-client/ui 0.0.4 → 0.0.7

package/dist/ui/input/Input.js

@@ -28,14 +28,10 @@ export default class Input extends UiElement {
     static get formAssociated() {
         return true;
     }
-    #_internals = this.attachInternals();
+    #_internals;
     get form() {
         return this.#_internals && this.#_internals.form;
     }
-    /**
-     * @attribute
-     */
-    type;
     /**
      * Disables the input.
      * @attribute
@@ -58,18 +54,6 @@ export default class Input extends UiElement {
             this.blur();
         }
     }
-    /**
-     * The name of the form control, submitted as a pair with the control's value as part of the form data.
-     * @attribute
-     */
-    name;
-    /**
-     * When a form is submitted, only checkboxes which are currently checked are submitted to the server,
-     * and the reported value is the `value` of the value attribute.
-     * If the `value` is not otherwise specified, it is the string `on` by default.
-     * @attribute
-     */
-    value = '';
     #_required;
     /**
      * Set to true to mark the input element as required.
@@ -87,167 +71,6 @@ export default class Input extends UiElement {
         this.requestUpdate('required', 'old');
         this._updateFormValue();
     }
-    /**
-     * While the element can be easily styled with the `:valid` and `:invalid` pseudo classes
-     * it also exposes an attribute to style the element as invalid. This attribute changes
-     * when the element validation is performed.
-     *
-     * Calling `reportValidity()` will automatically update `invalid`.
-     * @attribute
-     */
-    invalid;
-    /**
-     * The error message that replaces supporting text when `error` is true. If
-     * `errorText` is an empty string, then the supporting text will continue to
-     * show.
-     *
-     * Calling `reportValidity()` will automatically update `errorText` to the
-     * native `validationMessage`.
-     * @attribute
-     */
-    invalidText = '';
-    /**
-     * The label to be rendered with the input.
-     * @attribute
-     */
-    label;
-    /**
-     * Whether or not the text field has a leading icon. Used for SSR.
-     * @attribute
-     */
-    hasPrefix = false;
-    /**
-     * Whether or not the text field has a trailing icon. Used for SSR.
-     * @attribute
-     */
-    hasSuffix = false;
-    /**
-     * Conveys additional information below the text field, such as how it should
-     * be used.
-     * @attribute
-     */
-    supportingText = '';
-    /**
-     * Override the input text CSS `direction`. Useful for RTL languages that use
-     * LTR notation for fractions.
-     * @attribute
-     */
-    textDirection = '';
-    /**
-     * When set the label of the input disappears after input rather than float over the input.
-     * @attribute
-     */
-    noFloating;
-    /**
-     * Defines the greatest value in the range of permitted values.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
-     * @attribute
-     */
-    max = '';
-    /**
-     * The maximum number of characters a user can enter into the text field. Set
-     * to -1 for none.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
-     * @attribute
-     */
-    maxLength = -1;
-    /**
-     * Defines the most negative value in the range of permitted values.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
-     * @attribute
-     */
-    min = '';
-    /**
-     * The minimum number of characters a user can enter into the text field. Set
-     * to -1 for none.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
-     * @attribute
-     */
-    minLength = -1;
-    /**
-     * A regular expression that the text field's value must match to pass
-     * constraint validation.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
-     * @attribute
-     */
-    pattern = '';
-    /**
-     * @attribute
-     */
-    placeholder = '';
-    /**
-     * Indicates whether or not a user should be able to edit the text field's
-     * value.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
-     *
-     * @attribute
-     */
-    readOnly = false;
-    /**
-     * Bind the `<input>`'s `autocomplete` property.
-     * @default off
-     * @attribute
-     */
-    autocomplete = 'off';
-    /**
-     * Binds this to the `<input>`'s `inputMode` property.
-     * @attribute
-     */
-    inputMode = '';
-    /**
-     * Binds this to the `<input>`'s `autocapitalize` property.
-     *
-     * Possible values are:
-     *
-     * - `off` or `none`: No autocapitalization is applied (all letters default to lowercase)
-     * - `on` or `sentences`: The first letter of each sentence defaults to a capital letter;
-     *  all other letters default to lowercase
-     * - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase
-     * - `characters`: All letters should default to uppercase
-     *
-     * @default off
-     * @attr
-     */
-    autocapitalize = 'off';
-    /**
-     * Binds this to the `<input>`'s `autocorrect` property.
-     * @default off
-     * @attribute
-     */
-    autocorrect = 'off';
-    /**
-     * Binds this to the `<input>`'s `results` property,
-     * used with type=search.
-     *
-     * The maximum number of items that should be displayed in the
-     * drop-down list of previous search queries. Safari only.
-     * @attribute
-     */
-    results;
-    /**
-     * Binds this to the `<input>`'s `accept` property,
-     * used with type=file.
-     * @attribute
-     */
-    accept;
-    /**
-     * Binds this to the`<input>`'s `multiple` property,
-     * used with type=file.
-     * @attribute
-     */
-    multiple;
-    /**
-     * Binds this to the `<input>`'s `size` property.
-     * @attribute
-     */
-    size;
-    pendingSetters = new Map();
     setNativeValue(key, value) {
         const { input } = this;
         if (input) {
@@ -292,14 +115,6 @@ export default class Input extends UiElement {
     set selectionStart(value) {
         this.setNativeValue('selectionStart', value);
     }
-    /**
-     * Returns or sets the element's step attribute, which works with min and max
-     * to limit the increments at which a numeric or date-time value can be set.
-     *
-     * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
-     * @attribute
-     */
-    step = '';
     /**
      * Returns the native validation error message that would be displayed upon
      * calling `reportValidity()`.
@@ -345,63 +160,183 @@ export default class Input extends UiElement {
     get willValidate() {
         return this.getNativeValue('willValidate') ?? false;
     }
-    /**
-     * Returns true when the text field has been interacted with. Native
-     * validation errors only display in response to user interactions.
-     */
-    dirty = false;
-    focused = false;
-    input;
-    prefixes;
-    suffixes;
-    /**
-     * The validation message displayed from a native error via
-     * `reportValidity()`.
-     */
-    nativeErrorText = '';
-    /**
-     * Whether or not a native error has been reported via `reportValidity()`.
-     */
-    nativeError = false;
-    counterId = 'counter';
-    supportingTextId = 'support';
-    labelId = 'support';
-    ariaAutoComplete = null;
-    ariaControls = null;
-    ariaActiveDescendant = null;
-    ariaExpanded = null;
-    /**
-     * The `aria-label` of the text field's input.
-     */
-    ariaLabel;
-    /**
-     * The `aria-labelledby` of the text field's input.
-     *
-     * Note: currently only usable in SSR light DOM.
-     */
-    ariaLabelledBy;
-    dataRole = null;
-    /**
-     * When set to true, the error text's `role="alert"` will be removed, then
-     * re-added after an animation frame. This will re-announce an error message
-     * to screen readers.
-     */
-    refreshErrorAlert = false;
     /**
      * When set is shows password in the `password` input.
      * This is private so the password can be viewed only through user interaction.
      */
-    #showPassword = false;
-    removingTabindex = false;
+    #showPassword;
     get files() {
         return this.getNativeValue('files');
     }
-    /**
-     * When set it adds a `<datalist>` element to the input.
-     */
-    list;
     constructor() {
         super();
+        this.#_internals = this.attachInternals();
+        /**
+         * When a form is submitted, only checkboxes which are currently checked are submitted to the server,
+         * and the reported value is the `value` of the value attribute.
+         * If the `value` is not otherwise specified, it is the string `on` by default.
+         * @attribute
+         */
+        this.value = '';
+        /**
+         * The error message that replaces supporting text when `error` is true. If
+         * `errorText` is an empty string, then the supporting text will continue to
+         * show.
+         *
+         * Calling `reportValidity()` will automatically update `errorText` to the
+         * native `validationMessage`.
+         * @attribute
+         */
+        this.invalidText = '';
+        /**
+         * Whether or not the text field has a leading icon. Used for SSR.
+         * @attribute
+         */
+        this.hasPrefix = false;
+        /**
+         * Whether or not the text field has a trailing icon. Used for SSR.
+         * @attribute
+         */
+        this.hasSuffix = false;
+        /**
+         * Conveys additional information below the text field, such as how it should
+         * be used.
+         * @attribute
+         */
+        this.supportingText = '';
+        /**
+         * Override the input text CSS `direction`. Useful for RTL languages that use
+         * LTR notation for fractions.
+         * @attribute
+         */
+        this.textDirection = '';
+        /**
+         * Defines the greatest value in the range of permitted values.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
+         * @attribute
+         */
+        this.max = '';
+        /**
+         * The maximum number of characters a user can enter into the text field. Set
+         * to -1 for none.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+         * @attribute
+         */
+        this.maxLength = -1;
+        /**
+         * Defines the most negative value in the range of permitted values.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+         * @attribute
+         */
+        this.min = '';
+        /**
+         * The minimum number of characters a user can enter into the text field. Set
+         * to -1 for none.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+         * @attribute
+         */
+        this.minLength = -1;
+        /**
+         * A regular expression that the text field's value must match to pass
+         * constraint validation.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+         * @attribute
+         */
+        this.pattern = '';
+        /**
+         * @attribute
+         */
+        this.placeholder = '';
+        /**
+         * Indicates whether or not a user should be able to edit the text field's
+         * value.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly
+         *
+         * @attribute
+         */
+        this.readOnly = false;
+        /**
+         * Bind the `<input>`'s `autocomplete` property.
+         * @default off
+         * @attribute
+         */
+        this.autocomplete = 'off';
+        /**
+         * Binds this to the `<input>`'s `inputMode` property.
+         * @attribute
+         */
+        this.inputMode = '';
+        /**
+         * Binds this to the `<input>`'s `autocapitalize` property.
+         *
+         * Possible values are:
+         *
+         * - `off` or `none`: No autocapitalization is applied (all letters default to lowercase)
+         * - `on` or `sentences`: The first letter of each sentence defaults to a capital letter;
+         *  all other letters default to lowercase
+         * - `words`: The first letter of each word defaults to a capital letter; all other letters default to lowercase
+         * - `characters`: All letters should default to uppercase
+         *
+         * @default off
+         * @attr
+         */
+        this.autocapitalize = 'off';
+        /**
+         * Binds this to the `<input>`'s `autocorrect` property.
+         * @default off
+         * @attribute
+         */
+        this.autocorrect = 'off';
+        this.pendingSetters = new Map();
+        /**
+         * Returns or sets the element's step attribute, which works with min and max
+         * to limit the increments at which a numeric or date-time value can be set.
+         *
+         * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+         * @attribute
+         */
+        this.step = '';
+        /**
+         * Returns true when the text field has been interacted with. Native
+         * validation errors only display in response to user interactions.
+         */
+        this.dirty = false;
+        this.focused = false;
+        /**
+         * The validation message displayed from a native error via
+         * `reportValidity()`.
+         */
+        this.nativeErrorText = '';
+        /**
+         * Whether or not a native error has been reported via `reportValidity()`.
+         */
+        this.nativeError = false;
+        this.counterId = 'counter';
+        this.supportingTextId = 'support';
+        this.labelId = 'support';
+        this.ariaAutoComplete = null;
+        this.ariaControls = null;
+        this.ariaActiveDescendant = null;
+        this.ariaExpanded = null;
+        this.dataRole = null;
+        /**
+         * When set to true, the error text's `role="alert"` will be removed, then
+         * re-added after an animation frame. This will re-announce an error message
+         * to screen readers.
+         */
+        this.refreshErrorAlert = false;
+        /**
+         * When set is shows password in the `password` input.
+         * This is private so the password can be viewed only through user interaction.
+         */
+        this.#showPassword = false;
+        this.removingTabindex = false;
         this.type = 'text';
         this.#_userInteracted = false;
         this.actionController.cancelKeyboardEvents = false;
@@ -826,7 +761,7 @@ export default class Input extends UiElement {
             return html ``;
         }
         return html `
-    <span class="label" id="${this.labelId}">${this.renderLabelText()}</span>
+    <span class="label" id="${this.labelId}" title="label">${label}</span>
     `;
     }
     renderHighlight() {