@taiga-ui/kit
Version:
Taiga UI Angular main components kit
88 lines • 11.1 kB
JavaScript
import { __decorate, __extends, __param } from "tslib";
import { ChangeDetectionStrategy, Component, ElementRef, forwardRef, HostListener, Inject, Input, ViewChild, } from '@angular/core';
import { AbstractTuiInteractive, isNativeFocused, TUI_FOCUSABLE_ITEM_ACCESSOR, tuiDefaultProp, TuiDestroyService, TuiFocusVisibleService, TuiNativeFocusableElement, } from '@taiga-ui/cdk';
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));
export { TuiActionComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B0YWlnYS11aS9raXQvY29tcG9uZW50cy9hY3Rpb24vIiwic291cmNlcyI6WyJhY3Rpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsVUFBVSxFQUNWLFlBQVksRUFDWixNQUFNLEVBQ04sS0FBSyxFQUNMLFNBQVMsR0FDWixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQ0gsc0JBQXNCLEVBQ3RCLGVBQWUsRUFDZiwyQkFBMkIsRUFDM0IsY0FBYyxFQUNkLGlCQUFpQixFQUNqQixzQkFBc0IsRUFDdEIseUJBQXlCLEdBQzVCLE1BQU0sZUFBZSxDQUFDO0FBZ0J2QjtJQUF3QyxzQ0FBc0I7SUFZMUQsNEJBQ29DLGFBQXFDLEVBQ2hDLFVBQW1DO1FBRjVFLFlBSUksaUJBQU8sU0FTVjtRQVh3QyxnQkFBVSxHQUFWLFVBQVUsQ0FBeUI7UUFYNUUsVUFBSSxHQUFHLEVBQUUsQ0FBQztRQUVELFlBQU0sR0FBRyxLQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsV0FBVyxFQUFFLEtBQUssR0FBRyxDQUFDO1FBRXJFLGNBQVEsR0FBRyxLQUFLLENBQUM7UUFXdEIsSUFBSSxDQUFDLEtBQUksQ0FBQyxNQUFNLEVBQUU7O1NBRWpCO1FBRUQsYUFBYSxDQUFDLFNBQVMsQ0FBQyxVQUFBLE9BQU87WUFDM0IsS0FBSSxDQUFDLGtCQUFrQixDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3JDLENBQUMsQ0FBQyxDQUFDOztJQUNQLENBQUM7MkJBekJRLGtCQUFrQjtJQTJCM0Isc0JBQUksc0RBQXNCO2FBQTFCO1lBQ0ksSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO2dCQUNiLE9BQU8sSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUM7YUFDeEM7WUFFRCxPQUFPLElBQUksQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDO1FBQzlFLENBQUM7OztPQUFBO0lBRUQsc0JBQUksdUNBQU87YUFBWDtZQUNJLE9BQU8sZUFBZSxDQUFDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO1FBQ3hELENBQUM7OztPQUFBO0lBSUQsc0NBQVMsR0FBVCxVQUFVLE9BQWdCO1FBQ3RCLElBQUksQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUlELHNDQUFTLEdBQVQsVUFBVSxPQUFnQjtRQUN0QixJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDO0lBQ2hDLENBQUM7SUFFRCwyQ0FBYyxHQUFkLFVBQWUsWUFBcUI7UUFDaEMsSUFBSSxDQUFDLGtCQUFrQixDQUFDLFlBQVksQ0FBQyxDQUFDO0lBQzFDLENBQUM7OztnQkF4Q2tELHNCQUFzQix1QkFBcEUsTUFBTSxTQUFDLHNCQUFzQjtnQkFDbUIsVUFBVSx1QkFBMUQsTUFBTSxTQUFDLFVBQVU7O0lBWHRCO1FBRkMsS0FBSyxFQUFFO1FBQ1AsY0FBYyxFQUFFO29EQUNQO0lBT1Y7UUFEQyxTQUFTLENBQUMsa0JBQWtCLENBQUM7Z0VBQzRDO0lBK0IxRTtRQUZDLFlBQVksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNqQyxZQUFZLENBQUMsVUFBVSxFQUFFLENBQUMsT0FBTyxDQUFDLENBQUM7dURBR25DO0lBSUQ7UUFGQyxZQUFZLENBQUMsWUFBWSxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDcEMsWUFBWSxDQUFDLFlBQVksRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDO3VEQUdyQztJQWpEUSxrQkFBa0I7UUFkOUIsU0FBUyxDQUFDO1lBQ1AsUUFBUSxFQUFFLDBCQUEwQjtZQUNwQyxvc0JBQXFDO1lBRXJDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO1lBQy9DLFNBQVMsRUFBRTtnQkFDUCxpQkFBaUI7Z0JBQ2pCLHNCQUFzQjtnQkFDdEI7b0JBQ0ksT0FBTyxFQUFFLDJCQUEyQjtvQkFDcEMsV0FBVyxFQUFFLFVBQVUsQ0FBQyxjQUFNLE9BQUEsb0JBQWtCLEVBQWxCLENBQWtCLENBQUM7aUJBQ3BEO2FBQ0o7O1NBQ0osQ0FBQztRQWNPLFdBQUEsTUFBTSxDQUFDLHNCQUFzQixDQUFDLENBQUE7UUFDOUIsV0FBQSxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUE7T0FkZCxrQkFBa0IsQ0FzRDlCO0lBQUQseUJBQUM7Q0FBQSxBQXRERCxDQUF3QyxzQkFBc0IsR0FzRDdEO1NBdERZLGtCQUFrQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIEVsZW1lbnRSZWYsXG4gICAgZm9yd2FyZFJlZixcbiAgICBIb3N0TGlzdGVuZXIsXG4gICAgSW5qZWN0LFxuICAgIElucHV0LFxuICAgIFZpZXdDaGlsZCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQge1xuICAgIEFic3RyYWN0VHVpSW50ZXJhY3RpdmUsXG4gICAgaXNOYXRpdmVGb2N1c2VkLFxuICAgIFRVSV9GT0NVU0FCTEVfSVRFTV9BQ0NFU1NPUixcbiAgICB0dWlEZWZhdWx0UHJvcCxcbiAgICBUdWlEZXN0cm95U2VydmljZSxcbiAgICBUdWlGb2N1c1Zpc2libGVTZXJ2aWNlLFxuICAgIFR1aU5hdGl2ZUZvY3VzYWJsZUVsZW1lbnQsXG59IGZyb20gJ0B0YWlnYS11aS9jZGsnO1xuXG5AQ29tcG9uZW50KHtcbiAgICBzZWxlY3RvcjogJ3R1aS1hY3Rpb24sIGFbdHVpQWN0aW9uXScsXG4gICAgdGVtcGxhdGVVcmw6ICcuL2FjdGlvbi50ZW1wbGF0ZS5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9hY3Rpb24uc3R5bGUubGVzcyddLFxuICAgIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxuICAgIHByb3ZpZGVyczogW1xuICAgICAgICBUdWlEZXN0cm95U2VydmljZSxcbiAgICAgICAgVHVpRm9jdXNWaXNpYmxlU2VydmljZSxcbiAgICAgICAge1xuICAgICAgICAgICAgcHJvdmlkZTogVFVJX0ZPQ1VTQUJMRV9JVEVNX0FDQ0VTU09SLFxuICAgICAgICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gVHVpQWN0aW9uQ29tcG9uZW50KSxcbiAgICAgICAgfSxcbiAgICBdLFxufSlcbmV4cG9ydCBjbGFzcyBUdWlBY3Rpb25Db21wb25lbnQgZXh0ZW5kcyBBYnN0cmFjdFR1aUludGVyYWN0aXZlIHtcbiAgICBASW5wdXQoKVxuICAgIEB0dWlEZWZhdWx0UHJvcCgpXG4gICAgaWNvbiA9ICcnO1xuXG4gICAgcmVhZG9ubHkgaXNMaW5rID0gdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQudGFnTmFtZS50b0xvd2VyQ2FzZSgpID09PSAnYSc7XG5cbiAgICByZWFkb25seSBkaXNhYmxlZCA9IGZhbHNlO1xuXG4gICAgQFZpZXdDaGlsZCgnZm9jdXNhYmxlRWxlbWVudCcpXG4gICAgcHJpdmF0ZSByZWFkb25seSBmb2N1c2FibGVFbGVtZW50PzogRWxlbWVudFJlZjxUdWlOYXRpdmVGb2N1c2FibGVFbGVtZW50PjtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBASW5qZWN0KFR1aUZvY3VzVmlzaWJsZVNlcnZpY2UpIGZvY3VzVmlzaWJsZSQ6IFR1aUZvY3VzVmlzaWJsZVNlcnZpY2UsXG4gICAgICAgIEBJbmplY3QoRWxlbWVudFJlZikgcHJpdmF0ZSByZWFkb25seSBlbGVtZW50UmVmOiBFbGVtZW50UmVmPEhUTUxFbGVtZW50PixcbiAgICApIHtcbiAgICAgICAgc3VwZXIoKTtcblxuICAgICAgICBpZiAoIXRoaXMuaXNMaW5rKSB7XG4gICAgICAgICAgICByZXR1cm47XG4gICAgICAgIH1cblxuICAgICAgICBmb2N1c1Zpc2libGUkLnN1YnNjcmliZSh2aXNpYmxlID0+IHtcbiAgICAgICAgICAgIHRoaXMudXBkYXRlRm9jdXNWaXNpYmxlKHZpc2libGUpO1xuICAgICAgICB9KTtcbiAgICB9XG5cbiAgICBnZXQgbmF0aXZlRm9jdXNhYmxlRWxlbWVudCgpOiBUdWlOYXRpdmVGb2N1c2FibGVFbGVtZW50IHwgbnVsbCB7XG4gICAgICAgIGlmICh0aGlzLmlzTGluaykge1xuICAgICAgICAgICAgcmV0dXJuIHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50O1xuICAgICAgICB9XG5cbiAgICAgICAgcmV0dXJuIHRoaXMuZm9jdXNhYmxlRWxlbWVudCA/IHRoaXMuZm9jdXNhYmxlRWxlbWVudC5uYXRpdmVFbGVtZW50IDogbnVsbDtcbiAgICB9XG5cbiAgICBnZXQgZm9jdXNlZCgpOiBib29sZWFuIHtcbiAgICAgICAgcmV0dXJuIGlzTmF0aXZlRm9jdXNlZCh0aGlzLm5hdGl2ZUZvY3VzYWJsZUVsZW1lbnQpO1xuICAgIH1cblxuICAgIEBIb3N0TGlzdGVuZXIoJ2ZvY3VzaW4nLCBbJ3RydWUnXSlcbiAgICBASG9zdExpc3RlbmVyKCdmb2N1c291dCcsIFsnZmFsc2UnXSlcbiAgICBvbkZvY3VzZWQoZm9jdXNlZDogYm9vbGVhbikge1xuICAgICAgICB0aGlzLnVwZGF0ZUZvY3VzZWQoZm9jdXNlZCk7XG4gICAgfVxuXG4gICAgQEhvc3RMaXN0ZW5lcignbW91c2VlbnRlcicsIFsndHJ1ZSddKVxuICAgIEBIb3N0TGlzdGVuZXIoJ21vdXNlbGVhdmUnLCBbJ2ZhbHNlJ10pXG4gICAgb25Ib3ZlcmVkKGhvdmVyZWQ6IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy51cGRhdGVIb3ZlcmVkKGhvdmVyZWQpO1xuICAgIH1cblxuICAgIG9uRm9jdXNWaXNpYmxlKGZvY3VzVmlzaWJsZTogYm9vbGVhbikge1xuICAgICAgICB0aGlzLnVwZGF0ZUZvY3VzVmlzaWJsZShmb2N1c1Zpc2libGUpO1xuICAgIH1cbn1cbiJdfQ==