@inaccess-fang/ui-components/esm2015/lib/components/chip-group/fang-chip-group.component.js

The Inaccess UI Components Library for the Front-end projects

import { ChangeDetectionStrategy, Component, EventEmitter, HostBinding, Input, Output } from '@angular/core';
import { sortBy } from '../../core/utils/fang-comp-lib.utils';
export class FangChipGroupComponent {
    constructor() {
        this.dataChange = new EventEmitter();
        this.chipGroupDataChange = new EventEmitter();
    }
    ngOnChanges(changes) {
        if (changes['data']) {
            this.cursor = this.config.interaction === 'select' ? 'pointer' : 'default';
            this.chipGroupData = this.data.reduce((acc, data, index) => {
                let selected;
                if (this.config.interaction !== 'select') {
                    selected = true;
                }
                else {
                    selected = this.chipGroupData && this.chipGroupData[index] && this.chipGroupData[index].selected;
                }
                acc.push({
                    displayValue: this.config.propertyAccessKey ? data[this.config.propertyAccessKey] : data,
                    selected
                });
                return acc;
            }, []);
            this.chipGroupData = this.sortData(this.chipGroupData);
            this.chipGroupDataChange.emit(this.chipGroupData);
        }
    }
    removeChip(event, chip) {
        event.stopPropagation();
        this.chipGroupData = this.chipGroupData.filter(chipData => chipData.displayValue !== chip.displayValue);
        this.chipGroupData = this.sortData(this.chipGroupData);
        const chipToRemove = this.data.filter(data => this.config.propertyAccessKey
            ? data[this.config.propertyAccessKey] === chip.displayValue
            : data === chip.displayValue)[0];
        this.dataChange.emit(chipToRemove);
        this.chipGroupDataChange.emit(this.chipGroupData);
    }
    toggleChipSelection(chipIndex) {
        this.chipGroupData[chipIndex].selected = !this.chipGroupData[chipIndex].selected;
    }
    sortData(data) {
        return sortBy(data, ['displayValue']);
    }
}
FangChipGroupComponent.decorators = [
    { type: Component, args: [{
                selector: 'fang-chip-group',
                template: "<div *ngIf=\"chipGroupData && chipGroupData.length\"\n\t [ngClass]=\"{'no-wrap': config.hasWrap !== undefined  && !config.hasWrap}\"\n\t class=\"{{config.alignment ? config.alignment: 'group-inline'}}\n\t {{config.chipGroupBackground}}\"\n>\n\t<div *ngFor=\"let chip of chipGroupData; let chipIndex = index\"\n\t\t [ngClass]=\"{'selected': chip.selected}\"\n\t\t class=\"{{config.chipBackground ? config.chipBackground : 'chip-light'}}\"\n\t\t (click)=\"config.interaction === 'select' && toggleChipSelection(chipIndex)\">\n\n\t\t<p [ngClass]=\"{'text-truncate-100': config.hasTextTruncate}\"\n\t\t   title=\"{{chip.displayValue}}\" style=\"pointer-events: auto;\">\n\t\t\t{{chip.displayValue}}\n\t\t</p>\n\n\t\t<i *ngIf=\"config.interaction && config.interaction === 'close'\"\n\t\t   class=\"ic-close\"\n\t\t   style=\"pointer-events: auto !important\"\n\t\t   (click)=\"removeChip($event,chip)\">\n\t\t</i>\n\t</div>\n</div>\n",
                changeDetection: ChangeDetectionStrategy.OnPush,
                styles: [":host{max-height:650px}::-webkit-scrollbar{background-color:#fff;border:none;border-left:1px solid hsla(0,0%,88.6%,.4);width:12px}"]
            },] }
];
FangChipGroupComponent.propDecorators = {
    cursor: [{ type: HostBinding, args: ['style.cursor',] }],
    data: [{ type: Input }],
    config: [{ type: Input }],
    dataChange: [{ type: Output }],
    chipGroupDataChange: [{ type: Output }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZmFuZy1jaGlwLWdyb3VwLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIvaG9tZS9pYXNvbmFzL0Rlc2t0b3AvY3VycmVudC9mYW5nLXVpLWNvbXBvbmVudHMtbGlicmFyeS9wcm9qZWN0cy9mYW5nLXVpLWNvbXBvbmVudHMvc3JjLyIsInNvdXJjZXMiOlsibGliL2NvbXBvbmVudHMvY2hpcC1ncm91cC9mYW5nLWNoaXAtZ3JvdXAuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBQyx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxLQUFLLEVBQWEsTUFBTSxFQUFnQixNQUFNLGVBQWUsQ0FBQztBQUVySSxPQUFPLEVBQUMsTUFBTSxFQUFDLE1BQU0sc0NBQXNDLENBQUM7QUFTNUQsTUFBTSxPQUFPLHNCQUFzQjtJQVBuQztRQWFrQixlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQVMsQ0FBQztRQUN2Qyx3QkFBbUIsR0FBRyxJQUFJLFlBQVksRUFBVSxDQUFDO0lBc0RuRSxDQUFDO0lBbERBLFdBQVcsQ0FBQyxPQUFzQjtRQUNqQyxJQUFJLE9BQU8sQ0FBQyxNQUFNLENBQUMsRUFBRTtZQUNwQixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsV0FBVyxLQUFLLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7WUFDM0UsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLEdBQUcsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLEVBQUU7Z0JBRTFELElBQUksUUFBaUIsQ0FBQztnQkFFdEIsSUFBSSxJQUFJLENBQUMsTUFBTSxDQUFDLFdBQVcsS0FBSyxRQUFRLEVBQUU7b0JBQ3pDLFFBQVEsR0FBRyxJQUFJLENBQUM7aUJBQ2hCO3FCQUFNO29CQUNOLFFBQVEsR0FBRyxJQUFJLENBQUMsYUFBYSxJQUFJLElBQUksQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLElBQUksSUFBSSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxRQUFRLENBQUM7aUJBQ2pHO2dCQUVELEdBQUcsQ0FBQyxJQUFJLENBQUM7b0JBQ1IsWUFBWSxFQUFFLElBQUksQ0FBQyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLGlCQUFpQixDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUk7b0JBQ3hGLFFBQVE7aUJBQ1IsQ0FBQyxDQUFDO2dCQUNILE9BQU8sR0FBRyxDQUFDO1lBQ1osQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDO1lBRVAsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztZQUV2RCxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUNsRDtJQUNGLENBQUM7SUFFTSxVQUFVLENBQUMsS0FBaUIsRUFBRSxJQUFTO1FBQzdDLEtBQUssQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUV4QixJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLFlBQVksS0FBSyxJQUFJLENBQUMsWUFBWSxDQUFDLENBQUM7UUFDeEcsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztRQUV2RCxNQUFNLFlBQVksR0FBUSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUNqRCxJQUFJLENBQUMsTUFBTSxDQUFDLGlCQUFpQjtZQUM1QixDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsaUJBQWlCLENBQUMsS0FBSyxJQUFJLENBQUMsWUFBWTtZQUMzRCxDQUFDLENBQUMsSUFBSSxLQUFLLElBQUksQ0FBQyxZQUFZLENBQzdCLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFFTCxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxZQUFZLENBQUMsQ0FBQztRQUNuQyxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUMsQ0FBQztJQUNuRCxDQUFDO0lBRU0sbUJBQW1CLENBQUMsU0FBaUI7UUFDM0MsSUFBSSxDQUFDLGFBQWEsQ0FBQyxTQUFTLENBQUMsQ0FBQyxRQUFRLEdBQUcsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLFNBQVMsQ0FBQyxDQUFDLFFBQVEsQ0FBQztJQUNsRixDQUFDO0lBRU8sUUFBUSxDQUFDLElBQVk7UUFDNUIsT0FBTyxNQUFNLENBQUMsSUFBSSxFQUFFLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQztJQUN2QyxDQUFDOzs7WUFsRUQsU0FBUyxTQUFDO2dCQUNWLFFBQVEsRUFBRSxpQkFBaUI7Z0JBRTNCLDY2QkFBK0M7Z0JBQy9DLGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNOzthQUMvQzs7O3FCQUdDLFdBQVcsU0FBQyxjQUFjO21CQUUxQixLQUFLO3FCQUNMLEtBQUs7eUJBRUwsTUFBTTtrQ0FDTixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIEhvc3RCaW5kaW5nLCBJbnB1dCwgT25DaGFuZ2VzLCBPdXRwdXQsIFNpbXBsZUNoYW5nZXN9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtDaGlwLCBGYW5nQ2hpcEdyb3VwQ29uZmlnfSBmcm9tICcuL2ZhbmctY2hpcC1ncm91cC5tb2RlbCc7XG5pbXBvcnQge3NvcnRCeX0gZnJvbSAnLi4vLi4vY29yZS91dGlscy9mYW5nLWNvbXAtbGliLnV0aWxzJztcblxuQENvbXBvbmVudCh7XG5cdHNlbGVjdG9yOiAnZmFuZy1jaGlwLWdyb3VwJyxcblx0c3R5bGVVcmxzOiBbJy4vZmFuZy1jaGlwLWdyb3VwLmNvbXBvbmVudC5zY3NzJ10sXG5cdHRlbXBsYXRlVXJsOiAnLi9mYW5nLWNoaXAtZ3JvdXAuY29tcG9uZW50Lmh0bWwnLFxuXHRjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaFxufSlcblxuZXhwb3J0IGNsYXNzIEZhbmdDaGlwR3JvdXBDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuXHRASG9zdEJpbmRpbmcoJ3N0eWxlLmN1cnNvcicpIGN1cnNvcjtcblxuXHRASW5wdXQoKSBwdWJsaWMgZGF0YTogYW55W107XG5cdEBJbnB1dCgpIHB1YmxpYyBjb25maWc6IEZhbmdDaGlwR3JvdXBDb25maWc7XG5cblx0QE91dHB1dCgpIHB1YmxpYyBkYXRhQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxhbnlbXT4oKTtcblx0QE91dHB1dCgpIHB1YmxpYyBjaGlwR3JvdXBEYXRhQ2hhbmdlID0gbmV3IEV2ZW50RW1pdHRlcjxDaGlwW10+KCk7XG5cblx0cHVibGljIGNoaXBHcm91cERhdGE6IENoaXBbXTtcblxuXHRuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XG5cdFx0aWYgKGNoYW5nZXNbJ2RhdGEnXSkge1xuXHRcdFx0dGhpcy5jdXJzb3IgPSB0aGlzLmNvbmZpZy5pbnRlcmFjdGlvbiA9PT0gJ3NlbGVjdCcgPyAncG9pbnRlcicgOiAnZGVmYXVsdCc7XG5cdFx0XHR0aGlzLmNoaXBHcm91cERhdGEgPSB0aGlzLmRhdGEucmVkdWNlKChhY2MsIGRhdGEsIGluZGV4KSA9PiB7XG5cblx0XHRcdFx0bGV0IHNlbGVjdGVkOiBib29sZWFuO1xuXG5cdFx0XHRcdGlmICh0aGlzLmNvbmZpZy5pbnRlcmFjdGlvbiAhPT0gJ3NlbGVjdCcpIHtcblx0XHRcdFx0XHRzZWxlY3RlZCA9IHRydWU7XG5cdFx0XHRcdH0gZWxzZSB7XG5cdFx0XHRcdFx0c2VsZWN0ZWQgPSB0aGlzLmNoaXBHcm91cERhdGEgJiYgdGhpcy5jaGlwR3JvdXBEYXRhW2luZGV4XSAmJiB0aGlzLmNoaXBHcm91cERhdGFbaW5kZXhdLnNlbGVjdGVkO1xuXHRcdFx0XHR9XG5cblx0XHRcdFx0YWNjLnB1c2goe1xuXHRcdFx0XHRcdGRpc3BsYXlWYWx1ZTogdGhpcy5jb25maWcucHJvcGVydHlBY2Nlc3NLZXkgPyBkYXRhW3RoaXMuY29uZmlnLnByb3BlcnR5QWNjZXNzS2V5XSA6IGRhdGEsXG5cdFx0XHRcdFx0c2VsZWN0ZWRcblx0XHRcdFx0fSk7XG5cdFx0XHRcdHJldHVybiBhY2M7XG5cdFx0XHR9LCBbXSk7XG5cblx0XHRcdHRoaXMuY2hpcEdyb3VwRGF0YSA9IHRoaXMuc29ydERhdGEodGhpcy5jaGlwR3JvdXBEYXRhKTtcblxuXHRcdFx0dGhpcy5jaGlwR3JvdXBEYXRhQ2hhbmdlLmVtaXQodGhpcy5jaGlwR3JvdXBEYXRhKTtcblx0XHR9XG5cdH1cblxuXHRwdWJsaWMgcmVtb3ZlQ2hpcChldmVudDogTW91c2VFdmVudCwgY2hpcDogYW55KTogdm9pZCB7XG5cdFx0ZXZlbnQuc3RvcFByb3BhZ2F0aW9uKCk7XG5cblx0XHR0aGlzLmNoaXBHcm91cERhdGEgPSB0aGlzLmNoaXBHcm91cERhdGEuZmlsdGVyKGNoaXBEYXRhID0+IGNoaXBEYXRhLmRpc3BsYXlWYWx1ZSAhPT0gY2hpcC5kaXNwbGF5VmFsdWUpO1xuXHRcdHRoaXMuY2hpcEdyb3VwRGF0YSA9IHRoaXMuc29ydERhdGEodGhpcy5jaGlwR3JvdXBEYXRhKTtcblxuXHRcdGNvbnN0IGNoaXBUb1JlbW92ZTogYW55ID0gdGhpcy5kYXRhLmZpbHRlcihkYXRhID0+XG5cdFx0XHR0aGlzLmNvbmZpZy5wcm9wZXJ0eUFjY2Vzc0tleVxuXHRcdFx0XHQ/IGRhdGFbdGhpcy5jb25maWcucHJvcGVydHlBY2Nlc3NLZXldID09PSBjaGlwLmRpc3BsYXlWYWx1ZVxuXHRcdFx0XHQ6IGRhdGEgPT09IGNoaXAuZGlzcGxheVZhbHVlXG5cdFx0KVswXTtcblxuXHRcdHRoaXMuZGF0YUNoYW5nZS5lbWl0KGNoaXBUb1JlbW92ZSk7XG5cdFx0dGhpcy5jaGlwR3JvdXBEYXRhQ2hhbmdlLmVtaXQodGhpcy5jaGlwR3JvdXBEYXRhKTtcblx0fVxuXG5cdHB1YmxpYyB0b2dnbGVDaGlwU2VsZWN0aW9uKGNoaXBJbmRleDogbnVtYmVyKTogdm9pZCB7XG5cdFx0dGhpcy5jaGlwR3JvdXBEYXRhW2NoaXBJbmRleF0uc2VsZWN0ZWQgPSAhdGhpcy5jaGlwR3JvdXBEYXRhW2NoaXBJbmRleF0uc2VsZWN0ZWQ7XG5cdH1cblxuXHRwcml2YXRlIHNvcnREYXRhKGRhdGE6IENoaXBbXSk6IENoaXBbXSB7XG5cdFx0cmV0dXJuIHNvcnRCeShkYXRhLCBbJ2Rpc3BsYXlWYWx1ZSddKTtcblx0fVxuXG59XG4iXX0=