@vonage/vivid 3.0.0-next.25 → 3.0.0-next.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fab/index.js +1 -1
- package/lib/text-field/text-field.d.ts +3 -1
- package/package.json +1 -1
- package/text-field/index.js +24 -10
package/fab/index.js
CHANGED
|
@@ -20,7 +20,7 @@ import '../shared/object-keys.js';
|
|
|
20
20
|
import '../shared/form-associated.js';
|
|
21
21
|
import '../shared/aria-global.js';
|
|
22
22
|
|
|
23
|
-
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background-color: var(--_appearance-color-fill);\n block-size: var(--_fab-block-size);\n border-radius: var(--_fab-border-radius);\n color: var(--_appearance-color-text);\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n outline: 0 none;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-
|
|
23
|
+
var css_248z = "/*\n Do not edit directly\n Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n letter-spacing: 0px;\n text-decoration: none;\n text-transform: none;\n position: relative;\n display: inline-flex;\n box-sizing: border-box;\n align-items: center;\n border: 0 none;\n background-color: var(--_appearance-color-fill, var(--_elevation-fill));\n block-size: var(--_fab-block-size);\n border-radius: var(--_fab-border-radius);\n color: var(--_appearance-color-text, var(--vvd-color-on-canvas));\n column-gap: var(--fab-icon-gap);\n filter: var(--_elevation-shadow);\n outline: 0 none;\n transition: background-color 0.15s linear, filter 0.15s linear;\n vertical-align: middle;\n /* Size */\n}\n.control.connotation-accent {\n --_connotation-color-primary: var(--vvd-color-on-canvas);\n --_connotation-color-on-primary: var(--vvd-color-canvas);\n --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n --_connotation-color-contrast: var(--vvd-color-neutral-90);\n --_connotation-color-fierce: var(--vvd-color-neutral-80);\n --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n --_connotation-color-primary: var(--vvd-color-cta);\n --_connotation-color-on-primary: var(--vvd-color-on-cta);\n --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n --_connotation-color-contrast: var(--vvd-color-cta-90);\n --_connotation-color-fierce: var(--vvd-color-cta-80);\n --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-primary-increment);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n --_appearance-color-text: var(--vvd-color-neutral-50);\n --_appearance-color-fill: var(--vvd-color-neutral-30);\n --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n --_appearance-color-text: var(--_connotation-color-on-primary);\n --_appearance-color-fill: var(--_connotation-color-fierce);\n --_appearance-color-outline: transaprent;\n}\n.control.density-extended {\n --_fab-border-radius: 30px;\n --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n --_fab-border-radius: 24px;\n --_fab-block-size: 40px;\n}\n.control.icon-only {\n border-radius: 50%;\n padding-inline: 0;\n place-content: center;\n}\n@supports (aspect-ratio: 1) {\n .control.icon-only {\n aspect-ratio: 1;\n }\n}\n@supports not (aspect-ratio: 1) {\n .control.icon-only {\n inline-size: var(--_fab-block-size);\n }\n}\n.control:not(.icon-only) {\n --fab-icon-gap: 10px;\n padding-inline: 20px;\n}\n.control:disabled {\n --_elevation-fill: var(--vvd-color-surface-0dp);\n --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n cursor: not-allowed;\n}\n.control:not(:disabled) {\n --_elevation-fill: var(--vvd-color-surface-4dp);\n --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n cursor: pointer;\n}\n.control:not(:disabled):hover {\n --_elevation-fill: var(--vvd-color-surface-12dp);\n --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n --_elevation-fill: var(--vvd-color-surface-24dp);\n --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon {\n font-size: 20px;\n}\n.icon-trailing .icon {\n order: 1;\n}\n\n:not(:focus-visible) .focus-indicator {\n display: none;\n}";
|
|
24
24
|
styleInject(css_248z);
|
|
25
25
|
|
|
26
26
|
class Fab extends Button {}
|
|
@@ -5,6 +5,7 @@ declare type TextFieldDensity = Extract<Density, Density.Normal | Density.Extend
|
|
|
5
5
|
declare type TextFieldAppearance = Extract<Appearance, Appearance.Outlined | Appearance.Ghost>;
|
|
6
6
|
declare type TextFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
|
|
7
7
|
export declare class TextField extends FoundationTextfield {
|
|
8
|
+
#private;
|
|
8
9
|
label?: string;
|
|
9
10
|
helperText?: string;
|
|
10
11
|
charCount: boolean;
|
|
@@ -14,7 +15,8 @@ export declare class TextField extends FoundationTextfield {
|
|
|
14
15
|
userValid: boolean;
|
|
15
16
|
autoComplete?: string;
|
|
16
17
|
get errorValidationMessage(): string;
|
|
17
|
-
|
|
18
|
+
constructor();
|
|
19
|
+
validate: () => void;
|
|
18
20
|
}
|
|
19
21
|
export interface TextField extends AffixIcon {
|
|
20
22
|
}
|
package/package.json
CHANGED
package/text-field/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import '../icon/index.js';
|
|
2
2
|
import '../focus/index.js';
|
|
3
|
-
import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable, b as __metadata, v as volatile, h as html, d as designSystem } from '../shared/index.js';
|
|
3
|
+
import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable, c as __classPrivateFieldGet, i as __classPrivateFieldSet, b as __metadata, v as volatile, h as html, d as designSystem } from '../shared/index.js';
|
|
4
4
|
import '../shared/web.dom-collections.iterator.js';
|
|
5
5
|
import { b as AffixIcon, a as affixIconTemplateFactory } from '../shared/affix.js';
|
|
6
6
|
import '../shared/focus.js';
|
|
@@ -233,26 +233,40 @@ class DelegatesARIATextbox {
|
|
|
233
233
|
applyMixins(DelegatesARIATextbox, ARIAGlobalStatesAndProperties);
|
|
234
234
|
applyMixins(TextField$1, StartEnd, DelegatesARIATextbox);
|
|
235
235
|
|
|
236
|
+
var _TextField_blurred;
|
|
236
237
|
class TextField extends TextField$1 {
|
|
237
238
|
constructor() {
|
|
238
|
-
super(
|
|
239
|
+
super();
|
|
239
240
|
this.charCount = false;
|
|
240
241
|
this.userValid = true;
|
|
242
|
+
|
|
243
|
+
_TextField_blurred.set(this, false);
|
|
244
|
+
|
|
245
|
+
this.validate = () => {
|
|
246
|
+
super.validate();
|
|
247
|
+
this.userValid = !this.userValid;
|
|
248
|
+
|
|
249
|
+
if (this.proxy instanceof HTMLElement) {
|
|
250
|
+
this.userValid = __classPrivateFieldGet(this, _TextField_blurred, "f") && this.dirtyValue ? !this.validationMessage : true;
|
|
251
|
+
}
|
|
252
|
+
};
|
|
253
|
+
|
|
254
|
+
this.addEventListener('blur', () => {
|
|
255
|
+
__classPrivateFieldSet(this, _TextField_blurred, true, "f");
|
|
256
|
+
|
|
257
|
+
this.validate();
|
|
258
|
+
});
|
|
259
|
+
this.addEventListener('focus', () => {
|
|
260
|
+
__classPrivateFieldSet(this, _TextField_blurred, false, "f");
|
|
261
|
+
});
|
|
241
262
|
}
|
|
242
263
|
|
|
243
264
|
get errorValidationMessage() {
|
|
244
265
|
return this.userValid ? '' : this.validationMessage;
|
|
245
266
|
}
|
|
246
267
|
|
|
247
|
-
validate() {
|
|
248
|
-
super.validate();
|
|
249
|
-
|
|
250
|
-
if (this.proxy instanceof HTMLElement) {
|
|
251
|
-
this.userValid = this.dirtyValue ? !this.validationMessage : true;
|
|
252
|
-
}
|
|
253
|
-
}
|
|
254
|
-
|
|
255
268
|
}
|
|
269
|
+
_TextField_blurred = new WeakMap();
|
|
256
270
|
|
|
257
271
|
__decorate([attr, __metadata("design:type", String)], TextField.prototype, "label", void 0);
|
|
258
272
|
|