i-tech-shared-components 1.1.4 → 1.1.6

package/docs/README.md

@@ -45,11 +45,18 @@ Here shown example how can use components
 
 #### **Tables**
 ```markdown
-| Input      | Type      | Default  | Description                                                                     |
-|------------|-----------|----------|---------------------------------------------------------------------------------|
-| `type`     | `string`  | `FILLED` | Button type (e.g., FILLED, TEXT).                                               |
-| `disabled` | `boolean` | `false`  | Disables the button when true.                                                  |
-| `icon`     | `string`  | `add`    | Set a material or font icon, also you can register and submit your own SVG.     |
+| Input        | Type      | Default  | Description                                                                     |
+|--------------|-----------|----------|---------------------------------------------------------------------------------|
+| `type`       | `string`  | `FILLED` | Button type (e.g., FILLED, TEXT).                                               |
+| `disabled`   | `boolean` | `false`  | Disables the button when true.                                                  |
+| `icon`       | `string`  | `add`    | Set a material or font icon, also you can register and submit your own SVG.     |
+| `customClass`| `string`  | `   `    | Set your custom class.                                                          |
+| `submit`     | `boolean` | `false`  | For button loading state.                                                       |
+
+```markdown
+| Output       |  Type      | Default  | Description                                                                  |
+|--------------|------------|----------|------------------------------------------------------------------------------|
+| `buttonClick`| `void`     | `void`   | For output and handle button click.                                          |                                        |
 
 ```
 ### Icon Button Component

package/ng-package.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/shared-components",
+  "lib": {
+    "entryFile": "src/public-api.ts",
+    "styleIncludePaths": [
+      "src"
+    ]
+  },
+  "assets": [
+    "theme.scss",
+    "theme/**/*.scss"
+  ],
+  "allowedNonPeerDependencies": [
+    "src"
+  ]
+}

package/package.json

@@ -1,32 +1,19 @@
-{
-  "name": "i-tech-shared-components",
-  "version": "1.1.4",
-  "peerDependencies": {
-    "@angular/cdk": "^18.2.14",
-    "@angular/material": "^18.2.14",
-    "@angular/animations": "^18.0.0",
-    "@ngx-translate/core": "^15.0.0",
-    "@ngx-translate/http-loader": "^8.0.0",
-    "ngx-mask": "^16.0.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "files": [
-    "**/*"
-  ],
-  "module": "fesm2022/i-tech-shared-components.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/i-tech-shared-components.mjs",
-      "esm": "./esm2022/i-tech-shared-components.mjs",
-      "default": "./fesm2022/i-tech-shared-components.mjs"
-    }
-  }
-}
+{
+  "name": "i-tech-shared-components",
+  "version": "1.1.6",
+  "peerDependencies": {
+    "@angular/cdk": "^19.0.4",
+    "@angular/material": "^19.0.4",
+    "@angular/animations": "^19.0.5",
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
+    "ngx-mask": "^16.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "files": [
+    "**/*"
+  ]
+}

package/src/lib/components/autocomplete-select/autocomplete-select.component.html

@@ -0,0 +1,211 @@
+<div class="new-mat-autocomplete" id="mat_autocomplete"
+     [ngClass]="{
+            'mat-select-without_icon': !selectConfig.iconUrl && !selectConfig.activeStateIconUrl,
+            'mat-select-with-search': selectConfig.search,
+            'without-label': selectConfig.hideLabel,
+            'invalid_field': ngControl.control.errors && submitValue,
+            'readonly-field': selectConfig.readOnly || ngControl.control.disabled
+         }"
+     [matTooltip]="(selectConfig.hover && !ngControl.control.disabled ? ((selectConfig.hover || '') | translate) : '')"
+     [matTooltipClass]="'mat-mdc-tooltip big-td-mat-tooltip'"
+     [matTooltipPosition]="'above'"
+     *ngIf="selectConfig && ngControl">
+
+  <div class="w-100" *ngIf="!selectConfig.hideLabel">
+    <mat-label [ngClass]="{
+          'readonly-color' : selectConfig.readOnly || ngControl.control.disabled,
+          'invalid-label-color': !!(ngControl.control.errors && submitValue)
+        }">
+      {{ selectConfig.label | translate }}
+    </mat-label>
+    <span *ngIf="selectConfig.required" class="required-input"
+          [ngClass]="{'readonly-color' : ngControl.control.disabled}">*</span>
+  </div>
+
+
+  <!-- Search Input -->
+  <div class="search-input w-100"
+       (click)="$event.stopPropagation();$event.preventDefault()"
+       [ngClass]="{ hide_input_placeholder: showPlaceholder || ngControl.control.disabled }"
+       *ngIf="selectConfig.search"
+  >
+    <input autocomplete="off"
+           id="searchInput"
+           type="text"
+           [ngClass]="{'pr-25': !selectConfig.iconUrl}"
+           #searchInput
+           [disabled]="ngControl.control.disabled || selectConfig.hover"
+           [placeholder]="(ngControl.control.disabled || selectConfig.hover) ? '' : 'Search'"
+           (focusout)="inputFocusOut()"
+           (focus)="openSelection()"
+           (keydown)="$event.stopPropagation()"
+           (keyup)="getDataWithSearch(searchInput.value,$event)">
+
+    <!-- Search Icon -->
+    <span class="search-icon">
+            <i-tech-icon-button
+              class="mr-10"
+              [ngClass]="selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'"
+              *ngIf="selectConfig.iconPrefix && !showPlaceholder"
+              [iconName]="selectConfig.iconPrefix || ''"
+              [disabled]="selectConfig.readOnly || false"
+              matPrefix
+            >
+            </i-tech-icon-button>
+        </span>
+  </div>
+
+  <!-- Placeholder/Selected Value Display -->
+  <ng-container *ngIf="showPlaceholder && selectConfig.search">
+    <div class="custom-placeholder"
+         *ngIf="(!ngControl?.value && !ngControl?.value?.length) ||
+                 (selectConfig.multiple && ngControl?.value && !ngControl?.value?.length)"
+         [ngClass]="selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'"
+    >
+      {{ ((selectConfig.placeholder || '') | translate) }}
+    </div>
+    <div class="custom-placeholder custom-value ellipsis"
+         [ngClass]="{
+                'pr-42': selectConfig.iconUrl,
+                'readonly-color': selectConfig.readOnly || ngControl.control.disabled,
+                'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled)
+                }"
+         *ngIf="ngControl?.value"
+    >
+      {{ selectConfig?.multiple ? (ngControl.value | arrayToString) : showingValue }}
+    </div>
+  </ng-container>
+
+  <!-- Custom Icon -->
+  <img class="left_icon_new pointer"
+       (click)="iconClick(matSelect, searchInput)"
+       *ngIf="!selectConfig.matIconName && (selectConfig.iconUrl || selectConfig.activeStateIconUrl)"
+       [src]="'assets/images/icons/global/' + (ngControl.control?.value && selectConfig?.activeStateIconUrl ? selectConfig.activeStateIconUrl : selectConfig.iconUrl)">
+
+  <mat-form-field appearance="outline" class="w-100" (click)="selectConfig?.search ? focusSearchInput() : null">
+    <!-- Material Select -->
+    <mat-select #matSelect="matSelect"
+                [panelClass]="'autocomplete-transform-panel-location'"
+                [attr.aria-placeholder]="(selectConfig.placeholder || '') | translate"
+                [aria-label]="selectConfig.label | translate"
+                [id]="selectConfig.filtrationKey || ''"
+                (opened)="registerPanelScrollEvent(matSelect)"
+                (openedChange)="openedChange($event)"
+                [formControl]="ngControl.control"
+                [multiple]="selectConfig.multiple"
+                (selectionChange)="emitSelectionChangeAndClose($event)"
+                [errorStateMatcher]="customErrorStateMatcher"
+                [placeholder]="(selectConfig.placeholder || '') | translate"
+                [disabled]="ngControl.control.disabled"
+    >
+
+      <!-- Loading State -->
+      <mat-option *ngIf="pending" class="option_loading relative">
+        <div class="request_loading">
+          <img ngSrc="./loader.svg" alt="" height="200" width="200"/>
+        </div>
+      </mat-option>
+
+      <!-- Options -->
+      <ng-container *ngIf="data?.length && !pending">
+        <!-- Add New Option -->
+        <mat-option *ngIf="selectConfig.actions"
+                    class="pointer add_new"
+                    disabled
+                    (click)="closePanelAndUnsetFocus();addNewItemEvent()">
+          <!--                            (click)="ngControl.control.reset(null);matSelect._onBlur();closePanelAndUnsetFocus();addNewItemEvent()">-->
+          <i-tech-button
+            [type]="ButtonType.OUTLINE"
+            [fontIcon]="'add'"
+            [text]="('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) "
+            [customClass]="'w-100 mat-autocomplete-select-button'">
+          </i-tech-button>
+        </mat-option>
+
+        <!-- Regular Options -->
+        <ng-container *ngIf="!selectConfig?.changeText && data.length">
+          <mat-option *ngFor="let item of data"
+                      [value]="selectConfig.valueByKey | getValueByKeyFromObject : item"
+                      (mouseup)="optionClick(item)"
+                      (mousedown)="preventDefault($event)">
+            {{ ((selectConfig.valueToShowByKey | getValueByKeyFromObject : item : selectConfig.valueToShowByParam : selectConfig.withParamSymbol) || '') | translate }}
+          </mat-option>
+        </ng-container>
+
+        <!-- Custom Text Options -->
+        <ng-container *ngIf="selectConfig?.changeText && data.length">
+          <mat-option *ngFor="let item of data"
+                      [value]="selectConfig.valueByKey | getValueByKeyFromObject : item"
+                      (mouseup)="optionClick(item)"
+                      (mousedown)="preventDefault($event)"
+                      [disabled]="selectConfig?.changeText[item].disabled">
+            {{ selectConfig?.changeText[item].text | translate }}
+          </mat-option>
+        </ng-container>
+      </ng-container>
+
+      <!-- Empty State -->
+      <ng-container *ngIf="!pending && !data.length">
+        <mat-option disabled class="empty_selection_state">
+          <div class="actions_and_tile add_new flex_column w-100 flex_center_align_center">
+            <span>{{ 'dropdown_no_items' | translate }}</span>
+            <div class="mt-10">
+              <i-tech-button
+                *ngIf="selectConfig?.actions"
+                [type]="ButtonType.OUTLINE"
+                (buttonClick)="closePanelAndUnsetFocus();addNewItemEvent()"
+                [customClass]="'mat-autocomplete-select-button'"
+                [fontIcon]="'add'"
+                [text]="('dropdown_add_item' | translate : {INPUT_NAME: (selectConfig.label | translate)}) ">
+              </i-tech-button>
+            </div>
+          </div>
+        </mat-option>
+      </ng-container>
+    </mat-select>
+    <mat-icon *ngIf="selectConfig.iconPrefix"
+              matPrefix
+              [ngClass]="{
+                    'readonly-color' : !selectConfig['iconPrefixColor'] && (selectConfig.readOnly || ngControl.control.disabled),
+                    'default-form-icon-color' : !selectConfig['iconPrefixColor'] && !(selectConfig.readOnly || ngControl.control.disabled)
+                    }"
+              [matTooltip]="((selectConfig?.['iconPrefixTooltip'] || '') | translate)"
+    >{{ selectConfig.iconPrefix }}
+    </mat-icon>
+
+    <mat-icon *ngIf="selectConfig['iconPrefixSvg']"
+              matPrefix
+              [matTooltip]="((selectConfig?.['iconPrefixTooltip'] || '') | translate)"
+              [svgIcon]="selectConfig['iconPrefixSvg'] || ''"
+    ></mat-icon>
+
+    <i-tech-icon-button
+      *ngIf="selectConfig.search && selectConfig.clearable && !ngControl.control.disabled && !!ngControl.control.value"
+      iconName="cancel"
+      matSuffix
+      [disabled]="selectConfig.readOnly || false"
+      [ngClass]="selectConfig.readOnly || ngControl.control.disabled ? 'readonly-color' : 'default-form-icon-color'"
+      (click)="$event.stopPropagation();$event.preventDefault();ngControl.control.reset(null);matSelect._onBlur();closePanelAndUnsetFocus()"
+    >
+    </i-tech-icon-button>
+    <mat-icon
+      matSuffix
+      class="select-arrow"
+      [class.open]="matSelect.panelOpen"
+      [ngClass]="{
+            'readonly-color': selectConfig.readOnly || ngControl.control.disabled,
+            'default-form-icon-color': !(selectConfig.readOnly || ngControl.control.disabled),
+            'mt-8': !!ngControl.control.value && selectConfig.clearable
+         }"
+    >
+      keyboard_arrow_down
+    </mat-icon>
+    <!-- Error Message -->
+    <mat-error *ngIf="!!(ngControl.control.errors && submitValue)">
+      {{ ngControl.control | generateErrorMessages : selectConfig.label : selectConfig.defaultPatternKey }}
+    </mat-error>
+  </mat-form-field>
+
+  <!-- Reset Button -->
+  <i-tech-clear-value *ngIf="selectConfig.reset" (reset)="resetValue()"></i-tech-clear-value>
+</div>

package/src/lib/components/autocomplete-select/autocomplete-select.component.scss

@@ -0,0 +1,58 @@
+.left_icon_new {
+  position: absolute;
+  right: 2px;
+  top: 1px;
+}
+
+::ng-deep {
+  .request_loading {
+    width: 40px;
+    height: 40px;
+    background-color: white !important;
+    &:hover {
+      background-color: var(--primary99) !important;
+    }
+    &:focus {
+      background-color: var(--primary99) !important;
+    }
+    img {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      width: 100%;
+      height: 100%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+::ng-deep {
+  .mat-mdc-option.add_new {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+
+    .mat-pseudo-checkbox {
+      display: none !important;
+    }
+
+    .mdc-list-item__primary-text {
+      display: inline-block !important;
+      width: 100% !important;
+    }
+
+  }
+
+  .mat-mdc-option.add_new  span {
+    color: unset !important;
+    font-size: unset !important;
+    margin: unset !important;
+    opacity: 1 !important;
+  }
+}
+
+@media (min-width: 1920px) and (max-width: 2500px) {
+  .mat-autocomplete  {
+    height: 90px !important;
+  }
+}
+