@piserve-tech/drop-down 1.2.108 → 1.2.110

package/README.md

@@ -1,39 +1,39 @@
-## Dropdown library
-
-To use the library in a project import the library module in the imports array of which module you are going to implement the library.
-
-To use the dropdown add the selector '<lib-dropdown></lib-dropdown>' in the position where you need the dropdown. 
-
-## Attribute List
-
-1. items - It takes an array of objects as input and iterate the array to show the options in dropdown.
-
-2. label - label specifies the attribute name that has to be shown as the options in dropdown.
-
-3. multiple - It is a boolean variable to define whether the dropdown is single selection or multi selection.By default it will be single selection.
-
-4. selectedItems - Its a two way binding attribute which is used to get the selected values from the dropdown.
-
-5. placeholder - String attribute to hold the value for showing placeholder of dropdown.
-
-6. customButtons - It takes an array of objects as input for the custom buttons. Each object contains 4 elements
-
-                    label - Specifies button name.
-
-                    icon - It should be a font awesome icon class name for showing the icon as button.
-
-                    color - For styling the button.
-
-                    action - Specifies the function that should be called when the button is clicked.
-    
-7. onScroll - Define a function that should be called when scrolled to the bottom of the dropdown.
-
-8. showCreateNew - Boolean variable to show and hide create new button.
-
-9. createNewEvent - Define a function that should be called when createNew button is clicked.
-
-10. onSearch - If apiSearch is true, through this attribute we can get the searchTerm for performing api search. 
-
-11. showBorder - A boolean variable to show and hide the border of dropdown. By default it will be true.
-
-
+## Dropdown library
+
+To use the library in a project import the library module in the imports array of which module you are going to implement the library.
+
+To use the dropdown add the selector '<lib-dropdown></lib-dropdown>' in the position where you need the dropdown. 
+
+## Attribute List
+
+1. items - It takes an array of objects as input and iterate the array to show the options in dropdown.
+
+2. label - label specifies the attribute name that has to be shown as the options in dropdown.
+
+3. multiple - It is a boolean variable to define whether the dropdown is single selection or multi selection.By default it will be single selection.
+
+4. selectedItems - Its a two way binding attribute which is used to get the selected values from the dropdown.
+
+5. placeholder - String attribute to hold the value for showing placeholder of dropdown.
+
+6. customButtons - It takes an array of objects as input for the custom buttons. Each object contains 4 elements
+
+                    label - Specifies button name.
+
+                    icon - It should be a font awesome icon class name for showing the icon as button.
+
+                    color - For styling the button.
+
+                    action - Specifies the function that should be called when the button is clicked.
+    
+7. onScroll - Define a function that should be called when scrolled to the bottom of the dropdown.
+
+8. showCreateNew - Boolean variable to show and hide create new button.
+
+9. createNewEvent - Define a function that should be called when createNew button is clicked.
+
+10. onSearch - If apiSearch is true, through this attribute we can get the searchTerm for performing api search. 
+
+11. showBorder - A boolean variable to show and hide the border of dropdown. By default it will be true.
+
+

package/assets/images/down_arrow.svg

@@ -0,0 +1,7 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Down Arrow">
+<g id="Group">
+<path id="Path" d="M6 9.13741L12 15.229L18 9.13741" stroke="#8E9AA0" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

package/assets/images/edit.svg

@@ -0,0 +1,8 @@
+<svg width="13" height="13" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<g id="Group 78">
+<path id="Path" fill-rule="evenodd" clip-rule="evenodd" d="M3.90685 12.0417H0.958008V9.09284C0.958008 8.79057 1.07803 8.50068 1.29181 8.28701L8.2861 1.29272C8.49977 1.07864 8.7898 0.958344 9.09226 0.958344C9.39471 0.958344 9.68475 1.07864 9.89841 1.29272L11.707 3.10127C11.921 3.31493 12.0413 3.60497 12.0413 3.90743C12.0413 4.20988 11.921 4.49992 11.707 4.71358L4.71268 11.7079C4.49884 11.9214 4.20905 12.0415 3.90685 12.0417Z" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Path_2" d="M7.19482 3.03896L9.96566 5.80979" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

package/assets/images/view.svg

