ngx-sfc-inputs
Version:
Angular inputs library for SFC project
778 lines (756 loc) • 840 kB
JavaScript
import * as i1$1 from '@angular/common';
import { formatDate, WeekDay, getLocaleDayNames, FormStyle, TranslationWidth, CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Directive, Optional, HostBinding, HostListener, EventEmitter, ElementRef, Input, Output, ViewChild, Component, Injectable, ViewEncapsulation, ViewChildren, ContentChildren, forwardRef, NgModule } from '@angular/core';
import * as i1 from '@angular/forms';
import { NG_VALIDATORS, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms';
import * as i2 from '@fortawesome/angular-fontawesome';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { faEye, faEyeSlash, faUpload, faTimes, faCheck, faAngleRight, faAngleLeft, faStar, faChevronUp, faChevronDown, faChevronLeft, faChevronRight, faCrop, faArrowsAlt, faSearchPlus, faSearchMinus, faArrowsV, faArrowsH, faRotateLeft, faRotateRight, faRefresh, faPlus, faArrowsSpin } from '@fortawesome/free-solid-svg-icons';
import * as i3 from 'ngx-sfc-common';
import { isNullOrEmptyString, isDefined, CommonConstants, UIClass, any, removePropertyFromObject, addPropertyToObject, Compare, getFileExtension, getCssLikeValue, ButtonType, parseFileSize, CheckmarkType, hasItem, trim, removeItemBy, Sequence, UIConstants, Direction, sort, isEqual, lastItem, firstItem, DateTimeConstants, setDefaultSecondsAndMiliseconds, getPreviousYear, getNextYear, getPreviousMonth, getNextMonth, setYear, setMinutes, setHours, hasItemBy, isEqualDates, getNextDate, isDateGreatOrEqual, isDateGreat, getFirstDayOfMonthByYearAndMonth, getLastDayOfMonthByYearAndMonth, getWeeksNumberInMonth, ComponentSize, getRotateValue, Position, getFirstDayOfMonth, getLastDayOfMonth, getFirstDayOfYear, getLastDayOfYear, isDateTimeGreatOrEqual, isDateTimeGreat, ModalTemplate, ModalService, readAsDataURL, isImage, LoadContainerLoadType, where, PaginationConstants, hasObjectItem, nameof, firstOrDefault, remove, sortBy, SortingDirection, all, addItem, removeItem, stopAndPreventPropagation, TemplateReferenceDirective, NgxSfcCommonModule } from 'ngx-sfc-common';
import { Subject, startWith, map, combineLatest, BehaviorSubject, fromEvent, debounceTime, tap, distinctUntilChanged, filter } from 'rxjs';
import { trigger, transition, style, animate } from '@angular/animations';
import { faStar as faStar$1, faUserCircle } from '@fortawesome/free-regular-svg-icons';
import Cropper from 'cropperjs';
import * as i4 from 'ngx-sfc-components';
import { getProgressColorDefaultFunc, AvatarBadgePosition, NgxSfcComponentsModule } from 'ngx-sfc-components';
class InputConstants {
}
InputConstants.ID_PREFIX = 'sfc-';
InputConstants.INPUT_CLASS = 'sfc-input';
InputConstants.DEFAULT_ERROR_MESSAGE = 'Invalid value';
InputConstants.ENTER_KEY = "Enter";
InputConstants.BACKSPACE_KEY = "Backspace";
InputConstants.DELETE_KEY = "Delete";
class InputReferenceDirective {
constructor(ngControl) {
this.ngControl = ngControl;
this.isFocused = false;
this.class = InputConstants.INPUT_CLASS;
}
get value() {
return this.ngControl ? this.ngControl.value : null;
}
get hasValue() {
return this.ngControl && !isNullOrEmptyString(this.value);
}
get isInvalid() {
if (this.isDirty) {
return this.ngControl.invalid || false;
}
return this.hasValue && (this.ngControl.invalid || false);
}
get isValid() {
return this.ngControl.valid || false;
}
get isDirty() {
return this.ngControl?.dirty || false;
}
get errors() {
if (this.isInvalid && isDefined(this.ngControl.errors)) {
return this.ngControl.errors;
}
return null;
}
onFocus() {
this.isFocused = true;
}
onBlur() {
this.isFocused = false;
}
}
InputReferenceDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: InputReferenceDirective, deps: [{ token: i1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
InputReferenceDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: InputReferenceDirective, selector: "[sfcInput]", host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class": "this.class" } }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: InputReferenceDirective, decorators: [{
type: Directive,
args: [{
selector: '[sfcInput]'
}]
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
type: Optional
}] }]; }, propDecorators: { class: [{
type: HostBinding,
args: ['class']
}], onFocus: [{
type: HostListener,
args: ['focus']
}], onBlur: [{
type: HostListener,
args: ['blur']
}] } });
var InputUIClass;
(function (InputUIClass) {
InputUIClass["HasValue"] = "has-value";
InputUIClass["HasIcon"] = "has-icon";
})(InputUIClass || (InputUIClass = {}));
;
class BaseInputComponent {
constructor(ngControl, componentSize, changeDetector, renderer, elementRef) {
this.ngControl = ngControl;
this.componentSize = componentSize;
this.changeDetector = changeDetector;
this.renderer = renderer;
this.elementRef = elementRef;
this.disabled = false;
this.placeholder = CommonConstants.EMPTY_STRING;
/*
* Validation messages (key - validation rule, value - error message)
*/
this.validations = {};
this.bordered = false;
this.changeValue = new EventEmitter();
this._value = null;
/**
* input componnent validation errors
*/
this.innerErrors = {};
this.innerValidations = [];
// END CLASSES
this.isHovered = false;
this.valueSubject = new Subject();
this.value$ = this.valueSubject.asObservable();
this.propagateChange = (_) => { };
this.propagateBlur = () => { };
if (this.ngControl)
this.ngControl.valueAccessor = this;
}
// END INPUTS
// PROPERTIES
get inputId() {
return `${InputConstants.ID_PREFIX}${this.id}`;
}
set value(value) {
this._value = value;
}
get value() {
return this._value;
}
get inputValue() {
return this.inputElementRef?.nativeElement.value;
}
get labelClass() {
return this.placeholder || this.isFocused || this.value ? UIClass.Active : CommonConstants.EMPTY_STRING;
}
get placeholderValue() {
return this.placeholder && !this.isFocused ? this.placeholder : CommonConstants.EMPTY_STRING;
}
/*
* Return helper text if input has NOT error,
* otherwise return first error message
*/
get helperTextValue() {
return this.input?.isInvalid || !this.isValid ? this.errorMessage : this.helperText;
}
get sizeProportion() {
return this.componentSize?.proportion || 1;
}
/**
* input componnent validation flag
*/
get isValid() {
return !Object.keys(this.validationErrors).length;
}
get isInnerInvalid() {
return Object.keys(this.innerErrors).length > 0;
}
get validationClass() {
return this.isValid ? UIClass.Valid : UIClass.Invalid;
}
/*
* Get first error message from custom validation error mappings (or default)
*/
get errorMessage() {
return this.input ? this.validationMessages[0] || InputConstants.DEFAULT_ERROR_MESSAGE : CommonConstants.EMPTY_STRING;
}
get validationMessages() {
const messages = [];
Object.keys(this.validations).forEach(key => {
if (this.validationErrors[key]) {
messages.push(this.validations[key]);
}
});
return messages;
}
/*
* Return all input validation errors (ngControl errors)
*/
get validationErrors() {
return this.input
? isDefined(this.input.errors) ? { ...this.input.errors, ...this.innerErrors } : this.innerErrors
: this.innerErrors;
}
// END PROPERTIES
// CLASSES
get isFocused() {
return this.input ? this.input.isFocused : false;
}
get hasIcon() {
return isDefined(this.icon);
}
get hasValue() {
return !isNullOrEmptyString(this.value);
}
onMouseEnter() { this.isHovered = true; }
onMouseLeave() { this.isHovered = false; }
ngAfterViewInit() {
if (this.iconElementRef)
this.setOnFocusEvent(this.iconElementRef.nativeElement);
this.changeDetector.detectChanges();
}
// METHODS
setOnFocusEvent(element) {
if (element) {
this.renderer.listen(element, 'click', () => this.inputElementRef.nativeElement.focus());
}
}
checkeInnerValidation(parameters) {
if (any(this.innerValidations)) {
this.innerValidations.forEach(validation => this.toggleInnerErrors(validation.key, validation.validate(this.value, parameters)));
}
}
clearInnerErrors() {
this.innerErrors = {};
}
toggleInnerErrors(validationKey, isValid) {
if (isValid)
removePropertyFromObject(this.innerErrors, validationKey);
else
this.innerErrors = addPropertyToObject(this.innerErrors, validationKey, true);
}
// END METHODS
/*
* Write form value to the DOM element (model => view)
*/
writeValue(value) {
this.valueSubject.next(value);
this.value = value;
}
/*
* Write form disabled state to the DOM element (model => view)
*/
setDisabledState(isDisabled) {
this.disabled = isDisabled;
}
/*
* Update form when DOM element value changes (view => model)
*/
registerOnChange(fn) {
// Store the provided function as an internal method.
this.propagateChange = fn;
}
/*
* Update form when DOM element is blurred (view => model)
*/
registerOnTouched(fn) {
// Store the provided function as an internal method.
this.propagateBlur = fn;
}
onChange(value) {
this.value = value;
this.propagateChange(this.value);
this.changeValue.emit(this.value);
}
onBlur() {
this.propagateBlur();
}
}
BaseInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseInputComponent, deps: [{ token: i1.NgControl, optional: true }, { token: i3.ComponentSizeDirective, optional: true }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
BaseInputComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: BaseInputComponent, inputs: { id: "id", label: "label", disabled: "disabled", placeholder: "placeholder", icon: "icon", helperText: "helperText", validations: "validations", bordered: "bordered" }, outputs: { changeValue: "changeValue" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class.disabled": "this.disabled", "class.bordered": "this.bordered", "class.inner-invalid": "this.isInnerInvalid", "class.focus": "this.isFocused", "class.has-icon": "this.hasIcon", "class.has-value": "this.hasValue" } }, viewQueries: [{ propertyName: "input", first: true, predicate: InputReferenceDirective, descendants: true }, { propertyName: "inputElementRef", first: true, predicate: InputReferenceDirective, descendants: true, read: ElementRef }, { propertyName: "iconElementRef", first: true, predicate: ["iconRef"], descendants: true, read: ElementRef }], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseInputComponent, decorators: [{
type: Directive
}], ctorParameters: function () { return [{ type: i1.NgControl, decorators: [{
type: Optional
}] }, { type: i3.ComponentSizeDirective, decorators: [{
type: Optional
}] }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: i0.ElementRef }]; }, propDecorators: { id: [{
type: Input
}], label: [{
type: Input
}], disabled: [{
type: Input
}, {
type: HostBinding,
args: [`class.${UIClass.Disabled}`]
}], placeholder: [{
type: Input
}], icon: [{
type: Input
}], helperText: [{
type: Input
}], validations: [{
type: Input
}], bordered: [{
type: Input
}, {
type: HostBinding,
args: [`class.${UIClass.Bordered}`]
}], changeValue: [{
type: Output
}], isInnerInvalid: [{
type: HostBinding,
args: [`class.${UIClass.InnerInvalid}`]
}], isFocused: [{
type: HostBinding,
args: [`class.${UIClass.Focus}`]
}], hasIcon: [{
type: HostBinding,
args: [`class.${InputUIClass.HasIcon}`]
}], hasValue: [{
type: HostBinding,
args: [`class.${InputUIClass.HasValue}`]
}], onMouseEnter: [{
type: HostListener,
args: ['mouseenter']
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}], input: [{
type: ViewChild,
args: [InputReferenceDirective, { static: false }]
}], inputElementRef: [{
type: ViewChild,
args: [InputReferenceDirective, { static: false, read: ElementRef }]
}], iconElementRef: [{
type: ViewChild,
args: ['iconRef', { static: false, read: ElementRef }]
}] } });
var CommonValidator;
(function (CommonValidator) {
CommonValidator["Required"] = "required";
CommonValidator["MaxLength"] = "maxlength";
CommonValidator["MinLength"] = "minlength";
CommonValidator["Format"] = "sfc-format";
CommonValidator["Empty"] = "sfc-empty";
CommonValidator["Duplicate"] = "sfc-duplicate";
CommonValidator["Exist"] = "sfc-exist";
CommonValidator["Data"] = "sfc-data";
CommonValidator["TagsLength"] = "sfc-tags-length";
CommonValidator["MaxArrayLength"] = "sfc-max-array-length";
CommonValidator["MinArrayLength"] = "sfc-max-array-length";
})(CommonValidator || (CommonValidator = {}));
function validation(validatorFn) {
const validator = (formControl) => {
return isDefined(formControl) ? validatorFn(formControl.value) : null;
};
return validator;
}
function equalOrInclude(includes) {
const invalidResult = { 'sfc-equal-or-include': true };
const validatorFn = (value) => {
if (!isDefined(value))
return null;
if (Array.isArray(includes)) {
if (includes.length > 0) {
if (Array.isArray(value)) {
for (let index = 0; index < value.length; index++) {
const element = value[index], result = equalOrIncludeArrayOfValues(element, includes);
if (result) {
return result;
}
}
}
else {
return equalOrIncludeArrayOfValues(value, includes);
}
}
}
else {
if (Array.isArray(value)) {
for (let index = 0; index < value.length; index++) {
const element = value[index];
if (element instanceof Object) {
return JSON.stringify(includes) !== JSON.stringify(element) ? invalidResult : null;
}
else {
return value.includes(includes) ? null : invalidResult;
}
}
}
else {
if (value instanceof Object) {
return JSON.stringify(includes) !== JSON.stringify(value) ? invalidResult : null;
}
else {
return value != includes ? invalidResult : null;
}
}
}
return null;
};
return validation(validatorFn);
function equalOrIncludeArrayOfValues(element, includes) {
if (element instanceof Object) {
let found = false;
for (let index = 0; index < includes.length; index++) {
const item = includes[index];
if (JSON.stringify(item) === JSON.stringify(element)) {
found = true;
break;
}
}
return found ? null : invalidResult;
}
else {
return includes.includes(element) ? null : invalidResult;
}
}
}
function maxArrayLength(maxLength) {
const validatorFn = (value) => {
if (isDefined(value) && value instanceof Array) {
if (value.length > maxLength) {
return { 'sfc-max-array-length': { requiredLength: maxLength, actualLength: value.length, value } };
}
}
return null;
};
return validation(validatorFn);
}
function minArrayLength(minLength) {
const validatorFn = (value) => {
if (isDefined(value) && value instanceof Array) {
if (value.length < minLength) {
return { 'sfc-min-array-length': { requiredLength: minLength, actualLength: value.length, value } };
}
}
return null;
};
return validation(validatorFn);
}
function match(matchTo, reverse) {
return (control) => {
if (control.parent && reverse) {
const matchControl = (control.parent?.controls)[matchTo];
if (matchControl)
matchControl.updateValueAndValidity();
return null;
}
return !!control.parent &&
!!control.parent.value &&
control.value === (control.parent?.controls)[matchTo]?.value
? null
: { 'sfc-match': true };
};
}
function compareThan(comparePropertyName, compare, reverse) {
return (control) => {
const comparePropertyValue = control.parent?.controls
? (control.parent?.controls)[comparePropertyName]?.value
: null;
if (!isDefined(comparePropertyValue))
return null;
if (control.parent && reverse) {
const matchControl = (control.parent?.controls)[comparePropertyName];
if (matchControl)
matchControl.updateValueAndValidity();
return null;
}
return !!control.parent &&
!!control.parent.value &&
comparePropertyValue &&
(compare == Compare.More
? control.value > comparePropertyValue
: control.value < comparePropertyValue)
? null
: { 'sfc-compare-than': true };
};
}
class EqualOrIncludeValidatorDirective {
validate(control) {
return equalOrInclude(this.includes)(control);
}
}
EqualOrIncludeValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EqualOrIncludeValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
EqualOrIncludeValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: EqualOrIncludeValidatorDirective, selector: "[sfcEqualOrInclude]", inputs: { includes: ["sfcEqualOrInclude", "includes"] }, providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: EqualOrIncludeValidatorDirective }
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: EqualOrIncludeValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: '[sfcEqualOrInclude]',
providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: EqualOrIncludeValidatorDirective }
]
}]
}], propDecorators: { includes: [{
type: Input,
args: ['sfcEqualOrInclude']
}] } });
class MaxArrayLengthValidatorDirective {
validate(control) {
return maxArrayLength(this.maxArrayLength)(control);
}
}
MaxArrayLengthValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MaxArrayLengthValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
MaxArrayLengthValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MaxArrayLengthValidatorDirective, selector: "[sfcMaxArrayLength]", inputs: { maxArrayLength: ["sfcMaxArrayLength", "maxArrayLength"] }, providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: MaxArrayLengthValidatorDirective }
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MaxArrayLengthValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: '[sfcMaxArrayLength]',
providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: MaxArrayLengthValidatorDirective }
]
}]
}], propDecorators: { maxArrayLength: [{
type: Input,
args: ['sfcMaxArrayLength']
}] } });
class MinArrayLengthValidatorDirective {
validate(control) {
return minArrayLength(this.minArrayLength)(control);
}
}
MinArrayLengthValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MinArrayLengthValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
MinArrayLengthValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MinArrayLengthValidatorDirective, selector: "[sfcMinArrayLength]", inputs: { minArrayLength: ["sfcMinArrayLength", "minArrayLength"] }, providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: MinArrayLengthValidatorDirective }
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MinArrayLengthValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: '[sfcMinArrayLength]',
providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: MinArrayLengthValidatorDirective }
]
}]
}], propDecorators: { minArrayLength: [{
type: Input,
args: ['sfcMinArrayLength']
}] } });
class MatchValidatorDirective {
constructor() {
this.reverse = false;
}
validate(control) {
return match(this.matchTo, this.reverse)(control);
}
}
MatchValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MatchValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
MatchValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: MatchValidatorDirective, selector: "[sfcMatch]", inputs: { matchTo: ["sfcMatch", "matchTo"], reverse: "reverse" }, providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: MatchValidatorDirective }
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MatchValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: '[sfcMatch]',
providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: MatchValidatorDirective }
]
}]
}], propDecorators: { matchTo: [{
type: Input,
args: ['sfcMatch']
}], reverse: [{
type: Input
}] } });
class CompareThanValidatorDirective {
constructor() {
this.reverse = false;
}
validate(control) {
return compareThan(this.comparePropertyName, this.compare, this.reverse)(control);
}
}
CompareThanValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CompareThanValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
CompareThanValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: CompareThanValidatorDirective, selector: "[sfcCompareThan]", inputs: { comparePropertyName: ["sfcCompareThan", "comparePropertyName"], compare: "compare", reverse: "reverse" }, providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: CompareThanValidatorDirective }
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CompareThanValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: '[sfcCompareThan]',
providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: CompareThanValidatorDirective }
]
}]
}], propDecorators: { comparePropertyName: [{
type: Input,
args: ['sfcCompareThan']
}], compare: [{
type: Input
}], reverse: [{
type: Input
}] } });
// enums
var FileValidator;
(function (FileValidator) {
FileValidator["MaxSize"] = "sfc-file-max-size";
FileValidator["MinSize"] = "sfc-file-min-size";
FileValidator["Extension"] = "sfc-file-extension";
})(FileValidator || (FileValidator = {}));
function fileMaxSize(maxSize) {
const validatorFn = (file) => {
if (file instanceof File && file.size > maxSize) {
const model = { requiredSize: maxSize, actualSize: file.size, file };
return { [FileValidator.MaxSize]: model };
}
return null;
};
return validation(validatorFn);
}
function fileMinSize(minSize) {
const validatorFn = (file) => {
if (file instanceof File && file.size < minSize) {
const model = { requiredSize: minSize, actualSize: file.size, file };
return { [FileValidator.MinSize]: model };
}
return null;
};
return validation(validatorFn);
}
function fileExtensions(allowedExtensions) {
const validatorFn = (file) => {
if (!any(allowedExtensions)) {
return null;
}
if (file instanceof File) {
const ext = getFileExtension(file);
if (allowedExtensions.indexOf(ext) === -1) {
const model = { allowedExtensions: allowedExtensions, actualExtension: ext, file };
return { [FileValidator.Extension]: model };
}
}
return null;
};
return validation(validatorFn);
}
class FileExtensionsValidatorDirective {
constructor() {
this.extensions = [];
}
validate(control) {
return fileExtensions(this.extensions)(control);
}
}
FileExtensionsValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FileExtensionsValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
FileExtensionsValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FileExtensionsValidatorDirective, selector: "[sfcFileExtensions]", inputs: { extensions: ["sfcFileExtensions", "extensions"] }, providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: FileExtensionsValidatorDirective }
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FileExtensionsValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: '[sfcFileExtensions]',
providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: FileExtensionsValidatorDirective }
]
}]
}], propDecorators: { extensions: [{
type: Input,
args: ['sfcFileExtensions']
}] } });
class FileMaxSizeValidatorDirective {
constructor() {
this.maxSize = 0;
}
validate(control) {
return fileMaxSize(this.maxSize)(control);
}
}
FileMaxSizeValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FileMaxSizeValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
FileMaxSizeValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FileMaxSizeValidatorDirective, selector: "[sfcFileMaxSize]", inputs: { maxSize: ["sfcFileMaxSize", "maxSize"] }, providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: FileMaxSizeValidatorDirective }
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FileMaxSizeValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: '[sfcFileMaxSize]',
providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: FileMaxSizeValidatorDirective }
]
}]
}], propDecorators: { maxSize: [{
type: Input,
args: ['sfcFileMaxSize']
}] } });
class FileMinSizeValidatorDirective {
constructor() {
this.minSize = 0;
}
validate(control) {
return fileMinSize(this.minSize)(control);
}
}
FileMinSizeValidatorDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FileMinSizeValidatorDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
FileMinSizeValidatorDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: FileMinSizeValidatorDirective, selector: "[sfcFileMinSize]", inputs: { minSize: ["sfcFileMinSize", "minSize"] }, providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: FileMinSizeValidatorDirective }
], ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: FileMinSizeValidatorDirective, decorators: [{
type: Directive,
args: [{
selector: '[sfcFileMinSize]',
providers: [
{ provide: NG_VALIDATORS, multi: true, useExisting: FileMinSizeValidatorDirective }
]
}]
}], propDecorators: { minSize: [{
type: Input,
args: ['sfcFileMinSize']
}] } });
// models, enums
class BaseTextInputComponent extends BaseInputComponent {
constructor() {
super(...arguments);
this.showPlaceholderOnFocus = false;
}
get placeholderValue() {
return this.placeholder && (!this.isFocused || this.showPlaceholderOnFocus)
? this.placeholder
: CommonConstants.EMPTY_STRING;
}
get requiredLengthValue() {
let requiredLength = null;
if (this.validationErrors) {
const minLengthError = this.validationErrors[CommonValidator.MinLength], maxLengthError = this.validationErrors[CommonValidator.MaxLength];
if (minLengthError) {
requiredLength = minLengthError.requiredLength;
}
if (maxLengthError) {
requiredLength = maxLengthError.requiredLength;
}
}
return requiredLength;
}
get charsCounterValue() {
return this.requiredLengthValue
? `${this.value?.length}${CommonConstants.COMMON_TEXT_DELIMETER}${this.requiredLengthValue}`
: CommonConstants.EMPTY_STRING;
}
}
BaseTextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseTextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
BaseTextInputComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: BaseTextInputComponent, inputs: { showPlaceholderOnFocus: "showPlaceholderOnFocus" }, usesInheritance: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseTextInputComponent, decorators: [{
type: Directive
}], propDecorators: { showPlaceholderOnFocus: [{
type: Input
}] } });
var TextType;
(function (TextType) {
TextType["Text"] = "text";
TextType["Password"] = "password";
})(TextType || (TextType = {}));
class TextInputComponent extends BaseTextInputComponent {
constructor() {
super(...arguments);
this.type = TextType.Text;
this._isPassword = false;
}
ngOnInit() {
this._isPassword = this.isPassword;
}
get isPassword() {
return this.type === TextType.Password;
}
get passwordIcon() {
return this.isPassword ? faEye : faEyeSlash;
}
togglePasswordVisibility() {
this.type = this.type == TextType.Password ? TextType.Text : TextType.Password;
}
}
TextInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
TextInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: TextInputComponent, selector: "sfc-text-input", inputs: { type: "type" }, usesInheritance: true, ngImport: i0, template: "<div class=\"container\">\r\n <fa-icon *ngIf=\"icon\" #iconRef class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <div class=\"content\">\r\n <fa-icon *ngIf=\"_isPassword\" class=\"password-icon\" [icon]=\"passwordIcon\" (click)=\"togglePasswordVisibility()\">\r\n </fa-icon>\r\n <label for=\"{{inputId}}\" [ngClass]=\"labelClass\">{{label}}</label>\r\n <div class=\"input\">\r\n <input sfcInput id=\"{{inputId}}\" [type]=\"type\" class=\"text-input\" [placeholder]=\"placeholderValue\"\r\n [value]=\"value\" [disabled]=\"disabled\" (input)=\"onChange($any($event.target).value)\" (blur)=\"onBlur()\">\r\n <ng-content></ng-content>\r\n </div>\r\n <span class=\"helper-text\">{{helperTextValue}}</span>\r\n <span [sfcShowHideElement]=\"requiredLengthValue !== null\" class=\"right-side-info\">{{charsCounterValue}}</span>\r\n </div>\r\n</div> ", styles: [":host{width:100%}:host .container{display:flex;justify-content:center;align-items:center}:host .container .icon{font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:1.3em;padding-right:.5em;cursor:pointer;transition:color .5s ease}:host .container .icon,:host-context(.sfc-default-theme) :host .container .icon{color:#545e61}:host-context(.sfc-dark-theme) :host .container .icon{color:#fff}:host .container .icon:hover{color:#ffce54}:host .container .content{width:100%;position:relative}:host .container .content .sfc-input{background-color:transparent;border:none;border-bottom:1px solid;border-radius:0;transition:border-color .5s ease;transition:color .5s ease;outline:none;height:2.4em;width:100%;font-family:Arial,Helvetica,sans-serif;font-size:.8em;padding:0;box-shadow:none;box-sizing:content-box;transition:border .5s,box-shadow .5s;transition:box-shadow .5s,border .5s;transition:box-shadow .5s,border .5s,box-shadow .5s;-webkit-user-select:none;user-select:none}:host .container .content .sfc-input,:host-context(.sfc-default-theme) :host .container .content .sfc-input{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container .content .sfc-input{border-color:#fff}:host .container .content .sfc-input,:host-context(.sfc-default-theme) :host .container .content .sfc-input{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content .sfc-input{color:#fff}:host .container .content label{transition:color .5s ease;position:absolute;top:0;left:0;right:0;font-size:.8em;cursor:text;transition:color .5s ease,transform .2s ease-out;transition:transform .2s ease-out,color .5s ease;transition:transform .2s ease-out,color .5s ease,transform .2s ease-out;transform-origin:0% 100%;text-align:initial;transform:translateY(.6em);-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .container .content label,:host-context(.sfc-default-theme) :host .container .content label{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content label{color:#fff}:host .container .content label:after{display:block;content:\"\";position:absolute;top:100%;left:0;opacity:0;transition:.2s opacity ease-out,.5s color ease}:host .container .content label.active{transform:translateY(-.9em) scale(.8);transform-origin:0 0;cursor:pointer}:host .container .content label.side{position:relative;transform:scale(1);margin:0 .5em;white-space:break-spaces}:host .container .content .helper-text{-webkit-user-select:none;user-select:none;font-size:.6em;margin-top:.248em;transition:color .5s ease;min-width:1em;float:left;position:relative;text-wrap:wrap}:host .container .content .helper-text,:host-context(.sfc-default-theme) :host .container .content .helper-text{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content .helper-text{color:#fff}:host .container .content .helper-text:after{opacity:1;position:absolute;top:0;left:0}:host ::placeholder{white-space:nowrap;text-overflow:ellipsis;transition:color .5s ease}:host ::placeholder,:host-context(.sfc-default-theme) :host ::placeholder{color:#d8d7d7}:host-context(.sfc-dark-theme) :host ::placeholder{color:#aab2bd}:host :placeholder-shown{text-overflow:ellipsis}:host.focus .container .icon{pointer-events:none;color:#ffce54}:host.focus .container .content .sfc-input{border-bottom:1px solid #ffce54;box-shadow:0 1px #ffce54}:host.focus .container .content label{color:#ffce54}:host.disabled .container .icon{transition:color .5s ease;color:#0000006b;pointer-events:none}:host.disabled .container .icon,:host-context(.sfc-default-theme) :host.disabled .container .icon{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .icon{color:#656d78}:host.disabled .container .content .sfc-input{transition:color .5s ease;transition:border-color .5s ease;border-bottom:1px dotted}:host.disabled .container .content .sfc-input,:host-context(.sfc-default-theme) :host.disabled .container .content .sfc-input{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .content .sfc-input{color:#656d78}:host.disabled .container .content .sfc-input,:host-context(.sfc-default-theme) :host.disabled .container .content .sfc-input{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .content .sfc-input{border-color:#656d78}:host.disabled .container .content label{pointer-events:none;transition:color .5s ease}:host.disabled .container .content label,:host-context(.sfc-default-theme) :host.disabled .container .content label{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled .container .content label{color:#656d78}:host.disabled ::placeholder{transition:color .5s ease}:host.disabled ::placeholder,:host-context(.sfc-default-theme) :host.disabled ::placeholder{color:#bdbdbd}:host-context(.sfc-dark-theme) :host.disabled ::placeholder{color:#656d78}:host.bordered .container .input{display:flex}:host.bordered .container .content .sfc-input{border:2px solid;border-radius:1em;padding:0 .3em;margin:.2em 0;transition:border-color .5s ease}:host.bordered .container .content .sfc-input,:host-context(.sfc-default-theme) :host.bordered .container .content .sfc-input{border-color:#545e61}:host-context(.sfc-dark-theme) :host.bordered .container .content .sfc-input{border-color:#fff}:host.bordered .container .content .sfc-input:focus{box-shadow:0 0 5pt .5pt #e9e9e9;outline-width:0}:host.bordered .container .content label{left:.3em;transform:translateY(.9em)}:host.bordered .container .content label.active{left:0;transform:translateY(-.9em) scale(.8)}:host.bordered.disabled .container .content .sfc-input{transition:border-color .5s ease;border-style:dotted}:host.bordered.disabled .container .content .sfc-input,:host-context(.sfc-default-theme) :host.bordered.disabled .container .content .sfc-input{border-color:#bdbdbd}:host-context(.sfc-dark-theme) :host.bordered.disabled .container .content .sfc-input{border-color:#656d78}:host.bordered.inner-invalid .container .content .sfc-input,:host.bordered.has-value.ng-invalid .container .content .sfc-input,:host.bordered.ng-dirty.ng-invalid .container .content .sfc-input{border-color:#e96075;border-bottom:2px solid #e96075;box-shadow:none}:host.bordered.inner-invalid .container .content .sfc-input:focus,:host.bordered.has-value.ng-invalid .container .content .sfc-input:focus,:host.bordered.ng-dirty.ng-invalid .container .content .sfc-input:focus{border-bottom:2px solid #e96075;border-color:#e96075;box-shadow:0 0 5pt .5pt #e96075}:host.bordered.has-value.ng-dirty.ng-valid .container .content .sfc-input{border-color:#4ec07d;border-bottom:2px solid #4ec07d;box-shadow:none}:host.bordered.has-value.ng-dirty.ng-valid .container .content .sfc-input:focus{border-color:#4ec07d;border-bottom:2px solid #4ec07d;box-shadow:0 0 5pt .5pt #4ec07d}:host.inner-invalid .container .content .sfc-input,:host.has-value.ng-invalid .container .content .sfc-input,:host.ng-dirty.ng-invalid .container .content .sfc-input{border-bottom:1px solid #e96075;box-shadow:0 1px #e96075}:host.inner-invalid .container .content .sfc-input:focus,:host.has-value.ng-invalid .container .content .sfc-input:focus,:host.ng-dirty.ng-invalid .container .content .sfc-input:focus{border-bottom:1px solid #e96075;box-shadow:0 1px #e96075}:host.inner-invalid .container .content label,:host.inner-invalid .container .content .helper-text,:host.has-value.ng-invalid .container .content label,:host.has-value.ng-invalid .container .content .helper-text,:host.ng-dirty.ng-invalid .container .content label,:host.ng-dirty.ng-invalid .container .content .helper-text{color:#e96075!important}:host.inner-invalid .container .icon,:host.has-value.ng-invalid .container .icon,:host.ng-dirty.ng-invalid .container .icon{color:#e96075}:host.has-value.ng-dirty.ng-valid .container .content .sfc-input{border-bottom:1px solid #4ec07d;box-shadow:0 1px #4ec07d}:host.has-value.ng-dirty.ng-valid .container .content .sfc-input:focus{border-bottom:1px solid #4ec07d;box-shadow:0 1px #4ec07d}:host.has-value.ng-dirty.ng-valid .container .content label,:host.has-value.ng-dirty.ng-valid .container .content .helper-text{color:#4ec07d}:host.has-value.ng-dirty.ng-valid .container .icon{color:#4ec07d}:host ::ng-deep ::-webkit-scrollbar{width:.375em;height:.375em}:host ::ng-deep ::-webkit-scrollbar-track{border-radius:.625em;background:#e9e9e9}:host ::ng-deep ::-webkit-scrollbar-thumb{border-radius:.625em;background:rgba(0,0,0,.2)}:host ::ng-deep ::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.4)}:host ::ng-deep ::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.6)}\n", ":host .container .content .password-icon{position:absolute;right:.6em;top:.6em;font-size:.8em;transition:color .5s ease;cursor:pointer;z-index:9999}:host .container .content .password-icon,:host-context(.sfc-default-theme) :host .container .content .password-icon{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content .password-icon{color:#fff}:host .container .content .password-icon:hover{color:#ffce54}:host .container .content .input{position:relative}:host .container .content .right-side-info{-webkit-user-select:none;user-select:none;font-size:.6em;margin-top:.248em;transition:color .5s ease;float:right;position:absolute;right:0}:host .container .content .right-side-info,:host-context(.sfc-default-theme) :host .container .content .right-side-info{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content .right-side-info{color:#fff}\n", ":host.bordered .container .content .password-icon{top:.9em}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "directive", type: i3.ShowHideElementDirective, selector: "[sfcShowHideElement]", inputs: ["sfcShowHideElement", "delay"] }, { kind: "directive", type: InputReferenceDirective, selector: "[sfcInput]" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TextInputComponent, decorators: [{
type: Component,
args: [{ selector: 'sfc-text-input', template: "<div class=\"container\">\r\n <fa-icon *ngIf=\"icon\" #iconRef class=\"icon\" [icon]=\"icon\"></fa-icon>\r\n <div class=\"content\">\r\n <fa-icon *ngIf=\"_isPassword\" class=\"password-icon\" [icon]=\"passwordIcon\" (click)=\"togglePasswordVisibility()\">\r\n </fa-icon>\r\n <label for=\"{{inputId}}\" [ngClass]=\"labelClass\">{{label}}</label>\r\n <div class=\"input\">\r\n <input sfcInput id=\"{{inputId}}\" [type]=\"type\" class=\"text-input\" [placeholder]=\"placeholderValue\"\r\n [value]=\"value\" [disabled]=\"disabled\" (input)=\"onChange($any($event.target).value)\" (blur)=\"onBlur()\">\r\n <ng-content></ng-content>\r\n </div>\r\n <span class=\"helper-text\">{{helperTextValue}}</span>\r\n <span [sfcShowHideElement]=\"requiredLengthValue !== null\" class=\"right-side-info\">{{charsCounterValue}}</span>\r\n </div>\r\n</div> ", styles: [":host{width:100%}:host .container{display:flex;justify-content:center;align-items:center}:host .container .icon{font-weight:400;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:1.3em;padding-right:.5em;cursor:pointer;transition:color .5s ease}:host .container .icon,:host-context(.sfc-default-theme) :host .container .icon{color:#545e61}:host-context(.sfc-dark-theme) :host .container .icon{color:#fff}:host .container .icon:hover{color:#ffce54}:host .container .content{width:100%;position:relative}:host .container .content .sfc-input{background-color:transparent;border:none;border-bottom:1px solid;border-radius:0;transition:border-color .5s ease;transition:color .5s ease;outline:none;height:2.4em;width:100%;font-family:Arial,Helvetica,sans-serif;font-size:.8em;padding:0;box-shadow:none;box-sizing:content-box;transition:border .5s,box-shadow .5s;transition:box-shadow .5s,border .5s;transition:box-shadow .5s,border .5s,box-shadow .5s;-webkit-user-select:none;user-select:none}:host .container .content .sfc-input,:host-context(.sfc-default-theme) :host .container .content .sfc-input{border-color:#545e61}:host-context(.sfc-dark-theme) :host .container .content .sfc-input{border-color:#fff}:host .container .content .sfc-input,:host-context(.sfc-default-theme) :host .container .content .sfc-input{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content .sfc-input{color:#fff}:host .container .content label{transition:color .5s ease;position:absolute;top:0;left:0;right:0;font-size:.8em;cursor:text;transition:color .5s ease,transform .2s ease-out;transition:transform .2s ease-out,color .5s ease;transition:transform .2s ease-out,color .5s ease,transform .2s ease-out;transform-origin:0% 100%;text-align:initial;transform:translateY(.6em);-webkit-user-select:none;user-select:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .container .content label,:host-context(.sfc-default-theme) :host .container .content label{color:#545e61}:host-context(.sfc-dark-theme) :host .container .content label{color:#fff}:host .container .content label:after{dis