import { Component } from '@angular/core';
import { PopupSelectComponentClass } from '../select/select.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/router";
import * as i3 from "../../../search-input/search-input.component";
import * as i4 from "../../sort-by.pipe";
export class OptionsSelectorComponent extends PopupSelectComponentClass {
    handleInputChange(value) {
        this.searchString = value;
        if (this.isSearchDelay) {
            this.search$.next(this.searchString);
        }
        else {
            this.filter();
        }
    }
}
OptionsSelectorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionsSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
OptionsSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OptionsSelectorComponent, selector: "epom-popup-options-selector", usesInheritance: true, ngImport: i0, template: "<main class=\"options-selector-container\">\n  <section class=\"options-selector__column_left\">\n    <div class=\"options-selector__column_left__title\">Available</div>\n\n    <epom-search-input\n      class=\"options-selector__search-input\"\n      [searchString]=\"searchString\"\n      (searchStringChange)=\"handleInputChange($event)\"\n    ></epom-search-input>\n\n    <ng-container *ngFor=\"let item of filteredItems | sortBy : sortField || ''; let index = index\">\n      <section *ngIf=\"!item['hidden']\" class=\"options-selector__column_left__item\">\n        <div *ngIf=\"!item['url']\" class=\"options-selector__column_left__text\" [title]=\"item.name\">{{ item.name }}</div>\n        <div\n          *ngIf=\"!!item['url']\"\n          class=\"options-selector__column_left__text\"\n          [title]=\"item.name\"\n          [routerLink]=\"item.url\"\n        >\n          {{ item.name }}\n        </div>\n        <div\n          *ngIf=\"limitSelection === 0 || selectedSet.size < limitSelection\"\n          class=\"options-selector__column_left__add\"\n        >\n          <span\n            *ngIf=\"!isDisabled\"\n            class=\"material-icons material-icons-outlined options-selector__column_left__icon\"\n            (click)=\"addToSelected(item, index, 'WHITE')\"\n          >\n            add_circle_outline\n          </span>\n          <div\n            *ngIf=\"!isDisabled\"\n            class=\"options-selector__column_left__label\"\n            (click)=\"addToSelected(item, index, 'WHITE')\"\n          >\n            Add\n          </div>\n        </div>\n      </section>\n    </ng-container>\n\n    <button\n      *ngIf=\"isShowMoreAvailable | async\"\n      class=\"button button-outlined\"\n      [attr.data-qa]=\"'showMore'\"\n      (click)=\"showMore()\"\n    >\n      Show more\n    </button>\n  </section>\n\n  <section class=\"options-selector__vertical-line\"></section>\n\n  <section class=\"options-selector__column_right\">\n    <div class=\"options-selector__column_right__title-block\">\n      <span *ngIf=\"!isDisabled\" class=\"options-selector__column_right__title-block__text\">\n        Linked ({{ selectedSet.size }})\n      </span>\n      <span class=\"options-selector__column_right__title-block__clear\" (click)=\"clearSelected()\"> Clear all </span>\n    </div>\n\n    <ng-container *ngFor=\"let item of selectedSet\">\n      <section class=\"options-selector__column_right__item\">\n        <div *ngIf=\"!item['url']\" class=\"options-selector__column_right__text\" [title]=\"item.name\">{{ item.name }}</div>\n        <div\n          *ngIf=\"!!item['url']\"\n          class=\"options-selector__column_right__text\"\n          [title]=\"item.name\"\n          [ngClass]=\"{'global-margin': item.global}\"\n        >\n          <span class=\"options-selector__column_right__url-line\" [routerLink]=\"item['url']\">\n            <span class=\"options-selector__column_right__url-line__text\">{{ item.name }}</span>\n            <span *ngIf=\"item.global\" class=\"options-selector__column_right__url-line__global\">(Global)</span>\n          </span>\n        </div>\n\n        <span\n          *ngIf=\"!isDisabled && !item.global\"\n          class=\"material-icons material-icons-outlined options-selector__column_right__close\"\n          (click)=\"deleteFromSelected(item)\"\n        >\n          close\n        </span>\n      </section>\n    </ng-container>\n  </section>\n</main>\n", styles: [".options-selector-container{display:flex;gap:32px;align-items:stretch}.options-selector__search-input{display:block;padding-bottom:32px}.options-selector__vertical-line{height:auto;width:1px;background-color:var(--neutral-outline-variant-color, #c4c6d0)}.options-selector__column_left,.options-selector__column_right{flex:1;padding-right:16px}.options-selector__column_left{overflow-y:auto;max-height:583px}.options-selector__column_left__title{font-weight:700;line-height:21px;padding-bottom:16px}.options-selector__column_left__item{display:flex;justify-content:space-between;align-items:center;height:50px;border:1px solid var(--neutral-outline-variant-color);border-radius:4px;padding:16px 24px 16px 16px;margin-bottom:8px}.options-selector__column_left__text{font-size:12px;line-height:18px;cursor:pointer}.options-selector__column_left__add{display:flex;align-items:center;gap:4px}.options-selector__column_left__icon{font-size:16px;color:var(--themePrimButtonsBg-color)}.options-selector__column_left__label{font-size:12px;color:var(--themePrimButtonsBg-color);font-weight:600;line-height:18px;cursor:pointer}.options-selector__column_right__title-block{display:flex;justify-content:space-between;align-items:center;padding-top:37px;padding-bottom:16px}.options-selector__column_right__title-block__text{font-weight:700;line-height:21px}.options-selector__column_right__title-block__clear{font-weight:600;line-height:20px;color:var(--themePrimButtonsBg-color);cursor:pointer}.options-selector__column_right__item{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:8px}.options-selector__column_right__text{display:flex;align-items:center;height:50px;width:100%;padding:12px 24px 12px 16px;border:1px solid var(--neutral-outline-variant-color);border-radius:4px;font-size:12px;line-height:18px}.options-selector__column_right__url-line{display:flex;align-items:center;gap:16px}.options-selector__column_right__url-line__text{cursor:pointer}.options-selector__column_right__url-line__global{color:var(--neutral-outline-color)}.options-selector__column_right__close{font-size:18px;color:var(--neutral-outline-color)}.global-margin{margin-right:43px}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.RouterLink, selector: ":not(a):not(area)[routerLink]", inputs: ["queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i3.SearchInputComponent, selector: "epom-search-input", inputs: ["minWidth", "maxWidth", "searchString", "debounceTime"], outputs: ["searchStringChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.SortByPipe, name: "sortBy" }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionsSelectorComponent, decorators: [{
            type: Component,
            args: [{ selector: 'epom-popup-options-selector', template: "<main class=\"options-selector-container\">\n  <section class=\"options-selector__column_left\">\n    <div class=\"options-selector__column_left__title\">Available</div>\n\n    <epom-search-input\n      class=\"options-selector__search-input\"\n      [searchString]=\"searchString\"\n      (searchStringChange)=\"handleInputChange($event)\"\n    ></epom-search-input>\n\n    <ng-container *ngFor=\"let item of filteredItems | sortBy : sortField || ''; let index = index\">\n      <section *ngIf=\"!item['hidden']\" class=\"options-selector__column_left__item\">\n        <div *ngIf=\"!item['url']\" class=\"options-selector__column_left__text\" [title]=\"item.name\">{{ item.name }}</div>\n        <div\n          *ngIf=\"!!item['url']\"\n          class=\"options-selector__column_left__text\"\n          [title]=\"item.name\"\n          [routerLink]=\"item.url\"\n        >\n          {{ item.name }}\n        </div>\n        <div\n          *ngIf=\"limitSelection === 0 || selectedSet.size < limitSelection\"\n          class=\"options-selector__column_left__add\"\n        >\n          <span\n            *ngIf=\"!isDisabled\"\n            class=\"material-icons material-icons-outlined options-selector__column_left__icon\"\n            (click)=\"addToSelected(item, index, 'WHITE')\"\n          >\n            add_circle_outline\n          </span>\n          <div\n            *ngIf=\"!isDisabled\"\n            class=\"options-selector__column_left__label\"\n            (click)=\"addToSelected(item, index, 'WHITE')\"\n          >\n            Add\n          </div>\n        </div>\n      </section>\n    </ng-container>\n\n    <button\n      *ngIf=\"isShowMoreAvailable | async\"\n      class=\"button button-outlined\"\n      [attr.data-qa]=\"'showMore'\"\n      (click)=\"showMore()\"\n    >\n      Show more\n    </button>\n  </section>\n\n  <section class=\"options-selector__vertical-line\"></section>\n\n  <section class=\"options-selector__column_right\">\n    <div class=\"options-selector__column_right__title-block\">\n      <span *ngIf=\"!isDisabled\" class=\"options-selector__column_right__title-block__text\">\n        Linked ({{ selectedSet.size }})\n      </span>\n      <span class=\"options-selector__column_right__title-block__clear\" (click)=\"clearSelected()\"> Clear all </span>\n    </div>\n\n    <ng-container *ngFor=\"let item of selectedSet\">\n      <section class=\"options-selector__column_right__item\">\n        <div *ngIf=\"!item['url']\" class=\"options-selector__column_right__text\" [title]=\"item.name\">{{ item.name }}</div>\n        <div\n          *ngIf=\"!!item['url']\"\n          class=\"options-selector__column_right__text\"\n          [title]=\"item.name\"\n          [ngClass]=\"{'global-margin': item.global}\"\n        >\n          <span class=\"options-selector__column_right__url-line\" [routerLink]=\"item['url']\">\n            <span class=\"options-selector__column_right__url-line__text\">{{ item.name }}</span>\n            <span *ngIf=\"item.global\" class=\"options-selector__column_right__url-line__global\">(Global)</span>\n          </span>\n        </div>\n\n        <span\n          *ngIf=\"!isDisabled && !item.global\"\n          class=\"material-icons material-icons-outlined options-selector__column_right__close\"\n          (click)=\"deleteFromSelected(item)\"\n        >\n          close\n        </span>\n      </section>\n    </ng-container>\n  </section>\n</main>\n", styles: [".options-selector-container{display:flex;gap:32px;align-items:stretch}.options-selector__search-input{display:block;padding-bottom:32px}.options-selector__vertical-line{height:auto;width:1px;background-color:var(--neutral-outline-variant-color, #c4c6d0)}.options-selector__column_left,.options-selector__column_right{flex:1;padding-right:16px}.options-selector__column_left{overflow-y:auto;max-height:583px}.options-selector__column_left__title{font-weight:700;line-height:21px;padding-bottom:16px}.options-selector__column_left__item{display:flex;justify-content:space-between;align-items:center;height:50px;border:1px solid var(--neutral-outline-variant-color);border-radius:4px;padding:16px 24px 16px 16px;margin-bottom:8px}.options-selector__column_left__text{font-size:12px;line-height:18px;cursor:pointer}.options-selector__column_left__add{display:flex;align-items:center;gap:4px}.options-selector__column_left__icon{font-size:16px;color:var(--themePrimButtonsBg-color)}.options-selector__column_left__label{font-size:12px;color:var(--themePrimButtonsBg-color);font-weight:600;line-height:18px;cursor:pointer}.options-selector__column_right__title-block{display:flex;justify-content:space-between;align-items:center;padding-top:37px;padding-bottom:16px}.options-selector__column_right__title-block__text{font-weight:700;line-height:21px}.options-selector__column_right__title-block__clear{font-weight:600;line-height:20px;color:var(--themePrimButtonsBg-color);cursor:pointer}.options-selector__column_right__item{display:flex;justify-content:space-between;align-items:center;gap:25px;margin-bottom:8px}.options-selector__column_right__text{display:flex;align-items:center;height:50px;width:100%;padding:12px 24px 12px 16px;border:1px solid var(--neutral-outline-variant-color);border-radius:4px;font-size:12px;line-height:18px}.options-selector__column_right__url-line{display:flex;align-items:center;gap:16px}.options-selector__column_right__url-line__text{cursor:pointer}.options-selector__column_right__url-line__global{color:var(--neutral-outline-color)}.options-selector__column_right__close{font-size:18px;color:var(--neutral-outline-color)}.global-margin{margin-right:43px}\n"] }]
        }] });
//# sourceMappingURL=data:application/json;base64, 