master-control 0.2.6 → 0.2.7

package/src/lib/search-multi-select/search-multi-select.component.css

@@ -0,0 +1,325 @@
+.field-lable{
+  font-size: 10px !important;
+  font-weight: 700 !important;
+  color: #444 !important;
+  margin-bottom: 0px !important;
+}
+.error-message{
+  color: red;
+}
+/* focus css for mat-form-field */
+  ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mat-mdc-notch-piece {
+  border-color:  var(--custom-border-color-focus, #ffbb00) !important;
+  border-width: var(--custom-border-width-focus, 1.5px) !important;
+}
+
+::ng-deep .mat-mdc-form-field {
+ background-color: var(--custom-bg-color, #ffffff) !important;
+ border-radius: var(--custom-border-radius ,  7px) !important;
+}
+
+/* hover css for mat-form-field */
+
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
+    .mdc-text-field--focused
+  ):hover
+  .mdc-notched-outline
+  .mdc-notched-outline__leading {
+    border-color:  var(--custom-border-color-hover, #ffbb00) !important;
+    border-width: var(--custom-border-width-hover, 1.5px) !important;
+  }
+
+::ng-deep   .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
+    .mdc-text-field--focused
+  ):hover
+  .mdc-notched-outline
+  .mdc-notched-outline__notch {
+    border-color:  var(--custom-border-color-hover, #ffbb00) !important;
+    border-width: var(--custom-border-width-hover, 1.5px) !important;
+  }
+
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
+    .mdc-text-field--focused
+  ):hover
+  .mdc-notched-outline
+  .mdc-notched-outline__trailing {
+    border-color:  var(--custom-border-color-hover, #ffbb00) !important;
+    border-width: var(--custom-border-width-hover, 1.5px) !important;
+  }
+
+/* regular css for mat-form-field */
+ ::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece {
+  border-color:  var(--custom-border-color, #dddddd) !important;
+  border-width: var(--custom-border-width, 1.5px) !important;
+}
+
+/* field css for mat-form-input-field */
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled)
+  .mdc-text-field__input {
+  caret-color: var(--custom-caret-color, #ffbb00) !important;
+  /* font-size: var(--custom-font-size, 16px) !important; */
+  font-size: 12px !important;
+  font-weight: var(--custom-font-weight, 400) !important;
+  font-family: var(--custom-font-family, 'Mulish') !important;
+  color: var(--custom-font-color, #444444) !important;
+}
+/* Error state for mat-form-field */
+::ng-deep .mat-form-field-invalid
+  .mdc-text-field--outlined .mat-mdc-notch-piece {
+    border-color:  var(--custom-border-color-error, red) !important;
+    border-width: var(--custom-border-width-error, 1.5px) !important;
+}
+
+::ng-deep .mat-mdc-form-field.mat-form-field-disabled{
+ background: var(--custom-bg-color-disabled, #ECECEC) !important;
+}
+::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input {
+  color : var(--custom-font-color-disabled, #999999) !important;
+}
+::ng-deep .mdc-label {
+    color: var(--custom-font-color, #444) !important;
+    font-size: var(--custom-font-size, 16px) !important;
+    font-weight: var(--custom-font-weight, 400) !important;
+    font-family: var(--custom-font-family, 'Mulish') !important;
+}
+::placeholder {
+  color: #8f8f8f !important;
+  font-size: 12px !important;
+}
+::ng-deep .mat-mdc-form-field-hint-wrapper{
+  padding: 0px !important;
+ }
+::ng-deep .mat-mdc-form-field-error-wrapper{
+  padding: 0px !important;
+ }
+ ::ng-deep .mat-mdc-form-field-error{
+  color: #EE0000 !important;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: "Mulish" !important;
+  letter-spacing: 0;
+ }
+::ng-deep .mdc-text-field--outlined {
+  --mdc-outlined-text-field-container-shape: var(--custom-border-radius ,  7px) !important;
+}
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece {
+    border-color:  var(--custom-border-color-error, red) !important;
+    border-width: var(--custom-border-width-error, 1.5px) !important;
+}
+
+::ng-deep .mat-mdc-form-field-subscript-wrapper {
+  display: none !important;
+}
+
+::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow {
+  color: #fb0;
+}
+::ng-deep .mat-mdc-select-arrow {
+  border-style: solid !important;
+  border-width: 0 2px 2px 0 !important;
+  border-right: 2px solid !important;
+  content: "" !important;
+  display: inline-block !important;
+  padding: 3px !important;
+  transform: rotate(45deg) !important;
+  vertical-align: middle !important;
+  width: unset !important;
+  height: unset !important;
+  color: #444 !important;
+}
+::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-mdc-select-arrow {
+  color: #fb0;
+}
+::ng-deep .mat-mdc-select-arrow svg {
+  display: none !important;
+}
+::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel {
+  background: #fff !important;
+}
+::ng-deep div.mat-mdc-select-panel{
+  background: #fff !important;
+}
+::ng-deep .mat-mdc-option.mdc-list-item {
+  background: #fff !important;
+  color: #444 !important;
+  font-weight: 400;
+}
+::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-select-arrow {
+  color: #ffbb00 !important;
+}
+::ng-deep .mat-mdc-option:focus.mdc-list-item{
+  background: #fffaeb !important;
+  border-left: 4px solid #fb0;
+  font-weight: 600;
+  color: #444 !important;
+  border-radius: 3px;
+}
+::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
+  background: #fffaeb !important;
+  border-left: 4px solid #fb0;
+  font-weight: 600;
+  color: #444 !important;
+  border-radius: 3px;
+}
+::ng-deep .mat-mdc-option.mdc-list-item {
+  background: var(--custom-select-option-background-color, #fff) !important;
+  color: var(--custom-select-option-font-color, #444) !important;
+  font-weight: var(--custom-select-option-font-weight, 400) !important;
+}
+::ng-deep .mat-mdc-option:focus.mdc-list-item {
+  background: var(--custom-select-option-background-color-focus, #fffaeb) !important;
+  color: var(--custom-select-option-font-color-focus, #444) !important;
+  font-weight: var(--custom-select-option-font-weight-focus, 600) !important;
+  border-left: var(--custom-select-option-border-left-focus, 4px solid #fb0) !important;
+  border-radius: var(--custom-select-option-border-radius-focus,  3px) !important;
+}
+::ng-deep .mat-mdc-option.mat-mdc-option-active.mdc-list-item {
+  background: var(--custom-select-option-background-color-focus, #fffaeb) !important;
+  color: var(--custom-select-option-font-color-focus, #444) !important;
+  font-weight: var(--custom-select-option-font-weight-focus, 600) !important;
+  border-left: var(--custom-select-option-border-left-focus, 4px solid #fb0) !important;
+  border-radius: var(--custom-select-option-border-radius-focus,  3px) !important;
+}
+::ng-deep .mat-mdc-option .mdc-list-item__primary-text {
+  font-size: var(--custom-font-size,  12px) !important;
+}
+::ng-deep .cdk-overlay-pane:not(.mat-mdc-select-panel-above) div.mat-mdc-select-panel {
+  padding: 0px !important;
+  background: #fafafa !important;
+}
+::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow {
+  color: #fb0;
+}
+::ng-deep .mat-mdc-option .mdc-list-item__primary-text {
+  font-size: 12px !important;
+}
+
+::ng-deep .mat-mdc-form-field.mat-focused.mat-primary .mat-select-arrow {
+  color: #fb0;
+}
+
+::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{
+  padding: 0px !important;
+}
+::ng-deep .mat-mdc-select-panel-above div.mat-mdc-select-panel{
+  padding: 0px !important
+}
+::ng-deep .mat-mdc-optgroup-label{
+  background: #f5f5f5;
+  color: #444;
+  font-weight: 800;
+}
+
+::ng-deep .mat-mdc-autocomplete-panel.mat-mdc-autocomplete-visible{
+  padding: 0px !important;
+  background: #fff !important;
+}
+ ::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled):not(.mat-mdc-option-multiple){
+  background: #fffaeb !important;
+  border-left: 4px solid #fb0;
+  font-weight: 600 !important;
+  color: #444 !important;
+  border-radius: 3px;
+ }
+
+ ::ng-deep .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
+    color: unset !important;
+}
+
+::ng-deep .mat-mdc-option .mat-pseudo-checkbox-minimal {
+  display: none !important;
+}
+
+::ng-deep .mat-mdc-chip-set .mdc-evolution-chip{
+  background-color: #FFF9E5 !important;
+}
+::ng-deep .mat-mdc-standard-chip.mdc-evolution-chip--with-trailing-action .mdc-evolution-chip__action--trailing{
+  color: #444 !important;
+}
+::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__text-label{
+  font-size: 12px !important;
+  font-weight: 400 !important;
+  color: #444 !important;
+}
+::ng-deep .mat-mdc-standard-chip .mdc-evolution-chip__icon--trailing{
+  height: 12px !important;
+  width: 12px !important;
+  font-size: 12px !important;
+}
+::ng-deep .multi-select .mat-mdc-form-field-type-mat-select:not(.mat-form-field-disabled) .mat-mdc-text-field-wrapper{
+  padding-right: 0px !important;
+}
+::ng-deep .mat-mdc-standard-chip{
+  --mdc-chip-outline-width: 1px !important;
+  border-radius: 18px !important;
+  --mdc-chip-container-shape-radius: 19px !important;
+  --mdc-chip-outline-color: #ffbb00 !important;
+}
+::ng-deep .multi-select .mdc-text-field--outlined .mat-mdc-form-field-infix, .mdc-text-field--no-label .mat-mdc-form-field-infix{
+  padding: 9px 0px 7px 0px;
+}
+::ng-deep .multi-select .mat-mdc-select-arrow-wrapper{
+ height: 37px;
+}
+::ng-deep .mat-mdc-chip{
+  height: 24px !important;
+}
+
+::ng-deep .mat-mdc-optgroup-label{
+  display: contents !important;
+}
+::ng-deep .multiselect-search .mat-mdc-text-field-wrapper{
+  background: #fff !important;
+}
+::ng-deep .multiselect-search .mdc-text-field__input {
+  color: #444 !important;
+}
+::ng-deep .multiselect-search .mdc-line-ripple--active{
+  opacity: 0 !important;
+  transform: none !important;
+}
+::ng-deep .mdc-line-ripple {
+  opacity: 0 !important;
+  transform: none !important;
+}
+
+::ng-deep .mdc-evolution-chip-set__chips{
+  flex-flow: unset !important;
+  overflow: scroll !important;
+  scrollbar-width: none !important;
+}
+::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked::after{
+  color: #fff !important;
+}
+::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-checked{
+  background-color: #ffbb00 !important;
+  border-radius: 4px !important;
+}
+::ng-deep .mat-pseudo-checkbox-full.mat-pseudo-checkbox-indeterminate {
+  background-color: #ffbb00 !important;
+  border-radius: 4px !important;
+}
+::ng-deep .mat-mdc-option .mat-pseudo-checkbox {
+  border: 1px solid #DADADA;
+}
+
+::ng-deep .mat-mdc-option.mdc-list-item.mat-mdc-option-multiple.mdc-list-item--selected{
+  background: #fffaeb !important;
+  border-left: 4px solid #fb0;
+  font-weight: 600;
+  color: #444 !important;
+  border-radius: 3px;
+}
+.select-container{
+  background: #fff;
+}
+ ::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder {
+  color: #8f8f8f !important;
+  font-size: 12px !important;
+  vertical-align: sub;
+}
+* {
+  font-family: "mulish" !important;
+}
+

package/src/lib/search-multi-select/search-multi-select.component.html

@@ -0,0 +1,125 @@
+<label class="field-lable" *ngIf="field() && field()?.isVisible && field().isShowLabel"
+  >{{ field()?.label
+  }}<span style="color: red" *ngIf="field() && field()?.validators?.isRequired"
+    >*</span
+  ></label
+>
+<mat-form-field
+  appearance="outline"
+  class="input-full-width full-width w-100 multi-select"
+  *ngIf="field() && field()?.isVisible"
+   [ngStyle]="{
+  '--custom-border-color': field()?.controlStyle?.borderColor ,
+  '--custom-border-width': field()?.controlStyle?.borderWidth ,
+  '--custom-border-radius': field()?.controlStyle?.borderRadius ,
+  '--custom-bg-color': field()?.controlStyle?.background ,
+  '--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,
+  '--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,
+  '--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,
+  '--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,
+  '--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,
+  '--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,
+  '--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,
+'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,
+'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,
+  }"
+>
+@if(reactiveFormControlobject()) {
+<mat-select
+    multiple
+    [id]="field()?.fieldName"
+    [attr.name]="field()?.fieldName"
+    [(value)]="selectedValues"
+    (selectionChange)="onSelectionChange()"
+    [required]="field()?.validators?.isRequired"
+    [placeholder]="field()?.placeHolder"
+    [disabled]="field()?.isDisable"
+    (openedChange)="onSelectOpened($event)"
+    [value]="inputValue"
+    [formControl]="reactiveFormControlobject()"
+  >
+    <mat-select-trigger>
+      <mat-chip-listbox>
+        @for (option of visibleChip; track option) {
+        <mat-chip [removable]="true" (removed)="removeItem(option)">
+          {{ option }}
+          <mat-icon matChipRemove>close</mat-icon>
+        </mat-chip>
+        }
+        <mat-chip *ngIf="remainingCount > 0"> +{{ remainingCount }} </mat-chip>
+      </mat-chip-listbox>
+    </mat-select-trigger>
+    <div class="select-container">
+      <mat-optgroup>
+        <mat-form-field
+          class="input-full-width full-width w-100 multiselect-search"
+        >
+          <input
+            matInput
+            #search
+            autocomplete="off"
+            placeholder="Search"
+            [(ngModel)]="searchText"
+            (ngModelChange)="filterOptions()"
+          />
+        </mat-form-field>
+      </mat-optgroup>
+      @for (option of filteredOptions; track option.label) {
+      <mat-option [value]="option.label" autoActiveFirstOption>
+        {{ option.label }}
+      </mat-option>
+      }
+    </div>
+  </mat-select>
+}@else {
+  <mat-select
+    multiple
+    [id]="field()?.fieldName"
+    [attr.name]="field()?.fieldName"
+    [(value)]="selectedValues"
+    (selectionChange)="onSelectionChange()"
+    [required]="field()?.validators?.isRequired"
+    [placeholder]="field()?.placeHolder"
+    [disabled]="field()?.isDisable"
+    (openedChange)="onSelectOpened($event)"
+    [value]="inputValue"
+  >
+    <mat-select-trigger>
+      <mat-chip-listbox>
+        @for (option of visibleChip; track option) {
+        <mat-chip [removable]="true" (removed)="removeItem(option)">
+          {{ option }}
+          <mat-icon matChipRemove>close</mat-icon>
+        </mat-chip>
+        }
+        <mat-chip *ngIf="remainingCount > 0"> +{{ remainingCount }} </mat-chip>
+      </mat-chip-listbox>
+    </mat-select-trigger>
+    <div class="select-container">
+      <mat-optgroup>
+        <mat-form-field
+          class="input-full-width full-width w-100 multiselect-search"
+        >
+          <input
+            matInput
+            #search
+            autocomplete="off"
+            placeholder="Search"
+            [(ngModel)]="searchText"
+            (ngModelChange)="filterOptions()"
+          />
+        </mat-form-field>
+      </mat-optgroup>
+      @for (option of filteredOptions; track option.label) {
+      <mat-option [value]="option.label" autoActiveFirstOption>
+        {{ option.label }}
+      </mat-option>
+      }
+    </div>
+  </mat-select>
+}
+  
+  <mat-error *ngIf="false">
+    {{ field()?.validators?.requiredMessage }}
+  </mat-error>
+</mat-form-field>

package/src/lib/search-multi-select/search-multi-select.component.ts

@@ -0,0 +1,164 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectChange, MatSelectModule } from '@angular/material/select';
+
+@Component({
+  selector: 'lib-search-multi-select',
+  standalone: true,
+  imports: [
+    MatSelectModule,
+    MatFormFieldModule,
+    CommonModule,
+    MatChipsModule,
+    MatIconModule,
+    FormsModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './search-multi-select.component.html',
+  styleUrl: './search-multi-select.component.css',
+  providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: SearchMultiSelectComponent,
+        multi: true
+      }
+    ]
+})
+export class SearchMultiSelectComponent {
+  field: any = input.required<any>();
+  selectedValues: any = [];
+  visibleChip: any = [];
+  remainingCount: any = 0;
+  searchText: any = '';
+  filteredOptions: any = [];
+  inputValue: any = null;
+  reactiveFormControlobject : any = input<any>();
+  ngOnInit() {
+    this.filteredOptions = this.field().options;
+  }
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  writeValue(value: any): void {
+    this.inputValue = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  onValueChange(newValue: any): void {
+    this.inputValue = newValue;
+    this.onChange(newValue);
+    this.onTouched();
+  }
+
+  selectionChanged(event: MatSelectChange) {
+    this.inputValue = event.value;
+    this.onChange(event.value);
+    this.onTouched();
+  }
+  setDisabledState?(isDisabled: boolean): void {}
+
+  removeItem(item: any) {
+    const maxVisible = 2;
+    this.visibleChip = this.visibleChip.filter(
+      (element: any) => element !== item
+    );
+    this.selectedValues = this.selectedValues.filter(
+      (element: any) => element !== item
+    );
+    const found = this.field().options.find((i: any) => i.label === item);
+    if (found) {
+      found.value = false;
+    }
+    this.visibleChip = this.selectedValues.slice(0, maxVisible);
+    this.remainingCount = this.selectedValues.length - maxVisible;
+  }
+  onSelectionChange() {
+    const maxVisible = 2;
+    this.visibleChip = this.selectedValues.slice(0, maxVisible);
+    this.remainingCount = this.selectedValues.length - maxVisible;
+  }
+
+  filterOptions() {
+    if (!this.searchText) {
+      this.filteredOptions = this.field().options;
+      return;
+    }
+    const filterValue = this.searchText.toLowerCase();
+    this.filteredOptions = this.field().options.filter((option: any) =>
+      option.label.toLowerCase().includes(filterValue)
+    );
+  }
+
+  onSelectOpened(opened: boolean) {
+    const css = this.field()?.controlStyle;
+    if (opened) {
+      document.body.style.setProperty(
+        '--custom-select-option-background-color',
+        css?.dropdownOptionBgColor || '#fff'
+      );
+      document.body.style.setProperty(
+        '--custom-select-option-font-color',
+        css?.dropdownOptionColor || '#444'
+      );
+      document.body.style.setProperty(
+        '--custom-select-option-font-weight',
+        css?.dropdownOptionFontWeight || '400'
+      );
+      document.body.style.setProperty(
+        '--custom-select-option-background-color-focus',
+        css?.focusDropdownOptionBgColor || '#fff'
+      );
+      document.body.style.setProperty(
+        '--custom-select-option-font-color-focus',
+        css?.focusDropdownOptionColor || '#444'
+      );
+      document.body.style.setProperty(
+        '--custom-select-option-font-weight-focus',
+        css?.focusDropdownOptionFontWeight || '400'
+      );
+      document.body.style.setProperty(
+        '--custom-select-option-border-left-focus',
+        css?.focusDropdownOptionBorderLeft || '#ffbb00'
+      );
+      document.body.style.setProperty(
+        '--custom-select-option-border-radius-focus',
+        css?.focusDropdownOptionBorderRadius || '#ffbb00'
+      );
+    } else {
+      document.body.style.removeProperty(
+        '--custom-select-option-background-color'
+      );
+      document.body.style.removeProperty('--custom-select-option-font-color');
+      document.body.style.removeProperty('--custom-select-option-font-weight');
+      document.body.style.removeProperty(
+        '--custom-select-option-background-color-focus'
+      );
+      document.body.style.removeProperty(
+        '--custom-select-option-font-color-focus'
+      );
+      document.body.style.removeProperty(
+        '--custom-select-option-font-weight-focus'
+      );
+      document.body.style.removeProperty(
+        '--custom-select-option-border-left-focus'
+      );
+      document.body.style.removeProperty(
+        '--custom-select-option-border-radius-focus'
+      );
+    }
+  }
+}