@taiga-ui/kit
Version:
Taiga UI Angular main components kit
76 lines • 10.2 kB
JavaScript
var TuiActionComponent_1;
import { __decorate, __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';
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);
export { TuiActionComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWN0aW9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0B0YWlnYS11aS9raXQvY29tcG9uZW50cy9hY3Rpb24vIiwic291cmNlcyI6WyJhY3Rpb24uY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7O0FBQUEsT0FBTyxFQUNILHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsVUFBVSxFQUNWLFVBQVUsRUFDVixZQUFZLEVBQ1osTUFBTSxFQUNOLEtBQUssRUFDTCxTQUFTLEdBQ1osTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUNILHNCQUFzQixFQUN0QixlQUFlLEVBQ2YsMkJBQTJCLEVBQzNCLGNBQWMsRUFDZCxpQkFBaUIsRUFDakIsc0JBQXNCLEVBQ3RCLHlCQUF5QixHQUM1QixNQUFNLGVBQWUsQ0FBQztBQWdCdkIsSUFBYSxrQkFBa0IsMEJBQS9CLE1BQWEsa0JBQW1CLFNBQVEsc0JBQXNCO0lBWTFELFlBQ29DLGFBQXFDLEVBQ2hDLFVBQW1DO1FBRXhFLEtBQUssRUFBRSxDQUFDO1FBRjZCLGVBQVUsR0FBVixVQUFVLENBQXlCO1FBWDVFLFNBQUksR0FBRyxFQUFFLENBQUM7UUFFRCxXQUFNLEdBQUcsSUFBSSxDQUFDLFVBQVUsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLFdBQVcsRUFBRSxLQUFLLEdBQUcsQ0FBQztRQUVyRSxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBV3RCLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ2QsT0FBTztTQUNWO1FBRUQsYUFBYSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsRUFBRTtZQUM5QixJQUFJLENBQUMsa0JBQWtCLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDckMsQ0FBQyxDQUFDLENBQUM7SUFDUCxDQUFDO0lBRUQsSUFBSSxzQkFBc0I7UUFDdEIsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ2IsT0FBTyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQztTQUN4QztRQUVELE9BQU8sSUFBSSxDQUFDLGdCQUFnQixDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsYUFBYSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDOUUsQ0FBQztJQUVELElBQUksT0FBTztRQUNQLE9BQU8sZUFBZSxDQUFDLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyxDQUFDO0lBQ3hELENBQUM7SUFJRCxTQUFTLENBQUMsT0FBZ0I7UUFDdEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxPQUFPLENBQUMsQ0FBQztJQUNoQyxDQUFDO0lBSUQsU0FBUyxDQUFDLE9BQWdCO1FBQ3RCLElBQUksQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDaEMsQ0FBQztJQUVELGNBQWMsQ0FBQyxZQUFxQjtRQUNoQyxJQUFJLENBQUMsa0JBQWtCLENBQUMsWUFBWSxDQUFDLENBQUM7SUFDMUMsQ0FBQztDQUNKLENBQUE7O1lBekNzRCxzQkFBc0IsdUJBQXBFLE1BQU0sU0FBQyxzQkFBc0I7WUFDbUIsVUFBVSx1QkFBMUQsTUFBTSxTQUFDLFVBQVU7O0FBWHRCO0lBRkMsS0FBSyxFQUFFO0lBQ1AsY0FBYyxFQUFFO2dEQUNQO0FBT1Y7SUFEQyxTQUFTLENBQUMsa0JBQWtCLENBQUM7NERBQzRDO0FBK0IxRTtJQUZDLFlBQVksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUNqQyxZQUFZLENBQUMsVUFBVSxFQUFFLENBQUMsT0FBTyxDQUFDLENBQUM7bURBR25DO0FBSUQ7SUFGQyxZQUFZLENBQUMsWUFBWSxFQUFFLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDcEMsWUFBWSxDQUFDLFlBQVksRUFBRSxDQUFDLE9BQU8sQ0FBQyxDQUFDO21EQUdyQztBQWpEUSxrQkFBa0I7SUFkOUIsU0FBUyxDQUFDO1FBQ1AsUUFBUSxFQUFFLDBCQUEwQjtRQUNwQyxvc0JBQXFDO1FBRXJDLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO1FBQy9DLFNBQVMsRUFBRTtZQUNQLGlCQUFpQjtZQUNqQixzQkFBc0I7WUFDdEI7Z0JBQ0ksT0FBTyxFQUFFLDJCQUEyQjtnQkFDcEMsV0FBVyxFQUFFLFVBQVUsQ0FBQyxHQUFHLEVBQUUsQ0FBQyxvQkFBa0IsQ0FBQzthQUNwRDtTQUNKOztLQUNKLENBQUM7SUFjTyxXQUFBLE1BQU0sQ0FBQyxzQkFBc0IsQ0FBQyxDQUFBO0lBQzlCLFdBQUEsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFBO0dBZGQsa0JBQWtCLENBc0Q5QjtTQXREWSxrQkFBa0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBFbGVtZW50UmVmLFxuICAgIGZvcndhcmRSZWYsXG4gICAgSG9zdExpc3RlbmVyLFxuICAgIEluamVjdCxcbiAgICBJbnB1dCxcbiAgICBWaWV3Q2hpbGQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgICBBYnN0cmFjdFR1aUludGVyYWN0aXZlLFxuICAgIGlzTmF0aXZlRm9jdXNlZCxcbiAgICBUVUlfRk9DVVNBQkxFX0lURU1fQUNDRVNTT1IsXG4gICAgdHVpRGVmYXVsdFByb3AsXG4gICAgVHVpRGVzdHJveVNlcnZpY2UsXG4gICAgVHVpRm9jdXNWaXNpYmxlU2VydmljZSxcbiAgICBUdWlOYXRpdmVGb2N1c2FibGVFbGVtZW50LFxufSBmcm9tICdAdGFpZ2EtdWkvY2RrJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd0dWktYWN0aW9uLCBhW3R1aUFjdGlvbl0nLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9hY3Rpb24udGVtcGxhdGUuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vYWN0aW9uLnN0eWxlLmxlc3MnXSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBwcm92aWRlcnM6IFtcbiAgICAgICAgVHVpRGVzdHJveVNlcnZpY2UsXG4gICAgICAgIFR1aUZvY3VzVmlzaWJsZVNlcnZpY2UsXG4gICAgICAgIHtcbiAgICAgICAgICAgIHByb3ZpZGU6IFRVSV9GT0NVU0FCTEVfSVRFTV9BQ0NFU1NPUixcbiAgICAgICAgICAgIHVzZUV4aXN0aW5nOiBmb3J3YXJkUmVmKCgpID0+IFR1aUFjdGlvbkNvbXBvbmVudCksXG4gICAgICAgIH0sXG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgVHVpQWN0aW9uQ29tcG9uZW50IGV4dGVuZHMgQWJzdHJhY3RUdWlJbnRlcmFjdGl2ZSB7XG4gICAgQElucHV0KClcbiAgICBAdHVpRGVmYXVsdFByb3AoKVxuICAgIGljb24gPSAnJztcblxuICAgIHJlYWRvbmx5IGlzTGluayA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LnRhZ05hbWUudG9Mb3dlckNhc2UoKSA9PT0gJ2EnO1xuXG4gICAgcmVhZG9ubHkgZGlzYWJsZWQgPSBmYWxzZTtcblxuICAgIEBWaWV3Q2hpbGQoJ2ZvY3VzYWJsZUVsZW1lbnQnKVxuICAgIHByaXZhdGUgcmVhZG9ubHkgZm9jdXNhYmxlRWxlbWVudD86IEVsZW1lbnRSZWY8VHVpTmF0aXZlRm9jdXNhYmxlRWxlbWVudD47XG5cbiAgICBjb25zdHJ1Y3RvcihcbiAgICAgICAgQEluamVjdChUdWlGb2N1c1Zpc2libGVTZXJ2aWNlKSBmb2N1c1Zpc2libGUkOiBUdWlGb2N1c1Zpc2libGVTZXJ2aWNlLFxuICAgICAgICBASW5qZWN0KEVsZW1lbnRSZWYpIHByaXZhdGUgcmVhZG9ubHkgZWxlbWVudFJlZjogRWxlbWVudFJlZjxIVE1MRWxlbWVudD4sXG4gICAgKSB7XG4gICAgICAgIHN1cGVyKCk7XG5cbiAgICAgICAgaWYgKCF0aGlzLmlzTGluaykge1xuICAgICAgICAgICAgcmV0dXJuO1xuICAgICAgICB9XG5cbiAgICAgICAgZm9jdXNWaXNpYmxlJC5zdWJzY3JpYmUodmlzaWJsZSA9PiB7XG4gICAgICAgICAgICB0aGlzLnVwZGF0ZUZvY3VzVmlzaWJsZSh2aXNpYmxlKTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgZ2V0IG5hdGl2ZUZvY3VzYWJsZUVsZW1lbnQoKTogVHVpTmF0aXZlRm9jdXNhYmxlRWxlbWVudCB8IG51bGwge1xuICAgICAgICBpZiAodGhpcy5pc0xpbmspIHtcbiAgICAgICAgICAgIHJldHVybiB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudDtcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybiB0aGlzLmZvY3VzYWJsZUVsZW1lbnQgPyB0aGlzLmZvY3VzYWJsZUVsZW1lbnQubmF0aXZlRWxlbWVudCA6IG51bGw7XG4gICAgfVxuXG4gICAgZ2V0IGZvY3VzZWQoKTogYm9vbGVhbiB7XG4gICAgICAgIHJldHVybiBpc05hdGl2ZUZvY3VzZWQodGhpcy5uYXRpdmVGb2N1c2FibGVFbGVtZW50KTtcbiAgICB9XG5cbiAgICBASG9zdExpc3RlbmVyKCdmb2N1c2luJywgWyd0cnVlJ10pXG4gICAgQEhvc3RMaXN0ZW5lcignZm9jdXNvdXQnLCBbJ2ZhbHNlJ10pXG4gICAgb25Gb2N1c2VkKGZvY3VzZWQ6IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy51cGRhdGVGb2N1c2VkKGZvY3VzZWQpO1xuICAgIH1cblxuICAgIEBIb3N0TGlzdGVuZXIoJ21vdXNlZW50ZXInLCBbJ3RydWUnXSlcbiAgICBASG9zdExpc3RlbmVyKCdtb3VzZWxlYXZlJywgWydmYWxzZSddKVxuICAgIG9uSG92ZXJlZChob3ZlcmVkOiBib29sZWFuKSB7XG4gICAgICAgIHRoaXMudXBkYXRlSG92ZXJlZChob3ZlcmVkKTtcbiAgICB9XG5cbiAgICBvbkZvY3VzVmlzaWJsZShmb2N1c1Zpc2libGU6IGJvb2xlYW4pIHtcbiAgICAgICAgdGhpcy51cGRhdGVGb2N1c1Zpc2libGUoZm9jdXNWaXNpYmxlKTtcbiAgICB9XG59XG4iXX0=