@crowdfarming/oliva-ds 1.22.0 → 1.23.0-rc.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 +40 -6
- package/fesm2022/crowdfarming-oliva-ds.mjs.map +1 -1
- package/lib/password-input/src/lib/password-input/password-input.component.d.ts +4 -1
- package/lib/password-input/src/lib/password-input/password-input.constants.d.ts +2 -0
- package/lib/tabs/src/lib/tabs/tabs.component.d.ts +5 -2
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, inject, ElementRef, HostListener, ViewChild, Directive, model, ViewChildren,
|
|
2
|
+
import { Input, Component, EventEmitter, Output, input, computed, output, signal, effect, forwardRef, inject, ElementRef, HostListener, ViewChild, Directive, model, ViewChildren, viewChild, HostBinding, ApplicationRef, Injector, createComponent, Injectable } from '@angular/core';
|
|
3
3
|
import * as i1$1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgClass, NgTemplateOutlet, NgStyle } from '@angular/common';
|
|
5
5
|
import * as i1 from '@angular/platform-browser';
|
|
@@ -4143,6 +4143,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4143
4143
|
|
|
4144
4144
|
class PasswordInputComponent {
|
|
4145
4145
|
label = '';
|
|
4146
|
+
name = '';
|
|
4146
4147
|
placeholder = '';
|
|
4147
4148
|
helperText = '';
|
|
4148
4149
|
alertText = '';
|
|
@@ -4154,6 +4155,7 @@ class PasswordInputComponent {
|
|
|
4154
4155
|
required = false;
|
|
4155
4156
|
size = 'md';
|
|
4156
4157
|
fullWidth = false;
|
|
4158
|
+
autocomplete = 'off';
|
|
4157
4159
|
emitValue = new EventEmitter();
|
|
4158
4160
|
_value = '';
|
|
4159
4161
|
showPassword = false;
|
|
@@ -4200,13 +4202,13 @@ class PasswordInputComponent {
|
|
|
4200
4202
|
this.onTouchedFn();
|
|
4201
4203
|
}
|
|
4202
4204
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4203
|
-
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: [
|
|
4205
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.7", type: PasswordInputComponent, isStandalone: true, selector: "lib-password-input", inputs: { label: "label", name: "name", placeholder: "placeholder", helperText: "helperText", alertText: "alertText", successText: "successText", error: "error", success: "success", disabled: "disabled", readonly: "readonly", required: "required", size: "size", fullWidth: "fullWidth", autocomplete: "autocomplete" }, outputs: { emitValue: "emitValue" }, providers: [
|
|
4204
4206
|
{
|
|
4205
4207
|
provide: NG_VALUE_ACCESSOR,
|
|
4206
4208
|
useExisting: forwardRef(() => PasswordInputComponent),
|
|
4207
4209
|
multi: true,
|
|
4208
4210
|
},
|
|
4209
|
-
], 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=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n [iconName]=\"showPassword ? 'eyeslash-regular' : 'eye-regular'\"\n (click)=\"togglePassword()\"\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=\"danger\" [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%;height:48px;box-sizing:border-box;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-md) var(--space-component-padding-sm) var(--space-component-padding-md) 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-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;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{height:40px;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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
4211
|
+
], 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 [for]=\"name\"\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 [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [attr.aria-label]=\"label || 'Password input'\"\n [attr.aria-labelledby]=\"name\"\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=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n [iconName]=\"showPassword ? 'eyeslash-regular' : 'eye-regular'\"\n (click)=\"togglePassword()\"\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=\"danger\" [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%;height:48px;box-sizing:border-box;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-md) var(--space-component-padding-sm) var(--space-component-padding-md) 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-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;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{height:40px;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$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: InputLabelComponent, selector: "lib-input-label", inputs: ["text", "required", "size", "disabled", "for", "innerHTML"] }, { kind: "component", type: ButtonIconComponent, selector: "lib-button-icon", inputs: ["ariaLabel", "variant", "size", "iconName", "disabled", "loading", "skeletonActive"], outputs: ["clicked"] }, { kind: "component", type: HelperTextComponent, selector: "lib-helper-text", inputs: ["variant", "text", "extraClass"] }] });
|
|
4210
4212
|
}
|
|
4211
4213
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: PasswordInputComponent, decorators: [{
|
|
4212
4214
|
type: Component,
|
|
@@ -4223,9 +4225,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4223
4225
|
useExisting: forwardRef(() => PasswordInputComponent),
|
|
4224
4226
|
multi: true,
|
|
4225
4227
|
},
|
|
4226
|
-
], 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=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n [iconName]=\"showPassword ? 'eyeslash-regular' : 'eye-regular'\"\n (click)=\"togglePassword()\"\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=\"danger\" [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%;height:48px;box-sizing:border-box;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-md) var(--space-component-padding-sm) var(--space-component-padding-md) 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-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;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{height:40px;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"] }]
|
|
4228
|
+
], 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 [for]=\"name\"\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 [attr.autocomplete]=\"autocomplete\"\n [id]=\"name\"\n [name]=\"name\"\n [attr.aria-label]=\"label || 'Password input'\"\n [attr.aria-labelledby]=\"name\"\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=\"neutral\"\n size=\"sm\"\n class=\"c-text-input__toggle\"\n [iconName]=\"showPassword ? 'eyeslash-regular' : 'eye-regular'\"\n (click)=\"togglePassword()\"\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=\"danger\" [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%;height:48px;box-sizing:border-box;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-md) var(--space-component-padding-sm) var(--space-component-padding-md) 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-visible{border-color:var(--color-textfield-border-active);box-shadow:0 0 0 1px var(--color-textfield-border-active);outline:none}.c-text-input__input--sm{height:32px;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{height:40px;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"] }]
|
|
4227
4229
|
}], propDecorators: { label: [{
|
|
4228
4230
|
type: Input
|
|
4231
|
+
}], name: [{
|
|
4232
|
+
type: Input
|
|
4229
4233
|
}], placeholder: [{
|
|
4230
4234
|
type: Input
|
|
4231
4235
|
}], helperText: [{
|
|
@@ -4248,6 +4252,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImpor
|
|
|
4248
4252
|
type: Input
|
|
4249
4253
|
}], fullWidth: [{
|
|
4250
4254
|
type: Input
|
|
4255
|
+
}], autocomplete: [{
|
|
4256
|
+
type: Input
|
|
4251
4257
|
}], emitValue: [{
|
|
4252
4258
|
type: Output
|
|
4253
4259
|
}] } });
|
|
@@ -4696,21 +4702,49 @@ class TabsComponent {
|
|
|
4696
4702
|
alignment = input('left');
|
|
4697
4703
|
valueChange = output();
|
|
4698
4704
|
selectedValue = 0;
|
|
4705
|
+
tabsRef = viewChild('tabsRef');
|
|
4699
4706
|
ngOnInit() {
|
|
4700
4707
|
if (this.options()?.length) {
|
|
4701
4708
|
this.selectedValue = this.options()[0].value;
|
|
4702
4709
|
}
|
|
4703
4710
|
}
|
|
4711
|
+
ngAfterViewInit() {
|
|
4712
|
+
this.centerSelectedTab();
|
|
4713
|
+
}
|
|
4704
4714
|
onClick($event, value) {
|
|
4705
4715
|
this.selectedValue = value;
|
|
4706
4716
|
this.valueChange.emit(value);
|
|
4717
|
+
// Wait for the DOM to be updated
|
|
4718
|
+
setTimeout(() => this.centerSelectedTab(), 0);
|
|
4719
|
+
}
|
|
4720
|
+
centerSelectedTab() {
|
|
4721
|
+
const scrollContainer = this.tabsRef()?.nativeElement;
|
|
4722
|
+
const selectedTab = scrollContainer?.querySelector('.c-tabs__tab--selected');
|
|
4723
|
+
if (!scrollContainer || !selectedTab) {
|
|
4724
|
+
return;
|
|
4725
|
+
}
|
|
4726
|
+
const containerScrollLeft = scrollContainer.scrollLeft;
|
|
4727
|
+
const containerWidth = scrollContainer.clientWidth;
|
|
4728
|
+
const tabOffsetLeft = selectedTab.offsetLeft;
|
|
4729
|
+
const tabWidth = selectedTab.offsetWidth;
|
|
4730
|
+
const tabLeftEdge = tabOffsetLeft - containerScrollLeft;
|
|
4731
|
+
const tabRightEdge = tabLeftEdge + tabWidth;
|
|
4732
|
+
const isTabOutsideLeft = tabLeftEdge < 0;
|
|
4733
|
+
const isTabOutsideRight = tabRightEdge > containerWidth;
|
|
4734
|
+
if (isTabOutsideLeft || isTabOutsideRight) {
|
|
4735
|
+
const scrollLeft = tabOffsetLeft - (containerWidth / 2) + (tabWidth / 2);
|
|
4736
|
+
scrollContainer.scrollTo({
|
|
4737
|
+
left: Math.max(0, scrollLeft),
|
|
4738
|
+
behavior: 'smooth'
|
|
4739
|
+
});
|
|
4740
|
+
}
|
|
4707
4741
|
}
|
|
4708
4742
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4709
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TabsComponent, isStandalone: true, selector: "lib-tabs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<
|
|
4743
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.7", type: TabsComponent, isStandalone: true, selector: "lib-tabs", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, alignment: { classPropertyName: "alignment", publicName: "alignment", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "tabsRef", first: true, predicate: ["tabsRef"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"c-tabs\">\n <div class=\"c-tabs__scroll-container\" #tabsRef>\n <ul\n class=\"c-tabs__list\"\n [class.c-tabs__list--center]=\"alignment() === 'center'\"\n role=\"tablist\"\n >\n @for (option of options(); track option.value) {\n <li\n class=\"c-tabs__tab\"\n [class.c-tabs__tab--selected]=\"option.value === selectedValue\"\n role=\"tab\"\n tabindex=\"0\"\n (click)=\"onClick($event, option.value)\"\n (keydown)=\"onClick($event, option.value)\"\n >\n @if (option.iconName) {\n <lib-icon [name]=\"option.iconName\" size=\"lg\" color=\"core-content-default\" />\n }\n {{ option.label }}\n @if (option.showBadge) {\n <lib-badge />\n }\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: [".c-tabs{width:100%}.c-tabs__scroll-container{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.c-tabs__scroll-container::-webkit-scrollbar{display:none}.c-tabs__list{width:100%;height:40px;display:flex;align-items:flex-start;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);margin:0;padding:0;list-style:none;box-sizing:border-box;min-width:max-content}.c-tabs__list--center{justify-content:center}.c-tabs__tab{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:72px;flex-shrink:0;white-space:nowrap;box-sizing:border-box;color:var(--color-action-neutral-content-default);text-align:center;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);padding:var(--space-component-padding-sm) var(--space-component-padding-md);background:var(--color-action-primary-background-default);gap:var(--space-component-gap-sm);margin:0;list-style:none}.c-tabs__tab:hover{color:var(--color-action-neutral-content-hover);background:var(--color-action-neutral-background-hover)}.c-tabs__tab:active{color:var(--color-action-neutral-content-pressed);background-color:var(--color-action-neutral-background-pressed)}.c-tabs__tab:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-tabs__tab--selected{position:relative;color:var(--color-core-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tabs__tab--selected:before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:.125rem;background:var(--color-action-primary-selected-background-default)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "lib-icon", inputs: ["size", "icon", "name", "color"] }, { kind: "component", type: BadgeComponent, selector: "lib-badge", inputs: ["extraClass", "text", "showText", "strokeEnabled"] }] });
|
|
4710
4744
|
}
|
|
4711
4745
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.7", ngImport: i0, type: TabsComponent, decorators: [{
|
|
4712
4746
|
type: Component,
|
|
4713
|
-
args: [{ selector: 'lib-tabs', standalone: true, imports: [IconComponent, BadgeComponent], template: "<
|
|
4747
|
+
args: [{ selector: 'lib-tabs', standalone: true, imports: [IconComponent, BadgeComponent], template: "<div class=\"c-tabs\">\n <div class=\"c-tabs__scroll-container\" #tabsRef>\n <ul\n class=\"c-tabs__list\"\n [class.c-tabs__list--center]=\"alignment() === 'center'\"\n role=\"tablist\"\n >\n @for (option of options(); track option.value) {\n <li\n class=\"c-tabs__tab\"\n [class.c-tabs__tab--selected]=\"option.value === selectedValue\"\n role=\"tab\"\n tabindex=\"0\"\n (click)=\"onClick($event, option.value)\"\n (keydown)=\"onClick($event, option.value)\"\n >\n @if (option.iconName) {\n <lib-icon [name]=\"option.iconName\" size=\"lg\" color=\"core-content-default\" />\n }\n {{ option.label }}\n @if (option.showBadge) {\n <lib-badge />\n }\n </li>\n }\n </ul>\n </div>\n</div>\n", styles: [".c-tabs{width:100%}.c-tabs__scroll-container{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth}.c-tabs__scroll-container::-webkit-scrollbar{display:none}.c-tabs__list{width:100%;height:40px;display:flex;align-items:flex-start;border-bottom:var(--size-border-width-sm) solid var(--color-core-border-soft);margin:0;padding:0;list-style:none;box-sizing:border-box;min-width:max-content}.c-tabs__list--center{justify-content:center}.c-tabs__tab{cursor:pointer;display:flex;align-items:center;justify-content:center;min-width:72px;flex-shrink:0;white-space:nowrap;box-sizing:border-box;color:var(--color-action-neutral-content-default);text-align:center;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);padding:var(--space-component-padding-sm) var(--space-component-padding-md);background:var(--color-action-primary-background-default);gap:var(--space-component-gap-sm);margin:0;list-style:none}.c-tabs__tab:hover{color:var(--color-action-neutral-content-hover);background:var(--color-action-neutral-background-hover)}.c-tabs__tab:active{color:var(--color-action-neutral-content-pressed);background-color:var(--color-action-neutral-background-pressed)}.c-tabs__tab:focus-visible{box-shadow:var(--focus-inset);outline:none}.c-tabs__tab--selected{position:relative;color:var(--color-core-content-default);font-family:var(--typography-label-md-strong-family);font-size:var(--typography-label-md-strong-size);font-style:normal;font-weight:var(--typography-label-md-strong-weight);line-height:var(--typography-label-md-strong-line-height);letter-spacing:var(--typography-label-md-strong-letter-spacing)}.c-tabs__tab--selected:before{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:.125rem;background:var(--color-action-primary-selected-background-default)}\n"] }]
|
|
4714
4748
|
}] });
|
|
4715
4749
|
|
|
4716
4750
|
class TagComponent {
|