@lesterarte/sefin-ui 0.0.87 → 0.0.89
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.
|
@@ -3311,7 +3311,7 @@ class TextFieldComponent {
|
|
|
3311
3311
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
3312
3312
|
multi: true,
|
|
3313
3313
|
},
|
|
3314
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"textFieldClasses\">\n <!-- Input Container -->\n <div class=\"sefin-textfield__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__leading-icon\">\n <sefin-icon\n [name]=\"leadingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-textfield__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"id\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? id + '-helper' : null\n \"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-textfield__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-textfield__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon\n [name]=\"trailingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-textfield__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textfield__helper\"\n [class.sefin-textfield__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textfield__counter\"\n [class.sefin-textfield__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - var(--sefin-spacing-xl));z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5}.sefin-textfield__input::placeholder{color:var(--sefin-color-placeholder)!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-textfield__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon{color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--radius-none.sefin-textfield--outlined .sefin-textfield__input-container,.sefin-textfield--radius-none.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-none)}.sefin-textfield--radius-sm.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-sm)}.sefin-textfield--radius-sm.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-textfield--radius-md.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-md)}.sefin-textfield--radius-md.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-textfield--radius-lg.sefin-textfield--outlined .sefin-textfield__input-container,.sefin-textfield--radius-lg.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-lg)}.sefin-textfield--radius-lg.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-textfield--radius-xl.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-xl)}.sefin-textfield--radius-xl.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-textfield--radius-2xl.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-2xl)}.sefin-textfield--radius-2xl.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-textfield--radius-full.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-full)}.sefin-textfield--radius-full.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--focused.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px;transition:background-color .2s ease-in-out}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:var(--sefin-input-height-sm)}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:var(--sefin-input-height-md)}.sefin-textfield--lg .sefin-textfield__input-container{min-height:var(--sefin-input-height-lg)}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
3314
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"textFieldClasses\">\n <!-- Input Container -->\n <div class=\"sefin-textfield__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__leading-icon\">\n <sefin-icon\n [name]=\"leadingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-textfield__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"id\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? id + '-helper' : null\n \"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-textfield__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-textfield__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon\n [name]=\"trailingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-textfield__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textfield__helper\"\n [class.sefin-textfield__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textfield__counter\"\n [class.sefin-textfield__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;min-width:0;overflow:hidden}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - var(--sefin-spacing-xl));z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__input{width:100%;min-width:0;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;overflow:hidden;text-overflow:ellipsis}.sefin-textfield__input::placeholder{color:var(--sefin-color-placeholder)!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-textfield__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon{color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--radius-none.sefin-textfield--outlined .sefin-textfield__input-container,.sefin-textfield--radius-none.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-none)}.sefin-textfield--radius-sm.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-sm)}.sefin-textfield--radius-sm.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-textfield--radius-md.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-md)}.sefin-textfield--radius-md.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-textfield--radius-lg.sefin-textfield--outlined .sefin-textfield__input-container,.sefin-textfield--radius-lg.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-lg)}.sefin-textfield--radius-lg.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-textfield--radius-xl.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-xl)}.sefin-textfield--radius-xl.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-textfield--radius-2xl.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-2xl)}.sefin-textfield--radius-2xl.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-textfield--radius-full.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-full)}.sefin-textfield--radius-full.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--focused.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px;transition:background-color .2s ease-in-out}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:var(--sefin-input-height-sm)}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:var(--sefin-input-height-md)}.sefin-textfield--lg .sefin-textfield__input-container{min-height:var(--sefin-input-height-lg)}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
3315
3315
|
}
|
|
3316
3316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: TextFieldComponent, decorators: [{
|
|
3317
3317
|
type: Component,
|
|
@@ -3326,7 +3326,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
3326
3326
|
useExisting: forwardRef(() => TextFieldComponent),
|
|
3327
3327
|
multi: true,
|
|
3328
3328
|
},
|
|
3329
|
-
], template: "<div [class]=\"textFieldClasses\">\n <!-- Input Container -->\n <div class=\"sefin-textfield__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__leading-icon\">\n <sefin-icon\n [name]=\"leadingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-textfield__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"id\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? id + '-helper' : null\n \"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-textfield__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-textfield__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon\n [name]=\"trailingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-textfield__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textfield__helper\"\n [class.sefin-textfield__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textfield__counter\"\n [class.sefin-textfield__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - var(--sefin-spacing-xl));z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5}.sefin-textfield__input::placeholder{color:var(--sefin-color-placeholder)!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-textfield__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon{color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--radius-none.sefin-textfield--outlined .sefin-textfield__input-container,.sefin-textfield--radius-none.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-none)}.sefin-textfield--radius-sm.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-sm)}.sefin-textfield--radius-sm.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-textfield--radius-md.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-md)}.sefin-textfield--radius-md.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-textfield--radius-lg.sefin-textfield--outlined .sefin-textfield__input-container,.sefin-textfield--radius-lg.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-lg)}.sefin-textfield--radius-lg.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-textfield--radius-xl.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-xl)}.sefin-textfield--radius-xl.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-textfield--radius-2xl.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-2xl)}.sefin-textfield--radius-2xl.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-textfield--radius-full.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-full)}.sefin-textfield--radius-full.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--focused.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px;transition:background-color .2s ease-in-out}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:var(--sefin-input-height-sm)}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:var(--sefin-input-height-md)}.sefin-textfield--lg .sefin-textfield__input-container{min-height:var(--sefin-input-height-lg)}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"] }]
|
|
3329
|
+
], template: "<div [class]=\"textFieldClasses\">\n <!-- Input Container -->\n <div class=\"sefin-textfield__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-textfield__leading-icon\">\n <sefin-icon\n [name]=\"leadingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-textfield__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"id\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? id + '-helper' : null\n \"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-textfield__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-textfield__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon\n [name]=\"trailingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-textfield__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"id + '-helper'\"\n class=\"sefin-textfield__helper\"\n [class.sefin-textfield__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-textfield__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-textfield__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-textfield__counter\"\n [class.sefin-textfield__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-textfield{position:relative;display:inline-flex;flex-direction:column;width:100%;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-textfield__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-textfield__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;min-width:0;overflow:hidden}.sefin-textfield__label{position:absolute;left:0;top:50%;transform:translateY(-50%);pointer-events:none;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text-secondary, #666);transition:all .2s cubic-bezier(.4,0,.2,1);transform-origin:top left;white-space:nowrap;overflow:visible;text-overflow:ellipsis;max-width:calc(100% - var(--sefin-spacing-xl));z-index:1}.sefin-textfield__label--floating{top:0;transform:translateY(-50%) scale(.75);font-weight:var(--sefin-font-weight-medium, 500);background-color:transparent;padding:4px var(--sefin-spacing-xs, 4px);margin-left:calc(var(--sefin-spacing-xs, 4px) * -1);z-index:3;color:var(--sefin-color-primary, #1976d2);overflow:visible}.sefin-textfield__label--floating:before{content:\"\";position:absolute;top:0;left:calc(var(--sefin-spacing-xs, 4px) * -1);right:calc(var(--sefin-spacing-xs, 4px) * -1);height:2px;transform:translateY(-50%);z-index:-1;pointer-events:none;background-color:var(--sefin-color-surface, #ffffff);box-sizing:border-box}.sefin-textfield__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336)}.sefin-textfield__input{width:100%;min-width:0;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;overflow:hidden;text-overflow:ellipsis}.sefin-textfield__input::placeholder{color:var(--sefin-color-placeholder)!important;opacity:0;transition:opacity .2s ease-in-out}.sefin-textfield__label--floating~.sefin-textfield__input::placeholder{opacity:0}.sefin-textfield__label--floating~.sefin-textfield__input:focus::placeholder{opacity:1}.sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__input:focus::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield__input:disabled,.sefin-textfield__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-textfield__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-textfield__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-ms-reveal,.sefin-textfield__input[type=password]::-ms-clear,.sefin-textfield__input[data-password-field=true]::-ms-reveal,.sefin-textfield__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-textfield__input[type=password]::-moz-focus-inner,.sefin-textfield__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-textfield--no-label .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield--no-label .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield--no-label .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield--no-label .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__label:not(.sefin-textfield__label--floating)~.sefin-textfield__input::placeholder{opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::placeholder{opacity:1;color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-textfield:not(.sefin-textfield--no-label) .sefin-textfield__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important}.sefin-textfield__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-textfield__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-textfield__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-textfield__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon{color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-textfield.sefin-textfield--error .sefin-textfield__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-textfield__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-textfield__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-textfield__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-textfield__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-textfield__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-textfield--radius-none.sefin-textfield--outlined .sefin-textfield__input-container,.sefin-textfield--radius-none.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-none)}.sefin-textfield--radius-sm.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-sm)}.sefin-textfield--radius-sm.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-textfield--radius-md.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-md)}.sefin-textfield--radius-md.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-textfield--radius-lg.sefin-textfield--outlined .sefin-textfield__input-container,.sefin-textfield--radius-lg.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-lg)}.sefin-textfield--radius-lg.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-textfield--radius-xl.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-xl)}.sefin-textfield--radius-xl.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-textfield--radius-2xl.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-2xl)}.sefin-textfield--radius-2xl.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-textfield--radius-full.sefin-textfield--outlined .sefin-textfield__input-container{border-radius:var(--sefin-radius-full)}.sefin-textfield--radius-full.sefin-textfield--filled .sefin-textfield__input-container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-textfield--outlined .sefin-textfield__input-container{border:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-textfield--outlined .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__label--floating{background-color:transparent}.sefin-textfield--outlined .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--outlined.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--outlined .sefin-textfield__border{display:none}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-textfield--outlined.sefin-textfield--focused .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--outlined.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--focused.sefin-textfield--error .sefin-textfield__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--outlined.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--filled .sefin-textfield__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-textfield--filled .sefin-textfield__label{left:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--filled .sefin-textfield__label--floating:before{background-color:var(--sefin-color-surface-hover, #f5f5f5);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:0}.sefin-textfield--filled.sefin-textfield--with-leading-icon .sefin-textfield__label{left:0}.sefin-textfield--filled .sefin-textfield__border{display:none}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--focused .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface, #ffffff)}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--filled.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--filled.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff);top:auto;bottom:0;margin-bottom:-1px;transform:none}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-wrapper:before{background-color:var(--sefin-color-surface-hover, #f5f5f5)}.sefin-textfield--standard .sefin-textfield__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-textfield--standard .sefin-textfield__label{left:0}.sefin-textfield--standard .sefin-textfield__label--floating{background-color:transparent;color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard .sefin-textfield__label--floating:before{background-color:var(--sefin-color-background, #ffffff)}.sefin-textfield--standard .sefin-textfield__input-wrapper{padding-left:0;padding-right:0}.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input-wrapper,.sefin-textfield--standard.sefin-textfield--with-leading-icon .sefin-textfield__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-textfield--standard .sefin-textfield__border{height:1px;transition:background-color .2s ease-in-out}.sefin-textfield--standard.sefin-textfield--focused .sefin-textfield__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__label,.sefin-textfield--standard.sefin-textfield--error .sefin-textfield__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-textfield--standard.sefin-textfield--disabled .sefin-textfield__input-container{border-bottom-color:var(--sefin-color-border);opacity:.6}.sefin-textfield--sm .sefin-textfield__input-container{min-height:var(--sefin-input-height-sm)}.sefin-textfield--sm .sefin-textfield__input,.sefin-textfield--sm .sefin-textfield__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-textfield--sm.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--sm.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-textfield--md .sefin-textfield__input-container{min-height:var(--sefin-input-height-md)}.sefin-textfield--lg .sefin-textfield__input-container{min-height:var(--sefin-input-height-lg)}.sefin-textfield--lg .sefin-textfield__input,.sefin-textfield--lg .sefin-textfield__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--outlined .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-textfield--lg.sefin-textfield--filled .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-textfield--lg.sefin-textfield--standard .sefin-textfield__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-textfield--disabled{cursor:not-allowed;opacity:.6}.sefin-textfield--readonly .sefin-textfield__input{cursor:default}\n"] }]
|
|
3330
3330
|
}], propDecorators: { inputRef: [{
|
|
3331
3331
|
type: ViewChild,
|
|
3332
3332
|
args: ['inputRef', { static: false }]
|
|
@@ -4160,11 +4160,11 @@ class AutocompleteComponent {
|
|
|
4160
4160
|
.join(' ');
|
|
4161
4161
|
}
|
|
4162
4162
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4163
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AutocompleteComponent, isStandalone: true, selector: "sefin-autocomplete", inputs: { options: "options", placeholder: "placeholder", hint: "hint", error: "error", errorMessage: "errorMessage", disabled: "disabled", size: "size", borderRadius: "borderRadius", class: "class", id: "id", value: "value", minChars: "minChars", maxResults: "maxResults" }, outputs: { valueChange: "valueChange", optionSelected: "optionSelected", inputChange: "inputChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-autocomplete__wrapper\">\n <input\n #inputRef\n type=\"text\"\n [class]=\"inputClasses\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n autocomplete=\"off\"\n />\n <div class=\"sefin-autocomplete__actions\">\n <button\n *ngIf=\"searchText && !disabled\"\n type=\"button\"\n class=\"sefin-autocomplete__clear\"\n (click)=\"clearValue()\"\n aria-label=\"Clear\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n #dropdownRef\n class=\"sefin-autocomplete__dropdown\"\n >\n <ul class=\"sefin-autocomplete__list\">\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-autocomplete__option]=\"true\"\n [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n (mousedown)=\"onOptionMouseDown($event, option)\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"i === selectedIndex\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"\n isOpen &&\n filteredOptions &&\n filteredOptions.length === 0 &&\n searchText &&\n searchText.length >= minChars\n \"\n class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n >\n <div class=\"sefin-autocomplete__no-results\">\n No se encontraron resultados\n </div>\n </div>\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint\"\n [id]=\"internalId + '-helper'\"\n class=\"sefin-autocomplete__helper\"\n [class.sefin-autocomplete__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-autocomplete__error-message\">\n {{ errorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-autocomplete__hint\">\n {{ hint }}\n </span>\n </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-autocomplete--radius-none .sefin-autocomplete__input,.sefin-autocomplete--radius-none .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-none{border-radius:var(--sefin-radius-none)}.sefin-autocomplete--radius-sm .sefin-autocomplete__input,.sefin-autocomplete--radius-sm .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-autocomplete--radius-md .sefin-autocomplete__input,.sefin-autocomplete--radius-md .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-md{border-radius:var(--sefin-radius-md)}.sefin-autocomplete--radius-lg .sefin-autocomplete__input,.sefin-autocomplete--radius-lg .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-autocomplete--radius-xl .sefin-autocomplete__input,.sefin-autocomplete--radius-xl .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-autocomplete--radius-2xl .sefin-autocomplete__input,.sefin-autocomplete--radius-2xl .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-autocomplete--radius-full .sefin-autocomplete__input,.sefin-autocomplete--radius-full .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-full{border-radius:var(--sefin-radius-full)}.sefin-autocomplete__input{width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;box-sizing:border-box}.sefin-autocomplete__input:hover:not(:disabled){background-color:var(--sefin-color-surface-hover-subtle);border-color:var(--sefin-color-secondary-light, var(--sefin-color-border))}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-placeholder);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)}.sefin-autocomplete__input::-moz-placeholder{color:var(--sefin-color-placeholder);opacity:1}.sefin-autocomplete__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__input--error{border-color:var(--sefin-color-error)}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover:not(:disabled){background-color:var(--sefin-color-surface-option-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-option-hover);color:var(--sefin-color-text)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary);color:var(--sefin-color-background);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}.sefin-autocomplete__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-autocomplete__hint{color:var(--sefin-color-text-secondary)}.sefin-autocomplete__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
4163
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.8", type: AutocompleteComponent, isStandalone: true, selector: "sefin-autocomplete", inputs: { options: "options", placeholder: "placeholder", hint: "hint", error: "error", errorMessage: "errorMessage", disabled: "disabled", size: "size", borderRadius: "borderRadius", class: "class", id: "id", value: "value", minChars: "minChars", maxResults: "maxResults" }, outputs: { valueChange: "valueChange", optionSelected: "optionSelected", inputChange: "inputChange" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }, { propertyName: "dropdownRef", first: true, predicate: ["dropdownRef"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-autocomplete__wrapper\">\n <input\n #inputRef\n type=\"text\"\n [class]=\"inputClasses\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n autocomplete=\"off\"\n />\n <div class=\"sefin-autocomplete__actions\">\n <button\n *ngIf=\"searchText && !disabled\"\n type=\"button\"\n class=\"sefin-autocomplete__clear\"\n (click)=\"clearValue()\"\n aria-label=\"Clear\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n #dropdownRef\n class=\"sefin-autocomplete__dropdown\"\n >\n <ul class=\"sefin-autocomplete__list\">\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-autocomplete__option]=\"true\"\n [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n (mousedown)=\"onOptionMouseDown($event, option)\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"i === selectedIndex\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"\n isOpen &&\n filteredOptions &&\n filteredOptions.length === 0 &&\n searchText &&\n searchText.length >= minChars\n \"\n class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n >\n <div class=\"sefin-autocomplete__no-results\">\n No se encontraron resultados\n </div>\n </div>\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint\"\n [id]=\"internalId + '-helper'\"\n class=\"sefin-autocomplete__helper\"\n [class.sefin-autocomplete__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-autocomplete__error-message\">\n {{ errorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-autocomplete__hint\">\n {{ hint }}\n </span>\n </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%;min-width:0}.sefin-autocomplete--radius-none .sefin-autocomplete__input,.sefin-autocomplete--radius-none .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-none{border-radius:var(--sefin-radius-none)}.sefin-autocomplete--radius-sm .sefin-autocomplete__input,.sefin-autocomplete--radius-sm .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-autocomplete--radius-md .sefin-autocomplete__input,.sefin-autocomplete--radius-md .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-md{border-radius:var(--sefin-radius-md)}.sefin-autocomplete--radius-lg .sefin-autocomplete__input,.sefin-autocomplete--radius-lg .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-autocomplete--radius-xl .sefin-autocomplete__input,.sefin-autocomplete--radius-xl .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-autocomplete--radius-2xl .sefin-autocomplete__input,.sefin-autocomplete--radius-2xl .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-autocomplete--radius-full .sefin-autocomplete__input,.sefin-autocomplete--radius-full .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-full{border-radius:var(--sefin-radius-full)}.sefin-autocomplete__input{width:100%;min-width:0;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}.sefin-autocomplete__input:hover:not(:disabled){background-color:var(--sefin-color-surface-hover-subtle);border-color:var(--sefin-color-secondary-light, var(--sefin-color-border))}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-placeholder);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)}.sefin-autocomplete__input::-moz-placeholder{color:var(--sefin-color-placeholder);opacity:1}.sefin-autocomplete__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__input--error{border-color:var(--sefin-color-error)}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover:not(:disabled){background-color:var(--sefin-color-surface-option-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-option-hover);color:var(--sefin-color-text)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary);color:var(--sefin-color-background);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}.sefin-autocomplete__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-autocomplete__hint{color:var(--sefin-color-text-secondary)}.sefin-autocomplete__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\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.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
4164
4164
|
}
|
|
4165
4165
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: AutocompleteComponent, decorators: [{
|
|
4166
4166
|
type: Component,
|
|
4167
|
-
args: [{ selector: 'sefin-autocomplete', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-autocomplete__wrapper\">\n <input\n #inputRef\n type=\"text\"\n [class]=\"inputClasses\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n autocomplete=\"off\"\n />\n <div class=\"sefin-autocomplete__actions\">\n <button\n *ngIf=\"searchText && !disabled\"\n type=\"button\"\n class=\"sefin-autocomplete__clear\"\n (click)=\"clearValue()\"\n aria-label=\"Clear\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n #dropdownRef\n class=\"sefin-autocomplete__dropdown\"\n >\n <ul class=\"sefin-autocomplete__list\">\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-autocomplete__option]=\"true\"\n [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n (mousedown)=\"onOptionMouseDown($event, option)\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"i === selectedIndex\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"\n isOpen &&\n filteredOptions &&\n filteredOptions.length === 0 &&\n searchText &&\n searchText.length >= minChars\n \"\n class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n >\n <div class=\"sefin-autocomplete__no-results\">\n No se encontraron resultados\n </div>\n </div>\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint\"\n [id]=\"internalId + '-helper'\"\n class=\"sefin-autocomplete__helper\"\n [class.sefin-autocomplete__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-autocomplete__error-message\">\n {{ errorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-autocomplete__hint\">\n {{ hint }}\n </span>\n </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%}.sefin-autocomplete--radius-none .sefin-autocomplete__input,.sefin-autocomplete--radius-none .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-none{border-radius:var(--sefin-radius-none)}.sefin-autocomplete--radius-sm .sefin-autocomplete__input,.sefin-autocomplete--radius-sm .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-autocomplete--radius-md .sefin-autocomplete__input,.sefin-autocomplete--radius-md .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-md{border-radius:var(--sefin-radius-md)}.sefin-autocomplete--radius-lg .sefin-autocomplete__input,.sefin-autocomplete--radius-lg .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-autocomplete--radius-xl .sefin-autocomplete__input,.sefin-autocomplete--radius-xl .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-autocomplete--radius-2xl .sefin-autocomplete__input,.sefin-autocomplete--radius-2xl .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-autocomplete--radius-full .sefin-autocomplete__input,.sefin-autocomplete--radius-full .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-full{border-radius:var(--sefin-radius-full)}.sefin-autocomplete__input{width:100%;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;box-sizing:border-box}.sefin-autocomplete__input:hover:not(:disabled){background-color:var(--sefin-color-surface-hover-subtle);border-color:var(--sefin-color-secondary-light, var(--sefin-color-border))}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-placeholder);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)}.sefin-autocomplete__input::-moz-placeholder{color:var(--sefin-color-placeholder);opacity:1}.sefin-autocomplete__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__input--error{border-color:var(--sefin-color-error)}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover:not(:disabled){background-color:var(--sefin-color-surface-option-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-option-hover);color:var(--sefin-color-text)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary);color:var(--sefin-color-background);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}.sefin-autocomplete__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-autocomplete__hint{color:var(--sefin-color-text-secondary)}.sefin-autocomplete__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"] }]
|
|
4167
|
+
args: [{ selector: 'sefin-autocomplete', standalone: true, imports: [CommonModule, FormsModule], changeDetection: ChangeDetectionStrategy.Default, template: "<div [class]=\"containerClasses\" #containerRef>\n <div class=\"sefin-autocomplete__wrapper\">\n <input\n #inputRef\n type=\"text\"\n [class]=\"inputClasses\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [ngModel]=\"searchText\"\n (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onInputFocus()\"\n (click)=\"onInputFocus()\"\n (blur)=\"onInputBlur()\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"(displayError || hint) ? internalId + '-helper' : null\"\n autocomplete=\"off\"\n />\n <div class=\"sefin-autocomplete__actions\">\n <button\n *ngIf=\"searchText && !disabled\"\n type=\"button\"\n class=\"sefin-autocomplete__clear\"\n (click)=\"clearValue()\"\n aria-label=\"Clear\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12 4L4 12M4 4L12 12\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <div class=\"sefin-autocomplete__arrow\" [class.sefin-autocomplete__arrow--open]=\"isOpen\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"2\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n </div>\n <div\n *ngIf=\"isOpen && filteredOptions && filteredOptions.length > 0\"\n #dropdownRef\n class=\"sefin-autocomplete__dropdown\"\n >\n <ul class=\"sefin-autocomplete__list\">\n <li\n *ngFor=\"let option of filteredOptions; let i = index\"\n [attr.data-index]=\"i\"\n [class.sefin-autocomplete__option]=\"true\"\n [class.sefin-autocomplete__option--selected]=\"i === selectedIndex\"\n [class.sefin-autocomplete__option--disabled]=\"option.disabled\"\n (mousedown)=\"onOptionMouseDown($event, option)\"\n (click)=\"selectOption(option)\"\n [attr.aria-selected]=\"i === selectedIndex\"\n role=\"option\"\n >\n {{ option.label }}\n </li>\n </ul>\n </div>\n <div\n *ngIf=\"\n isOpen &&\n filteredOptions &&\n filteredOptions.length === 0 &&\n searchText &&\n searchText.length >= minChars\n \"\n class=\"sefin-autocomplete__dropdown sefin-autocomplete__dropdown--empty\"\n >\n <div class=\"sefin-autocomplete__no-results\">\n No se encontraron resultados\n </div>\n </div>\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint\"\n [id]=\"internalId + '-helper'\"\n class=\"sefin-autocomplete__helper\"\n [class.sefin-autocomplete__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-autocomplete__error-message\">\n {{ errorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-autocomplete__hint\">\n {{ hint }}\n </span>\n </div>\n</div>\n", styles: [".sefin-autocomplete{position:relative;width:100%}.sefin-autocomplete__wrapper{position:relative;display:flex;align-items:center;width:100%;min-width:0}.sefin-autocomplete--radius-none .sefin-autocomplete__input,.sefin-autocomplete--radius-none .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-none{border-radius:var(--sefin-radius-none)}.sefin-autocomplete--radius-sm .sefin-autocomplete__input,.sefin-autocomplete--radius-sm .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-sm{border-radius:var(--sefin-radius-sm)}.sefin-autocomplete--radius-md .sefin-autocomplete__input,.sefin-autocomplete--radius-md .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-md{border-radius:var(--sefin-radius-md)}.sefin-autocomplete--radius-lg .sefin-autocomplete__input,.sefin-autocomplete--radius-lg .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-lg{border-radius:var(--sefin-radius-lg)}.sefin-autocomplete--radius-xl .sefin-autocomplete__input,.sefin-autocomplete--radius-xl .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-xl{border-radius:var(--sefin-radius-xl)}.sefin-autocomplete--radius-2xl .sefin-autocomplete__input,.sefin-autocomplete--radius-2xl .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-2xl{border-radius:var(--sefin-radius-2xl)}.sefin-autocomplete--radius-full .sefin-autocomplete__input,.sefin-autocomplete--radius-full .sefin-autocomplete__dropdown,.sefin-autocomplete__input--radius-full{border-radius:var(--sefin-radius-full)}.sefin-autocomplete__input{width:100%;min-width:0;font-family:var(--sefin-font-family-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);transition:all .2s ease-in-out;outline:none;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis}.sefin-autocomplete__input:hover:not(:disabled){background-color:var(--sefin-color-surface-hover-subtle);border-color:var(--sefin-color-secondary-light, var(--sefin-color-border))}.sefin-autocomplete__input::placeholder{color:var(--sefin-color-placeholder);font-family:var(--sefin-font-family-base)}.sefin-autocomplete__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)}.sefin-autocomplete__input::-moz-placeholder{color:var(--sefin-color-placeholder);opacity:1}.sefin-autocomplete__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)}.sefin-autocomplete__input:focus{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-autocomplete__input:disabled{background-color:var(--sefin-color-surface-hover);color:var(--sefin-color-text-disabled);cursor:not-allowed;opacity:.6}.sefin-autocomplete__input--sm{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);padding-right:calc(var(--sefin-spacing-md) * 2.5);font-size:var(--sefin-font-size-sm);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-sm)}.sefin-autocomplete__input--md{padding:var(--sefin-spacing-sm, 8px) var(--sefin-spacing-lg);padding-right:calc(var(--sefin-spacing-lg) * 2);font-size:var(--sefin-font-size-base);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-md)}.sefin-autocomplete__input--lg{padding:var(--sefin-spacing-lg) var(--sefin-spacing-xl);padding-right:calc(var(--sefin-spacing-xl) * 1.75);font-size:var(--sefin-font-size-lg);line-height:var(--sefin-line-height-normal);min-height:var(--sefin-component-height-lg)}.sefin-autocomplete__input--disabled{cursor:not-allowed}.sefin-autocomplete__input--error{border-color:var(--sefin-color-error)}.sefin-autocomplete__actions{position:absolute;right:var(--sefin-spacing-sm);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}.sefin-autocomplete__clear{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;background:transparent;border:none;border-radius:var(--sefin-radius-sm);color:var(--sefin-color-text-secondary);cursor:pointer;transition:all .2s ease-in-out}.sefin-autocomplete__clear:hover:not(:disabled){background-color:var(--sefin-color-surface-option-hover);color:var(--sefin-color-text)}.sefin-autocomplete__clear:focus-visible{outline:2px solid var(--sefin-color-border-focus);outline-offset:2px}.sefin-autocomplete__clear svg{width:16px;height:16px}.sefin-autocomplete__arrow{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:var(--sefin-color-text-secondary);pointer-events:none;transition:transform .2s ease-in-out}.sefin-autocomplete__arrow svg{width:16px;height:16px}.sefin-autocomplete__arrow--open{transform:rotate(180deg)}.sefin-autocomplete__dropdown{position:absolute;top:calc(100% + var(--sefin-spacing-xs));left:0;right:0;width:100%;z-index:9999;background-color:var(--sefin-color-surface);border:1px solid var(--sefin-color-border);border-radius:var(--sefin-radius-md);box-shadow:var(--sefin-shadow-lg);max-height:300px;overflow-y:auto;overflow-x:hidden;box-sizing:border-box}.sefin-autocomplete__dropdown--empty{padding:var(--sefin-spacing-md)}.sefin-autocomplete__list{list-style:none;margin:0;padding:var(--sefin-spacing-xs)}.sefin-autocomplete__option{padding:var(--sefin-spacing-sm) var(--sefin-spacing-md);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-base);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text);cursor:pointer;border-radius:var(--sefin-radius-sm);transition:all .15s ease-in-out;-webkit-user-select:none;user-select:none;overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;white-space:normal}.sefin-autocomplete__option:hover:not(.sefin-autocomplete__option--disabled){background-color:var(--sefin-color-surface-option-hover);color:var(--sefin-color-text)}.sefin-autocomplete__option--selected{background-color:var(--sefin-color-primary);color:var(--sefin-color-background);font-weight:var(--sefin-font-weight-medium)}.sefin-autocomplete__option--disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.sefin-autocomplete__no-results{padding:var(--sefin-spacing-md);text-align:center;font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-sm);font-weight:var(--sefin-font-weight-normal);line-height:var(--sefin-line-height-normal);color:var(--sefin-color-text-secondary)}.sefin-autocomplete--open .sefin-autocomplete__input{border-color:var(--sefin-color-border-focus)}.sefin-autocomplete__helper{display:flex;align-items:center;margin-top:var(--sefin-spacing-xs);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base);font-size:var(--sefin-font-size-xs);line-height:var(--sefin-line-height-normal)}.sefin-autocomplete__hint{color:var(--sefin-color-text-secondary)}.sefin-autocomplete__error-message{color:var(--sefin-color-error);display:flex;align-items:center;gap:var(--sefin-spacing-xs)}\n"] }]
|
|
4168
4168
|
}], propDecorators: { inputRef: [{
|
|
4169
4169
|
type: ViewChild,
|
|
4170
4170
|
args: ['inputRef', { static: false }]
|
|
@@ -5882,7 +5882,7 @@ class FormFieldComponent {
|
|
|
5882
5882
|
useExisting: forwardRef(() => FormFieldComponent),
|
|
5883
5883
|
multi: true,
|
|
5884
5884
|
},
|
|
5885
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"formFieldClasses\">\n <!-- Label -->\n <label\n *ngIf=\"label\"\n [id]=\"labelId\"\n [for]=\"inputId\"\n class=\"sefin-form-field__label\"\n [class.sefin-form-field__label--required]=\"required\"\n >\n {{ label }}\n </label>\n\n <!-- Input Container -->\n <div class=\"sefin-form-field__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-form-field__leading-icon\">\n <sefin-icon\n [name]=\"leadingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-form-field__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"inputId\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"label || placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? hintId : null\n \"\n [attr.aria-labelledby]=\"label ? labelId : null\"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-form-field__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-form-field__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon\n [name]=\"trailingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-form-field__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"hintId\"\n class=\"sefin-form-field__helper\"\n [class.sefin-form-field__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-form-field__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-form-field__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-form-field__counter\"\n [class.sefin-form-field__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-form-field{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-form-field__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-form-field__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible;z-index:1}.sefin-form-field__label{display:block;align-self:flex-start;text-align:left;width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 14px);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);margin-bottom:var(--sefin-spacing-xs, 4px);cursor:pointer}.sefin-form-field__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336);margin-left:2px}.sefin-form-field__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;position:relative;z-index:1}.sefin-form-field__input::placeholder{color:var(--sefin-color-placeholder)!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input:disabled,.sefin-form-field__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-form-field__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-ms-reveal,.sefin-form-field__input[type=password]::-ms-clear,.sefin-form-field__input[data-password-field=true]::-ms-reveal,.sefin-form-field__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-moz-focus-inner,.sefin-form-field__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-form-field__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-form-field__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-form-field__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon{color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-form-field__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-form-field__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-form-field__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-form-field__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-form-field--radius-none .sefin-form-field__input-container{border-radius:var(--sefin-radius-none)}.sefin-form-field--radius-sm .sefin-form-field__input-container{border-radius:var(--sefin-radius-sm)}.sefin-form-field--radius-md .sefin-form-field__input-container{border-radius:var(--sefin-radius-md)}.sefin-form-field--radius-lg .sefin-form-field__input-container{border-radius:var(--sefin-radius-lg)}.sefin-form-field--radius-xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-xl)}.sefin-form-field--radius-2xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-2xl)}.sefin-form-field--radius-full .sefin-form-field__input-container{border-radius:var(--sefin-radius-full)}.sefin-form-field--filled.sefin-form-field--radius-none .sefin-form-field__input-container{border-radius:var(--sefin-radius-none) var(--sefin-radius-none) 0 0}.sefin-form-field--filled.sefin-form-field--radius-sm .sefin-form-field__input-container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-form-field--filled.sefin-form-field--radius-md .sefin-form-field__input-container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-form-field--filled.sefin-form-field--radius-lg .sefin-form-field__input-container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-form-field--filled.sefin-form-field--radius-xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-form-field--filled.sefin-form-field--radius-2xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-form-field--filled.sefin-form-field--radius-full .sefin-form-field__input-container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--outlined .sefin-form-field__border{display:none}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--focused.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--filled .sefin-form-field__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--filled .sefin-form-field__border{display:none}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--filled.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--standard .sefin-form-field__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-form-field--standard .sefin-form-field__input-wrapper{padding-left:0;padding-right:0}.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper,.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-form-field--standard .sefin-form-field__border{height:1px;transition:background-color .2s ease-in-out}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--disabled .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--sm .sefin-form-field__input-container{min-height:var(--sefin-input-height-sm)}.sefin-form-field--sm .sefin-form-field__input,.sefin-form-field--sm .sefin-form-field__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-form-field--md .sefin-form-field__input-container{min-height:var(--sefin-input-height-md)}.sefin-form-field--lg .sefin-form-field__input-container{min-height:var(--sefin-input-height-lg)}.sefin-form-field--lg .sefin-form-field__input,.sefin-form-field--lg .sefin-form-field__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--disabled{cursor:not-allowed;opacity:.6}.sefin-form-field--disabled .sefin-form-field__label{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field--readonly .sefin-form-field__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
5885
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true }], ngImport: i0, template: "<div [class]=\"formFieldClasses\">\n <!-- Label -->\n <label\n *ngIf=\"label\"\n [id]=\"labelId\"\n [for]=\"inputId\"\n class=\"sefin-form-field__label\"\n [class.sefin-form-field__label--required]=\"required\"\n >\n {{ label }}\n </label>\n\n <!-- Input Container -->\n <div class=\"sefin-form-field__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-form-field__leading-icon\">\n <sefin-icon\n [name]=\"leadingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-form-field__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"inputId\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"label || placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? hintId : null\n \"\n [attr.aria-labelledby]=\"label ? labelId : null\"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-form-field__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-form-field__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon\n [name]=\"trailingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-form-field__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"hintId\"\n class=\"sefin-form-field__helper\"\n [class.sefin-form-field__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-form-field__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-form-field__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-form-field__counter\"\n [class.sefin-form-field__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-form-field{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-form-field__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-form-field__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;min-width:0;overflow:hidden;z-index:1}.sefin-form-field__label{display:block;align-self:flex-start;text-align:left;width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 14px);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);margin-bottom:var(--sefin-spacing-xs, 4px);cursor:pointer}.sefin-form-field__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336);margin-left:2px}.sefin-form-field__input{width:100%;min-width:0;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis}.sefin-form-field__input::placeholder{color:var(--sefin-color-placeholder)!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input:disabled,.sefin-form-field__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #7d7d7d)}.sefin-form-field__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-form-field__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-ms-reveal,.sefin-form-field__input[type=password]::-ms-clear,.sefin-form-field__input[data-password-field=true]::-ms-reveal,.sefin-form-field__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-moz-focus-inner,.sefin-form-field__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-form-field__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-form-field__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-form-field__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon{color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-form-field__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-form-field__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-form-field__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-form-field__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-form-field--radius-none .sefin-form-field__input-container{border-radius:var(--sefin-radius-none)}.sefin-form-field--radius-sm .sefin-form-field__input-container{border-radius:var(--sefin-radius-sm)}.sefin-form-field--radius-md .sefin-form-field__input-container{border-radius:var(--sefin-radius-md)}.sefin-form-field--radius-lg .sefin-form-field__input-container{border-radius:var(--sefin-radius-lg)}.sefin-form-field--radius-xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-xl)}.sefin-form-field--radius-2xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-2xl)}.sefin-form-field--radius-full .sefin-form-field__input-container{border-radius:var(--sefin-radius-full)}.sefin-form-field--filled.sefin-form-field--radius-none .sefin-form-field__input-container{border-radius:var(--sefin-radius-none) var(--sefin-radius-none) 0 0}.sefin-form-field--filled.sefin-form-field--radius-sm .sefin-form-field__input-container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-form-field--filled.sefin-form-field--radius-md .sefin-form-field__input-container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-form-field--filled.sefin-form-field--radius-lg .sefin-form-field__input-container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-form-field--filled.sefin-form-field--radius-xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-form-field--filled.sefin-form-field--radius-2xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-form-field--filled.sefin-form-field--radius-full .sefin-form-field__input-container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--outlined .sefin-form-field__border{display:none}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--focused.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0)}.sefin-form-field--filled .sefin-form-field__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--filled .sefin-form-field__border{display:none}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--filled.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0)}.sefin-form-field--standard .sefin-form-field__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-form-field--standard .sefin-form-field__input-wrapper{padding-left:0;padding-right:0}.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper,.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-form-field--standard .sefin-form-field__border{height:1px;transition:background-color .2s ease-in-out}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--disabled .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0)}.sefin-form-field--sm .sefin-form-field__input-container{min-height:var(--sefin-input-height-sm)}.sefin-form-field--sm .sefin-form-field__input,.sefin-form-field--sm .sefin-form-field__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-form-field--md .sefin-form-field__input-container{min-height:var(--sefin-input-height-md)}.sefin-form-field--lg .sefin-form-field__input-container{min-height:var(--sefin-input-height-lg)}.sefin-form-field--lg .sefin-form-field__input,.sefin-form-field--lg .sefin-form-field__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--disabled{cursor:not-allowed}.sefin-form-field--disabled .sefin-form-field__label{cursor:not-allowed;color:var(--sefin-color-text-disabled-strong, #5c5c5c)}.sefin-form-field--disabled .sefin-form-field__input{color:var(--sefin-color-text-disabled-strong, #5c5c5c)}.sefin-form-field--disabled .sefin-form-field__input::placeholder{color:var(--sefin-color-placeholder-disabled, #6b6b6b)!important}.sefin-form-field--disabled .sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder-disabled, #6b6b6b)!important}.sefin-form-field--disabled .sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-placeholder-disabled, #6b6b6b)!important}.sefin-form-field--disabled .sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-placeholder-disabled, #6b6b6b)!important}.sefin-form-field--disabled .sefin-form-field__leading-icon,.sefin-form-field--disabled .sefin-form-field__trailing-icon{color:var(--sefin-color-text-disabled-strong, #5c5c5c)}.sefin-form-field--readonly .sefin-form-field__input{cursor:default}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: IconComponent, selector: "sefin-icon", inputs: ["name", "size", "color", "rotate", "flipH", "flipV", "class"] }], changeDetection: i0.ChangeDetectionStrategy.Default });
|
|
5886
5886
|
}
|
|
5887
5887
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
5888
5888
|
type: Component,
|
|
@@ -5897,7 +5897,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
5897
5897
|
useExisting: forwardRef(() => FormFieldComponent),
|
|
5898
5898
|
multi: true,
|
|
5899
5899
|
},
|
|
5900
|
-
], template: "<div [class]=\"formFieldClasses\">\n <!-- Label -->\n <label\n *ngIf=\"label\"\n [id]=\"labelId\"\n [for]=\"inputId\"\n class=\"sefin-form-field__label\"\n [class.sefin-form-field__label--required]=\"required\"\n >\n {{ label }}\n </label>\n\n <!-- Input Container -->\n <div class=\"sefin-form-field__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-form-field__leading-icon\">\n <sefin-icon\n [name]=\"leadingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-form-field__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"inputId\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"label || placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? hintId : null\n \"\n [attr.aria-labelledby]=\"label ? labelId : null\"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-form-field__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-form-field__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon\n [name]=\"trailingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-form-field__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"hintId\"\n class=\"sefin-form-field__helper\"\n [class.sefin-form-field__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-form-field__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-form-field__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-form-field__counter\"\n [class.sefin-form-field__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-form-field{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-form-field__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-form-field__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;overflow:visible;z-index:1}.sefin-form-field__label{display:block;align-self:flex-start;text-align:left;width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 14px);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);margin-bottom:var(--sefin-spacing-xs, 4px);cursor:pointer}.sefin-form-field__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336);margin-left:2px}.sefin-form-field__input{width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;position:relative;z-index:1}.sefin-form-field__input::placeholder{color:var(--sefin-color-placeholder)!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input:disabled,.sefin-form-field__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-form-field__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-ms-reveal,.sefin-form-field__input[type=password]::-ms-clear,.sefin-form-field__input[data-password-field=true]::-ms-reveal,.sefin-form-field__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-moz-focus-inner,.sefin-form-field__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-form-field__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-form-field__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-form-field__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon{color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-form-field__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-form-field__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-form-field__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-form-field__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-form-field--radius-none .sefin-form-field__input-container{border-radius:var(--sefin-radius-none)}.sefin-form-field--radius-sm .sefin-form-field__input-container{border-radius:var(--sefin-radius-sm)}.sefin-form-field--radius-md .sefin-form-field__input-container{border-radius:var(--sefin-radius-md)}.sefin-form-field--radius-lg .sefin-form-field__input-container{border-radius:var(--sefin-radius-lg)}.sefin-form-field--radius-xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-xl)}.sefin-form-field--radius-2xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-2xl)}.sefin-form-field--radius-full .sefin-form-field__input-container{border-radius:var(--sefin-radius-full)}.sefin-form-field--filled.sefin-form-field--radius-none .sefin-form-field__input-container{border-radius:var(--sefin-radius-none) var(--sefin-radius-none) 0 0}.sefin-form-field--filled.sefin-form-field--radius-sm .sefin-form-field__input-container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-form-field--filled.sefin-form-field--radius-md .sefin-form-field__input-container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-form-field--filled.sefin-form-field--radius-lg .sefin-form-field__input-container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-form-field--filled.sefin-form-field--radius-xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-form-field--filled.sefin-form-field--radius-2xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-form-field--filled.sefin-form-field--radius-full .sefin-form-field__input-container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--outlined .sefin-form-field__border{display:none}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--focused.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--filled .sefin-form-field__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--filled .sefin-form-field__border{display:none}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--filled.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--standard .sefin-form-field__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-form-field--standard .sefin-form-field__input-wrapper{padding-left:0;padding-right:0}.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper,.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-form-field--standard .sefin-form-field__border{height:1px;transition:background-color .2s ease-in-out}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--disabled .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0);opacity:.6}.sefin-form-field--sm .sefin-form-field__input-container{min-height:var(--sefin-input-height-sm)}.sefin-form-field--sm .sefin-form-field__input,.sefin-form-field--sm .sefin-form-field__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-form-field--md .sefin-form-field__input-container{min-height:var(--sefin-input-height-md)}.sefin-form-field--lg .sefin-form-field__input-container{min-height:var(--sefin-input-height-lg)}.sefin-form-field--lg .sefin-form-field__input,.sefin-form-field--lg .sefin-form-field__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--disabled{cursor:not-allowed;opacity:.6}.sefin-form-field--disabled .sefin-form-field__label{cursor:not-allowed;color:var(--sefin-color-text-disabled, #999)}.sefin-form-field--readonly .sefin-form-field__input{cursor:default}\n"] }]
|
|
5900
|
+
], template: "<div [class]=\"formFieldClasses\">\n <!-- Label -->\n <label\n *ngIf=\"label\"\n [id]=\"labelId\"\n [for]=\"inputId\"\n class=\"sefin-form-field__label\"\n [class.sefin-form-field__label--required]=\"required\"\n >\n {{ label }}\n </label>\n\n <!-- Input Container -->\n <div class=\"sefin-form-field__input-container\">\n <!-- Leading Icon -->\n <div *ngIf=\"leadingIcon\" class=\"sefin-form-field__leading-icon\">\n <sefin-icon\n [name]=\"leadingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Input Wrapper -->\n <div class=\"sefin-form-field__input-wrapper\">\n <!-- Input -->\n <input\n #inputRef\n [id]=\"inputId\"\n [name]=\"name\"\n [type]=\"type\"\n [value]=\"value\"\n [placeholder]=\"placeholder\"\n [disabled]=\"disabled\"\n [readonly]=\"readonly\"\n [required]=\"required\"\n [attr.maxlength]=\"maxLength\"\n [attr.minlength]=\"minLength\"\n [pattern]=\"pattern\"\n [autocomplete]=\"autocomplete\"\n [attr.aria-label]=\"label || placeholder\"\n [attr.aria-required]=\"required\"\n [attr.aria-invalid]=\"hasErrorState\"\n [attr.aria-describedby]=\"\n displayError || hint || showCounter ? hintId : null\n \"\n [attr.aria-labelledby]=\"label ? labelId : null\"\n [attr.data-form-type]=\"type === 'password' ? 'password' : null\"\n class=\"sefin-form-field__input\"\n (input)=\"onInput($event)\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n />\n </div>\n\n <!-- Trailing Icon -->\n <div\n *ngIf=\"trailingIcon\"\n class=\"sefin-form-field__trailing-icon\"\n (click)=\"onTrailingIconClick($event)\"\n [attr.aria-label]=\"'Trailing icon'\"\n role=\"button\"\n tabindex=\"0\"\n >\n <sefin-icon\n [name]=\"trailingIcon\"\n [size]=\"size === 'sm' ? 'sm' : 'md'\"\n ></sefin-icon>\n </div>\n\n <!-- Outline/Filled border -->\n <div class=\"sefin-form-field__border\"></div>\n </div>\n\n <!-- Helper Text / Error Message -->\n <div\n *ngIf=\"displayError || hint || showCounter\"\n [id]=\"hintId\"\n class=\"sefin-form-field__helper\"\n [class.sefin-form-field__helper--error]=\"displayError\"\n >\n <span *ngIf=\"displayError\" class=\"sefin-form-field__error-message\">\n {{ displayErrorMessage }}\n </span>\n <span *ngIf=\"!displayError && hint\" class=\"sefin-form-field__hint\">\n {{ hint }}\n </span>\n <span\n *ngIf=\"showCounter && !displayError\"\n class=\"sefin-form-field__counter\"\n [class.sefin-form-field__counter--warning]=\"\n maxLength && characterCount > maxLength * 0.8\n \"\n >\n {{ characterCount }}{{ maxLength ? \" / \" + maxLength : \"\" }}\n </span>\n </div>\n</div>\n", styles: [".sefin-form-field{position:relative;display:flex;flex-direction:column;align-items:flex-start;width:100%;min-width:0;font-family:var(--sefin-font-family-base, sans-serif)}.sefin-form-field__input-container{position:relative;display:flex;align-items:center;width:100%;min-height:var(--sefin-input-height-md);overflow:visible;z-index:0}.sefin-form-field__input-wrapper{position:relative;flex:1;display:flex;align-items:center;height:100%;min-height:0;min-width:0;overflow:hidden;z-index:1}.sefin-form-field__label{display:block;align-self:flex-start;text-align:left;width:100%;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-sm, 14px);font-weight:var(--sefin-font-weight-medium, 500);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);margin-bottom:var(--sefin-spacing-xs, 4px);cursor:pointer}.sefin-form-field__label--required:after{content:\" *\";color:var(--sefin-color-error, #f44336);margin-left:2px}.sefin-form-field__input{width:100%;min-width:0;font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-base, 16px);font-weight:var(--sefin-font-weight-normal, 400);line-height:var(--sefin-line-height-normal, 1.5);color:var(--sefin-color-text, #1a1a1a);background-color:transparent;border:none;outline:none;padding:0;margin:0;box-sizing:border-box;line-height:1.5;position:relative;z-index:1;overflow:hidden;text-overflow:ellipsis}.sefin-form-field__input::placeholder{color:var(--sefin-color-placeholder)!important;opacity:1;transition:opacity .2s ease-in-out}.sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-placeholder)!important;opacity:1}.sefin-form-field__input:disabled,.sefin-form-field__input:read-only{cursor:not-allowed;color:var(--sefin-color-text-disabled, #7d7d7d)}.sefin-form-field__input[type=password]::-webkit-credentials-auto-fill-button,.sefin-form-field__input[data-password-field=true]::-webkit-credentials-auto-fill-button{display:none!important;visibility:hidden!important;pointer-events:none!important;position:absolute!important;right:0!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-ms-reveal,.sefin-form-field__input[type=password]::-ms-clear,.sefin-form-field__input[data-password-field=true]::-ms-reveal,.sefin-form-field__input[data-password-field=true]::-ms-clear{display:none!important;visibility:hidden!important;width:0!important;height:0!important;opacity:0!important;margin:0!important;padding:0!important}.sefin-form-field__input[type=password]::-moz-focus-inner,.sefin-form-field__input[data-password-field=true]::-moz-focus-inner{border:0;padding:0}.sefin-form-field__border{position:absolute;bottom:0;left:0;right:0;height:1px;background-color:var(--sefin-color-border, #e0e0e0);transition:background-color .2s ease-in-out,height .2s ease-in-out;pointer-events:none;z-index:0}.sefin-form-field__leading-icon{display:flex;align-items:center;justify-content:center;padding-left:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);flex-shrink:0;z-index:1;height:100%}.sefin-form-field__trailing-icon{display:flex;align-items:center;justify-content:center;padding-right:var(--sefin-spacing-md, 16px);color:var(--sefin-color-text-secondary, #666);cursor:pointer;flex-shrink:0;transition:color .2s ease-in-out;border-radius:var(--sefin-radius-md, 8px);margin:var(--sefin-spacing-xs, 4px);z-index:1;height:100%;background-color:transparent}.sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-text, #1a1a1a);background-color:transparent}.sefin-form-field__trailing-icon:focus-visible{outline:2px solid var(--sefin-color-primary, #1976d2);outline-offset:2px;background-color:transparent}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon{color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:hover:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:active:not(:disabled){color:var(--sefin-color-error)}.sefin-form-field.sefin-form-field--error .sefin-form-field__trailing-icon:focus-visible{outline-color:var(--sefin-color-error)}.sefin-form-field__helper{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sefin-spacing-xs, 4px);min-height:var(--sefin-helper-height);font-family:var(--sefin-font-family-base, sans-serif);font-size:var(--sefin-font-size-xs, 12px);line-height:var(--sefin-line-height-normal, 1.5)}.sefin-form-field__hint{color:var(--sefin-color-text-secondary, #666)}.sefin-form-field__error-message{color:var(--sefin-color-error, #f44336);display:flex;align-items:center;gap:var(--sefin-spacing-xs, 4px)}.sefin-form-field__counter{color:var(--sefin-color-text-secondary, #666);margin-left:auto}.sefin-form-field__counter--warning{color:var(--sefin-color-warning, #ff9800)}.sefin-form-field--radius-none .sefin-form-field__input-container{border-radius:var(--sefin-radius-none)}.sefin-form-field--radius-sm .sefin-form-field__input-container{border-radius:var(--sefin-radius-sm)}.sefin-form-field--radius-md .sefin-form-field__input-container{border-radius:var(--sefin-radius-md)}.sefin-form-field--radius-lg .sefin-form-field__input-container{border-radius:var(--sefin-radius-lg)}.sefin-form-field--radius-xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-xl)}.sefin-form-field--radius-2xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-2xl)}.sefin-form-field--radius-full .sefin-form-field__input-container{border-radius:var(--sefin-radius-full)}.sefin-form-field--filled.sefin-form-field--radius-none .sefin-form-field__input-container{border-radius:var(--sefin-radius-none) var(--sefin-radius-none) 0 0}.sefin-form-field--filled.sefin-form-field--radius-sm .sefin-form-field__input-container{border-radius:var(--sefin-radius-sm) var(--sefin-radius-sm) 0 0}.sefin-form-field--filled.sefin-form-field--radius-md .sefin-form-field__input-container{border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0}.sefin-form-field--filled.sefin-form-field--radius-lg .sefin-form-field__input-container{border-radius:var(--sefin-radius-lg) var(--sefin-radius-lg) 0 0}.sefin-form-field--filled.sefin-form-field--radius-xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-xl) var(--sefin-radius-xl) 0 0}.sefin-form-field--filled.sefin-form-field--radius-2xl .sefin-form-field__input-container{border-radius:var(--sefin-radius-2xl) var(--sefin-radius-2xl) 0 0}.sefin-form-field--filled.sefin-form-field--radius-full .sefin-form-field__input-container{border-radius:var(--sefin-radius-full) var(--sefin-radius-full) 0 0}.sefin-form-field--outlined .sefin-form-field__input-container{border:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md);background-color:var(--sefin-color-surface, #ffffff);transition:border-color .2s ease-in-out,box-shadow .2s ease-in-out}.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--outlined.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--outlined .sefin-form-field__border{display:none}.sefin-form-field--outlined.sefin-form-field--focused .sefin-form-field__input-container{border-color:var(--sefin-color-primary, #1976d2);border-width:.5px;box-shadow:0 0 0 .5px var(--sefin-color-primary, #1976d2)}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);border-width:.5px}.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--outlined.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--focused.sefin-form-field--error .sefin-form-field__input-container{border-color:var(--sefin-color-error);box-shadow:0 0 0 .5px var(--sefin-color-error)}.sefin-form-field--outlined.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-color:var(--sefin-color-border, #e0e0e0)}.sefin-form-field--filled .sefin-form-field__input-container{border:none;border-bottom:.5px solid var(--sefin-color-border, #e0e0e0);border-radius:var(--sefin-radius-md) var(--sefin-radius-md) 0 0;background-color:var(--sefin-color-surface-hover, #f5f5f5);transition:background-color .2s ease-in-out,border-color .2s ease-in-out}.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px)}.sefin-form-field--filled.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:0}.sefin-form-field--filled .sefin-form-field__border{display:none}.sefin-form-field--filled.sefin-form-field--focused .sefin-form-field__input-container{background-color:var(--sefin-color-surface, #ffffff);border-bottom-color:var(--sefin-color-primary, #1976d2);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-error, #f44336);border-bottom-width:.5px}.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--filled.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--filled.sefin-form-field--disabled .sefin-form-field__input-container{background-color:var(--sefin-color-surface-hover, #f5f5f5);border-bottom-color:var(--sefin-color-border, #e0e0e0)}.sefin-form-field--standard .sefin-form-field__input-container{border:none;background-color:transparent;transition:border-color .2s ease-in-out}.sefin-form-field--standard .sefin-form-field__input-wrapper{padding-left:0;padding-right:0}.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0;margin:0}.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input-wrapper,.sefin-form-field--standard.sefin-form-field--with-leading-icon .sefin-form-field__input{padding-left:var(--sefin-spacing-md, 16px)}.sefin-form-field--standard .sefin-form-field__border{height:1px;transition:background-color .2s ease-in-out}.sefin-form-field--standard.sefin-form-field--focused .sefin-form-field__border{height:1px;background-color:var(--sefin-color-primary, #1976d2)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__border{height:1px;background-color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__label,.sefin-form-field--standard.sefin-form-field--error .sefin-form-field__leading-icon{color:var(--sefin-color-error, #f44336)}.sefin-form-field--standard.sefin-form-field--disabled .sefin-form-field__input-container{border-bottom-color:var(--sefin-color-border, #e0e0e0)}.sefin-form-field--sm .sefin-form-field__input-container{min-height:var(--sefin-input-height-sm)}.sefin-form-field--sm .sefin-form-field__input,.sefin-form-field--sm .sefin-form-field__label{font-size:var(--sefin-font-size-sm, 14px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-sm, 8px);padding-right:var(--sefin-spacing-sm, 8px)}.sefin-form-field--sm.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--sm.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-sm, 8px) 0 var(--sefin-spacing-xs, 4px) 0}.sefin-form-field--md .sefin-form-field__input-container{min-height:var(--sefin-input-height-md)}.sefin-form-field--lg .sefin-form-field__input-container{min-height:var(--sefin-input-height-lg)}.sefin-form-field--lg .sefin-form-field__input,.sefin-form-field--lg .sefin-form-field__label{font-size:var(--sefin-font-size-lg, 18px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--outlined .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input-wrapper{padding-left:var(--sefin-spacing-md, 16px);padding-right:var(--sefin-spacing-md, 16px)}.sefin-form-field--lg.sefin-form-field--filled .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0}.sefin-form-field--lg.sefin-form-field--standard .sefin-form-field__input{padding:var(--sefin-spacing-md, 16px) 0 var(--sefin-spacing-sm, 8px) 0}.sefin-form-field--disabled{cursor:not-allowed}.sefin-form-field--disabled .sefin-form-field__label{cursor:not-allowed;color:var(--sefin-color-text-disabled-strong, #5c5c5c)}.sefin-form-field--disabled .sefin-form-field__input{color:var(--sefin-color-text-disabled-strong, #5c5c5c)}.sefin-form-field--disabled .sefin-form-field__input::placeholder{color:var(--sefin-color-placeholder-disabled, #6b6b6b)!important}.sefin-form-field--disabled .sefin-form-field__input::-webkit-input-placeholder{color:var(--sefin-color-placeholder-disabled, #6b6b6b)!important}.sefin-form-field--disabled .sefin-form-field__input::-moz-placeholder{color:var(--sefin-color-placeholder-disabled, #6b6b6b)!important}.sefin-form-field--disabled .sefin-form-field__input:-ms-input-placeholder{color:var(--sefin-color-placeholder-disabled, #6b6b6b)!important}.sefin-form-field--disabled .sefin-form-field__leading-icon,.sefin-form-field--disabled .sefin-form-field__trailing-icon{color:var(--sefin-color-text-disabled-strong, #5c5c5c)}.sefin-form-field--readonly .sefin-form-field__input{cursor:default}\n"] }]
|
|
5901
5901
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { inputRef: [{
|
|
5902
5902
|
type: ViewChild,
|
|
5903
5903
|
args: ['inputRef', { static: false }]
|