import { Component, effect, input } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "@angular/common";
import * as i3 from "../icon/icon.component";
import * as i4 from "./link.directive";
export class LinkComponent {
    constructor(router, el, renderer) {
        this.router = router;
        this.el = el;
        this.renderer = renderer;
        /**
         * Link id
         */
        this.id = input('');
        /**
         * Link route
         */
        this.href = input('');
        /**
         * Link target (default _self)
         */
        this.target = input('_self');
        /**
         * Link label
         */
        this.label = input('');
        /**
         * Link aria-label for icons/images-links
         */
        this.ariaLabel = input('');
        /**
         * Link fontcolor
         */
        this.color = input('');
        /**
         * Link mat-icon
         */
        this.icon = input();
        /**
         * Icon position: 'left' or 'right' (default right)
         */
        this.iconPosition = input('right');
        /**
         * Link relation
         */
        this.rel = input('');
        /**
         * Link router
         */
        this.routerLink = input('');
        /**
         * Is the link disabled ?
         */
        this.disabled = input(false);
        /**
         * Is active element/link ?
         */
        this.active = input(false);
        /**
         * Title with target="_blank": New tab (default langage: en)
         */
        this.titleNewWindow = input('New tab');
        effect(() => {
            if (this.ariaLabel() || this.label() || this.target() || this.active() || this.disabled()) {
                this.ngOnInit();
            }
        });
    }
    ngOnInit() {
        this.title = this.getTitle();
        this.tabIndex = this.getTabIndex();
        this.renderer.removeAttribute(this.el.nativeElement, 'tabindex');
    }
    /**
     * Determine the link title regarding target and ariaLabel
     */
    getTitle() {
        if (this.target() === '_blank') {
            if (this.ariaLabel()) {
                return `${this.ariaLabel()}: ${this.titleNewWindow()}`;
            }
            return `${this.label()}: ${this.titleNewWindow()}`;
        }
        else if (this.ariaLabel()) {
            return this.ariaLabel();
        }
        return this.label();
    }
    /**
     * Determine the tab index form disabled and active attribute
     */
    getTabIndex() {
        if (this.disabled() || this.active()) {
            return -1;
        }
        return 0;
    }
    onClick() {
        if (!this.disabled() && this.routerLink()) {
            this.router.navigate([this.routerLink()]);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LinkComponent, deps: [{ token: i1.Router }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: LinkComponent, selector: "mic-link", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, target: { classPropertyName: "target", publicName: "target", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, rel: { classPropertyName: "rel", publicName: "rel", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, titleNewWindow: { classPropertyName: "titleNewWindow", publicName: "titleNewWindow", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (href()) {\n<a\n  id=\"{{ id() }}\"\n  [href]=\"href()\"\n  [target]=\"target()\"\n  [class]=\"color()\"\n  [title]=\"title\"\n  [rel]=\"rel()\"\n  [ngClass]=\"{ disabled: disabled(), icon: icon(), active: active() }\"\n  [tabindex]=\"tabIndex\"\n>\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</a>\n} @else {\n<a\n  id=\"{{ id() }}\"\n  [target]=\"target()\"\n  [class]=\"color()\"\n  [title]=\"title\"\n  [rel]=\"rel()\"\n  [ngClass]=\"{ disabled: disabled(), icon: icon(), active: active() }\"\n  (click)=\"onClick()\"\n  (keydown.enter)=\"onClick()\"\n  [tabindex]=\"tabIndex\"\n>\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</a>\n}\n\n<ng-template #contentTemplate>\n  @if (icon()) {\n  <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n  } @else {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #iconTemplate>\n  @if (label()) { @if (iconPosition() === 'left') {\n  <mic-icon class=\"mic-icon-link\" [icon]=\"icon()\"></mic-icon>\n  <span class=\"mic-space-link\">&nbsp;</span>\n  <p class=\"mic-label-link\">{{ label() }}</p>\n  } @if (iconPosition() === 'right') {\n  <p class=\"mic-label-link\">{{ label() }}</p>\n  <span class=\"mic-space-link\">&nbsp;</span>\n  <mic-icon class=\"mic-icon-link\" [icon]=\"icon()\"></mic-icon>\n  } } @else {\n  <ng-container *ngTemplateOutlet=\"iconOnly\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (label()) {\n  <p class=\"mic-label-link\">{{ label() }}</p>\n  } @else {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #iconOnly>\n  <mic-icon class=\"mic-icon-link\" [icon]=\"icon()\" [attr.aria-label]=\"ariaLabel()\" aria-hidden=\"false\"></mic-icon>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host a{display:flex;width:max-content;align-items:center}:host .mic-label-link{margin:0}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.IconComponent, selector: "mic-icon", inputs: ["icon", "fontSet", "ariaLabel", "decorative"] }, { kind: "directive", type: i4.LinkDirective, selector: "a", inputs: ["color"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: LinkComponent, decorators: [{
            type: Component,
            args: [{ selector: 'mic-link', template: "@if (href()) {\n<a\n  id=\"{{ id() }}\"\n  [href]=\"href()\"\n  [target]=\"target()\"\n  [class]=\"color()\"\n  [title]=\"title\"\n  [rel]=\"rel()\"\n  [ngClass]=\"{ disabled: disabled(), icon: icon(), active: active() }\"\n  [tabindex]=\"tabIndex\"\n>\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</a>\n} @else {\n<a\n  id=\"{{ id() }}\"\n  [target]=\"target()\"\n  [class]=\"color()\"\n  [title]=\"title\"\n  [rel]=\"rel()\"\n  [ngClass]=\"{ disabled: disabled(), icon: icon(), active: active() }\"\n  (click)=\"onClick()\"\n  (keydown.enter)=\"onClick()\"\n  [tabindex]=\"tabIndex\"\n>\n  <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\n</a>\n}\n\n<ng-template #contentTemplate>\n  @if (icon()) {\n  <ng-container *ngTemplateOutlet=\"iconTemplate\"></ng-container>\n  } @else {\n  <ng-container *ngTemplateOutlet=\"labelTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #iconTemplate>\n  @if (label()) { @if (iconPosition() === 'left') {\n  <mic-icon class=\"mic-icon-link\" [icon]=\"icon()\"></mic-icon>\n  <span class=\"mic-space-link\">&nbsp;</span>\n  <p class=\"mic-label-link\">{{ label() }}</p>\n  } @if (iconPosition() === 'right') {\n  <p class=\"mic-label-link\">{{ label() }}</p>\n  <span class=\"mic-space-link\">&nbsp;</span>\n  <mic-icon class=\"mic-icon-link\" [icon]=\"icon()\"></mic-icon>\n  } } @else {\n  <ng-container *ngTemplateOutlet=\"iconOnly\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #labelTemplate>\n  @if (label()) {\n  <p class=\"mic-label-link\">{{ label() }}</p>\n  } @else {\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #iconOnly>\n  <mic-icon class=\"mic-icon-link\" [icon]=\"icon()\" [attr.aria-label]=\"ariaLabel()\" aria-hidden=\"false\"></mic-icon>\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", styles: [":host a{display:flex;width:max-content;align-items:center}:host .mic-label-link{margin:0}\n"] }]
        }], ctorParameters: () => [{ type: i1.Router }, { type: i0.ElementRef }, { type: i0.Renderer2 }] });
//# sourceMappingURL=data:application/json;base64, 