lightning-base-components 1.18.5-alpha → 1.18.7-alpha

package/src/lightning/input/input.html

@@ -1,169 +1,259 @@
 <template>
-    <!-- Simple Type Inputs: 'text', 'number', 'email', 'tel', 'url', 'search', 'password', 'range' -->
     <template if:true={isTypeSimple}>
-        <lightning-primitive-input-simple
-            accesskey={accesskey}
-            aria-errormessage="help-message"
-            aria-haspopup={ariaHasPopup}
-            aria-invalid={computedAriaInvalid}
-            aria-label={computedAriaLabel}
-            autocomplete={autocomplete}
-            computed-label-class={computedLabelClass}
-            disabled={disabled}
-            field-level-help={fieldLevelHelp}
-            formatter={formatter}
-            format-fraction-digits={formatFractionDigits}
-            has-external-label={hasExternalLabel}
-            helptext-alternative-text={helptextAlternativeText}
-            help-message={_helpMessage}
-            is-loading={isLoading}
-            label={label}
-            max={normalizedMax}
-            maxlength={maxLength}
-            min={normalizedMin}
-            minlength={minLength}
-            name={name}
-            onblur={handleBlur}
-            onfocus={handleFocus}
-            oninput={handleInput}
-            onchange={handlePrimitiveInputSimpleChange}
-            oncommit={handleCommit}
-            pattern={pattern}
-            placeholder={placeholder}
-            readonly={readOnly}
-            required={required}
-            step={step}
-            type={type}
-            variant={variant}
-            value={value}
-            validity={validity}
-        ></lightning-primitive-input-simple>
+        <div part="input-text">
+            <template if:false={hasExternalLabel}>
+                <label class={computedLabelClass} for="input" part="label">
+                    <template if:true={required}>
+                        <abbr class="slds-required" title={i18n.required}>*</abbr>
+                    </template>
+                    {label}
+                </label>
+                <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
+            </template>
+            <div class={computedFormElementClass} part="input-container">
+                <input type={_internalType}
+                       id="input"
+                       class="slds-input"
+                       part="input"
+                       aria-label={computedAriaLabel}
+                       aria-invalid={computedAriaInvalid}
+                       aria-errormessage="help-message"
+                       aria-haspopup={ariaHasPopup}
+                       onblur={handleBlur}
+                       onfocus={handleFocus}
+                       onchange={handleChange}
+                       oninput={handleInput}
+                       onkeydown={handleKeyDown}
+                       accesskey={accesskey}
+                       autocomplete={autocomplete}
+                       max={normalizedMax}
+                       min={normalizedMin}
+                       inputmode={_inputMode}
+                       step={step}
+                       maxlength={maxLength}
+                       minlength={minLength}
+                       pattern={pattern}
+                       placeholder={placeholder}
+                       name={name}
+                       required={required}
+                       readonly={readOnly}
+                       disabled={disabled}>
+
+                <template if:true={isTypeSearch}>
+                    <lightning-primitive-icon icon-name="utility:search" variant="bare" svg-class="slds-input__icon slds-input__icon_left slds-icon-text-default"></lightning-primitive-icon>
+                    <div class="slds-input__icon-group slds-input__icon-group_right">
+                        <template if:true={isLoading}>
+                            <div role="status" class="slds-spinner slds-spinner_brand slds-spinner_x-small slds-input__spinner">
+                                <span class="slds-assistive-text">{i18n.loading}</span>
+                                <div class="slds-spinner__dot-a"></div>
+                                <div class="slds-spinner__dot-b"></div>
+                            </div>
+                        </template>
+                        <template if:true={_showClearButton}>
+                            <button data-element-id="searchClear" class="slds-input__icon slds-input__icon_right slds-button slds-button_icon" onblur={handleBlur} onclick={_clearAndSetFocusOnInput}>
+                                <lightning-primitive-icon icon-name="utility:clear" variant="bare" svg-class="slds-button__icon"></lightning-primitive-icon>
+                                <span class="slds-assistive-text">{i18n.clear}</span>
+                            </button>
+                        </template>
+                    </div>
+                </template>
+            </div>
+        </div>
     </template>
 
     <template if:true={isTypeToggle}>
