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

Taiga UI Angular main components kit

import { __decorate, __param } from 'tslib';
import { EventEmitter, ElementRef, Inject, Input, HostBinding, Output, ViewChild, HostListener, Component, ChangeDetectionStrategy, NgModule } from '@angular/core';
import { setNativeFocused, tuiDefaultProp, TuiPreventDefaultModule } from '@taiga-ui/cdk';
import { sizeBigger, TUI_MODE, MODE_PROVIDER, TuiSvgModule, TuiLoaderModule } from '@taiga-ui/core';
import { stringHashToHsl } from '@taiga-ui/kit/utils/format';
import { Observable } from 'rxjs';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { PolymorpheusModule } from '@tinkoff/ng-polymorpheus';

const ALLOWED_SPACE_REGEXP = new RegExp(`\,|[\\s]`);
let TuiTagComponent = class TuiTagComponent {
    constructor(elementRef, mode$) {
        this.elementRef = elementRef;
        this.mode$ = mode$;
        // TODO: Possibly implement standard focus mechanisms and outline
        this.value = '';
        this.editable = false;
        this.allowSpaces = true;
        this.maxLength = null;
        this.size = 'm';
        this.showLoader = false;
        this.status = "default" /* Default */;
        this.hoverable = false;
        this.removable = false;
        this.disabled = false;
        this.autoColor = false;
        this.leftContent = null;
        this.edited = new EventEmitter();
        this.editing = false;
        this.editedText = null;
    }
    set input(input) {
        if (input) {
            setNativeFocused(input.nativeElement);
        }
    }
    get backgroundColor() {
        return this.autoColor ? stringHashToHsl(this.value) : null;
    }
    get canRemove() {
        return this.removable && !this.disabled && !this.showLoader;
    }
    get displayText() {
        return this.editedText === null ? this.value : this.editedText;
    }
    get loaderSize() {
        return sizeBigger(this.size) ? 's' : 'xs';
    }
    get hasIcon() {
        return this.showLoader || this.removable;
    }
    edit(event) {
        if (!this.canEdit) {
            return;
        }
        event.preventDefault();
        this.editing = true;
        this.editedText = this.value;
    }
    remove(event) {
        if (!this.canRemove) {
            return;
        }
        event.preventDefault();
        event.stopPropagation();
        this.edited.emit('');
    }
    onInput(value) {
        const newTags = this.allowSpaces
            ? value.split(',')
            : value.split(ALLOWED_SPACE_REGEXP);
        if (newTags.length > 1) {
            this.save(newTags.toString());
            return;
        }
        this.editedText = value;
    }
    onKeyDown(event) {
        event.stopPropagation();
        switch (event.key.toLowerCase()) {
            case 'enter':
                event.preventDefault();
                this.save(this.editedText || '');
                break;
            case 'escape':
            case 'esc':
                event.preventDefault();
                this.stopEditing();
                setNativeFocused(this.elementRef.nativeElement);
                break;
            default:
                break;
        }
    }
    onBlur() {
        if (this.editedText !== null) {
            this.save(this.editedText);
        }
    }
    get canEdit() {
        return this.editable && !this.disabled && !this.showLoader;
    }
    stopEditing() {
        this.editing = false;
        this.editedText = null;
    }
    save(value) {
        this.stopEditing();
        this.edited.emit(value.trim());
    }
};
TuiTagComponent.ctorParameters = () => [
    { type: ElementRef, decorators: [{ type: Inject, args: [ElementRef,] }] },
    { type: Observable, decorators: [{ type: Inject, args: [TUI_MODE,] }] }
];
__decorate([
    Input(),
    tuiDefaultProp()
], TuiTagComponent.prototype, "value", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiTagComponent.prototype, "editable", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiTagComponent.prototype, "allowSpaces", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiTagComponent.prototype, "maxLength", void 0);
__decorate([
    Input(),
    HostBinding('attr.data-tui-host-size'),
    tuiDefaultProp()
], TuiTagComponent.prototype, "size", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiTagComponent.prototype, "showLoader", void 0);
__decorate([
    Input(),
    HostBinding('attr.data-tui-host-status'),
    tuiDefaultProp()
], TuiTagComponent.prototype, "status", void 0);
__decorate([
    Input(),
    HostBinding('class._hoverable'),
    tuiDefaultProp()
], TuiTagComponent.prototype, "hoverable", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiTagComponent.prototype, "removable", void 0);
__decorate([
    Input(),
    HostBinding('class._disabled'),
    tuiDefaultProp()
], TuiTagComponent.prototype, "disabled", void 0);
__decorate([
    Input(),
    HostBinding('class._autocolor'),
    tuiDefaultProp()
], TuiTagComponent.prototype, "autoColor", void 0);
__decorate([
    Input(),
    tuiDefaultProp()
], TuiTagComponent.prototype, "leftContent", void 0);
__decorate([
    Output()
], TuiTagComponent.prototype, "edited", void 0);
__decorate([
    HostBinding('class._editing')
], TuiTagComponent.prototype, "editing", void 0);
__decorate([
    ViewChild('input', { read: ElementRef })
], TuiTagComponent.prototype, "input", null);
__decorate([
    HostBinding('class._has-icon')
], TuiTagComponent.prototype, "hasIcon", null);
__decorate([
    HostListener('keydown.enter', ['$event'])
], TuiTagComponent.prototype, "edit", null);
__decorate([
    HostListener('keydown.delete', ['$event']),
    HostListener('keydown.backspace', ['$event'])
], TuiTagComponent.prototype, "remove", null);
TuiTagComponent = __decorate([
    Component({
        selector: 'tui-tag, a[tuiTag]',
        changeDetection: ChangeDetectionStrategy.OnPush,
        template: "<div\n    class=\"tag\"\n    [style.backgroundColor]=\"backgroundColor\"\n    (dblclick)=\"edit($event)\"\n>\n    <div\n        polymorpheus-outlet\n        *ngIf=\"leftContent\"\n        class=\"left-content\"\n        [content]=\"leftContent\"\n    ></div>\n    <span automation-id=\"tui-tag__text\" class=\"text\">{{displayText}}</span>\n    <tui-loader\n        *ngIf=\"showLoader\"\n        class=\"icon icon_loader\"\n        [inheritColor]=\"true\"\n        [size]=\"loaderSize\"\n    ></tui-loader>\n    <tui-svg\n        *ngIf=\"canRemove\"\n        tuiPreventDefault=\"mousedown\"\n        automation-id=\"tui-tag__remove\"\n        class=\"icon\"\n        src=\"tuiIconCloseLarge\"\n        (click)=\"remove($event)\"\n    ></tui-svg>\n</div>\n<input\n    *ngIf=\"editing\"\n    #input\n    automation-id=\"tui-tag__edit\"\n    class=\"edit\"\n    type=\"text\"\n    [attr.maxLength]=\"maxLength\"\n    [ngModel]=\"editedText\"\n    (ngModelChange)=\"onInput($event)\"\n    (blur)=\"onBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n/>\n",
        providers: [MODE_PROVIDER],
        host: {
            '($.data-mode.attr)': 'mode$',
        },
        styles: [":host{transition-property:background;transition-duration:.3s;transition-timing-function:ease-in-out;font:var(--tui-font-text-s);position:relative;display:inline-block;border-radius:var(--tui-radius-s);max-width:100%;cursor:default;outline:0;text-decoration:none}:host:after{transition-property:background;transition-duration:.3s;transition-timing-function:ease-in-out;position:absolute;top:0;left:0;width:100%;height:100%;content:'';box-sizing:border-box;border-radius:inherit;pointer-events:none}:host._hoverable:active[data-tui-host-status=custom]:after,:host._hoverable:hover[data-tui-host-status=custom]:after{background-color:var(--tui-clear)}:host:focus:after{border:2px solid var(--tui-focus)}:host[data-tui-host-status=primary]{background-color:var(--tui-primary);color:var(--tui-primary-text)}:host[data-tui-host-status=primary]._hoverable:hover{background-color:var(--tui-primary-hover)}:host[data-tui-host-status=primary]._hoverable:active{background-color:var(--tui-primary-active)}:host[data-tui-host-status=error]{background-color:var(--tui-error-bg);color:var(--tui-text-01)}:host[data-tui-host-status=error]._hoverable:active,:host[data-tui-host-status=error]._hoverable:hover{background-color:var(--tui-error-bg-hover)}:host[data-tui-host-status=error][data-mode=onDark]{background-color:var(--tui-error-bg-night);color:var(--tui-text-01-night)}:host[data-tui-host-status=error][data-mode=onDark]._hoverable:active,:host[data-tui-host-status=error][data-mode=onDark]._hoverable:hover{background-color:var(--tui-error-bg-night-hover)}:host[data-tui-host-status=success]{background-color:var(--tui-success-bg);color:var(--tui-text-01)}:host[data-tui-host-status=success]._hoverable:active,:host[data-tui-host-status=success]._hoverable:hover{background-color:var(--tui-success-bg-hover)}:host[data-tui-host-status=success][data-mode=onDark]{background-color:var(--tui-success-bg-night);color:var(--tui-text-01-night)}:host[data-tui-host-status=success][data-mode=onDark]._hoverable:active,:host[data-tui-host-status=success][data-mode=onDark]._hoverable:hover{background-color:var(--tui-success-bg-night-hover)}:host[data-tui-host-status=warning]{background-color:var(--tui-warning-bg);color:var(--tui-text-01)}:host[data-tui-host-status=warning]._hoverable:active,:host[data-tui-host-status=warning]._hoverable:hover{background-color:var(--tui-warning-bg-hover)}:host[data-tui-host-status=warning][data-mode=onDark]{background-color:var(--tui-warning-bg-night);color:var(--tui-text-01-night)}:host[data-tui-host-status=warning][data-mode=onDark]._hoverable:active,:host[data-tui-host-status=warning][data-mode=onDark]._hoverable:hover{background-color:var(--tui-warning-bg-night-hover)}:host[data-tui-host-status=default]{color:var(--tui-text-01-night);background-color:var(--tui-base-06)}:host[data-tui-host-status=default]:not([data-mode])._hoverable:hover{background-color:var(--tui-base-07)}:host[data-tui-host-status=default]:not([data-mode])._hoverable:active{background-color:var(--tui-base-08)}:host[data-tui-host-status=default][data-mode=onDark]{color:var(--tui-text-01-night);background-color:var(--tui-clear-inverse)}:host[data-tui-host-status=default][data-mode=onDark]._hoverable:hover{background-color:var(--tui-clear-inverse-hover)}:host[data-tui-host-status=default][data-mode=onDark]._hoverable:active{background-color:var(--tui-clear-inverse-active)}:host[data-tui-host-status=default][data-mode=onDark]:focus:after{border:2px solid var(--tui-base-01)}:host[data-tui-host-status=default][data-mode=onLight]{background-color:var(--tui-clear);color:var(--tui-text-01)}:host[data-tui-host-status=default][data-mode=onLight]._hoverable:hover{background-color:var(--tui-clear-hover)}:host[data-tui-host-status=default][data-mode=onLight]._hoverable:active{background-color:var(--tui-clear-active)}:host._editing{background:0 0!important}:host._disabled{pointer-events:none;opacity:var(--tui-disabled-opacity)}:host._hoverable{cursor:pointer}:host._autocolor{color:var(--tui-text-01)}.text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:.02em}.tag{position:relative;display:flex;align-items:center;border-radius:inherit;white-space:pre}:host[data-tui-host-size='s'] .tag{font:var(--tui-font-text-xs);height:20px;padding:0 8px}:host[data-tui-host-size='m'] .tag{height:var(--tui-height-xs);padding:0 8px}:host[data-tui-host-size='l'] .tag{height:var(--tui-height-s);padding:0 12px}:host._has-icon[data-tui-host-size='s'] .tag{padding-right:2px}:host._has-icon[data-tui-host-size='m'] .tag{padding-right:0}:host._has-icon[data-tui-host-size='l'] .tag{padding-right:4px}:host._editing .tag{visibility:hidden}:host._disabled._has-icon[data-tui-host-size='m'] .tag,:host._disabled._has-icon[data-tui-host-size='s'] .tag{padding-right:8px}:host._disabled._has-icon[data-tui-host-size='l'] .tag{padding-right:12px}.edit{font:var(--tui-font-text-s);padding:0;border:0;border-radius:inherit;background:0 0;font-size:inherit;line-height:inherit;font-weight:inherit;color:inherit;caret-color:currentColor;outline:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;word-break:keep-all;-webkit-text-fill-color:currentColor;position:absolute;top:0;left:0;width:100%;box-sizing:border-box}.edit:-webkit-autofill,.edit:-webkit-autofill:focus,.edit:-webkit-autofill:hover{border-radius:inherit;-webkit-text-fill-color:inherit!important;color:inherit!important;background-color:transparent!important;-webkit-box-shadow:0 0 0 1000px var(--tui-autofill) inset!important}:host[data-tui-host-size='s'] .edit{height:20px;line-height:20px;padding-left:8px}:host[data-tui-host-size='m'] .edit{height:var(--tui-height-xs);line-height:var(--tui-height-xs);padding-left:8px}:host[data-tui-host-size='l'] .edit{height:var(--tui-height-s);line-height:var(--tui-height-s);padding-left:12px}.icon{margin-left:4px;height:100%}.icon:not(.icon_loader){cursor:pointer;pointer-events:all;opacity:var(--tui-disabled-opacity)}.icon:hover{opacity:1}.icon_loader{width:16px;height:16px;margin:0 4px}:host[data-tui-host-size='s'] .icon_loader{margin:0 6px 0 12px;width:8px;height:8px}:host[data-tui-host-size='l'] .icon_loader{margin:0 4px 0 8px}.left-content{margin-right:4px;width:16px;height:16px}"]
    }),
    __param(0, Inject(ElementRef)),
    __param(1, Inject(TUI_MODE))
], TuiTagComponent);

let TuiTagModule = class TuiTagModule {
};
TuiTagModule = __decorate([
    NgModule({
        imports: [
            CommonModule,
            FormsModule,
            TuiPreventDefaultModule,
            TuiSvgModule,
            TuiLoaderModule,
            PolymorpheusModule,
        ],
        declarations: [TuiTagComponent],
        exports: [TuiTagComponent],
    })
], TuiTagModule);

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

export { ALLOWED_SPACE_REGEXP, TuiTagComponent, TuiTagModule };
//# sourceMappingURL=taiga-ui-kit-components-tag.js.map