myrta-ui 13.0.4 → 13.0.6

package/fesm2020/myrta-ui.mjs

@@ -1934,6 +1934,11 @@ class PopupTriggerDirective {
         const templatePortal = new TemplatePortal(this.popupPanel.templateRef, this.viewContainerRef);
         this._overlayRef.attach(templatePortal);
         this.popupPanel.toggle.emit(true);
+        setTimeout(() => {
+            if (this._overlayRef) {
+                this._overlayRef.updatePosition();
+            }
+        }, 0);
         this._subscriberDetach$ = this._overlayRef.detachments().subscribe(_ => {
             this._isDropdownOpen = false;
             this.popupPanel.toggle.emit(false);
@@ -12792,7 +12797,8 @@ const getInnerSelected = (items, selected, bindValue) => {
 };
 
 class SelectComponent {
-    constructor() {
+    constructor(_detector) {
+        this._detector = _detector;
         this.searchValue = '';
         this.isOpen = false;
         this.originSelected = [];
@@ -12845,6 +12851,7 @@ class SelectComponent {
     set items(items) {
         this.originItems = items;
         this._updateSelected(this.originItems, this.originSelected);
+        this._detector.detectChanges();
     }
     ngOnInit() {
         if (this.optionValidation) {
@@ -12983,6 +12990,7 @@ class SelectComponent {
             this.selected = getInnerSelected(items, [selected], this.bindValue);
         }
         this.innerItems = getInnerItems(items, this.selected, this.bindValue);
+        this._detector.detectChanges();
     }
     _updateValue(selectedItems) {
         const clearedSelected = getSelectedItems(selectedItems, this.bindValue);
@@ -12999,7 +13007,7 @@ class SelectComponent {
         this.onTouched = fn;
     }
 }
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: SelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", 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", emptyText: "emptyText", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", multiCollapseCount: "multiCollapseCount", optionValidation: ["isExtraOption", "optionValidation"], extraOptionPlaceholder: "extraOptionPlaceholder", use: "use", sortIcon: "sortIcon", sortPlaceholder: "sortPlaceholder", isFullWidthDropdown: "isFullWidthDropdown", withoutSelected: "withoutSelected", hideSelected: "hideSelected", addOption: "addOption", customSearchFn: "customSearchFn", disabled: "disabled", readonly: "readonly", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", popupPosition: "popupPosition", singleChange: "singleChange", scrollContainer: "scrollContainer", scrollStrategy: "scrollStrategy" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
@@ -13016,7 +13024,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                             multi: true,
                         },
                     ], template: "<div\r\n  [class.-disabled]=\"disabled\"\r\n  [class.-readonly]=\"readonly\"\r\n  [class.mrx-input-error]=\"invalid\"\r\n  [class]=\"getClasses\"\r\n  class=\"mrx-select\"\r\n>\r\n  <div class=\"mrx-select__wrapper\">\r\n    <ng-container [ngSwitch]=\"use\">\r\n      <ng-container *ngSwitchCase=\"'default'\">\r\n        <div\r\n          class=\"mrx-select__input\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [popupPosition]=\"popupPosition\"\r\n          [scrollContainerRef]=\"scrollContainer\"\r\n          [scrollStrategy]=\"scrollStrategy\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <ng-container *ngIf=\"getSelectedLabels.length\">\r\n            <div class=\"mrx-select__input__values\" *ngIf=\"multiple\">\r\n              <ng-container *ngIf=\"multiCollapseCount && getSelectedLabels.length >= multiCollapseCount; else multipleNotCollapse\">\r\n                <div class=\"mrx-select__input__badge\">\r\n                  <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n                  <span *ngIf=\"!disabled && !readonly\" class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n                </div>\r\n              </ng-container>\r\n              <ng-template #multipleNotCollapse>\r\n                <ng-container *ngFor=\"let item of getSelectedLabels; let first = first; let last = last\">\r\n                  <ng-container *ngIf=\"labelTemplate; else defaultLabelTpl\">\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"labelTemplate\"\r\n                      [ngTemplateOutletContext]=\"{item: item, first, last, clear: clearItem.bind(this)}\"\r\n                    ></ng-container>\r\n                  </ng-container>\r\n                  <ng-template #defaultLabelTpl>\r\n                    <ng-container\r\n                      [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n                      [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n                    ></ng-container>\r\n                  </ng-template>\r\n                </ng-container>\r\n              </ng-template>\r\n            </div>\r\n\r\n            <div class=\"mrx-select__input__value\" *ngIf=\"!multiple\">\r\n              <ng-container *ngFor=\"let item of getSelectedLabels\">\r\n                {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n              </ng-container>\r\n            </div>\r\n          </ng-container>\r\n\r\n          <ng-container *ngIf=\"!getSelectedLabels.length\">\r\n            <div class=\"mrx-select__input__placeholder\">{{ placeholder }}</div>\r\n          </ng-container>\r\n\r\n          <div class=\"mrx-select__input__controls\">\r\n            <mrx-loader\r\n              *ngIf=\"isLoading\"\r\n              [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n              [color]=\"'brand'\"\r\n            ></mrx-loader>\r\n\r\n            <div\r\n              *ngIf=\"getSelectedLabels.length && clearable\"\r\n              class=\"mrx-icon icon-close mrx-select__input__controls--icon\"\r\n              [class]=\"getIconSize\"\r\n              (click)=\"onClear($event)\"\r\n            ></div>\r\n\r\n            <div\r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class.opened]=\"isOpen\"\r\n              [class]=\"getIconSize\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n\r\n      <ng-container *ngSwitchCase=\"'link'\">\r\n        <div\r\n          class=\"mrx-select__input-link\"\r\n          [mrxPopupTrigger]=\"dropdown\"\r\n          [popupPosition]=\"popupPosition\"\r\n          [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n        >\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            <p *ngIf=\"sortPlaceholder\">{{ sortPlaceholder }}</p>\r\n\r\n            <span\r\n              *ngIf=\"sortIcon\"\r\n              class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n              [class]=\"getIconSize\"\r\n            ></span>\r\n          </div>\r\n\r\n          <div class=\"mrx-select__input-link__controls\">\r\n            <ng-container *ngIf=\"getSelectedLabels.length\">\r\n              <div class=\"mrx-select__input-link__value\">\r\n                <ng-container *ngFor=\"let item of getSelectedLabels\">\r\n                  {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n                </ng-container>\r\n              </div>\r\n            </ng-container>\r\n            <div\r\n              class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n              [class.opened]=\"isOpen\"\r\n              [class]=\"getIconSize\"\r\n            ></div>\r\n          </div>\r\n        </div>\r\n      </ng-container>\r\n    </ng-container>\r\n\r\n    <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n      <ng-container *ngIf=\"filteredItems.length\">\r\n        <ng-container *ngFor=\"let item of filteredItems; let first = first; let last = last\">\r\n          <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n            <ng-container *ngIf=\"optionTemplate\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"optionTemplate\"\r\n                [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n              ></ng-container>\r\n            </ng-container>\r\n\r\n            <ng-container *ngIf=\"!optionTemplate\">\r\n              <ng-container\r\n                [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n                [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n              ></ng-container>\r\n            </ng-container>\r\n          </mrx-popup-item>\r\n        </ng-container>\r\n      </ng-container>\r\n\r\n      <ng-container *ngIf=\"!filteredItems.length\">\r\n        <mrx-popup-item [custom]=\"true\">\r\n          <div class=\"mrx-select__dropdown__empty\">{{ emptyText }}</div>\r\n        </mrx-popup-item>\r\n      </ng-container>\r\n\r\n      <ng-template #headerTemplate>\r\n        <ng-container *ngIf=\"searchable\">\r\n          <div class=\"mrx-select__dropdown__search\">\r\n            <mrx-input-search\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"searchPlaceholder\"\r\n              [(ngModel)]=\"searchValue\"\r\n            ></mrx-input-search>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"contentTemplate\">\r\n          <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"popupHeaderTemplate\">\r\n          <ng-container [ngTemplateOutlet]=\"popupHeaderTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n\r\n      <ng-template #footerTemplate>\r\n        <ng-container *ngIf=\"!!addOption\">\r\n          <div class=\"mrx-select__dropdown__extra-option\">\r\n            <mrx-input-text\r\n              class=\"flex-grow-1\"\r\n              [size]=\"'medium'\"\r\n              [placeholder]=\"extraOptionPlaceholder\"\r\n              [(ngModel)]=\"model.label\"\r\n              [maxlength]=\"300\"\r\n              [invalid]=\"!!form.errors['label']\"\r\n              [invalidMessage]=\"form.errors['label']\"\r\n              (ngModelChange)=\"changeTextValueEmpty()\"\r\n            ></mrx-input-text>\r\n\r\n            <mrx-button\r\n              [iconOnly]=\"true\"\r\n              icon=\"<span class='mrx-icon icon-plus icon-font-24'></span>\"\r\n              size=\"medium\"\r\n              type=\"secondary\"\r\n              (click)=\"onAddNewCustomOption()\"\r\n            ></mrx-button>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"popupFooterTemplate\">\r\n          <ng-container [ngTemplateOutlet]=\"popupFooterTemplate\"></ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </mrx-popup>\r\n  </div>\r\n\r\n  <ng-container *ngIf=\"invalid && isInvalidMessage\">\r\n    <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n  </ng-container>\r\n\r\n  <mrx-save-state [fields]=\"fields\" [id]=\"uuid\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n  <ng-container *ngIf=\"asLabel(item) as label\">\r\n    <div class=\"mrx-select__input__badge\">\r\n      <p>{{ bindLabel ? label.__origin[bindLabel] : label.__origin['label'] || label.__origin }}</p>\r\n      <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n    </div>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n  <ng-container *ngIf=\"asOption(item) as option\">\r\n    <div class=\"mrx-select__dropdown__item\">\r\n      <div class=\"mrx-select__dropdown__item--content\">\r\n        <ng-container *ngIf=\"bindIcon && option.__origin[bindIcon]\">\r\n          <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n        </ng-container>\r\n\r\n        <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</p>\r\n      </div>\r\n\r\n      <ng-container *ngIf=\"option.__selected\">\r\n        <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n      </ng-container>\r\n    </div>\r\n  </ng-container>\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;height:100%;max-height:200px;overflow-y:auto}.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:5px 0}.mrx-select__input__controls--icon{position:relative}.mrx-select__input__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select__input-link{border-radius:var(--border-radius-1);background:var(--brand-bg-tertiary-default, #FFF);outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:8px;width:-moz-fit-content;width:fit-content}.mrx-select__input-link__box{flex-grow:1}.mrx-select__input-link__controls{display:flex;align-items:center;gap:8px}.mrx-select__input-link__controls--icon:after{content:\"\";position:absolute;width:100%;height:100%;border-radius:var(--border-raius-1, 4px);z-index:-1;transition:.2s}.mrx-select__input-link__controls--icon.opened{transform:rotate(180deg)}.mrx-select__input-link__controls--icon.opened:after{background-color:var(--brand-bg-tertiary-hover, #EDF5FF);transform:rotate(-180deg)}.mrx-select.mrx-select-lg .mrx-select__input,.mrx-select.mrx-select-lg .mrx-select__input-link{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-lg .mrx-select__input__values,.mrx-select.mrx-select-lg .mrx-select__input-link__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge,.mrx-select.mrx-select-lg .mrx-select__input-link__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p,.mrx-select.mrx-select-lg .mrx-select__input-link__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-lg .mrx-select__input{padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-3) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__placeholder,.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__controls--icon{font-size:22px}.mrx-select.mrx-select-lg .mrx-select__input-link{padding:0}.mrx-select.mrx-select-lg .mrx-select__input-link__placeholder,.mrx-select.mrx-select-lg .mrx-select__input-link__value{padding:2px 0}.mrx-select.mrx-select-md .mrx-select__input,.mrx-select.mrx-select-md .mrx-select__input-link{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__values,.mrx-select.mrx-select-md .mrx-select__input-link__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge,.mrx-select.mrx-select-md .mrx-select__input-link__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p,.mrx-select.mrx-select-md .mrx-select__input-link__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.mrx-select-md .mrx-select__input{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__placeholder,.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input-link,.mrx-select.mrx-select-md .mrx-select__input-link__placeholder,.mrx-select.mrx-select-md .mrx-select__input-link__value{padding:0}.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__input__placeholder{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);color:var(--neutral-text-tertiary, #71767E)}.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;border-bottom:1.794px solid var(--neutral-bg-divider, #DBDFE5);background:var(--brand-bg-tertiary-default, #FFF)}.mrx-select__dropdown__extra-option{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:8px;border-top:1.794px solid var(--neutral-bg-divider, #DBDFE5);border-top:var(--border-width-default) solid var(--neutral-bg-stroke-default)}.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}.mrx-select.-readonly .mrx-select__input__placeholder{-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E)}\n"] }]
-        }], propDecorators: { fields: [{
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { fields: [{
                 type: Input
             }], items: [{
                 type: Input