@@ -0,0 +1,8 @@
+<svg width="15" height="13" viewBox="0 0 15 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<g id="Group_2">
+<path id="Path" d="M9.15028 4.91C10.0611 5.78825 10.0611 7.214 9.15028 8.09375C8.2395 8.972 6.76094 8.972 5.84861 8.09375C4.93783 7.2155 4.93783 5.78975 5.84861 4.91C6.76094 4.03025 8.23872 4.03025 9.15028 4.91" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Path_2" fill-rule="evenodd" clip-rule="evenodd" d="M0.5 6.5C0.5 6.00575 0.618222 5.51675 0.846889 5.066V5.066C2.02522 2.74325 4.62922 1.25 7.5 1.25C10.3708 1.25 12.9748 2.74325 14.1531 5.066V5.066C14.3818 5.51675 14.5 6.00575 14.5 6.5C14.5 6.99425 14.3818 7.48325 14.1531 7.934V7.934C12.9748 10.2567 10.3708 11.75 7.5 11.75C4.62922 11.75 2.02522 10.2567 0.846889 7.934V7.934C0.618222 7.48325 0.5 6.99425 0.5 6.5Z" stroke="#084FFF" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/dropdown",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -1,29 +1,16 @@
-{
-  "name": "@piserve-tech/drop-down",
-  "version": "1.2.108",
-  "peerDependencies": {
-    "@angular/common": "^16.2.0",
-    "@angular/core": "^16.2.0"
-  },
-  "dependencies": {
-    "tslib": "^2.3.0"
-  },
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://penta.internal.piserve.com/form-builder/library-dropdown"
-  },
-  "module": "fesm2022/piserve-tech-drop-down.mjs",
-  "typings": "index.d.ts",
-  "exports": {
-    "./package.json": {
-      "default": "./package.json"
-    },
-    ".": {
-      "types": "./index.d.ts",
-      "esm2022": "./esm2022/piserve-tech-drop-down.mjs",
-      "esm": "./esm2022/piserve-tech-drop-down.mjs",
-      "default": "./fesm2022/piserve-tech-drop-down.mjs"
-    }
-  }
-}
+{
+  "name": "@piserve-tech/drop-down",
+  "version": "1.2.110",
+  "peerDependencies": {
+    "@angular/common": "^16.2.0",
+    "@angular/core": "^16.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://penta.internal.piserve.com/form-builder/library-dropdown"
+  }
+}

package/src/lib/dropdown.component.html

