@sarasanalytics-com/design-system 0.0.161 → 0.0.162
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/dialog/dialog.component.mjs +3 -3
- package/esm2022/lib/message-banner-v2/message-banner-v2.component.mjs +3 -3
- package/fesm2022/sarasanalytics-com-design-system.mjs +4 -4
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/lib/dialog/dialog.component.d.ts +3 -0
- package/package.json +1 -1
|
@@ -3103,11 +3103,11 @@ class MessageBannerV2Component {
|
|
|
3103
3103
|
return allFieldsFilled && formValid;
|
|
3104
3104
|
}
|
|
3105
3105
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3106
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", contactUrl: "contactUrl", spacingBetweenImageAndDescription: "spacingBetweenImageAndDescription", contentGap: "contentGap", titleClass: "titleClass", descriptionClass: "descriptionClass", banner: "banner", formConfig: "formConfig", prebuiltFormFields: "prebuiltFormFields", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { onFormEvent: "onFormEvent", buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\n <div class=\"image-container\"\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n </div>\n <div class=\"details\">\n <div class=\"title-description\">\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\n <div [innerHTML]=\"banner?.text\"></div>\n </sa-message-banner>\n </div>\n </div>\n \n <!-- Form inputs section -->\n <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\n <div class=\"form-fields-container\">\n <!-- Prebuilt form fields (direct component rendering) -->\n <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\n <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\n </ng-container>\n \n <!-- Use Formly for proper form rendering -->\n <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\n <formly-form \n [form]=\"form\" \n [fields]=\"allFormlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n </form>\n </div>\n\n <!-- Custom form button(s) -->\n <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\n <!-- Support both single button and array of buttons -->\n <ng-container *ngIf=\"isButtonArray(); else singleButton\">\n <sa-button \n *ngFor=\"let button of activeCustomFormButton\"\n class=\"action-button\"\n [id]=\"button.id\"\n [text]=\"button.text\"\n [type]=\"button.type\"\n [size]=\"button.size\"\n [state]=\"button.state\"\n [ImagePath]=\"button.ImagePath\"\n [iconPosition]=\"button.iconPosition\"\n (click)=\"onButtonClick(button)\">\n </sa-button>\n </ng-container>\n \n <ng-template #singleButton>\n <sa-button class=\"action-button\"\n [id]=\"activeCustomFormButton.id\"\n [text]=\"activeCustomFormButton.text\"\n [type]=\"activeCustomFormButton.type\"\n [size]=\"activeCustomFormButton.size\"\n [state]=\"activeCustomFormButton.state\"\n [ImagePath]=\"activeCustomFormButton.ImagePath\"\n [iconPosition]=\"activeCustomFormButton.iconPosition\"\n (click)=\"onButtonClick(activeCustomFormButton)\">\n </sa-button>\n </ng-template>\n </div>\n \n <!-- Divider section -->\n <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\n <div class=\"divider\"></div>\n <div class=\"divider-header\">\n <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\n <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\n {{ activeDividerConfig.subtitle || 'No items added yet' }}\n </p>\n </div>\n \n <!-- Chips section -->\n <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\n <sa-chip \n *ngFor=\"let chip of activeChips\"\n [text]=\"chip.label || chip.text || chip\"\n [type]=\"'regular'\"\n [state]=\"'default'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\n </sa-chip>\n </div>\n </div>\n </ng-container>\n \n @if(buttons){\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <sa-button \n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\n [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, auto)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
|
|
3106
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", contactUrl: "contactUrl", spacingBetweenImageAndDescription: "spacingBetweenImageAndDescription", contentGap: "contentGap", titleClass: "titleClass", descriptionClass: "descriptionClass", banner: "banner", formConfig: "formConfig", prebuiltFormFields: "prebuiltFormFields", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { onFormEvent: "onFormEvent", buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\n @if(content?.messageIcon){\n <div class=\"image-container\"\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n </div>\n }\n <div class=\"details\">\n <div class=\"title-description\">\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\n <div [innerHTML]=\"banner?.text\"></div>\n </sa-message-banner>\n </div>\n </div>\n \n <!-- Form inputs section -->\n <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\n <div class=\"form-fields-container\">\n <!-- Prebuilt form fields (direct component rendering) -->\n <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\n <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\n </ng-container>\n \n <!-- Use Formly for proper form rendering -->\n <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\n <formly-form \n [form]=\"form\" \n [fields]=\"allFormlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n </form>\n </div>\n\n <!-- Custom form button(s) -->\n <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\n <!-- Support both single button and array of buttons -->\n <ng-container *ngIf=\"isButtonArray(); else singleButton\">\n <sa-button \n *ngFor=\"let button of activeCustomFormButton\"\n class=\"action-button\"\n [id]=\"button.id\"\n [text]=\"button.text\"\n [type]=\"button.type\"\n [size]=\"button.size\"\n [state]=\"button.state\"\n [ImagePath]=\"button.ImagePath\"\n [iconPosition]=\"button.iconPosition\"\n (click)=\"onButtonClick(button)\">\n </sa-button>\n </ng-container>\n \n <ng-template #singleButton>\n <sa-button class=\"action-button\"\n [id]=\"activeCustomFormButton.id\"\n [text]=\"activeCustomFormButton.text\"\n [type]=\"activeCustomFormButton.type\"\n [size]=\"activeCustomFormButton.size\"\n [state]=\"activeCustomFormButton.state\"\n [ImagePath]=\"activeCustomFormButton.ImagePath\"\n [iconPosition]=\"activeCustomFormButton.iconPosition\"\n (click)=\"onButtonClick(activeCustomFormButton)\">\n </sa-button>\n </ng-template>\n </div>\n \n <!-- Divider section -->\n <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\n <div class=\"divider\"></div>\n <div class=\"divider-header\">\n <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\n <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\n {{ activeDividerConfig.subtitle || 'No items added yet' }}\n </p>\n </div>\n \n <!-- Chips section -->\n <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\n <sa-chip \n *ngFor=\"let chip of activeChips\"\n [text]=\"chip.label || chip.text || chip\"\n [type]=\"'regular'\"\n [state]=\"'default'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\n </sa-chip>\n </div>\n </div>\n </ng-container>\n \n @if(buttons){\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <sa-button \n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\n [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, auto)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { 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: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$2.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
|
|
3107
3107
|
}
|
|
3108
3108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, decorators: [{
|
|
3109
3109
|
type: Component,
|
|
3110
|
-
args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule, MessageBannerComponent, FormInputComponent, FormSelectComponent, FormsModule, ReactiveFormsModule, FormlyModule, ChipsComponent], providers: [IconService], template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\n <div class=\"image-container\"\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n </div>\n <div class=\"details\">\n <div class=\"title-description\">\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\n <div [innerHTML]=\"banner?.text\"></div>\n </sa-message-banner>\n </div>\n </div>\n \n <!-- Form inputs section -->\n <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\n <div class=\"form-fields-container\">\n <!-- Prebuilt form fields (direct component rendering) -->\n <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\n <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\n </ng-container>\n \n <!-- Use Formly for proper form rendering -->\n <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\n <formly-form \n [form]=\"form\" \n [fields]=\"allFormlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n </form>\n </div>\n\n <!-- Custom form button(s) -->\n <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\n <!-- Support both single button and array of buttons -->\n <ng-container *ngIf=\"isButtonArray(); else singleButton\">\n <sa-button \n *ngFor=\"let button of activeCustomFormButton\"\n class=\"action-button\"\n [id]=\"button.id\"\n [text]=\"button.text\"\n [type]=\"button.type\"\n [size]=\"button.size\"\n [state]=\"button.state\"\n [ImagePath]=\"button.ImagePath\"\n [iconPosition]=\"button.iconPosition\"\n (click)=\"onButtonClick(button)\">\n </sa-button>\n </ng-container>\n \n <ng-template #singleButton>\n <sa-button class=\"action-button\"\n [id]=\"activeCustomFormButton.id\"\n [text]=\"activeCustomFormButton.text\"\n [type]=\"activeCustomFormButton.type\"\n [size]=\"activeCustomFormButton.size\"\n [state]=\"activeCustomFormButton.state\"\n [ImagePath]=\"activeCustomFormButton.ImagePath\"\n [iconPosition]=\"activeCustomFormButton.iconPosition\"\n (click)=\"onButtonClick(activeCustomFormButton)\">\n </sa-button>\n </ng-template>\n </div>\n \n <!-- Divider section -->\n <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\n <div class=\"divider\"></div>\n <div class=\"divider-header\">\n <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\n <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\n {{ activeDividerConfig.subtitle || 'No items added yet' }}\n </p>\n </div>\n \n <!-- Chips section -->\n <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\n <sa-chip \n *ngFor=\"let chip of activeChips\"\n [text]=\"chip.label || chip.text || chip\"\n [type]=\"'regular'\"\n [state]=\"'default'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\n </sa-chip>\n </div>\n </div>\n </ng-container>\n \n @if(buttons){\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <sa-button \n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\n [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, auto)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"] }]
|
|
3110
|
+
args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule, MessageBannerComponent, FormInputComponent, FormSelectComponent, FormsModule, ReactiveFormsModule, FormlyModule, ChipsComponent], providers: [IconService], template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\n @if(content?.messageIcon){\n <div class=\"image-container\"\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n </div>\n }\n <div class=\"details\">\n <div class=\"title-description\">\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\n <div [innerHTML]=\"banner?.text\"></div>\n </sa-message-banner>\n </div>\n </div>\n \n <!-- Form inputs section -->\n <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\n <div class=\"form-fields-container\">\n <!-- Prebuilt form fields (direct component rendering) -->\n <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\n <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\n </ng-container>\n \n <!-- Use Formly for proper form rendering -->\n <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\n <formly-form \n [form]=\"form\" \n [fields]=\"allFormlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n </form>\n </div>\n\n <!-- Custom form button(s) -->\n <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\n <!-- Support both single button and array of buttons -->\n <ng-container *ngIf=\"isButtonArray(); else singleButton\">\n <sa-button \n *ngFor=\"let button of activeCustomFormButton\"\n class=\"action-button\"\n [id]=\"button.id\"\n [text]=\"button.text\"\n [type]=\"button.type\"\n [size]=\"button.size\"\n [state]=\"button.state\"\n [ImagePath]=\"button.ImagePath\"\n [iconPosition]=\"button.iconPosition\"\n (click)=\"onButtonClick(button)\">\n </sa-button>\n </ng-container>\n \n <ng-template #singleButton>\n <sa-button class=\"action-button\"\n [id]=\"activeCustomFormButton.id\"\n [text]=\"activeCustomFormButton.text\"\n [type]=\"activeCustomFormButton.type\"\n [size]=\"activeCustomFormButton.size\"\n [state]=\"activeCustomFormButton.state\"\n [ImagePath]=\"activeCustomFormButton.ImagePath\"\n [iconPosition]=\"activeCustomFormButton.iconPosition\"\n (click)=\"onButtonClick(activeCustomFormButton)\">\n </sa-button>\n </ng-template>\n </div>\n \n <!-- Divider section -->\n <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\n <div class=\"divider\"></div>\n <div class=\"divider-header\">\n <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\n <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\n {{ activeDividerConfig.subtitle || 'No items added yet' }}\n </p>\n </div>\n \n <!-- Chips section -->\n <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\n <sa-chip \n *ngFor=\"let chip of activeChips\"\n [text]=\"chip.label || chip.text || chip\"\n [type]=\"'regular'\"\n [state]=\"'default'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\n </sa-chip>\n </div>\n </div>\n </ng-container>\n \n @if(buttons){\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <sa-button \n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\n [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, auto)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"] }]
|
|
3111
3111
|
}], propDecorators: { messageType: [{
|
|
3112
3112
|
type: Input
|
|
3113
3113
|
}], contactUrl: [{
|
|
@@ -3220,11 +3220,11 @@ class DialogComponent {
|
|
|
3220
3220
|
this.dialogButtonClick.emit({ type: 'form-reset' });
|
|
3221
3221
|
}
|
|
3222
3222
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponent, deps: [{ token: i1$7.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3223
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: DialogComponent, isStandalone: true, selector: "sa-dialog", inputs: { dialogData: "dialogData" }, outputs: { dialogButtonClick: "dialogButtonClick" }, ngImport: i0, template: "<div class=\"dialog-container\">\n <!-- top banner region -->\n <div class=\"top-container\">\n @if (!!dialogData?.topMessageBanners) {\n <div class=\"top-message-container\">\n @for (\n messageBanner of dialogData?.topMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n [style]=\"messageBanner?.style || 'width:39.438rem'\"\n >\n <div class=\"{{ messageBanner?.className }} message-content-style\">\n {{ messageBanner?.content }}\n </div>\n </sa-message-banner>\n }\n </div>\n }\n @if (!!dialogData?.closeButton || dialogData?.showCloseButton) {\n <div class=\"cross-btn\" (click)=\"onCloseButtonClick($event)\">\n <sa-icon\n [icon]=\"dialogData?.closeButton || 'closeOutlined'\"\n class=\"d-flex\"\n size=\"20\"\n ></sa-icon>\n </div>\n }\n </div>\n <!-- middle region -->\n @if (!!dialogData?.middleRegion) {\n <ng-container *ngIf=\"dialogData?.middleRegion as middleRegion\">\n <div class=\"image-description-container {{ middleRegion?.className }}\">\n <sa-message-banner-v2\n [messageType]=\"middleRegion?.messageType || 'default'\"\n [messageIcon]=\"middleRegion?.messageIcon\"\n [messageIconSize]=\"middleRegion?.messageIconSize\"\n [title]=\"middleRegion?.title\"\n [description]=\"middleRegion?.description\"\n [buttons]=\"middleRegion?.buttons\"\n [formConfig]=\"middleRegion?.content?.formConfig\"\n (onFormEvent)=\"onUnifiedFormEvent($event)\"\n (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\n >\n </sa-message-banner-v2>\n </div>\n </ng-container>\n }\n <!-- lower message banner region -->\n @if (!!dialogData?.lowerMessageBanners) {\n <div class=\"lower-message-container\">\n @for (\n messageBanner of dialogData?.lowerMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [buttonIcon]=\"messageBanner?.buttonIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n [style]=\"messageBanner?.style || 'width:-webkit-fill-available'\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n >\n <div\n class=\"{{ messageBanner?.className }} message-content-style\"\n ></div>\n {{ messageBanner?.content }}\n </sa-message-banner>\n }\n </div>\n }\n <!-- button region -->\n @if (!!dialogData?.buttons) {\n <div class=\"button-group-container\">\n @for (button of dialogData?.buttons; track button.text) {\n <sa-button\n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [state]=\"button.state\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button.text\"\n >\n </sa-button>\n }\n </div>\n }\n @if (!!dialogData?.buttonsWithType) {\n <div class=\"buttonWithType-group-container\">\n @for (button of dialogData?.buttonsWithType; track button.text) {\n @if (button?.type === \"checkbox\") {\n <div class=\"checkbox-container {{ button.className }}\">\n <mat-checkbox [id]=\"button.id\" (change)=\"onButtonClick(button)\" class=\"checkbox-style\">{{\n button.text\n }}</mat-checkbox>\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;gap:var(--medium-28px);align-items:center;position:relative;overflow-y:auto;overflow-x:hidden}.top-message-container,.lower-message-container{display:flex;align-items:center;flex-direction:column;gap:var(--medium-28px)}.lower-message-container{width:-webkit-fill-available}::ng-deep .lower-message-container .content{justify-content:center;align-items:center;gap:var(--small-4px)}::ng-deep .image-description-container .image-container{margin-bottom:0}::ng-deep .image-description-container .content-container{gap:var(--medium-28px)}::ng-deep .image-description-container .title-class{font-size:var(--medium-22px);font-weight:500;line-height:var(--medium-28px)}::ng-deep .image-description-container .description{color:var(--text-mediumemphasis, #6D6979);font-size:var(--small-16px);line-height:var(--medium-24px);letter-spacing:.5px}.top-message-container .message-content-style{display:flex;justify-content:center;flex:1;color:var(--text-primary, #825CEE)}.lower-message-container .message-content-style{display:flex;align-items:center}::ng-deep .image-description-container .title-description{display:flex;flex-direction:column;gap:var(--small-8px)}.dialog-container .button-group-container{display:flex;gap:var(--small-12px);justify-content:center}::ng-deep .checkboxButton .mdc-checkbox__background{width:var(--small-16px);height:var(--small-16px);border:1.5px solid currentColor}::ng-deep .checkboxButton .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#757575}::ng-deep .checkboxButton .mdc-checkbox{padding:calc((var(--mdc-checkbox-state-layer-size) - 21px) / 2)}::ng-deep .checkboxButton .mdc-form-field{display:flex;align-items:center}::ng-deep .checkboxButton .mdc-label{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.dialog-container .cross-btn{position:absolute;top:0;right:0;cursor:pointer}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.image-description-container{width:100%;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "component", type: MessageBannerV2Component, selector: "sa-message-banner-v2", inputs: ["messageType", "contactUrl", "spacingBetweenImageAndDescription", "contentGap", "titleClass", "descriptionClass", "banner", "formConfig", "prebuiltFormFields", "messageIcon", "messageIconSize", "title", "description", "buttons"], outputs: ["onFormEvent", "buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
|
|
3223
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: DialogComponent, isStandalone: true, selector: "sa-dialog", inputs: { dialogData: "dialogData" }, outputs: { dialogButtonClick: "dialogButtonClick" }, ngImport: i0, template: "<div class=\"dialog-container {{ dialogData?.className }}\">\n <!-- top banner region -->\n <div class=\"top-container\">\n @if (!!dialogData?.topMessageBanners) {\n <div class=\"top-message-container\">\n @for (\n messageBanner of dialogData?.topMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n [style]=\"messageBanner?.style || 'width:39.438rem'\"\n >\n <div class=\"{{ messageBanner?.className }} message-content-style\">\n {{ messageBanner?.content }}\n </div>\n </sa-message-banner>\n }\n </div>\n }\n @if(!!dialogData?.topRegionIcon){\n <div class=\"top-icon-container\">\n <sa-icon\n [icon]=\"dialogData?.topRegionIcon\"\n class=\"d-flex\"\n size=\"{{ dialogData?.topRegionIconSize }}\"\n ></sa-icon>\n </div>\n }\n @if (!!dialogData?.closeButton || dialogData?.showCloseButton) {\n <div class=\"cross-btn\" (click)=\"onCloseButtonClick($event)\">\n <sa-icon\n [icon]=\"dialogData?.closeButton || 'closeOutlined'\"\n class=\"d-flex\"\n size=\"20\"\n ></sa-icon>\n </div>\n }\n </div>\n <!-- middle region -->\n @if (!!dialogData?.middleRegion) {\n <ng-container *ngIf=\"dialogData?.middleRegion as middleRegion\">\n <div class=\"image-description-container {{ middleRegion?.className }}\">\n <sa-message-banner-v2\n [messageType]=\"middleRegion?.messageType || 'default'\"\n [messageIcon]=\"middleRegion?.messageIcon\"\n [messageIconSize]=\"middleRegion?.messageIconSize\"\n [title]=\"middleRegion?.title\"\n [description]=\"middleRegion?.description\"\n [buttons]=\"middleRegion?.buttons\"\n [formConfig]=\"middleRegion?.content?.formConfig\"\n (onFormEvent)=\"onUnifiedFormEvent($event)\"\n (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\n >\n </sa-message-banner-v2>\n </div>\n </ng-container>\n }\n <!-- lower message banner region -->\n @if (!!dialogData?.lowerMessageBanners) {\n <div class=\"lower-message-container\">\n @for (\n messageBanner of dialogData?.lowerMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [buttonIcon]=\"messageBanner?.buttonIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n [style]=\"messageBanner?.style || 'width:-webkit-fill-available'\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n >\n <div\n class=\"{{ messageBanner?.className }} message-content-style\"\n ></div>\n {{ messageBanner?.content }}\n </sa-message-banner>\n }\n </div>\n }\n <!-- button region -->\n @if (!!dialogData?.buttons) {\n <div class=\"button-group-container\">\n @for (button of dialogData?.buttons; track button.text) {\n <sa-button\n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [state]=\"button.state\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button.text\"\n >\n </sa-button>\n }\n </div>\n }\n @if (!!dialogData?.buttonsWithType) {\n <div class=\"buttonWithType-group-container\">\n @for (button of dialogData?.buttonsWithType; track button.text) {\n @if (button?.type === \"checkbox\") {\n <div class=\"checkbox-container {{ button.className }}\">\n <mat-checkbox [id]=\"button.id\" (change)=\"onButtonClick(button)\" class=\"checkbox-style\">{{\n button.text\n }}</mat-checkbox>\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;gap:var(--medium-28px);align-items:center;position:relative;overflow-y:auto;overflow-x:hidden}.dialog-container.common-action-dialog{align-items:normal}::ng-deep .dialog-container.common-action-dialog .error-page{justify-content:flex-start}::ng-deep .dialog-container.common-action-dialog .title-description{align-items:flex-start}.dialog-container.common-action-dialog .button-group-container{justify-content:flex-end}.top-message-container,.lower-message-container{display:flex;align-items:center;flex-direction:column;gap:var(--medium-28px)}.lower-message-container{width:-webkit-fill-available}::ng-deep .lower-message-container .content{justify-content:center;align-items:center;gap:var(--small-4px)}::ng-deep .image-description-container .image-container{margin-bottom:0}::ng-deep .image-description-container .content-container{gap:var(--medium-28px)}::ng-deep .image-description-container .title-class{font-size:var(--medium-22px);font-weight:500;line-height:var(--medium-28px)}::ng-deep .image-description-container .description{color:var(--text-mediumemphasis, #6D6979);font-size:var(--small-16px);line-height:var(--medium-24px);letter-spacing:.5px}.top-message-container .message-content-style{display:flex;justify-content:center;flex:1;color:var(--text-primary, #825CEE)}.lower-message-container .message-content-style{display:flex;align-items:center}::ng-deep .image-description-container .title-description{display:flex;flex-direction:column;gap:var(--small-8px)}.button-group-container{display:flex;gap:var(--small-12px);justify-content:center}::ng-deep .checkboxButton .mdc-checkbox__background{width:var(--small-16px);height:var(--small-16px);border:1.5px solid currentColor}::ng-deep .checkboxButton .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#757575}::ng-deep .checkboxButton .mdc-checkbox{padding:calc((var(--mdc-checkbox-state-layer-size) - 21px) / 2)}::ng-deep .checkboxButton .mdc-form-field{display:flex;align-items:center}::ng-deep .checkboxButton .mdc-label{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.dialog-container .cross-btn{position:absolute;top:0;right:0;cursor:pointer}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.image-description-container{width:100%;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "component", type: MessageBannerV2Component, selector: "sa-message-banner-v2", inputs: ["messageType", "contactUrl", "spacingBetweenImageAndDescription", "contentGap", "titleClass", "descriptionClass", "banner", "formConfig", "prebuiltFormFields", "messageIcon", "messageIconSize", "title", "description", "buttons"], outputs: ["onFormEvent", "buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
|
|
3224
3224
|
}
|
|
3225
3225
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponent, decorators: [{
|
|
3226
3226
|
type: Component,
|
|
3227
|
-
args: [{ selector: 'sa-dialog', standalone: true, imports: [MessageBannerComponent, MessageBannerV2Component, CommonModule, ButtonComponent, MatCheckboxModule, IconComponent, MatDialogModule, FormInputComponent], template: "<div class=\"dialog-container\">\n <!-- top banner region -->\n <div class=\"top-container\">\n @if (!!dialogData?.topMessageBanners) {\n <div class=\"top-message-container\">\n @for (\n messageBanner of dialogData?.topMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n [style]=\"messageBanner?.style || 'width:39.438rem'\"\n >\n <div class=\"{{ messageBanner?.className }} message-content-style\">\n {{ messageBanner?.content }}\n </div>\n </sa-message-banner>\n }\n </div>\n }\n @if (!!dialogData?.closeButton || dialogData?.showCloseButton) {\n <div class=\"cross-btn\" (click)=\"onCloseButtonClick($event)\">\n <sa-icon\n [icon]=\"dialogData?.closeButton || 'closeOutlined'\"\n class=\"d-flex\"\n size=\"20\"\n ></sa-icon>\n </div>\n }\n </div>\n <!-- middle region -->\n @if (!!dialogData?.middleRegion) {\n <ng-container *ngIf=\"dialogData?.middleRegion as middleRegion\">\n <div class=\"image-description-container {{ middleRegion?.className }}\">\n <sa-message-banner-v2\n [messageType]=\"middleRegion?.messageType || 'default'\"\n [messageIcon]=\"middleRegion?.messageIcon\"\n [messageIconSize]=\"middleRegion?.messageIconSize\"\n [title]=\"middleRegion?.title\"\n [description]=\"middleRegion?.description\"\n [buttons]=\"middleRegion?.buttons\"\n [formConfig]=\"middleRegion?.content?.formConfig\"\n (onFormEvent)=\"onUnifiedFormEvent($event)\"\n (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\n >\n </sa-message-banner-v2>\n </div>\n </ng-container>\n }\n <!-- lower message banner region -->\n @if (!!dialogData?.lowerMessageBanners) {\n <div class=\"lower-message-container\">\n @for (\n messageBanner of dialogData?.lowerMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [buttonIcon]=\"messageBanner?.buttonIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n [style]=\"messageBanner?.style || 'width:-webkit-fill-available'\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n >\n <div\n class=\"{{ messageBanner?.className }} message-content-style\"\n ></div>\n {{ messageBanner?.content }}\n </sa-message-banner>\n }\n </div>\n }\n <!-- button region -->\n @if (!!dialogData?.buttons) {\n <div class=\"button-group-container\">\n @for (button of dialogData?.buttons; track button.text) {\n <sa-button\n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [state]=\"button.state\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button.text\"\n >\n </sa-button>\n }\n </div>\n }\n @if (!!dialogData?.buttonsWithType) {\n <div class=\"buttonWithType-group-container\">\n @for (button of dialogData?.buttonsWithType; track button.text) {\n @if (button?.type === \"checkbox\") {\n <div class=\"checkbox-container {{ button.className }}\">\n <mat-checkbox [id]=\"button.id\" (change)=\"onButtonClick(button)\" class=\"checkbox-style\">{{\n button.text\n }}</mat-checkbox>\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;gap:var(--medium-28px);align-items:center;position:relative;overflow-y:auto;overflow-x:hidden}.top-message-container,.lower-message-container{display:flex;align-items:center;flex-direction:column;gap:var(--medium-28px)}.lower-message-container{width:-webkit-fill-available}::ng-deep .lower-message-container .content{justify-content:center;align-items:center;gap:var(--small-4px)}::ng-deep .image-description-container .image-container{margin-bottom:0}::ng-deep .image-description-container .content-container{gap:var(--medium-28px)}::ng-deep .image-description-container .title-class{font-size:var(--medium-22px);font-weight:500;line-height:var(--medium-28px)}::ng-deep .image-description-container .description{color:var(--text-mediumemphasis, #6D6979);font-size:var(--small-16px);line-height:var(--medium-24px);letter-spacing:.5px}.top-message-container .message-content-style{display:flex;justify-content:center;flex:1;color:var(--text-primary, #825CEE)}.lower-message-container .message-content-style{display:flex;align-items:center}::ng-deep .image-description-container .title-description{display:flex;flex-direction:column;gap:var(--small-8px)}.
|
|
3227
|
+
args: [{ selector: 'sa-dialog', standalone: true, imports: [MessageBannerComponent, MessageBannerV2Component, CommonModule, ButtonComponent, MatCheckboxModule, IconComponent, MatDialogModule, FormInputComponent], template: "<div class=\"dialog-container {{ dialogData?.className }}\">\n <!-- top banner region -->\n <div class=\"top-container\">\n @if (!!dialogData?.topMessageBanners) {\n <div class=\"top-message-container\">\n @for (\n messageBanner of dialogData?.topMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n [style]=\"messageBanner?.style || 'width:39.438rem'\"\n >\n <div class=\"{{ messageBanner?.className }} message-content-style\">\n {{ messageBanner?.content }}\n </div>\n </sa-message-banner>\n }\n </div>\n }\n @if(!!dialogData?.topRegionIcon){\n <div class=\"top-icon-container\">\n <sa-icon\n [icon]=\"dialogData?.topRegionIcon\"\n class=\"d-flex\"\n size=\"{{ dialogData?.topRegionIconSize }}\"\n ></sa-icon>\n </div>\n }\n @if (!!dialogData?.closeButton || dialogData?.showCloseButton) {\n <div class=\"cross-btn\" (click)=\"onCloseButtonClick($event)\">\n <sa-icon\n [icon]=\"dialogData?.closeButton || 'closeOutlined'\"\n class=\"d-flex\"\n size=\"20\"\n ></sa-icon>\n </div>\n }\n </div>\n <!-- middle region -->\n @if (!!dialogData?.middleRegion) {\n <ng-container *ngIf=\"dialogData?.middleRegion as middleRegion\">\n <div class=\"image-description-container {{ middleRegion?.className }}\">\n <sa-message-banner-v2\n [messageType]=\"middleRegion?.messageType || 'default'\"\n [messageIcon]=\"middleRegion?.messageIcon\"\n [messageIconSize]=\"middleRegion?.messageIconSize\"\n [title]=\"middleRegion?.title\"\n [description]=\"middleRegion?.description\"\n [buttons]=\"middleRegion?.buttons\"\n [formConfig]=\"middleRegion?.content?.formConfig\"\n (onFormEvent)=\"onUnifiedFormEvent($event)\"\n (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\n >\n </sa-message-banner-v2>\n </div>\n </ng-container>\n }\n <!-- lower message banner region -->\n @if (!!dialogData?.lowerMessageBanners) {\n <div class=\"lower-message-container\">\n @for (\n messageBanner of dialogData?.lowerMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [buttonIcon]=\"messageBanner?.buttonIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n [style]=\"messageBanner?.style || 'width:-webkit-fill-available'\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n >\n <div\n class=\"{{ messageBanner?.className }} message-content-style\"\n ></div>\n {{ messageBanner?.content }}\n </sa-message-banner>\n }\n </div>\n }\n <!-- button region -->\n @if (!!dialogData?.buttons) {\n <div class=\"button-group-container\">\n @for (button of dialogData?.buttons; track button.text) {\n <sa-button\n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [state]=\"button.state\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button.text\"\n >\n </sa-button>\n }\n </div>\n }\n @if (!!dialogData?.buttonsWithType) {\n <div class=\"buttonWithType-group-container\">\n @for (button of dialogData?.buttonsWithType; track button.text) {\n @if (button?.type === \"checkbox\") {\n <div class=\"checkbox-container {{ button.className }}\">\n <mat-checkbox [id]=\"button.id\" (change)=\"onButtonClick(button)\" class=\"checkbox-style\">{{\n button.text\n }}</mat-checkbox>\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;gap:var(--medium-28px);align-items:center;position:relative;overflow-y:auto;overflow-x:hidden}.dialog-container.common-action-dialog{align-items:normal}::ng-deep .dialog-container.common-action-dialog .error-page{justify-content:flex-start}::ng-deep .dialog-container.common-action-dialog .title-description{align-items:flex-start}.dialog-container.common-action-dialog .button-group-container{justify-content:flex-end}.top-message-container,.lower-message-container{display:flex;align-items:center;flex-direction:column;gap:var(--medium-28px)}.lower-message-container{width:-webkit-fill-available}::ng-deep .lower-message-container .content{justify-content:center;align-items:center;gap:var(--small-4px)}::ng-deep .image-description-container .image-container{margin-bottom:0}::ng-deep .image-description-container .content-container{gap:var(--medium-28px)}::ng-deep .image-description-container .title-class{font-size:var(--medium-22px);font-weight:500;line-height:var(--medium-28px)}::ng-deep .image-description-container .description{color:var(--text-mediumemphasis, #6D6979);font-size:var(--small-16px);line-height:var(--medium-24px);letter-spacing:.5px}.top-message-container .message-content-style{display:flex;justify-content:center;flex:1;color:var(--text-primary, #825CEE)}.lower-message-container .message-content-style{display:flex;align-items:center}::ng-deep .image-description-container .title-description{display:flex;flex-direction:column;gap:var(--small-8px)}.button-group-container{display:flex;gap:var(--small-12px);justify-content:center}::ng-deep .checkboxButton .mdc-checkbox__background{width:var(--small-16px);height:var(--small-16px);border:1.5px solid currentColor}::ng-deep .checkboxButton .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#757575}::ng-deep .checkboxButton .mdc-checkbox{padding:calc((var(--mdc-checkbox-state-layer-size) - 21px) / 2)}::ng-deep .checkboxButton .mdc-form-field{display:flex;align-items:center}::ng-deep .checkboxButton .mdc-label{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.dialog-container .cross-btn{position:absolute;top:0;right:0;cursor:pointer}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.image-description-container{width:100%;display:flex;flex-direction:column}\n"] }]
|
|
3228
3228
|
}], ctorParameters: () => [{ type: i1$7.MatDialogRef, decorators: [{
|
|
3229
3229
|
type: Optional
|
|
3230
3230
|
}] }, { type: undefined, decorators: [{
|