myrta-ui 17.0.33 → 17.0.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/esm2022/lib/components/form/select/helpers/clean-selected-items.helper.mjs +4 -3
  2. package/esm2022/lib/components/form/select/helpers/get-selected-items.helper.mjs +3 -3
  3. package/esm2022/lib/components/form/select/models/template-output.model.mjs +2 -0
  4. package/esm2022/lib/components/form/select/select.component.mjs +47 -32
  5. package/fesm2022/myrta-ui.mjs +49 -34
  6. package/fesm2022/myrta-ui.mjs.map +1 -1
  7. package/lib/components/form/select/helpers/clean-selected-items.helper.d.ts +4 -1
  8. package/lib/components/form/select/models/template-output.model.d.ts +8 -0
  9. package/lib/components/form/select/select.component.d.ts +16 -17
  10. package/package.json +1 -1
package/fesm2022/myrta-ui.mjs CHANGED
@@ -2444,12 +2444,13 @@ const modifyOriginItems = (selected, bindValue, bindLabel) => {
2444
2444
  }
2445
2445
  };
2446
2446
 
2447
- const cleanSelectedItems = (innerList) => {
2448
- return innerList.map(({ __id, __selected, ...rest }) => rest);
2447
+ const cleanSelectItems = (innerList) => {
2448
+ return innerList.map(cleanSelectItem);
2449
2449
  };
2450
+ const cleanSelectItem = ({ __id, __selected, ...rest }) => rest;
2450
2451
 
2451
2452
  const getSelectedItems = (innerItems, bindValue, bindLabel) => {
2452
- return modifyOriginItems(cleanSelectedItems(innerItems.filter(item => item.__selected)), bindValue, bindLabel);
2453
+ return modifyOriginItems(cleanSelectItems(innerItems.filter(item => item.__selected)), bindValue, bindLabel);
2453
2454
  };
2454
2455
 
2455
2456
  const getInnerItems = (items, selectedItems = []) => {
@@ -2687,6 +2688,8 @@ class SelectComponent {
2687
2688
  dropdown;
2688
2689
  optionTemplate;
2689
2690
  labelTemplate;
2691
+ popupHeaderTemplate;
2692
+ popupFooterTemplate;
2690
2693
  changed = new EventEmitter();
2691
2694
  modelChange = new EventEmitter();
2692
2695
  get readonlyClass() {
@@ -2716,35 +2719,6 @@ class SelectComponent {
2716
2719
  get isInvalidMessage() {
2717
2720
  return !!this.invalidMessage || !!this.invalidMessage?.length;
2718
2721
  }
2719
- onChange = (value) => {
2720
- };
2721
- onTouched = () => {
2722
- };
2723
- registerOnChange(fn) {
2724
- this.onChange = fn;
2725
- }
2726
- registerOnTouched(fn) {
2727
- this.onTouched = fn;
2728
- }
2729
- writeValue(selected = []) {
2730
- if (selected) {
2731
- if (this.multiple && Array.isArray(selected)) {
2732
- this.selected = selected;
2733
- }
2734
- else {
2735
- this.selected = [selected];
2736
- }
2737
- this.innerItems = getInnerItems(this.originItems, this.selected);
2738
- }
2739
- }
2740
- updateValue(selectedItems) {
2741
- const clearedSelected = getSelectedItems(selectedItems, this.bindValue, this.bindLabel);
2742
- const outputSelected = this.multiple ? clearedSelected : clearedSelected.length ? clearedSelected[0] : null;
2743
- this.changed.emit(outputSelected);
2744
- this.modelChange.emit({ value: outputSelected, id: this.uuid });
2745
- this.onChange(outputSelected);
2746
- this.onTouched();
2747
- }
2748
2722
  onSelect(item) {
2749
2723
  if (!this.multiple) {
2750
2724
  this.innerItems = this.innerItems.map(i => {
@@ -2759,6 +2733,9 @@ class SelectComponent {
2759
2733
  this.dropdown.updatePopup();
2760
2734
  this.updateValue(this.innerItems);
2761
2735
  }
2736
+ clearItem(item) {
2737
+ this.onUnselect(item);
2738
+ }
2762
2739
  onUnselect(item) {
2763
2740
  this.innerItems.forEach(i => {
2764
2741
  if (i.__id === item.__id) {
@@ -2785,12 +2762,44 @@ class SelectComponent {
2785
2762
  togglePopup(isOpen) {
2786
2763
  this.isOpen = isOpen;
2787
2764
  }
2765
+ getCleanSelectItem(item) {
2766
+ return cleanSelectItem(item);
2767
+ }
2788
2768
  asOption(option) {
2789
2769
  return option;
2790
2770
  }
2791
2771
  asLabel(label) {
2792
2772
  return label;
2793
2773
  }
2774
+ writeValue(selected = []) {
2775
+ if (selected) {
2776
+ if (this.multiple && Array.isArray(selected)) {
2777
+ this.selected = selected;
2778
+ }
2779
+ else {
2780
+ this.selected = [selected];
2781
+ }
2782
+ this.innerItems = getInnerItems(this.originItems, this.selected);
2783
+ }
2784
+ }
2785
+ updateValue(selectedItems) {
2786
+ const clearedSelected = getSelectedItems(selectedItems, this.bindValue, this.bindLabel);
2787
+ const outputSelected = this.multiple ? clearedSelected : clearedSelected.length ? clearedSelected[0] : null;
2788
+ this.changed.emit(outputSelected);
2789
+ this.modelChange.emit({ value: outputSelected, id: this.uuid });
2790
+ this.onChange(outputSelected);
2791
+ this.onTouched();
2792
+ }
2793
+ onChange = (value) => {
2794
+ };
2795
+ onTouched = () => {
2796
+ };
2797
+ registerOnChange(fn) {
2798
+ this.onChange = fn;
2799
+ }
2800
+ registerOnTouched(fn) {
2801
+ this.onTouched = fn;
2802
+ }
2794
2803
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
2795
2804
  static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SelectComponent, selector: "mrx-select", inputs: { fields: "fields", items: "items", multiple: "multiple", isLoading: "isLoading", searchable: "searchable", clearable: "clearable", closable: "closable", size: "size", bindValue: "bindValue", bindLabel: "bindLabel", bindIcon: "bindIcon", disabled: "disabled", readonly: "readonly", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", popupPosition: "popupPosition" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
2796
2805
  {
@@ -2798,7 +2807,7 @@ class SelectComponent {
2798
2807
  useExisting: forwardRef(() => SelectComponent),
2799
2808
  multi: true,
2800
2809
  },
2801
- ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-select\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-select__wrapper\">\r\n <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\" [popupPosition]=\"popupPosition\">\r\n @if (getSelectedLabels.length) {\r\n @if (multiple) {\r\n <div class=\"mrx-select__input__values\">\r\n @for (item of getSelectedLabels; track item; let first = $first; let last = $last) {\r\n @if (labelTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"mrx-select__input__value\">\r\n @for (item of getSelectedLabels; track item) {\r\n {{ bindLabel ? item[bindLabel] : item['label'] }}\r\n }\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"mrx-select__input__placeholder\"></div>\r\n }\r\n\r\n <div class=\"mrx-select__input__controls\">\r\n @if (isLoading) {\r\n <mrx-loader\r\n [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n [color]=\"'brand'\"\r\n ></mrx-loader>\r\n }\r\n\r\n @if (getSelectedLabels.length && clearable) {\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n }\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class.icon-chevron-up]=\"isOpen\"\r\n [class.icon-chevron-down]=\"!isOpen\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n @for (item of filteredItems; track item.__id; let first = $first; let last = $last) {\r\n <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n @if (optionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"optionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n </mrx-popup-item>\r\n } @empty {\r\n <mrx-popup-item [custom]=\"true\">\r\n <div class=\"mrx-select__dropdown__empty\">\r\n \u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432\r\n </div>\r\n </mrx-popup-item>\r\n }\r\n\r\n <ng-template #headerTemplate>\r\n @if (searchable) {\r\n <div class=\"mrx-select__dropdown__search\">\r\n <mrx-input-text\r\n [size]=\"'medium'\"\r\n [placeholder]=\"'\u041D\u0430\u0439\u0442\u0438'\"\r\n [(ngModel)]=\"searchValue\"\r\n ></mrx-input-text>\r\n </div>\r\n }\r\n </ng-template>\r\n </mrx-popup>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n @if (asLabel(item); as label) {\r\n <div class=\"mrx-select__input__badge\">\r\n <p>{{ bindLabel ? label[bindLabel] : label }}</p>\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n @if (asOption(item); as option) {\r\n <div class=\"mrx-select__dropdown__item\">\r\n <div class=\"mrx-select__dropdown__item--content\">\r\n @if (bindIcon && option[bindIcon]) {\r\n <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n }\r\n\r\n <p>{{ bindLabel ? option[bindLabel] : option['label'] }}</p>\r\n </div>\r\n\r\n @if (option.__selected) {\r\n <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}.mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__dropdown__item{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.mrx-select__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select__dropdown__item--content{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-grow:1}.mrx-select__dropdown__item--content p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding-top:2px;padding-bottom:2px}.mrx-select__dropdown__search{padding:8px 16px}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: InputTextComponent, selector: "mrx-input-text", inputs: ["fields", "disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "invalid", "invalidMessage", "checkInvalid", "customClasses", "size", "isTooltipValue", "icon", "iconColor", "mask", "maskPrefix", "showMaskTyped", "maskDropSpecialCharacters"], outputs: ["changed", "modelChange"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2810
+ ], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "popupHeaderTemplate", first: true, predicate: ["popupHeaderTemplate"], descendants: true }, { propertyName: "popupFooterTemplate", first: true, predicate: ["popupFooterTemplate"], descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-select\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-select__wrapper\">\r\n <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\" [popupPosition]=\"popupPosition\">\r\n @if (getSelectedLabels.length) {\r\n @if (multiple) {\r\n <div class=\"mrx-select__input__values\">\r\n @for (item of getSelectedLabels; track item; let first = $first; let last = $last) {\r\n @if (labelTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last, clear: clearItem}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"mrx-select__input__value\">\r\n @for (item of getSelectedLabels; track item) {\r\n {{ bindLabel ? item[bindLabel] : item['label'] }}\r\n }\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"mrx-select__input__placeholder\"></div>\r\n }\r\n\r\n <div class=\"mrx-select__input__controls\">\r\n @if (isLoading) {\r\n <mrx-loader\r\n [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n [color]=\"'brand'\"\r\n ></mrx-loader>\r\n }\r\n\r\n @if (getSelectedLabels.length && clearable) {\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n }\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class.icon-chevron-up]=\"isOpen\"\r\n [class.icon-chevron-down]=\"!isOpen\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n @for (item of filteredItems; track item.__id; let first = $first; let last = $last) {\r\n <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n @if (optionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"optionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n </mrx-popup-item>\r\n } @empty {\r\n <mrx-popup-item [custom]=\"true\">\r\n <div class=\"mrx-select__dropdown__empty\">\r\n \u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432\r\n </div>\r\n </mrx-popup-item>\r\n }\r\n\r\n <ng-template #headerTemplate>\r\n @if (searchable) {\r\n <div class=\"mrx-select__dropdown__search\">\r\n <mrx-input-text\r\n [size]=\"'medium'\"\r\n [placeholder]=\"'\u041D\u0430\u0439\u0442\u0438'\"\r\n [(ngModel)]=\"searchValue\"\r\n ></mrx-input-text>\r\n </div>\r\n }\r\n\r\n @if (popupHeaderTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"popupHeaderTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #footerTemplate>\r\n @if (popupFooterTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"popupFooterTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n </mrx-popup>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n @if (asLabel(item); as label) {\r\n <div class=\"mrx-select__input__badge\">\r\n <p>{{ bindLabel ? label[bindLabel] : label['label'] }}</p>\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n @if (asOption(item); as option) {\r\n <div class=\"mrx-select__dropdown__item\">\r\n <div class=\"mrx-select__dropdown__item--content\">\r\n @if (bindIcon && option[bindIcon]) {\r\n <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n }\r\n\r\n <p>{{ bindLabel ? option[bindLabel] : option['label'] }}</p>\r\n </div>\r\n\r\n @if (option.__selected) {\r\n <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}.mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__dropdown__item{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.mrx-select__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select__dropdown__item--content{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-grow:1}.mrx-select__dropdown__item--content p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding-top:2px;padding-bottom:2px}.mrx-select__dropdown__search{padding:8px 16px}.mrx-select__dropdown__empty{padding:8px 16px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PopupComponent, selector: "mrx-popup", inputs: ["closeAfterClick"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: InputTextComponent, selector: "mrx-input-text", inputs: ["fields", "disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "invalid", "invalidMessage", "checkInvalid", "customClasses", "size", "isTooltipValue", "icon", "iconColor", "mask", "maskPrefix", "showMaskTyped", "maskDropSpecialCharacters"], outputs: ["changed", "modelChange"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
2802
2811
  }
2803
2812
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
2804
2813
  type: Component,
@@ -2808,7 +2817,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2808
2817
  useExisting: forwardRef(() => SelectComponent),
2809
2818
  multi: true,
2810
2819
  },
2811
- ], template: "<div class=\"mrx-select\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-select__wrapper\">\r\n <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\" [popupPosition]=\"popupPosition\">\r\n @if (getSelectedLabels.length) {\r\n @if (multiple) {\r\n <div class=\"mrx-select__input__values\">\r\n @for (item of getSelectedLabels; track item; let first = $first; let last = $last) {\r\n @if (labelTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"mrx-select__input__value\">\r\n @for (item of getSelectedLabels; track item) {\r\n {{ bindLabel ? item[bindLabel] : item['label'] }}\r\n }\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"mrx-select__input__placeholder\"></div>\r\n }\r\n\r\n <div class=\"mrx-select__input__controls\">\r\n @if (isLoading) {\r\n <mrx-loader\r\n [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n [color]=\"'brand'\"\r\n ></mrx-loader>\r\n }\r\n\r\n @if (getSelectedLabels.length && clearable) {\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n }\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class.icon-chevron-up]=\"isOpen\"\r\n [class.icon-chevron-down]=\"!isOpen\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n @for (item of filteredItems; track item.__id; let first = $first; let last = $last) {\r\n <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n @if (optionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"optionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n </mrx-popup-item>\r\n } @empty {\r\n <mrx-popup-item [custom]=\"true\">\r\n <div class=\"mrx-select__dropdown__empty\">\r\n \u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432\r\n </div>\r\n </mrx-popup-item>\r\n }\r\n\r\n <ng-template #headerTemplate>\r\n @if (searchable) {\r\n <div class=\"mrx-select__dropdown__search\">\r\n <mrx-input-text\r\n [size]=\"'medium'\"\r\n [placeholder]=\"'\u041D\u0430\u0439\u0442\u0438'\"\r\n [(ngModel)]=\"searchValue\"\r\n ></mrx-input-text>\r\n </div>\r\n }\r\n </ng-template>\r\n </mrx-popup>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n @if (asLabel(item); as label) {\r\n <div class=\"mrx-select__input__badge\">\r\n <p>{{ bindLabel ? label[bindLabel] : label }}</p>\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n @if (asOption(item); as option) {\r\n <div class=\"mrx-select__dropdown__item\">\r\n <div class=\"mrx-select__dropdown__item--content\">\r\n @if (bindIcon && option[bindIcon]) {\r\n <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n }\r\n\r\n <p>{{ bindLabel ? option[bindLabel] : option['label'] }}</p>\r\n </div>\r\n\r\n @if (option.__selected) {\r\n <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}.mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__dropdown__item{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.mrx-select__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select__dropdown__item--content{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-grow:1}.mrx-select__dropdown__item--content p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding-top:2px;padding-bottom:2px}.mrx-select__dropdown__search{padding:8px 16px}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}\n"] }]
2820
+ ], template: "<div class=\"mrx-select\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-select__wrapper\">\r\n <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\" [popupPosition]=\"popupPosition\">\r\n @if (getSelectedLabels.length) {\r\n @if (multiple) {\r\n <div class=\"mrx-select__input__values\">\r\n @for (item of getSelectedLabels; track item; let first = $first; let last = $last) {\r\n @if (labelTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last, clear: clearItem}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"mrx-select__input__value\">\r\n @for (item of getSelectedLabels; track item) {\r\n {{ bindLabel ? item[bindLabel] : item['label'] }}\r\n }\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"mrx-select__input__placeholder\"></div>\r\n }\r\n\r\n <div class=\"mrx-select__input__controls\">\r\n @if (isLoading) {\r\n <mrx-loader\r\n [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n [color]=\"'brand'\"\r\n ></mrx-loader>\r\n }\r\n\r\n @if (getSelectedLabels.length && clearable) {\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n }\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class.icon-chevron-up]=\"isOpen\"\r\n [class.icon-chevron-down]=\"!isOpen\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n @for (item of filteredItems; track item.__id; let first = $first; let last = $last) {\r\n <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n @if (optionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"optionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n </mrx-popup-item>\r\n } @empty {\r\n <mrx-popup-item [custom]=\"true\">\r\n <div class=\"mrx-select__dropdown__empty\">\r\n \u041D\u0435\u0442 \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u043E\u0432\r\n </div>\r\n </mrx-popup-item>\r\n }\r\n\r\n <ng-template #headerTemplate>\r\n @if (searchable) {\r\n <div class=\"mrx-select__dropdown__search\">\r\n <mrx-input-text\r\n [size]=\"'medium'\"\r\n [placeholder]=\"'\u041D\u0430\u0439\u0442\u0438'\"\r\n [(ngModel)]=\"searchValue\"\r\n ></mrx-input-text>\r\n </div>\r\n }\r\n\r\n @if (popupHeaderTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"popupHeaderTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #footerTemplate>\r\n @if (popupFooterTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"popupFooterTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n </mrx-popup>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n @if (asLabel(item); as label) {\r\n <div class=\"mrx-select__input__badge\">\r\n <p>{{ bindLabel ? label[bindLabel] : label['label'] }}</p>\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n @if (asOption(item); as option) {\r\n <div class=\"mrx-select__dropdown__item\">\r\n <div class=\"mrx-select__dropdown__item--content\">\r\n @if (bindIcon && option[bindIcon]) {\r\n <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n }\r\n\r\n <p>{{ bindLabel ? option[bindLabel] : option['label'] }}</p>\r\n </div>\r\n\r\n @if (option.__selected) {\r\n <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}.mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__dropdown__item{padding:8px 8px 8px 16px;background-color:transparent;transition:background-color .3s;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}.mrx-select__dropdown__item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select__dropdown__item--content{display:flex;align-items:center;justify-content:flex-start;gap:8px;flex-grow:1}.mrx-select__dropdown__item--content p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding-top:2px;padding-bottom:2px}.mrx-select__dropdown__search{padding:8px 16px}.mrx-select__dropdown__empty{padding:8px 16px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}\n"] }]
2812
2821
  }], propDecorators: { fields: [{
2813
2822
  type: Input
2814
2823
  }], items: [{
@@ -2852,6 +2861,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
2852
2861
  }], labelTemplate: [{
2853
2862
  type: ContentChild,
2854
2863
  args: ['labelTemplate']
2864
+ }], popupHeaderTemplate: [{
2865
+ type: ContentChild,
2866
+ args: ['popupHeaderTemplate']
2867
+ }], popupFooterTemplate: [{
2868
+ type: ContentChild,
2869
+ args: ['popupFooterTemplate']
2855
2870
  }], changed: [{
2856
2871
  type: Output
2857
2872
  }], modelChange: [{