custom-input-field
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 14.0.0.
333 lines (327 loc) • 16.8 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, ViewChild, Input, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i3 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import { BrowserModule } from '@angular/platform-browser';
class CustomInputFieldComponent {
constructor(renderer) {
this.renderer = renderer;
//Inputs
this.placeholder = " ";
this.inputLabel = "";
this.readonly = false;
this.isRequired = false;
this.isSearch = true;
this.itemNotFoundMessage = 'Item not found';
this.defaultValue = null;
this.defaultValueName = '';
this.isDefaultDisabled = true;
this.masterList = [];
this.selectedValueChange = new EventEmitter();
this.onSelectionChange = new EventEmitter();
this.selectedName = "";
this.randomNumber = Math.floor(Math.random() * 90000) + 10000;
this.currentMasterList = [];
this.currentOptionElements = [];
this.isItemNotFound = false;
}
ngOnInit() {
}
ngAfterContentInit() {
this.checkDefaultValue();
if (!this.selectedValue)
return;
if (!this.masterList?.length)
return;
this.selectedName = this.masterList.find(x => x.id == this.selectedValue)?.name;
}
ngOnChanges() {
if (!this.selectedValue)
return;
if (!this.masterList?.length)
return;
this.selectedName = this.masterList.find(x => x.id == this.selectedValue)?.name;
}
onSelectOption(item) {
if (item.disabled)
return;
this.selectedValueChange.emit(null);
const optionsElement = this.SelectOptions.nativeElement;
optionsElement.classList.remove("active");
this.selectedValueChange.emit(item.id);
this.selectedName = item.name;
this.onSelectionChange.emit(item);
}
onSelectDefault(event) {
if (this.isDefaultDisabled)
return;
this.selectedValueChange.emit(null);
const optionsElement = this.SelectOptions.nativeElement;
optionsElement.classList.remove("active");
this.selectedValueChange.emit(this.defaultValue);
this.selectedName = this.defaultValueName;
this.onSelectionChange.emit(event);
}
checkDefaultValue() {
if (this.defaultValue == 0 && this.selectedValue == 0) {
this.selectedName = this.defaultValueName;
console.log(this.selectedName);
}
}
validateValue() {
const { value } = this.SelectInput.nativeElement;
const trimmedValue = value?.toString()?.trim();
if (trimmedValue) {
this.renderer.addClass(this.SelectLabel.nativeElement, '--input--selected');
}
else {
this.renderer.removeClass(this.SelectLabel.nativeElement, '--input--selected');
}
}
onFocus() {
this.iconNameChange();
this.currentMasterList = [];
this.currentOptionElements = this.SelectOptions.nativeElement?.children;
const { value } = this.SelectInput.nativeElement;
const currentValue = value?.toString()?.trim();
if (!this.currentOptionElements?.length)
return;
for (let i = 0; i < this.currentOptionElements.length; i++) {
const optionElement = this.currentOptionElements[i];
const optionText = optionElement.innerText?.trim();
this.currentMasterList.push(optionText);
this.renderer.removeClass(optionElement, 'selected-option');
if (currentValue) {
if (currentValue === optionText)
this.renderer.addClass(optionElement, 'selected-option');
}
this.renderer.removeClass(optionElement, 'hide-option');
this.renderer.addClass(optionElement, 'show-option');
this.renderer.addClass(optionElement, 'select-part');
}
this.renderer.removeClass(this.SelectLabel.nativeElement, '--input--selected');
this.renderer.addClass(this.SelectOptions.nativeElement, 'active');
}
onKeyUp(event) {
const { keyCode } = event;
if (keyCode === 9)
return; //Tab
if (!this.isSearch)
return;
this.selectedValueChange.emit(null);
this.isItemNotFound = false;
const inputValue = event.target.value?.toString()?.trim()?.toLowerCase();
if (!this.currentOptionElements?.length)
return;
//FilterOptions
for (let i = 0; i < this.currentMasterList.length; i++) {
const filteredList = this.currentMasterList.filter(x => x?.toString()?.trim()?.toLowerCase().includes(inputValue));
//Check ItemIsFound
if (inputValue && !filteredList.length) {
const currentElement = this.SelectField.nativeElement.querySelectorAll(".input-item");
for (let i = 0; i < currentElement.length; i++) {
const element = currentElement[i];
const isNotFoundElement = element.getAttribute('item-not-found') === 'true';
if (!isNotFoundElement)
element.className = `input-item ${element?.getAttribute('value')} hide-option`;
}
this.isItemNotFound = true;
return;
}
else {
this.isItemNotFound = false;
}
//If Item Found
for (let i = 0; i < this.currentOptionElements.length; i++) {
const optionElement = this.currentOptionElements[i];
const optionText = optionElement.innerText;
this.renderer.removeClass(optionElement, 'selected-option');
if (!inputValue) {
this.renderer.removeClass(optionElement, 'hide-option');
this.renderer.addClass(optionElement, 'show-option');
continue;
}
if (filteredList.find(x => x?.trim() === optionText?.trim())) {
this.renderer.removeClass(optionElement, 'hide-option');
this.renderer.addClass(optionElement, 'show-option');
}
else {
this.renderer.addClass(optionElement, 'hide-option');
this.renderer.removeClass(optionElement, 'show-option');
}
}
}
}
onBlur() {
this.iconNameChange();
this.renderer.removeClass(this.SelectOptions.nativeElement, 'active');
if ((this.defaultValue || this.defaultValue == 0) && this.selectedValue == null) {
this.selectedValueChange.emit(this.defaultValue);
this.selectedName = this.defaultValueName;
this.renderer.addClass(this.SelectField.nativeElement, '--input--selected');
}
else {
if (!this.selectedValue && this.selectedValue != 0) {
this.selectedName = "";
const currentElement = this.SelectField.nativeElement.querySelector('.--input--selected');
if (currentElement)
this.renderer.removeClass(currentElement, "--input--selected");
}
}
}
placeholderActive(selector) {
if (selector.getAttribute('placeholder')) {
return true;
}
return false;
}
iconNameChange() {
const iconName = this.SelectOptions.nativeElement?.nextElementSibling?.innerText;
this.SelectOptions.nativeElement.nextElementSibling.innerText = iconName === 'expand_more' ? 'expand_less' : 'expand_more';
}
}
CustomInputFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CustomInputFieldComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
CustomInputFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: CustomInputFieldComponent, selector: "custom-input-field", inputs: { placeholder: "placeholder", inputLabel: "inputLabel", readonly: "readonly", isRequired: "isRequired", isSearch: "isSearch", itemNotFoundMessage: "itemNotFoundMessage", defaultValue: "defaultValue", defaultValueName: "defaultValueName", isDefaultDisabled: "isDefaultDisabled", masterList: "masterList", selectedValue: "selectedValue" }, outputs: { selectedValueChange: "selectedValueChange", onSelectionChange: "onSelectionChange" }, viewQueries: [{ propertyName: "SelectField", first: true, predicate: ["SelectField"], descendants: true }, { propertyName: "SelectInput", first: true, predicate: ["SelectInput"], descendants: true }, { propertyName: "SelectLabel", first: true, predicate: ["SelectLabel"], descendants: true }, { propertyName: "SelectOptions", first: true, predicate: ["SelectOptions"], descendants: true }], usesOnChanges: true, ngImport: i0, template: `
<div class="--input-select-group {{readonly? 'disabled' : ''}}" #SelectField>
<ng-container *ngIf="!readonly">
<input type="text" id="{{randomNumber}}" [readonly]="!isSearch" [placeholder]="placeholder"
(keyup)="onKeyUp($event)" #SelectInput (focus)="onFocus()" (blur)="onBlur()" [(ngModel)]="selectedName"
class="select-part select-input">
</ng-container>
<ng-container *ngIf="readonly">
<input type="text" onclick="return false" [placeholder]="placeholder" id="{{randomNumber}}" onkeydown="return false"
onkeypress="return false" onkeyup="return false" readonly [value]="selectedName" class="select-part select-input">
</ng-container>
<label for="{{randomNumber}}" #SelectLabel class="select-part">{{inputLabel}}<span *ngIf="isRequired"
class="--required-field"></span></label>
<div class="input-select select-part" #SelectOptions>
<ng-container *ngIf="defaultValue || defaultValueName">
<div class="input-item {{isDefaultDisabled? 'disabled' : ''}}" (mousedown)="onSelectDefault($event)"
attr.value="{{defaultValue}}">
{{defaultValueName}}
</div>
</ng-container>
<div *ngFor="let item of masterList;let i=index" class="input-item {{item.disabled ? 'disabled' : ''}}"
(mousedown)="onSelectOption(item)" attr.value="{{item.id}}">
{{item.name}}</div>
<ng-container *ngIf="isItemNotFound">
<div class="input-item show-option item-not-found" item-not-found="true">
{{itemNotFoundMessage}}
</div>
</ng-container>
</div>
<mat-icon class="mat-icon">expand_more</mat-icon>
</div>
`, isInline: true, dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CustomInputFieldComponent, decorators: [{
type: Component,
args: [{
selector: 'custom-input-field',
template: `
<div class="--input-select-group {{readonly? 'disabled' : ''}}" #SelectField>
<ng-container *ngIf="!readonly">
<input type="text" id="{{randomNumber}}" [readonly]="!isSearch" [placeholder]="placeholder"
(keyup)="onKeyUp($event)" #SelectInput (focus)="onFocus()" (blur)="onBlur()" [(ngModel)]="selectedName"
class="select-part select-input">
</ng-container>
<ng-container *ngIf="readonly">
<input type="text" onclick="return false" [placeholder]="placeholder" id="{{randomNumber}}" onkeydown="return false"
onkeypress="return false" onkeyup="return false" readonly [value]="selectedName" class="select-part select-input">
</ng-container>
<label for="{{randomNumber}}" #SelectLabel class="select-part">{{inputLabel}}<span *ngIf="isRequired"
class="--required-field"></span></label>
<div class="input-select select-part" #SelectOptions>
<ng-container *ngIf="defaultValue || defaultValueName">
<div class="input-item {{isDefaultDisabled? 'disabled' : ''}}" (mousedown)="onSelectDefault($event)"
attr.value="{{defaultValue}}">
{{defaultValueName}}
</div>
</ng-container>
<div *ngFor="let item of masterList;let i=index" class="input-item {{item.disabled ? 'disabled' : ''}}"
(mousedown)="onSelectOption(item)" attr.value="{{item.id}}">
{{item.name}}</div>
<ng-container *ngIf="isItemNotFound">
<div class="input-item show-option item-not-found" item-not-found="true">
{{itemNotFoundMessage}}
</div>
</ng-container>
</div>
<mat-icon class="mat-icon">expand_more</mat-icon>
</div>
`
}]
}], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { SelectField: [{
type: ViewChild,
args: ["SelectField"]
}], SelectInput: [{
type: ViewChild,
args: ["SelectInput"]
}], SelectLabel: [{
type: ViewChild,
args: ["SelectLabel"]
}], SelectOptions: [{
type: ViewChild,
args: ["SelectOptions"]
}], placeholder: [{
type: Input
}], inputLabel: [{
type: Input
}], readonly: [{
type: Input
}], isRequired: [{
type: Input
}], isSearch: [{
type: Input
}], itemNotFoundMessage: [{
type: Input
}], defaultValue: [{
type: Input
}], defaultValueName: [{
type: Input
}], isDefaultDisabled: [{
type: Input
}], masterList: [{
type: Input
}], selectedValue: [{
type: Input
}], selectedValueChange: [{
type: Output
}], onSelectionChange: [{
type: Output
}] } });
class CustomInputFieldModule {
}
CustomInputFieldModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CustomInputFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
CustomInputFieldModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.1.3", ngImport: i0, type: CustomInputFieldModule, declarations: [CustomInputFieldComponent], imports: [BrowserModule,
FormsModule,
MatIconModule], exports: [CustomInputFieldComponent] });
CustomInputFieldModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CustomInputFieldModule, imports: [BrowserModule,
FormsModule,
MatIconModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: CustomInputFieldModule, decorators: [{
type: NgModule,
args: [{
declarations: [
CustomInputFieldComponent
],
imports: [
BrowserModule,
FormsModule,
MatIconModule
],
exports: [
CustomInputFieldComponent
]
}]
}] });
/*
* Public API Surface of custom-input-field
*/
/**
* Generated bundle index. Do not edit.
*/
export { CustomInputFieldComponent, CustomInputFieldModule };
//# sourceMappingURL=custom-input-field.mjs.map