import { Component, EventEmitter, HostBinding, HostListener, Input, Output, } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/router";
import * as i3 from "@aztrix/icons";
import * as i4 from "@angular/material/slide-toggle";
import * as i5 from "@aztrix/components/spinner";
export 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) {
        if (changes.link || changes.disabled) {
            this.linkUsed = this.link?.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';
    }
    get iconTemplate() {
        return this.icon;
    }
    get iconString() {
        return this.icon;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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=\"iconTemplate\"></ng-container>\n          </ng-container>\n          <ax-icon class=\"icon\" *ngIf=\"icon && !iconIsTemplate\" [name]=\"iconString\"></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", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.IconComponent, selector: "ax-icon", inputs: ["name", "inline"] }, { kind: "component", type: i4.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: i5.SpinnerComponent, selector: "ax-spinner" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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=\"iconTemplate\"></ng-container>\n          </ng-container>\n          <ax-icon class=\"icon\" *ngIf=\"icon && !iconIsTemplate\" [name]=\"iconString\"></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']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 