flexacore-ui-dev/dist/core/angular/fc-dropdown.component.js

Universal UI Framework for CDN, React, Angular, Vue, Svelte with TypeScript support

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.FCDropdownComponent = exports.FCDropdownItemComponent = void 0;
const core_1 = require("@angular/core");
let FCDropdownItemComponent = class FCDropdownItemComponent {
    constructor() {
        this.href = '#';
        this.disabled = false;
        this.onClick = new core_1.EventEmitter();
    }
    handleClick(event) {
        if (!this.disabled) {
            this.onClick.emit(event);
        }
    }
};
exports.FCDropdownItemComponent = FCDropdownItemComponent;
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", String)
], FCDropdownItemComponent.prototype, "href", void 0);
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", Boolean)
], FCDropdownItemComponent.prototype, "disabled", void 0);
__decorate([
    (0, core_1.Output)(),
    __metadata("design:type", Object)
], FCDropdownItemComponent.prototype, "onClick", void 0);
exports.FCDropdownItemComponent = FCDropdownItemComponent = __decorate([
    (0, core_1.Component)({
        selector: 'fc-dropdown-item',
        template: `
    <a 
      [ngClass]="['fc-dropdown-item', disabled ? 'fc-dropdown-item-disabled' : '']"
      (click)="onClick($event)"
      [href]="href"
    >
      <ng-content></ng-content>
    </a>
  `
    })
], FCDropdownItemComponent);
let FCDropdownComponent = class FCDropdownComponent {
    ngAfterContentInit() {
        this.items.forEach(item => {
            item.onClick.subscribe(() => {
                this.close();
            });
        });
    }
    onDocumentClick(event) {
        if (!this.elementRef.nativeElement.contains(event.target)) {
            this.close();
        }
    }
    constructor(elementRef) {
        this.elementRef = elementRef;
        this.label = 'Dropdown';
        this.isOpen = false;
        this.isOpenChange = new core_1.EventEmitter();
    }
    toggle() {
        this.isOpen = !this.isOpen;
        this.isOpenChange.emit(this.isOpen);
    }
    openDropdown() {
        this.isOpen = true;
        this.isOpenChange.emit(true);
    }
    close() {
        this.isOpen = false;
        this.isOpenChange.emit(false);
    }
};
exports.FCDropdownComponent = FCDropdownComponent;
__decorate([
    (0, core_1.ContentChildren)(FCDropdownItemComponent),
    __metadata("design:type", core_1.QueryList)
], FCDropdownComponent.prototype, "items", void 0);
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", String)
], FCDropdownComponent.prototype, "label", void 0);
__decorate([
    (0, core_1.Input)(),
    __metadata("design:type", Boolean)
], FCDropdownComponent.prototype, "isOpen", void 0);
__decorate([
    (0, core_1.Output)(),
    __metadata("design:type", Object)
], FCDropdownComponent.prototype, "isOpenChange", void 0);
__decorate([
    (0, core_1.HostListener)('document:click', ['$event']),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [Event]),
    __metadata("design:returntype", void 0)
], FCDropdownComponent.prototype, "onDocumentClick", null);
exports.FCDropdownComponent = FCDropdownComponent = __decorate([
    (0, core_1.Component)({
        selector: 'fc-dropdown',
        template: `
    <div [ngClass]="['fc-dropdown', isOpen ? 'fc-dropdown-open' : '']">
      <button 
        [ngClass]="['fc-dropdown-toggle', 'fc-btn']"
        (click)="toggle()"
        type="button"
        aria-expanded="isOpen"
      >
        {{ label }}
        <span class="fc-dropdown-arrow"></span>
      </button>
      <div [ngClass]="['fc-dropdown-menu', isOpen ? 'fc-dropdown-menu-show' : '']">
        <ng-content></ng-content>
      </div>
    </div>
  `
    }),
    __metadata("design:paramtypes", [core_1.ElementRef])
], FCDropdownComponent);