@crowdfarming/oliva-ds 1.7.0 → 1.7.1
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 +156 -103
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/lib/button/src/lib/button/button.component.d.ts +2 -1
- package/lib/input-date/src/lib/input-date/input-date.component.d.ts +2 -1
- package/lib/input-number/src/lib/input-number/input-number.component.d.ts +2 -1
- package/lib/input-payment/src/lib/input-payment/input-payment.component.d.ts +2 -1
- package/lib/input-search/src/lib/input-search/input-search.component.d.ts +2 -1
- package/lib/input-upload/src/lib/input-upload/input-upload.component.d.ts +2 -1
- package/lib/link/src/lib/link/link.component.d.ts +9 -3
- package/lib/password-input/src/lib/password-input/password-input.component.d.ts +2 -1
- package/lib/select/src/lib/select/select.component.d.ts +2 -1
- package/lib/text-input/src/lib/text-input/text-input.component.d.ts +2 -1
- package/lib/textarea/src/lib/textarea/textarea.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -48,11 +48,11 @@ class AccordionComponent {
|
|
|
48
48
|
this.toggled.emit(this.expanded);
|
|
49
49
|
}
|
|
50
50
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
51
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: AccordionComponent, isStandalone: true, selector: "lib-accordion", inputs: { id: "id", expanded: "expanded", size: "size", title: "title", showText: "showText", text: "text", showSlot: "showSlot", swapTemplate: "swapTemplate" }, outputs: { expandedChange: "expandedChange", toggled: "toggled" }, ngImport: i0, template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <ng-container *ngIf=\"showSlot\">\n <ng-content></ng-content>\n </ng-container>\n <div class=\"c-accordion__text\" *ngIf=\"!showSlot && showText\">\n {{ text }}\n </div>\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;
|
|
51
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: AccordionComponent, isStandalone: true, selector: "lib-accordion", inputs: { id: "id", expanded: "expanded", size: "size", title: "title", showText: "showText", text: "text", showSlot: "showSlot", swapTemplate: "swapTemplate" }, outputs: { expandedChange: "expandedChange", toggled: "toggled" }, ngImport: i0, template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <ng-container *ngIf=\"showSlot\">\n <ng-content></ng-content>\n </ng-container>\n <div class=\"c-accordion__text\" *ngIf=\"!showSlot && showText\">\n {{ text }}\n </div>\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:1px solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus{box-shadow:0 0 0 2px var(--color-effect-focus-color, #eaa42c) inset,0 0 0 4px var(--color-effect-focus-contrast, #fff) inset}.c-accordion__header:pressed{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }] });
|
|
52
52
|
}
|
|
53
53
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
54
54
|
type: Component,
|
|
55
|
-
args: [{ selector: 'lib-accordion', standalone: true, imports: [CommonModule, IconComponent], template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <ng-container *ngIf=\"showSlot\">\n <ng-content></ng-content>\n </ng-container>\n <div class=\"c-accordion__text\" *ngIf=\"!showSlot && showText\">\n {{ text }}\n </div>\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;
|
|
55
|
+
args: [{ selector: 'lib-accordion', standalone: true, imports: [CommonModule, IconComponent], template: "<div\n class=\"c-accordion\"\n [class.c-accordion--expanded]=\"expanded\"\n [class.c-accordion--sm]=\"size==='sm'\"\n [class.c-accordion--md]=\"size==='md'\"\n>\n <div\n class=\"c-accordion__header\"\n role=\"button\"\n [id]=\"id + '-header'\"\n tabindex=\"0\"\n [attr.aria-expanded]=\"expanded\"\n [attr.aria-controls]=\"id + '-content'\"\n (click)=\"toggle()\"\n (keydown.enter)=\"toggle()\"\n (keydown.space)=\"toggle()\"\n >\n <span class=\"c-accordion__title\">{{ title }}</span>\n <span class=\"c-accordion__arrow\" *ngIf=\"!expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-accordion__arrow\" *ngIf=\"expanded\" [class.open]=\"expanded\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div\n class=\"c-accordion__content\"\n *ngIf=\"expanded\"\n [id]=\"id + '-content'\"\n role=\"region\"\n [attr.aria-labelledby]=\"id + '-header'\"\n >\n <ng-container *ngIf=\"swapTemplate; else normalContent\">\n <ng-container *ngTemplateOutlet=\"swapTemplate\"></ng-container>\n </ng-container>\n <ng-template #normalContent>\n <ng-container *ngIf=\"showSlot\">\n <ng-content></ng-content>\n </ng-container>\n <div class=\"c-accordion__text\" *ngIf=\"!showSlot && showText\">\n {{ text }}\n </div>\n </ng-template>\n </div>\n</div>\n", styles: [".c-accordion{display:flex;flex-direction:column;align-items:stretch;overflow:hidden;border-bottom:1px solid var(--color-core-border-soft, #d6e0df)}.c-accordion--sm .c-accordion__header{padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem)}.c-accordion--sm .c-accordion__title{font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__text{font-size:var(--typography-body-sm-size, .875rem);font-style:normal;font-weight:var(--typography-body-sm-weight, 400);line-height:var(--typography-body-sm-line-height, 1.25rem);letter-spacing:var(--typography-body-sm-letter-spacing, 0rem)}.c-accordion--sm .c-accordion__content{display:flex;padding:0rem var(--space-component-padding-sm, .5rem) var(--space-component-padding-md, .75rem) var(--space-component-padding-sm, .5rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__header{display:flex;justify-content:space-between;align-items:center;background:var(--color-textfield-background-default, #f7f7f7);padding:var(--space-component-padding-xl, 1.5rem) var(--space-component-padding-lg, 1rem);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s;align-self:stretch;box-sizing:border-box}.c-accordion__header:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-accordion__header:focus{box-shadow:0 0 0 2px var(--color-effect-focus-color, #eaa42c) inset,0 0 0 4px var(--color-effect-focus-contrast, #fff) inset}.c-accordion__header:pressed{background:var(--color-action-neutral-background-pressed, rgba(0, 0, 0, .06))}.c-accordion__title{flex:1;color:var(--color-core-content-default, #070707);font-family:var(--typography-label-lg-default-family, Satoshi);font-size:var(--typography-label-lg-strong-size, 1.125rem);font-style:normal;font-weight:var(--typography-label-lg-strong-weight, 700);line-height:var(--typography-label-lg-strong-line-height, 1.75rem);letter-spacing:var(--typography-label-lg-strong-letter-spacing, 0rem)}.c-accordion__content{display:flex;padding:0rem var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem) var(--space-component-padding-lg, 1rem);flex-direction:column;align-items:flex-start;gap:var(--space-component-gap-md, .5rem);align-self:stretch}.c-accordion__text{color:var(--color-core-content-soft, #535858);font-family:var(--typography-body-md-family, Satoshi);font-size:var(--typography-body-md-size, 1rem);font-style:normal;font-weight:var(--typography-body-md-weight, 400);line-height:var(--typography-body-md-line-height, 1.5rem);letter-spacing:var(--typography-body-md-letter-spacing, 0rem)}\n"] }]
|
|
56
56
|
}], propDecorators: { id: [{
|
|
57
57
|
type: Input
|
|
58
58
|
}], expanded: [{
|
|
@@ -208,6 +208,7 @@ class ButtonComponent {
|
|
|
208
208
|
variant = 'primary';
|
|
209
209
|
size = 'primary';
|
|
210
210
|
loadingText = '';
|
|
211
|
+
fullWidth = false;
|
|
211
212
|
iconBeforeContent;
|
|
212
213
|
iconAfterContent;
|
|
213
214
|
hasIconBefore = false;
|
|
@@ -222,7 +223,8 @@ class ButtonComponent {
|
|
|
222
223
|
`c-button--${this.variant}`,
|
|
223
224
|
`c-button--${this.size}`,
|
|
224
225
|
this.loading ? 'is-loading' : '',
|
|
225
|
-
this.disabled ? 'c-button--disabled' : ''
|
|
226
|
+
this.disabled ? 'c-button--disabled' : '',
|
|
227
|
+
this.fullWidth ? 'c-button--full-width' : '',
|
|
226
228
|
];
|
|
227
229
|
return c.filter(Boolean).join(' ');
|
|
228
230
|
}
|
|
@@ -232,11 +234,11 @@ class ButtonComponent {
|
|
|
232
234
|
return null;
|
|
233
235
|
}
|
|
234
236
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
235
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { text: "text", ariaLabel: "ariaLabel", disabled: "disabled", loading: "loading", variant: "variant", size: "size", loadingText: "loadingText" }, queries: [{ propertyName: "iconBeforeContent", first: true, predicate: ["iconBefore"], descendants: true, read: ElementRef }, { propertyName: "iconAfterContent", first: true, predicate: ["iconAfter"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"computedAriaLabel\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n <!-- Spinner visual -->\n <span *ngIf=\"loading\" class=\"c-button__loading\" aria-hidden=\"true\"><lib-icon icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></span>\n\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"hasIconBefore && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n\n <!-- Texto -->\n <span *ngIf=\"text && !loading\" class=\"c-button__text\">{{ text }}</span>\n <span *ngIf=\"loading\" class=\"c-button__text\">{{ loadingText }}</span>\n\n <!-- Icon despu\u00E9s -->\n <span *ngIf=\"hasIconAfter && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconAfter]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button{display:flex;align-items:center;gap:var(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-border-default);border:var(--size-button-border-width) solid var(--color-button-primary-background-default)}.c-button:hover{background-color:var(--color-button-primary-border-hover);border:var(--size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button:focus{outline:2px solid var(--focus-outset)}.c-button:pressed{background-color:var(--color-button-primary-border-processed);border:var(--size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button__icon,.c-button__loading{width:24px;height:24px}.c-button--md{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{gap:var(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-2xs) var(--space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}.c-button--secondary{background-color:transparent;border:var(--size-button-border-width) solid var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--secondary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-secondary-background-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary{background-color:transparent;border:var(--size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--tertiary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button--danger{background-color:var(--color-button-danger-background-default);border:var(--size-button-border-width) solid var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--size-button-border-width) solid var(--color-button-danger-border-hover)}.c-button--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--size-button-border-width) solid var(--color-button-danger-border-pressed)}.c-button--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--size-button-border-width) solid var(--color-button-danger-border-disabled)}.c-button--inverse{background-color:var(--color-button-inverse-background-default);border:var(--size-button-border-width) solid var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:hover{background-color:var(--color-button-inverse-background-hover);border:var(--size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button--inverse:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-border-pressed)}.c-button--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--size-button-border-width) solid var(--color-button-inverse-border-disabled)}\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"] }] });
|
|
237
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { text: "text", ariaLabel: "ariaLabel", disabled: "disabled", loading: "loading", variant: "variant", size: "size", loadingText: "loadingText", fullWidth: "fullWidth" }, queries: [{ propertyName: "iconBeforeContent", first: true, predicate: ["iconBefore"], descendants: true, read: ElementRef }, { propertyName: "iconAfterContent", first: true, predicate: ["iconAfter"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"computedAriaLabel\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n <!-- Spinner visual -->\n <span *ngIf=\"loading\" class=\"c-button__loading\" aria-hidden=\"true\"><lib-icon icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></span>\n\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"hasIconBefore && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n\n <!-- Texto -->\n <span *ngIf=\"text && !loading\" class=\"c-button__text\">{{ text }}</span>\n <span *ngIf=\"loading\" class=\"c-button__text\">{{ loadingText }}</span>\n\n <!-- Icon despu\u00E9s -->\n <span *ngIf=\"hasIconAfter && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconAfter]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button{display:flex;align-items:center;gap:var(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-border-default);border:var(--size-button-border-width) solid var(--color-button-primary-background-default)}.c-button:hover{background-color:var(--color-button-primary-border-hover);border:var(--size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button:focus{outline:2px solid var(--focus-outset)}.c-button:pressed{background-color:var(--color-button-primary-border-processed);border:var(--size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button__icon,.c-button__loading{width:24px;height:24px}.c-button--md{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{gap:var(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-2xs) var(--space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}.c-button--secondary{background-color:transparent;border:var(--size-button-border-width) solid var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--secondary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-secondary-background-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary{background-color:transparent;border:var(--size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--tertiary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button--danger{background-color:var(--color-button-danger-background-default);border:var(--size-button-border-width) solid var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--size-button-border-width) solid var(--color-button-danger-border-hover)}.c-button--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--size-button-border-width) solid var(--color-button-danger-border-pressed)}.c-button--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--size-button-border-width) solid var(--color-button-danger-border-disabled)}.c-button--inverse{background-color:var(--color-button-inverse-background-default);border:var(--size-button-border-width) solid var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:hover{background-color:var(--color-button-inverse-background-hover);border:var(--size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button--inverse:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-border-pressed)}.c-button--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--size-button-border-width) solid var(--color-button-inverse-border-disabled)}.c-button--full-width{width:100%;justify-content:center}\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"] }] });
|
|
236
238
|
}
|
|
237
239
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
238
240
|
type: Component,
|
|
239
|
-
args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule, IconComponent], template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"computedAriaLabel\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n <!-- Spinner visual -->\n <span *ngIf=\"loading\" class=\"c-button__loading\" aria-hidden=\"true\"><lib-icon icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></span>\n\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"hasIconBefore && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n\n <!-- Texto -->\n <span *ngIf=\"text && !loading\" class=\"c-button__text\">{{ text }}</span>\n <span *ngIf=\"loading\" class=\"c-button__text\">{{ loadingText }}</span>\n\n <!-- Icon despu\u00E9s -->\n <span *ngIf=\"hasIconAfter && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconAfter]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button{display:flex;align-items:center;gap:var(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-border-default);border:var(--size-button-border-width) solid var(--color-button-primary-background-default)}.c-button:hover{background-color:var(--color-button-primary-border-hover);border:var(--size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button:focus{outline:2px solid var(--focus-outset)}.c-button:pressed{background-color:var(--color-button-primary-border-processed);border:var(--size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button__icon,.c-button__loading{width:24px;height:24px}.c-button--md{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{gap:var(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-2xs) var(--space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}.c-button--secondary{background-color:transparent;border:var(--size-button-border-width) solid var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--secondary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-secondary-background-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary{background-color:transparent;border:var(--size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--tertiary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button--danger{background-color:var(--color-button-danger-background-default);border:var(--size-button-border-width) solid var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--size-button-border-width) solid var(--color-button-danger-border-hover)}.c-button--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--size-button-border-width) solid var(--color-button-danger-border-pressed)}.c-button--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--size-button-border-width) solid var(--color-button-danger-border-disabled)}.c-button--inverse{background-color:var(--color-button-inverse-background-default);border:var(--size-button-border-width) solid var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:hover{background-color:var(--color-button-inverse-background-hover);border:var(--size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button--inverse:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-border-pressed)}.c-button--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--size-button-border-width) solid var(--color-button-inverse-border-disabled)}\n"] }]
|
|
241
|
+
args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule, IconComponent], template: "<button\n type=\"button\"\n [ngClass]=\"classes\"\n [disabled]=\"disabled\"\n [attr.aria-label]=\"computedAriaLabel\"\n [attr.aria-busy]=\"loading ? 'true' : null\"\n>\n <!-- Spinner visual -->\n <span *ngIf=\"loading\" class=\"c-button__loading\" aria-hidden=\"true\"><lib-icon icon=\"spinner\" [extraClass]=\"disabled ? 'disabled' : variant \"></lib-icon></span>\n\n <!-- Icon antes (siempre queda el slot) -->\n <span *ngIf=\"hasIconBefore && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconBefore]\"></ng-content>\n </span>\n\n <!-- Texto -->\n <span *ngIf=\"text && !loading\" class=\"c-button__text\">{{ text }}</span>\n <span *ngIf=\"loading\" class=\"c-button__text\">{{ loadingText }}</span>\n\n <!-- Icon despu\u00E9s -->\n <span *ngIf=\"hasIconAfter && !loading\" class=\"c-button__icon\">\n <ng-content select=\"[iconAfter]\"></ng-content>\n </span>\n</button>\n", styles: [".c-button{display:flex;align-items:center;gap:var(--space-component-gap-md);cursor:pointer;font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-md) var(--space-component-padding-xl);border-radius:var(--size-button-border-radius);background-color:var(--color-button-primary-border-default);border:var(--size-button-border-width) solid var(--color-button-primary-background-default)}.c-button:hover{background-color:var(--color-button-primary-border-hover);border:var(--size-button-border-width) solid var(--color-button-primary-background-hover)}.c-button:focus{outline:2px solid var(--focus-outset)}.c-button:pressed{background-color:var(--color-button-primary-border-processed);border:var(--size-button-border-width) solid var(--color-button-primary-background-processed)}.c-button:disabled{background-color:var(--color-button-primary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-primary-border-disabled);color:var(--color-button-primary-content-disabled)}.c-button__icon,.c-button__loading{width:24px;height:24px}.c-button--md{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-sm) var(--space-component-padding-lg)}.c-button--sm{gap:var(--space-component-gap-md);font-family:var(--typography-label-md-strong-family),sans-serif;font-weight:var(--typography-label-md-strong-weight);font-size:var(--typography-label-md-strong-size);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-xs) var(--space-component-padding-sm)}.c-button--xs{gap:var(--space-component-gap-md);font-family:var(--typography-label-sm-strong-family),sans-serif;font-weight:var(--typography-label-sm-strong-weight);font-size:var(--typography-label-sm-strong-size);line-height:var(--typography-label-sm-strong-line-height);letter-spacing:var(--typography-label-sm-strong-letter-spacing);color:var(--color-button-primary-content-default);padding:var(--space-component-padding-2xs) var(--space-component-padding-sm)}.c-button--xs .c-button__icon,.c-button--xs .c-button__loading{width:20px;height:20px}.c-button--secondary{background-color:transparent;border:var(--size-button-border-width) solid var(--color-button-secondary-border-default);color:var(--color-button-secondary-content-default)}.c-button--secondary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--secondary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--secondary:disabled{background-color:var(--color-button-secondary-background-disabled);border:var(--size-button-border-width) solid var(--color-button-secondary-background-disabled);color:var(--color-button-secondary-content-disabled)}.c-button--tertiary{background-color:transparent;border:var(--size-button-border-width) solid transparent;color:var(--color-button-secondary-content-default)}.c-button--tertiary:hover{background-color:var(--color-button-secondary-background-hover)}.c-button--tertiary:pressed{background-color:var(--color-button-secondary-background-processed)}.c-button--tertiary:disabled{background-color:transparent;border:0;color:var(--color-button-secondary-content-disabled)}.c-button--danger{background-color:var(--color-button-danger-background-default);border:var(--size-button-border-width) solid var(--color-button-danger-border-default);color:var(--color-button-danger-content-default)}.c-button--danger:hover{background-color:var(--color-button-danger-background-hover);border:var(--size-button-border-width) solid var(--color-button-danger-border-hover)}.c-button--danger:pressed{background-color:var(--color-action-danger-background-pressed);border:var(--size-button-border-width) solid var(--color-button-danger-border-pressed)}.c-button--danger:disabled{background-color:var(--color-button-danger-background-disabled);color:var(--color-button-tertiary-content-disabled);border:var(--size-button-border-width) solid var(--color-button-danger-border-disabled)}.c-button--inverse{background-color:var(--color-button-inverse-background-default);border:var(--size-button-border-width) solid var(--color-button-inverse-border-default);color:var(--color-button-inverse-content-default)}.c-button--inverse:hover{background-color:var(--color-button-inverse-background-hover);border:var(--size-button-border-width) solid var(--color-button-inverse-border-default)}.c-button--inverse:pressed{background-color:var(--color-action-inverse-background-pressed);border:var(--size-button-border-width) solid var(--color-button-inverse-border-pressed)}.c-button--inverse:disabled{background-color:var(--color-button-inverse-background-disabled);color:var(--color-button-inverse-content-disabled);border:var(--size-button-border-width) solid var(--color-button-inverse-border-disabled)}.c-button--full-width{width:100%;justify-content:center}\n"] }]
|
|
240
242
|
}], propDecorators: { text: [{
|
|
241
243
|
type: Input
|
|
242
244
|
}], ariaLabel: [{
|
|
@@ -251,6 +253,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
251
253
|
type: Input
|
|
252
254
|
}], loadingText: [{
|
|
253
255
|
type: Input
|
|
256
|
+
}], fullWidth: [{
|
|
257
|
+
type: Input
|
|
254
258
|
}], iconBeforeContent: [{
|
|
255
259
|
type: ContentChild,
|
|
256
260
|
args: ['iconBefore', { read: ElementRef }]
|
|
@@ -268,18 +272,36 @@ class LinkComponent {
|
|
|
268
272
|
disabled = false;
|
|
269
273
|
variant = 'primary';
|
|
270
274
|
size = 'md';
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
275
|
+
weight = 'regular';
|
|
276
|
+
iconBeforeContent;
|
|
277
|
+
iconAfterContent;
|
|
278
|
+
hasIconBefore = false;
|
|
279
|
+
hasIconAfter = false;
|
|
280
|
+
ngAfterContentInit() {
|
|
281
|
+
this.hasIconBefore = !!this.iconBeforeContent;
|
|
282
|
+
this.hasIconAfter = !!this.iconAfterContent;
|
|
283
|
+
}
|
|
284
|
+
get target() {
|
|
285
|
+
return this.external ? '_blank' : '_self';
|
|
286
|
+
}
|
|
287
|
+
get rel() {
|
|
288
|
+
return this.external ? 'noopener noreferrer' : null;
|
|
289
|
+
}
|
|
290
|
+
get variantClass() {
|
|
291
|
+
return this.variant !== 'primary' ? `c-link--${this.variant}` : '';
|
|
292
|
+
}
|
|
293
|
+
get sizeClass() {
|
|
294
|
+
return this.size !== 'md' ? `c-link--${this.size}` : '';
|
|
295
|
+
}
|
|
296
|
+
get weightClass() {
|
|
297
|
+
return this.weight !== 'regular' ? `c-link--${this.weight}` : '';
|
|
298
|
+
}
|
|
277
299
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
278
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LinkComponent, isStandalone: true, selector: "lib-link", inputs: { text: "text", loadingText: "loadingText", href: "href", external: "external", disabled: "disabled", variant: "variant", size: "size",
|
|
300
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: LinkComponent, isStandalone: true, selector: "lib-link", inputs: { text: "text", loadingText: "loadingText", href: "href", external: "external", disabled: "disabled", variant: "variant", size: "size", weight: "weight" }, queries: [{ propertyName: "iconBeforeContent", first: true, predicate: ["iconBefore"], descendants: true, read: ElementRef }, { propertyName: "iconAfterContent", first: true, predicate: ["iconAfter"], descendants: true, read: ElementRef }], ngImport: i0, template: "<a\n [ngClass]=\"[\n 'c-link',\n variantClass,\n sizeClass,\n weightClass,\n disabled ? 'c-link--disabled' : ''\n ]\"\n [href]=\"href\"\n [target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"external ? text + ' (abre en una pesta\u00F1a nueva)' : null\"\n>\n <ng-container *ngIf=\"hasIconBefore\">\n <span class=\"c-link__icon\"\n ><ng-content select=\"[iconBefore]\"></ng-content\n ></span>\n </ng-container>\n <span class=\"c-link__text\">{{ text }}</span>\n <span *ngIf=\"external\" class=\"sr-only\">(abre en una pesta\u00F1a nueva)</span>\n <ng-container *ngIf=\"hasIconAfter\">\n <span class=\"c-link__icon\"\n ><ng-content select=\"[iconAfter]\"></ng-content\n ></span>\n </ng-container>\n</a>\n", styles: [".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}.c-link{display:flex;align-items:center;width:max-content;gap:var(--space-component-gap-xs);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-action-primary-content-default);text-decoration:none}.c-link--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link--bold{font-weight:var(--typography-font-weight-bold)}.c-link__icon{color:var(--color-action-primary-content-default);width:18px;height:18px}.c-link__icon .o-svg__test{width:100%;height:100%;fill:currentColor}.c-link:hover{color:var(--color-action-primary-content-hover);text-decoration:underline}.c-link:focus{border:2px solid var(--color-decorative-primary-default);border-radius:var(--size-border-radius-sm)}.c-link:pressed{color:var(--color-action-primary-content-pressed);text-decoration:underline}.c-link:disabled{color:var(--color-action-primary-content-disabled)}.c-link:disabled .c-link__icon{color:var(--color-action-primary-content-disabled)}.c-link--neutral{color:var(--color-action-neutral-content-default)}.c-link--neutral .c-link__icon svg path{fill:var(--color-action-neutral-content-default)}.c-link--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link--neutral:hover .c-link__icon svg path{fill:var(--color-action-neutral-content-hover)}.c-link--neutral:pressed{color:var(--color-action-neutral-content-pressed)}.c-link--neutral:pressed .c-link__icon svg path{fill:var(--color-action-neutral-content-pressed)}.c-link--neutral:disabled{color:var(--color-action-neutral-content-disabled)}.c-link--neutral:disabled .c-link__icon svg path{fill:var(--color-action-neutral-content-disabled)}.c-link--danger{color:var(--color-action-danger-border-default)}.c-link--danger .c-link__icon{fill:var(--color-action-danger-border-default)}.c-link--danger:hover{color:var(--color-action-danger-content-hover)}.c-link--danger:hover .c-link__icon svg path{fill:var(--color-action-danger-content-hover)}.c-link--danger:pressed{color:var(--color-action-danger-content-pressed)}.c-link--danger:pressed .c-link__icon svg path{fill:var(--color-action-danger-content-pressed)}.c-link--danger:disabled{color:var(--color-action-danger-content-disabled)}.c-link--danger:disabled .c-link__icon svg path{fill:var(--color-action-danger-content-disabled)}\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"] }] });
|
|
279
301
|
}
|
|
280
302
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: LinkComponent, decorators: [{
|
|
281
303
|
type: Component,
|
|
282
|
-
args: [{ selector: 'lib-link', standalone: true, imports: [CommonModule], template: "<a\n [ngClass]=\"['c-link'
|
|
304
|
+
args: [{ selector: 'lib-link', standalone: true, imports: [CommonModule], template: "<a\n [ngClass]=\"[\n 'c-link',\n variantClass,\n sizeClass,\n weightClass,\n disabled ? 'c-link--disabled' : ''\n ]\"\n [href]=\"href\"\n [target]=\"target\"\n [attr.rel]=\"rel\"\n [attr.aria-disabled]=\"disabled ? 'true' : null\"\n [attr.aria-label]=\"external ? text + ' (abre en una pesta\u00F1a nueva)' : null\"\n>\n <ng-container *ngIf=\"hasIconBefore\">\n <span class=\"c-link__icon\"\n ><ng-content select=\"[iconBefore]\"></ng-content\n ></span>\n </ng-container>\n <span class=\"c-link__text\">{{ text }}</span>\n <span *ngIf=\"external\" class=\"sr-only\">(abre en una pesta\u00F1a nueva)</span>\n <ng-container *ngIf=\"hasIconAfter\">\n <span class=\"c-link__icon\"\n ><ng-content select=\"[iconAfter]\"></ng-content\n ></span>\n </ng-container>\n</a>\n", styles: [".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}.c-link{display:flex;align-items:center;width:max-content;gap:var(--space-component-gap-xs);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-action-primary-content-default);text-decoration:none}.c-link--sm{font-family:var(--typography-label-sm-default-family),sans-serif;font-weight:var(--typography-label-sm-default-weight);font-size:var(--typography-label-sm-default-size);line-height:var(--typography-label-sm-default-line-height);letter-spacing:var(--typography-label-sm-default-letter-spacing)}.c-link--xs{font-family:var(--typography-label-xs-default-family),sans-serif;font-weight:var(--typography-label-xs-default-weight);font-size:var(--typography-label-xs-default-size);line-height:var(--typography-label-xs-default-line-height);letter-spacing:var(--typography-label-xs-default-letter-spacing)}.c-link--bold{font-weight:var(--typography-font-weight-bold)}.c-link__icon{color:var(--color-action-primary-content-default);width:18px;height:18px}.c-link__icon .o-svg__test{width:100%;height:100%;fill:currentColor}.c-link:hover{color:var(--color-action-primary-content-hover);text-decoration:underline}.c-link:focus{border:2px solid var(--color-decorative-primary-default);border-radius:var(--size-border-radius-sm)}.c-link:pressed{color:var(--color-action-primary-content-pressed);text-decoration:underline}.c-link:disabled{color:var(--color-action-primary-content-disabled)}.c-link:disabled .c-link__icon{color:var(--color-action-primary-content-disabled)}.c-link--neutral{color:var(--color-action-neutral-content-default)}.c-link--neutral .c-link__icon svg path{fill:var(--color-action-neutral-content-default)}.c-link--neutral:hover{color:var(--color-action-neutral-content-hover)}.c-link--neutral:hover .c-link__icon svg path{fill:var(--color-action-neutral-content-hover)}.c-link--neutral:pressed{color:var(--color-action-neutral-content-pressed)}.c-link--neutral:pressed .c-link__icon svg path{fill:var(--color-action-neutral-content-pressed)}.c-link--neutral:disabled{color:var(--color-action-neutral-content-disabled)}.c-link--neutral:disabled .c-link__icon svg path{fill:var(--color-action-neutral-content-disabled)}.c-link--danger{color:var(--color-action-danger-border-default)}.c-link--danger .c-link__icon{fill:var(--color-action-danger-border-default)}.c-link--danger:hover{color:var(--color-action-danger-content-hover)}.c-link--danger:hover .c-link__icon svg path{fill:var(--color-action-danger-content-hover)}.c-link--danger:pressed{color:var(--color-action-danger-content-pressed)}.c-link--danger:pressed .c-link__icon svg path{fill:var(--color-action-danger-content-pressed)}.c-link--danger:disabled{color:var(--color-action-danger-content-disabled)}.c-link--danger:disabled .c-link__icon svg path{fill:var(--color-action-danger-content-disabled)}\n"] }]
|
|
283
305
|
}], propDecorators: { text: [{
|
|
284
306
|
type: Input
|
|
285
307
|
}], loadingText: [{
|
|
@@ -294,10 +316,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
294
316
|
type: Input
|
|
295
317
|
}], size: [{
|
|
296
318
|
type: Input
|
|
297
|
-
}],
|
|
298
|
-
type: Input
|
|
299
|
-
}], iconAfter: [{
|
|
319
|
+
}], weight: [{
|
|
300
320
|
type: Input
|
|
321
|
+
}], iconBeforeContent: [{
|
|
322
|
+
type: ContentChild,
|
|
323
|
+
args: ['iconBefore', { read: ElementRef }]
|
|
324
|
+
}], iconAfterContent: [{
|
|
325
|
+
type: ContentChild,
|
|
326
|
+
args: ['iconAfter', { read: ElementRef }]
|
|
301
327
|
}] } });
|
|
302
328
|
|
|
303
329
|
class ButtonSetComponent {
|
|
@@ -318,7 +344,7 @@ class ButtonSetComponent {
|
|
|
318
344
|
console.log('Tertiary clicked');
|
|
319
345
|
}
|
|
320
346
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonSetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
321
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonSetComponent, isStandalone: true, selector: "lib-button-set", inputs: { primaryText: "primaryText", secondaryText: "secondaryText", tertiaryText: "tertiaryText", align: "align" }, ngImport: i0, template: "<div class=\"c-button-set\" [ngClass]=\"alignmentClass\">\n <lib-link\n [text]=\"tertiaryText\"\n variant=\"primary\"\n (click)=\"handleTertiaryClick()\"\n ></lib-link>\n \n <lib-button\n [text]=\"secondaryText\"\n variant=\"secondary\"\n size=\"primary\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n \n <lib-button\n [text]=\"primaryText\"\n variant=\"primary\"\n size=\"primary\"\n (click)=\"handlePrimaryClick()\"\n ></lib-button>\n</div>\n ", styles: [".c-button-set{display:flex;align-items:center;gap:var(--space-container-stack-md)}.c-button-set--right{flex-direction:row}.c-button-set--left{flex-direction:row-reverse}.c-button-set--stacked{flex-direction:column-reverse}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "variant", "size", "loadingText"] }, { kind: "component", type: LinkComponent, selector: "lib-link", inputs: ["text", "loadingText", "href", "external", "disabled", "variant", "size", "
|
|
347
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: ButtonSetComponent, isStandalone: true, selector: "lib-button-set", inputs: { primaryText: "primaryText", secondaryText: "secondaryText", tertiaryText: "tertiaryText", align: "align" }, ngImport: i0, template: "<div class=\"c-button-set\" [ngClass]=\"alignmentClass\">\n <lib-link\n [text]=\"tertiaryText\"\n variant=\"primary\"\n (click)=\"handleTertiaryClick()\"\n ></lib-link>\n \n <lib-button\n [text]=\"secondaryText\"\n variant=\"secondary\"\n size=\"primary\"\n (click)=\"handleSecondaryClick()\"\n ></lib-button>\n \n <lib-button\n [text]=\"primaryText\"\n variant=\"primary\"\n size=\"primary\"\n (click)=\"handlePrimaryClick()\"\n ></lib-button>\n</div>\n ", styles: [".c-button-set{display:flex;align-items:center;gap:var(--space-container-stack-md)}.c-button-set--right{flex-direction:row}.c-button-set--left{flex-direction:row-reverse}.c-button-set--stacked{flex-direction:column-reverse}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ButtonComponent, selector: "lib-button", inputs: ["text", "ariaLabel", "disabled", "loading", "variant", "size", "loadingText", "fullWidth"] }, { kind: "component", type: LinkComponent, selector: "lib-link", inputs: ["text", "loadingText", "href", "external", "disabled", "variant", "size", "weight"] }] });
|
|
322
348
|
}
|
|
323
349
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: ButtonSetComponent, decorators: [{
|
|
324
350
|
type: Component,
|
|
@@ -554,6 +580,7 @@ class InputDateComponent {
|
|
|
554
580
|
readonly = false;
|
|
555
581
|
required = false;
|
|
556
582
|
size = 'md';
|
|
583
|
+
fullWidth = false;
|
|
557
584
|
emitValue = new EventEmitter();
|
|
558
585
|
_value = '';
|
|
559
586
|
onChangeFn = () => { };
|
|
@@ -596,13 +623,13 @@ class InputDateComponent {
|
|
|
596
623
|
this.onTouchedFn();
|
|
597
624
|
}
|
|
598
625
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputDateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
599
|
-
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: [
|
|
626
|
+
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", fullWidth: "fullWidth" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
600
627
|
{
|
|
601
628
|
provide: NG_VALUE_ACCESSOR,
|
|
602
629
|
useExisting: forwardRef(() => InputDateComponent),
|
|
603
|
-
multi: true
|
|
604
|
-
}
|
|
605
|
-
], ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label
|
|
630
|
+
multi: true,
|
|
631
|
+
},
|
|
632
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></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--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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-textfield-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"] }] });
|
|
606
633
|
}
|
|
607
634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
608
635
|
type: Component,
|
|
@@ -612,14 +639,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
612
639
|
InputLabelComponent,
|
|
613
640
|
IconComponent,
|
|
614
641
|
ButtonIconComponent,
|
|
615
|
-
HelperTextComponent
|
|
642
|
+
HelperTextComponent,
|
|
616
643
|
], providers: [
|
|
617
644
|
{
|
|
618
645
|
provide: NG_VALUE_ACCESSOR,
|
|
619
646
|
useExisting: forwardRef(() => InputDateComponent),
|
|
620
|
-
multi: true
|
|
621
|
-
}
|
|
622
|
-
], template: "<div class=\"c-text-input\">\n <lib-input-label
|
|
647
|
+
multi: true,
|
|
648
|
+
},
|
|
649
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></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--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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-textfield-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"] }]
|
|
623
650
|
}], propDecorators: { label: [{
|
|
624
651
|
type: Input
|
|
625
652
|
}], placeholder: [{
|
|
@@ -642,6 +669,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
642
669
|
type: Input
|
|
643
670
|
}], size: [{
|
|
644
671
|
type: Input
|
|
672
|
+
}], fullWidth: [{
|
|
673
|
+
type: Input
|
|
645
674
|
}], emitValue: [{
|
|
646
675
|
type: Output
|
|
647
676
|
}] } });
|
|
@@ -659,6 +688,7 @@ class InputNumberComponent {
|
|
|
659
688
|
readonly = false;
|
|
660
689
|
size = 'md';
|
|
661
690
|
variant = 'default';
|
|
691
|
+
fullWidth = false;
|
|
662
692
|
value = 0;
|
|
663
693
|
emitValue = new EventEmitter();
|
|
664
694
|
onChangeFn = () => { };
|
|
@@ -709,13 +739,13 @@ class InputNumberComponent {
|
|
|
709
739
|
this.onTouchedFn();
|
|
710
740
|
}
|
|
711
741
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
712
|
-
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: [
|
|
742
|
+
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", fullWidth: "fullWidth" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
713
743
|
{
|
|
714
744
|
provide: NG_VALUE_ACCESSOR,
|
|
715
745
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
716
|
-
multi: true
|
|
717
|
-
}
|
|
718
|
-
], ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label
|
|
746
|
+
multi: true,
|
|
747
|
+
},
|
|
748
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></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--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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-textfield-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"] }] });
|
|
719
749
|
}
|
|
720
750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
721
751
|
type: Component,
|
|
@@ -725,14 +755,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
725
755
|
InputLabelComponent,
|
|
726
756
|
IconComponent,
|
|
727
757
|
ButtonIconComponent,
|
|
728
|
-
HelperTextComponent
|
|
758
|
+
HelperTextComponent,
|
|
729
759
|
], providers: [
|
|
730
760
|
{
|
|
731
761
|
provide: NG_VALUE_ACCESSOR,
|
|
732
762
|
useExisting: forwardRef(() => InputNumberComponent),
|
|
733
|
-
multi: true
|
|
734
|
-
}
|
|
735
|
-
], template: "<div class=\"c-text-input\">\n <lib-input-label
|
|
763
|
+
multi: true,
|
|
764
|
+
},
|
|
765
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></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--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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-textfield-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"] }]
|
|
736
766
|
}], propDecorators: { label: [{
|
|
737
767
|
type: Input
|
|
738
768
|
}], placeholder: [{
|
|
@@ -757,6 +787,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
757
787
|
type: Input
|
|
758
788
|
}], variant: [{
|
|
759
789
|
type: Input
|
|
790
|
+
}], fullWidth: [{
|
|
791
|
+
type: Input
|
|
760
792
|
}], emitValue: [{
|
|
761
793
|
type: Output
|
|
762
794
|
}] } });
|
|
@@ -773,6 +805,7 @@ class InputPaymentComponent {
|
|
|
773
805
|
readonly = false;
|
|
774
806
|
required = false;
|
|
775
807
|
size = 'md';
|
|
808
|
+
fullWidth = false;
|
|
776
809
|
emitCardNumber = new EventEmitter();
|
|
777
810
|
emitDateValue = new EventEmitter();
|
|
778
811
|
dateInput;
|
|
@@ -844,7 +877,7 @@ class InputPaymentComponent {
|
|
|
844
877
|
this.error ? 'is-error' : '',
|
|
845
878
|
this.success ? 'is-success' : '',
|
|
846
879
|
this.disabled ? 'is-disabled' : '',
|
|
847
|
-
this.readonly ? 'is-readonly' : ''
|
|
880
|
+
this.readonly ? 'is-readonly' : '',
|
|
848
881
|
].filter(Boolean);
|
|
849
882
|
}
|
|
850
883
|
get ariaDescribedBy() {
|
|
@@ -871,13 +904,13 @@ class InputPaymentComponent {
|
|
|
871
904
|
this.dateNumberDisplay = groups.join('/');
|
|
872
905
|
}
|
|
873
906
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputPaymentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
874
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputPaymentComponent, isStandalone: true, selector: "lib-input-payment", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size" }, outputs: { emitCardNumber: "emitCardNumber", emitDateValue: "emitDateValue" }, providers: [
|
|
907
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputPaymentComponent, isStandalone: true, selector: "lib-input-payment", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size", fullWidth: "fullWidth" }, outputs: { emitCardNumber: "emitCardNumber", emitDateValue: "emitDateValue" }, providers: [
|
|
875
908
|
{
|
|
876
909
|
provide: NG_VALUE_ACCESSOR,
|
|
877
910
|
useExisting: forwardRef(() => InputPaymentComponent),
|
|
878
|
-
multi: true
|
|
879
|
-
}
|
|
880
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label
|
|
911
|
+
multi: true,
|
|
912
|
+
},
|
|
913
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\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 [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon\n [icon]=\"disabled ? 'card-disabled' : 'card'\"\n size=\"md\"\n ></lib-icon>\n </span>\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 <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\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--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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{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__wrapper:focus-within input:first-of-type{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.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}.c-text-input__mini{position:absolute;right:7px;border:0;height:calc(100% - 4px);top:0;bottom:0;margin:auto;border-radius:8px;width:81px;text-align:right;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__mini:focus{outline:none}\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"] }] });
|
|
881
914
|
}
|
|
882
915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputPaymentComponent, decorators: [{
|
|
883
916
|
type: Component,
|
|
@@ -886,14 +919,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
886
919
|
ReactiveFormsModule,
|
|
887
920
|
InputLabelComponent,
|
|
888
921
|
IconComponent,
|
|
889
|
-
HelperTextComponent
|
|
922
|
+
HelperTextComponent,
|
|
890
923
|
], providers: [
|
|
891
924
|
{
|
|
892
925
|
provide: NG_VALUE_ACCESSOR,
|
|
893
926
|
useExisting: forwardRef(() => InputPaymentComponent),
|
|
894
|
-
multi: true
|
|
895
|
-
}
|
|
896
|
-
], template: "<div class=\"c-text-input\">\n <lib-input-label
|
|
927
|
+
multi: true,
|
|
928
|
+
},
|
|
929
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n type=\"text\"\n inputmode=\"numeric\"\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 [value]=\"cardNumberDisplay\"\n (input)=\"onCardInput($event)\"\n (blur)=\"onBlur()\"\n />\n <input\n #dateInput\n type=\"text\"\n inputmode=\"numeric\"\n placeholder=\"dd/mm\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n class=\"c-text-input__mini\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n [required]=\"required\"\n [value]=\"dateNumberDisplay\"\n (input)=\"onDateInput($event)\"\n (blur)=\"onBlur()\"\n />\n <span class=\"c-text-input__icon\">\n <lib-icon\n [icon]=\"disabled ? 'card-disabled' : 'card'\"\n size=\"md\"\n ></lib-icon>\n </span>\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 <span *ngIf=\"alertText && error\" class=\"c-text-input__alert\">\n <lib-helper-text variant=\"alert\" [text]=\"alertText\"></lib-helper-text>\n </span>\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--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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{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__wrapper:focus-within input:first-of-type{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.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}.c-text-input__mini{position:absolute;right:7px;border:0;height:calc(100% - 4px);top:0;bottom:0;margin:auto;border-radius:8px;width:81px;text-align:right;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__mini:focus{outline:none}\n"] }]
|
|
897
930
|
}], propDecorators: { label: [{
|
|
898
931
|
type: Input
|
|
899
932
|
}], placeholder: [{
|
|
@@ -916,6 +949,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
916
949
|
type: Input
|
|
917
950
|
}], size: [{
|
|
918
951
|
type: Input
|
|
952
|
+
}], fullWidth: [{
|
|
953
|
+
type: Input
|
|
919
954
|
}], emitCardNumber: [{
|
|
920
955
|
type: Output
|
|
921
956
|
}], emitDateValue: [{
|
|
@@ -937,6 +972,7 @@ class InputSearchComponent {
|
|
|
937
972
|
readonly = false;
|
|
938
973
|
required = false;
|
|
939
974
|
size = 'md';
|
|
975
|
+
fullWidth = false;
|
|
940
976
|
emitValue = new EventEmitter();
|
|
941
977
|
_value = '';
|
|
942
978
|
onChangeFn = () => { };
|
|
@@ -970,20 +1006,20 @@ class InputSearchComponent {
|
|
|
970
1006
|
this.error ? 'is-error' : '',
|
|
971
1007
|
this.success ? 'is-success' : '',
|
|
972
1008
|
this.disabled ? 'is-disabled' : '',
|
|
973
|
-
this.readonly ? 'is-readonly' : ''
|
|
1009
|
+
this.readonly ? 'is-readonly' : '',
|
|
974
1010
|
].filter(Boolean);
|
|
975
1011
|
}
|
|
976
1012
|
get ariaDescribedBy() {
|
|
977
1013
|
return this.helperText ? 'search-input-helper' : null;
|
|
978
1014
|
}
|
|
979
1015
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
980
|
-
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: [
|
|
1016
|
+
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", fullWidth: "fullWidth" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
981
1017
|
{
|
|
982
1018
|
provide: NG_VALUE_ACCESSOR,
|
|
983
1019
|
useExisting: forwardRef(() => InputSearchComponent),
|
|
984
|
-
multi: true
|
|
985
|
-
}
|
|
986
|
-
], ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label
|
|
1020
|
+
multi: true,
|
|
1021
|
+
},
|
|
1022
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></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--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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-textfield-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"] }] });
|
|
987
1023
|
}
|
|
988
1024
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputSearchComponent, decorators: [{
|
|
989
1025
|
type: Component,
|
|
@@ -992,14 +1028,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
992
1028
|
ReactiveFormsModule,
|
|
993
1029
|
InputLabelComponent,
|
|
994
1030
|
IconComponent,
|
|
995
|
-
HelperTextComponent
|
|
1031
|
+
HelperTextComponent,
|
|
996
1032
|
], providers: [
|
|
997
1033
|
{
|
|
998
1034
|
provide: NG_VALUE_ACCESSOR,
|
|
999
1035
|
useExisting: forwardRef(() => InputSearchComponent),
|
|
1000
|
-
multi: true
|
|
1001
|
-
}
|
|
1002
|
-
], template: "<div class=\"c-text-input\">\n <lib-input-label
|
|
1036
|
+
multi: true,
|
|
1037
|
+
},
|
|
1038
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></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--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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-textfield-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"] }]
|
|
1003
1039
|
}], propDecorators: { label: [{
|
|
1004
1040
|
type: Input
|
|
1005
1041
|
}], placeholder: [{
|
|
@@ -1022,6 +1058,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1022
1058
|
type: Input
|
|
1023
1059
|
}], size: [{
|
|
1024
1060
|
type: Input
|
|
1061
|
+
}], fullWidth: [{
|
|
1062
|
+
type: Input
|
|
1025
1063
|
}], emitValue: [{
|
|
1026
1064
|
type: Output
|
|
1027
1065
|
}] } });
|
|
@@ -1039,6 +1077,7 @@ class InputUploadComponent {
|
|
|
1039
1077
|
required = false;
|
|
1040
1078
|
size = 'md';
|
|
1041
1079
|
allowedExtensions = [];
|
|
1080
|
+
fullWidth = false;
|
|
1042
1081
|
emitValue = new EventEmitter();
|
|
1043
1082
|
fileInput;
|
|
1044
1083
|
fileName = '';
|
|
@@ -1082,7 +1121,7 @@ class InputUploadComponent {
|
|
|
1082
1121
|
return null;
|
|
1083
1122
|
}
|
|
1084
1123
|
return this.allowedExtensions
|
|
1085
|
-
.map(ext => ext.startsWith('.') ? ext : `.${ext}`)
|
|
1124
|
+
.map((ext) => (ext.startsWith('.') ? ext : `.${ext}`))
|
|
1086
1125
|
.join(',');
|
|
1087
1126
|
}
|
|
1088
1127
|
get inputClass() {
|
|
@@ -1094,20 +1133,20 @@ class InputUploadComponent {
|
|
|
1094
1133
|
this.error ? 'is-error' : '',
|
|
1095
1134
|
this.success ? 'is-success' : '',
|
|
1096
1135
|
this.disabled ? 'is-disabled' : '',
|
|
1097
|
-
this.readonly ? 'is-readonly' : ''
|
|
1136
|
+
this.readonly ? 'is-readonly' : '',
|
|
1098
1137
|
].filter(Boolean);
|
|
1099
1138
|
}
|
|
1100
1139
|
get ariaDescribedBy() {
|
|
1101
1140
|
return this.helperText ? 'search-input-helper' : null;
|
|
1102
1141
|
}
|
|
1103
1142
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1104
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputUploadComponent, isStandalone: true, selector: "lib-input-upload", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size", allowedExtensions: "allowedExtensions" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
1143
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: InputUploadComponent, isStandalone: true, selector: "lib-input-upload", inputs: { label: "label", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size", allowedExtensions: "allowedExtensions", fullWidth: "fullWidth" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
1105
1144
|
{
|
|
1106
1145
|
provide: NG_VALUE_ACCESSOR,
|
|
1107
1146
|
useExisting: forwardRef(() => InputUploadComponent),
|
|
1108
|
-
multi: true
|
|
1109
|
-
}
|
|
1110
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label
|
|
1147
|
+
multi: true,
|
|
1148
|
+
},
|
|
1149
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"upload-input\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n for=\"upload-input\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"fileInput.click()\"\n >\n <lib-icon icon=\"upload\" 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--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus{border:var(--size-textfield-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"] }] });
|
|
1111
1150
|
}
|
|
1112
1151
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: InputUploadComponent, decorators: [{
|
|
1113
1152
|
type: Component,
|
|
@@ -1117,14 +1156,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1117
1156
|
InputLabelComponent,
|
|
1118
1157
|
IconComponent,
|
|
1119
1158
|
ButtonIconComponent,
|
|
1120
|
-
HelperTextComponent
|
|
1159
|
+
HelperTextComponent,
|
|
1121
1160
|
], providers: [
|
|
1122
1161
|
{
|
|
1123
1162
|
provide: NG_VALUE_ACCESSOR,
|
|
1124
1163
|
useExisting: forwardRef(() => InputUploadComponent),
|
|
1125
|
-
multi: true
|
|
1126
|
-
}
|
|
1127
|
-
], template: "<div class=\"c-text-input\">\n <lib-input-label
|
|
1164
|
+
multi: true,
|
|
1165
|
+
},
|
|
1166
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div class=\"c-text-input__wrapper\">\n <input\n #fileInput\n type=\"file\"\n id=\"upload-input\"\n style=\"display: none\"\n [attr.accept]=\"acceptString\"\n [disabled]=\"disabled\"\n [required]=\"required\"\n (change)=\"onFileSelected($event)\"\n (blur)=\"onBlur()\"\n />\n <label\n for=\"upload-input\"\n [class]=\"inputClass.join(' ')\"\n [attr.aria-invalid]=\"error ? 'true' : null\"\n [attr.aria-describedby]=\"ariaDescribedBy\"\n >\n {{ fileName || placeholder }}\n </label>\n <lib-button-icon\n ariaLabel=\"Upload\"\n [disabled]=\"disabled\"\n [loading]=\"false\"\n variant=\"tertiary\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n (click)=\"fileInput.click()\"\n >\n <lib-icon icon=\"upload\" 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--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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--no-file{color:var(--color-textfield-content-placeholder)}.c-text-input__input:focus{border:var(--size-textfield-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"] }]
|
|
1128
1167
|
}], propDecorators: { label: [{
|
|
1129
1168
|
type: Input
|
|
1130
1169
|
}], placeholder: [{
|
|
@@ -1149,6 +1188,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1149
1188
|
type: Input
|
|
1150
1189
|
}], allowedExtensions: [{
|
|
1151
1190
|
type: Input
|
|
1191
|
+
}], fullWidth: [{
|
|
1192
|
+
type: Input
|
|
1152
1193
|
}], emitValue: [{
|
|
1153
1194
|
type: Output
|
|
1154
1195
|
}], fileInput: [{
|
|
@@ -1238,6 +1279,7 @@ class PasswordInputComponent {
|
|
|
1238
1279
|
readonly = false;
|
|
1239
1280
|
required = false;
|
|
1240
1281
|
size = 'md';
|
|
1282
|
+
fullWidth = false;
|
|
1241
1283
|
emitValue = new EventEmitter();
|
|
1242
1284
|
_value = '';
|
|
1243
1285
|
showPassword = false;
|
|
@@ -1265,7 +1307,7 @@ class PasswordInputComponent {
|
|
|
1265
1307
|
this.error ? 'is-error' : '',
|
|
1266
1308
|
this.success ? 'is-success' : '',
|
|
1267
1309
|
this.disabled ? 'is-disabled' : '',
|
|
1268
|
-
this.readonly ? 'is-readonly' : ''
|
|
1310
|
+
this.readonly ? 'is-readonly' : '',
|
|
1269
1311
|
].filter(Boolean);
|
|
1270
1312
|
}
|
|
1271
1313
|
get ariaDescribedBy() {
|
|
@@ -1284,13 +1326,13 @@ class PasswordInputComponent {
|
|
|
1284
1326
|
this.onTouchedFn();
|
|
1285
1327
|
}
|
|
1286
1328
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1287
|
-
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: [
|
|
1329
|
+
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", fullWidth: "fullWidth" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
1288
1330
|
{
|
|
1289
1331
|
provide: NG_VALUE_ACCESSOR,
|
|
1290
1332
|
useExisting: forwardRef(() => PasswordInputComponent),
|
|
1291
|
-
multi: true
|
|
1292
|
-
}
|
|
1293
|
-
], ngImport: i0, template: "<div class=\"c-text-input\">\n <lib-input-label
|
|
1333
|
+
multi: true,
|
|
1334
|
+
},
|
|
1335
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [text]=\"label\"\n [required]=\"required\"\n ></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--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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-textfield-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"] }] });
|
|
1294
1336
|
}
|
|
1295
1337
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
1296
1338
|
type: Component,
|
|
@@ -1300,14 +1342,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1300
1342
|
InputLabelComponent,
|
|
1301
1343
|
IconComponent,
|
|
1302
1344
|
ButtonIconComponent,
|
|
1303
|
-
HelperTextComponent
|
|
1345
|
+
HelperTextComponent,
|
|
1304
1346
|
], providers: [
|
|
1305
1347
|
{
|
|
1306
1348
|
provide: NG_VALUE_ACCESSOR,
|
|
1307
1349
|
useExisting: forwardRef(() => PasswordInputComponent),
|
|
1308
|
-
multi: true
|
|
1309
|
-
}
|
|
1310
|
-
], template: "<div class=\"c-text-input\">\n <lib-input-label
|
|
1350
|
+
multi: true,
|
|
1351
|
+
},
|
|
1352
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\n <lib-input-label\n *ngIf=\"label\"\n [text]=\"label\"\n [required]=\"required\"\n ></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--full-width{max-width:100%}.c-text-input__input{width:100%;border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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-textfield-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"] }]
|
|
1311
1353
|
}], propDecorators: { label: [{
|
|
1312
1354
|
type: Input
|
|
1313
1355
|
}], placeholder: [{
|
|
@@ -1330,6 +1372,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1330
1372
|
type: Input
|
|
1331
1373
|
}], size: [{
|
|
1332
1374
|
type: Input
|
|
1375
|
+
}], fullWidth: [{
|
|
1376
|
+
type: Input
|
|
1333
1377
|
}], emitValue: [{
|
|
1334
1378
|
type: Output
|
|
1335
1379
|
}] } });
|
|
@@ -1500,6 +1544,7 @@ class SelectComponent {
|
|
|
1500
1544
|
required = false;
|
|
1501
1545
|
searchable = false;
|
|
1502
1546
|
size = 'md';
|
|
1547
|
+
fullWidth = false;
|
|
1503
1548
|
selectionChange = new EventEmitter();
|
|
1504
1549
|
container;
|
|
1505
1550
|
badgeElems;
|
|
@@ -1542,7 +1587,7 @@ class SelectComponent {
|
|
|
1542
1587
|
this.disabled = isDisabled;
|
|
1543
1588
|
}
|
|
1544
1589
|
isSelected(opt) {
|
|
1545
|
-
return this.selectedOptions.some(o => o.value === opt.value);
|
|
1590
|
+
return this.selectedOptions.some((o) => o.value === opt.value);
|
|
1546
1591
|
}
|
|
1547
1592
|
toggleDropdown() {
|
|
1548
1593
|
if (this.disabled || this.readonly) {
|
|
@@ -1559,7 +1604,7 @@ class SelectComponent {
|
|
|
1559
1604
|
}
|
|
1560
1605
|
selectOption(option) {
|
|
1561
1606
|
if (this.multiple) {
|
|
1562
|
-
const idx = this.selectedOptions.findIndex(o => o.value === option.value);
|
|
1607
|
+
const idx = this.selectedOptions.findIndex((o) => o.value === option.value);
|
|
1563
1608
|
if (idx > -1) {
|
|
1564
1609
|
this.selectedOptions.splice(idx, 1);
|
|
1565
1610
|
}
|
|
@@ -1582,7 +1627,7 @@ class SelectComponent {
|
|
|
1582
1627
|
if (!opt) {
|
|
1583
1628
|
return;
|
|
1584
1629
|
}
|
|
1585
|
-
this.selectedOptions = this.selectedOptions.filter(o => o.value !== opt.value);
|
|
1630
|
+
this.selectedOptions = this.selectedOptions.filter((o) => o.value !== opt.value);
|
|
1586
1631
|
this.onChangeFn(this.multiple ? this.selectedOptions : this.selectedOptions[0] || null);
|
|
1587
1632
|
this.selectionChange.emit(this.multiple ? this.selectedOptions : this.selectedOptions[0]);
|
|
1588
1633
|
this.updateVisibleBadges();
|
|
@@ -1599,11 +1644,11 @@ class SelectComponent {
|
|
|
1599
1644
|
}
|
|
1600
1645
|
else {
|
|
1601
1646
|
this.filteredOptions = this.options
|
|
1602
|
-
.map(group => {
|
|
1603
|
-
const matches = group.options.filter(opt => opt.label.toLowerCase().includes(search));
|
|
1647
|
+
.map((group) => {
|
|
1648
|
+
const matches = group.options.filter((opt) => opt.label.toLowerCase().includes(search));
|
|
1604
1649
|
return { ...group, options: matches };
|
|
1605
1650
|
})
|
|
1606
|
-
.filter(group => group.options.length > 0);
|
|
1651
|
+
.filter((group) => group.options.length > 0);
|
|
1607
1652
|
}
|
|
1608
1653
|
}
|
|
1609
1654
|
/** ControlValueAccessor touch on blur of the combobox */
|
|
@@ -1619,7 +1664,7 @@ class SelectComponent {
|
|
|
1619
1664
|
this.calculating = false;
|
|
1620
1665
|
const containerWidth = this.container.nativeElement.clientWidth;
|
|
1621
1666
|
let usedWidth = 0;
|
|
1622
|
-
const badgeEls = this.badgeElems.toArray().map(el => el.nativeElement);
|
|
1667
|
+
const badgeEls = this.badgeElems.toArray().map((el) => el.nativeElement);
|
|
1623
1668
|
const fits = [];
|
|
1624
1669
|
for (let i = 0; i < badgeEls.length; i++) {
|
|
1625
1670
|
const w = badgeEls[i].offsetWidth;
|
|
@@ -1643,13 +1688,13 @@ class SelectComponent {
|
|
|
1643
1688
|
}
|
|
1644
1689
|
}
|
|
1645
1690
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1646
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "lib-select", inputs: { options: "options", multiple: "multiple", placeholder: "placeholder", label: "label", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", searchable: "searchable", size: "size" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "window:resize": "onResize()", "document:click": "onClickOutside($event.target)" } }, providers: [
|
|
1691
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: SelectComponent, isStandalone: true, selector: "lib-select", inputs: { options: "options", multiple: "multiple", placeholder: "placeholder", label: "label", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", searchable: "searchable", size: "size", fullWidth: "fullWidth" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "window:resize": "onResize()", "document:click": "onClickOutside($event.target)" } }, providers: [
|
|
1647
1692
|
{
|
|
1648
1693
|
provide: NG_VALUE_ACCESSOR,
|
|
1649
1694
|
useExisting: forwardRef(() => SelectComponent),
|
|
1650
|
-
multi: true
|
|
1651
|
-
}
|
|
1652
|
-
], viewQueries: [{ propertyName: "container", first: true, predicate: ["selectionContainer"], descendants: true, static: true }, { propertyName: "badgeElems", predicate: ["badgeElem"], descendants: true }], ngImport: i0, template: "<div class=\"c-select\" [class.c-select--multiple]=\"multiple\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-select__wrapper\"\n aria-expanded=\"false\"\n (click)=\"toggleDropdown()\"\n (keydown.enter)=\"toggleDropdown()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-controls=\"selectionContainer\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"label ? label : 'Select'\"\n >\n <div\n class=\"c-select__selection\"\n [class.is-error]=\"error\"\n [class.is-success]=\"success\"\n [class.is-disabled]=\"disabled\"\n [class.is-readonly]=\"readonly\"\n [class.c-select__selection--md]=\"size === 'md'\"\n [class.c-select__selection--sm]=\"size === 'sm'\"\n [class.c-select__selection--lg]=\"size === 'lg'\"\n #selectionContainer\n id=\"selectionContainer\"\n >\n <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n <span\n #badgeElem\n *ngFor=\"let sel of visibleBadges\"\n class=\"c-select__badge\"\n [class.c-select__badge--multiple]=\"multiple\"\n [class.is-disabled]=\"disabled\"\n >\n {{ sel.label }}\n <lib-icon\n icon=\"close\"\n *ngIf=\"multiple && !disabled\"\n size=\"sm\"\n (click)=\"onDelete(sel)\"\n iconBefore\n />\n <lib-icon\n icon=\"close-disabled\"\n *ngIf=\"multiple && disabled\"\n size=\"sm\"\n iconBefore\n />\n </span>\n\n <span\n *ngIf=\"hiddenCount > 0\"\n class=\"c-select__badge c-select__badge--more\"\n >\n +{{ hiddenCount }}\n </span>\n </ng-container>\n <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n <lib-input-search\n [(ngModel)]=\"filterText\"\n (emitValue)=\"onSearch($event)\"\n (input)=\"filterOptions()\"\n placeholder=\"Search...\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Filtrar opciones\"\n />\n </div>\n\n <div *ngFor=\"let group of filteredOptions\">\n <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n <div\n class=\"c-select__option\"\n *ngFor=\"let opt of group.options\"\n [class.is-selected]=\"isSelected(opt)\"\n (click)=\"$event.stopPropagation(); selectOption(opt)\"\n (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n tabindex=\"0\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(opt)\"\n >\n <lib-checkbox\n *ngIf=\"multiple\"\n label=\"\"\n [disabled]=\"disabled\"\n [checked]=\"isSelected(opt)\"\n class=\"c-tile__check\"\n ></lib-checkbox>\n <span class=\"c-select__option-label\">{{ opt.label }}</span>\n <lib-icon\n icon=\"check-circle\"\n *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n size=\"sm\"\n iconBefore\n />\n </div>\n </div>\n </div>\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-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size"], outputs: ["emitValue"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate"], outputs: ["changed"] }] });
|
|
1695
|
+
multi: true,
|
|
1696
|
+
},
|
|
1697
|
+
], viewQueries: [{ propertyName: "container", first: true, predicate: ["selectionContainer"], descendants: true, static: true }, { propertyName: "badgeElems", predicate: ["badgeElem"], descendants: true }], ngImport: i0, template: "<div\n class=\"c-select\"\n [class.c-select--multiple]=\"multiple\"\n [class.c-select--full-width]=\"fullWidth\"\n>\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-select__wrapper\"\n aria-expanded=\"false\"\n (click)=\"toggleDropdown()\"\n (keydown.enter)=\"toggleDropdown()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-controls=\"selectionContainer\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"label ? label : 'Select'\"\n >\n <div\n class=\"c-select__selection\"\n [class.is-error]=\"error\"\n [class.is-success]=\"success\"\n [class.is-disabled]=\"disabled\"\n [class.is-readonly]=\"readonly\"\n [class.c-select__selection--md]=\"size === 'md'\"\n [class.c-select__selection--sm]=\"size === 'sm'\"\n [class.c-select__selection--lg]=\"size === 'lg'\"\n #selectionContainer\n id=\"selectionContainer\"\n >\n <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n <span\n #badgeElem\n *ngFor=\"let sel of visibleBadges\"\n class=\"c-select__badge\"\n [class.c-select__badge--multiple]=\"multiple\"\n [class.is-disabled]=\"disabled\"\n >\n {{ sel.label }}\n <lib-icon\n icon=\"close\"\n *ngIf=\"multiple && !disabled\"\n size=\"sm\"\n (click)=\"onDelete(sel)\"\n iconBefore\n />\n <lib-icon\n icon=\"close-disabled\"\n *ngIf=\"multiple && disabled\"\n size=\"sm\"\n iconBefore\n />\n </span>\n\n <span\n *ngIf=\"hiddenCount > 0\"\n class=\"c-select__badge c-select__badge--more\"\n >\n +{{ hiddenCount }}\n </span>\n </ng-container>\n <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n <lib-input-search\n [(ngModel)]=\"filterText\"\n (emitValue)=\"onSearch($event)\"\n (input)=\"filterOptions()\"\n placeholder=\"Search...\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Filtrar opciones\"\n />\n </div>\n\n <div *ngFor=\"let group of filteredOptions\">\n <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n <div\n class=\"c-select__option\"\n *ngFor=\"let opt of group.options\"\n [class.is-selected]=\"isSelected(opt)\"\n (click)=\"$event.stopPropagation(); selectOption(opt)\"\n (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n tabindex=\"0\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(opt)\"\n >\n <lib-checkbox\n *ngIf=\"multiple\"\n label=\"\"\n [disabled]=\"disabled\"\n [checked]=\"isSelected(opt)\"\n class=\"c-tile__check\"\n ></lib-checkbox>\n <span class=\"c-select__option-label\">{{ opt.label }}</span>\n <lib-icon\n icon=\"check-circle\"\n *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n size=\"sm\"\n iconBefore\n />\n </div>\n </div>\n </div>\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-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select--full-width{max-width:100%}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["extraClass", "variant", "size", "icon"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "md", "disabled", "for"] }, { kind: "component", type: InputSearchComponent, selector: "lib-input-search", inputs: ["label", "placeholder", "helperText", "alertText", "successText", "error", "success", "disabled", "readonly", "required", "size", "fullWidth"], outputs: ["emitValue"] }, { kind: "component", type: CheckboxComponent, selector: "lib-checkbox", inputs: ["label", "id", "checked", "disabled", "error", "indeterminate"], outputs: ["changed"] }] });
|
|
1653
1698
|
}
|
|
1654
1699
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: SelectComponent, decorators: [{
|
|
1655
1700
|
type: Component,
|
|
@@ -1661,14 +1706,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1661
1706
|
HelperTextComponent,
|
|
1662
1707
|
InputLabelComponent,
|
|
1663
1708
|
InputSearchComponent,
|
|
1664
|
-
CheckboxComponent
|
|
1709
|
+
CheckboxComponent,
|
|
1665
1710
|
], providers: [
|
|
1666
1711
|
{
|
|
1667
1712
|
provide: NG_VALUE_ACCESSOR,
|
|
1668
1713
|
useExisting: forwardRef(() => SelectComponent),
|
|
1669
|
-
multi: true
|
|
1670
|
-
}
|
|
1671
|
-
], template: "<div class=\"c-select\" [class.c-select--multiple]=\"multiple\">\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-select__wrapper\"\n aria-expanded=\"false\"\n (click)=\"toggleDropdown()\"\n (keydown.enter)=\"toggleDropdown()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-controls=\"selectionContainer\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"label ? label : 'Select'\"\n >\n <div\n class=\"c-select__selection\"\n [class.is-error]=\"error\"\n [class.is-success]=\"success\"\n [class.is-disabled]=\"disabled\"\n [class.is-readonly]=\"readonly\"\n [class.c-select__selection--md]=\"size === 'md'\"\n [class.c-select__selection--sm]=\"size === 'sm'\"\n [class.c-select__selection--lg]=\"size === 'lg'\"\n #selectionContainer\n id=\"selectionContainer\"\n >\n <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n <span\n #badgeElem\n *ngFor=\"let sel of visibleBadges\"\n class=\"c-select__badge\"\n [class.c-select__badge--multiple]=\"multiple\"\n [class.is-disabled]=\"disabled\"\n >\n {{ sel.label }}\n <lib-icon\n icon=\"close\"\n *ngIf=\"multiple && !disabled\"\n size=\"sm\"\n (click)=\"onDelete(sel)\"\n iconBefore\n />\n <lib-icon\n icon=\"close-disabled\"\n *ngIf=\"multiple && disabled\"\n size=\"sm\"\n iconBefore\n />\n </span>\n\n <span\n *ngIf=\"hiddenCount > 0\"\n class=\"c-select__badge c-select__badge--more\"\n >\n +{{ hiddenCount }}\n </span>\n </ng-container>\n <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n <lib-input-search\n [(ngModel)]=\"filterText\"\n (emitValue)=\"onSearch($event)\"\n (input)=\"filterOptions()\"\n placeholder=\"Search...\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Filtrar opciones\"\n />\n </div>\n\n <div *ngFor=\"let group of filteredOptions\">\n <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n <div\n class=\"c-select__option\"\n *ngFor=\"let opt of group.options\"\n [class.is-selected]=\"isSelected(opt)\"\n (click)=\"$event.stopPropagation(); selectOption(opt)\"\n (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n tabindex=\"0\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(opt)\"\n >\n <lib-checkbox\n *ngIf=\"multiple\"\n label=\"\"\n [disabled]=\"disabled\"\n [checked]=\"isSelected(opt)\"\n class=\"c-tile__check\"\n ></lib-checkbox>\n <span class=\"c-select__option-label\">{{ opt.label }}</span>\n <lib-icon\n icon=\"check-circle\"\n *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n size=\"sm\"\n iconBefore\n />\n </div>\n </div>\n </div>\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-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\n"] }]
|
|
1714
|
+
multi: true,
|
|
1715
|
+
},
|
|
1716
|
+
], template: "<div\n class=\"c-select\"\n [class.c-select--multiple]=\"multiple\"\n [class.c-select--full-width]=\"fullWidth\"\n>\n <lib-input-label\n *ngIf=\"label\"\n [required]=\"required\"\n [text]=\"label\"\n ></lib-input-label>\n\n <div\n class=\"c-select__wrapper\"\n aria-expanded=\"false\"\n (click)=\"toggleDropdown()\"\n (keydown.enter)=\"toggleDropdown()\"\n (blur)=\"onBlur()\"\n tabindex=\"0\"\n role=\"combobox\"\n aria-controls=\"selectionContainer\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-label]=\"label ? label : 'Select'\"\n >\n <div\n class=\"c-select__selection\"\n [class.is-error]=\"error\"\n [class.is-success]=\"success\"\n [class.is-disabled]=\"disabled\"\n [class.is-readonly]=\"readonly\"\n [class.c-select__selection--md]=\"size === 'md'\"\n [class.c-select__selection--sm]=\"size === 'sm'\"\n [class.c-select__selection--lg]=\"size === 'lg'\"\n #selectionContainer\n id=\"selectionContainer\"\n >\n <ng-container *ngIf=\"selectedOptions.length; else placeholderTpl\">\n <span\n #badgeElem\n *ngFor=\"let sel of visibleBadges\"\n class=\"c-select__badge\"\n [class.c-select__badge--multiple]=\"multiple\"\n [class.is-disabled]=\"disabled\"\n >\n {{ sel.label }}\n <lib-icon\n icon=\"close\"\n *ngIf=\"multiple && !disabled\"\n size=\"sm\"\n (click)=\"onDelete(sel)\"\n iconBefore\n />\n <lib-icon\n icon=\"close-disabled\"\n *ngIf=\"multiple && disabled\"\n size=\"sm\"\n iconBefore\n />\n </span>\n\n <span\n *ngIf=\"hiddenCount > 0\"\n class=\"c-select__badge c-select__badge--more\"\n >\n +{{ hiddenCount }}\n </span>\n </ng-container>\n <ng-template #placeholderTpl>{{ placeholder }}</ng-template>\n\n <span class=\"c-select__arrow\" *ngIf=\"!isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'down'\" />\n </span>\n <span class=\"c-select__arrow\" *ngIf=\"isOpen\">\n <lib-icon icon=\"arrow\" size=\"lg\" iconBefore [variant]=\"'up'\" />\n </span>\n </div>\n\n <div class=\"c-select__dropdown\" *ngIf=\"isOpen\" role=\"listbox\">\n <div class=\"c-select__search-wrapper\" *ngIf=\"searchable\">\n <lib-input-search\n [(ngModel)]=\"filterText\"\n (emitValue)=\"onSearch($event)\"\n (input)=\"filterOptions()\"\n placeholder=\"Search...\"\n (click)=\"$event.stopPropagation()\"\n aria-label=\"Filtrar opciones\"\n />\n </div>\n\n <div *ngFor=\"let group of filteredOptions\">\n <div class=\"c-select__group-label\">{{ group.label }}</div>\n\n <div\n class=\"c-select__option\"\n *ngFor=\"let opt of group.options\"\n [class.is-selected]=\"isSelected(opt)\"\n (click)=\"$event.stopPropagation(); selectOption(opt)\"\n (keydown.enter)=\"$event.stopPropagation(); selectOption(opt)\"\n tabindex=\"0\"\n role=\"option\"\n [attr.aria-selected]=\"isSelected(opt)\"\n >\n <lib-checkbox\n *ngIf=\"multiple\"\n label=\"\"\n [disabled]=\"disabled\"\n [checked]=\"isSelected(opt)\"\n class=\"c-tile__check\"\n ></lib-checkbox>\n <span class=\"c-select__option-label\">{{ opt.label }}</span>\n <lib-icon\n icon=\"check-circle\"\n *ngIf=\"!multiple && !disabled && isSelected(opt)\"\n size=\"sm\"\n iconBefore\n />\n </div>\n </div>\n </div>\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-select{display:flex;flex-direction:column;gap:var(--space-component-gap-sm, .25rem);max-width:300px}.c-select--full-width{max-width:100%}.c-select__search-wrapper{padding:var(--space-container-padding-sm, 1rem)}.c-select__dropdown{position:absolute;width:100%;max-height:25rem;overflow-y:auto;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-core-border-soft, #d6e0df);background:var(--color-core-background-surface-raised, #fff);box-shadow:0 0 4px 0 var(--color-effect-shadow-soft, rgba(4, 37, 34, .12)),0 2px 4px 0 var(--color-effect-shadow-strong, rgba(4, 37, 34, .16));scrollbar-width:thin;scrollbar-color:var(--color-effect-overlay, rgba(0, 0, 0, .16)) transparent}.c-select__badge{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge.is-disabled{background:var(--color-action-neutral-background-disabled, rgba(255, 255, 255, 0))}.c-select__badge--more{color:var(--color-textfield-content-default, #070707);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem)}.c-select__badge--multiple{display:flex;height:1.5rem;padding-left:var(--space-component-padding-sm, .5rem);padding-right:var(--space-component-padding-sm, .5rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);border-radius:var(--size-textfield-border-radius, .5rem);background:var(--color-feedback-neutral-surface-background, #dee7e6);color:var(--color-feedback-neutral-default, #535858);text-align:center;font-family:var(--typography-label-xs-strong-family, Satoshi);font-size:var(--typography-label-xs-strong-size, .75rem);font-style:normal;font-weight:var(--typography-label-xs-strong-weight, 700);line-height:var(--typography-label-xs-strong-line-height, 1rem);letter-spacing:var(--typography-label-xs-strong-letter-spacing, 0rem)}.c-select__wrapper{position:relative}.c-select__group-label{display:flex;min-height:3rem;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);color:var(--color-core-content-soft, #535858);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option{display:flex;padding:var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);background:var(--color-action-neutral-background-default, rgba(255, 255, 255, 0));color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-default-family, Satoshi);font-size:var(--typography-label-sm-default-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-default-weight, 400);line-height:var(--typography-label-sm-default-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-default-letter-spacing, 0rem);cursor:pointer;justify-content:space-between}.c-select__option.is-selected{color:var(--color-action-neutral-content-default, #070707);font-family:var(--typography-label-sm-strong-family, Satoshi);font-size:var(--typography-label-sm-strong-size, .875rem);font-style:normal;font-weight:var(--typography-label-sm-strong-weight, 700);line-height:var(--typography-label-sm-strong-line-height, 1.25rem);letter-spacing:var(--typography-label-sm-strong-letter-spacing, 0rem)}.c-select__option:hover{background:var(--color-action-neutral-background-hover, rgba(0, 0, 0, .04))}.c-select__option-label{display:flex;justify-self:flex-start;margin:0 auto 0 0}.c-select__selection{display:flex;padding:var(--space-component-padding-md, .75rem) 2.5rem var(--space-component-padding-md, .75rem) var(--space-component-padding-lg, 1rem);align-items:center;gap:var(--space-component-gap-sm, .25rem);align-self:stretch;border-radius:var(--size-textfield-border-radius, .5rem);border:var(--size-textfield-border-width, 1px) solid var(--color-textfield-border-default, #929a99);background:var(--color-textfield-background-default, #fff);color:var(--color-textfield-content-placeholder, #676d6c);font-family:var(--typography-label-md-default-family, Satoshi);font-size:var(--typography-label-md-default-size, 1rem);font-style:normal;font-weight:var(--typography-label-md-default-weight, 400);line-height:var(--typography-label-md-default-line-height, 1.5rem);letter-spacing:var(--typography-label-md-default-letter-spacing, 0rem);cursor:pointer;overflow:hidden;position:relative}.c-select__selection:focus{border:var(--size-textfield-border-width) solid var(--color-textfield-border-active);outline:none}.c-select__selection--sm,.c-select__selection--md{padding:var(--space-component-padding-xs) 2rem var(--space-component-padding-xs) 2rem}.c-select__selection.is-error{border-color:var(--color-textfield-border-error)}.c-select__selection.is-success{border-color:var(--color-feedback-success-surface-border)}.c-select__selection.is-disabled{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled);color:var(--color-textfield-content-disabled)}.c-select__selection.is-readonly{background-color:var(--color-textfield-background-disabled);border-color:var(--color-textfield-border-disabled)}.c-select__arrow{position:absolute;right:1.5rem}\n"] }]
|
|
1672
1717
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { options: [{
|
|
1673
1718
|
type: Input
|
|
1674
1719
|
}], multiple: [{
|
|
@@ -1697,6 +1742,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1697
1742
|
type: Input
|
|
1698
1743
|
}], size: [{
|
|
1699
1744
|
type: Input
|
|
1745
|
+
}], fullWidth: [{
|
|
1746
|
+
type: Input
|
|
1700
1747
|
}], selectionChange: [{
|
|
1701
1748
|
type: Output
|
|
1702
1749
|
}], container: [{
|
|
@@ -1816,6 +1863,7 @@ class TextInputComponent {
|
|
|
1816
1863
|
required = false;
|
|
1817
1864
|
type = 'text';
|
|
1818
1865
|
size = 'md';
|
|
1866
|
+
fullWidth = false;
|
|
1819
1867
|
emitValue = new EventEmitter();
|
|
1820
1868
|
_value = '';
|
|
1821
1869
|
onChangeFn = () => { };
|
|
@@ -1838,7 +1886,7 @@ class TextInputComponent {
|
|
|
1838
1886
|
`c-text-input__input--${this.size}`,
|
|
1839
1887
|
this.error ? 'is-error' : this.success ? 'is-success' : 'is-default',
|
|
1840
1888
|
this.disabled ? 'is-disabled' : '',
|
|
1841
|
-
this.readonly ? 'is-readonly' : ''
|
|
1889
|
+
this.readonly ? 'is-readonly' : '',
|
|
1842
1890
|
].filter(Boolean);
|
|
1843
1891
|
}
|
|
1844
1892
|
get helperClass() {
|
|
@@ -1861,13 +1909,13 @@ class TextInputComponent {
|
|
|
1861
1909
|
this.onTouchedFn();
|
|
1862
1910
|
}
|
|
1863
1911
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1864
|
-
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: [
|
|
1912
|
+
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", fullWidth: "fullWidth" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
1865
1913
|
{
|
|
1866
1914
|
provide: NG_VALUE_ACCESSOR,
|
|
1867
1915
|
useExisting: forwardRef(() => TextInputComponent),
|
|
1868
|
-
multi: true
|
|
1869
|
-
}
|
|
1870
|
-
], 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-
|
|
1916
|
+
multi: true,
|
|
1917
|
+
},
|
|
1918
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\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--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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-textfield-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"] }] });
|
|
1871
1919
|
}
|
|
1872
1920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
1873
1921
|
type: Component,
|
|
@@ -1875,14 +1923,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1875
1923
|
CommonModule,
|
|
1876
1924
|
ReactiveFormsModule,
|
|
1877
1925
|
InputLabelComponent,
|
|
1878
|
-
IconComponent
|
|
1926
|
+
IconComponent,
|
|
1879
1927
|
], providers: [
|
|
1880
1928
|
{
|
|
1881
1929
|
provide: NG_VALUE_ACCESSOR,
|
|
1882
1930
|
useExisting: forwardRef(() => TextInputComponent),
|
|
1883
|
-
multi: true
|
|
1884
|
-
}
|
|
1885
|
-
], 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-
|
|
1931
|
+
multi: true,
|
|
1932
|
+
},
|
|
1933
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\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--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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-textfield-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"] }]
|
|
1886
1934
|
}], propDecorators: { label: [{
|
|
1887
1935
|
type: Input
|
|
1888
1936
|
}], name: [{
|
|
@@ -1909,6 +1957,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1909
1957
|
type: Input
|
|
1910
1958
|
}], size: [{
|
|
1911
1959
|
type: Input
|
|
1960
|
+
}], fullWidth: [{
|
|
1961
|
+
type: Input
|
|
1912
1962
|
}], emitValue: [{
|
|
1913
1963
|
type: Output
|
|
1914
1964
|
}] } });
|
|
@@ -1926,6 +1976,7 @@ class TextareaComponent {
|
|
|
1926
1976
|
readonly = false;
|
|
1927
1977
|
required = false;
|
|
1928
1978
|
size = 'md';
|
|
1979
|
+
fullWidth = false;
|
|
1929
1980
|
emitValue = new EventEmitter();
|
|
1930
1981
|
_value = '';
|
|
1931
1982
|
onChangeFn = () => { };
|
|
@@ -1948,7 +1999,7 @@ class TextareaComponent {
|
|
|
1948
1999
|
`c-text-input__input--${this.size}`,
|
|
1949
2000
|
this.error ? 'is-error' : this.success ? 'is-success' : 'is-default',
|
|
1950
2001
|
this.disabled ? 'is-disabled' : '',
|
|
1951
|
-
this.readonly ? 'is-readonly' : ''
|
|
2002
|
+
this.readonly ? 'is-readonly' : '',
|
|
1952
2003
|
].filter(Boolean);
|
|
1953
2004
|
}
|
|
1954
2005
|
get ariaDescribedBy() {
|
|
@@ -1964,13 +2015,13 @@ class TextareaComponent {
|
|
|
1964
2015
|
this.onTouchedFn();
|
|
1965
2016
|
}
|
|
1966
2017
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1967
|
-
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: [
|
|
2018
|
+
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", fullWidth: "fullWidth" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
1968
2019
|
{
|
|
1969
2020
|
provide: NG_VALUE_ACCESSOR,
|
|
1970
2021
|
useExisting: forwardRef(() => TextareaComponent),
|
|
1971
|
-
multi: true
|
|
1972
|
-
}
|
|
1973
|
-
], 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-
|
|
2022
|
+
multi: true,
|
|
2023
|
+
},
|
|
2024
|
+
], ngImport: i0, template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\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--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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"] }] });
|
|
1974
2025
|
}
|
|
1975
2026
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
1976
2027
|
type: Component,
|
|
@@ -1979,14 +2030,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
1979
2030
|
ReactiveFormsModule,
|
|
1980
2031
|
InputLabelComponent,
|
|
1981
2032
|
IconComponent,
|
|
1982
|
-
HelperTextComponent
|
|
2033
|
+
HelperTextComponent,
|
|
1983
2034
|
], providers: [
|
|
1984
2035
|
{
|
|
1985
2036
|
provide: NG_VALUE_ACCESSOR,
|
|
1986
2037
|
useExisting: forwardRef(() => TextareaComponent),
|
|
1987
|
-
multi: true
|
|
1988
|
-
}
|
|
1989
|
-
], 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-
|
|
2038
|
+
multi: true,
|
|
2039
|
+
},
|
|
2040
|
+
], template: "<div class=\"c-text-input\" [class.c-text-input--full-width]=\"fullWidth\">\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--full-width{max-width:100%}.c-text-input__input{border-radius:var(--size-textfield-border-radius);border:var(--size-textfield-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"] }]
|
|
1990
2041
|
}], propDecorators: { label: [{
|
|
1991
2042
|
type: Input
|
|
1992
2043
|
}], placeholder: [{
|
|
@@ -2011,6 +2062,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
2011
2062
|
type: Input
|
|
2012
2063
|
}], size: [{
|
|
2013
2064
|
type: Input
|
|
2065
|
+
}], fullWidth: [{
|
|
2066
|
+
type: Input
|
|
2014
2067
|
}], emitValue: [{
|
|
2015
2068
|
type: Output
|
|
2016
2069
|
}] } });
|