-        <lightning-primitive-input-toggle
-            accesskey={accesskey}
-            aria-label={computedAriaLabel}
-            aria-invalid={computedAriaInvalid}
-            checked={checked}
-            disabled={disabled}
-            help-message={_helpMessage}
-            label={label}
-            message-toggle-active={messageToggleActive}
-            message-toggle-inactive={messageToggleInactive}
-            name={name}
-            onblur={handleBlur}
-            onchange={handleChange}
-            onfocus={handleFocus}
-            readonly={readOnly}
-            required={required}
-            value={value}
-            variant={variant}
-        ></lightning-primitive-input-toggle>
+        <div class="slds-form-element__control">
+            <label class="slds-checkbox_toggle slds-grid" for="checkbox-toggle">
+                <template if:true={required}>
+                    <abbr class="slds-required" title={i18n.required}>*</abbr>
+                </template>
+                <span class={computedLabelClass}>{label}</span>
+                <input type="checkbox" id="checkbox-toggle"
+                    aria-label={computedAriaLabel}
+                    aria-invalid={computedAriaInvalid}
+                    accesskey={accesskey}
+                    onblur={handleBlur}
+                    onfocus={handleFocus}
+                    onchange={handleChange}
+                    name={name}
+                    required={required}
+                    readonly={readOnly}
+                    disabled={disabled}>
+                <span id="toggle-description" data-toggle-description  class="slds-checkbox_faux_container" aria-live="assertive">
+                <span class="slds-checkbox_faux"></span>
+                <span class="slds-checkbox_on">{messageToggleActive}</span>
+                <span class="slds-checkbox_off">{messageToggleInactive}</span>
+            </span>
+            </label>
+        </div>
     </template>
 
     <template if:true={isTypeCheckbox}>
-        <lightning-primitive-input-checkbox
-            accesskey={accesskey}
-            aria-label={computedAriaLabel}
-            aria-invalid={computedAriaInvalid}
-            checked={checked}
-            disabled={disabled}
-            field-level-help={fieldLevelHelp}
-            help-message={_helpMessage}
-            helptext-alternative-text={helptextAlternativeText}
-            label={label}
-            label-hidden={labelHidden}
-            name={name}
-            onblur={handleBlur}
-            onchange={handleChange}
-            onfocus={handleFocus}
-            readonly={readOnly}
-            required={required}
-            variant={variant}
-        ></lightning-primitive-input-checkbox>
-    </template>
+        <template if:false={isStandardVariant}>
+            <label for="checkbox" part="label-container" class="slds-checkbox__label">
+                <template if:true={required}>
+                    <abbr class="slds-required" title={i18n.required}>*</abbr>
+                </template>
+                <span class={computedLabelClass}>{label}</span>
+            </label>
+            <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
+        </template>
+        <div class={computedFormElementClass}>
+                <span part="input-checkbox" class={computedCheckboxClass}>
+                    <template if:true={isStandardVariant}>
+                        <template if:true={required}>
+                            <abbr class="slds-required" title={i18n.required}>*</abbr>
+                        </template>
+                    </template>
+                    <input type="checkbox" 
+                        part="checkbox"
+                        id="checkbox"
+                        aria-label={computedAriaLabel}
+                        aria-invalid={computedAriaInvalid}
+                        accesskey={accesskey}
+                        onblur={handleBlur}
+                        onfocus={handleFocus}
+                        onchange={handleChange}
+                        name={name}
+                        required={required}
+                        readonly={readOnly}
+                        disabled={disabled}>
+                    <template if:false={isStandardVariant}>
+                         <span part="indicator" class="slds-checkbox_faux"></span>
+                    </template>
+                    <template if:true={isStandardVariant}>
+                        <label for="checkbox" part="label-container" class="slds-checkbox__label">
+                            <span part="indicator" class="slds-checkbox_faux"></span>
+                            <span part="label" class={computedLabelClass}>{label}</span>
+                        </label>
+                        <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
+                     </template>
+                </span>
+            </div>
+        </template>
 
     <template if:true={isTypeCheckboxButton}>