@@ -0,0 +1,236 @@
+<div
+  #dropdown
+  class="dropdown"
+  [ngClass]="{
+    opened: showBorder && dropdownOpened,
+    closed: showBorder && !dropdownOpened,
+    'dropdown-disabled': disable
+  }"
+>
+  <div
+    class="dropdown-field"
+    id="division"
+    [ngClass]="{
+      opened: showBorder && dropdownOpened,
+      closed: showBorder && !dropdownOpened,
+    }"
+    (click)="openDropdown()"
+  >
+    <!-- <div *ngIf="selectedValues !== '' && !selectedItemName" class="selected">
+      {{ selectedValues }}
+    </div> -->
+    <div class="flexSection">
+      <div class="dataSection" *ngIf="!selectedItem && multiple">
+        <div class="selected selectedList">
+          <ng-container *ngFor="let selectedItem of selectedItems">
+            <div class="selected-item">
+              <img
+                *ngIf="selectedItem?.image"
+                class="multiSelected-icon-size"
+                [src]="selectedItem?.image"
+                alt="image"
+              />
+              <span>{{ selectedItem.label }}</span>
+              <span (click)="unselectItem(selectedItem)" class="close-icon"
+                >&times;</span
+              >
+            </div>
+          </ng-container>
+
+          <div class="input-field">
+            <input
+              [id]="'searchInput-' + dropdownId"
+              class="dropdown_text inline-input"
+              [(ngModel)]="searchText"
+              [placeholder]="placeholder"
+              (input)="search($event)"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="dataSection single-input" *ngIf="!multiple">
+        <div class="input-field">
+          <div class="input-with-icon">
+            <img
+              *ngIf="selectedItemImage"
+              class="selected-icon-size"
+              [src]="selectedItemImage"
+              alt="image"
+            />
+            <input
+              [id]="'searchInput-' + dropdownId"
+              class="dropdown_text inline-input"
+              [placeholder]="placeholder"
+              [(ngModel)]="selectedItemName"
+              (input)="search($event)"
+            />
+          </div>
+        </div>
+      </div>
+      <div class="iconSection">
+        <div class="dropdown-icons-container">
+          <div>
+            <span
+              (click)="unselectAll()"
+              *ngIf="selectedItems.length > 0 && multiple"
+              class="deselect"
+              >&times;
+            </span>
+          </div>
+          <div
+            class="dropdown-down-arrow"
+            [ngClass]="{ opened: dropdownOpened, closed: !dropdownOpened }"
+          >
+            <svg
+              width="1em"
+              viewBox="0 0 24 25"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="down-arrow-img"
+            >
+              <g id="Down Arrow">
+                <g id="Group">
+                  <path
+                    id="Path"
+                    d="M6 9.13741L12 15.229L18 9.13741"
+                    stroke="#8E9AA0"
+                    stroke-width="1.5"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </g>
+              </g>
+            </svg>
+          </div>
+          <div
+            class="dropdown-up-arrow"
+            [ngClass]="{ opened: dropdownOpened, closed: !dropdownOpened }"
+          >
+            <svg
+              width="1em"
+              viewBox="0 0 24 25"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              class="up-arrow-img"
+            >
+              <path
+                d="M18 15.229L12 9.1374L6 15.229"
+                stroke="#8E9AA0"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    #dropdownItems
+    class="dropdown-items"
+    *ngIf="dropdownOpened"
+    (scroll)="dropdownScroll($event)"
+  >
+    <div (click)="createNew()">
+      <a class="create_button" *ngIf="showCreateNew">Create new</a>
+    </div>
+    <ng-container *ngIf="items.length > 0; else noDataAvailable">
+      <ng-container *ngIf="multiple; else singleSelection">
+        <a
+          [ngClass]="{
+            compact: !item?.image && !item?.subLabel,
+            expanded: item?.image || item?.subLabel
+          }"
+          class="items d-block"
+          *ngFor="let item of _filteredItems"
+          (click)="selectItem(item)"
+        >
+          <div class="dropdown-item">
+            <div class="item-details">
+              <div class="content-wrapper">
+                <img
+                  *ngIf="item?.image"
+                  [src]="item?.image"
+                  alt="Item Image"
+                  class="item-image icon-size"
+                />
+                <div class="text-content">
+                  <div
+                    class="item-label"
+                    [innerHTML]="highlightMatch(item.label)"
+                  ></div>
+                  <div *ngIf="showSubLabel" class="item-sublabel">
+                    {{ item?.subLabel }}
+                  </div>
+                </div>
+              </div>
+            <div
+                class="dropdown_buttons"
+                [class.empty]="customButtons.length === 0"
+              >
+                <button
+                  *ngFor="let button of customButtons"
+                  (click)="handleButtonClick(button.action)"
+                >
+                  <i [class]="button.icon" [style.color]="button.color"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </a>
+      </ng-container>
+
+      <ng-template #singleSelection>
+        <a
+          class="items d-block"
+          [ngClass]="{
+            compact: !item?.image && !item?.subLabel,
+            expanded: item?.image || item?.subLabel
+          }"
+          *ngFor="let item of _filteredItems"
+          (click)="selectItem(item)"
+        >
+          <div class="dropdown-item">
+            <div class="item-details">
+              <div class="content-wrapper">
+                <img
+                  *ngIf="item?.image"
+                  [src]="item?.image"
+                  alt="Item Image"
+                  class="item-image icon-size"
+                />
+                <div class="text-content">
+                  <div
+                    class="item-label"
+                    [innerHTML]="highlightMatch(item.label)"
+                  ></div>
+                  <div *ngIf="showSubLabel" class="item-sublabel">
+                    {{ item?.subLabel }}
+                  </div>
+                </div>
+              </div>
+              <div
+                class="dropdown_buttons"
+                [class.empty]="customButtons.length === 0"
+              >
+                <button
+                  *ngFor="let button of customButtons"
+                  (click)="handleButtonClick(button.action)"
+                >
+                  <i [class]="button.icon" [style.color]="button.color"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </a>
+      </ng-template>
+    </ng-container>
+
+    <!-- "No data available" message if the drop down is empty -->
+    <ng-template #noDataAvailable>
+      <div class="items">No data available</div>
+    </ng-template>
+  </div>
+</div>