import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, HostBinding, HostListener, 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';
import * as i3 from '@aztrix/icons';
import { IconsModule } from '@aztrix/icons';
import * as i4 from '@angular/material/legacy-slide-toggle';
import { MatLegacySlideToggleModule } from '@angular/material/legacy-slide-toggle';
import * as i5 from '@aztrix/components/spinner';
import { SpinnerModule } from '@aztrix/components/spinner';

class BlockComponent {
    constructor() {
        this.action = 'link';
        this.color = '';
        this.disabled = false;
        this.loading = false;
        this.queryParams = {};
        this.queryParamsHandling = '';
        this.changed = new EventEmitter();
        this.linkUsed = false;
        this.clickableClass = false;
        this.disabledClass = true;
        this.hasLinkClass = false;
    }
    clicked(target) {
        if (!target.closest('.toggle')) {
            this.changed.emit(!this.checked);
        }
    }
    ngOnChanges(changes) {
        var _a;
        if (changes.link || changes.disabled) {
            this.linkUsed = ((_a = this.link) === null || _a === void 0 ? void 0 : _a.length) > 0;
        }
        this.clickableClass =
            (this.linkUsed || this.actionIsToggle || this.actionIsLink) && !this.disabled;
        this.hasLinkClass = this.linkUsed;
        this.disabledClass = this.disabled;
    }
    get actionIsLink() {
        return this.action === 'link';
    }
    get actionIsToggle() {
        return this.action === 'toggle';
    }
    get iconIsTemplate() {
        return typeof this.icon !== 'string';
    }
}
BlockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BlockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: BlockComponent, selector: "ax-block", inputs: { icon: "icon", action: "action", title: "title", subtitle: "subtitle", color: "color", disabled: "disabled", loading: "loading", link: "link", queryParams: "queryParams", queryParamsHandling: "queryParamsHandling", checked: "checked" }, outputs: { changed: "changed" }, host: { listeners: { "click": "clicked($event.target)" }, properties: { "class.clickable": "this.clickableClass", "class.disabled": "this.disabledClass", "class.has-link": "this.hasLinkClass" } }, usesOnChanges: true, ngImport: i0, template: "<ng-template #content>\n  <ng-container *ngIf=\"!loading\">\n    <div class=\"header\" [ngClass]=\"color\">\n      <div class=\"titles\">\n        <div class=\"title\">\n          <ng-container *ngIf=\"iconIsTemplate\">\n            <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n          </ng-container>\n          <ax-icon class=\"icon\" *ngIf=\"icon && !iconIsTemplate\" [name]=\"icon\"></ax-icon>\n          <span>{{ title }}</span>\n          <ng-content select=\".title\"></ng-content>\n        </div>\n        <div *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</div>\n      </div>\n      <span class=\"action cy-action\">\n        <ng-content select=\".action\"></ng-content>\n        <ax-icon class=\"icon\" *ngIf=\"actionIsLink\" name=\"chevron-right\"></ax-icon>\n        <mat-slide-toggle\n          class=\"toggle\"\n          *ngIf=\"actionIsToggle\"\n          (change)=\"changed.emit($event.checked)\"\n          [checked]=\"checked\"\n        >\n        </mat-slide-toggle>\n      </span>\n    </div>\n    <div class=\"content\" #contentRef [ngClass]=\"contentRef?.innerHTML?.trim() ? '' : 'empty'\">\n      <ng-content></ng-content>\n    </div>\n  </ng-container>\n  <ax-spinner *ngIf=\"loading\"></ax-spinner>\n</ng-template>\n\n<a\n  class=\"wrapper link\"\n  *ngIf=\"linkUsed && !disabled; else linkNotUsed\"\n  [routerLink]=\"link\"\n  [queryParams]=\"queryParams\"\n  [queryParamsHandling]=\"queryParamsHandling\"\n>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-template #linkNotUsed>\n  <div class=\"wrapper\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n</ng-template>\n", styles: [":host{display:block;background-color:#fff}:host.clickable{cursor:pointer;-webkit-user-select:none;user-select:none}:host.clickable:hover{background-color:#f5f5f5}:host.disabled,:host.disabled .content{cursor:not-allowed;color:#bdc3c9;transition:color .2s}:host.has-link{padding:0}.wrapper{display:block;position:relative;padding:1rem}.header{display:flex;align-items:center;justify-content:space-between;font-size:1rem}.title{display:flex;font-weight:700;align-items:center}.title .icon{width:1.25rem;height:1.25rem;margin-right:.5rem}.subtitle{margin-top:.1rem}.action{margin-left:1rem;display:flex;align-items:center}.action .icon{margin-left:.75rem}.content{color:#7a8692;max-width:500px;font-size:.875rem;margin-top:.75rem;white-space:normal}.content.empty{display:none}.link:hover{background-color:#f5f5f5}.link,.link:active,.link:visited{color:#555}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i4.MatLegacySlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5.SpinnerComponent, selector: "ax-spinner" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BlockComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-block', template: "<ng-template #content>\n  <ng-container *ngIf=\"!loading\">\n    <div class=\"header\" [ngClass]=\"color\">\n      <div class=\"titles\">\n        <div class=\"title\">\n          <ng-container *ngIf=\"iconIsTemplate\">\n            <ng-container *ngTemplateOutlet=\"icon\"></ng-container>\n          </ng-container>\n          <ax-icon class=\"icon\" *ngIf=\"icon && !iconIsTemplate\" [name]=\"icon\"></ax-icon>\n          <span>{{ title }}</span>\n          <ng-content select=\".title\"></ng-content>\n        </div>\n        <div *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</div>\n      </div>\n      <span class=\"action cy-action\">\n        <ng-content select=\".action\"></ng-content>\n        <ax-icon class=\"icon\" *ngIf=\"actionIsLink\" name=\"chevron-right\"></ax-icon>\n        <mat-slide-toggle\n          class=\"toggle\"\n          *ngIf=\"actionIsToggle\"\n          (change)=\"changed.emit($event.checked)\"\n          [checked]=\"checked\"\n        >\n        </mat-slide-toggle>\n      </span>\n    </div>\n    <div class=\"content\" #contentRef [ngClass]=\"contentRef?.innerHTML?.trim() ? '' : 'empty'\">\n      <ng-content></ng-content>\n    </div>\n  </ng-container>\n  <ax-spinner *ngIf=\"loading\"></ax-spinner>\n</ng-template>\n\n<a\n  class=\"wrapper link\"\n  *ngIf=\"linkUsed && !disabled; else linkNotUsed\"\n  [routerLink]=\"link\"\n  [queryParams]=\"queryParams\"\n  [queryParamsHandling]=\"queryParamsHandling\"\n>\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</a>\n\n<ng-template #linkNotUsed>\n  <div class=\"wrapper\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </div>\n</ng-template>\n", styles: [":host{display:block;background-color:#fff}:host.clickable{cursor:pointer;-webkit-user-select:none;user-select:none}:host.clickable:hover{background-color:#f5f5f5}:host.disabled,:host.disabled .content{cursor:not-allowed;color:#bdc3c9;transition:color .2s}:host.has-link{padding:0}.wrapper{display:block;position:relative;padding:1rem}.header{display:flex;align-items:center;justify-content:space-between;font-size:1rem}.title{display:flex;font-weight:700;align-items:center}.title .icon{width:1.25rem;height:1.25rem;margin-right:.5rem}.subtitle{margin-top:.1rem}.action{margin-left:1rem;display:flex;align-items:center}.action .icon{margin-left:.75rem}.content{color:#7a8692;max-width:500px;font-size:.875rem;margin-top:.75rem;white-space:normal}.content.empty{display:none}.link:hover{background-color:#f5f5f5}.link,.link:active,.link:visited{color:#555}\n"] }]
        }], propDecorators: { icon: [{
                type: Input
            }], action: [{
                type: Input
            }], title: [{
                type: Input
            }], subtitle: [{
                type: Input
            }], color: [{
                type: Input
            }], disabled: [{
                type: Input
            }], loading: [{
                type: Input
            }], link: [{
                type: Input
            }], queryParams: [{
                type: Input
            }], queryParamsHandling: [{
                type: Input
            }], checked: [{
                type: Input
            }], changed: [{
                type: Output
            }], clickableClass: [{
                type: HostBinding,
                args: ['class.clickable']
            }], disabledClass: [{
                type: HostBinding,
                args: ['class.disabled']
            }], hasLinkClass: [{
                type: HostBinding,
                args: ['class.has-link']
            }], clicked: [{
                type: HostListener,
                args: ['click', ['$event.target']]
            }] } });

