@indice/ng-components/esm2022/lib/controls/toggle-buttons-list/toggle-buttons-list.component.mjs

Indice common components for Angular v12

import { Component, Input, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "../drop-down-menu/drop-down-menu.component";
export class ToggleButtonsListComponent {
    constructor() {
        this.icon = undefined;
        this.compact = true;
        this.valueChange = new EventEmitter(undefined);
    }
    ngOnInit() {
    }
    selectOption(optionValue) {
        this.value = optionValue;
        this.valueChange.emit(optionValue);
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToggleButtonsListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.6", type: ToggleButtonsListComponent, selector: "lib-toggle-buttons-list", inputs: { icon: "icon", options: "options", value: "value", compact: "compact" }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"relative items-center inline-flex\">\n    <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n        <i [class]=\"icon\"></i>\n    </div>\n    <div class=\"toggle-buttons-list-drop-down-compact-container\" *ngIf=\"compact\">\n        <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n        </lib-drop-down-menu>\n    </div>\n    <div class=\"toggle-buttons-list\" *ngIf=\"!compact\">\n        <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n            <!-- [tooltip]=\"option.description\" -->\n            <button type=\"button\"\n                    [disabled]=\"option.value === value\"\n                    [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n                    class=\"toggle-buttons-list-button\"\n                    (click)=\"selectOption(option.value)\">\n            <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n                <i [class]=\"option.icon\"></i>\n            </div>\n            <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n            <span *ngIf=\"option.data && option.data.count\"\n                class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\n            </span>\n            </button>\n        </ng-template>\n    </div>\n</div>", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DropDownMenuComponent, selector: "lib-drop-down-menu", inputs: ["options", "selected", "multiple", "placeholder", "show-icons"], outputs: ["selectedChange", "selectedChanged"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.6", ngImport: i0, type: ToggleButtonsListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'lib-toggle-buttons-list', template: "<div class=\"relative items-center inline-flex\">\n    <div class=\"toggle-buttons-list-icon-container\" *ngIf=\"icon\">\n        <i [class]=\"icon\"></i>\n    </div>\n    <div class=\"toggle-buttons-list-drop-down-compact-container\" *ngIf=\"compact\">\n        <lib-drop-down-menu class=\"toggle-buttons-list-drop-down\" [(selected)]=\"value\" (selectedChange)=\"selectOption($event)\" [options]=\"options\">\n        </lib-drop-down-menu>\n    </div>\n    <div class=\"toggle-buttons-list\" *ngIf=\"!compact\">\n        <ng-template ngFor let-option [ngForOf]=\"options\" let-i=\"index\">\n            <!-- [tooltip]=\"option.description\" -->\n            <button type=\"button\"\n                    [disabled]=\"option.value === value\"\n                    [class.toggle-buttons-list-button-selected]=\"option.value === value\"\n                    class=\"toggle-buttons-list-button\"\n                    (click)=\"selectOption(option.value)\">\n            <div class=\"toggle-buttons-list-button-icon-container\" *ngIf=\"option.icon\">\n                <i [class]=\"option.icon\"></i>\n            </div>\n            <span class=\"toggle-buttons-list-button-button-text\">{{option.text}}</span>\n            <span *ngIf=\"option.data && option.data.count\"\n                class=\"toggle-buttons-list-button-button-count\">{{option.data.count}}\n            </span>\n            </button>\n        </ng-template>\n    </div>\n</div>" }]
        }], ctorParameters: () => [], propDecorators: { icon: [{
                type: Input
            }], options: [{
                type: Input
            }], value: [{
                type: Input
            }], compact: [{
                type: Input
            }], valueChange: [{
                type: Output
            }] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9nZ2xlLWJ1dHRvbnMtbGlzdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9uZy1jb21wb25lbnRzL3NyYy9saWIvY29udHJvbHMvdG9nZ2xlLWJ1dHRvbnMtbGlzdC90b2dnbGUtYnV0dG9ucy1saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL25nLWNvbXBvbmVudHMvc3JjL2xpYi9jb250cm9scy90b2dnbGUtYnV0dG9ucy1saXN0L3RvZ2dsZS1idXR0b25zLWxpc3QuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxLQUFLLEVBQUUsTUFBTSxFQUFFLFlBQVksRUFBRSxNQUFNLGVBQWUsQ0FBQzs7OztBQVEvRSxNQUFNLE9BQU8sMEJBQTBCO0lBTXJDO1FBTFMsU0FBSSxHQUF1QixTQUFTLENBQUM7UUFHckMsWUFBTyxHQUFZLElBQUksQ0FBQztRQUN2QixnQkFBVyxHQUFzQixJQUFJLFlBQVksQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUN2RCxDQUFDO0lBRWpCLFFBQVE7SUFDUixDQUFDO0lBRU0sWUFBWSxDQUFDLFdBQWdCO1FBQ2xDLElBQUksQ0FBQyxLQUFLLEdBQUcsV0FBVyxDQUFDO1FBQ3pCLElBQUksQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ3JDLENBQUM7OEdBZFUsMEJBQTBCO2tHQUExQiwwQkFBMEIsMExDUnZDLHU2Q0EwQk07OzJGRGxCTywwQkFBMEI7a0JBSnRDLFNBQVM7K0JBQ0UseUJBQXlCO3dEQUkxQixJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csT0FBTztzQkFBZixLQUFLO2dCQUNHLEtBQUs7c0JBQWIsS0FBSztnQkFDRyxPQUFPO3NCQUFmLEtBQUs7Z0JBQ0ksV0FBVztzQkFBcEIsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBJbnB1dCwgT3V0cHV0LCBFdmVudEVtaXR0ZXIgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE1lbnVPcHRpb24gfSBmcm9tICcuLi8uLi90eXBlcyc7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnbGliLXRvZ2dsZS1idXR0b25zLWxpc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vdG9nZ2xlLWJ1dHRvbnMtbGlzdC5jb21wb25lbnQuaHRtbCdcbn0pXG5leHBvcnQgY2xhc3MgVG9nZ2xlQnV0dG9uc0xpc3RDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICBASW5wdXQoKSBpY29uOiBzdHJpbmcgfCB1bmRlZmluZWQgPSB1bmRlZmluZWQ7XG4gIEBJbnB1dCgpIG9wdGlvbnM6IE1lbnVPcHRpb25bXSB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgdmFsdWU6IGFueSB8IHVuZGVmaW5lZDtcbiAgQElucHV0KCkgY29tcGFjdDogYm9vbGVhbiA9IHRydWU7XG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZTogRXZlbnRFbWl0dGVyPGFueT4gPSBuZXcgRXZlbnRFbWl0dGVyKHVuZGVmaW5lZCk7XG4gIGNvbnN0cnVjdG9yKCkgeyB9XG5cbiAgbmdPbkluaXQoKTogdm9pZCB7XG4gIH1cblxuICBwdWJsaWMgc2VsZWN0T3B0aW9uKG9wdGlvblZhbHVlOiBhbnkpOiB2b2lkIHtcbiAgICB0aGlzLnZhbHVlID0gb3B0aW9uVmFsdWU7XG4gICAgdGhpcy52YWx1ZUNoYW5nZS5lbWl0KG9wdGlvblZhbHVlKTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cInJlbGF0aXZlIGl0ZW1zLWNlbnRlciBpbmxpbmUtZmxleFwiPlxuICAgIDxkaXYgY2xhc3M9XCJ0b2dnbGUtYnV0dG9ucy1saXN0LWljb24tY29udGFpbmVyXCIgKm5nSWY9XCJpY29uXCI+XG4gICAgICAgIDxpIFtjbGFzc109XCJpY29uXCI+PC9pPlxuICAgIDwvZGl2PlxuICAgIDxkaXYgY2xhc3M9XCJ0b2dnbGUtYnV0dG9ucy1saXN0LWRyb3AtZG93bi1jb21wYWN0LWNvbnRhaW5lclwiICpuZ0lmPVwiY29tcGFjdFwiPlxuICAgICAgICA8bGliLWRyb3AtZG93bi1tZW51IGNsYXNzPVwidG9nZ2xlLWJ1dHRvbnMtbGlzdC1kcm9wLWRvd25cIiBbKHNlbGVjdGVkKV09XCJ2YWx1ZVwiIChzZWxlY3RlZENoYW5nZSk9XCJzZWxlY3RPcHRpb24oJGV2ZW50KVwiIFtvcHRpb25zXT1cIm9wdGlvbnNcIj5cbiAgICAgICAgPC9saWItZHJvcC1kb3duLW1lbnU+XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cInRvZ2dsZS1idXR0b25zLWxpc3RcIiAqbmdJZj1cIiFjb21wYWN0XCI+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBuZ0ZvciBsZXQtb3B0aW9uIFtuZ0Zvck9mXT1cIm9wdGlvbnNcIiBsZXQtaT1cImluZGV4XCI+XG4gICAgICAgICAgICA8IS0tIFt0b29sdGlwXT1cIm9wdGlvbi5kZXNjcmlwdGlvblwiIC0tPlxuICAgICAgICAgICAgPGJ1dHRvbiB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgICAgICAgICAgW2Rpc2FibGVkXT1cIm9wdGlvbi52YWx1ZSA9PT0gdmFsdWVcIlxuICAgICAgICAgICAgICAgICAgICBbY2xhc3MudG9nZ2xlLWJ1dHRvbnMtbGlzdC1idXR0b24tc2VsZWN0ZWRdPVwib3B0aW9uLnZhbHVlID09PSB2YWx1ZVwiXG4gICAgICAgICAgICAgICAgICAgIGNsYXNzPVwidG9nZ2xlLWJ1dHRvbnMtbGlzdC1idXR0b25cIlxuICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwic2VsZWN0T3B0aW9uKG9wdGlvbi52YWx1ZSlcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJ0b2dnbGUtYnV0dG9ucy1saXN0LWJ1dHRvbi1pY29uLWNvbnRhaW5lclwiICpuZ0lmPVwib3B0aW9uLmljb25cIj5cbiAgICAgICAgICAgICAgICA8aSBbY2xhc3NdPVwib3B0aW9uLmljb25cIj48L2k+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwidG9nZ2xlLWJ1dHRvbnMtbGlzdC1idXR0b24tYnV0dG9uLXRleHRcIj57e29wdGlvbi50ZXh0fX08L3NwYW4+XG4gICAgICAgICAgICA8c3BhbiAqbmdJZj1cIm9wdGlvbi5kYXRhICYmIG9wdGlvbi5kYXRhLmNvdW50XCJcbiAgICAgICAgICAgICAgICBjbGFzcz1cInRvZ2dsZS1idXR0b25zLWxpc3QtYnV0dG9uLWJ1dHRvbi1jb3VudFwiPnt7b3B0aW9uLmRhdGEuY291bnR9fVxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgICAgPC9idXR0b24+XG4gICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=