myrta-ui 17.0.91 → 17.0.92
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.
- package/esm2022/lib/components/form/input-date-time/input-date-time.component.mjs +50 -18
- package/esm2022/lib/components/form/input-date-time/input-date-time.enum.mjs +1 -1
- package/esm2022/lib/components/form/input-date-time/input-date-time.module.mjs +4 -4
- package/esm2022/lib/components/form/input-date-time/models/input-date-time.model.mjs +2 -0
- package/esm2022/lib/components/form/select/helpers/get-inner-selected.helper.mjs +5 -4
- package/esm2022/lib/components/form/select/select.component.mjs +4 -4
- package/fesm2022/myrta-ui.mjs +55 -22
- package/fesm2022/myrta-ui.mjs.map +1 -1
- package/lib/components/form/input-date-time/input-date-time.component.d.ts +8 -3
- package/lib/components/form/input-date-time/input-date-time.enum.d.ts +0 -5
- package/lib/components/form/input-date-time/models/input-date-time.model.d.ts +5 -0
- package/package.json +1 -1
package/fesm2022/myrta-ui.mjs
CHANGED
|
@@ -2686,14 +2686,15 @@ const getInnerItems = (items, selectedItems = [], bindValue) => {
|
|
|
2686
2686
|
};
|
|
2687
2687
|
|
|
2688
2688
|
const getInnerSelected = (items, selected, bindValue) => {
|
|
2689
|
-
|
|
2689
|
+
const arr = items.filter(i => {
|
|
2690
2690
|
if (bindValue) {
|
|
2691
|
-
return selected.
|
|
2691
|
+
return selected.some(x => isEqual(x, i[bindValue]));
|
|
2692
2692
|
}
|
|
2693
2693
|
else {
|
|
2694
|
-
return selected.
|
|
2694
|
+
return selected.some(x => isEqual(x, i));
|
|
2695
2695
|
}
|
|
2696
2696
|
});
|
|
2697
|
+
return arr;
|
|
2697
2698
|
};
|
|
2698
2699
|
|
|
2699
2700
|
class MrxAutosaveService {
|
|
@@ -4202,7 +4203,7 @@ class SelectComponent {
|
|
|
4202
4203
|
return label;
|
|
4203
4204
|
}
|
|
4204
4205
|
writeValue(selected = []) {
|
|
4205
|
-
if (selected) {
|
|
4206
|
+
if (selected !== null) {
|
|
4206
4207
|
this.originSelected = selected;
|
|
4207
4208
|
this._updateSelected(this.originItems, this.originSelected);
|
|
4208
4209
|
}
|
|
@@ -4251,7 +4252,7 @@ class SelectComponent {
|
|
|
4251
4252
|
useExisting: forwardRef(() => SelectComponent),
|
|
4252
4253
|
multi: true,
|
|
4253
4254
|
},
|
|
4254
|
-
], 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 }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, 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 @switch (use) {\r\n @case ('default') {\r\n <div \r\n class=\"mrx-select__input\"\r\n [mrxPopupTrigger]=\"dropdown\"\r\n [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n >\r\n @if (getSelectedLabels.length) {\r\n @if (multiple) {\r\n <div class=\"mrx-select__input__values\">\r\n @if (multiCollapseCount && getSelectedLabels.length >= multiCollapseCount) {\r\n <div class=\"mrx-select__input__badge\">\r\n <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n\r\n @if (!disabled && !readonly) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n }\r\n </div>\r\n } @else {\r\n @for (item of getSelectedLabels; track item.__id; let first = $first; let last = $last) {\r\n @if (labelTemplate) {\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 } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n ></ng-container>\r\n }\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.__id) {\r\n {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n }\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"mrx-select__input__placeholder\">{{ 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 \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\r\n <div \r\n class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n [class]=\"[getIconState, getIconSize]\"\r\n ></div>\r\n </div>\r\n </div>\r\n }\r\n @case ('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 @if (sortPlaceholder) {\r\n <p>{{ sortPlaceholder }}</p>\r\n }\r\n\r\n @if (sortIcon) {\r\n <span\r\n class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n [class]=\"getIconSize\"\r\n ></span>\r\n }\r\n </div>\r\n\r\n <div class=\"mrx-select__input-link__controls\">\r\n @if (getSelectedLabels.length) {\r\n <div class=\"mrx-select__input-link__value\">\r\n @for (item of getSelectedLabels; track item.__id) {\r\n {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n }\r\n </div>\r\n }\r\n\r\n <div \r\n class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n [class]=\"[getIconState, getIconSize]\"\r\n ></div>\r\n </div>\r\n </div>\r\n }\r\n }\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: item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{item: 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\">{{ emptyText }}</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-search\r\n [size]=\"'medium'\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [(ngModel)]=\"searchValue\"\r\n ></mrx-input-search>\r\n </div>\r\n }\r\n\r\n @if (contentTemplate) {\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\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 (!!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 <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 }\r\n\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 @if (invalid && isInvalidMessage) {\r\n <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n }\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 @if (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 }\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.__origin[bindIcon]) {\r\n <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n }\r\n\r\n <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</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;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: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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.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", "minWidth"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition", "isFullWidthDropdown", "minWidthDropdown"] }, { 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"] }, { kind: "component", type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType", "href", "target", "routerLink", "queryParams"], outputs: ["mrxClick"] }, { kind: "component", type: InputSearchComponent, selector: "mrx-input-search", inputs: ["disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "invalid", "invalidMessage", "checkInvalid", "customClasses", "mask", "size"], outputs: ["changed", "cleared", "searched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4255
|
+
], 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 }, { propertyName: "contentTemplate", first: true, predicate: ["contentTemplate"], descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, 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 @switch (use) {\r\n @case ('default') {\r\n <div\r\n class=\"mrx-select__input\"\r\n [mrxPopupTrigger]=\"dropdown\"\r\n [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n >\r\n @if (getSelectedLabels.length) {\r\n @if (multiple) {\r\n <div class=\"mrx-select__input__values\">\r\n @if (multiCollapseCount && getSelectedLabels.length >= multiCollapseCount) {\r\n <div class=\"mrx-select__input__badge\">\r\n <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n\r\n @if (!disabled && !readonly) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n }\r\n </div>\r\n } @else {\r\n @for (item of getSelectedLabels; track item.__id; let first = $first; let last = $last) {\r\n @if (labelTemplate) {\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 } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n ></ng-container>\r\n }\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.__id) {\r\n {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n }\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"mrx-select__input__placeholder\">{{ 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\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\r\n <div\r\n class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n [class]=\"[getIconState, getIconSize]\"\r\n ></div>\r\n </div>\r\n </div>\r\n }\r\n @case ('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 @if (sortPlaceholder) {\r\n <p>{{ sortPlaceholder }}</p>\r\n }\r\n\r\n @if (sortIcon) {\r\n <span\r\n class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n [class]=\"getIconSize\"\r\n ></span>\r\n }\r\n </div>\r\n\r\n <div class=\"mrx-select__input-link__controls\">\r\n @if (getSelectedLabels.length) {\r\n <div class=\"mrx-select__input-link__value\">\r\n @for (item of getSelectedLabels; track item.__id) {\r\n {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n }\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n [class]=\"[getIconState, getIconSize]\"\r\n ></div>\r\n </div>\r\n </div>\r\n }\r\n }\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: item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{item: 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\">{{ emptyText }}</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-search\r\n [size]=\"'medium'\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [(ngModel)]=\"searchValue\"\r\n ></mrx-input-search>\r\n </div>\r\n }\r\n\r\n @if (contentTemplate) {\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\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 (!!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 <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 }\r\n\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 @if (invalid && isInvalidMessage) {\r\n <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n }\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 @if (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 }\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.__origin[bindIcon]) {\r\n <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n }\r\n\r\n <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</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;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: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}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i2$1.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", "minWidth"], outputs: ["toggle", "_toggleInner", "_updateInner"] }, { kind: "component", type: PopupItemComponent, selector: "mrx-popup-item", inputs: ["custom", "id", "disabled"], outputs: ["clicked"] }, { kind: "directive", type: PopupTriggerDirective, selector: "[mrxPopupTrigger]", inputs: ["mrxPopupTrigger", "popupPosition", "isFullWidthDropdown", "minWidthDropdown"] }, { 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"] }, { kind: "component", type: ButtonComponent, selector: "mrx-button", inputs: ["size", "type", "color", "iconPosition", "active", "disabled", "isLoading", "iconOnly", "customClasses", "label", "icon", "iconClass", "buttonType", "href", "target", "routerLink", "queryParams"], outputs: ["mrxClick"] }, { kind: "component", type: InputSearchComponent, selector: "mrx-input-search", inputs: ["disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "invalid", "invalidMessage", "checkInvalid", "customClasses", "mask", "size"], outputs: ["changed", "cleared", "searched"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
4255
4256
|
}
|
|
4256
4257
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
|
|
4257
4258
|
type: Component,
|
|
@@ -4261,7 +4262,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
4261
4262
|
useExisting: forwardRef(() => SelectComponent),
|
|
4262
4263
|
multi: true,
|
|
4263
4264
|
},
|
|
4264
|
-
], 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 @switch (use) {\r\n @case ('default') {\r\n <div \r\n class=\"mrx-select__input\"\r\n [mrxPopupTrigger]=\"dropdown\"\r\n [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n >\r\n @if (getSelectedLabels.length) {\r\n @if (multiple) {\r\n <div class=\"mrx-select__input__values\">\r\n @if (multiCollapseCount && getSelectedLabels.length >= multiCollapseCount) {\r\n <div class=\"mrx-select__input__badge\">\r\n <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n\r\n @if (!disabled && !readonly) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n }\r\n </div>\r\n } @else {\r\n @for (item of getSelectedLabels; track item.__id; let first = $first; let last = $last) {\r\n @if (labelTemplate) {\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 } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n ></ng-container>\r\n }\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.__id) {\r\n {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n }\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"mrx-select__input__placeholder\">{{ 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 \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\r\n <div \r\n class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n [class]=\"[getIconState, getIconSize]\"\r\n ></div>\r\n </div>\r\n </div>\r\n }\r\n @case ('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 @if (sortPlaceholder) {\r\n <p>{{ sortPlaceholder }}</p>\r\n }\r\n\r\n @if (sortIcon) {\r\n <span\r\n class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n [class]=\"getIconSize\"\r\n ></span>\r\n }\r\n </div>\r\n\r\n <div class=\"mrx-select__input-link__controls\">\r\n @if (getSelectedLabels.length) {\r\n <div class=\"mrx-select__input-link__value\">\r\n @for (item of getSelectedLabels; track item.__id) {\r\n {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n }\r\n </div>\r\n }\r\n\r\n <div \r\n class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n [class]=\"[getIconState, getIconSize]\"\r\n ></div>\r\n </div>\r\n </div>\r\n }\r\n }\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: item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{item: 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\">{{ emptyText }}</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-search\r\n [size]=\"'medium'\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [(ngModel)]=\"searchValue\"\r\n ></mrx-input-search>\r\n </div>\r\n }\r\n\r\n @if (contentTemplate) {\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\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 (!!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 <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 }\r\n\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 @if (invalid && isInvalidMessage) {\r\n <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n }\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 @if (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 }\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.__origin[bindIcon]) {\r\n <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n }\r\n\r\n <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</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;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: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}\n"] }]
|
|
4265
|
+
], 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 @switch (use) {\r\n @case ('default') {\r\n <div\r\n class=\"mrx-select__input\"\r\n [mrxPopupTrigger]=\"dropdown\"\r\n [isFullWidthDropdown]=\"isFullWidthDropdown\"\r\n >\r\n @if (getSelectedLabels.length) {\r\n @if (multiple) {\r\n <div class=\"mrx-select__input__values\">\r\n @if (multiCollapseCount && getSelectedLabels.length >= multiCollapseCount) {\r\n <div class=\"mrx-select__input__badge\">\r\n <p>\u0412\u044B\u0431\u0440\u0430\u043D\u043E: {{ getSelectedLabels.length }}</p>\r\n\r\n @if (!disabled && !readonly) {\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onClear($event)\"></span>\r\n }\r\n </div>\r\n } @else {\r\n @for (item of getSelectedLabels; track item.__id; let first = $first; let last = $last) {\r\n @if (labelTemplate) {\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 } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{item: item, first, last}\"\r\n ></ng-container>\r\n }\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.__id) {\r\n {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n }\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"mrx-select__input__placeholder\">{{ 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\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\r\n <div\r\n class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n [class]=\"[getIconState, getIconSize]\"\r\n ></div>\r\n </div>\r\n </div>\r\n }\r\n @case ('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 @if (sortPlaceholder) {\r\n <p>{{ sortPlaceholder }}</p>\r\n }\r\n\r\n @if (sortIcon) {\r\n <span\r\n class=\"mrx-icon {{sortIcon === 'asc' ? 'icon-sorting-up' : 'icon-sorting-down'}}\"\r\n [class]=\"getIconSize\"\r\n ></span>\r\n }\r\n </div>\r\n\r\n <div class=\"mrx-select__input-link__controls\">\r\n @if (getSelectedLabels.length) {\r\n <div class=\"mrx-select__input-link__value\">\r\n @for (item of getSelectedLabels; track item.__id) {\r\n {{ bindLabel ? item.__origin[bindLabel] : item.__origin['label'] || item.__origin }}\r\n }\r\n </div>\r\n }\r\n\r\n <div\r\n class=\"mrx-icon icon-chevron-down mrx-select__input__controls--icon\"\r\n [class]=\"[getIconState, getIconSize]\"\r\n ></div>\r\n </div>\r\n </div>\r\n }\r\n }\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: item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{item: 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\">{{ emptyText }}</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-search\r\n [size]=\"'medium'\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [(ngModel)]=\"searchValue\"\r\n ></mrx-input-search>\r\n </div>\r\n }\r\n\r\n @if (contentTemplate) {\r\n <ng-container *ngTemplateOutlet=\"contentTemplate\"></ng-container>\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 (!!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 <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 }\r\n\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 @if (invalid && isInvalidMessage) {\r\n <mrx-error-message [invalidMessage]=\"invalidMessage\"></mrx-error-message>\r\n }\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 @if (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 }\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.__origin[bindIcon]) {\r\n <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n }\r\n\r\n <p>{{ bindLabel ? option.__origin[bindLabel] : option.__origin['label'] || option.__origin }}</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;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: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}\n"] }]
|
|
4265
4266
|
}], propDecorators: { fields: [{
|
|
4266
4267
|
type: Input
|
|
4267
4268
|
}], items: [{
|
|
@@ -12094,6 +12095,7 @@ class InputDateTimeComponent {
|
|
|
12094
12095
|
readonly = false;
|
|
12095
12096
|
required = false;
|
|
12096
12097
|
timepicker = false;
|
|
12098
|
+
range = false;
|
|
12097
12099
|
minDate = '';
|
|
12098
12100
|
maxDate = '';
|
|
12099
12101
|
timezone = 'default';
|
|
@@ -12112,6 +12114,7 @@ class InputDateTimeComponent {
|
|
|
12112
12114
|
timeInput;
|
|
12113
12115
|
changed = new EventEmitter();
|
|
12114
12116
|
modelChange = new EventEmitter();
|
|
12117
|
+
blurred = new EventEmitter();
|
|
12115
12118
|
constructor() {
|
|
12116
12119
|
}
|
|
12117
12120
|
ngAfterViewInit() {
|
|
@@ -12122,6 +12125,7 @@ class InputDateTimeComponent {
|
|
|
12122
12125
|
timeFormat: 'HH:mm',
|
|
12123
12126
|
},
|
|
12124
12127
|
autoClose: true,
|
|
12128
|
+
range: this.range,
|
|
12125
12129
|
multipleDatesSeparator: ' - ',
|
|
12126
12130
|
timepicker: this.timepicker,
|
|
12127
12131
|
minDate: this.minDate,
|
|
@@ -12167,7 +12171,10 @@ class InputDateTimeComponent {
|
|
|
12167
12171
|
this.updateValueModel(this.dateModel, this.timeModel);
|
|
12168
12172
|
}
|
|
12169
12173
|
}
|
|
12170
|
-
|
|
12174
|
+
else if (typeof formattedDate === 'object') {
|
|
12175
|
+
this.updateValuesArray(date);
|
|
12176
|
+
}
|
|
12177
|
+
},
|
|
12171
12178
|
});
|
|
12172
12179
|
}
|
|
12173
12180
|
ngOnChanges(changes) {
|
|
@@ -12243,7 +12250,9 @@ class InputDateTimeComponent {
|
|
|
12243
12250
|
this.dt && this.dt.clear();
|
|
12244
12251
|
this.dateModel = dateModelConstant;
|
|
12245
12252
|
this.timeModel = timeModelConstant$1;
|
|
12246
|
-
this.
|
|
12253
|
+
if (!this.range) {
|
|
12254
|
+
this.updateValue('');
|
|
12255
|
+
}
|
|
12247
12256
|
this.innerInvalid = false;
|
|
12248
12257
|
this.innerInvalidMessage = '';
|
|
12249
12258
|
}
|
|
@@ -12265,6 +12274,12 @@ class InputDateTimeComponent {
|
|
|
12265
12274
|
}
|
|
12266
12275
|
}
|
|
12267
12276
|
}
|
|
12277
|
+
updateValuesArray = (values) => {
|
|
12278
|
+
const dates = values.map(date => {
|
|
12279
|
+
return formattingToMoscowTimezone(date.toISOString(), this.timezone);
|
|
12280
|
+
});
|
|
12281
|
+
this.updateValue(dates);
|
|
12282
|
+
};
|
|
12268
12283
|
dateFormattingOutput(value) {
|
|
12269
12284
|
if (value) {
|
|
12270
12285
|
return dayjs(value).toISOString();
|
|
@@ -12328,19 +12343,28 @@ class InputDateTimeComponent {
|
|
|
12328
12343
|
}
|
|
12329
12344
|
writeValue(outsideValue) {
|
|
12330
12345
|
if (outsideValue) {
|
|
12331
|
-
|
|
12332
|
-
|
|
12333
|
-
|
|
12334
|
-
|
|
12335
|
-
|
|
12336
|
-
|
|
12337
|
-
|
|
12338
|
-
|
|
12339
|
-
|
|
12346
|
+
if (typeof outsideValue === 'string') {
|
|
12347
|
+
this.value = cleanDate$1(outsideValue);
|
|
12348
|
+
this.dateModel = dateModelValueParse(outsideValue, this.timezone);
|
|
12349
|
+
this.timeModel = timeModelValueParse$1(outsideValue, this.timezone);
|
|
12350
|
+
this.checkingInvalid(outsideValue, this.maxDate, this.minDate);
|
|
12351
|
+
this.dt.selectDate(formattingFromModels(this.dateModel, this.timeModel, this.timepicker).toISOString(), {
|
|
12352
|
+
updateTime: this.timepicker,
|
|
12353
|
+
silent: true
|
|
12354
|
+
});
|
|
12355
|
+
this.dt.setViewDate(formattingFromModels(this.dateModel, this.timeModel, this.timepicker).toISOString());
|
|
12356
|
+
}
|
|
12357
|
+
else if (typeof outsideValue === 'object') {
|
|
12358
|
+
this.value = outsideValue.map(date => cleanDate$1(date));
|
|
12359
|
+
this.dt.selectDate(this.value, {
|
|
12360
|
+
updateTime: this.timepicker,
|
|
12361
|
+
silent: true
|
|
12362
|
+
});
|
|
12363
|
+
}
|
|
12340
12364
|
}
|
|
12341
12365
|
else {
|
|
12342
12366
|
if (this.dt) {
|
|
12343
|
-
this.dt.clear();
|
|
12367
|
+
this.dt.clear({ silent: true });
|
|
12344
12368
|
this.value = '';
|
|
12345
12369
|
this.dateModel = dateModelConstant;
|
|
12346
12370
|
this.timeModel = timeModelConstant$1;
|
|
@@ -12367,16 +12391,21 @@ class InputDateTimeComponent {
|
|
|
12367
12391
|
this.onChange(insideValue);
|
|
12368
12392
|
this.onTouched();
|
|
12369
12393
|
}
|
|
12394
|
+
onBlur(event) {
|
|
12395
|
+
setTimeout(() => {
|
|
12396
|
+
this.blurred.emit({ value: this.value, id: this.uuid });
|
|
12397
|
+
});
|
|
12398
|
+
}
|
|
12370
12399
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateTimeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12371
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputDateTimeComponent, selector: "mrx-input-date-time", inputs: { fields: "fields", size: "size", customClasses: "customClasses", dateLabel: "dateLabel", timeLabel: "timeLabel", datePlaceholder: "datePlaceholder", timePlaceholder: "timePlaceholder", disabled: "disabled", readonly: "readonly", required: "required", timepicker: "timepicker", minDate: "minDate", maxDate: "maxDate", timezone: "timezone", inline: "inline", isManualInput: "isManualInput", addMinTime: "addMinTime", addMaxTime: "addMaxTime", addMinTimeObj: "addMinTimeObj", addMaxTimeObj: "addMaxTimeObj", disableValidate: "disableValidate", container: "container", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid" }, outputs: { changed: "changed", modelChange: "modelChange" }, providers: [
|
|
12400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: InputDateTimeComponent, selector: "mrx-input-date-time", inputs: { fields: "fields", size: "size", customClasses: "customClasses", dateLabel: "dateLabel", timeLabel: "timeLabel", datePlaceholder: "datePlaceholder", timePlaceholder: "timePlaceholder", disabled: "disabled", readonly: "readonly", required: "required", timepicker: "timepicker", range: "range", minDate: "minDate", maxDate: "maxDate", timezone: "timezone", inline: "inline", isManualInput: "isManualInput", addMinTime: "addMinTime", addMaxTime: "addMaxTime", addMinTimeObj: "addMinTimeObj", addMaxTimeObj: "addMaxTimeObj", disableValidate: "disableValidate", container: "container", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid" }, outputs: { changed: "changed", modelChange: "modelChange", blurred: "blurred" }, providers: [
|
|
12372
12401
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateTimeComponent), multi: true }
|
|
12373
|
-
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.mrx-input-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"\">\r\n <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n <div class=\"mrx-input-date__wrapper\">\r\n <input\r\n #dateInput\r\n type=\"text\"\r\n autocomplete=\"nope\"\r\n class=\"mrx-input-date__input mrx-input-date__date\"\r\n [placeholder]=\"datePlaceholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"'00.00.0000 00:m0'\"\r\n [leadZeroDateTime]=\"true\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"!isManualInput\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\r\n />\r\n\r\n <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n *ngIf=\"isViewCleanIcon\"\r\n (click)=\"clickToIconClear()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n <span\r\n class=\"mrx-icon icon-calendar\"\r\n (click)=\"clickToIconCalendar()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid; else innerInvalidTemplate\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <ng-template #innerInvalidTemplate>\r\n <mrx-error-message\r\n *ngIf=\"innerInvalid\"\r\n [invalidMessage]=\"innerInvalidMessage\"\r\n ></mrx-error-message>\r\n </ng-template>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".mrx-input-date
|
|
12402
|
+
], viewQueries: [{ propertyName: "dateInput", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInput", first: true, predicate: ["timeInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.mrx-input-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"\">\r\n <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n <div class=\"mrx-input-date__wrapper\">\r\n <input\r\n #dateInput\r\n type=\"text\"\r\n autocomplete=\"nope\"\r\n class=\"mrx-input-date__input mrx-input-date__date\"\r\n [placeholder]=\"datePlaceholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"'00.00.0000 00:m0'\"\r\n [leadZeroDateTime]=\"true\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"!isManualInput\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n *ngIf=\"isViewCleanIcon\"\r\n (click)=\"clickToIconClear()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n <span\r\n class=\"mrx-icon icon-calendar\"\r\n (click)=\"clickToIconCalendar()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid; else innerInvalidTemplate\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <ng-template #innerInvalidTemplate>\r\n <mrx-error-message\r\n *ngIf=\"innerInvalid\"\r\n [invalidMessage]=\"innerInvalidMessage\"\r\n ></mrx-error-message>\r\n </ng-template>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".mrx-input-date{width:100%;position:relative}.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);color:var(--neutral-text-primary);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled);color:var(--neutral-text-tertiary)}.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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-input-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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-input-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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-input-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-date.mrx-input-date .mrx-input-date__icons{position:absolute;top:0;right:0;display:flex;align-items:center}.mrx-input-date.mrx-input-date .mrx-input-date__icons-item,.mrx-input-date.mrx-input-date .mrx-input-date__icons .mrx-icon{cursor:pointer}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-icon{margin-top:calc(var(--spacing-3) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-2)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: LabelComponent, selector: "mrx-label", inputs: ["requiredHidden", "required", "boldLabel", "disabled", "placeholder", "label", "customClasses", "triggerTextPosition", "isPublicInfo", "publicInfoTooltip", "isSwitch", "switchLabel", "switchValue", "isCheckbox", "checkboxLabel", "checkboxValue", "counter", "linkText", "linkPrevent", "linkType", "linkMonochrome", "href", "triggerType", "tooltip", "tooltipInitialVisible", "isSaveToStorage"], outputs: ["changeSwitchValue", "changeCheckboxValue", "clickedLink"] }, { kind: "directive", type: i6.NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "showTemplate", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
12374
12403
|
}
|
|
12375
12404
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputDateTimeComponent, decorators: [{
|
|
12376
12405
|
type: Component,
|
|
12377
|
-
args: [{ selector: 'mrx-input-date-time', providers: [
|
|
12406
|
+
args: [{ selector: 'mrx-input-date-time', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
12378
12407
|
{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputDateTimeComponent), multi: true }
|
|
12379
|
-
], template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.mrx-input-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"\">\r\n <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n <div class=\"mrx-input-date__wrapper\">\r\n <input\r\n #dateInput\r\n type=\"text\"\r\n autocomplete=\"nope\"\r\n class=\"mrx-input-date__input mrx-input-date__date\"\r\n [placeholder]=\"datePlaceholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"'00.00.0000 00:m0'\"\r\n [leadZeroDateTime]=\"true\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"!isManualInput\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\r\n />\r\n\r\n <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n *ngIf=\"isViewCleanIcon\"\r\n (click)=\"clickToIconClear()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n <span\r\n class=\"mrx-icon icon-calendar\"\r\n (click)=\"clickToIconCalendar()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid; else innerInvalidTemplate\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <ng-template #innerInvalidTemplate>\r\n <mrx-error-message\r\n *ngIf=\"innerInvalid\"\r\n [invalidMessage]=\"innerInvalidMessage\"\r\n ></mrx-error-message>\r\n </ng-template>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".mrx-input-date
|
|
12408
|
+
], template: "<div\r\n class=\"mrx-input-date\"\r\n [class.mrx-input-error]=\"invalid || innerInvalid\"\r\n [class.mrx-input-readonly]=\"readonly\"\r\n [class]=\"getClasses\"\r\n>\r\n <div class=\"\">\r\n <mrx-label *ngIf=\"timeLabel || dateLabel\">{{ dateLabel }}</mrx-label>\r\n <div class=\"mrx-input-date__wrapper\">\r\n <input\r\n #dateInput\r\n type=\"text\"\r\n autocomplete=\"nope\"\r\n class=\"mrx-input-date__input mrx-input-date__date\"\r\n [placeholder]=\"datePlaceholder\"\r\n [ngModel]=\"getDateValue\"\r\n [mask]=\"'00.00.0000 00:m0'\"\r\n [leadZeroDateTime]=\"true\"\r\n [validation]=\"false\"\r\n [disabled]=\"disabled\"\r\n [readOnly]=\"!isManualInput\"\r\n (input)=\"updateDateValue(dateInput)\"\r\n (click)=\"clickToInput(dateInput)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <div *ngIf=\"!disabled\" class=\"mrx-input-date__icons\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n *ngIf=\"isViewCleanIcon\"\r\n (click)=\"clickToIconClear()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n <span\r\n class=\"mrx-icon icon-calendar\"\r\n (click)=\"clickToIconCalendar()\"\r\n [class.icon-font-16]=\"size === 'small'\"\r\n [class.icon-font-24]=\"size === 'medium' || size === 'large'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid; else innerInvalidTemplate\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <ng-template #innerInvalidTemplate>\r\n <mrx-error-message\r\n *ngIf=\"innerInvalid\"\r\n [invalidMessage]=\"innerInvalidMessage\"\r\n ></mrx-error-message>\r\n </ng-template>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\"></mrx-save-state>\r\n</div>\r\n\r\n\r\n\r\n", styles: [".mrx-input-date{width:100%;position:relative}.mrx-input-date .mrx-input-date__wrapper{position:relative}.mrx-input-date .mrx-input-date__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);color:var(--neutral-text-primary);width:100%;transition:outline-width .2s,border .2s}.mrx-input-date .mrx-input-date__input:focus,.mrx-input-date .mrx-input-date__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-input-date .mrx-input-date__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-input-date .mrx-input-date__input:disabled{background-color:var(--neutral-bg-disabled);color:var(--neutral-text-tertiary)}.mrx-input-date.mrx-input-date-lg .mrx-input-date__input{padding:calc(var(--spacing-3) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));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-input-date.mrx-input-date-md .mrx-input-date__input{padding:calc(var(--spacing-2) + var(--spacing-half) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));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-input-date.mrx-input-date-sm .mrx-input-date__input{padding:calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));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-input-date.mrx-input-date.mrx-input-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-error .mrx-input-date__input{border-color:var(--system-bg-controls-negative-default)!important;background-color:var(--system-bg-negative-secondary)!important}.mrx-input-date.mrx-input-date.mrx-input-checked-success .mrx-input-date__input{background-color:var(--system-bg-positive-secondary)!important;border-color:var(--system-bg-controls-positive-default)!important}.mrx-input-date.mrx-input-date .mrx-input-date__icons{position:absolute;top:0;right:0;display:flex;align-items:center}.mrx-input-date.mrx-input-date .mrx-input-date__icons-item,.mrx-input-date.mrx-input-date .mrx-input-date__icons .mrx-icon{cursor:pointer}.mrx-input-date.mrx-input-date.mrx-input-date-lg .mrx-icon{margin-top:calc(var(--spacing-3) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-md .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-3)}.mrx-input-date.mrx-input-date.mrx-input-date-sm .mrx-icon{margin-top:calc(var(--spacing-2) - var(--border-width-default));margin-right:var(--spacing-2)}\n"] }]
|
|
12380
12409
|
}], ctorParameters: () => [], propDecorators: { fields: [{
|
|
12381
12410
|
type: Input
|
|
12382
12411
|
}], size: [{
|
|
@@ -12399,6 +12428,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
12399
12428
|
type: Input
|
|
12400
12429
|
}], timepicker: [{
|
|
12401
12430
|
type: Input
|
|
12431
|
+
}], range: [{
|
|
12432
|
+
type: Input
|
|
12402
12433
|
}], minDate: [{
|
|
12403
12434
|
type: Input
|
|
12404
12435
|
}], maxDate: [{
|
|
@@ -12437,6 +12468,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
12437
12468
|
type: Output
|
|
12438
12469
|
}], modelChange: [{
|
|
12439
12470
|
type: Output
|
|
12471
|
+
}], blurred: [{
|
|
12472
|
+
type: Output
|
|
12440
12473
|
}] } });
|
|
12441
12474
|
|
|
12442
12475
|
const maskConfigFunction$2 = () => {
|