class BlockModule {
}
BlockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BlockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
BlockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: BlockModule, declarations: [BlockComponent], imports: [CommonModule, RouterModule, IconsModule, MatLegacySlideToggleModule, SpinnerModule], exports: [BlockComponent] });
BlockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BlockModule, imports: [CommonModule, RouterModule, IconsModule, MatLegacySlideToggleModule, SpinnerModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BlockModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [BlockComponent],
                    imports: [CommonModule, RouterModule, IconsModule, MatLegacySlideToggleModule, SpinnerModule],
                    exports: [BlockComponent],
                }]
        }] });

class BlocksComponent {
}
BlocksComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BlocksComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
BlocksComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.1.5", type: BlocksComponent, selector: "ax-blocks", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"title\" *ngIf=\"title\">{{ title }}</div>\n<ng-content></ng-content>\n", styles: [":host{padding:.5rem 0;display:block}.title{text-transform:uppercase;font-size:.875rem;font-weight:600;padding:.5rem .5rem .5rem 1rem;margin-top:.5rem}.title:first-child{margin-top:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BlocksComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ax-blocks', template: "<div class=\"title\" *ngIf=\"title\">{{ title }}</div>\n<ng-content></ng-content>\n", styles: [":host{padding:.5rem 0;display:block}.title{text-transform:uppercase;font-size:.875rem;font-weight:600;padding:.5rem .5rem .5rem 1rem;margin-top:.5rem}.title:first-child{margin-top:0}\n"] }]
        }], propDecorators: { title: [{
                type: Input
            }] } });

class BlocksModule {
}
BlocksModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BlocksModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
BlocksModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.1.5", ngImport: i0, type: BlocksModule, declarations: [BlocksComponent], imports: [CommonModule, RouterModule, IconsModule, BlockModule], exports: [BlocksComponent, BlockModule] });
BlocksModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BlocksModule, imports: [CommonModule, RouterModule, IconsModule, BlockModule, BlockModule] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.1.5", ngImport: i0, type: BlocksModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [BlocksComponent],
                    imports: [CommonModule, RouterModule, IconsModule, BlockModule],
                    exports: [BlocksComponent, BlockModule],
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { BlockComponent, BlockModule, BlocksComponent, BlocksModule };
//# sourceMappingURL=aztrix-components-blocks.mjs.map
//# sourceMappingURL=aztrix-components-blocks.mjs.map
