@angular-material-extensions/fab-menu/esm2020/lib/mat-mini-fab-menu/mat-mini-fab-menu.component.mjs

Angular Material component that allow users to select a county or nationality

import { Component } from '@angular/core';
import { MatFabMenuComponent } from '../mat-fab-menu.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/material/button";
import * as i3 from "@angular/material/icon";
import * as i4 from "@angular/material/tooltip";
import * as i5 from "@angular/flex-layout/flex";
import * as i6 from "@angular/flex-layout/extended";
export class MatMiniFabMenuComponent extends MatFabMenuComponent {
}
MatMiniFabMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MatMiniFabMenuComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
MatMiniFabMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MatMiniFabMenuComponent, selector: "mat-mini-fab-menu", usesInheritance: true, ngImport: i0, template: "<div [fxLayout]=\"layout\" class=\"container\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n  <div fxLayoutAlign=\"center\">\n    <button (click)=\"isActive = !isActive\"\n            [color]=\"color\" [disabled]=\"disabled\"\n            type=\"button\"\n            [ngClass]=\"{\n    'mat-fab' : !isActive,\n    'mat-mini-fab' : isActive\n  }\"\n            mat-mini-fab>\n      <mat-icon [@fabToggler]=\"{value: isActive}\">{{icon}}</mat-icon> <!-- Animation here -->\n    </button>\n  </div>\n  <div *ngIf=\"isActive\" [@fabsStagger]=\"fabButtons.length\"\n       [fxLayout]=\"layout2\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n    <button (click)=\"selectFabMenu(fab)\"\n            *ngFor=\"let fab of fabButtons\"\n            [color]=\"fab?.color\"\n            [matTooltip]=\"fab?.tooltip\"\n            [matTooltipPosition]=\"fab?.tooltipPosition\"\n            [ngClass]=\"{'fullSVG' : fab?.imgUrl}\"\n            type=\"button\"\n            mat-fab>\n      <mat-icon *ngIf=\"fab?.icon\" [color]=\"fab?.iconColor\">{{fab?.icon}}</mat-icon>\n      <img *ngIf=\"fab?.imgUrl\" [src]=\"fab?.imgUrl\" alt=\"icon\">\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block}.fullSVG img{width:100%}.fullSVG ::ng-deep span.mat-button-wrapper{padding:0}.container>div{margin-bottom:5px}.container>div button{margin-bottom:16px}\n"], 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: "component", type: i2.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i2.MatFabButton, selector: "button[mat-fab]", inputs: ["disabled", "disableRipple", "color", "tabIndex", "extended"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: i5.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutGapDirective, selector: "  [fxLayoutGap], [fxLayoutGap.xs], [fxLayoutGap.sm], [fxLayoutGap.md],  [fxLayoutGap.lg], [fxLayoutGap.xl], [fxLayoutGap.lt-sm], [fxLayoutGap.lt-md],  [fxLayoutGap.lt-lg], [fxLayoutGap.lt-xl], [fxLayoutGap.gt-xs], [fxLayoutGap.gt-sm],  [fxLayoutGap.gt-md], [fxLayoutGap.gt-lg]", inputs: ["fxLayoutGap", "fxLayoutGap.xs", "fxLayoutGap.sm", "fxLayoutGap.md", "fxLayoutGap.lg", "fxLayoutGap.xl", "fxLayoutGap.lt-sm", "fxLayoutGap.lt-md", "fxLayoutGap.lt-lg", "fxLayoutGap.lt-xl", "fxLayoutGap.gt-xs", "fxLayoutGap.gt-sm", "fxLayoutGap.gt-md", "fxLayoutGap.gt-lg"] }, { kind: "directive", type: i5.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i6.DefaultClassDirective, selector: "  [ngClass], [ngClass.xs], [ngClass.sm], [ngClass.md], [ngClass.lg], [ngClass.xl],  [ngClass.lt-sm], [ngClass.lt-md], [ngClass.lt-lg], [ngClass.lt-xl],  [ngClass.gt-xs], [ngClass.gt-sm], [ngClass.gt-md], [ngClass.gt-lg]", inputs: ["ngClass", "ngClass.xs", "ngClass.sm", "ngClass.md", "ngClass.lg", "ngClass.xl", "ngClass.lt-sm", "ngClass.lt-md", "ngClass.lt-lg", "ngClass.lt-xl", "ngClass.gt-xs", "ngClass.gt-sm", "ngClass.gt-md", "ngClass.gt-lg"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MatMiniFabMenuComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mat-mini-fab-menu', template: "<div [fxLayout]=\"layout\" class=\"container\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n  <div fxLayoutAlign=\"center\">\n    <button (click)=\"isActive = !isActive\"\n            [color]=\"color\" [disabled]=\"disabled\"\n            type=\"button\"\n            [ngClass]=\"{\n    'mat-fab' : !isActive,\n    'mat-mini-fab' : isActive\n  }\"\n            mat-mini-fab>\n      <mat-icon [@fabToggler]=\"{value: isActive}\">{{icon}}</mat-icon> <!-- Animation here -->\n    </button>\n  </div>\n  <div *ngIf=\"isActive\" [@fabsStagger]=\"fabButtons.length\"\n       [fxLayout]=\"layout2\" fxLayoutAlign=\"center center\" fxLayoutGap=\"16px\">\n    <button (click)=\"selectFabMenu(fab)\"\n            *ngFor=\"let fab of fabButtons\"\n            [color]=\"fab?.color\"\n            [matTooltip]=\"fab?.tooltip\"\n            [matTooltipPosition]=\"fab?.tooltipPosition\"\n            [ngClass]=\"{'fullSVG' : fab?.imgUrl}\"\n            type=\"button\"\n            mat-fab>\n      <mat-icon *ngIf=\"fab?.icon\" [color]=\"fab?.iconColor\">{{fab?.icon}}</mat-icon>\n      <img *ngIf=\"fab?.imgUrl\" [src]=\"fab?.imgUrl\" alt=\"icon\">\n    </button>\n  </div>\n</div>\n", styles: [":host{display:block}.fullSVG img{width:100%}.fullSVG ::ng-deep span.mat-button-wrapper{padding:0}.container>div{margin-bottom:5px}.container>div button{margin-bottom:16px}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWF0LW1pbmktZmFiLW1lbnUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1tYXRlcmlhbC1leHRlbnNpb25zL2ZhYi1tZW51L3NyYy9saWIvbWF0LW1pbmktZmFiLW1lbnUvbWF0LW1pbmktZmFiLW1lbnUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvYW5ndWxhci1tYXRlcmlhbC1leHRlbnNpb25zL2ZhYi1tZW51L3NyYy9saWIvbWF0LW1pbmktZmFiLW1lbnUvbWF0LW1pbmktZmFiLW1lbnUuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUMsbUJBQW1CLEVBQUMsTUFBTSwyQkFBMkIsQ0FBQzs7Ozs7Ozs7QUFPOUQsTUFBTSxPQUFPLHVCQUF3QixTQUFRLG1CQUFtQjs7b0hBQW5ELHVCQUF1Qjt3R0FBdkIsdUJBQXVCLGdGQ1JwQywrcENBNEJBOzJGRHBCYSx1QkFBdUI7a0JBTG5DLFNBQVM7K0JBQ0UsbUJBQW1CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge01hdEZhYk1lbnVDb21wb25lbnR9IGZyb20gJy4uL21hdC1mYWItbWVudS5jb21wb25lbnQnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdtYXQtbWluaS1mYWItbWVudScsXG4gIHRlbXBsYXRlVXJsOiAnLi9tYXQtbWluaS1mYWItbWVudS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL21hdC1taW5pLWZhYi1tZW51LmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTWF0TWluaUZhYk1lbnVDb21wb25lbnQgZXh0ZW5kcyBNYXRGYWJNZW51Q29tcG9uZW50e1xuXG59XG4iLCI8ZGl2IFtmeExheW91dF09XCJsYXlvdXRcIiBjbGFzcz1cImNvbnRhaW5lclwiIGZ4TGF5b3V0QWxpZ249XCJjZW50ZXIgY2VudGVyXCIgZnhMYXlvdXRHYXA9XCIxNnB4XCI+XG4gIDxkaXYgZnhMYXlvdXRBbGlnbj1cImNlbnRlclwiPlxuICAgIDxidXR0b24gKGNsaWNrKT1cImlzQWN0aXZlID0gIWlzQWN0aXZlXCJcbiAgICAgICAgICAgIFtjb2xvcl09XCJjb2xvclwiIFtkaXNhYmxlZF09XCJkaXNhYmxlZFwiXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIFtuZ0NsYXNzXT1cIntcbiAgICAnbWF0LWZhYicgOiAhaXNBY3RpdmUsXG4gICAgJ21hdC1taW5pLWZhYicgOiBpc0FjdGl2ZVxuICB9XCJcbiAgICAgICAgICAgIG1hdC1taW5pLWZhYj5cbiAgICAgIDxtYXQtaWNvbiBbQGZhYlRvZ2dsZXJdPVwie3ZhbHVlOiBpc0FjdGl2ZX1cIj57e2ljb259fTwvbWF0LWljb24+IDwhLS0gQW5pbWF0aW9uIGhlcmUgLS0+XG4gICAgPC9idXR0b24+XG4gIDwvZGl2PlxuICA8ZGl2ICpuZ0lmPVwiaXNBY3RpdmVcIiBbQGZhYnNTdGFnZ2VyXT1cImZhYkJ1dHRvbnMubGVuZ3RoXCJcbiAgICAgICBbZnhMYXlvdXRdPVwibGF5b3V0MlwiIGZ4TGF5b3V0QWxpZ249XCJjZW50ZXIgY2VudGVyXCIgZnhMYXlvdXRHYXA9XCIxNnB4XCI+XG4gICAgPGJ1dHRvbiAoY2xpY2spPVwic2VsZWN0RmFiTWVudShmYWIpXCJcbiAgICAgICAgICAgICpuZ0Zvcj1cImxldCBmYWIgb2YgZmFiQnV0dG9uc1wiXG4gICAgICAgICAgICBbY29sb3JdPVwiZmFiPy5jb2xvclwiXG4gICAgICAgICAgICBbbWF0VG9vbHRpcF09XCJmYWI/LnRvb2x0aXBcIlxuICAgICAgICAgICAgW21hdFRvb2x0aXBQb3NpdGlvbl09XCJmYWI/LnRvb2x0aXBQb3NpdGlvblwiXG4gICAgICAgICAgICBbbmdDbGFzc109XCJ7J2Z1bGxTVkcnIDogZmFiPy5pbWdVcmx9XCJcbiAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgbWF0LWZhYj5cbiAgICAgIDxtYXQtaWNvbiAqbmdJZj1cImZhYj8uaWNvblwiIFtjb2xvcl09XCJmYWI/Lmljb25Db2xvclwiPnt7ZmFiPy5pY29ufX08L21hdC1pY29uPlxuICAgICAgPGltZyAqbmdJZj1cImZhYj8uaW1nVXJsXCIgW3NyY109XCJmYWI/LmltZ1VybFwiIGFsdD1cImljb25cIj5cbiAgICA8L2J1dHRvbj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==