-        <lightning-primitive-input-checkbox-button
-            label={label}
-            aria-label={ariaLabel}
-            aria-invalid={computedAriaInvalid}
-            required={required}
-            accesskey={accesskey}
-            disabled={disabled}
-            onblur={handleBlur}
-            onfocus={handleFocus}
-            onchange={handleChange}
-            name={name}
-            readonly={readOnly}
-            checked={checked}
-            help-message={_helpMessage}
-        ></lightning-primitive-input-checkbox-button>
+        <div class="slds-checkbox_add-button">
+            <input type="checkbox" id="checkbox-button"
+                aria-label={computedAriaLabel}
+                aria-invalid={computedAriaInvalid}
+                accesskey={accesskey}
+                class="slds-assistive-text"
+                onblur={handleBlur}
+                onfocus={handleFocus}
+                onchange={handleChange}
+                name={name}
+                required={required}
+                readonly={readOnly}
+                disabled={disabled}>
+            <label for="checkbox-button" class="slds-checkbox_faux">
+                <span class="slds-assistive-text">{label}</span>
+            </label>
+        </div>
     </template>
 
     <template if:true={isTypeRadio}>
-        <lightning-primitive-input-radio
-            accesskey={accesskey}
-            aria-invalid={computedAriaInvalid}
-            aria-label={ariaLabel}
-            disabled={disabled}
-            help-message={_helpMessage}
-            label={label}
-            name={name}
-            onblur={handleBlur}
-            onchange={handleChange}
-            onfocus={handleFocus}
-            required={required}
-            readonly={readOnly}
-            variant={variant}
-        ></lightning-primitive-input-radio>
+        <div class="slds-form-element__control">
+        <span class="slds-radio">
+            <input type="radio" id="radio"
+                aria-invalid={computedAriaInvalid}
+                accesskey={accesskey}
+                onblur={handleBlur}
+                onfocus={handleFocus}
+                onchange={handleChange}
+                name={name}
+                required={required}
+                readonly={readOnly}
+                disabled={disabled}>
+            <label for="radio" class="slds-radio__label">
+                <span class="slds-radio_faux"></span>
+                <span class={computedLabelClass}>{label}</span>
+            </label>
+            </span>
+        </div>
     </template>
 
     <template if:true={isTypeFile}>
