-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
cf85ef5
commit 1f7e69b
Showing
6 changed files
with
239 additions
and
126 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
63 changes: 62 additions & 1 deletion
63
src/app/shared/components/input/multi-select/multi-select.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,66 @@ | ||
|
|
||
| <div [formGroup]="form"> | ||
| <p-multiSelect [optionDisabled]="disabledOption" [placeholder]="placeholder" [options]="options" styleClass="tw-z-2 tw-py-8-px tw-px-12-px" [formControlName]="formControllerName"> | ||
| <p-multiSelect | ||
| [optionDisabled]="disabledOption" | ||
| [placeholder]="placeholder" | ||
| [options]="options" | ||
| styleClass="tw-z-2 tw-py-8-px tw-px-12-px" | ||
| [ngClass]="[form.controls[formControllerName].invalid && isFieldMandatory ? 'error-box' : 'normal-box']" | ||
| [formControlName]="formControllerName" [optionLabel]="optionLabel" | ||
| [dropdownIcon]="'pi pi-chevron-down ' + brandingConfig.brandId" | ||
| [display]="displayAs" [filter]="isFilter" [filterBy]="filterBy" | ||
| (onChange)="onMultiSelectChange($event)"> | ||
| <ng-template let-value pTemplate="selectedItems" > | ||
| <div *ngIf="!isFilter"> | ||
| <div *ngIf="form.value[formControllerName]?.length>0" class="tw-flex"> | ||
| <p *ngFor="let name of value;let i = index">{{ name | titlecase | snakeCaseToSpaceCase }}<span *ngIf="i !== value?.length-1">, </span></p> | ||
| </div> | ||
| <div *ngIf="form.value[formControllerName]?.length === 0" class="tw-text-placeholder"> | ||
| {{ placeholder }} | ||
| </div> | ||
| </div> | ||
| <div *ngIf="isFilter"> | ||
| <div *ngIf="selectedValue" | ||
| class="tw-flex tw-text-12-px tw-h-22-px tw-rounded-12-px tw-text-slightly-normal-text-color tw-border-1-px tw-border-box-color tw-bg-white"> | ||
| <p class="tw-pt-2-px tw-pl-12-px tw-pr-6-px">{{ selectedValue }}</p> | ||
| <p class="tw-w-1-px tw-mr-8-px tw-bg-separator"></p> | ||
| <app-svg-icon (iconClick)="removeIconClick()" [svgSource]="'cross-small'" [width]="'12px'" [height]="'12px'" | ||
| [styleClasses]="'tw-pr-10-px tw-pt-6-px tw-text-slightly-normal-text-color'"></app-svg-icon> | ||
| </div> | ||
| <div *ngIf="selectedValue && form.value.email.length > 1" class="tw-pl-8-px"> | ||
| <p class="tw-flex tw-justify-center tw-items-center tw-p-5-px tw-h-24-px tw-w-24-px tw-bg-input-read-only-bg tw-text-12-px tw-text-text-muted tw-rounded-12-px"> | ||
| +{{ form.value.email.length - 1 }} | ||
| </p> | ||
| </div> | ||
| <div *ngIf="!selectedValue" class="tw-text-placeholder"> | ||
| {{placeholder}} | ||
| </div> | ||
| </div> | ||
| </ng-template> | ||
| <ng-template *ngIf="isFilter" pTemplate="filter" let-options="options"> | ||
| <div class="p-inputgroup tw-p-6-px"> | ||
| <div class="p-input-icon-left"> | ||
| <i> | ||
| <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'" [styleClasses]="brandingConfig.brandId === 'fyle' ? 'tw-text-search-focused-search-icon' : 'tw-text-search-focused-filled-border'" [isTextColorAllowed]="true"></app-svg-icon> | ||
| </i> | ||
| <input type="text" class="!tw-h-32-px !tw-w-288-px !tw-rounded-4-px" (keyup)="options.filter($event)" pInputText placeholder="Search by Name / Email" formControlName="search"/> | ||
| </div> | ||
| </div> | ||
| </ng-template> | ||
| <ng-template let-value let-index="index" pTemplate="item"> | ||
| <div *ngIf="!isFilter"> | ||
| <p class="tw-text-14-px">{{ value | titlecase | snakeCaseToSpaceCase }}</p> | ||
| </div> | ||
| <div *ngIf="isFilter"> | ||
| <span class="tw-text-sub-text-color tw-text-14-px"> | ||
| <span #textElement | ||
| [ngStyle]="{'white-space': 'nowrap', 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'max-width': '16rem'}" | ||
| [pTooltip]="isOverflowing(textElement) ? value.name : null" tooltipPosition="top"> | ||
| {{ value.name }} | ||
| </span> | ||
| </span> | ||
| <p class="tw-pt-4-px tw-text-text-muted tw-text-12-px">{{ value.email }}</p> | ||
| </div> | ||
| </ng-template> | ||
| </p-multiSelect> | ||
| </div> |
75 changes: 73 additions & 2 deletions
75
src/app/shared/components/input/multi-select/multi-select.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,74 @@ | ||
| :host ::ng-deep .p-multiselect-label { | ||
| @apply tw-z-1 tw-w-270-px #{!important}; | ||
| .p-multiselect { | ||
| @apply tw-h-40-px tw-flex tw-items-center lg:tw-w-300-px md:tw-w-260-px tw-border tw-border-solid tw-border-select-default-border tw-rounded-4-px #{!important}; | ||
|
|
||
| &.p-focus:not(.p-disabled) { | ||
| @apply tw-shadow-none tw-border-select-focused-border #{!important}; | ||
| } | ||
|
|
||
| &.p-focus { | ||
| @apply tw-shadow-none #{!important}; | ||
| } | ||
|
|
||
| .p-multiselect-trigger { | ||
| @apply tw-w-12-px #{!important}; | ||
| } | ||
|
|
||
| .p-multiselect-label { | ||
| @apply tw-text-select-focused-text tw-text-14-px tw-p-0 tw-z-1 tw-w-270-px #{!important}; | ||
|
|
||
| &.p-placeholder { | ||
| @apply tw-text-select-focused-placeholder-text #{!important}; | ||
| } | ||
| } | ||
|
|
||
| .p-multiselect-close { | ||
| @apply tw-hidden #{!important}; | ||
| } | ||
|
|
||
| .p-multiselect-panel { | ||
| @apply tw-w-300-px; | ||
|
|
||
| .p-multiselect-header { | ||
| @apply tw-border-none tw-p-0 #{!important}; | ||
|
|
||
| .p-checkbox { | ||
| @apply tw-hidden; | ||
| } | ||
| } | ||
|
|
||
| .p-multiselect-items { | ||
| @apply tw-p-0 #{!important}; | ||
|
|
||
| .p-multiselect-item { | ||
| @apply tw-text-14-px tw-text-dd-menu-item-default-text-color tw-px-12-px tw-py-6-px #{!important}; | ||
|
|
||
| .p-checkbox { | ||
| @apply tw-mb-0 #{!important}; | ||
| } | ||
|
|
||
| &.p-highlight { | ||
| @apply tw-text-14-px tw-text-dd-menu-item-default-text-color tw-bg-white tw-rounded-4-px #{!important}; | ||
| } | ||
|
|
||
| &:not(.p-highlight):not(.p-disabled):hover, | ||
| &:focus, | ||
| &:hover { | ||
| @apply tw-shadow-none tw-bg-dd-menu-item-hover-bg #{!important}; | ||
| } | ||
|
|
||
| &:hover { | ||
| @apply tw-shadow-none tw-bg-dd-menu-item-hover-bg tw-rounded-none #{!important}; | ||
| } | ||
| } | ||
|
|
||
| .p-multiselect-empty-message { | ||
| @apply tw-py-24-px tw-flex tw-justify-center tw-text-slightly-normal-text-color tw-text-14-px tw-italic #{!important}; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .p-multiselect-filter-container { | ||
| @apply tw-hidden; | ||
| } | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.