ngx-obelisco-example
Version:
Componentes funcionales y reutilizables para Angular.
137 lines (131 loc) • 26.6 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Input, EventEmitter, Output, NgModule } from '@angular/core';
import * as i1 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i2 from '@angular/router';
import { RouterModule } from '@angular/router';
class ODropdownNavigationComponent {
constructor() {
this.dataTarget = 'dropdown';
this.isAnimatedIconLeft = false;
this.isAnimatedIconRight = false;
this.isPositionRight = false;
this.isBordered = true;
this.customClasses = '';
this.hasChildren = false;
}
ngOnChanges(changes) {
if ('dropNavItems' in changes) {
this.hasChildren = this.dropNavItems.some((item) => item.children && item.children.length > 0);
}
}
}
ODropdownNavigationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ODropdownNavigationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ODropdownNavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ODropdownNavigationComponent, selector: "o-dropdown-navigation", inputs: { dataTarget: "dataTarget", title: "title", iconLeft: "iconLeft", iconRight: "iconRight", isAnimatedIconLeft: "isAnimatedIconLeft", isAnimatedIconRight: "isAnimatedIconRight", dropNavItems: "dropNavItems", isPositionRight: "isPositionRight", isBordered: "isBordered", customClasses: "customClasses", ariaLabel: "ariaLabel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"dropdown\">\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-dropdown btn-dropdown-lg\"\r\n [class.btn-dropdown-border]=\"isBordered\"\r\n [class.dropdown-toggle]=\"!hasChildren\"\r\n [attr.data-toggle]=\"hasChildren ? 'collapse' : 'dropdown'\"\r\n [attr.data-target]=\"hasChildren ? '#' + dataTarget : null\"\r\n [attr.aria-controls]=\"hasChildren ? dataTarget : null\"\r\n aria-haspopup=\"true\"\r\n aria-expanded=\"false\"\r\n [ngClass]=\"customClasses\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n >\r\n <ng-container *ngIf=\"iconLeft\">\r\n <i *ngIf=\"iconLeft.includes('bx')\" class=\"{{ iconLeft }}\" [class.btn-dropdown-icon]=\"isAnimatedIconLeft\"></i>\r\n <span\r\n *ngIf=\"!iconLeft.includes('bx')\"\r\n class=\"material-icons-round\"\r\n aria-hidden=\"true\"\r\n [class.btn-dropdown-icon]=\"isAnimatedIconLeft\"\r\n >{{ iconLeft }}</span\r\n >\r\n </ng-container>\r\n <span class=\"btn-dropdown-text\" *ngIf=\"title\">{{ title }}</span>\r\n <ng-container *ngIf=\"iconRight\">\r\n <i *ngIf=\"iconRight.includes('bx')\" class=\"{{ iconRight }}\" [class.btn-dropdown-icon]=\"isAnimatedIconRight\"></i>\r\n <span\r\n *ngIf=\"!iconRight.includes('bx')\"\r\n class=\"material-icons-round\"\r\n aria-hidden=\"true\"\r\n [class.btn-dropdown-icon]=\"isAnimatedIconRight\"\r\n >{{ iconRight }}</span\r\n >\r\n </ng-container>\r\n </button>\r\n <div\r\n class=\"dropdown-menu\"\r\n [class.dropdown-menu-right]=\"isPositionRight\"\r\n [class.collapse]=\"hasChildren\"\r\n [id]=\"hasChildren ? dataTarget : null\"\r\n >\r\n <ng-container *ngFor=\"let item of dropNavItems\">\r\n <a\r\n *ngIf=\"item.route && !item.children\"\r\n class=\"dropdown-item\"\r\n [class.disabled]=\"item.isDisabled\"\r\n [class.item-danger]=\"item.isItemDanger\"\r\n [routerLink]=\"item.route\"\r\n [ngClass]=\"item.customClasses\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: item.iconLeft }\"></ng-container>\r\n <span class=\"item-text\" [class.text-right]=\"item.textPosition == 'right'\">{{ item.text }}</span>\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: item.iconRight }\"></ng-container>\r\n </a>\r\n <a\r\n *ngIf=\"item.link && !item.children\"\r\n class=\"dropdown-item\"\r\n [class.disabled]=\"item.isDisabled\"\r\n [class.item-danger]=\"item.isItemDanger\"\r\n [href]=\"item.link\"\r\n target=\"_blank\"\r\n [ngClass]=\"item.customClasses\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: item.iconLeft }\"></ng-container>\r\n <span class=\"item-text\" [class.text-right]=\"item.textPosition == 'right'\">{{ item.text }}</span>\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: item.iconRight }\"></ng-container>\r\n </a>\r\n\r\n <div *ngIf=\"item.children\" class=\"dropdown sub-dropdown\">\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-dropdown btn-dropdown-lg dropdown-toggle sub-btn-dropdown\"\r\n data-toggle=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n aria-expanded=\"false\"\r\n [ngClass]=\"item.customClasses\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"iconTemplate; context: { icon: item.iconLeft, animated: item.isAnimatedIconLeft }\"\r\n ></ng-container>\r\n <span class=\"item-text\" [class.text-right]=\"item.textPosition == 'right'\">{{ item.text }}</span>\r\n <ng-container\r\n *ngTemplateOutlet=\"iconTemplate; context: { icon: item.iconRight, animated: item.isAnimatedIconRight }\"\r\n ></ng-container>\r\n </button>\r\n <div class=\"dropdown-menu sub-dropdown-menu\">\r\n <ng-container *ngFor=\"let subitem of item.children\">\r\n <a\r\n *ngIf=\"subitem.route\"\r\n class=\"dropdown-item sub-item\"\r\n [class.item-danger]=\"subitem.isItemDanger\"\r\n [routerLink]=\"subitem.route\"\r\n [ngClass]=\"subitem.customClasses\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: subitem.iconLeft }\"></ng-container>\r\n <span class=\"item-text\" [class.text-right]=\"subitem.textPosition == 'right'\">{{ subitem.text }}</span>\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: subitem.iconRight }\"></ng-container>\r\n </a>\r\n <a\r\n *ngIf=\"subitem.link\"\r\n class=\"dropdown-item sub-item\"\r\n [class.item-danger]=\"subitem.isItemDanger\"\r\n [href]=\"subitem.link\"\r\n target=\"_blank\"\r\n [ngClass]=\"subitem.customClasses\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: subitem.iconLeft }\"></ng-container>\r\n <span class=\"item-text\" [class.text-right]=\"subitem.textPosition == 'right'\">{{ subitem.text }}</span>\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: subitem.iconRight }\"></ng-container>\r\n </a>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #iconTemplate let-icon=\"icon\" let-animated=\"animated\">\r\n <ng-container *ngIf=\"icon\">\r\n <i *ngIf=\"icon.includes('bx')\" class=\"{{ icon }}\" [class.btn-dropdown-icon]=\"animated\"></i>\r\n <span\r\n *ngIf=\"!icon.includes('bx')\"\r\n class=\"material-icons-round\"\r\n aria-hidden=\"true\"\r\n [class.btn-dropdown-icon]=\"animated\"\r\n >{{ icon }}</span\r\n >\r\n </ng-container>\r\n</ng-template>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ODropdownNavigationComponent, decorators: [{
type: Component,
args: [{ selector: 'o-dropdown-navigation', template: "<div class=\"dropdown\">\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-dropdown btn-dropdown-lg\"\r\n [class.btn-dropdown-border]=\"isBordered\"\r\n [class.dropdown-toggle]=\"!hasChildren\"\r\n [attr.data-toggle]=\"hasChildren ? 'collapse' : 'dropdown'\"\r\n [attr.data-target]=\"hasChildren ? '#' + dataTarget : null\"\r\n [attr.aria-controls]=\"hasChildren ? dataTarget : null\"\r\n aria-haspopup=\"true\"\r\n aria-expanded=\"false\"\r\n [ngClass]=\"customClasses\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n >\r\n <ng-container *ngIf=\"iconLeft\">\r\n <i *ngIf=\"iconLeft.includes('bx')\" class=\"{{ iconLeft }}\" [class.btn-dropdown-icon]=\"isAnimatedIconLeft\"></i>\r\n <span\r\n *ngIf=\"!iconLeft.includes('bx')\"\r\n class=\"material-icons-round\"\r\n aria-hidden=\"true\"\r\n [class.btn-dropdown-icon]=\"isAnimatedIconLeft\"\r\n >{{ iconLeft }}</span\r\n >\r\n </ng-container>\r\n <span class=\"btn-dropdown-text\" *ngIf=\"title\">{{ title }}</span>\r\n <ng-container *ngIf=\"iconRight\">\r\n <i *ngIf=\"iconRight.includes('bx')\" class=\"{{ iconRight }}\" [class.btn-dropdown-icon]=\"isAnimatedIconRight\"></i>\r\n <span\r\n *ngIf=\"!iconRight.includes('bx')\"\r\n class=\"material-icons-round\"\r\n aria-hidden=\"true\"\r\n [class.btn-dropdown-icon]=\"isAnimatedIconRight\"\r\n >{{ iconRight }}</span\r\n >\r\n </ng-container>\r\n </button>\r\n <div\r\n class=\"dropdown-menu\"\r\n [class.dropdown-menu-right]=\"isPositionRight\"\r\n [class.collapse]=\"hasChildren\"\r\n [id]=\"hasChildren ? dataTarget : null\"\r\n >\r\n <ng-container *ngFor=\"let item of dropNavItems\">\r\n <a\r\n *ngIf=\"item.route && !item.children\"\r\n class=\"dropdown-item\"\r\n [class.disabled]=\"item.isDisabled\"\r\n [class.item-danger]=\"item.isItemDanger\"\r\n [routerLink]=\"item.route\"\r\n [ngClass]=\"item.customClasses\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: item.iconLeft }\"></ng-container>\r\n <span class=\"item-text\" [class.text-right]=\"item.textPosition == 'right'\">{{ item.text }}</span>\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: item.iconRight }\"></ng-container>\r\n </a>\r\n <a\r\n *ngIf=\"item.link && !item.children\"\r\n class=\"dropdown-item\"\r\n [class.disabled]=\"item.isDisabled\"\r\n [class.item-danger]=\"item.isItemDanger\"\r\n [href]=\"item.link\"\r\n target=\"_blank\"\r\n [ngClass]=\"item.customClasses\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: item.iconLeft }\"></ng-container>\r\n <span class=\"item-text\" [class.text-right]=\"item.textPosition == 'right'\">{{ item.text }}</span>\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: item.iconRight }\"></ng-container>\r\n </a>\r\n\r\n <div *ngIf=\"item.children\" class=\"dropdown sub-dropdown\">\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-dropdown btn-dropdown-lg dropdown-toggle sub-btn-dropdown\"\r\n data-toggle=\"dropdown\"\r\n aria-haspopup=\"true\"\r\n aria-expanded=\"false\"\r\n [ngClass]=\"item.customClasses\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"iconTemplate; context: { icon: item.iconLeft, animated: item.isAnimatedIconLeft }\"\r\n ></ng-container>\r\n <span class=\"item-text\" [class.text-right]=\"item.textPosition == 'right'\">{{ item.text }}</span>\r\n <ng-container\r\n *ngTemplateOutlet=\"iconTemplate; context: { icon: item.iconRight, animated: item.isAnimatedIconRight }\"\r\n ></ng-container>\r\n </button>\r\n <div class=\"dropdown-menu sub-dropdown-menu\">\r\n <ng-container *ngFor=\"let subitem of item.children\">\r\n <a\r\n *ngIf=\"subitem.route\"\r\n class=\"dropdown-item sub-item\"\r\n [class.item-danger]=\"subitem.isItemDanger\"\r\n [routerLink]=\"subitem.route\"\r\n [ngClass]=\"subitem.customClasses\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: subitem.iconLeft }\"></ng-container>\r\n <span class=\"item-text\" [class.text-right]=\"subitem.textPosition == 'right'\">{{ subitem.text }}</span>\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: subitem.iconRight }\"></ng-container>\r\n </a>\r\n <a\r\n *ngIf=\"subitem.link\"\r\n class=\"dropdown-item sub-item\"\r\n [class.item-danger]=\"subitem.isItemDanger\"\r\n [href]=\"subitem.link\"\r\n target=\"_blank\"\r\n [ngClass]=\"subitem.customClasses\"\r\n >\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: subitem.iconLeft }\"></ng-container>\r\n <span class=\"item-text\" [class.text-right]=\"subitem.textPosition == 'right'\">{{ subitem.text }}</span>\r\n <ng-container *ngTemplateOutlet=\"iconTemplate; context: { icon: subitem.iconRight }\"></ng-container>\r\n </a>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n\r\n<ng-template #iconTemplate let-icon=\"icon\" let-animated=\"animated\">\r\n <ng-container *ngIf=\"icon\">\r\n <i *ngIf=\"icon.includes('bx')\" class=\"{{ icon }}\" [class.btn-dropdown-icon]=\"animated\"></i>\r\n <span\r\n *ngIf=\"!icon.includes('bx')\"\r\n class=\"material-icons-round\"\r\n aria-hidden=\"true\"\r\n [class.btn-dropdown-icon]=\"animated\"\r\n >{{ icon }}</span\r\n >\r\n </ng-container>\r\n</ng-template>\r\n" }]
}], propDecorators: { dataTarget: [{
type: Input
}], title: [{
type: Input
}], iconLeft: [{
type: Input
}], iconRight: [{
type: Input
}], isAnimatedIconLeft: [{
type: Input
}], isAnimatedIconRight: [{
type: Input
}], dropNavItems: [{
type: Input
}], isPositionRight: [{
type: Input
}], isBordered: [{
type: Input
}], customClasses: [{
type: Input
}], ariaLabel: [{
type: Input
}] } });
class ODropdownSelectionComponent {
constructor() {
this.dataTarget = 'dropdown';
this.isSelectionMultiple = false;
this.isAnimatedIconLeft = false;
this.isAnimatedIconRight = false;
this.dropSelectItems = [];
this.isBordered = true;
this.customClasses = '';
this.selectedItemChange = new EventEmitter();
this.selectedItems = [];
this.selectedItem = {};
}
onRadioSelectionChange(item, index) {
this.selectedItem = item;
this.selectedItemChange.emit(item);
this.selectedIndex = index + 1;
this.activeIndex = index;
}
onCheckboxSelectionChange(item) {
const itemIndex = this.selectedItems.findIndex((selectedItem) => selectedItem.id === item.id);
if (itemIndex !== -1) {
this.selectedItems.splice(itemIndex, 1);
}
else {
this.selectedItems.push(item);
}
this.selectedCheckboxCount = this.selectedItems.length;
this.selectedItemChange.emit(this.selectedItems);
}
}
ODropdownSelectionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ODropdownSelectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
ODropdownSelectionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ODropdownSelectionComponent, selector: "o-dropdown-selection", inputs: { dataTarget: "dataTarget", title: "title", isSelectionMultiple: "isSelectionMultiple", iconLeft: "iconLeft", iconRight: "iconRight", isAnimatedIconLeft: "isAnimatedIconLeft", isAnimatedIconRight: "isAnimatedIconRight", dropSelectItems: "dropSelectItems", isBordered: "isBordered", size: "size", customClasses: "customClasses", ariaLabel: "ariaLabel" }, outputs: { selectedItemChange: "selectedItemChange" }, ngImport: i0, template: "<div class=\"dropdown dropdown-form\">\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-dropdown\"\r\n [class.btn-dropdown-border]=\"isBordered\"\r\n [class.btn-dropdown-sm]=\"size == 'sm'\"\r\n [class.btn-dropdown-lg]=\"size == 'lg'\"\r\n data-toggle=\"collapse\"\r\n [attr.data-target]=\"'#' + dataTarget\"\r\n [attr.aria-controls]=\"dataTarget\"\r\n aria-expanded=\"false\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [ngClass]=\"customClasses\"\r\n >\r\n <ng-container *ngIf=\"iconLeft\">\r\n <i *ngIf=\"iconLeft.includes('bx')\" class=\"{{ iconLeft }}\" [class.btn-dropdown-icon]=\"isAnimatedIconLeft\"></i>\r\n <span\r\n *ngIf=\"!iconLeft.includes('bx')\"\r\n class=\"material-icons-round\"\r\n aria-hidden=\"true\"\r\n [class.btn-dropdown-icon]=\"isAnimatedIconLeft\"\r\n >{{ iconLeft }}</span\r\n >\r\n </ng-container>\r\n <span class=\"btn-dropdown-text\" *ngIf=\"isSelectionMultiple\"\r\n >{{ title }} {{ selectedCheckboxCount ? '(' + selectedCheckboxCount + ')' : '' }}</span\r\n >\r\n <span class=\"btn-dropdown-text\" *ngIf=\"!isSelectionMultiple\">\r\n {{ selectedItem!.text ? selectedItem!.text : title }}</span\r\n >\r\n <ng-container *ngIf=\"iconRight\">\r\n <i *ngIf=\"iconRight.includes('bx')\" class=\"{{ iconRight }}\" [class.btn-dropdown-icon]=\"isAnimatedIconRight\"></i>\r\n <span\r\n *ngIf=\"!iconRight.includes('bx')\"\r\n class=\"material-icons-round\"\r\n aria-hidden=\"true\"\r\n [class.btn-dropdown-icon]=\"isAnimatedIconRight\"\r\n >{{ iconRight }}</span\r\n >\r\n </ng-container>\r\n </button>\r\n <div class=\"dropdown-menu dropdown-body collapse\" [id]=\"dataTarget\">\r\n <ng-container *ngIf=\"!isSelectionMultiple\">\r\n <div class=\"custom-control custom-radio\" *ngFor=\"let item of dropSelectItems; let i = index\">\r\n <label class=\"btn btn-chip\" [class.active]=\"i === activeIndex\" [ngClass]=\"item.customClasses\">\r\n <input\r\n class=\"btn-check\"\r\n type=\"radio\"\r\n [id]=\"item.id\"\r\n [name]=\"item.name\"\r\n [value]=\"item.value\"\r\n (change)=\"onRadioSelectionChange(item, i)\"\r\n />\r\n <span class=\"btn-chip-text\">{{ item.text }}</span>\r\n <span class=\"material-icons-round\" aria-hidden=\"true\">done</span>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isSelectionMultiple\">\r\n <div\r\n class=\"custom-control custom-checkbox\"\r\n [class.disabled]=\"item.isDisabled\"\r\n *ngFor=\"let item of dropSelectItems\"\r\n [ngClass]=\"item.customClasses\"\r\n >\r\n <input\r\n class=\"custom-control-input\"\r\n type=\"checkbox\"\r\n [id]=\"item.id\"\r\n [name]=\"item.name\"\r\n [value]=\"item.value\"\r\n [disabled]=\"item.isDisabled\"\r\n (change)=\"onCheckboxSelectionChange(item)\"\r\n />\r\n <label class=\"custom-control-label\" [for]=\"item.id\"> {{ item.text }}</label>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ODropdownSelectionComponent, decorators: [{
type: Component,
args: [{ selector: 'o-dropdown-selection', template: "<div class=\"dropdown dropdown-form\">\r\n <button\r\n type=\"button\"\r\n class=\"btn btn-dropdown\"\r\n [class.btn-dropdown-border]=\"isBordered\"\r\n [class.btn-dropdown-sm]=\"size == 'sm'\"\r\n [class.btn-dropdown-lg]=\"size == 'lg'\"\r\n data-toggle=\"collapse\"\r\n [attr.data-target]=\"'#' + dataTarget\"\r\n [attr.aria-controls]=\"dataTarget\"\r\n aria-expanded=\"false\"\r\n [attr.aria-label]=\"ariaLabel\"\r\n [ngClass]=\"customClasses\"\r\n >\r\n <ng-container *ngIf=\"iconLeft\">\r\n <i *ngIf=\"iconLeft.includes('bx')\" class=\"{{ iconLeft }}\" [class.btn-dropdown-icon]=\"isAnimatedIconLeft\"></i>\r\n <span\r\n *ngIf=\"!iconLeft.includes('bx')\"\r\n class=\"material-icons-round\"\r\n aria-hidden=\"true\"\r\n [class.btn-dropdown-icon]=\"isAnimatedIconLeft\"\r\n >{{ iconLeft }}</span\r\n >\r\n </ng-container>\r\n <span class=\"btn-dropdown-text\" *ngIf=\"isSelectionMultiple\"\r\n >{{ title }} {{ selectedCheckboxCount ? '(' + selectedCheckboxCount + ')' : '' }}</span\r\n >\r\n <span class=\"btn-dropdown-text\" *ngIf=\"!isSelectionMultiple\">\r\n {{ selectedItem!.text ? selectedItem!.text : title }}</span\r\n >\r\n <ng-container *ngIf=\"iconRight\">\r\n <i *ngIf=\"iconRight.includes('bx')\" class=\"{{ iconRight }}\" [class.btn-dropdown-icon]=\"isAnimatedIconRight\"></i>\r\n <span\r\n *ngIf=\"!iconRight.includes('bx')\"\r\n class=\"material-icons-round\"\r\n aria-hidden=\"true\"\r\n [class.btn-dropdown-icon]=\"isAnimatedIconRight\"\r\n >{{ iconRight }}</span\r\n >\r\n </ng-container>\r\n </button>\r\n <div class=\"dropdown-menu dropdown-body collapse\" [id]=\"dataTarget\">\r\n <ng-container *ngIf=\"!isSelectionMultiple\">\r\n <div class=\"custom-control custom-radio\" *ngFor=\"let item of dropSelectItems; let i = index\">\r\n <label class=\"btn btn-chip\" [class.active]=\"i === activeIndex\" [ngClass]=\"item.customClasses\">\r\n <input\r\n class=\"btn-check\"\r\n type=\"radio\"\r\n [id]=\"item.id\"\r\n [name]=\"item.name\"\r\n [value]=\"item.value\"\r\n (change)=\"onRadioSelectionChange(item, i)\"\r\n />\r\n <span class=\"btn-chip-text\">{{ item.text }}</span>\r\n <span class=\"material-icons-round\" aria-hidden=\"true\">done</span>\r\n </label>\r\n </div>\r\n </ng-container>\r\n\r\n <ng-container *ngIf=\"isSelectionMultiple\">\r\n <div\r\n class=\"custom-control custom-checkbox\"\r\n [class.disabled]=\"item.isDisabled\"\r\n *ngFor=\"let item of dropSelectItems\"\r\n [ngClass]=\"item.customClasses\"\r\n >\r\n <input\r\n class=\"custom-control-input\"\r\n type=\"checkbox\"\r\n [id]=\"item.id\"\r\n [name]=\"item.name\"\r\n [value]=\"item.value\"\r\n [disabled]=\"item.isDisabled\"\r\n (change)=\"onCheckboxSelectionChange(item)\"\r\n />\r\n <label class=\"custom-control-label\" [for]=\"item.id\"> {{ item.text }}</label>\r\n </div>\r\n </ng-container>\r\n </div>\r\n</div>\r\n" }]
}], ctorParameters: function () { return []; }, propDecorators: { dataTarget: [{
type: Input
}], title: [{
type: Input
}], isSelectionMultiple: [{
type: Input
}], iconLeft: [{
type: Input
}], iconRight: [{
type: Input
}], isAnimatedIconLeft: [{
type: Input
}], isAnimatedIconRight: [{
type: Input
}], dropSelectItems: [{
type: Input
}], isBordered: [{
type: Input
}], size: [{
type: Input
}], customClasses: [{
type: Input
}], ariaLabel: [{
type: Input
}], selectedItemChange: [{
type: Output
}] } });
class ODropdownModule {
}
ODropdownModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ODropdownModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
ODropdownModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: ODropdownModule, declarations: [ODropdownNavigationComponent, ODropdownSelectionComponent], imports: [CommonModule, RouterModule], exports: [ODropdownNavigationComponent, ODropdownSelectionComponent] });
ODropdownModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ODropdownModule, imports: [CommonModule, RouterModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ODropdownModule, decorators: [{
type: NgModule,
args: [{
declarations: [ODropdownNavigationComponent, ODropdownSelectionComponent],
imports: [CommonModule, RouterModule],
exports: [ODropdownNavigationComponent, ODropdownSelectionComponent]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ODropdownModule, ODropdownNavigationComponent, ODropdownSelectionComponent };
//# sourceMappingURL=ngx-obelisco-example-dropdown.mjs.map