myrta-ui 17.0.65 → 17.0.67
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/select/helpers/get-selected-items.helper.mjs +3 -3
- package/esm2022/lib/components/form/select/helpers/modify-origin-items.helper.mjs +4 -4
- package/esm2022/lib/components/form/select/select.component.mjs +4 -4
- package/esm2022/lib/components/side-page/side-page.component.mjs +9 -3
- package/fesm2022/myrta-ui.mjs +16 -10
- package/fesm2022/myrta-ui.mjs.map +1 -1
- package/lib/components/form/select/helpers/get-selected-items.helper.d.ts +1 -1
- package/lib/components/form/select/helpers/modify-origin-items.helper.d.ts +1 -1
- package/lib/components/side-page/side-page.component.d.ts +4 -1
- package/package.json +1 -1
package/fesm2022/myrta-ui.mjs
CHANGED
|
@@ -2266,6 +2266,8 @@ class SidePageComponent {
|
|
|
2266
2266
|
detector;
|
|
2267
2267
|
title = '';
|
|
2268
2268
|
tooltip = '';
|
|
2269
|
+
tooltipMaxWidth = 264;
|
|
2270
|
+
tooltipPosition = 'top';
|
|
2269
2271
|
isOpen = false;
|
|
2270
2272
|
size = 'large';
|
|
2271
2273
|
position = 'right';
|
|
@@ -2334,7 +2336,7 @@ class SidePageComponent {
|
|
|
2334
2336
|
}
|
|
2335
2337
|
}
|
|
2336
2338
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SidePageComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
2337
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SidePageComponent, selector: "mrx-side-page", inputs: { title: "title", tooltip: "tooltip", isOpen: "isOpen", size: "size", position: "position", customClasses: "customClasses", enableHeader: "enableHeader", enableFooter: "enableFooter", headerSize: "headerSize", paddingTop: "paddingTop", okText: "okText", closeText: "closeText", isLoading: "isLoading", isBack: "isBack", backText: "backText", backRouterLink: "backRouterLink", backQueryParams: "backQueryParams", closeAfterLink: "closeAfterLink", invalid: "invalid", invalidMessage: "invalidMessage" }, outputs: { ok: "ok", close: "close", back: "back" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"mrx-side-page-content\"\r\n [class]=\"getClasses\"\r\n [style.top]=\"paddingTop\"\r\n [@animateExpand]=\"isOpen ? 'open' : 'closed'\"\r\n>\r\n @if (enableHeader) {\r\n @if (!headerTemplate) {\r\n <div class=\"mrx-side-page-header brdb\" [class]=\"getHeaderClasses\">\r\n <div class=\"mrx-side-page-header__content\">\r\n @if (isBack) {\r\n <mrx-breadcrumbs\r\n type=\"link\"\r\n customClasses=\"mb-2\"\r\n [item]=\"{\r\n text: backText,\r\n routerLink: backRouterLink,\r\n queryParams: backQueryParams,\r\n isShowArrow: true\r\n }\"\r\n (click)=\"closeModal()\"\r\n ></mrx-breadcrumbs>\r\n }\r\n\r\n <h2 class=\"mrx-side-page-header__content--title\">\r\n @if (title) {\r\n <span>{{ title }}</span>\r\n }\r\n\r\n @if (tooltip) {\r\n <span class=\"mrx-icon icon-info icon-font-16\" [mrxCdkTooltip]=\"tooltip\"></span>\r\n }\r\n </h2>\r\n </div>\r\n\r\n <span class=\"mrx-icon icon-close\" (click)=\"onClose()\"></span>\r\n </div>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n }\r\n\r\n <div class=\"mrx-side-page-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n @if (enableFooter) {\r\n <div class=\"mrx-side-page-footer brdt\">\r\n @if (invalidMessage) {\r\n <mrx-error-message [invalid]=\"invalid\">{{ invalidMessage }}</mrx-error-message>\r\n }\r\n\r\n <div class=\"mrx-side-page-footer__controls\">\r\n @if (!footerTemplate) {\r\n <mrx-button\r\n [type]=\"'secondary'\"\r\n [color]=\"'default'\"\r\n [size]=\"'medium'\"\r\n (click)=\"onClose()\"\r\n >{{ closeText }}\r\n </mrx-button>\r\n\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"'default'\"\r\n [isLoading]=\"isLoading\"\r\n (click)=\"onOk()\"\r\n >{{ okText }}\r\n </mrx-button>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".mrx-side-page-content{display:flex;flex-direction:column;justify-content:space-between;max-width:100%;background-color:var(--brand-bg-tertiary-default, #FFF);box-shadow:0 1px 4px #3a3a3a4d}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop{height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:absolute;text-align:center;z-index:1000;display:block}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--neutral-bg-modal)}.mrx-side-page-content.mrx-side-page--position-right{position:absolute;top:0;right:0;bottom:0}.mrx-side-page-content.mrx-side-page--position-left{position:absolute;top:0;left:0;bottom:0}.mrx-side-page--lg{width:620px}.mrx-side-page--md{width:400px}.mrx-side-page--sm{width:280px}@media (max-width: 576px){.mrx-side-page--lg,.mrx-side-page--md,.mrx-side-page--sm{width:100%}}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm{padding:16px 56px 16px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .icon-close{top:calc(50% - 12px);right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content .mrx-side-page-header{position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-side-page-content .mrx-side-page-header__content{display:flex;flex-direction:column;align-items:flex-start;min-height:24px}.mrx-side-page-content .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content .mrx-side-page-header .icon-close{position:absolute;cursor:pointer}.mrx-side-page-content .mrx-side-page-header .icon-close:hover{transform:scale(1.1)}.mrx-side-page-footer{padding:24px;min-height:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.mrx-side-page-footer__controls{display:flex;align-items:center;justify-content:flex-start;gap:16px}:host::ng-deep .mrx-error-message{margin-top:0!important}.mrx-side-page-body{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: BreadcrumbsComponent, selector: "mrx-breadcrumbs", inputs: ["type", "items", "item", "customClasses"] }, { kind: "directive", type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], animations: [
|
|
2339
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SidePageComponent, selector: "mrx-side-page", inputs: { title: "title", tooltip: "tooltip", tooltipMaxWidth: "tooltipMaxWidth", tooltipPosition: "tooltipPosition", isOpen: "isOpen", size: "size", position: "position", customClasses: "customClasses", enableHeader: "enableHeader", enableFooter: "enableFooter", headerSize: "headerSize", paddingTop: "paddingTop", okText: "okText", closeText: "closeText", isLoading: "isLoading", isBack: "isBack", backText: "backText", backRouterLink: "backRouterLink", backQueryParams: "backQueryParams", closeAfterLink: "closeAfterLink", invalid: "invalid", invalidMessage: "invalidMessage" }, outputs: { ok: "ok", close: "close", back: "back" }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["headerTemplate"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true }], ngImport: i0, template: "<div\r\n class=\"mrx-side-page-content\"\r\n [class]=\"getClasses\"\r\n [style.top]=\"paddingTop\"\r\n [@animateExpand]=\"isOpen ? 'open' : 'closed'\"\r\n>\r\n @if (enableHeader) {\r\n @if (!headerTemplate) {\r\n <div class=\"mrx-side-page-header brdb\" [class]=\"getHeaderClasses\">\r\n <div class=\"mrx-side-page-header__content\">\r\n @if (isBack) {\r\n <mrx-breadcrumbs\r\n type=\"link\"\r\n customClasses=\"mb-2\"\r\n [item]=\"{\r\n text: backText,\r\n routerLink: backRouterLink,\r\n queryParams: backQueryParams,\r\n isShowArrow: true\r\n }\"\r\n (click)=\"closeModal()\"\r\n ></mrx-breadcrumbs>\r\n }\r\n\r\n <h2 class=\"mrx-side-page-header__content--title\">\r\n @if (title) {\r\n <span>{{ title }}</span>\r\n }\r\n\r\n @if (tooltip) {\r\n <span \r\n class=\"mrx-icon icon-info icon-font-16\" \r\n [mrxCdkTooltip]=\"tooltip\" \r\n [tooltipMaxWidth]=\"tooltipMaxWidth\"\r\n [tooltipPosition]=\"tooltipPosition\"\r\n ></span>\r\n }\r\n </h2>\r\n </div>\r\n\r\n <span class=\"mrx-icon icon-close\" (click)=\"onClose()\"></span>\r\n </div>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n }\r\n\r\n <div class=\"mrx-side-page-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n @if (enableFooter) {\r\n <div class=\"mrx-side-page-footer brdt\">\r\n @if (invalidMessage) {\r\n <mrx-error-message [invalid]=\"invalid\">{{ invalidMessage }}</mrx-error-message>\r\n }\r\n\r\n <div class=\"mrx-side-page-footer__controls\">\r\n @if (!footerTemplate) {\r\n <mrx-button\r\n [type]=\"'secondary'\"\r\n [color]=\"'default'\"\r\n [size]=\"'medium'\"\r\n (click)=\"onClose()\"\r\n >{{ closeText }}\r\n </mrx-button>\r\n\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"'default'\"\r\n [isLoading]=\"isLoading\"\r\n (click)=\"onOk()\"\r\n >{{ okText }}\r\n </mrx-button>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".mrx-side-page-content{display:flex;flex-direction:column;justify-content:space-between;max-width:100%;background-color:var(--brand-bg-tertiary-default, #FFF);box-shadow:0 1px 4px #3a3a3a4d}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop{height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:absolute;text-align:center;z-index:1000;display:block}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--neutral-bg-modal)}.mrx-side-page-content.mrx-side-page--position-right{position:absolute;top:0;right:0;bottom:0}.mrx-side-page-content.mrx-side-page--position-left{position:absolute;top:0;left:0;bottom:0}.mrx-side-page--lg{width:620px}.mrx-side-page--md{width:400px}.mrx-side-page--sm{width:280px}@media (max-width: 576px){.mrx-side-page--lg,.mrx-side-page--md,.mrx-side-page--sm{width:100%}}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm{padding:16px 56px 16px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .icon-close{top:calc(50% - 12px);right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content .mrx-side-page-header{position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-side-page-content .mrx-side-page-header__content{display:flex;flex-direction:column;align-items:flex-start;min-height:24px}.mrx-side-page-content .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content .mrx-side-page-header .icon-close{position:absolute;cursor:pointer}.mrx-side-page-content .mrx-side-page-header .icon-close:hover{transform:scale(1.1)}.mrx-side-page-footer{padding:24px;min-height:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.mrx-side-page-footer__controls{display:flex;align-items:center;justify-content:flex-start;gap:16px}:host::ng-deep .mrx-error-message{margin-top:0!important}.mrx-side-page-body{flex-grow:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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: BreadcrumbsComponent, selector: "mrx-breadcrumbs", inputs: ["type", "items", "item", "customClasses"] }, { kind: "directive", type: CdkTooltipDirective, selector: "[mrxCdkTooltip]", inputs: ["mrxCdkTooltip", "tooltipActive", "autoCloseByScroll", "tooltipPosition", "tooltipMaxWidth"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }], animations: [
|
|
2338
2340
|
trigger('animateExpand', [
|
|
2339
2341
|
state('open', style({
|
|
2340
2342
|
transform: 'translateX(0)'
|
|
@@ -2360,11 +2362,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2360
2362
|
transition('open => closed', [animate('0.5s ease')]),
|
|
2361
2363
|
transition('closed => open', [animate('0.5s ease')]),
|
|
2362
2364
|
]),
|
|
2363
|
-
], template: "<div\r\n class=\"mrx-side-page-content\"\r\n [class]=\"getClasses\"\r\n [style.top]=\"paddingTop\"\r\n [@animateExpand]=\"isOpen ? 'open' : 'closed'\"\r\n>\r\n @if (enableHeader) {\r\n @if (!headerTemplate) {\r\n <div class=\"mrx-side-page-header brdb\" [class]=\"getHeaderClasses\">\r\n <div class=\"mrx-side-page-header__content\">\r\n @if (isBack) {\r\n <mrx-breadcrumbs\r\n type=\"link\"\r\n customClasses=\"mb-2\"\r\n [item]=\"{\r\n
|
|
2365
|
+
], template: "<div\r\n class=\"mrx-side-page-content\"\r\n [class]=\"getClasses\"\r\n [style.top]=\"paddingTop\"\r\n [@animateExpand]=\"isOpen ? 'open' : 'closed'\"\r\n>\r\n @if (enableHeader) {\r\n @if (!headerTemplate) {\r\n <div class=\"mrx-side-page-header brdb\" [class]=\"getHeaderClasses\">\r\n <div class=\"mrx-side-page-header__content\">\r\n @if (isBack) {\r\n <mrx-breadcrumbs\r\n type=\"link\"\r\n customClasses=\"mb-2\"\r\n [item]=\"{\r\n text: backText,\r\n routerLink: backRouterLink,\r\n queryParams: backQueryParams,\r\n isShowArrow: true\r\n }\"\r\n (click)=\"closeModal()\"\r\n ></mrx-breadcrumbs>\r\n }\r\n\r\n <h2 class=\"mrx-side-page-header__content--title\">\r\n @if (title) {\r\n <span>{{ title }}</span>\r\n }\r\n\r\n @if (tooltip) {\r\n <span \r\n class=\"mrx-icon icon-info icon-font-16\" \r\n [mrxCdkTooltip]=\"tooltip\" \r\n [tooltipMaxWidth]=\"tooltipMaxWidth\"\r\n [tooltipPosition]=\"tooltipPosition\"\r\n ></span>\r\n }\r\n </h2>\r\n </div>\r\n\r\n <span class=\"mrx-icon icon-close\" (click)=\"onClose()\"></span>\r\n </div>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\r\n }\r\n }\r\n\r\n <div class=\"mrx-side-page-body\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n @if (enableFooter) {\r\n <div class=\"mrx-side-page-footer brdt\">\r\n @if (invalidMessage) {\r\n <mrx-error-message [invalid]=\"invalid\">{{ invalidMessage }}</mrx-error-message>\r\n }\r\n\r\n <div class=\"mrx-side-page-footer__controls\">\r\n @if (!footerTemplate) {\r\n <mrx-button\r\n [type]=\"'secondary'\"\r\n [color]=\"'default'\"\r\n [size]=\"'medium'\"\r\n (click)=\"onClose()\"\r\n >{{ closeText }}\r\n </mrx-button>\r\n\r\n <mrx-button\r\n [type]=\"'primary'\"\r\n [size]=\"'medium'\"\r\n [color]=\"'default'\"\r\n [isLoading]=\"isLoading\"\r\n (click)=\"onOk()\"\r\n >{{ okText }}\r\n </mrx-button>\r\n } @else {\r\n <ng-container *ngTemplateOutlet=\"footerTemplate\"></ng-container>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".mrx-side-page-content{display:flex;flex-direction:column;justify-content:space-between;max-width:100%;background-color:var(--brand-bg-tertiary-default, #FFF);box-shadow:0 1px 4px #3a3a3a4d}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop{height:100%;inset:0;overflow-x:hidden;overflow-y:auto;padding:0 16px;position:absolute;text-align:center;z-index:1000;display:block}::ng-deep .mrx-side-page-backdrop.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{background-color:var(--neutral-bg-modal)}.mrx-side-page-content.mrx-side-page--position-right{position:absolute;top:0;right:0;bottom:0}.mrx-side-page-content.mrx-side-page--position-left{position:absolute;top:0;left:0;bottom:0}.mrx-side-page--lg{width:620px}.mrx-side-page--md{width:400px}.mrx-side-page--sm{width:280px}@media (max-width: 576px){.mrx-side-page--lg,.mrx-side-page--md,.mrx-side-page--sm{width:100%}}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm{padding:16px 56px 16px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--sm .icon-close{top:calc(50% - 12px);right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-3-font-family);font-weight:var(--headlines-lvl-3-font-weight);line-height:var(--headlines-lvl-3-line-height);font-size:var(--headlines-lvl-3-font-size)}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--lg .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--md .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm{padding:16px 40px 16px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-4-font-family);font-weight:var(--headlines-lvl-4-font-weight);line-height:var(--headlines-lvl-4-line-height);font-size:var(--headlines-lvl-4-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--sm .icon-close{top:calc(50% - 8px);right:16px;font-size:16px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg{padding:24px 56px 24px 24px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title{font-family:var(--headlines-lvl-5-font-family);font-weight:var(--headlines-lvl-5-font-weight);line-height:var(--headlines-lvl-5-line-height);font-size:var(--headlines-lvl-5-font-size)}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content.mrx-side-page--sm .mrx-side-page-header--lg .icon-close{top:16px;right:16px;font-size:24px}.mrx-side-page-content .mrx-side-page-header{position:relative;border-top-left-radius:4px;border-top-right-radius:4px}.mrx-side-page-content .mrx-side-page-header__content{display:flex;flex-direction:column;align-items:flex-start;min-height:24px}.mrx-side-page-content .mrx-side-page-header__content--title span{display:inline}.mrx-side-page-content .mrx-side-page-header__content--title span.mrx-icon{margin-left:8px}.mrx-side-page-content .mrx-side-page-header .icon-close{position:absolute;cursor:pointer}.mrx-side-page-content .mrx-side-page-header .icon-close:hover{transform:scale(1.1)}.mrx-side-page-footer{padding:24px;min-height:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px}.mrx-side-page-footer__controls{display:flex;align-items:center;justify-content:flex-start;gap:16px}:host::ng-deep .mrx-error-message{margin-top:0!important}.mrx-side-page-body{flex-grow:1}\n"] }]
|
|
2364
2366
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { title: [{
|
|
2365
2367
|
type: Input
|
|
2366
2368
|
}], tooltip: [{
|
|
2367
2369
|
type: Input
|
|
2370
|
+
}], tooltipMaxWidth: [{
|
|
2371
|
+
type: Input
|
|
2372
|
+
}], tooltipPosition: [{
|
|
2373
|
+
type: Input
|
|
2368
2374
|
}], isOpen: [{
|
|
2369
2375
|
type: Input
|
|
2370
2376
|
}], size: [{
|
|
@@ -2463,7 +2469,7 @@ var SelectSizeEnum;
|
|
|
2463
2469
|
SelectSizeEnum["large"] = "mrx-select-lg";
|
|
2464
2470
|
})(SelectSizeEnum || (SelectSizeEnum = {}));
|
|
2465
2471
|
|
|
2466
|
-
const modifyOriginItems = (selected, bindValue
|
|
2472
|
+
const modifyOriginItems = (selected, bindValue) => {
|
|
2467
2473
|
if (bindValue) {
|
|
2468
2474
|
const modifiedSelected = [];
|
|
2469
2475
|
for (let item of selected) {
|
|
@@ -2477,10 +2483,10 @@ const modifyOriginItems = (selected, bindValue, bindLabel) => {
|
|
|
2477
2483
|
}
|
|
2478
2484
|
}
|
|
2479
2485
|
}
|
|
2480
|
-
return
|
|
2486
|
+
return modifiedSelected;
|
|
2481
2487
|
}
|
|
2482
2488
|
else {
|
|
2483
|
-
return
|
|
2489
|
+
return selected;
|
|
2484
2490
|
}
|
|
2485
2491
|
};
|
|
2486
2492
|
|
|
@@ -2489,8 +2495,8 @@ const cleanSelectItems = (innerList) => {
|
|
|
2489
2495
|
};
|
|
2490
2496
|
const cleanSelectItem = ({ __id, __selected, ...rest }) => rest;
|
|
2491
2497
|
|
|
2492
|
-
const getSelectedItems = (innerItems, bindValue
|
|
2493
|
-
return modifyOriginItems(cleanSelectItems(innerItems.filter(item => item.__selected)), bindValue
|
|
2498
|
+
const getSelectedItems = (innerItems, bindValue) => {
|
|
2499
|
+
return modifyOriginItems(cleanSelectItems(innerItems.filter(item => item.__selected)), bindValue);
|
|
2494
2500
|
};
|
|
2495
2501
|
|
|
2496
2502
|
const getInnerItems = (items, selectedItems = []) => {
|
|
@@ -2842,7 +2848,7 @@ class SelectComponent {
|
|
|
2842
2848
|
this.innerItems = getInnerItems(items, this.selected);
|
|
2843
2849
|
}
|
|
2844
2850
|
updateValue(selectedItems) {
|
|
2845
|
-
const clearedSelected = getSelectedItems(selectedItems, this.bindValue
|
|
2851
|
+
const clearedSelected = getSelectedItems(selectedItems, this.bindValue);
|
|
2846
2852
|
const outputSelected = this.multiple ? clearedSelected : clearedSelected.length ? clearedSelected[0] : null;
|
|
2847
2853
|
this.changed.emit(outputSelected);
|
|
2848
2854
|
this.modelChange.emit({ value: outputSelected, id: this.uuid });
|
|
@@ -2866,7 +2872,7 @@ class SelectComponent {
|
|
|
2866
2872
|
useExisting: forwardRef(() => SelectComponent),
|
|
2867
2873
|
multi: true,
|
|
2868
2874
|
},
|
|
2869
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "popupHeaderTemplate", first: true, predicate: ["popupHeaderTemplate"], descendants: true }, { propertyName: "popupFooterTemplate", first: true, predicate: ["popupFooterTemplate"], descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-select\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-select__wrapper\">\r\n <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\" [popupPosition]=\"popupPosition\">\r\n @if (getSelectedLabels.length) {\r\n @if (multiple) {\r\n <div class=\"mrx-select__input__values\">\r\n @for (item of getSelectedLabels; track item; let first = $first; let last = $last) {\r\n @if (labelTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last, clear: clearItem}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"mrx-select__input__value\">\r\n @for (item of getSelectedLabels; track item) {\r\n {{ bindLabel ? item[bindLabel] : item['label'] }}\r\n }\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"mrx-select__input__placeholder\">{{ placeholder }}</div>\r\n }\r\n\r\n <div class=\"mrx-select__input__controls\">\r\n @if (isLoading) {\r\n <mrx-loader\r\n [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n [color]=\"'brand'\"\r\n ></mrx-loader>\r\n }\r\n\r\n @if (getSelectedLabels.length && clearable) {\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n }\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class.icon-chevron-up]=\"isOpen\"\r\n [class.icon-chevron-down]=\"!isOpen\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n @for (item of filteredItems; track item.__id; let first = $first; let last = $last) {\r\n <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n @if (optionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"optionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n </mrx-popup-item>\r\n } @empty {\r\n <mrx-popup-item [custom]=\"true\">\r\n <div class=\"mrx-select__dropdown__empty\">{{ 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-text\r\n [size]=\"'medium'\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [(ngModel)]=\"searchValue\"\r\n ></mrx-input-text>\r\n </div>\r\n }\r\n\r\n @if (popupHeaderTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"popupHeaderTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #footerTemplate>\r\n @if (popupFooterTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"popupFooterTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n </mrx-popup>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n @if (asLabel(item); as label) {\r\n <div class=\"mrx-select__input__badge\">\r\n <p>{{ bindLabel ? label[bindLabel] : label['label'] }}</p>\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n @if (asOption(item); as option) {\r\n <div class=\"mrx-select__dropdown__item\">\r\n <div class=\"mrx-select__dropdown__item--content\">\r\n @if (bindIcon && option[bindIcon]) {\r\n <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n }\r\n\r\n <p>{{ bindLabel ? option[bindLabel] : option['label'] }}</p>\r\n </div>\r\n\r\n @if (option.__selected) {\r\n <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}.mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__placeholder,.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__placeholder,.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__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 16px}.mrx-select__dropdown__empty{padding:8px 16px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$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: 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"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: InputTextComponent, selector: "mrx-input-text", inputs: ["fields", "disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "invalid", "invalidMessage", "checkInvalid", "customClasses", "size", "isTooltipValue", "icon", "iconColor", "mask", "maskPrefix", "showMaskTyped", "maskDropSpecialCharacters"], outputs: ["changed", "modelChange"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2875
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: ["optionTemplate"], descendants: true }, { propertyName: "labelTemplate", first: true, predicate: ["labelTemplate"], descendants: true }, { propertyName: "popupHeaderTemplate", first: true, predicate: ["popupHeaderTemplate"], descendants: true }, { propertyName: "popupFooterTemplate", first: true, predicate: ["popupFooterTemplate"], descendants: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"mrx-select\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-select__wrapper\">\r\n <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\" [popupPosition]=\"popupPosition\">\r\n @if (getSelectedLabels.length) {\r\n @if (multiple) {\r\n <div class=\"mrx-select__input__values\">\r\n @for (item of getSelectedLabels; track item; let first = $first; let last = $last) {\r\n @if (labelTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last, clear: clearItem}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"mrx-select__input__value\">\r\n @for (item of getSelectedLabels; track item) {\r\n {{ bindLabel ? item[bindLabel] : item['label'] || item }}\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 class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n }\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class.icon-chevron-up]=\"isOpen\"\r\n [class.icon-chevron-down]=\"!isOpen\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n @for (item of filteredItems; track item.__id; let first = $first; let last = $last) {\r\n <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n @if (optionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"optionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n </mrx-popup-item>\r\n } @empty {\r\n <mrx-popup-item [custom]=\"true\">\r\n <div class=\"mrx-select__dropdown__empty\">{{ 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-text\r\n [size]=\"'medium'\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [(ngModel)]=\"searchValue\"\r\n ></mrx-input-text>\r\n </div>\r\n }\r\n\r\n @if (popupHeaderTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"popupHeaderTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #footerTemplate>\r\n @if (popupFooterTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"popupFooterTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n </mrx-popup>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n @if (asLabel(item); as label) {\r\n <div class=\"mrx-select__input__badge\">\r\n <p>{{ bindLabel ? label[bindLabel] : label['label'] || label }}</p>\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n @if (asOption(item); as option) {\r\n <div class=\"mrx-select__dropdown__item\">\r\n <div class=\"mrx-select__dropdown__item--content\">\r\n @if (bindIcon && option[bindIcon]) {\r\n <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n }\r\n\r\n <p>{{ bindLabel ? option[bindLabel] : option['label'] || option }}</p>\r\n </div>\r\n\r\n @if (option.__selected) {\r\n <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}.mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__placeholder,.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__placeholder,.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__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 16px}.mrx-select__dropdown__empty{padding:8px 16px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2$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: 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"] }, { kind: "component", type: LoaderComponent, selector: "mrx-loader", inputs: ["size", "color", "customClasses"] }, { kind: "component", type: InputTextComponent, selector: "mrx-input-text", inputs: ["fields", "disabled", "required", "readonly", "maxlength", "minlength", "placeholder", "invalid", "invalidMessage", "checkInvalid", "customClasses", "size", "isTooltipValue", "icon", "iconColor", "mask", "maskPrefix", "showMaskTyped", "maskDropSpecialCharacters"], outputs: ["changed", "modelChange"] }, { kind: "component", type: ErrorMessageComponent, selector: "mrx-error-message", inputs: ["invalid", "invalidMessage", "customClasses"] }, { kind: "component", type: SaveStateComponent, selector: "mrx-save-state", inputs: ["type", "fields", "id"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2870
2876
|
}
|
|
2871
2877
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
|
|
2872
2878
|
type: Component,
|
|
@@ -2876,7 +2882,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
|
|
|
2876
2882
|
useExisting: forwardRef(() => SelectComponent),
|
|
2877
2883
|
multi: true,
|
|
2878
2884
|
},
|
|
2879
|
-
], template: "<div class=\"mrx-select\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-select__wrapper\">\r\n <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\" [popupPosition]=\"popupPosition\">\r\n @if (getSelectedLabels.length) {\r\n @if (multiple) {\r\n <div class=\"mrx-select__input__values\">\r\n @for (item of getSelectedLabels; track item; let first = $first; let last = $last) {\r\n @if (labelTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last, clear: clearItem}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"mrx-select__input__value\">\r\n @for (item of getSelectedLabels; track item) {\r\n {{ bindLabel ? item[bindLabel] : item['label'] }}\r\n }\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"mrx-select__input__placeholder\">{{ placeholder }}</div>\r\n }\r\n\r\n <div class=\"mrx-select__input__controls\">\r\n @if (isLoading) {\r\n <mrx-loader\r\n [size]=\"size === 'large' ? 'small' : 'extra-small'\"\r\n [color]=\"'brand'\"\r\n ></mrx-loader>\r\n }\r\n\r\n @if (getSelectedLabels.length && clearable) {\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n }\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class.icon-chevron-up]=\"isOpen\"\r\n [class.icon-chevron-down]=\"!isOpen\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n @for (item of filteredItems; track item.__id; let first = $first; let last = $last) {\r\n <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n @if (optionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"optionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n </mrx-popup-item>\r\n } @empty {\r\n <mrx-popup-item [custom]=\"true\">\r\n <div class=\"mrx-select__dropdown__empty\">{{ 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-text\r\n [size]=\"'medium'\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [(ngModel)]=\"searchValue\"\r\n ></mrx-input-text>\r\n </div>\r\n }\r\n\r\n @if (popupHeaderTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"popupHeaderTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #footerTemplate>\r\n @if (popupFooterTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"popupFooterTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n </mrx-popup>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n @if (asLabel(item); as label) {\r\n <div class=\"mrx-select__input__badge\">\r\n <p>{{ bindLabel ? label[bindLabel] : label['label'] }}</p>\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n @if (asOption(item); as option) {\r\n <div class=\"mrx-select__dropdown__item\">\r\n <div class=\"mrx-select__dropdown__item--content\">\r\n @if (bindIcon && option[bindIcon]) {\r\n <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n }\r\n\r\n <p>{{ bindLabel ? option[bindLabel] : option['label'] }}</p>\r\n </div>\r\n\r\n @if (option.__selected) {\r\n <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}.mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__placeholder,.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__placeholder,.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__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 16px}.mrx-select__dropdown__empty{padding:8px 16px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}\n"] }]
|
|
2885
|
+
], template: "<div class=\"mrx-select\"\r\n [class]=\"getClasses\"\r\n [class.mrx-input-error]=\"invalid\"\r\n [class.-disabled]=\"disabled\"\r\n [class.-readonly]=\"readonly\"\r\n>\r\n <div class=\"mrx-select__wrapper\">\r\n <div class=\"mrx-select__input\" [mrxPopupTrigger]=\"dropdown\" [popupPosition]=\"popupPosition\">\r\n @if (getSelectedLabels.length) {\r\n @if (multiple) {\r\n <div class=\"mrx-select__input__values\">\r\n @for (item of getSelectedLabels; track item; let first = $first; let last = $last) {\r\n @if (labelTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"labelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last, clear: clearItem}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultLabelTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n }\r\n </div>\r\n } @else {\r\n <div class=\"mrx-select__input__value\">\r\n @for (item of getSelectedLabels; track item) {\r\n {{ bindLabel ? item[bindLabel] : item['label'] || item }}\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 class=\"mrx-select__input__controls--item\" (click)=\"onClear($event)\">\r\n <span\r\n class=\"mrx-icon icon-close\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n }\r\n <div class=\"mrx-select__input__controls--item\" (click)=\"onOpen($event)\">\r\n <span\r\n class=\"mrx-icon\"\r\n [class.icon-chevron-up]=\"isOpen\"\r\n [class.icon-chevron-down]=\"!isOpen\"\r\n [class.icon-font-24]=\"size === 'large'\"\r\n [class.icon-font-16]=\"size === 'medium'\"\r\n ></span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <mrx-popup #dropdown [closeAfterClick]=\"closable\" (toggle)=\"togglePopup($event)\">\r\n @for (item of filteredItems; track item.__id; let first = $first; let last = $last) {\r\n <mrx-popup-item [custom]=\"true\" [id]=\"item.__id\" (clicked)=\"onSelect(item)\">\r\n @if (optionTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"optionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"defaultOptionTemplate\"\r\n [ngTemplateOutletContext]=\"{item, first, last}\"\r\n ></ng-container>\r\n }\r\n </mrx-popup-item>\r\n } @empty {\r\n <mrx-popup-item [custom]=\"true\">\r\n <div class=\"mrx-select__dropdown__empty\">{{ 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-text\r\n [size]=\"'medium'\"\r\n [placeholder]=\"searchPlaceholder\"\r\n [(ngModel)]=\"searchValue\"\r\n ></mrx-input-text>\r\n </div>\r\n }\r\n\r\n @if (popupHeaderTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"popupHeaderTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n\r\n <ng-template #footerTemplate>\r\n @if (popupFooterTemplate) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"popupFooterTemplate\"\r\n ></ng-container>\r\n }\r\n </ng-template>\r\n </mrx-popup>\r\n </div>\r\n\r\n <mrx-error-message\r\n *ngIf=\"invalid && isInvalidMessage\"\r\n [invalidMessage]=\"invalidMessage\"\r\n ></mrx-error-message>\r\n\r\n <mrx-save-state [id]=\"uuid\" [fields]=\"fields\" [type]=\"'input'\"></mrx-save-state>\r\n</div>\r\n\r\n<ng-template #defaultLabelTemplate let-item=\"item\">\r\n @if (asLabel(item); as label) {\r\n <div class=\"mrx-select__input__badge\">\r\n <p>{{ bindLabel ? label[bindLabel] : label['label'] || label }}</p>\r\n <span class=\"mrx-icon icon-close icon-font-16\" (click)=\"onUnselect(label)\"></span>\r\n </div>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #defaultOptionTemplate let-item=\"item\">\r\n @if (asOption(item); as option) {\r\n <div class=\"mrx-select__dropdown__item\">\r\n <div class=\"mrx-select__dropdown__item--content\">\r\n @if (bindIcon && option[bindIcon]) {\r\n <span class=\"mrx-icon icon-font-24\" [class]=\"option[bindIcon]\"></span>\r\n }\r\n\r\n <p>{{ bindLabel ? option[bindLabel] : option['label'] || option }}</p>\r\n </div>\r\n\r\n @if (option.__selected) {\r\n <span class=\"mrx-icon icon-check icon-font-24\"></span>\r\n }\r\n </div>\r\n }\r\n</ng-template>\r\n", styles: [".mrx-select__input{border:var(--border-width-default) solid var(--neutral-bg-stroke-default);border-radius:var(--border-radius-1);width:100%;outline:none;transition:outline-width .2s,border .2s;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.mrx-select__input:focus,.mrx-select__input:active{outline:var(--neutral-bg-island-default) solid var(--border-width-focused)}.mrx-select__input:hover{border:var(--border-width-default) solid var(--neutral-bg-stroke-hover)}.mrx-select__input__box{flex-grow:1}.mrx-select__input__controls{display:flex;align-items:center;gap:8px;padding-top:4px;padding-bottom:4px}.mrx-select__input__controls--item{display:flex;align-items:center;justify-content:center;border-radius:4px;background-color:transparent;transition:background-color .2s}.mrx-select__input__controls--item:hover{background-color:var(--brand-bg-tertiary-hover, #EDF5FF)}.mrx-select.mrx-select-lg .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-lg .mrx-select__input__placeholder,.mrx-select.mrx-select-lg .mrx-select__input__value{padding:6px 8px}.mrx-select.mrx-select-lg .mrx-select__input__values{min-height:32px}.mrx-select.mrx-select-lg .mrx-select__input__badge{padding:6px 8px 6px 12px}.mrx-select.mrx-select-lg .mrx-select__input__badge p{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-select-md .mrx-select__input{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height);padding:calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-4) calc(var(--spacing-2) - var(--border-width-default)) var(--spacing-2)}.mrx-select.mrx-select-md .mrx-select__input__placeholder,.mrx-select.mrx-select-md .mrx-select__input__value{padding:2px 8px}.mrx-select.mrx-select-md .mrx-select__input__values{min-height:24px}.mrx-select.mrx-select-md .mrx-select__input__badge{padding:4px 4px 4px 8px}.mrx-select.mrx-select-md .mrx-select__input__badge p{font-family:var(--body-sm-font-family);font-size:var(--body-sm-font-size);font-weight:var(--body-sm-font-weight);line-height:var(--body-sm-line-height)}.mrx-select__input__value{font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select__input__values{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:8px}.mrx-select__input__badge{display:flex;align-items:center;gap:4px;border-radius:4px;background-color:var(--brand-bg-secondary-default, #EDF5FF)}.mrx-select__input__badge .icon-close{transform:scale(1);transition:transform .2s}.mrx-select__input__badge .icon-close:hover{transform:scale(1.1)}.mrx-select__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 16px}.mrx-select__dropdown__empty{padding:8px 16px;font-family:var(--body-md-font-family);font-size:var(--body-md-font-size);font-weight:var(--body-md-font-weight);line-height:var(--body-md-line-height)}.mrx-select.mrx-input-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-error .mrx-select__input{border-color:var(--system-bg-controls-negative-default);background-color:var(--system-bg-negative-secondary)}.mrx-select.mrx-input-checked-error .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-negative-default)}.mrx-select.mrx-input-checked-success .mrx-select__input{background-color:var(--system-bg-positive-secondary);border-color:var(--system-bg-controls-positive-default)}.mrx-select.mrx-input-checked-success .mrx-select__input:hover{border:var(--border-width-default) solid var(--system-bg-controls-positive-default)}.mrx-select.-disabled .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-tertiary, #71767E);color:var(--neutral-text-tertiary, #71767E);pointer-events:none}.mrx-select.-readonly .mrx-select__input{background-color:var(--neutral-bg-disabled, #EEF0F4);-webkit-text-fill-color:var(--neutral-text-primary, #262626);color:var(--neutral-text-primary, #262626);pointer-events:none}\n"] }]
|
|
2880
2886
|
}], propDecorators: { fields: [{
|
|
2881
2887
|
type: Input
|
|
2882
2888
|
}], items: [{
|