@piserve-tech/drop-down 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -105,11 +105,11 @@ export class DropdownComponent {
|
|
|
105
105
|
this.buttonClick.emit();
|
|
106
106
|
}
|
|
107
107
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
108
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "lib-dropdown", inputs: { multiple: "multiple", scrollable: "scrollable", selectedItems: "selectedItems", placeholder: "placeholder", label: "label", items: "items", showCreateNew: "showCreateNew", customButtons: "customButtons", showBorder: "showBorder" }, outputs: { buttonClick: "buttonClick", selectedItemsChange: "selectedItemsChange", onScroll: "onScroll", onCreateNew: "onCreateNew", onSearch: "onSearch" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownitems", first: true, predicate: ["dropdownItems"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{ 'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div *ngIf=\"!selectedItem && multiple\" class=\"selected\">\n <div\n *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\"\n class=\"selected-item\">\n {{ selectedItem[label] }}\n <span (click)=\"unselectItem(selectedItem)\"\n class=\"close-icon\">×</span>\n </div>\n <div *ngIf=\"selectedItems.length > 3\" class=\"remaining-items\">\n + {{ selectedItems.length - 3 }} more\n </div>\n </div>\n\n <div class=\"input-field\">\n <div *ngIf=\"multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n (keyup)=\"search($event)\" />\n </div>\n <div *ngIf=\"!multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"selectedItemName\"\n (keyup)=\"search($event)\" />\n </div>\n <div class=\"down-arrow\" (click)=\"openDropdown()\">\n <svg\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"down-arrow-img\"\n [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <g id=\"Down Arrow\">\n <g id=\"Group\">\n <path\n id=\"Path\"\n d=\"M6 9.13741L12 15.229L18 9.13741\"\n stroke=\"#8E9AA0\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n </g>\n </svg>\n </div>\n <div class=\"up-arrow\" (click)=\"openDropdown()\">\n <svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\" [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span\n (click)=\"unselectAll()\"\n *ngIf=\"selectedItems.length > 0 || selectedItemName != ''\"\n class=\"deselect\">×</span>\n </div>\n </div>\n\n <div\n #dropdownItems\n class=\"dropdown-items\"\n *ngIf=\"dropdownOpened\"\n (scroll)=\"onDropdownScroll($event)\">\n <a class=\"create_button\" (click)=\"createNew()\" *ngIf=\"showCreateNew\">Create\n new</a>\n\n <ng-container *ngIf=\"multiple; else singleSelection\">\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-container>\n\n <ng-template #singleSelection>\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-template>\n </div>\n</div>\n", styles: [".dropdown{background:#fff;border-radius:6px}@media only screen and (min-width: 576px){.dropdown{max-width:225px}}@media only screen and (min-width: 992px){.dropdown{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown{max-width:344px}}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-field{max-width:225px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field{max-width:344px}}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:3px;border-radius:5px}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:3px}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:10px;outline:none;box-sizing:border-box}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:41px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:46px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:51px}}.dropdown .dropdown-field .input-field .down-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .down-arrow-img.opened{display:none}.dropdown .dropdown-field .input-field .down-arrow-img.closed{display:block}.dropdown .dropdown-field .input-field .up-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .up-arrow-img.closed{display:none}.dropdown .dropdown-field .input-field .deselect{position:absolute;top:50%;right:40px;transform:translateY(-50%)}.dropdown .dropdown-field.closed{border:2px solid #D8D8D8}.dropdown .dropdown-field.opened{border-bottom:2px solid #D8D8D8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;
|
|
108
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "lib-dropdown", inputs: { multiple: "multiple", scrollable: "scrollable", selectedItems: "selectedItems", placeholder: "placeholder", label: "label", items: "items", showCreateNew: "showCreateNew", customButtons: "customButtons", showBorder: "showBorder" }, outputs: { buttonClick: "buttonClick", selectedItemsChange: "selectedItemsChange", onScroll: "onScroll", onCreateNew: "onCreateNew", onSearch: "onSearch" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownitems", first: true, predicate: ["dropdownItems"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{ 'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div *ngIf=\"!selectedItem && multiple\" class=\"selected\">\n <div\n *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\"\n class=\"selected-item\">\n {{ selectedItem[label] }}\n <span (click)=\"unselectItem(selectedItem)\"\n class=\"close-icon\">×</span>\n </div>\n <div *ngIf=\"selectedItems.length > 3\" class=\"remaining-items\">\n + {{ selectedItems.length - 3 }} more\n </div>\n </div>\n\n <div class=\"input-field\">\n <div *ngIf=\"multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n (keyup)=\"search($event)\" />\n </div>\n <div *ngIf=\"!multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"selectedItemName\"\n (keyup)=\"search($event)\" />\n </div>\n <div class=\"down-arrow\" (click)=\"openDropdown()\">\n <svg\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"down-arrow-img\"\n [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <g id=\"Down Arrow\">\n <g id=\"Group\">\n <path\n id=\"Path\"\n d=\"M6 9.13741L12 15.229L18 9.13741\"\n stroke=\"#8E9AA0\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n </g>\n </svg>\n </div>\n <div class=\"up-arrow\" (click)=\"openDropdown()\">\n <svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\" [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span\n (click)=\"unselectAll()\"\n *ngIf=\"selectedItems.length > 0 || selectedItemName != ''\"\n class=\"deselect\">×</span>\n </div>\n </div>\n\n <div\n #dropdownItems\n class=\"dropdown-items\"\n *ngIf=\"dropdownOpened\"\n (scroll)=\"onDropdownScroll($event)\">\n <a class=\"create_button\" (click)=\"createNew()\" *ngIf=\"showCreateNew\">Create\n new</a>\n\n <ng-container *ngIf=\"multiple; else singleSelection\">\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-container>\n\n <ng-template #singleSelection>\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-template>\n </div>\n</div>\n", styles: [".dropdown{background:#fff;border-radius:6px}@media only screen and (min-width: 576px){.dropdown{max-width:225px}}@media only screen and (min-width: 992px){.dropdown{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown{max-width:344px}}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-field{max-width:225px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field{max-width:344px}}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:3px;border-radius:5px}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:3px}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:10px;outline:none;box-sizing:border-box}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:41px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:46px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:51px}}.dropdown .dropdown-field .input-field .down-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .down-arrow-img.opened{display:none}.dropdown .dropdown-field .input-field .down-arrow-img.closed{display:block}.dropdown .dropdown-field .input-field .up-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .up-arrow-img.closed{display:none}.dropdown .dropdown-field .input-field .deselect{position:absolute;top:50%;right:40px;transform:translateY(-50%)}.dropdown .dropdown-field.closed{border:2px solid #D8D8D8}.dropdown .dropdown-field.opened{border-bottom:2px solid #D8D8D8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;padding:5px}}@media only screen and (min-width: 576px){.dropdown .dropdown-items{max-height:150px;padding:8px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items{max-height:150px;padding:11px}}@media only screen and (min-width: 1441px){.dropdown .dropdown-items{max-height:200px;padding:15px}}.dropdown .dropdown-items .create_button{text-decoration:none;line-height:41px;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .create_button{max-width:200px;padding-left:20px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .create_button{max-width:260px;padding-left:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .create_button{max-width:344px;padding-left:20px}}.dropdown .dropdown-items .items{text-decoration:none;color:inherit;line-height:41px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .items{min-width:160px;padding-left:20px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .items{min-width:220px;padding-left:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .items{max-width:300px;padding-left:20px}}.dropdown .dropdown-items .items:hover{background:#cdd0d1;border-radius:6px}.dropdown .dropdown-items .items:hover button{visibility:visible}.dropdown .dropdown-items .items .dropdown_buttons{display:inline;position:absolute;right:5%}.dropdown .dropdown-items .items button{border:0;background:transparent;visibility:hidden}.dropdown.opened{border:2px #D8D8D8 solid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
109
109
|
}
|
|
110
110
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
111
111
|
type: Component,
|
|
112
|
-
args: [{ selector: 'lib-dropdown', template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{ 'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div *ngIf=\"!selectedItem && multiple\" class=\"selected\">\n <div\n *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\"\n class=\"selected-item\">\n {{ selectedItem[label] }}\n <span (click)=\"unselectItem(selectedItem)\"\n class=\"close-icon\">×</span>\n </div>\n <div *ngIf=\"selectedItems.length > 3\" class=\"remaining-items\">\n + {{ selectedItems.length - 3 }} more\n </div>\n </div>\n\n <div class=\"input-field\">\n <div *ngIf=\"multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n (keyup)=\"search($event)\" />\n </div>\n <div *ngIf=\"!multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"selectedItemName\"\n (keyup)=\"search($event)\" />\n </div>\n <div class=\"down-arrow\" (click)=\"openDropdown()\">\n <svg\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"down-arrow-img\"\n [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <g id=\"Down Arrow\">\n <g id=\"Group\">\n <path\n id=\"Path\"\n d=\"M6 9.13741L12 15.229L18 9.13741\"\n stroke=\"#8E9AA0\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n </g>\n </svg>\n </div>\n <div class=\"up-arrow\" (click)=\"openDropdown()\">\n <svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\" [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span\n (click)=\"unselectAll()\"\n *ngIf=\"selectedItems.length > 0 || selectedItemName != ''\"\n class=\"deselect\">×</span>\n </div>\n </div>\n\n <div\n #dropdownItems\n class=\"dropdown-items\"\n *ngIf=\"dropdownOpened\"\n (scroll)=\"onDropdownScroll($event)\">\n <a class=\"create_button\" (click)=\"createNew()\" *ngIf=\"showCreateNew\">Create\n new</a>\n\n <ng-container *ngIf=\"multiple; else singleSelection\">\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-container>\n\n <ng-template #singleSelection>\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-template>\n </div>\n</div>\n", styles: [".dropdown{background:#fff;border-radius:6px}@media only screen and (min-width: 576px){.dropdown{max-width:225px}}@media only screen and (min-width: 992px){.dropdown{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown{max-width:344px}}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-field{max-width:225px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field{max-width:344px}}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:3px;border-radius:5px}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:3px}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:10px;outline:none;box-sizing:border-box}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:41px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:46px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:51px}}.dropdown .dropdown-field .input-field .down-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .down-arrow-img.opened{display:none}.dropdown .dropdown-field .input-field .down-arrow-img.closed{display:block}.dropdown .dropdown-field .input-field .up-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .up-arrow-img.closed{display:none}.dropdown .dropdown-field .input-field .deselect{position:absolute;top:50%;right:40px;transform:translateY(-50%)}.dropdown .dropdown-field.closed{border:2px solid #D8D8D8}.dropdown .dropdown-field.opened{border-bottom:2px solid #D8D8D8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;
|
|
112
|
+
args: [{ selector: 'lib-dropdown', template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{ 'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div *ngIf=\"!selectedItem && multiple\" class=\"selected\">\n <div\n *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\"\n class=\"selected-item\">\n {{ selectedItem[label] }}\n <span (click)=\"unselectItem(selectedItem)\"\n class=\"close-icon\">×</span>\n </div>\n <div *ngIf=\"selectedItems.length > 3\" class=\"remaining-items\">\n + {{ selectedItems.length - 3 }} more\n </div>\n </div>\n\n <div class=\"input-field\">\n <div *ngIf=\"multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n (keyup)=\"search($event)\" />\n </div>\n <div *ngIf=\"!multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"selectedItemName\"\n (keyup)=\"search($event)\" />\n </div>\n <div class=\"down-arrow\" (click)=\"openDropdown()\">\n <svg\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"down-arrow-img\"\n [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <g id=\"Down Arrow\">\n <g id=\"Group\">\n <path\n id=\"Path\"\n d=\"M6 9.13741L12 15.229L18 9.13741\"\n stroke=\"#8E9AA0\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n </g>\n </svg>\n </div>\n <div class=\"up-arrow\" (click)=\"openDropdown()\">\n <svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\" [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span\n (click)=\"unselectAll()\"\n *ngIf=\"selectedItems.length > 0 || selectedItemName != ''\"\n class=\"deselect\">×</span>\n </div>\n </div>\n\n <div\n #dropdownItems\n class=\"dropdown-items\"\n *ngIf=\"dropdownOpened\"\n (scroll)=\"onDropdownScroll($event)\">\n <a class=\"create_button\" (click)=\"createNew()\" *ngIf=\"showCreateNew\">Create\n new</a>\n\n <ng-container *ngIf=\"multiple; else singleSelection\">\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-container>\n\n <ng-template #singleSelection>\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-template>\n </div>\n</div>\n", styles: [".dropdown{background:#fff;border-radius:6px}@media only screen and (min-width: 576px){.dropdown{max-width:225px}}@media only screen and (min-width: 992px){.dropdown{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown{max-width:344px}}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-field{max-width:225px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field{max-width:344px}}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:3px;border-radius:5px}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:3px}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:10px;outline:none;box-sizing:border-box}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:41px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:46px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:51px}}.dropdown .dropdown-field .input-field .down-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .down-arrow-img.opened{display:none}.dropdown .dropdown-field .input-field .down-arrow-img.closed{display:block}.dropdown .dropdown-field .input-field .up-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .up-arrow-img.closed{display:none}.dropdown .dropdown-field .input-field .deselect{position:absolute;top:50%;right:40px;transform:translateY(-50%)}.dropdown .dropdown-field.closed{border:2px solid #D8D8D8}.dropdown .dropdown-field.opened{border-bottom:2px solid #D8D8D8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;padding:5px}}@media only screen and (min-width: 576px){.dropdown .dropdown-items{max-height:150px;padding:8px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items{max-height:150px;padding:11px}}@media only screen and (min-width: 1441px){.dropdown .dropdown-items{max-height:200px;padding:15px}}.dropdown .dropdown-items .create_button{text-decoration:none;line-height:41px;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .create_button{max-width:200px;padding-left:20px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .create_button{max-width:260px;padding-left:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .create_button{max-width:344px;padding-left:20px}}.dropdown .dropdown-items .items{text-decoration:none;color:inherit;line-height:41px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .items{min-width:160px;padding-left:20px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .items{min-width:220px;padding-left:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .items{max-width:300px;padding-left:20px}}.dropdown .dropdown-items .items:hover{background:#cdd0d1;border-radius:6px}.dropdown .dropdown-items .items:hover button{visibility:visible}.dropdown .dropdown-items .items .dropdown_buttons{display:inline;position:absolute;right:5%}.dropdown .dropdown-items .items button{border:0;background:transparent;visibility:hidden}.dropdown.opened{border:2px #D8D8D8 solid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}\n"] }]
|
|
113
113
|
}], propDecorators: { multiple: [{
|
|
114
114
|
type: Input
|
|
115
115
|
}], scrollable: [{
|
|
@@ -120,11 +120,11 @@ class DropdownComponent {
|
|
|
120
120
|
this.buttonClick.emit();
|
|
121
121
|
}
|
|
122
122
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
123
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "lib-dropdown", inputs: { multiple: "multiple", scrollable: "scrollable", selectedItems: "selectedItems", placeholder: "placeholder", label: "label", items: "items", showCreateNew: "showCreateNew", customButtons: "customButtons", showBorder: "showBorder" }, outputs: { buttonClick: "buttonClick", selectedItemsChange: "selectedItemsChange", onScroll: "onScroll", onCreateNew: "onCreateNew", onSearch: "onSearch" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownitems", first: true, predicate: ["dropdownItems"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{ 'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div *ngIf=\"!selectedItem && multiple\" class=\"selected\">\n <div\n *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\"\n class=\"selected-item\">\n {{ selectedItem[label] }}\n <span (click)=\"unselectItem(selectedItem)\"\n class=\"close-icon\">×</span>\n </div>\n <div *ngIf=\"selectedItems.length > 3\" class=\"remaining-items\">\n + {{ selectedItems.length - 3 }} more\n </div>\n </div>\n\n <div class=\"input-field\">\n <div *ngIf=\"multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n (keyup)=\"search($event)\" />\n </div>\n <div *ngIf=\"!multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"selectedItemName\"\n (keyup)=\"search($event)\" />\n </div>\n <div class=\"down-arrow\" (click)=\"openDropdown()\">\n <svg\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"down-arrow-img\"\n [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <g id=\"Down Arrow\">\n <g id=\"Group\">\n <path\n id=\"Path\"\n d=\"M6 9.13741L12 15.229L18 9.13741\"\n stroke=\"#8E9AA0\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n </g>\n </svg>\n </div>\n <div class=\"up-arrow\" (click)=\"openDropdown()\">\n <svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\" [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span\n (click)=\"unselectAll()\"\n *ngIf=\"selectedItems.length > 0 || selectedItemName != ''\"\n class=\"deselect\">×</span>\n </div>\n </div>\n\n <div\n #dropdownItems\n class=\"dropdown-items\"\n *ngIf=\"dropdownOpened\"\n (scroll)=\"onDropdownScroll($event)\">\n <a class=\"create_button\" (click)=\"createNew()\" *ngIf=\"showCreateNew\">Create\n new</a>\n\n <ng-container *ngIf=\"multiple; else singleSelection\">\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-container>\n\n <ng-template #singleSelection>\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-template>\n </div>\n</div>\n", styles: [".dropdown{background:#fff;border-radius:6px}@media only screen and (min-width: 576px){.dropdown{max-width:225px}}@media only screen and (min-width: 992px){.dropdown{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown{max-width:344px}}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-field{max-width:225px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field{max-width:344px}}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:3px;border-radius:5px}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:3px}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:10px;outline:none;box-sizing:border-box}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:41px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:46px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:51px}}.dropdown .dropdown-field .input-field .down-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .down-arrow-img.opened{display:none}.dropdown .dropdown-field .input-field .down-arrow-img.closed{display:block}.dropdown .dropdown-field .input-field .up-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .up-arrow-img.closed{display:none}.dropdown .dropdown-field .input-field .deselect{position:absolute;top:50%;right:40px;transform:translateY(-50%)}.dropdown .dropdown-field.closed{border:2px solid #D8D8D8}.dropdown .dropdown-field.opened{border-bottom:2px solid #D8D8D8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;
|
|
123
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownComponent, selector: "lib-dropdown", inputs: { multiple: "multiple", scrollable: "scrollable", selectedItems: "selectedItems", placeholder: "placeholder", label: "label", items: "items", showCreateNew: "showCreateNew", customButtons: "customButtons", showBorder: "showBorder" }, outputs: { buttonClick: "buttonClick", selectedItemsChange: "selectedItemsChange", onScroll: "onScroll", onCreateNew: "onCreateNew", onSearch: "onSearch" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownitems", first: true, predicate: ["dropdownItems"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{ 'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div *ngIf=\"!selectedItem && multiple\" class=\"selected\">\n <div\n *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\"\n class=\"selected-item\">\n {{ selectedItem[label] }}\n <span (click)=\"unselectItem(selectedItem)\"\n class=\"close-icon\">×</span>\n </div>\n <div *ngIf=\"selectedItems.length > 3\" class=\"remaining-items\">\n + {{ selectedItems.length - 3 }} more\n </div>\n </div>\n\n <div class=\"input-field\">\n <div *ngIf=\"multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n (keyup)=\"search($event)\" />\n </div>\n <div *ngIf=\"!multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"selectedItemName\"\n (keyup)=\"search($event)\" />\n </div>\n <div class=\"down-arrow\" (click)=\"openDropdown()\">\n <svg\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"down-arrow-img\"\n [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <g id=\"Down Arrow\">\n <g id=\"Group\">\n <path\n id=\"Path\"\n d=\"M6 9.13741L12 15.229L18 9.13741\"\n stroke=\"#8E9AA0\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n </g>\n </svg>\n </div>\n <div class=\"up-arrow\" (click)=\"openDropdown()\">\n <svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\" [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span\n (click)=\"unselectAll()\"\n *ngIf=\"selectedItems.length > 0 || selectedItemName != ''\"\n class=\"deselect\">×</span>\n </div>\n </div>\n\n <div\n #dropdownItems\n class=\"dropdown-items\"\n *ngIf=\"dropdownOpened\"\n (scroll)=\"onDropdownScroll($event)\">\n <a class=\"create_button\" (click)=\"createNew()\" *ngIf=\"showCreateNew\">Create\n new</a>\n\n <ng-container *ngIf=\"multiple; else singleSelection\">\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-container>\n\n <ng-template #singleSelection>\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-template>\n </div>\n</div>\n", styles: [".dropdown{background:#fff;border-radius:6px}@media only screen and (min-width: 576px){.dropdown{max-width:225px}}@media only screen and (min-width: 992px){.dropdown{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown{max-width:344px}}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-field{max-width:225px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field{max-width:344px}}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:3px;border-radius:5px}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:3px}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:10px;outline:none;box-sizing:border-box}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:41px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:46px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:51px}}.dropdown .dropdown-field .input-field .down-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .down-arrow-img.opened{display:none}.dropdown .dropdown-field .input-field .down-arrow-img.closed{display:block}.dropdown .dropdown-field .input-field .up-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .up-arrow-img.closed{display:none}.dropdown .dropdown-field .input-field .deselect{position:absolute;top:50%;right:40px;transform:translateY(-50%)}.dropdown .dropdown-field.closed{border:2px solid #D8D8D8}.dropdown .dropdown-field.opened{border-bottom:2px solid #D8D8D8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;padding:5px}}@media only screen and (min-width: 576px){.dropdown .dropdown-items{max-height:150px;padding:8px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items{max-height:150px;padding:11px}}@media only screen and (min-width: 1441px){.dropdown .dropdown-items{max-height:200px;padding:15px}}.dropdown .dropdown-items .create_button{text-decoration:none;line-height:41px;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .create_button{max-width:200px;padding-left:20px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .create_button{max-width:260px;padding-left:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .create_button{max-width:344px;padding-left:20px}}.dropdown .dropdown-items .items{text-decoration:none;color:inherit;line-height:41px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .items{min-width:160px;padding-left:20px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .items{min-width:220px;padding-left:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .items{max-width:300px;padding-left:20px}}.dropdown .dropdown-items .items:hover{background:#cdd0d1;border-radius:6px}.dropdown .dropdown-items .items:hover button{visibility:visible}.dropdown .dropdown-items .items .dropdown_buttons{display:inline;position:absolute;right:5%}.dropdown .dropdown-items .items button{border:0;background:transparent;visibility:hidden}.dropdown.opened{border:2px #D8D8D8 solid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}\n"], dependencies: [{ kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
124
124
|
}
|
|
125
125
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownComponent, decorators: [{
|
|
126
126
|
type: Component,
|
|
127
|
-
args: [{ selector: 'lib-dropdown', template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{ 'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div *ngIf=\"!selectedItem && multiple\" class=\"selected\">\n <div\n *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\"\n class=\"selected-item\">\n {{ selectedItem[label] }}\n <span (click)=\"unselectItem(selectedItem)\"\n class=\"close-icon\">×</span>\n </div>\n <div *ngIf=\"selectedItems.length > 3\" class=\"remaining-items\">\n + {{ selectedItems.length - 3 }} more\n </div>\n </div>\n\n <div class=\"input-field\">\n <div *ngIf=\"multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n (keyup)=\"search($event)\" />\n </div>\n <div *ngIf=\"!multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"selectedItemName\"\n (keyup)=\"search($event)\" />\n </div>\n <div class=\"down-arrow\" (click)=\"openDropdown()\">\n <svg\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"down-arrow-img\"\n [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <g id=\"Down Arrow\">\n <g id=\"Group\">\n <path\n id=\"Path\"\n d=\"M6 9.13741L12 15.229L18 9.13741\"\n stroke=\"#8E9AA0\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n </g>\n </svg>\n </div>\n <div class=\"up-arrow\" (click)=\"openDropdown()\">\n <svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\" [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span\n (click)=\"unselectAll()\"\n *ngIf=\"selectedItems.length > 0 || selectedItemName != ''\"\n class=\"deselect\">×</span>\n </div>\n </div>\n\n <div\n #dropdownItems\n class=\"dropdown-items\"\n *ngIf=\"dropdownOpened\"\n (scroll)=\"onDropdownScroll($event)\">\n <a class=\"create_button\" (click)=\"createNew()\" *ngIf=\"showCreateNew\">Create\n new</a>\n\n <ng-container *ngIf=\"multiple; else singleSelection\">\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-container>\n\n <ng-template #singleSelection>\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-template>\n </div>\n</div>\n", styles: [".dropdown{background:#fff;border-radius:6px}@media only screen and (min-width: 576px){.dropdown{max-width:225px}}@media only screen and (min-width: 992px){.dropdown{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown{max-width:344px}}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-field{max-width:225px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field{max-width:344px}}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:3px;border-radius:5px}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:3px}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:10px;outline:none;box-sizing:border-box}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:41px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:46px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:51px}}.dropdown .dropdown-field .input-field .down-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .down-arrow-img.opened{display:none}.dropdown .dropdown-field .input-field .down-arrow-img.closed{display:block}.dropdown .dropdown-field .input-field .up-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .up-arrow-img.closed{display:none}.dropdown .dropdown-field .input-field .deselect{position:absolute;top:50%;right:40px;transform:translateY(-50%)}.dropdown .dropdown-field.closed{border:2px solid #D8D8D8}.dropdown .dropdown-field.opened{border-bottom:2px solid #D8D8D8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;
|
|
127
|
+
args: [{ selector: 'lib-dropdown', template: "<div #dropdown class=\"dropdown\" [ngClass]=\"{ 'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div *ngIf=\"!selectedItem && multiple\" class=\"selected\">\n <div\n *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\"\n class=\"selected-item\">\n {{ selectedItem[label] }}\n <span (click)=\"unselectItem(selectedItem)\"\n class=\"close-icon\">×</span>\n </div>\n <div *ngIf=\"selectedItems.length > 3\" class=\"remaining-items\">\n + {{ selectedItems.length - 3 }} more\n </div>\n </div>\n\n <div class=\"input-field\">\n <div *ngIf=\"multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n (keyup)=\"search($event)\" />\n </div>\n <div *ngIf=\"!multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"selectedItemName\"\n (keyup)=\"search($event)\" />\n </div>\n <div class=\"down-arrow\" (click)=\"openDropdown()\">\n <svg\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"down-arrow-img\"\n [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <g id=\"Down Arrow\">\n <g id=\"Group\">\n <path\n id=\"Path\"\n d=\"M6 9.13741L12 15.229L18 9.13741\"\n stroke=\"#8E9AA0\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n </g>\n </svg>\n </div>\n <div class=\"up-arrow\" (click)=\"openDropdown()\">\n <svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\" [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span\n (click)=\"unselectAll()\"\n *ngIf=\"selectedItems.length > 0 || selectedItemName != ''\"\n class=\"deselect\">×</span>\n </div>\n </div>\n\n <div\n #dropdownItems\n class=\"dropdown-items\"\n *ngIf=\"dropdownOpened\"\n (scroll)=\"onDropdownScroll($event)\">\n <a class=\"create_button\" (click)=\"createNew()\" *ngIf=\"showCreateNew\">Create\n new</a>\n\n <ng-container *ngIf=\"multiple; else singleSelection\">\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-container>\n\n <ng-template #singleSelection>\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-template>\n </div>\n</div>\n", styles: [".dropdown{background:#fff;border-radius:6px}@media only screen and (min-width: 576px){.dropdown{max-width:225px}}@media only screen and (min-width: 992px){.dropdown{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown{max-width:344px}}.dropdown .dropdown-field{background:#fff;border-radius:6px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-field{max-width:225px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field{max-width:260px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field{max-width:344px}}.dropdown .dropdown-field .selected{margin:5px}.dropdown .dropdown-field .selected .selected-item{background:#cdd0d1;display:inline;margin:5px;padding:3px;border-radius:5px}.dropdown .dropdown-field .selected .remaining-items{margin:5px;padding:3px}.dropdown .dropdown-field .input-field .dropdown_text{width:100%;border:none;padding:10px;outline:none;box-sizing:border-box}@media only screen and (min-width: 576px){.dropdown .dropdown-field .input-field .dropdown_text{height:41px}}@media only screen and (min-width: 992px){.dropdown .dropdown-field .input-field .dropdown_text{height:46px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-field .input-field .dropdown_text{height:51px}}.dropdown .dropdown-field .input-field .down-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .down-arrow-img.opened{display:none}.dropdown .dropdown-field .input-field .down-arrow-img.closed{display:block}.dropdown .dropdown-field .input-field .up-arrow-img{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}.dropdown .dropdown-field .input-field .up-arrow-img.closed{display:none}.dropdown .dropdown-field .input-field .deselect{position:absolute;top:50%;right:40px;transform:translateY(-50%)}.dropdown .dropdown-field.closed{border:2px solid #D8D8D8}.dropdown .dropdown-field.opened{border-bottom:2px solid #D8D8D8}.dropdown .dropdown-items{overflow-y:auto;overflow-x:hidden}@media only screen and (min-width: 276px){.dropdown .dropdown-items{max-height:150px;padding:5px}}@media only screen and (min-width: 576px){.dropdown .dropdown-items{max-height:150px;padding:8px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items{max-height:150px;padding:11px}}@media only screen and (min-width: 1441px){.dropdown .dropdown-items{max-height:200px;padding:15px}}.dropdown .dropdown-items .create_button{text-decoration:none;line-height:41px;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .create_button{max-width:200px;padding-left:20px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .create_button{max-width:260px;padding-left:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .create_button{max-width:344px;padding-left:20px}}.dropdown .dropdown-items .items{text-decoration:none;color:inherit;line-height:41px;position:relative;cursor:pointer}@media only screen and (min-width: 576px){.dropdown .dropdown-items .items{min-width:160px;padding-left:20px}}@media only screen and (min-width: 992px){.dropdown .dropdown-items .items{min-width:220px;padding-left:20px}}@media only screen and (min-width: 1200px){.dropdown .dropdown-items .items{max-width:300px;padding-left:20px}}.dropdown .dropdown-items .items:hover{background:#cdd0d1;border-radius:6px}.dropdown .dropdown-items .items:hover button{visibility:visible}.dropdown .dropdown-items .items .dropdown_buttons{display:inline;position:absolute;right:5%}.dropdown .dropdown-items .items button{border:0;background:transparent;visibility:hidden}.dropdown.opened{border:2px #D8D8D8 solid}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background-color:transparent}::-webkit-scrollbar-thumb{background-color:#b2b2b2;border-radius:6px}\n"] }]
|
|
128
128
|
}], propDecorators: { multiple: [{
|
|
129
129
|
type: Input
|
|
130
130
|
}], scrollable: [{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"piserve-tech-drop-down.mjs","sources":["../../../projects/dropdown/src/lib/dropdown.service.ts","../../../projects/dropdown/src/lib/dropdown.component.ts","../../../projects/dropdown/src/lib/dropdown.component.html","../../../projects/dropdown/src/lib/dropdown.module.ts","../../../projects/dropdown/src/public-api.ts","../../../projects/dropdown/src/piserve-tech-drop-down.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class DropdownService {\n\n constructor() { }\n}\n","import { Component,ElementRef,EventEmitter,HostListener,Input,OnInit,Output,ViewChild } from '@angular/core';\n\n@Component({\n selector: 'lib-dropdown',\n templateUrl: './dropdown.component.html',\n styleUrls: ['./dropdown.component.scss'],\n})\nexport class DropdownComponent implements OnInit {\n @Input() multiple!: boolean;\n @Input() scrollable!: boolean;\n @Input() selectedItems: any[] = [];\n @Input() placeholder: String = '';\n @Input() label: string = '';\n @Input() items: any[] = [];\n @Input() showCreateNew!: boolean;\n @Input() customButtons: { label: string; icon: string; color:string ;action: () => void }[] = [];\n @Input() showBorder: boolean = true;\n @Output() buttonClick: EventEmitter<Event> = new EventEmitter<Event>();\n @Output() selectedItemsChange: EventEmitter<any[]> = new EventEmitter<\n any[]\n >();\n @Output() onScroll: EventEmitter<Event> = new EventEmitter<Event>();\n @Output() onCreateNew: EventEmitter<Event> = new EventEmitter<Event>();\n @Output() onSearch: EventEmitter<string> = new EventEmitter<string>();\n\n dropdownOpened: boolean = false;\n selectedItem: any;\n selectedItemName: string = '';\n originalItems: any[] = [];\n searchTerm:string='';\n\n ngOnInit(): void {\n this.originalItems = this.items.slice(); \n if (this.selectedItems && this.selectedItems.length > 0) {\n this.selectItem(this.selectedItems[0]);\n }\n }\n\n openDropdown() {\n this.dropdownOpened = !this.dropdownOpened;\n }\n\n @ViewChild('dropdownItems') dropdownitems!: ElementRef;\n\n onDropdownScroll(event: any): void {\n if (this.onScroll) {\n const dropdownElement: HTMLElement = this.dropdownitems.nativeElement;\n const scrollPosition =\n dropdownElement.scrollTop + dropdownElement.clientHeight;\n const totalHeight = dropdownElement.scrollHeight;\n\n if (scrollPosition >= totalHeight) {\n this.onScroll.emit();\n }\n }\n }\n\n selectItem(item: any) {\n if (this.multiple) {\n if (!this.selectedItems.includes(item)) {\n this.selectedItems.push(item);\n this.selectedItemsChange.emit(this.selectedItems);\n } else {\n this.selectedItems = this.selectedItems.filter(\n (selected: any) => selected !== item\n );\n this.selectedItemsChange.emit(this.selectedItems);\n }\n } else {\n this.selectedItems[0] = item;\n this.selectedItemName = this.selectedItems[0][this.label];\n this.dropdownOpened = false;\n this.items = this.originalItems.slice();\n this.selectedItemsChange.emit(this.selectedItems);\n }\n }\n\n unselectItem(item: any): void {\n this.selectedItems = this.selectedItems.filter(\n (selected: any) => selected !== item\n );\n this.selectedItemsChange.emit(this.selectedItems);\n }\n\n unselectAll() {\n this.selectedItems = [];\n this.selectedItemName = '';\n this.selectedItemsChange.emit(this.selectedItems);\n this.items = this.originalItems.slice();\n }\n\n @ViewChild('dropdown') dropdown!: ElementRef;\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: Event): void {\n const isClickInsideDropdown = this.dropdown.nativeElement.contains(\n event.target\n );\n if (!isClickInsideDropdown) {\n this.dropdownOpened = false;\n }\n }\n\n createNew() {\n this.onCreateNew.emit();\n }\n\n search(event: any): void {\n const keyCode = event.keyCode; \n \n if (keyCode === 8 && !this.multiple) {\n this.selectedItems = [];\n this.selectedItemName = '';\n this.selectedItemsChange.emit(this.selectedItems);\n this.items = this.originalItems.slice();\n } else {\n\n this.searchTerm = event.target.value.toLowerCase();\n\n if (!this.onSearch.observers.length) { \n if (this.searchTerm.trim() === '') {\n this.items = this.originalItems.slice();\n } else {\n this.items = this.originalItems.filter((item) =>\n item[this.label].toLowerCase().startsWith(this.searchTerm)\n );\n }\n }\n else {\n this.onSearch.emit(this.searchTerm);\n }\n }\n }\n\n handleButtonClick(action: () => void): void {\n action();\n this.buttonClick.emit();\n }\n \n}","<div #dropdown class=\"dropdown\" [ngClass]=\"{ 'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div *ngIf=\"!selectedItem && multiple\" class=\"selected\">\n <div\n *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\"\n class=\"selected-item\">\n {{ selectedItem[label] }}\n <span (click)=\"unselectItem(selectedItem)\"\n class=\"close-icon\">×</span>\n </div>\n <div *ngIf=\"selectedItems.length > 3\" class=\"remaining-items\">\n + {{ selectedItems.length - 3 }} more\n </div>\n </div>\n\n <div class=\"input-field\">\n <div *ngIf=\"multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n (keyup)=\"search($event)\" />\n </div>\n <div *ngIf=\"!multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"selectedItemName\"\n (keyup)=\"search($event)\" />\n </div>\n <div class=\"down-arrow\" (click)=\"openDropdown()\">\n <svg\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"down-arrow-img\"\n [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <g id=\"Down Arrow\">\n <g id=\"Group\">\n <path\n id=\"Path\"\n d=\"M6 9.13741L12 15.229L18 9.13741\"\n stroke=\"#8E9AA0\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n </g>\n </svg>\n </div>\n <div class=\"up-arrow\" (click)=\"openDropdown()\">\n <svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\" [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span\n (click)=\"unselectAll()\"\n *ngIf=\"selectedItems.length > 0 || selectedItemName != ''\"\n class=\"deselect\">×</span>\n </div>\n </div>\n\n <div\n #dropdownItems\n class=\"dropdown-items\"\n *ngIf=\"dropdownOpened\"\n (scroll)=\"onDropdownScroll($event)\">\n <a class=\"create_button\" (click)=\"createNew()\" *ngIf=\"showCreateNew\">Create\n new</a>\n\n <ng-container *ngIf=\"multiple; else singleSelection\">\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-container>\n\n <ng-template #singleSelection>\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-template>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { DropdownComponent } from './dropdown.component';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\n\n\n\n@NgModule({\n declarations: [\n DropdownComponent\n ],\n imports: [\n FormsModule,\n CommonModule\n ],\n exports: [\n DropdownComponent\n ]\n})\nexport class DropdownModule { }\n","/*\n * Public API Surface of dropdown\n */\n\nexport * from './lib/dropdown.service';\nexport * from './lib/dropdown.component';\nexport * from './lib/dropdown.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"piserve-tech-drop-down.mjs","sources":["../../../projects/dropdown/src/lib/dropdown.service.ts","../../../projects/dropdown/src/lib/dropdown.component.ts","../../../projects/dropdown/src/lib/dropdown.component.html","../../../projects/dropdown/src/lib/dropdown.module.ts","../../../projects/dropdown/src/public-api.ts","../../../projects/dropdown/src/piserve-tech-drop-down.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\n\n@Injectable({\n providedIn: 'root'\n})\nexport class DropdownService {\n\n constructor() { }\n}\n","import { Component,ElementRef,EventEmitter,HostListener,Input,OnInit,Output,ViewChild } from '@angular/core';\n\n@Component({\n selector: 'lib-dropdown',\n templateUrl: './dropdown.component.html',\n styleUrls: ['./dropdown.component.scss'],\n})\nexport class DropdownComponent implements OnInit {\n @Input() multiple!: boolean;\n @Input() scrollable!: boolean;\n @Input() selectedItems: any[] = [];\n @Input() placeholder: String = '';\n @Input() label: string = '';\n @Input() items: any[] = [];\n @Input() showCreateNew!: boolean;\n @Input() customButtons: { label: string; icon: string; color:string ;action: () => void }[] = [];\n @Input() showBorder: boolean = true;\n @Output() buttonClick: EventEmitter<Event> = new EventEmitter<Event>();\n @Output() selectedItemsChange: EventEmitter<any[]> = new EventEmitter<\n any[]\n >();\n @Output() onScroll: EventEmitter<Event> = new EventEmitter<Event>();\n @Output() onCreateNew: EventEmitter<Event> = new EventEmitter<Event>();\n @Output() onSearch: EventEmitter<string> = new EventEmitter<string>();\n\n dropdownOpened: boolean = false;\n selectedItem: any;\n selectedItemName: string = '';\n originalItems: any[] = [];\n searchTerm:string='';\n\n ngOnInit(): void {\n this.originalItems = this.items.slice(); \n if (this.selectedItems && this.selectedItems.length > 0) {\n this.selectItem(this.selectedItems[0]);\n }\n }\n\n openDropdown() {\n this.dropdownOpened = !this.dropdownOpened;\n }\n\n @ViewChild('dropdownItems') dropdownitems!: ElementRef;\n\n onDropdownScroll(event: any): void {\n if (this.onScroll) {\n const dropdownElement: HTMLElement = this.dropdownitems.nativeElement;\n const scrollPosition =\n dropdownElement.scrollTop + dropdownElement.clientHeight;\n const totalHeight = dropdownElement.scrollHeight;\n\n if (scrollPosition >= totalHeight) {\n this.onScroll.emit();\n }\n }\n }\n\n selectItem(item: any) {\n if (this.multiple) {\n if (!this.selectedItems.includes(item)) {\n this.selectedItems.push(item);\n this.selectedItemsChange.emit(this.selectedItems);\n } else {\n this.selectedItems = this.selectedItems.filter(\n (selected: any) => selected !== item\n );\n this.selectedItemsChange.emit(this.selectedItems);\n }\n } else {\n this.selectedItems[0] = item;\n this.selectedItemName = this.selectedItems[0][this.label];\n this.dropdownOpened = false;\n this.items = this.originalItems.slice();\n this.selectedItemsChange.emit(this.selectedItems);\n }\n }\n\n unselectItem(item: any): void {\n this.selectedItems = this.selectedItems.filter(\n (selected: any) => selected !== item\n );\n this.selectedItemsChange.emit(this.selectedItems);\n }\n\n unselectAll() {\n this.selectedItems = [];\n this.selectedItemName = '';\n this.selectedItemsChange.emit(this.selectedItems);\n this.items = this.originalItems.slice();\n }\n\n @ViewChild('dropdown') dropdown!: ElementRef;\n @HostListener('document:click', ['$event'])\n onDocumentClick(event: Event): void {\n const isClickInsideDropdown = this.dropdown.nativeElement.contains(\n event.target\n );\n if (!isClickInsideDropdown) {\n this.dropdownOpened = false;\n }\n }\n\n createNew() {\n this.onCreateNew.emit();\n }\n\n search(event: any): void {\n const keyCode = event.keyCode; \n \n if (keyCode === 8 && !this.multiple) {\n this.selectedItems = [];\n this.selectedItemName = '';\n this.selectedItemsChange.emit(this.selectedItems);\n this.items = this.originalItems.slice();\n } else {\n\n this.searchTerm = event.target.value.toLowerCase();\n\n if (!this.onSearch.observers.length) { \n if (this.searchTerm.trim() === '') {\n this.items = this.originalItems.slice();\n } else {\n this.items = this.originalItems.filter((item) =>\n item[this.label].toLowerCase().startsWith(this.searchTerm)\n );\n }\n }\n else {\n this.onSearch.emit(this.searchTerm);\n }\n }\n }\n\n handleButtonClick(action: () => void): void {\n action();\n this.buttonClick.emit();\n }\n \n}","<div #dropdown class=\"dropdown\" [ngClass]=\"{ 'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div class=\"dropdown-field\" id=\"division\" [ngClass]=\"{'opened': showBorder && dropdownOpened, 'closed': showBorder && !dropdownOpened}\">\n <div *ngIf=\"!selectedItem && multiple\" class=\"selected\">\n <div\n *ngFor=\"let selectedItem of selectedItems.slice(0, 3)\"\n class=\"selected-item\">\n {{ selectedItem[label] }}\n <span (click)=\"unselectItem(selectedItem)\"\n class=\"close-icon\">×</span>\n </div>\n <div *ngIf=\"selectedItems.length > 3\" class=\"remaining-items\">\n + {{ selectedItems.length - 3 }} more\n </div>\n </div>\n\n <div class=\"input-field\">\n <div *ngIf=\"multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n (keyup)=\"search($event)\" />\n </div>\n <div *ngIf=\"!multiple\">\n <input\n class=\"dropdown_text\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"selectedItemName\"\n (keyup)=\"search($event)\" />\n </div>\n <div class=\"down-arrow\" (click)=\"openDropdown()\">\n <svg\n width=\"24\"\n height=\"25\"\n viewBox=\"0 0 24 25\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n class=\"down-arrow-img\"\n [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <g id=\"Down Arrow\">\n <g id=\"Group\">\n <path\n id=\"Path\"\n d=\"M6 9.13741L12 15.229L18 9.13741\"\n stroke=\"#8E9AA0\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </g>\n </g>\n </svg>\n </div>\n <div class=\"up-arrow\" (click)=\"openDropdown()\">\n <svg width=\"24\" height=\"25\" viewBox=\"0 0 24 25\" fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\" class=\"up-arrow-img\" [ngClass]=\"{'opened': dropdownOpened, 'closed': !dropdownOpened}\">\n <path d=\"M18 15.229L12 9.1374L6 15.229\" stroke=\"#8E9AA0\"\n stroke-width=\"1.5\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n </div>\n <span\n (click)=\"unselectAll()\"\n *ngIf=\"selectedItems.length > 0 || selectedItemName != ''\"\n class=\"deselect\">×</span>\n </div>\n </div>\n\n <div\n #dropdownItems\n class=\"dropdown-items\"\n *ngIf=\"dropdownOpened\"\n (scroll)=\"onDropdownScroll($event)\">\n <a class=\"create_button\" (click)=\"createNew()\" *ngIf=\"showCreateNew\">Create\n new</a>\n\n <ng-container *ngIf=\"multiple; else singleSelection\">\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-container>\n\n <ng-template #singleSelection>\n <a\n class=\"items d-block\"\n *ngFor=\"let item of items\"\n (click)=\"selectItem(item)\">\n {{ item[label] }}\n <div class=\"dropdown_buttons\">\n <button *ngFor=\"let button of customButtons\"\n (click)=\"handleButtonClick(button.action)\"><i [class]=\"button.icon\"\n [style.color]=\"button.color\"></i> </button>\n </div>\n </a>\n </ng-template>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { DropdownComponent } from './dropdown.component';\nimport { FormsModule } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\n\n\n\n@NgModule({\n declarations: [\n DropdownComponent\n ],\n imports: [\n FormsModule,\n CommonModule\n ],\n exports: [\n DropdownComponent\n ]\n})\nexport class DropdownModule { }\n","/*\n * Public API Surface of dropdown\n */\n\nexport * from './lib/dropdown.service';\nexport * from './lib/dropdown.component';\nexport * from './lib/dropdown.module';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|