angular-dropdown-select
Version:
<p>Multiple Dropdown Select - <b>You can use this angular-dropdown-select apart from data tables as well.</b></p> <br/>
135 lines (128 loc) • 11 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, Input, Output, HostListener, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import * as i1 from '@angular/common';
import * as i2 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
class AngularDropdownSelectService {
constructor() { }
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AngularDropdownSelectService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AngularDropdownSelectService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AngularDropdownSelectService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [] });
class AngularDropdownSelectComponent {
constructor() {
this.onCheckBoxStatusChanged = new EventEmitter();
this.onUnselectAll = new EventEmitter();
this.dropdownOpen = false;
this.selectedCount = 0;
this.selectAll = false;
this.uncheckAllStatus = false;
this.dropdownButtonText = '';
}
onDocumentClick(event) {
const target = event.target;
if (!target.nextElementSibling?.classList.contains('show')) {
this.dropdownOpen = false;
}
}
ngOnInit() {
this.items = this.headings;
this.extra = this.extras;
this.uncheckAllStatus = this.extra.uncheckAllStatus;
this.dropdownButtonText = this.extra.dropdownButtonText ? this.extra.dropdownButtonText : 'Table Columns';
this.countOfSelectedCheckboxes();
this.iterateForSelectAllChecked();
this.iterateForSelectAllUnChecked();
}
iterateForSelectAllChecked() {
this.selectAll = Object.values(this.items).every((item) => item.checked === true);
}
iterateForSelectAllUnChecked() {
this.uncheckAllStatus = Object.values(this.headings).every((item) => item.checked === false);
if (this.uncheckAllStatus === true) {
this.onUnselectAll.emit(true);
}
else {
this.onUnselectAll.emit(false);
}
}
countOfSelectedCheckboxes() {
this.selectedCount = 0;
this.items.forEach((element) => {
element.checked === true ? this.selectedCount++ : null;
});
}
toggleDropdown() {
this.dropdownOpen = !this.dropdownOpen;
}
onSelectAll(event) {
const checkbox = event.target;
this.items.forEach((item) => {
item.checked = checkbox.checked;
this.onCheckBoxStatusChanged.emit(item);
});
this.countOfSelectedCheckboxes();
this.iterateForSelectAllChecked();
this.iterateForSelectAllUnChecked();
}
onItemSelected(item) {
this.countOfSelectedCheckboxes();
this.onCheckBoxStatusChanged.emit(item);
this.iterateForSelectAllChecked();
this.iterateForSelectAllUnChecked();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AngularDropdownSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AngularDropdownSelectComponent, selector: "lib-angular-dropdown-select", inputs: { headings: "headings", extras: "extras" }, outputs: { onCheckBoxStatusChanged: "onCheckBoxStatusChanged", onUnselectAll: "onUnselectAll" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<div class=\"dropdown\" (click)=\"toggleDropdown()\" tabindex=\"0\">\r\n <button class=\"dropdown-toggle\">\r\n {{ dropdownButtonText }} <span class=\"count-background-color\">{{ selectedCount }}</span>\r\n </button>\r\n <div class=\"dropdown-menu\" [class.show]=\"dropdownOpen\">\r\n <div class=\"dropdown-item\">\r\n <input type=\"checkbox\" class=\"checkbox-input\" (change)=\"onSelectAll($event)\" [(ngModel)]=\"selectAll\">\r\n <span class=\"checkbox-label\">Select All</span>\r\n </div>\r\n <div *ngFor=\"let item of items\" class=\"dropdown-item\">\r\n <input type=\"checkbox\" class=\"checkbox-input\" [(ngModel)]=\"item.checked\" (change)=\"onItemSelected(item)\">\r\n <span class=\"checkbox-label\">{{ item.name }}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [".dropdown{position:relative;display:inline-block;font-family:Arial,sans-serif}.dropdown-toggle{color:#000;border:1px solid grey;background-color:#fff;padding:10px;border-radius:4px;cursor:pointer;outline:none;transition:background-color .3s}.dropdown-toggle:hover{background-color:#ecececa6}.dropdown-menu{position:absolute;background-color:#fff;box-shadow:0 4px 8px #0000001a;z-index:1;padding:10px;border-radius:4px;display:none;margin-top:5px;min-width:200px}.dropdown-menu.show{display:block}.dropdown-item{display:flex;align-items:center;padding:8px 10px;cursor:pointer;transition:background-color .3s}.dropdown-item:hover{background-color:#f8f9fa}.checkbox-label{margin-left:10px;font-size:14px;color:#333}.checkbox-input{margin-right:10px;width:18px;height:18px;border:1px solid #ced4da;border-radius:3px;cursor:pointer;transition:background-color .3s}.checkbox-input:checked{background-color:#007bff}.checkbox-input:checked:after{content:\"\\2713\";font-size:12px;color:#fff;position:absolute;top:1px;left:5px}.dropdown-toggle:focus,.dropdown-item:focus{outline:none;box-shadow:0 0 0 2px #007bff80}.count-background-color{background-color:#000;color:#fff;padding:4px;border-radius:20px;border:.25px solid grey}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AngularDropdownSelectComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-angular-dropdown-select', template: "<div class=\"dropdown\" (click)=\"toggleDropdown()\" tabindex=\"0\">\r\n <button class=\"dropdown-toggle\">\r\n {{ dropdownButtonText }} <span class=\"count-background-color\">{{ selectedCount }}</span>\r\n </button>\r\n <div class=\"dropdown-menu\" [class.show]=\"dropdownOpen\">\r\n <div class=\"dropdown-item\">\r\n <input type=\"checkbox\" class=\"checkbox-input\" (change)=\"onSelectAll($event)\" [(ngModel)]=\"selectAll\">\r\n <span class=\"checkbox-label\">Select All</span>\r\n </div>\r\n <div *ngFor=\"let item of items\" class=\"dropdown-item\">\r\n <input type=\"checkbox\" class=\"checkbox-input\" [(ngModel)]=\"item.checked\" (change)=\"onItemSelected(item)\">\r\n <span class=\"checkbox-label\">{{ item.name }}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [".dropdown{position:relative;display:inline-block;font-family:Arial,sans-serif}.dropdown-toggle{color:#000;border:1px solid grey;background-color:#fff;padding:10px;border-radius:4px;cursor:pointer;outline:none;transition:background-color .3s}.dropdown-toggle:hover{background-color:#ecececa6}.dropdown-menu{position:absolute;background-color:#fff;box-shadow:0 4px 8px #0000001a;z-index:1;padding:10px;border-radius:4px;display:none;margin-top:5px;min-width:200px}.dropdown-menu.show{display:block}.dropdown-item{display:flex;align-items:center;padding:8px 10px;cursor:pointer;transition:background-color .3s}.dropdown-item:hover{background-color:#f8f9fa}.checkbox-label{margin-left:10px;font-size:14px;color:#333}.checkbox-input{margin-right:10px;width:18px;height:18px;border:1px solid #ced4da;border-radius:3px;cursor:pointer;transition:background-color .3s}.checkbox-input:checked{background-color:#007bff}.checkbox-input:checked:after{content:\"\\2713\";font-size:12px;color:#fff;position:absolute;top:1px;left:5px}.dropdown-toggle:focus,.dropdown-item:focus{outline:none;box-shadow:0 0 0 2px #007bff80}.count-background-color{background-color:#000;color:#fff;padding:4px;border-radius:20px;border:.25px solid grey}\n"] }]
}], ctorParameters: () => [], propDecorators: { headings: [{
type: Input
}], extras: [{
type: Input
}], onCheckBoxStatusChanged: [{
type: Output
}], onUnselectAll: [{
type: Output
}], onDocumentClick: [{
type: HostListener,
args: ['document:click', ['$event']]
}] } });
class AngularDropdownSelectModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AngularDropdownSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: AngularDropdownSelectModule, declarations: [AngularDropdownSelectComponent], imports: [BrowserModule,
FormsModule], exports: [AngularDropdownSelectComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AngularDropdownSelectModule, imports: [BrowserModule,
FormsModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AngularDropdownSelectModule, decorators: [{
type: NgModule,
args: [{
declarations: [
AngularDropdownSelectComponent
],
imports: [
BrowserModule,
FormsModule
],
exports: [
AngularDropdownSelectComponent
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
}]
}] });
/*
* Public API Surface of angular-dropdown-select
*/
/**
* Generated bundle index. Do not edit.
*/
export { AngularDropdownSelectComponent, AngularDropdownSelectModule, AngularDropdownSelectService };
//# sourceMappingURL=angular-dropdown-select.mjs.map