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

Taiga UI Angular main components kit

import { __extends, __decorate, __param } from 'tslib';
import { Inject, ElementRef, Input, ViewChild, HostListener, Component, ChangeDetectionStrategy, forwardRef, NgModule } from '@angular/core';
import { isNativeFocused, TuiFocusVisibleService, tuiDefaultProp, TuiDestroyService, TUI_FOCUSABLE_ITEM_ACCESSOR, AbstractTuiInteractive, 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 = /** @class */ (function (_super) {
    __extends(TuiActionComponent, _super);
    function TuiActionComponent(focusVisible$, elementRef) {
        var _this = _super.call(this) || this;
        _this.elementRef = elementRef;
        _this.icon = '';
        _this.isLink = _this.elementRef.nativeElement.tagName.toLowerCase() === 'a';
        _this.disabled = false;
        if (!_this.isLink) {
            return _this;
        }
        focusVisible$.subscribe(function (visible) {
            _this.updateFocusVisible(visible);
        });
        return _this;
    }
    TuiActionComponent_1 = TuiActionComponent;
    Object.defineProperty(TuiActionComponent.prototype, "nativeFocusableElement", {
        get: function () {
            if (this.isLink) {
                return this.elementRef.nativeElement;
            }
            return this.focusableElement ? this.focusableElement.nativeElement : null;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(TuiActionComponent.prototype, "focused", {
        get: function () {
            return isNativeFocused(this.nativeFocusableElement);
        },
        enumerable: true,
        configurable: true
    });
    TuiActionComponent.prototype.onFocused = function (focused) {
        this.updateFocused(focused);
    };
    TuiActionComponent.prototype.onHovered = function (hovered) {
        this.updateHovered(hovered);
    };
    TuiActionComponent.prototype.onFocusVisible = function (focusVisible) {
        this.updateFocusVisible(focusVisible);
    };
    var TuiActionComponent_1;
    TuiActionComponent.ctorParameters = function () { return [
        { 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(function () { return 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);
    return TuiActionComponent;
}(AbstractTuiInteractive));

var TuiActionModule = /** @class */ (function () {
    function TuiActionModule() {
    }
    TuiActionModule = __decorate([
        NgModule({
            imports: [
                CommonModule,
                TuiFocusableModule,
                TuiFocusVisibleModule,
                TuiDescribedByModule,
                TuiMarkerIconModule,
            ],
            declarations: [TuiActionComponent],
            exports: [TuiActionComponent],
        })
    ], TuiActionModule);
    return TuiActionModule;
}());

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

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