@taiga-ui/kit/fesm2015/taiga-ui-kit-components-action.js

Taiga UI Angular main components kit

import { __decorate, __param } from 'tslib';
import { Inject, ElementRef, Input, ViewChild, HostListener, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { AbstractTuiInteractive, isNativeFocused, TuiFocusVisibleService, tuiDefaultProp, TuiDestroyService, TUI_FOCUSABLE_ITEM_ACCESSOR, TuiFocusableModule, TuiFocusVisibleModule } from '@taiga-ui/cdk';
import { CommonModule } from '@angular/common';
import { TuiDescribedByModule } from '@taiga-ui/core';
import { TuiMarkerIconModule } from '@taiga-ui/kit/components/marker-icon';

var TuiActionComponent_1;
let TuiActionComponent = TuiActionComponent_1 = class TuiActionComponent extends AbstractTuiInteractive {
    constructor(focusVisible$, elementRef) {
        super();
        this.elementRef = elementRef;
        this.icon = '';
        this.isLink = this.elementRef.nativeElement.tagName.toLowerCase() === 'a';
        this.disabled = false;
        if (!this.isLink) {
            return;
        }
        focusVisible$.subscribe(visible => {
            this.updateFocusVisible(visible);
        });
    }
    get nativeFocusableElement() {
        if (this.isLink) {
            return this.elementRef.nativeElement;
        }
        return this.focusableElement ? this.focusableElement.nativeElement : null;
    }
    get focused() {
        return isNativeFocused(this.nativeFocusableElement);
    }
    onFocused(focused) {
        this.updateFocused(focused);
    }
    onHovered(hovered) {
        this.updateHovered(hovered);
    }
    onFocusVisible(focusVisible) {
        this.updateFocusVisible(focusVisible);
    }
};
TuiActionComponent.ctorParameters = () => [
    { type: TuiFocusVisibleService, decorators: [{ type: Inject, args: [TuiFocusVisibleService,] }] },
    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] }
];
__decorate([
    Input(),
    tuiDefaultProp()
], TuiActionComponent.prototype, "icon", void 0);
__decorate([
    ViewChild('focusableElement')
], TuiActionComponent.prototype, "focusableElement", void 0);
__decorate([
    HostListener('focusin', ['true']),
    HostListener('focusout', ['false'])
], TuiActionComponent.prototype, "onFocused", null);
__decorate([
    HostListener('mouseenter', ['true']),
    HostListener('mouseleave', ['false'])
], TuiActionComponent.prototype, "onHovered", null);
TuiActionComponent = TuiActionComponent_1 = __decorate([
    Component({
        selector: 'tui-action, a[tuiAction]',
        template: "<label\n    *ngIf=\"!isLink; else content\"\n    automation-id=\"tui-action__content\"\n    class=\"wrapper\"\n>\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    <button\n        #focusableElement\n        class=\"button\"\n        type=\"button\"\n        automation-id=\"tui-action__native\"\n        [id]=\"id\"\n        [tuiDescribedBy]=\"id\"\n        [tuiFocusable]=\"computedFocusable\"\n        (tuiFocusVisibleChange)=\"onFocusVisible($event)\"\n    ></button>\n</label>\n<ng-template #content>\n    <div class=\"wrapper\">\n        <ng-content></ng-content>\n    </div>\n</ng-template>\n<tui-marker-icon class=\"icon\" size=\"s\" [src]=\"icon\"></tui-marker-icon>\n",
        changeDetection: ChangeDetectionStrategy.OnPush,
        providers: [
            TuiDestroyService,
            TuiFocusVisibleService,
            {
                provide: TUI_FOCUSABLE_ITEM_ACCESSOR,
                useExisting: forwardRef(() => TuiActionComponent_1),
            },
        ],
        styles: [":host{box-shadow:0 4px 24px rgba(0,0,0,.12);transition-duration:.3s;transition-timing-function:ease-in-out;cursor:pointer;transition-property:transform,box-shadow;will-change:transform,box-shadow;font:var(--tui-font-text-m);position:relative;display:flex;padding:14px;color:var(--tui-text-01);text-decoration:none;border:2px solid transparent;border-radius:var(--tui-radius-l);outline:0}:host:hover{box-shadow:0 12px 36px rgba(0,0,0,.2);transform:translateY(-4px)}:host._focus-visible{border-color:var(--tui-focus)}.button{position:absolute;top:0;left:0;width:100%;height:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;border:0;background:0 0;font-size:inherit;line-height:inherit;cursor:pointer;outline:0}.icon{margin-left:20px;color:var(--tui-link)}.wrapper{flex:1}"]
    }),
    __param(0, Inject(TuiFocusVisibleService)),
    __param(1, Inject(ElementRef))
], TuiActionComponent);

let TuiActionModule = class TuiActionModule {
};
TuiActionModule = __decorate([
    NgModule({
        imports: [
            CommonModule,
            TuiFocusableModule,
            TuiFocusVisibleModule,
            TuiDescribedByModule,
            TuiMarkerIconModule,
        ],
        declarations: [TuiActionComponent],
        exports: [TuiActionComponent],
    })
], TuiActionModule);

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

export { TuiActionComponent, TuiActionModule };
//# sourceMappingURL=taiga-ui-kit-components-action.js.map