-        <lightning-primitive-input-file
-            accept={accept}
-            accesskey={accesskey}
-            aria-invalid={computedAriaInvalid}
-            aria-label={computedAriaLabel}
-            disabled={disabled}
-            help-message={_helpMessage}
-            label={label}
-            label-class={computedLabelClass}
-            multiple={multiple}
-            name={name}
-            readonly={readOnly}
-            required={required}
-            onreportvalidity={reportValidity}
-            onblur={handleBlur}
-            onfocus={handleFocus}
-            onchange={handlePrimitiveInputFileChange}
-        ></lightning-primitive-input-file>
+        <span id="form-label" class={computedLabelClass} data-form-label>
+            <template if:true={required}>
+                <abbr class="slds-required" title={i18n.required}>*</abbr>
+            </template>
+            {label}
+        </span>
+        <div class="slds-form-element__control">
+            <div class="slds-file-selector slds-file-selector_files" ondrop={handleDropFiles}>
+                <lightning-primitive-file-droppable-zone multiple={multiple} disabled={disabled}>
+                    <input type="file" id="input-file"
+                        aria-label={computedAriaLabel}
+                        aria-invalid={computedAriaInvalid}
+                        accesskey={accesskey}
+                        class="slds-file-selector__input slds-assistive-text"
+                        onblur={handleBlur}
+                        onclick={handleFileClick}
+                        onfocus={handleFocus}
+                        onchange={handleChange}
+                        accept={accept}
+                        multiple={multiple}
+                        name={name}
+                        required={required}
+                        readonly={readOnly}
+                        disabled={disabled}>
+                    <label id="file-selector-label" data-file-selector-label for="input-file" aria-hidden="true"
+                        class="slds-file-selector__body">
+                        <span class="slds-file-selector__button slds-button slds-button_neutral">
+                            <lightning-primitive-icon icon-name="utility:upload" variant="bare" svg-class="slds-button__icon slds-button__icon_left">
+                            </lightning-primitive-icon>
+                            {i18n.inputFileButtonLabel}
+                        </span>
+                        <span class="slds-file-selector__text slds-medium-show">
+                            {i18n.inputFileBodyText}
+                        </span>
+                    </label>
+                </lightning-primitive-file-droppable-zone>
+            </div>
+        </div>
     </template>
 
     <template if:true={isTypeColor}>
-        <lightning-primitive-input-color
-            label={label}
-            field-level-help={fieldLevelHelp}
-            help-message={_helpMessage}
-            helptext-alternative-text={helptextAlternativeText}
-            onblur={handleBlur}
-            onfocus={handleFocus}
-            oninput={handleInput}
-            onchange={handleChange}
-            has-external-label={hasExternalLabel}
-            required={required}
-            accesskey={accesskey}
-            disabled={disabled}
-            name={name}
-            autocomplete={autocomplete}
-            placeholder={placeholder}
-            pattern={pattern}
-            aria-label={ariaLabel}
-            aria-invalid={computedAriaInvalid}
-            value={value}
-            variant={variant}
-        ></lightning-primitive-input-color>
+        <div class="slds-color-picker">
+            <div class="slds-form-element slds-color-picker__summary">
+                <template if:false={hasExternalLabel}>
+                    <label class={computedColorLabelClass} for="color">
+                        <template if:true={required}>
+                            <abbr class="slds-required" title={i18n.required}>*</abbr>
+                        </template>
+                        {label}
+                    </label>
+                    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
+                </template>
+                <div class="slds-form-element__control">
+                    <lightning-primitive-colorpicker-button
+                        value={value}
+                        disabled={disabled}
+                        onblur={handleBlur}
+                        onfocus={handleFocus}
+                        onchange={handleColorChange}>
+                    </lightning-primitive-colorpicker-button>
+                    <div class="slds-color-picker__summary-input">
+                        <input type="text" id="color" class="slds-input slds-m-right_x-small"
+                            name={name}
+                            autocomplete={autocomplete}
+                            accesskey={accesskey}
+                            aria-label={computedAriaLabel}
+                            aria-invalid={computedAriaInvalid}
+                            disabled={disabled}
+                            minlength="4"
+                            maxlength="7"
+                            placeholder={placeholder}
+                            pattern={pattern}
+                            onblur={handleBlur}
+                            onfocus={handleFocus}
+                            onchange={handleChange}
+                            oninput={handleInput}>
+                    </div>
+                </div>
+            </div>
+        </div>
     </template>
 
     <template if:true={isTypeDesktopDate}>
@@ -253,7 +343,7 @@
         </lightning-datetimepicker>
     </template>
 
-    <template if:true={shouldShowHelpMessage}>
-        <div id="help-message" class={computedHelpMessageClass} data-help-message role="alert" part="help-text">{_helpMessage}</div>
+    <template if:true={_helpMessage}>
+        <div id="help-message" class="slds-form-element__help" data-help-message role="alert" part="help-text">{_helpMessage}</div>
     </template>
 </template>