@crowdfarming/oliva-ds 1.5.0 → 1.6.0
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/fesm2022/crowdfarming-oliva-ds.mjs +332 -93
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/lib/checkbox/src/lib/checkbox/checkbox.component.d.ts +10 -2
- package/lib/input-date/src/lib/input-date/input-date.component.d.ts +12 -4
- package/lib/input-number/src/lib/input-number/input-number.component.d.ts +13 -5
- package/lib/input-search/src/lib/input-search/input-search.component.d.ts +12 -4
- package/lib/password-input/src/lib/password-input/password-input.component.d.ts +12 -4
- package/lib/radio/src/lib/radio/radio.component.d.ts +12 -12
- package/lib/text-input/src/lib/text-input/text-input.component.d.ts +13 -4
- package/lib/textarea/src/lib/textarea/textarea.component.d.ts +13 -5
- package/package.json +1 -1
- package/themes/crowdfarming/_tokens.css +236 -31
- package/themes/farmeneur/_tokens.css +257 -71
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, ElementRef, ContentChild, EventEmitter, Output, HostListener } from '@angular/core';
|
|
2
|
+
import { Input, Component, ElementRef, ContentChild, EventEmitter, forwardRef, Output, HostListener } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule } from '@angular/common';
|
|
5
|
+
import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
|
|
5
6
|
|
|
6
7
|
class IconComponent {
|
|
7
8
|
extraClass = '';
|
|
@@ -30,11 +31,11 @@ class AvatarComponent {
|
|
|
30
31
|
src = '';
|
|
31
32
|
alt = '';
|
|
32
33
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
33
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: AvatarComponent, isStandalone: true, selector: "lib-avatar", inputs: { size: "size", initial: "initial", src: "src", alt: "alt" }, ngImport: i0, template: "<figure [ngClass]=\"['c-avatar','c-avatar__' + size, !src && !initial ? 'c-avatar--no-img' : '', !src && initial ? 'c-avatar--initial' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-avatar__img\" />\n <lib-icon icon=\"user\" *ngIf=\"!src && !initial\" [size]=\"size === 'xl' ? 'lg' : size\"/>\n <span class=\"c-avatar--initial\" *ngIf=\"!src && initial\">{{initial}}</span>\n</figure>", styles: [".c-avatar{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:var(--size-border-radius-full);background:var(--color-feedback-neutral-surface-background);overflow:hidden;cursor:pointer}.c-avatar__img{width:100%;height:100%;object-fit:cover;object-position:center}.c-avatar__lg{width:3rem;height:3rem}.c-avatar__lg .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-title-lg-family);font-size:var(
|
|
34
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: AvatarComponent, isStandalone: true, selector: "lib-avatar", inputs: { size: "size", initial: "initial", src: "src", alt: "alt" }, ngImport: i0, template: "<figure [ngClass]=\"['c-avatar','c-avatar__' + size, !src && !initial ? 'c-avatar--no-img' : '', !src && initial ? 'c-avatar--initial' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-avatar__img\" />\n <lib-icon icon=\"user\" *ngIf=\"!src && !initial\" [size]=\"size === 'xl' ? 'lg' : size\"/>\n <span class=\"c-avatar--initial\" *ngIf=\"!src && initial\">{{initial}}</span>\n</figure>", styles: [".c-avatar{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:var(--size-border-radius-full);background:var(--color-feedback-neutral-surface-background);overflow:hidden;cursor:pointer}.c-avatar__img{width:100%;height:100%;object-fit:cover;object-position:center}.c-avatar__lg{width:3rem;height:3rem}.c-avatar__lg .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-title-lg-family);font-size:var(--typography-title-lg-size);font-style:normal;font-weight:var(--typography-title-lg-weight);line-height:var(--typography-title-lg-line-height);letter-spacing:var(--typography-title-lg-letter-spacing)}.c-avatar__md{width:2.5rem;height:2.5rem}.c-avatar__md .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-title-md-family);font-size:var(--typography-title-md-size);font-style:normal;font-weight:var(--typography-title-md-weight);line-height:var(--typography-title-md-line-height);letter-spacing:var(--typography-title-md-letter-spacing)}.c-avatar__sm{width:2rem;height:2rem}.c-avatar__sm .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-avatar__xs{width:1.5rem;height:1.5rem}.c-avatar__xs .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-label-sm-strong-family);font-size:var(--typography-label-sm-strong-size);font-style:normal;font-weight:var(--typography-label-sm-strong-weight);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
34
35
|
}
|
|
35
36
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
36
37
|
type: Component,
|
|
37
|
-
args: [{ selector: 'lib-avatar', imports: [CommonModule, IconComponent], template: "<figure [ngClass]=\"['c-avatar','c-avatar__' + size, !src && !initial ? 'c-avatar--no-img' : '', !src && initial ? 'c-avatar--initial' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-avatar__img\" />\n <lib-icon icon=\"user\" *ngIf=\"!src && !initial\" [size]=\"size === 'xl' ? 'lg' : size\"/>\n <span class=\"c-avatar--initial\" *ngIf=\"!src && initial\">{{initial}}</span>\n</figure>", styles: [".c-avatar{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:var(--size-border-radius-full);background:var(--color-feedback-neutral-surface-background);overflow:hidden;cursor:pointer}.c-avatar__img{width:100%;height:100%;object-fit:cover;object-position:center}.c-avatar__lg{width:3rem;height:3rem}.c-avatar__lg .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-title-lg-family);font-size:var(
|
|
38
|
+
args: [{ selector: 'lib-avatar', imports: [CommonModule, IconComponent], template: "<figure [ngClass]=\"['c-avatar','c-avatar__' + size, !src && !initial ? 'c-avatar--no-img' : '', !src && initial ? 'c-avatar--initial' : '']\">\n <img *ngIf=\"src\" [src]=\"src\" [alt]=\"alt\" class=\"c-avatar__img\" />\n <lib-icon icon=\"user\" *ngIf=\"!src && !initial\" [size]=\"size === 'xl' ? 'lg' : size\"/>\n <span class=\"c-avatar--initial\" *ngIf=\"!src && initial\">{{initial}}</span>\n</figure>", styles: [".c-avatar{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;background:transparent;display:flex;align-items:center;justify-content:center;border-radius:var(--size-border-radius-full);background:var(--color-feedback-neutral-surface-background);overflow:hidden;cursor:pointer}.c-avatar__img{width:100%;height:100%;object-fit:cover;object-position:center}.c-avatar__lg{width:3rem;height:3rem}.c-avatar__lg .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-title-lg-family);font-size:var(--typography-title-lg-size);font-style:normal;font-weight:var(--typography-title-lg-weight);line-height:var(--typography-title-lg-line-height);letter-spacing:var(--typography-title-lg-letter-spacing)}.c-avatar__md{width:2.5rem;height:2.5rem}.c-avatar__md .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-title-md-family);font-size:var(--typography-title-md-size);font-style:normal;font-weight:var(--typography-title-md-weight);line-height:var(--typography-title-md-line-height);letter-spacing:var(--typography-title-md-letter-spacing)}.c-avatar__sm{width:2rem;height:2rem}.c-avatar__sm .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-avatar__xs{width:1.5rem;height:1.5rem}.c-avatar__xs .c-avatar--initial{color:var(--color-feedback-neutral-default);text-align:center;font-family:var(--typography-label-sm-strong-family);font-size:var(--typography-label-sm-strong-size);font-style:normal;font-weight:var(--typography-label-sm-strong-weight);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing)}\n"] }]
|
|
38
39
|
}], propDecorators: { size: [{
|
|
39
40
|
type: Input
|
|
40
41
|
}], initial: [{
|
|
@@ -232,20 +233,51 @@ class CheckboxComponent {
|
|
|
232
233
|
error = false;
|
|
233
234
|
indeterminate = false;
|
|
234
235
|
changed = new EventEmitter();
|
|
235
|
-
|
|
236
|
+
onChangeFn = () => { };
|
|
237
|
+
onTouchedFn = () => { };
|
|
238
|
+
writeValue(value) {
|
|
239
|
+
this.checked = !!value;
|
|
240
|
+
}
|
|
241
|
+
registerOnChange(fn) {
|
|
242
|
+
this.onChangeFn = fn;
|
|
243
|
+
}
|
|
244
|
+
registerOnTouched(fn) {
|
|
245
|
+
this.onTouchedFn = fn;
|
|
246
|
+
}
|
|
247
|
+
setDisabledState(isDisabled) {
|
|
248
|
+
this.disabled = isDisabled;
|
|
249
|
+
}
|
|
250
|
+
handleChange(event) {
|
|
236
251
|
const input = event.target;
|
|
237
|
-
|
|
238
|
-
this.
|
|
252
|
+
const isChecked = input.checked;
|
|
253
|
+
this.checked = isChecked;
|
|
254
|
+
this.onChangeFn(isChecked);
|
|
255
|
+
this.changed.emit(isChecked);
|
|
256
|
+
}
|
|
257
|
+
onBlur() {
|
|
258
|
+
this.onTouchedFn();
|
|
239
259
|
}
|
|
240
260
|
get ariaChecked() {
|
|
241
261
|
return this.indeterminate ? 'mixed' : String(this.checked);
|
|
242
262
|
}
|
|
243
263
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: CheckboxComponent, isStandalone: true, selector: "lib-checkbox", inputs: { label: "label", id: "id", checked: "checked", disabled: "disabled", error: "error", indeterminate: "indeterminate" }, outputs: { changed: "changed" },
|
|
264
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: CheckboxComponent, isStandalone: true, selector: "lib-checkbox", inputs: { label: "label", id: "id", checked: "checked", disabled: "disabled", error: "error", indeterminate: "indeterminate" }, outputs: { changed: "changed" }, providers: [
|
|
265
|
+
{
|
|
266
|
+
provide: NG_VALUE_ACCESSOR,
|
|
267
|
+
useExisting: forwardRef(() => CheckboxComponent),
|
|
268
|
+
multi: true
|
|
269
|
+
}
|
|
270
|
+
], ngImport: i0, template: "<label\n [attr.for]=\"id\"\n [class.has-error]=\"error\"\n class=\"c-checkbox\"\n>\n <input\n type=\"checkbox\"\n [id]=\"id\"\n class=\"c-checkbox__input\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n role=\"checkbox\"\n [attr.aria-checked]=\"ariaChecked\"\n (change)=\"handleChange($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span\n class=\"c-checkbox__custom\"\n [ngClass]=\"[\n 'c-checkbox__custom',\n indeterminate ? 'c-checkbox__custom--indeterminate' : ''\n ]\"\n >\n <svg\n *ngIf=\"checked && !indeterminate\"\n class=\"c-checkbox__tick\"\n viewBox=\"0 0 24 24\"\n >\n <polyline points=\"4 12 10 18 20 6\"></polyline>\n </svg>\n <div *ngIf=\"indeterminate\" class=\"c-checkbox__indeterminate\"></div>\n </span>\n <span class=\"c-checkbox__text\">{{ label }}</span>\n</label>\n", styles: [".c-checkbox{display:inline-flex;align-items:center;gap:var(--space-component-gap-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-core-content-default)}.c-checkbox__input{display:none}.c-checkbox__input:checked+.c-checkbox__custom{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__input:checked:hover+.c-checkbox__custom{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-background-hover)}.c-checkbox__input:focus+.c-checkbox__custom{outline:2px solid var(--focus-outset)}.c-checkbox__input:disabled+.c-checkbox__custom{border-color:var(--color-textfield-border-disabled)}.c-checkbox__input:disabled:checked+.c-checkbox__custom{border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-border-disabled)}.c-checkbox__input:disabled:checked~.c-checkbox__text,.c-checkbox__input:disabled~.c-checkbox__text{color:var(--color-textfield-content-disabled)}.c-checkbox__input:checked+.c-checkbox__custom .c-checkbox__tick{display:block}.c-checkbox.has-error .c-checkbox__custom{border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error .c-checkbox__input:checked+.c-checkbox__custom{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-checkbox__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border:var(--size-border-width-md) solid var(--color-textfield-border-default);border-radius:var(--size-border-radius-sm);background:#fff;transition:all .2s}.c-checkbox__custom--indeterminate{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__tick{width:12px;height:12px;stroke:#fff;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;fill:none;display:none}.c-checkbox:hover__custom{border-color:var(--color-textfield-border-hover)}.c-checkbox:pressed__custom{border-color:var(--color-textfield-border-pressed)}.c-checkbox__text{font-size:.875rem}.c-checkbox__indeterminate{width:12px;height:2px;border-radius:1px;background-color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
245
271
|
}
|
|
246
272
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
247
273
|
type: Component,
|
|
248
|
-
args: [{ selector: 'lib-checkbox', standalone: true, imports: [CommonModule],
|
|
274
|
+
args: [{ selector: 'lib-checkbox', standalone: true, imports: [CommonModule], providers: [
|
|
275
|
+
{
|
|
276
|
+
provide: NG_VALUE_ACCESSOR,
|
|
277
|
+
useExisting: forwardRef(() => CheckboxComponent),
|
|
278
|
+
multi: true
|
|
279
|
+
}
|
|
280
|
+
], template: "<label\n [attr.for]=\"id\"\n [class.has-error]=\"error\"\n class=\"c-checkbox\"\n>\n <input\n type=\"checkbox\"\n [id]=\"id\"\n class=\"c-checkbox__input\"\n [checked]=\"checked\"\n [disabled]=\"disabled\"\n role=\"checkbox\"\n [attr.aria-checked]=\"ariaChecked\"\n (change)=\"handleChange($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span\n class=\"c-checkbox__custom\"\n [ngClass]=\"[\n 'c-checkbox__custom',\n indeterminate ? 'c-checkbox__custom--indeterminate' : ''\n ]\"\n >\n <svg\n *ngIf=\"checked && !indeterminate\"\n class=\"c-checkbox__tick\"\n viewBox=\"0 0 24 24\"\n >\n <polyline points=\"4 12 10 18 20 6\"></polyline>\n </svg>\n <div *ngIf=\"indeterminate\" class=\"c-checkbox__indeterminate\"></div>\n </span>\n <span class=\"c-checkbox__text\">{{ label }}</span>\n</label>\n", styles: [".c-checkbox{display:inline-flex;align-items:center;gap:var(--space-component-gap-sm);cursor:pointer;-webkit-user-select:none;user-select:none;font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-core-content-default)}.c-checkbox__input{display:none}.c-checkbox__input:checked+.c-checkbox__custom{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__input:checked:hover+.c-checkbox__custom{background-color:var(--color-action-primary-selected-background-hover);border-color:var(--color-action-primary-selected-background-hover)}.c-checkbox__input:focus+.c-checkbox__custom{outline:2px solid var(--focus-outset)}.c-checkbox__input:disabled+.c-checkbox__custom{border-color:var(--color-textfield-border-disabled)}.c-checkbox__input:disabled:checked+.c-checkbox__custom{border-color:var(--color-textfield-border-disabled);background-color:var(--color-textfield-border-disabled)}.c-checkbox__input:disabled:checked~.c-checkbox__text,.c-checkbox__input:disabled~.c-checkbox__text{color:var(--color-textfield-content-disabled)}.c-checkbox__input:checked+.c-checkbox__custom .c-checkbox__tick{display:block}.c-checkbox.has-error .c-checkbox__custom{border-color:var(--color-feedback-danger-surface-border)}.c-checkbox.has-error .c-checkbox__input:checked+.c-checkbox__custom{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-checkbox__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border:var(--size-border-width-md) solid var(--color-textfield-border-default);border-radius:var(--size-border-radius-sm);background:#fff;transition:all .2s}.c-checkbox__custom--indeterminate{background-color:var(--color-action-primary-selected-background-default);border-color:var(--color-action-primary-selected-background-default)}.c-checkbox__tick{width:12px;height:12px;stroke:#fff;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round;fill:none;display:none}.c-checkbox:hover__custom{border-color:var(--color-textfield-border-hover)}.c-checkbox:pressed__custom{border-color:var(--color-textfield-border-pressed)}.c-checkbox__text{font-size:.875rem}.c-checkbox__indeterminate{width:12px;height:2px;border-radius:1px;background-color:#fff}\n"] }]
|
|
249
281
|
}], propDecorators: { label: [{
|
|
250
282
|
type: Input
|
|
251
283
|
}], id: [{
|
|
@@ -404,7 +436,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
404
436
|
|
|
405
437
|
class PasswordInputComponent {
|
|
406
438
|
label = '';
|
|
407
|
-
value = '';
|
|
408
439
|
placeholder = '';
|
|
409
440
|
helperText = '';
|
|
410
441
|
alertText = '';
|
|
@@ -416,7 +447,22 @@ class PasswordInputComponent {
|
|
|
416
447
|
required = false;
|
|
417
448
|
size = 'md';
|
|
418
449
|
emitValue = new EventEmitter();
|
|
450
|
+
_value = '';
|
|
419
451
|
showPassword = false;
|
|
452
|
+
onChangeFn = () => { };
|
|
453
|
+
onTouchedFn = () => { };
|
|
454
|
+
writeValue(value) {
|
|
455
|
+
this._value = value ?? '';
|
|
456
|
+
}
|
|
457
|
+
registerOnChange(fn) {
|
|
458
|
+
this.onChangeFn = fn;
|
|
459
|
+
}
|
|
460
|
+
registerOnTouched(fn) {
|
|
461
|
+
this.onTouchedFn = fn;
|
|
462
|
+
}
|
|
463
|
+
setDisabledState(isDisabled) {
|
|
464
|
+
this.disabled = isDisabled;
|
|
465
|
+
}
|
|
420
466
|
get inputType() {
|
|
421
467
|
return this.showPassword ? 'text' : 'password';
|
|
422
468
|
}
|
|
@@ -427,7 +473,7 @@ class PasswordInputComponent {
|
|
|
427
473
|
this.error ? 'is-error' : '',
|
|
428
474
|
this.success ? 'is-success' : '',
|
|
429
475
|
this.disabled ? 'is-disabled' : '',
|
|
430
|
-
this.readonly ? 'is-readonly' : ''
|
|
476
|
+
this.readonly ? 'is-readonly' : ''
|
|
431
477
|
].filter(Boolean);
|
|
432
478
|
}
|
|
433
479
|
get ariaDescribedBy() {
|
|
@@ -436,27 +482,42 @@ class PasswordInputComponent {
|
|
|
436
482
|
togglePassword() {
|
|
437
483
|
this.showPassword = !this.showPassword;
|
|
438
484
|
}
|
|
439
|
-
|
|
485
|
+
onInput(event) {
|
|
440
486
|
const input = event.target;
|
|
441
|
-
|
|
442
|
-
this.
|
|
487
|
+
this._value = input.value;
|
|
488
|
+
this.onChangeFn(this._value);
|
|
489
|
+
this.emitValue.emit(this._value);
|
|
490
|
+
}
|
|
491
|
+
onBlur() {
|
|
492
|
+
this.onTouchedFn();
|
|
443
493
|
}
|
|
444
494
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
445
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: PasswordInputComponent, isStandalone: true, selector: "lib-password-input", inputs: { label: "label",
|
|
495
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: PasswordInputComponent, isStandalone: true, selector: "lib-password-input", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
496
|
+
{
|
|
497
|
+
provide: NG_VALUE_ACCESSOR,
|
|
498
|
+
useExisting: forwardRef(() => PasswordInputComponent),
|
|
499
|
+
multi: true
|
|
500
|
+
}
|
|
501
|
+
], ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [text]=\"label\" [required]=\"required\"></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n [type]=\"inputType\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n >\n <lib-icon\n icon=\"eye\"\n size=\"md\"\n iconBefore\n [variant]=\"showPassword ? 'close' : 'open'\"\n />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus{border:var(--size-component-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "disabled", "loading", "variant", "size"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
446
502
|
}
|
|
447
503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
448
504
|
type: Component,
|
|
449
505
|
args: [{ selector: 'lib-password-input', standalone: true, imports: [
|
|
450
506
|
CommonModule,
|
|
507
|
+
ReactiveFormsModule,
|
|
451
508
|
InputLabelComponent,
|
|
452
509
|
IconComponent,
|
|
453
510
|
ButtonIconComponent,
|
|
454
511
|
HelperTextComponent
|
|
455
|
-
],
|
|
512
|
+
], providers: [
|
|
513
|
+
{
|
|
514
|
+
provide: NG_VALUE_ACCESSOR,
|
|
515
|
+
useExisting: forwardRef(() => PasswordInputComponent),
|
|
516
|
+
multi: true
|
|
517
|
+
}
|
|
518
|
+
], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [text]=\"label\" [required]=\"required\"></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n [type]=\"inputType\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n [ariaLabel]=\"showPassword ? 'Ocultar contrase\u00F1a' : 'Mostrar contrase\u00F1a'\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"togglePassword()\"\n >\n <lib-icon\n icon=\"eye\"\n size=\"md\"\n iconBefore\n [variant]=\"showPassword ? 'close' : 'open'\"\n />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus{border:var(--size-component-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"] }]
|
|
456
519
|
}], propDecorators: { label: [{
|
|
457
520
|
type: Input
|
|
458
|
-
}], value: [{
|
|
459
|
-
type: Input
|
|
460
521
|
}], placeholder: [{
|
|
461
522
|
type: Input
|
|
462
523
|
}], helperText: [{
|
|
@@ -482,45 +543,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
482
543
|
}] } });
|
|
483
544
|
|
|
484
545
|
class RadioComponent {
|
|
485
|
-
/** ID del input, útil para test o relacionarlo con label */
|
|
486
546
|
id;
|
|
487
|
-
/** Nombre del grupo */
|
|
488
547
|
name;
|
|
489
|
-
/** Valor del radio */
|
|
490
548
|
value;
|
|
491
|
-
/** Valor actualmente seleccionado */
|
|
492
|
-
model;
|
|
493
|
-
/** Etiqueta visible */
|
|
494
549
|
label;
|
|
495
|
-
/** Muestra el estado de error */
|
|
496
550
|
error = false;
|
|
497
|
-
checked = false;
|
|
498
551
|
disabled = false;
|
|
499
|
-
/** Notifica al cambiar */
|
|
500
552
|
modelChange = new EventEmitter();
|
|
501
|
-
|
|
502
|
-
|
|
553
|
+
_value;
|
|
554
|
+
onChangeFn = () => { };
|
|
555
|
+
onTouchedFn = () => { };
|
|
556
|
+
writeValue(value) {
|
|
557
|
+
this._value = value;
|
|
558
|
+
}
|
|
559
|
+
registerOnChange(fn) {
|
|
560
|
+
this.onChangeFn = fn;
|
|
561
|
+
}
|
|
562
|
+
registerOnTouched(fn) {
|
|
563
|
+
this.onTouchedFn = fn;
|
|
564
|
+
}
|
|
565
|
+
setDisabledState(isDisabled) {
|
|
566
|
+
this.disabled = isDisabled;
|
|
567
|
+
}
|
|
568
|
+
onInputChange() {
|
|
569
|
+
this._value = this.value;
|
|
570
|
+
this.onChangeFn(this._value);
|
|
571
|
+
this.modelChange.emit(this._value);
|
|
572
|
+
}
|
|
573
|
+
onBlur() {
|
|
574
|
+
this.onTouchedFn();
|
|
503
575
|
}
|
|
504
576
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
505
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: RadioComponent, isStandalone: true, selector: "lib-radio", inputs: { id: "id", name: "name", value: "value",
|
|
577
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: RadioComponent, isStandalone: true, selector: "lib-radio", inputs: { id: "id", name: "name", value: "value", label: "label", error: "error", disabled: "disabled" }, outputs: { modelChange: "modelChange" }, providers: [
|
|
578
|
+
{
|
|
579
|
+
provide: NG_VALUE_ACCESSOR,
|
|
580
|
+
useExisting: forwardRef(() => RadioComponent),
|
|
581
|
+
multi: true
|
|
582
|
+
}
|
|
583
|
+
], ngImport: i0, template: "<div class=\"c-radio\">\n <label class=\"c-radio__label\" [for]=\"id || value\">\n <input\n type=\"radio\"\n class=\"c-radio__input\"\n [id]=\"id || value\"\n [name]=\"name\"\n [value]=\"value\"\n [checked]=\"value === _value\"\n (change)=\"onInputChange()\"\n (blur)=\"onBlur()\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n role=\"radio\"\n [attr.aria-checked]=\"value === _value ? 'true' : 'false'\"\n [attr.tabindex]=\"value === _value ? '0' : '-1'\"\n [disabled]=\"disabled\"\n />\n <span\n class=\"c-radio__custom\"\n [class.has-error]=\"error\"\n aria-hidden=\"true\"\n ></span>\n <span class=\"c-radio__text\">{{ label }}</span>\n </label>\n</div>\n", styles: [".c-radio{display:flex;align-items:center;font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-core-content-default)}.c-radio__input{position:absolute;opacity:0;pointer-events:none}.c-radio__label{display:flex;align-items:center;cursor:pointer;gap:var(--space-component-gap-sm)}.c-radio__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border-radius:var(--size-border-radius-full);border:var(--size-border-width-md) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);position:relative;transition:all .2s}.c-radio__input:checked+.c-radio__custom{border-color:var(--color-action-primary-selected-background-default);background:var(--color-action-primary-selected-background-default)}.c-radio__input:checked+.c-radio__custom:after{content:\"\";display:flex;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:var(--size-border-radius-full);background:var(--color-action-primary-selected-content-default)}.c-radio__input:checked+.c-radio__custom:hover{background-color:var(--color-action-primary-selected-background-hover)}.c-radio__input:checked+.c-radio__custom:focus{outline:2px solid var(--focus-outset)}.c-radio__input:checked+.c-radio__custom:pressed{background-color:var(--color-textfield-border-pressed)}.c-radio__input:checked+.c-radio__custom:disabled{background-color:var(--color-action-primary-selected-background-disabled)}.c-radio__input:checked:disabled+.c-radio__custom{background-color:var(--color-textfield-content-disabled);border-color:var(--color-textfield-content-disabled)}.c-radio__input:disabled+.c-radio__custom{border-color:var(--color-textfield-content-disabled)}.c-radio__custom.has-error{border-color:var(--color-feedback-danger-surface-border)}.c-radio__input:checked+.c-radio__custom.has-error{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-radio__text{font-size:1rem;line-height:1.5;color:#000}.c-radio:hover__custom{border-color:var(--color-textfield-border-hover)}.c-radio:focus__custom{outline:2px solid var(--focus-outset)}.c-radio:pressed__custom{border-color:var(--color-textfield-border-pressed)}.c-radio:disabled{color:var(--color-textfield-content-disabled)}.c-radio:disabled__custom{border-color:var(--color-textfield-border-disabled)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
506
584
|
}
|
|
507
585
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioComponent, decorators: [{
|
|
508
586
|
type: Component,
|
|
509
|
-
args: [{ selector: 'lib-radio', standalone: true, imports: [CommonModule
|
|
587
|
+
args: [{ selector: 'lib-radio', standalone: true, imports: [CommonModule, ReactiveFormsModule], providers: [
|
|
588
|
+
{
|
|
589
|
+
provide: NG_VALUE_ACCESSOR,
|
|
590
|
+
useExisting: forwardRef(() => RadioComponent),
|
|
591
|
+
multi: true
|
|
592
|
+
}
|
|
593
|
+
], template: "<div class=\"c-radio\">\n <label class=\"c-radio__label\" [for]=\"id || value\">\n <input\n type=\"radio\"\n class=\"c-radio__input\"\n [id]=\"id || value\"\n [name]=\"name\"\n [value]=\"value\"\n [checked]=\"value === _value\"\n (change)=\"onInputChange()\"\n (blur)=\"onBlur()\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n role=\"radio\"\n [attr.aria-checked]=\"value === _value ? 'true' : 'false'\"\n [attr.tabindex]=\"value === _value ? '0' : '-1'\"\n [disabled]=\"disabled\"\n />\n <span\n class=\"c-radio__custom\"\n [class.has-error]=\"error\"\n aria-hidden=\"true\"\n ></span>\n <span class=\"c-radio__text\">{{ label }}</span>\n </label>\n</div>\n", styles: [".c-radio{display:flex;align-items:center;font-family:var(--typography-label-md-default-family),sans-serif;font-weight:var(--typography-label-md-default-weight);font-size:var(--typography-label-md-default-size);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);color:var(--color-core-content-default)}.c-radio__input{position:absolute;opacity:0;pointer-events:none}.c-radio__label{display:flex;align-items:center;cursor:pointer;gap:var(--space-component-gap-sm)}.c-radio__custom{display:flex;align-items:center;justify-content:center;width:.9rem;height:.9rem;border-radius:var(--size-border-radius-full);border:var(--size-border-width-md) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);position:relative;transition:all .2s}.c-radio__input:checked+.c-radio__custom{border-color:var(--color-action-primary-selected-background-default);background:var(--color-action-primary-selected-background-default)}.c-radio__input:checked+.c-radio__custom:after{content:\"\";display:flex;width:calc(100% - 6px);height:calc(100% - 6px);border-radius:var(--size-border-radius-full);background:var(--color-action-primary-selected-content-default)}.c-radio__input:checked+.c-radio__custom:hover{background-color:var(--color-action-primary-selected-background-hover)}.c-radio__input:checked+.c-radio__custom:focus{outline:2px solid var(--focus-outset)}.c-radio__input:checked+.c-radio__custom:pressed{background-color:var(--color-textfield-border-pressed)}.c-radio__input:checked+.c-radio__custom:disabled{background-color:var(--color-action-primary-selected-background-disabled)}.c-radio__input:checked:disabled+.c-radio__custom{background-color:var(--color-textfield-content-disabled);border-color:var(--color-textfield-content-disabled)}.c-radio__input:disabled+.c-radio__custom{border-color:var(--color-textfield-content-disabled)}.c-radio__custom.has-error{border-color:var(--color-feedback-danger-surface-border)}.c-radio__input:checked+.c-radio__custom.has-error{background-color:var(--color-feedback-danger-surface-border);border-color:var(--color-feedback-danger-surface-border)}.c-radio__text{font-size:1rem;line-height:1.5;color:#000}.c-radio:hover__custom{border-color:var(--color-textfield-border-hover)}.c-radio:focus__custom{outline:2px solid var(--focus-outset)}.c-radio:pressed__custom{border-color:var(--color-textfield-border-pressed)}.c-radio:disabled{color:var(--color-textfield-content-disabled)}.c-radio:disabled__custom{border-color:var(--color-textfield-border-disabled)}\n"] }]
|
|
510
594
|
}], propDecorators: { id: [{
|
|
511
595
|
type: Input
|
|
512
596
|
}], name: [{
|
|
513
597
|
type: Input
|
|
514
598
|
}], value: [{
|
|
515
599
|
type: Input
|
|
516
|
-
}], model: [{
|
|
517
|
-
type: Input
|
|
518
600
|
}], label: [{
|
|
519
601
|
type: Input
|
|
520
602
|
}], error: [{
|
|
521
603
|
type: Input
|
|
522
|
-
}], checked: [{
|
|
523
|
-
type: Input
|
|
524
604
|
}], disabled: [{
|
|
525
605
|
type: Input
|
|
526
606
|
}], modelChange: [{
|
|
@@ -541,11 +621,11 @@ class RadioGroupComponent {
|
|
|
541
621
|
this.valueChange.emit(value);
|
|
542
622
|
}
|
|
543
623
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
544
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: RadioGroupComponent, isStandalone: true, selector: "lib-radio-group", inputs: { label: "label", name: "name", options: "options", value: "value", error: "error", helperText: "helperText", required: "required" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<fieldset [attr.aria-invalid]=\"error\" class=\"c-radio-group\">\n <legend class=\"sr-only\">{{ label }}</legend>\n <lib-input-label [text]=\"label\" [required]=\"required\" />\n \n <div class=\"c-radio-group__options\">\n <lib-radio\n *ngFor=\"let option of options\"\n [label]=\"option.label\"\n [value]=\"option.value\"\n [name]=\"name\"\n [
|
|
624
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: RadioGroupComponent, isStandalone: true, selector: "lib-radio-group", inputs: { label: "label", name: "name", options: "options", value: "value", error: "error", helperText: "helperText", required: "required" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<fieldset [attr.aria-invalid]=\"error\" class=\"c-radio-group\">\n <legend class=\"sr-only\">{{ label }}</legend>\n <lib-input-label [text]=\"label\" [required]=\"required\" />\n \n <div class=\"c-radio-group__options\">\n <lib-radio\n *ngFor=\"let option of options\"\n [label]=\"option.label\"\n [value]=\"option.value\"\n [name]=\"name\"\n [error]=\"error\"\n (change)=\"onChange(option.value)\"\n />\n </div>\n <p *ngIf=\"helperText\" class=\"c-radio-group__helper\"><lib-icon icon=\"alert\" class=\"c-radio-group__icon\" size=\"md\"/>{{ helperText }}</p>\n</fieldset>\n", styles: [".c-radio-group{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);border:0;padding:0}.c-radio-group__options{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:6px}.c-radio-group__helper{display:flex;align-items:center;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-size);line-height:var(--typography-label-sm-line-height);letter-spacing:var(--typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0}.c-radio-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: RadioComponent, selector: "lib-radio", inputs: ["id", "name", "value", "label", "error", "disabled"], outputs: ["modelChange"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
545
625
|
}
|
|
546
626
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
547
627
|
type: Component,
|
|
548
|
-
args: [{ selector: 'lib-radio-group', standalone: true, imports: [CommonModule, RadioComponent, InputLabelComponent, IconComponent], template: "<fieldset [attr.aria-invalid]=\"error\" class=\"c-radio-group\">\n <legend class=\"sr-only\">{{ label }}</legend>\n <lib-input-label [text]=\"label\" [required]=\"required\" />\n \n <div class=\"c-radio-group__options\">\n <lib-radio\n *ngFor=\"let option of options\"\n [label]=\"option.label\"\n [value]=\"option.value\"\n [name]=\"name\"\n [
|
|
628
|
+
args: [{ selector: 'lib-radio-group', standalone: true, imports: [CommonModule, RadioComponent, InputLabelComponent, IconComponent], template: "<fieldset [attr.aria-invalid]=\"error\" class=\"c-radio-group\">\n <legend class=\"sr-only\">{{ label }}</legend>\n <lib-input-label [text]=\"label\" [required]=\"required\" />\n \n <div class=\"c-radio-group__options\">\n <lib-radio\n *ngFor=\"let option of options\"\n [label]=\"option.label\"\n [value]=\"option.value\"\n [name]=\"name\"\n [error]=\"error\"\n (change)=\"onChange(option.value)\"\n />\n </div>\n <p *ngIf=\"helperText\" class=\"c-radio-group__helper\"><lib-icon icon=\"alert\" class=\"c-radio-group__icon\" size=\"md\"/>{{ helperText }}</p>\n</fieldset>\n", styles: [".c-radio-group{display:flex;flex-direction:column;gap:var(--space-container-gap-sm);border:0;padding:0}.c-radio-group__options{display:flex;flex-direction:column;gap:var(--space-container-gap-md);padding-left:6px}.c-radio-group__helper{display:flex;align-items:center;gap:var(--space-component-gap-sm);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-size);line-height:var(--typography-label-sm-line-height);letter-spacing:var(--typography-label-sm-letter-spacing);color:var(--color-feedback-danger-default);padding:0;margin:0}.c-radio-group__icon{display:flex}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
549
629
|
}], propDecorators: { label: [{
|
|
550
630
|
type: Input
|
|
551
631
|
}], name: [{
|
|
@@ -614,7 +694,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
614
694
|
class TextInputComponent {
|
|
615
695
|
label = '';
|
|
616
696
|
name = '';
|
|
617
|
-
value = '';
|
|
618
697
|
placeholder = '';
|
|
619
698
|
helperText = '';
|
|
620
699
|
error = false;
|
|
@@ -624,15 +703,31 @@ class TextInputComponent {
|
|
|
624
703
|
disabled = false;
|
|
625
704
|
readonly = false;
|
|
626
705
|
required = false;
|
|
706
|
+
type = 'text';
|
|
627
707
|
size = 'md';
|
|
628
708
|
emitValue = new EventEmitter();
|
|
709
|
+
_value = '';
|
|
710
|
+
onChangeFn = () => { };
|
|
711
|
+
onTouchedFn = () => { };
|
|
712
|
+
writeValue(value) {
|
|
713
|
+
this._value = value ?? '';
|
|
714
|
+
}
|
|
715
|
+
registerOnChange(fn) {
|
|
716
|
+
this.onChangeFn = fn;
|
|
717
|
+
}
|
|
718
|
+
registerOnTouched(fn) {
|
|
719
|
+
this.onTouchedFn = fn;
|
|
720
|
+
}
|
|
721
|
+
setDisabledState(isDisabled) {
|
|
722
|
+
this.disabled = isDisabled;
|
|
723
|
+
}
|
|
629
724
|
get inputClass() {
|
|
630
725
|
return [
|
|
631
726
|
'c-text-input__input',
|
|
632
727
|
`c-text-input__input--${this.size}`,
|
|
633
728
|
this.error ? 'is-error' : this.success ? 'is-success' : 'is-default',
|
|
634
729
|
this.disabled ? 'is-disabled' : '',
|
|
635
|
-
this.readonly ? 'is-readonly' : ''
|
|
730
|
+
this.readonly ? 'is-readonly' : ''
|
|
636
731
|
].filter(Boolean);
|
|
637
732
|
}
|
|
638
733
|
get helperClass() {
|
|
@@ -645,23 +740,42 @@ class TextInputComponent {
|
|
|
645
740
|
get ariaDescribedBy() {
|
|
646
741
|
return this.helperText ? 'text-input-helper' : null;
|
|
647
742
|
}
|
|
648
|
-
|
|
743
|
+
onInput(event) {
|
|
649
744
|
const input = event.target;
|
|
650
|
-
|
|
651
|
-
this.
|
|
745
|
+
this._value = input.value;
|
|
746
|
+
this.onChangeFn(this._value);
|
|
747
|
+
this.emitValue.emit(this._value);
|
|
748
|
+
}
|
|
749
|
+
onBlur() {
|
|
750
|
+
this.onTouchedFn();
|
|
652
751
|
}
|
|
653
752
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
654
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "lib-text-input", inputs: { label: "label", name: "name",
|
|
753
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextInputComponent, isStandalone: true, selector: "lib-text-input", inputs: { label: "label", name: "name", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", disabled: "disabled", readonly: "readonly", required: "required", type: "type", size: "size" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
754
|
+
{
|
|
755
|
+
provide: NG_VALUE_ACCESSOR,
|
|
756
|
+
useExisting: forwardRef(() => TextInputComponent),
|
|
757
|
+
multi: true
|
|
758
|
+
}
|
|
759
|
+
], ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\n ></lib-input-label>\n\n <input\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon icon=\"alert\" size=\"md\"></lib-icon>{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon icon=\"success\" size=\"md\"></lib-icon>{{ successText }}\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus{border:var(--size-component-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
655
760
|
}
|
|
656
761
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
657
762
|
type: Component,
|
|
658
|
-
args: [{ selector: 'lib-text-input', standalone: true, imports: [
|
|
763
|
+
args: [{ selector: 'lib-text-input', standalone: true, imports: [
|
|
764
|
+
CommonModule,
|
|
765
|
+
ReactiveFormsModule,
|
|
766
|
+
InputLabelComponent,
|
|
767
|
+
IconComponent
|
|
768
|
+
], providers: [
|
|
769
|
+
{
|
|
770
|
+
provide: NG_VALUE_ACCESSOR,
|
|
771
|
+
useExisting: forwardRef(() => TextInputComponent),
|
|
772
|
+
multi: true
|
|
773
|
+
}
|
|
774
|
+
], template: "<div class=\"c-text-input\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [for]=\"name\"\n [text]=\"label\"\n ></lib-input-label>\n\n <input\n [type]=\"type\"\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [value]=\"_value\"\n [required]=\"required\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [attr.aria-labelledby]=\"label\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n [class]=\"helperClass\"\n >\n {{ helperText }}\n </span>\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-icon icon=\"alert\" size=\"md\"></lib-icon>{{ alertText }}\n </span>\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-icon icon=\"success\" size=\"md\"></lib-icon>{{ successText }}\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus{border:var(--size-component-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"] }]
|
|
659
775
|
}], propDecorators: { label: [{
|
|
660
776
|
type: Input
|
|
661
777
|
}], name: [{
|
|
662
778
|
type: Input
|
|
663
|
-
}], value: [{
|
|
664
|
-
type: Input
|
|
665
779
|
}], placeholder: [{
|
|
666
780
|
type: Input
|
|
667
781
|
}], helperText: [{
|
|
@@ -680,6 +794,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
680
794
|
type: Input
|
|
681
795
|
}], required: [{
|
|
682
796
|
type: Input
|
|
797
|
+
}], type: [{
|
|
798
|
+
type: Input
|
|
683
799
|
}], size: [{
|
|
684
800
|
type: Input
|
|
685
801
|
}], emitValue: [{
|
|
@@ -688,52 +804,80 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
688
804
|
|
|
689
805
|
class TextareaComponent {
|
|
690
806
|
label = '';
|
|
691
|
-
value = '';
|
|
692
807
|
placeholder = '';
|
|
693
808
|
helperText = '';
|
|
694
809
|
error = false;
|
|
695
810
|
success = false;
|
|
696
811
|
successText = '';
|
|
697
812
|
alertText = '';
|
|
813
|
+
name = '';
|
|
698
814
|
disabled = false;
|
|
699
815
|
readonly = false;
|
|
700
816
|
required = false;
|
|
701
817
|
size = 'md';
|
|
702
818
|
emitValue = new EventEmitter();
|
|
819
|
+
_value = '';
|
|
820
|
+
onChangeFn = () => { };
|
|
821
|
+
onTouchedFn = () => { };
|
|
822
|
+
writeValue(value) {
|
|
823
|
+
this._value = value ?? '';
|
|
824
|
+
}
|
|
825
|
+
registerOnChange(fn) {
|
|
826
|
+
this.onChangeFn = fn;
|
|
827
|
+
}
|
|
828
|
+
registerOnTouched(fn) {
|
|
829
|
+
this.onTouchedFn = fn;
|
|
830
|
+
}
|
|
831
|
+
setDisabledState(isDisabled) {
|
|
832
|
+
this.disabled = isDisabled;
|
|
833
|
+
}
|
|
703
834
|
get inputClass() {
|
|
704
835
|
return [
|
|
705
836
|
'c-text-input__input',
|
|
706
837
|
`c-text-input__input--${this.size}`,
|
|
707
838
|
this.error ? 'is-error' : this.success ? 'is-success' : 'is-default',
|
|
708
839
|
this.disabled ? 'is-disabled' : '',
|
|
709
|
-
this.readonly ? 'is-readonly' : ''
|
|
840
|
+
this.readonly ? 'is-readonly' : ''
|
|
710
841
|
].filter(Boolean);
|
|
711
842
|
}
|
|
712
|
-
get helperClass() {
|
|
713
|
-
if (this.error)
|
|
714
|
-
return 'is-error';
|
|
715
|
-
if (this.success)
|
|
716
|
-
return 'is-success';
|
|
717
|
-
return 'is-default';
|
|
718
|
-
}
|
|
719
843
|
get ariaDescribedBy() {
|
|
720
844
|
return this.helperText ? 'text-input-helper' : null;
|
|
721
845
|
}
|
|
722
|
-
|
|
846
|
+
onInput(event) {
|
|
723
847
|
const input = event.target;
|
|
724
|
-
|
|
725
|
-
this.
|
|
848
|
+
this._value = input.value;
|
|
849
|
+
this.onChangeFn(this._value);
|
|
850
|
+
this.emitValue.emit(this._value);
|
|
851
|
+
}
|
|
852
|
+
onBlur() {
|
|
853
|
+
this.onTouchedFn();
|
|
726
854
|
}
|
|
727
855
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
728
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextareaComponent, isStandalone: true, selector: "lib-textarea", inputs: { label: "label",
|
|
856
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: TextareaComponent, isStandalone: true, selector: "lib-textarea", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", error: "error", success: "success", successText: "successText", alertText: "alertText", name: "name", disabled: "disabled", readonly: "readonly", required: "required", size: "size" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
857
|
+
{
|
|
858
|
+
provide: NG_VALUE_ACCESSOR,
|
|
859
|
+
useExisting: forwardRef(() => TextareaComponent),
|
|
860
|
+
multi: true
|
|
861
|
+
}
|
|
862
|
+
], ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <textarea\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [required]=\"required\"\n [value]=\"_value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name\"\n ></textarea>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
729
863
|
}
|
|
730
864
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
731
865
|
type: Component,
|
|
732
|
-
args: [{ selector: 'lib-textarea',
|
|
866
|
+
args: [{ selector: 'lib-textarea', standalone: true, imports: [
|
|
867
|
+
CommonModule,
|
|
868
|
+
ReactiveFormsModule,
|
|
869
|
+
InputLabelComponent,
|
|
870
|
+
IconComponent,
|
|
871
|
+
HelperTextComponent
|
|
872
|
+
], providers: [
|
|
873
|
+
{
|
|
874
|
+
provide: NG_VALUE_ACCESSOR,
|
|
875
|
+
useExisting: forwardRef(() => TextareaComponent),
|
|
876
|
+
multi: true
|
|
877
|
+
}
|
|
878
|
+
], template: "<div class=\"c-text-input\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <textarea\n [class]=\"inputClass.join(' ')\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [attr.aria-label]=\"label\"\n [required]=\"required\"\n [value]=\"_value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [name]=\"name\"\n ></textarea>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"text-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}\n"] }]
|
|
733
879
|
}], propDecorators: { label: [{
|
|
734
880
|
type: Input
|
|
735
|
-
}], value: [{
|
|
736
|
-
type: Input
|
|
737
881
|
}], placeholder: [{
|
|
738
882
|
type: Input
|
|
739
883
|
}], helperText: [{
|
|
@@ -746,6 +890,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
746
890
|
type: Input
|
|
747
891
|
}], alertText: [{
|
|
748
892
|
type: Input
|
|
893
|
+
}], name: [{
|
|
894
|
+
type: Input
|
|
749
895
|
}], disabled: [{
|
|
750
896
|
type: Input
|
|
751
897
|
}], readonly: [{
|
|
@@ -805,7 +951,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
805
951
|
|
|
806
952
|
class InputDateComponent {
|
|
807
953
|
label = '';
|
|
808
|
-
value = '';
|
|
809
954
|
placeholder = '';
|
|
810
955
|
helperText = '';
|
|
811
956
|
alertText = '';
|
|
@@ -817,6 +962,21 @@ class InputDateComponent {
|
|
|
817
962
|
required = false;
|
|
818
963
|
size = 'md';
|
|
819
964
|
emitValue = new EventEmitter();
|
|
965
|
+
_value = '';
|
|
966
|
+
onChangeFn = () => { };
|
|
967
|
+
onTouchedFn = () => { };
|
|
968
|
+
writeValue(value) {
|
|
969
|
+
this._value = value ?? '';
|
|
970
|
+
}
|
|
971
|
+
registerOnChange(fn) {
|
|
972
|
+
this.onChangeFn = fn;
|
|
973
|
+
}
|
|
974
|
+
registerOnTouched(fn) {
|
|
975
|
+
this.onTouchedFn = fn;
|
|
976
|
+
}
|
|
977
|
+
setDisabledState(isDisabled) {
|
|
978
|
+
this.disabled = isDisabled;
|
|
979
|
+
}
|
|
820
980
|
get inputClass() {
|
|
821
981
|
return [
|
|
822
982
|
'c-text-input__input',
|
|
@@ -828,32 +988,47 @@ class InputDateComponent {
|
|
|
828
988
|
].filter(Boolean);
|
|
829
989
|
}
|
|
830
990
|
get ariaDescribedBy() {
|
|
831
|
-
return this.helperText ? '
|
|
991
|
+
return this.helperText ? 'password-input-helper' : null;
|
|
832
992
|
}
|
|
833
993
|
toggleCalendar() {
|
|
834
994
|
console.log('Toggle calendar functionality not implemented yet.');
|
|
835
995
|
}
|
|
836
|
-
|
|
996
|
+
onInput(event) {
|
|
837
997
|
const input = event.target;
|
|
838
|
-
|
|
839
|
-
this.
|
|
998
|
+
this._value = input.value;
|
|
999
|
+
this.onChangeFn(this._value);
|
|
1000
|
+
this.emitValue.emit(this._value);
|
|
1001
|
+
}
|
|
1002
|
+
onBlur() {
|
|
1003
|
+
this.onTouchedFn();
|
|
840
1004
|
}
|
|
841
1005
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
842
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputDateComponent, isStandalone: true, selector: "lib-input-date", inputs: { label: "label",
|
|
1006
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputDateComponent, isStandalone: true, selector: "lib-input-date", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
1007
|
+
{
|
|
1008
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1009
|
+
useExisting: forwardRef(() => InputDateComponent),
|
|
1010
|
+
multi: true
|
|
1011
|
+
}
|
|
1012
|
+
], ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n aria-label=\"date\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"Calendario\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"toggleCalendar()\"\n >\n <lib-icon icon=\"calendar\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus{border:var(--size-component-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "disabled", "loading", "variant", "size"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
843
1013
|
}
|
|
844
1014
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
845
1015
|
type: Component,
|
|
846
|
-
args: [{ selector: 'lib-input-date', imports: [
|
|
1016
|
+
args: [{ selector: 'lib-input-date', standalone: true, imports: [
|
|
847
1017
|
CommonModule,
|
|
1018
|
+
ReactiveFormsModule,
|
|
848
1019
|
InputLabelComponent,
|
|
849
1020
|
IconComponent,
|
|
850
1021
|
ButtonIconComponent,
|
|
851
1022
|
HelperTextComponent
|
|
852
|
-
],
|
|
1023
|
+
], providers: [
|
|
1024
|
+
{
|
|
1025
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1026
|
+
useExisting: forwardRef(() => InputDateComponent),
|
|
1027
|
+
multi: true
|
|
1028
|
+
}
|
|
1029
|
+
], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [required]=\"required\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n aria-label=\"date\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"Calendario\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"toggleCalendar()\"\n >\n <lib-icon icon=\"calendar\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"password-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-lg);align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus{border:var(--size-component-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-md)}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__toggle{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"] }]
|
|
853
1030
|
}], propDecorators: { label: [{
|
|
854
1031
|
type: Input
|
|
855
|
-
}], value: [{
|
|
856
|
-
type: Input
|
|
857
1032
|
}], placeholder: [{
|
|
858
1033
|
type: Input
|
|
859
1034
|
}], helperText: [{
|
|
@@ -880,7 +1055,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
880
1055
|
|
|
881
1056
|
class InputNumberComponent {
|
|
882
1057
|
label = '';
|
|
883
|
-
value = 0;
|
|
884
1058
|
placeholder = '';
|
|
885
1059
|
helperText = '';
|
|
886
1060
|
alertText = '';
|
|
@@ -892,7 +1066,22 @@ class InputNumberComponent {
|
|
|
892
1066
|
readonly = false;
|
|
893
1067
|
size = 'md';
|
|
894
1068
|
variant = 'default';
|
|
1069
|
+
value = 0;
|
|
895
1070
|
emitValue = new EventEmitter();
|
|
1071
|
+
onChangeFn = () => { };
|
|
1072
|
+
onTouchedFn = () => { };
|
|
1073
|
+
writeValue(value) {
|
|
1074
|
+
this.value = value ?? 0;
|
|
1075
|
+
}
|
|
1076
|
+
registerOnChange(fn) {
|
|
1077
|
+
this.onChangeFn = fn;
|
|
1078
|
+
}
|
|
1079
|
+
registerOnTouched(fn) {
|
|
1080
|
+
this.onTouchedFn = fn;
|
|
1081
|
+
}
|
|
1082
|
+
setDisabledState(isDisabled) {
|
|
1083
|
+
this.disabled = isDisabled;
|
|
1084
|
+
}
|
|
896
1085
|
get inputClass() {
|
|
897
1086
|
return [
|
|
898
1087
|
'c-text-input__input',
|
|
@@ -906,33 +1095,53 @@ class InputNumberComponent {
|
|
|
906
1095
|
get ariaDescribedBy() {
|
|
907
1096
|
return this.helperText ? 'search-input-helper' : null;
|
|
908
1097
|
}
|
|
1098
|
+
onType(event) {
|
|
1099
|
+
const input = event.target;
|
|
1100
|
+
const newVal = input.value === '' ? 0 : Number(input.value);
|
|
1101
|
+
this.value = newVal;
|
|
1102
|
+
this.onChangeFn(newVal);
|
|
1103
|
+
this.emitValue.emit(newVal);
|
|
1104
|
+
}
|
|
909
1105
|
upNumber() {
|
|
910
1106
|
this.value++;
|
|
1107
|
+
this.onChangeFn(this.value);
|
|
1108
|
+
this.emitValue.emit(this.value);
|
|
911
1109
|
}
|
|
912
1110
|
downNumber() {
|
|
913
1111
|
this.value--;
|
|
1112
|
+
this.onChangeFn(this.value);
|
|
1113
|
+
this.emitValue.emit(this.value);
|
|
914
1114
|
}
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
const value = input.value;
|
|
918
|
-
this.emitValue.emit(value);
|
|
1115
|
+
onBlur() {
|
|
1116
|
+
this.onTouchedFn();
|
|
919
1117
|
}
|
|
920
1118
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
921
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputNumberComponent, isStandalone: true, selector: "lib-input-number", inputs: { label: "label",
|
|
1119
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputNumberComponent, isStandalone: true, selector: "lib-input-number", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", required: "required", readonly: "readonly", size: "size", variant: "variant" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
1120
|
+
{
|
|
1121
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1122
|
+
useExisting: forwardRef(() => InputNumberComponent),
|
|
1123
|
+
multi: true
|
|
1124
|
+
}
|
|
1125
|
+
], ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__less\"\n (click)=\"downNumber()\"\n >\n <lib-icon icon=\"less\" size=\"md\" iconBefore />\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__up\"\n (click)=\"upNumber()\"\n >\n <lib-icon icon=\"plus\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) 2rem var(--space-component-padding-sm) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-align:center}.c-text-input__input:focus{border:var(--size-component-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__less{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "disabled", "loading", "variant", "size"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
922
1126
|
}
|
|
923
1127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
924
1128
|
type: Component,
|
|
925
|
-
args: [{ selector: 'lib-input-number', imports: [
|
|
1129
|
+
args: [{ selector: 'lib-input-number', standalone: true, imports: [
|
|
926
1130
|
CommonModule,
|
|
1131
|
+
ReactiveFormsModule,
|
|
927
1132
|
InputLabelComponent,
|
|
928
1133
|
IconComponent,
|
|
929
1134
|
ButtonIconComponent,
|
|
930
1135
|
HelperTextComponent
|
|
931
|
-
],
|
|
1136
|
+
], providers: [
|
|
1137
|
+
{
|
|
1138
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1139
|
+
useExisting: forwardRef(() => InputNumberComponent),
|
|
1140
|
+
multi: true
|
|
1141
|
+
}
|
|
1142
|
+
], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n\n <div\n class=\"c-text-input__wrapper\"\n [class.c-text-input__wrapper--right]=\"variant === 'right'\"\n >\n <input\n type=\"number\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n aria-label=\"number\"\n (input)=\"onType($event)\"\n (blur)=\"onBlur()\"\n />\n <lib-button-icon\n ariaLabel=\"menos\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__less\"\n (click)=\"downNumber()\"\n >\n <lib-icon icon=\"less\" size=\"md\" iconBefore />\n </lib-button-icon>\n <lib-button-icon\n ariaLabel=\"m\u00E1s\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__up\"\n (click)=\"upNumber()\"\n >\n <lib-icon icon=\"plus\" size=\"md\" iconBefore />\n </lib-button-icon>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) 2rem var(--space-component-padding-sm) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing);text-align:center}.c-text-input__input:focus{border:var(--size-component-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__less{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__wrapper--right .c-text-input__less{position:absolute;top:50%;right:calc(2rem + var(--space-component-padding-sm));transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;left:initial}.c-text-input__wrapper--right .c-text-input__up{position:absolute;top:50%;right:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
|
|
932
1143
|
}], propDecorators: { label: [{
|
|
933
1144
|
type: Input
|
|
934
|
-
}], value: [{
|
|
935
|
-
type: Input
|
|
936
1145
|
}], placeholder: [{
|
|
937
1146
|
type: Input
|
|
938
1147
|
}], helperText: [{
|
|
@@ -961,7 +1170,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
961
1170
|
|
|
962
1171
|
class InputSearchComponent {
|
|
963
1172
|
label = '';
|
|
964
|
-
value = '';
|
|
965
1173
|
placeholder = '';
|
|
966
1174
|
helperText = '';
|
|
967
1175
|
alertText = '';
|
|
@@ -973,6 +1181,31 @@ class InputSearchComponent {
|
|
|
973
1181
|
required = false;
|
|
974
1182
|
size = 'md';
|
|
975
1183
|
emitValue = new EventEmitter();
|
|
1184
|
+
_value = '';
|
|
1185
|
+
onChangeFn = () => { };
|
|
1186
|
+
onTouchedFn = () => { };
|
|
1187
|
+
writeValue(value) {
|
|
1188
|
+
this._value = value ?? '';
|
|
1189
|
+
}
|
|
1190
|
+
registerOnChange(fn) {
|
|
1191
|
+
this.onChangeFn = fn;
|
|
1192
|
+
}
|
|
1193
|
+
registerOnTouched(fn) {
|
|
1194
|
+
this.onTouchedFn = fn;
|
|
1195
|
+
}
|
|
1196
|
+
setDisabledState(isDisabled) {
|
|
1197
|
+
this.disabled = isDisabled;
|
|
1198
|
+
}
|
|
1199
|
+
// ------------------------------
|
|
1200
|
+
onInput(event) {
|
|
1201
|
+
const input = event.target;
|
|
1202
|
+
this._value = input.value;
|
|
1203
|
+
this.onChangeFn(this._value);
|
|
1204
|
+
this.emitValue.emit(this._value);
|
|
1205
|
+
}
|
|
1206
|
+
onBlur() {
|
|
1207
|
+
this.onTouchedFn();
|
|
1208
|
+
}
|
|
976
1209
|
get inputClass() {
|
|
977
1210
|
return [
|
|
978
1211
|
'c-text-input__input',
|
|
@@ -980,32 +1213,38 @@ class InputSearchComponent {
|
|
|
980
1213
|
this.error ? 'is-error' : '',
|
|
981
1214
|
this.success ? 'is-success' : '',
|
|
982
1215
|
this.disabled ? 'is-disabled' : '',
|
|
983
|
-
this.readonly ? 'is-readonly' : ''
|
|
1216
|
+
this.readonly ? 'is-readonly' : ''
|
|
984
1217
|
].filter(Boolean);
|
|
985
1218
|
}
|
|
986
1219
|
get ariaDescribedBy() {
|
|
987
1220
|
return this.helperText ? 'search-input-helper' : null;
|
|
988
1221
|
}
|
|
989
|
-
onType(event) {
|
|
990
|
-
const input = event.target;
|
|
991
|
-
const value = input.value;
|
|
992
|
-
this.emitValue.emit(value);
|
|
993
|
-
}
|
|
994
1222
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
995
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputSearchComponent, isStandalone: true, selector: "lib-input-search", inputs: { label: "label",
|
|
1223
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputSearchComponent, isStandalone: true, selector: "lib-input-search", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
1224
|
+
{
|
|
1225
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1226
|
+
useExisting: forwardRef(() => InputSearchComponent),
|
|
1227
|
+
multi: true
|
|
1228
|
+
}
|
|
1229
|
+
], ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label ? label : 'Search input'\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon icon=\"search\" size=\"md\"></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-sm) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus{border:var(--size-component-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
996
1230
|
}
|
|
997
1231
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, decorators: [{
|
|
998
1232
|
type: Component,
|
|
999
|
-
args: [{ selector: 'lib-input-search', imports: [
|
|
1233
|
+
args: [{ selector: 'lib-input-search', standalone: true, imports: [
|
|
1000
1234
|
CommonModule,
|
|
1235
|
+
ReactiveFormsModule,
|
|
1001
1236
|
InputLabelComponent,
|
|
1002
1237
|
IconComponent,
|
|
1003
1238
|
HelperTextComponent
|
|
1004
|
-
],
|
|
1239
|
+
], providers: [
|
|
1240
|
+
{
|
|
1241
|
+
provide: NG_VALUE_ACCESSOR,
|
|
1242
|
+
useExisting: forwardRef(() => InputSearchComponent),
|
|
1243
|
+
multi: true
|
|
1244
|
+
}
|
|
1245
|
+
], template: "<div class=\"c-text-input\">\n <lib-input-label *ngIf=\"label\" [required]=\"required\" [text]=\"label\"></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n [value]=\"_value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n [attr.aria-label]=\"label ? label : 'Search input'\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon icon=\"search\" size=\"md\"></lib-icon>\n </span>\n </div>\n\n <span\n *ngIf=\"helperText && !error && !success\"\n id=\"search-input-helper\"\n class=\"c-text-input__helper\"\n >\n <lib-helper-text [text]=\"helperText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\n\n <span *ngIf=\"successText && success\" class=\"c-text-input__success\">\n <lib-helper-text variant=\"success\" [text]=\"successText\"></lib-helper-text>\n </span>\n</div>\n", styles: [".c-text-input{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--space-component-gap-sm);max-width:300px}.c-text-input__input{width:100%;border-radius:var(--size-component-border-radius);border:var(--size-component-border-width) solid var(--color-textfield-border-default);background:var(--color-textfield-background-default);padding:var(--space-component-padding-sm) var(--space-component-padding-sm) var(--space-component-padding-sm) 2rem;align-items:center;gap:var(--space-component-gap-sm);align-self:stretch;color:var(--color-textfield-content-default);font-family:var(--typography-label-md-default-family);font-size:var(--typography-label-md-default-size);font-style:normal;font-weight:var(--typography-label-md-default-weight);line-height:var(--typography-label-md-default-line-height);letter-spacing:var(--typography-label-md-default-letter-spacing)}.c-text-input__input:focus{border:var(--size-component-border-width) solid var(--color-textfield-border-active);outline:none}.c-text-input__input--sm,.c-text-input__input--md{padding:var(--space-component-padding-xs) var(--space-component-padding-xs) var(--space-component-padding-xs) 2rem}.c-text-input__input.is-error{border-color:var(--color-textfield-border-error)}.c-text-input__input.is-success{border-color:var(--color-feedback-success-surface-border)}.c-text-input__input.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-text-input__input.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-text-input__alert{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-danger-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__success{display:flex;gap:var(--space-component-gap-sm);color:var(--color-feedback-success-default);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper{color:var(--color-core-content-soft);font-family:var(--typography-label-sm-default-family);font-size:var(--typography-label-sm-default-size);font-style:normal;font-weight:var(--typography-label-sm-default-weight);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-text-input__helper.is-error{color:var(--color-textfield-helper-error)}.c-text-input__helper.is-success{color:var(--color-textfield-helper-success)}.c-text-input__helper.is-default{color:var(--color-textfield-helper-default)}.c-text-input__wrapper{display:flex;position:relative;width:100%}.c-text-input__icon{position:absolute;top:50%;left:var(--space-component-padding-sm);transform:translateY(-50%);background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center}\n"] }]
|
|
1005
1246
|
}], propDecorators: { label: [{
|
|
1006
1247
|
type: Input
|
|
1007
|
-
}], value: [{
|
|
1008
|
-
type: Input
|
|
1009
1248
|
}], placeholder: [{
|
|
1010
1249
|
type: Input
|
|
1011
1250
|
}], helperText: [{
|