Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 2x 2x 2x 2x 4x 2x 2x 2x 4732x 4732x 4732x 4732x 2x 3750x 3750x 3750x 630x 32x 4192x 4192x 4192x 4192x 4192x | /**
* Copyright 2019 Adobe. All rights reserved.
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License. You may obtain a copy
* of the License at http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software distributed under
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
* OF ANY KIND, either express or implied. See the License for the specific language
* governing permissions and limitations under the License.
*/
import {BaseComponent} from '../../../coral-base-component';
import {BaseFormField} from '../../../coral-base-formfield';
import {transform, validate} from '../../../coral-utils';
import {Decorator} from '../../../coral-decorator';
/**
Enumeration for {@link Textfield} variants.
@typedef {Object} TextfieldVariantEnum
@property {String} DEFAULT
A default textfield.
@property {String} QUIET
A textfield with no border or background.
*/
const variant = {
DEFAULT: 'default',
QUIET: 'quiet'
};
// the textfield's base classname
const CLASSNAME = '_coral-Textfield';
// Builds a string containing all possible variant classnames. This will be used to remove classnames when the variant
// changes
const ALL_VARIANT_CLASSES = [];
for (const variantValue in variant) {
ALL_VARIANT_CLASSES.push(`${CLASSNAME}--${variant[variantValue]}`);
}
/**
@class Coral.Textfield
@classdesc A Textfield component is the default single line text form field.
@htmltag coral-textfield
@htmlbasetag input
@extends {HTMLInputElement}
@extends {BaseComponent}
@extends {BaseFormField}
*/
const Textfield = Decorator(class extends BaseFormField(BaseComponent(HTMLInputElement)) {
/** @ignore */
constructor() {
super();
this._delegateEvents(this._events);
}
/**
The textfield's variant. See {@link TextfieldVariantEnum}.
@type {String}
@default TextfieldVariantEnum.DEFAULT
@htmlattribute variant
@htmlattributereflected
*/
get variant() {
return this._variant || variant.DEFAULT;
}
set variant(value) {
value = transform.string(value).toLowerCase();
this._variant = validate.enumeration(variant)(value) && value || variant.DEFAULT;
this._reflectAttribute('variant', this._variant);
// removes every existing variant
this.classList.remove(...ALL_VARIANT_CLASSES);
if (this._variant !== variant.DEFAULT) {
this.classList.add(`${CLASSNAME}--${this._variant}`);
}
}
/**
Returns {@link Textfield} variants.
@return {TextfieldVariantEnum}
*/
static get variant() {
return variant;
}
/** @ignore */
static get observedAttributes() {
return super._nativeObservedAttributes.concat(['variant']);
}
/** @ignore */
render() {
super.render();
this.classList.add(CLASSNAME);
// Default reflected attributes
if (!this._variant) {
this.variant = variant.DEFAULT;
}
}
});
export default Textfield;
|