myrta-ui 1.1.98 → 1.1.100

package/fesm2020/myrta-ui.mjs

@@ -1667,10 +1667,10 @@ class DropdownComponent {
     }
 }
 DropdownComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DropdownComponent, selector: "mrx-dropdown", inputs: { mainPlacement: "mainPlacement", fallbackPlacements: "fallbackPlacements", closeOnClick: "closeOnClick", customClasses: "customClasses" }, queries: [{ propertyName: "dropdownToggle", first: true, predicate: ["dropdownToggle"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], viewQueries: [{ propertyName: "dropdownToggleEl", first: true, predicate: ["dropdownToggleEl"], descendants: true }, { propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-dropdown d-flex\" [class]=\"customClasses\">\r\n  <div class=\"mrx-dropdown-toggle\" #dropdownToggleEl>\r\n    <ng-container *ngTemplateOutlet=\"dropdownToggle\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"mrx-dropdown-content\" #dropdownContent>\r\n\r\n    <div class=\"mrx-dropdown-wrapper\">\r\n      <div class=\"mrx-dropdown-menu\" *ngIf=\"dropdownMenu\">\r\n        <ng-container *ngTemplateOutlet=\"dropdownMenu\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mrx-dropdown.mrx-dropdown .mrx-dropdown-content{border-radius:4px;z-index:1000;display:none}.mrx-dropdown.mrx-dropdown .mrx-dropdown-content[data-show]{display:block}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu{display:flex;flex-direction:column;border-radius:4px;background-color:#fff;background-clip:padding-box;box-shadow:0 1px 4px #3a3a3a4d;min-width:240px}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--spacing-2);padding-left:var(--spacing-4);cursor:pointer}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item:hover{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item-content{display:flex;align-items:flex-start;gap:var(--spacing-2)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item-content .mrx-icon{transform:translateY(2px)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item-text{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-primary)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button{width:100%;padding:.25rem 1rem;clear:both;color:#282828;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;cursor:pointer}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button:hover{color:#282828;background-color:#edf5ff}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button svg{margin-right:10px}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button span{font-weight:400;font-size:14px;line-height:20px}.mrx-dropdown-toggle.mrx-dropdown-toggle{cursor:pointer}\n"], directives: [{ type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+DropdownComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: DropdownComponent, selector: "mrx-dropdown", inputs: { mainPlacement: "mainPlacement", fallbackPlacements: "fallbackPlacements", closeOnClick: "closeOnClick", customClasses: "customClasses" }, queries: [{ propertyName: "dropdownToggle", first: true, predicate: ["dropdownToggle"], descendants: true }, { propertyName: "dropdownMenu", first: true, predicate: ["dropdownMenu"], descendants: true }], viewQueries: [{ propertyName: "dropdownToggleEl", first: true, predicate: ["dropdownToggleEl"], descendants: true }, { propertyName: "dropdownContent", first: true, predicate: ["dropdownContent"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-dropdown d-flex\" [class]=\"customClasses\">\r\n  <div class=\"mrx-dropdown-toggle\" #dropdownToggleEl>\r\n    <ng-container *ngTemplateOutlet=\"dropdownToggle\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"mrx-dropdown-content\" #dropdownContent>\r\n\r\n    <div class=\"mrx-dropdown-wrapper\">\r\n      <div class=\"mrx-dropdown-menu\" *ngIf=\"dropdownMenu\">\r\n        <ng-container *ngTemplateOutlet=\"dropdownMenu\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mrx-dropdown.mrx-dropdown .mrx-dropdown-content{border-radius:4px;z-index:1000;display:none}.mrx-dropdown.mrx-dropdown .mrx-dropdown-content[data-show]{display:block}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu{display:flex;flex-direction:column;border-radius:4px;background-color:#fff;background-clip:padding-box;box-shadow:0 1px 4px #3a3a3a4d;min-width:240px}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--spacing-2);padding-left:var(--spacing-4);cursor:pointer}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item:hover{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item-content{display:flex;align-items:flex-start;gap:var(--spacing-2)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item-content .mrx-icon{transform:translateY(2px)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item-text{font-family:var(--body-md-font-family, \"PT Sans\");font-size:var(--body-md-font-size, 14px);font-weight:var(--body-md-font-weight, 400);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button{width:100%;padding:10px 8px 10px 16px;clear:both;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-family:var(--body-md-font-family, \"PT Sans\");font-size:var(--body-md-font-size, 14px);font-weight:var(--body-md-font-weight, 400);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626);display:flex;align-items:center;cursor:pointer}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button:hover{color:var(--neutral-text-primary, #262626);background-color:var(--brand-bg-tertiary-hover, #edf5ff)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button svg{margin-right:10px}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button span{font-weight:400;font-size:14px;line-height:20px}.mrx-dropdown-toggle.mrx-dropdown-toggle{cursor:pointer}\n"], directives: [{ type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: DropdownComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mrx-dropdown', template: "<div class=\"mrx-dropdown d-flex\" [class]=\"customClasses\">\r\n  <div class=\"mrx-dropdown-toggle\" #dropdownToggleEl>\r\n    <ng-container *ngTemplateOutlet=\"dropdownToggle\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"mrx-dropdown-content\" #dropdownContent>\r\n\r\n    <div class=\"mrx-dropdown-wrapper\">\r\n      <div class=\"mrx-dropdown-menu\" *ngIf=\"dropdownMenu\">\r\n        <ng-container *ngTemplateOutlet=\"dropdownMenu\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mrx-dropdown.mrx-dropdown .mrx-dropdown-content{border-radius:4px;z-index:1000;display:none}.mrx-dropdown.mrx-dropdown .mrx-dropdown-content[data-show]{display:block}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu{display:flex;flex-direction:column;border-radius:4px;background-color:#fff;background-clip:padding-box;box-shadow:0 1px 4px #3a3a3a4d;min-width:240px}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--spacing-2);padding-left:var(--spacing-4);cursor:pointer}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item:hover{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item-content{display:flex;align-items:flex-start;gap:var(--spacing-2)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item-content .mrx-icon{transform:translateY(2px)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item-text{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-primary)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button{width:100%;padding:.25rem 1rem;clear:both;color:#282828;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-weight:400;font-size:14px;line-height:20px;display:flex;align-items:center;cursor:pointer}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button:hover{color:#282828;background-color:#edf5ff}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button svg{margin-right:10px}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button span{font-weight:400;font-size:14px;line-height:20px}.mrx-dropdown-toggle.mrx-dropdown-toggle{cursor:pointer}\n"] }]
+            args: [{ selector: 'mrx-dropdown', template: "<div class=\"mrx-dropdown d-flex\" [class]=\"customClasses\">\r\n  <div class=\"mrx-dropdown-toggle\" #dropdownToggleEl>\r\n    <ng-container *ngTemplateOutlet=\"dropdownToggle\"></ng-container>\r\n  </div>\r\n\r\n  <div class=\"mrx-dropdown-content\" #dropdownContent>\r\n\r\n    <div class=\"mrx-dropdown-wrapper\">\r\n      <div class=\"mrx-dropdown-menu\" *ngIf=\"dropdownMenu\">\r\n        <ng-container *ngTemplateOutlet=\"dropdownMenu\"></ng-container>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".mrx-dropdown.mrx-dropdown .mrx-dropdown-content{border-radius:4px;z-index:1000;display:none}.mrx-dropdown.mrx-dropdown .mrx-dropdown-content[data-show]{display:block}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu{display:flex;flex-direction:column;border-radius:4px;background-color:#fff;background-clip:padding-box;box-shadow:0 1px 4px #3a3a3a4d;min-width:240px}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item{display:flex;align-items:flex-start;justify-content:space-between;padding:var(--spacing-2);padding-left:var(--spacing-4);cursor:pointer}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item:hover{background-color:var(--brand-bg-tertiary-hover)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item-content{display:flex;align-items:flex-start;gap:var(--spacing-2)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item-content .mrx-icon{transform:translateY(2px)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu .dropdown-item-text{font-family:var(--body-md-font-family, \"PT Sans\");font-size:var(--body-md-font-size, 14px);font-weight:var(--body-md-font-weight, 400);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button{width:100%;padding:10px 8px 10px 16px;clear:both;text-align:inherit;text-decoration:none;white-space:nowrap;background-color:transparent;border:0;font-family:var(--body-md-font-family, \"PT Sans\");font-size:var(--body-md-font-size, 14px);font-weight:var(--body-md-font-weight, 400);line-height:var(--body-md-line-height, 20px);color:var(--neutral-text-primary, #262626);display:flex;align-items:center;cursor:pointer}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button:hover{color:var(--neutral-text-primary, #262626);background-color:var(--brand-bg-tertiary-hover, #edf5ff)}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button svg{margin-right:10px}:host::ng-deep .mrx-dropdown-menu.mrx-dropdown-menu button span{font-weight:400;font-size:14px;line-height:20px}.mrx-dropdown-toggle.mrx-dropdown-toggle{cursor:pointer}\n"] }]
         }], propDecorators: { dropdownToggleEl: [{
                 type: ViewChild,
                 args: ['dropdownToggleEl']
@@ -9746,6 +9746,7 @@ class InputDateComponent {
         this.invalid = false;
         this.invalidMessage = '';
         this.checkInvalid = null;
+        this.scrollStrategy = 'reposition';
         this.changed = new EventEmitter();
         this.modelChange = new EventEmitter();
         this.blurred = new EventEmitter();
@@ -9897,7 +9898,8 @@ class InputDateComponent {
             .withPositions(PositionStrategyEnum[this.popupPosition]);
         this._overlayRef = this._overlay.create({
             positionStrategy,
-            hasBackdrop: false
+            hasBackdrop: false,
+            scrollStrategy: this.scrollStrategy === 'reposition' ? this._overlay.scrollStrategies.reposition() : this._overlay.scrollStrategies.close(),
         });
         const portal = new ComponentPortal(DateCalendarComponent);
         const componentRef = this._overlayRef.attach(portal);
@@ -9952,7 +9954,7 @@ class InputDateComponent {
     }
 }
 InputDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.4.0", ngImport: i0, type: InputDateComponent, deps: [{ token: i1$2.Overlay }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-InputDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputDateComponent, selector: "mrx-input-date", inputs: { fields: "fields", format: "format", minDate: "minDate", maxDate: "maxDate", isSilentValidation: "isSilentValidation", isManualInput: "isManualInput", closeAfterSelect: "closeAfterSelect", required: "required", size: "size", customClasses: "customClasses", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", popupPosition: "popupPosition", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid" }, outputs: { changed: "changed", modelChange: "modelChange", blurred: "blurred" }, providers: [
+InputDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.4.0", type: InputDateComponent, selector: "mrx-input-date", inputs: { fields: "fields", format: "format", minDate: "minDate", maxDate: "maxDate", isSilentValidation: "isSilentValidation", isManualInput: "isManualInput", closeAfterSelect: "closeAfterSelect", required: "required", size: "size", customClasses: "customClasses", disabled: "disabled", readonly: "readonly", placeholder: "placeholder", popupPosition: "popupPosition", invalid: "invalid", invalidMessage: "invalidMessage", checkInvalid: "checkInvalid", scrollStrategy: "scrollStrategy" }, outputs: { changed: "changed", modelChange: "modelChange", blurred: "blurred" }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => InputDateComponent),
@@ -10002,6 +10004,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.4.0", ngImpor
                 type: Input
             }], checkInvalid: [{
                 type: Input
+            }], scrollStrategy: [{
+                type: Input
             }], changed: [{
                 type: Output
             }], modelChange: [{