@sarasanalytics-com/design-system 0.0.86 → 0.0.88
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/interfaces/message-banner.mjs +1 -1
- package/esm2022/lib/accordion/accordion.component.mjs +3 -3
- package/esm2022/lib/card/guide-card/guide-card.component.mjs +3 -3
- package/esm2022/lib/card/menu-card/menu-card.component.mjs +1 -1
- package/esm2022/lib/dialog/dialog.component.mjs +35 -0
- package/esm2022/lib/form-select/form-select.component.mjs +3 -3
- package/esm2022/lib/message-banner/message-banner.component.mjs +25 -4
- package/esm2022/lib/message-banner-v2/message-banner-v2.component.mjs +3 -3
- package/esm2022/public-api.mjs +2 -1
- package/fesm2022/sarasanalytics-com-design-system.mjs +152 -107
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/interfaces/message-banner.d.ts +1 -1
- package/lib/dialog/dialog.component.d.ts +20 -0
- package/lib/message-banner/message-banner.component.d.ts +6 -2
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ViewEncapsulation, EventEmitter, Input, Output, inject, Injectable, Inject, ChangeDetectionStrategy,
|
|
2
|
+
import { Component, ViewEncapsulation, EventEmitter, Input, Output, inject, Injectable, Inject, ChangeDetectionStrategy, signal, computed, ViewChild, HostBinding } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
4
|
import { CommonModule, NgIf, NgStyle, NgFor } from '@angular/common';
|
|
5
5
|
import { HttpClient, HttpClientModule } from '@angular/common/http';
|
|
@@ -14,7 +14,7 @@ import * as i5 from '@angular/material/expansion';
|
|
|
14
14
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
15
15
|
import * as i2$3 from '@ngx-formly/core';
|
|
16
16
|
import { FieldType, FormlyModule } from '@ngx-formly/core';
|
|
17
|
-
import { get, filter, includes, replace, toString, map, isUndefined, first, find, words, keys, has, startCase, set } from 'lodash';
|
|
17
|
+
import { get, filter, includes, replace, toString, map, isUndefined, first, kebabCase, find, words, keys, has, startCase, set } from 'lodash';
|
|
18
18
|
import { debounceTime, takeUntil } from 'rxjs/operators';
|
|
19
19
|
import { Subject, isObservable, of } from 'rxjs';
|
|
20
20
|
import * as i2$2 from '@angular/material/core';
|
|
@@ -553,11 +553,11 @@ class AccordionComponent extends FieldType {
|
|
|
553
553
|
this.buttonClick.complete();
|
|
554
554
|
}
|
|
555
555
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
556
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AccordionComponent, isStandalone: true, selector: "sa-accordion", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"accordion-container\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n (closed)=\"onAccordionClosed()\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(props?.['accordionExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n <div>\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n [text]=\"getChipText()\"></sa-chip>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"custom-divider\"></div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n <!-- Advanced Features accordion -->\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n class=\"advanced-features-section\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!props?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n props?.['advancedFeatureToggleTitle'] :\n props?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"accordion-advanced-container\">\n <div class=\"disclaimer-container\">\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n </span>\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n @if(props?.['advancedFeatureDisclaimerButtons']) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"\n class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n @if(subFeature?.featureChip){\n <div class=\"chip-container\">\n <sa-chip [type]=\"subFeature.featureChip?.['type']\"\n [state]=\"subFeature.featureChip?.['state']\"\n [filling]=\"subFeature.featureChip?.['filling']\"\n [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.875rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.6rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.advancedAccordion .chip-container{margin-left:auto}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}\n"], dependencies: [{ kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { 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"] }] }); }
|
|
556
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AccordionComponent, isStandalone: true, selector: "sa-accordion", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"accordion-container\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n (closed)=\"onAccordionClosed()\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(props?.['accordionExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n <div>\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n [text]=\"getChipText()\"></sa-chip>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"custom-divider\"></div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n <!-- Advanced Features accordion -->\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n class=\"advanced-features-section\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!props?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n props?.['advancedFeatureToggleTitle'] :\n props?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"accordion-advanced-container\">\n <div class=\"disclaimer-container\">\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n </span>\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n @if(props?.['advancedFeatureDisclaimerButtons']) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"\n class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n @if(subFeature?.featureChip){\n <div class=\"chip-container\">\n <sa-chip [type]=\"subFeature.featureChip?.['type']\"\n [state]=\"subFeature.featureChip?.['state']\"\n [filling]=\"subFeature.featureChip?.['filling']\"\n [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container,.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.advancedAccordion .chip-container{margin-left:auto}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::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)}\n"], dependencies: [{ kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { 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"] }] }); }
|
|
557
557
|
}
|
|
558
558
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
559
559
|
type: Component,
|
|
560
|
-
args: [{ selector: 'sa-accordion', standalone: true, imports: [CardCustomHeaderComponent, CardComponent, FormsModule, MatCheckboxModule, CommonModule, IconComponent, MatTooltipModule, MatExpansionModule, ChipsComponent, ButtonComponent], template: "<mat-accordion class=\"accordion-container\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n (closed)=\"onAccordionClosed()\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(props?.['accordionExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n <div>\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n [text]=\"getChipText()\"></sa-chip>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"custom-divider\"></div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n <!-- Advanced Features accordion -->\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n class=\"advanced-features-section\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!props?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n props?.['advancedFeatureToggleTitle'] :\n props?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"accordion-advanced-container\">\n <div class=\"disclaimer-container\">\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n </span>\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n @if(props?.['advancedFeatureDisclaimerButtons']) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"\n class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n @if(subFeature?.featureChip){\n <div class=\"chip-container\">\n <sa-chip [type]=\"subFeature.featureChip?.['type']\"\n [state]=\"subFeature.featureChip?.['state']\"\n [filling]=\"subFeature.featureChip?.['filling']\"\n [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.875rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(auto-fill,37.6rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.advancedAccordion .chip-container{margin-left:auto}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}\n"] }]
|
|
560
|
+
args: [{ selector: 'sa-accordion', standalone: true, imports: [CardCustomHeaderComponent, CardComponent, FormsModule, MatCheckboxModule, CommonModule, IconComponent, MatTooltipModule, MatExpansionModule, ChipsComponent, ButtonComponent], template: "<mat-accordion class=\"accordion-container\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n (closed)=\"onAccordionClosed()\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(props?.['accordionExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n <div>\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n [text]=\"getChipText()\"></sa-chip>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"custom-divider\"></div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n <!-- Advanced Features accordion -->\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n class=\"advanced-features-section\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!props?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n props?.['advancedFeatureToggleTitle'] :\n props?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"accordion-advanced-container\">\n <div class=\"disclaimer-container\">\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n </span>\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n @if(props?.['advancedFeatureDisclaimerButtons']) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{!subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}}{{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"\n class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick(subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n @if(subFeature?.featureChip){\n <div class=\"chip-container\">\n <sa-chip [type]=\"subFeature.featureChip?.['type']\"\n [state]=\"subFeature.featureChip?.['state']\"\n [filling]=\"subFeature.featureChip?.['filling']\"\n [text]=\"subFeature.featureChip?.['label']\"></sa-chip>\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container,.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.advancedAccordion .chip-container{margin-left:auto}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::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)}\n"] }]
|
|
561
561
|
}] });
|
|
562
562
|
|
|
563
563
|
let nextId$2 = 0; // used to give unique ids to inputs used in html
|
|
@@ -821,11 +821,11 @@ class GuideCardComponent {
|
|
|
821
821
|
this.onStepClicked.emit(step);
|
|
822
822
|
}
|
|
823
823
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
824
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: GuideCardComponent, isStandalone: true, selector: "sa-guide-card", inputs: { title: "title", steps: "steps", selectable: "selectable", selectedStep: "selectedStep" }, outputs: { onStepClicked: "onStepClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"guide-container\">\n <div class=\"guide-header\">\n <p class=\"guide-header-title\">{{ title }}</p>\n </div>\n <div class=\"guide-content\">\n @for (step of steps; track step; let last = $last) {\n <div class=\"step\" [ngClass]=\"step?.
|
|
824
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: GuideCardComponent, isStandalone: true, selector: "sa-guide-card", inputs: { title: "title", steps: "steps", selectable: "selectable", selectedStep: "selectedStep" }, outputs: { onStepClicked: "onStepClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"guide-container\">\n <div class=\"guide-header\">\n <p class=\"guide-header-title\">{{ title }}</p>\n </div>\n <div class=\"guide-content\">\n @for (step of steps; track step; let last = $last) {\n <div class=\"step\" [ngClass]=\"step?.isCompleted ? 'connectedSource-step': '' \">\n <div class=\"step-indicator\">\n @if(selectable) {\n @if(step?.isCompleted){\n <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\n size=\"20\"></sa-icon>\n }\n @else{\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n </div>\n }\n }@else{\n <div class=\"step-circle\"></div>\n }\n @if (!last) {\n <div class=\"step-line\"></div>\n }\n </div>\n <div class=\"step-content\">\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n {{ step.title }}\n @if(step?.chipData) {\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n }\n </div>\n @if (step?.description) {\n <p class=\"step-description\">{{ step.description }}</p>\n }\n </div>\n </div>\n }\n </div>\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap:1rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:1.75rem 1.875rem 0}.menu-card-container .connectedSource-step .step-line{margin-left:.45rem;height:calc(100% + 1.3rem)}.menu-card-container .connectedSource-step .source-circle{margin-left:-.1rem}.menu-card-container .connectedSource-step .chip{text-decoration:line-through}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
825
825
|
}
|
|
826
826
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, decorators: [{
|
|
827
827
|
type: Component,
|
|
828
|
-
args: [{ selector: 'sa-guide-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"guide-container\">\n <div class=\"guide-header\">\n <p class=\"guide-header-title\">{{ title }}</p>\n </div>\n <div class=\"guide-content\">\n @for (step of steps; track step; let last = $last) {\n <div class=\"step\" [ngClass]=\"step?.
|
|
828
|
+
args: [{ selector: 'sa-guide-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"guide-container\">\n <div class=\"guide-header\">\n <p class=\"guide-header-title\">{{ title }}</p>\n </div>\n <div class=\"guide-content\">\n @for (step of steps; track step; let last = $last) {\n <div class=\"step\" [ngClass]=\"step?.isCompleted ? 'connectedSource-step': '' \">\n <div class=\"step-indicator\">\n @if(selectable) {\n @if(step?.isCompleted){\n <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\n size=\"20\"></sa-icon>\n }\n @else{\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n </div>\n }\n }@else{\n <div class=\"step-circle\"></div>\n }\n @if (!last) {\n <div class=\"step-line\"></div>\n }\n </div>\n <div class=\"step-content\">\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n {{ step.title }}\n @if(step?.chipData) {\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n }\n </div>\n @if (step?.description) {\n <p class=\"step-description\">{{ step.description }}</p>\n }\n </div>\n </div>\n }\n </div>\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;overflow:hidden;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow:scroll;gap:1rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:scroll;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:1.75rem 1.875rem 0}.menu-card-container .connectedSource-step .step-line{margin-left:.45rem;height:calc(100% + 1.3rem)}.menu-card-container .connectedSource-step .source-circle{margin-left:-.1rem}.menu-card-container .connectedSource-step .chip{text-decoration:line-through}\n"] }]
|
|
829
829
|
}], propDecorators: { title: [{
|
|
830
830
|
type: Input
|
|
831
831
|
}], steps: [{
|
|
@@ -844,13 +844,29 @@ class MessageBannerComponent {
|
|
|
844
844
|
this.content = '';
|
|
845
845
|
this.bannerIconSize = '';
|
|
846
846
|
this.onAction = () => { };
|
|
847
|
+
this.actionClick = new EventEmitter();
|
|
848
|
+
}
|
|
849
|
+
handleButtonClick(event, button) {
|
|
850
|
+
if (isUndefined(button)) {
|
|
851
|
+
button = {
|
|
852
|
+
icon: this.buttonIcon,
|
|
853
|
+
iconPosition: this.buttonIconPosition,
|
|
854
|
+
size: this.buttonSize,
|
|
855
|
+
buttonIconSize: this.buttonIconSize,
|
|
856
|
+
type: this.buttonType,
|
|
857
|
+
text: this.actionText,
|
|
858
|
+
id: `message-banner-${kebabCase(this.actionText)}`,
|
|
859
|
+
state: 'default'
|
|
860
|
+
};
|
|
861
|
+
}
|
|
862
|
+
this.actionClick.emit(button);
|
|
847
863
|
}
|
|
848
864
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
849
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerComponent, isStandalone: true, selector: "sa-message-banner", inputs: { type: "type", actionText: "actionText", content: "content", bannerIcon: "bannerIcon", bannerIconSize: "bannerIconSize", buttonIcon: "buttonIcon", buttonType: "buttonType", buttonIconPosition: "buttonIconPosition", buttonSize: "buttonSize", buttonIconSize: "buttonIconSize", onAction: "onAction" }, providers: [IconService], ngImport: i0, template: "<div class=\"message-banner\" [class]=\"type\">\n @if (bannerIcon) {\n
|
|
865
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerComponent, isStandalone: true, selector: "sa-message-banner", inputs: { type: "type", actionText: "actionText", content: "content", bannerIcon: "bannerIcon", bannerIconSize: "bannerIconSize", buttonIcon: "buttonIcon", buttonType: "buttonType", buttonIconPosition: "buttonIconPosition", buttonSize: "buttonSize", buttonIconSize: "buttonIconSize", button: "button", onAction: "onAction" }, outputs: { actionClick: "actionClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"message-banner\" [class]=\"type\">\n <div class=\"content\">\n @if (bannerIcon) {\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\n }\n <ng-content></ng-content>\n </div>\n @if (actionText) {\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n (click)=\"onAction()\" (onClickEvent)=\"handleButtonClick($event)\">{{\n actionText\n }}</sa-button>\n }\n @else if(button) {\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)=\"handleButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button?.text\"\n >\n \n </sa-button>\n }\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px);align-items:center}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.disclaimer{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-neutral3);color:var(--text-mediumemphasis, #6D6979)}.standby{border:1px solid var(--grey-100, #EAECF0);background-color:var(--Structural-Primary-tint, #F9F7FC);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
850
866
|
}
|
|
851
867
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerComponent, decorators: [{
|
|
852
868
|
type: Component,
|
|
853
|
-
args: [{ selector: 'sa-message-banner', standalone: true, imports: [HttpClientModule, IconComponent, ButtonComponent], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "<div class=\"message-banner\" [class]=\"type\">\n @if (bannerIcon) {\n
|
|
869
|
+
args: [{ selector: 'sa-message-banner', standalone: true, imports: [HttpClientModule, IconComponent, ButtonComponent], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "<div class=\"message-banner\" [class]=\"type\">\n <div class=\"content\">\n @if (bannerIcon) {\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\n }\n <ng-content></ng-content>\n </div>\n @if (actionText) {\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n (click)=\"onAction()\" (onClickEvent)=\"handleButtonClick($event)\">{{\n actionText\n }}</sa-button>\n }\n @else if(button) {\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)=\"handleButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button?.text\"\n >\n \n </sa-button>\n }\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px);align-items:center}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.disclaimer{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-neutral3);color:var(--text-mediumemphasis, #6D6979)}.standby{border:1px solid var(--grey-100, #EAECF0);background-color:var(--Structural-Primary-tint, #F9F7FC);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"] }]
|
|
854
870
|
}], propDecorators: { type: [{
|
|
855
871
|
type: Input
|
|
856
872
|
}], actionText: [{
|
|
@@ -871,8 +887,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
871
887
|
type: Input
|
|
872
888
|
}], buttonIconSize: [{
|
|
873
889
|
type: Input
|
|
890
|
+
}], button: [{
|
|
891
|
+
type: Input
|
|
874
892
|
}], onAction: [{
|
|
875
893
|
type: Input
|
|
894
|
+
}], actionClick: [{
|
|
895
|
+
type: Output
|
|
876
896
|
}] } });
|
|
877
897
|
|
|
878
898
|
class MenuCardComponent extends FieldType {
|
|
@@ -913,7 +933,7 @@ class MenuCardComponent extends FieldType {
|
|
|
913
933
|
this.onStepChanged(sourceType);
|
|
914
934
|
}
|
|
915
935
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
916
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MenuCardComponent, isStandalone: true, selector: "sa-menu-card", inputs: { title: "title", steps: "steps", footerDetails: "footerDetails" }, outputs: { onButtonClickEvent: "onButtonClickEvent", onCardClickEvent: "onCardClickEvent", onFooterClickEvent: "onFooterClickEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"menu-card-container\">\n <div class=\"left-card-container\">\n <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\n (onStepClicked)=\"onStepChanged($event)\" [selectedStep]=\"selectedStep\"></sa-guide-card>\n <div class=\"card-footer-container\">\n <span class=\"horizontal-line\"></span>\n <ng-container *ngFor=\"let footerDetail of footerDetails\">\n <div (click)=\"showSources(footerDetail)\" class=\"footer\"\n [ngClass]=\"footerDetail === selectedStep ? 'selected-step' : 'other-step'\">\n <span class=\"footer-text\">\n {{footerDetail?.title}}\n <ng-container *ngIf=\"footerDetail?.count\">\n <span>({{footerDetail?.count}})</span>\n </ng-container>\n </span>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"right-card-container\">\n @if(selectedStep?.messageContent){\n <div class=\"message-container\">\n <sa-message-banner [type]=\"'info'\">\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent\">\n </div>\n </sa-message-banner>\n </div>\n }\n <div class=\"heading-container\">\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\n </div>\n <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n <!-- for advanced options -->\n <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\n class=\"menu-card-advanced-features-section\">\n\n <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\n class=\"menuAdvancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!selectedStep?.advancedFeaturesExpanded){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"selectedStep?.advancedFeatureCollapsedIcon || 'rightChevronOutlined'\"\n class=\"d-flex\" customClass=\"colored-icon\" size=\"20\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"selectedStep?.advancedFeatureExpandedIcon || 'downChevronOutlined'\"\n class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ selectedStep?.advancedFeatureTitle }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"expansion-container\">\n @if(selectedStep?.advancedFeatureDisclaimer){\n <div class=\"disclaimer-container\">\n <sa-message-banner [type]=\"'disclaimer'\">\n <div class=\"disclaimer-content\">\n @if(selectedStep?.advancedFeatureDisclaimerTooltip){\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\"\n [matTooltip]=\"selectedStep?.advancedFeatureDisclaimerTooltip\" customClass=\"info-icon\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\n </div>\n @if(selectedStep?.advancedFeatureDisclaimerButtons) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </sa-message-banner>\n </div>\n }\n <div class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </div>\n</div>\n\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\n class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n <div class=\"sa-menu-card-title-icon-container\">\n <div class=\"sa-menu-card-custom-title\">\n <ng-container *ngIf=\"source.logoUrl\">\n <sa-icon [img]=\"source.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n </ng-container>\n <span [matTooltip]=\"source?.tooltip\">\n {{source?.name}}\n <ng-container *ngIf=\"source?.count\">\n <span>({{source.count}})</span>\n </ng-container>\n </span>\n <ng-container *ngIf=\"source?.chipData\">\n <span>\n <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\n [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\n [iconPosition]='source?.chipData.iconPosition'\n [iconPath]=\"source?.chipData.iconPath\">\n </sa-chip>\n </span>\n </ng-container>\n </div>\n </div>\n <ng-container\n *ngIf=\"!source.disabled && (selectedStep?.actionButton && (selectedStep?.showActionActionButton ? actionButton : null)) as button\">\n <div class=\"sa-card-titleIcon no-margin\">\n <sa-card-title-actions>\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, button, $event)\">\n </sa-button>\n </sa-card-title-actions>\n </div>\n </ng-container>\n </div>\n </sa-card-title-header>\n </sa-card>\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow:scroll}.step-title{display:flex;justify-content:space-between}.mandatory{width:101px;height:20px;gap:var(--Small8px);opacity:0px;display:inline-block;position:relative;top:3px;padding:0rem .3rem}.step-title .title{padding:.35rem;border-radius:.25rem;display:inline-flex}.step-content .selected-step{background:var(--primary-500);color:#fff;border-radius:.3rem}.step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.step-content{width:-webkit-fill-available}.card-footer-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);padding-left:1.75rem;padding-right:1.75rem}.horizontal-line{border:.025rem solid var(--grey-100, #eaecf0);width:-webkit-fill-available}.card-footer-container .footer-text{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--small-20px, 20px);letter-spacing:.25px}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,31rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.menu-card-advanced-features-section{width:-webkit-fill-available}.menu-card-advanced-features-section .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.expansion-container{display:flex;flex-direction:column;gap:var(--small-16px)}.menuAdvancedAccordion .disclaimer-content{display:flex;gap:var(--small-8px);align-items:center}.menuAdvancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menuAdvancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .menuAdvancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.menuAdvancedAccordion .panel-container .material-icons{font-size:1.375rem}.menuAdvancedAccordion .chip-container{margin-left:auto}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.tooltip-icon{display:flex;align-items:center}.d-flex{display:flex}.sa-menu-card-custom-title,.sa-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.panel-container{display:flex;padding:6px var(--small-12px, 12px);justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}::ng-deep .menu-card-container .mat-expansion-panel-header{padding:0}::ng-deep .menu-card-container .mat-expansion-panel-body{padding:0 0 16px}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}::ng-deep .disabled-card .menuCardSourceContainer .sa-button{cursor:auto}::ng-deep .enabled-card{transition:border .3s ease,background .3s ease}.menuCardSourceContainer{align-items:center}::ng-deep .enabled-card .menuCardSourceContainer:hover{border:1px solid var(--grey-100);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .disabled-card .menuCardSourceContainer.sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .menuCardSourceContainer .no-margin .sa-card-title-actions{margin:0}.heading-style{color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep .menu-card-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .menu-card-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}.menu-card-container .card-footer-container .footer.other-step:hover{background:var(--primary-50);border-radius:.25rem}.card-footer-container .footer{width:-webkit-fill-available;padding-top:.5rem;padding-bottom:.5rem;padding-left:.5rem;cursor:pointer}.menu-card-container .footer.selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .footer.selected-step .footer-text{color:#fff}.menu-card-container .message-container{width:-webkit-fill-available}.menu-card-container .message-container .message-content{display:flex;justify-content:start;flex:1;color:var(--text-primary, #825CEE);gap:var(--small-12px)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GuideCardComponent, selector: "sa-guide-card", inputs: ["title", "steps", "selectable", "selectedStep"], outputs: ["onStepClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { 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: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "onAction"] }] }); }
|
|
936
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MenuCardComponent, isStandalone: true, selector: "sa-menu-card", inputs: { title: "title", steps: "steps", footerDetails: "footerDetails" }, outputs: { onButtonClickEvent: "onButtonClickEvent", onCardClickEvent: "onCardClickEvent", onFooterClickEvent: "onFooterClickEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"menu-card-container\">\n <div class=\"left-card-container\">\n <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\n (onStepClicked)=\"onStepChanged($event)\" [selectedStep]=\"selectedStep\"></sa-guide-card>\n <div class=\"card-footer-container\">\n <span class=\"horizontal-line\"></span>\n <ng-container *ngFor=\"let footerDetail of footerDetails\">\n <div (click)=\"showSources(footerDetail)\" class=\"footer\"\n [ngClass]=\"footerDetail === selectedStep ? 'selected-step' : 'other-step'\">\n <span class=\"footer-text\">\n {{footerDetail?.title}}\n <ng-container *ngIf=\"footerDetail?.count\">\n <span>({{footerDetail?.count}})</span>\n </ng-container>\n </span>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"right-card-container\">\n @if(selectedStep?.messageContent){\n <div class=\"message-container\">\n <sa-message-banner [type]=\"'info'\">\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent\">\n </div>\n </sa-message-banner>\n </div>\n }\n <div class=\"heading-container\">\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\n </div>\n <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n <!-- for advanced options -->\n <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\n class=\"menu-card-advanced-features-section\">\n\n <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\n class=\"menuAdvancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!selectedStep?.advancedFeaturesExpanded){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"selectedStep?.advancedFeatureCollapsedIcon || 'rightChevronOutlined'\"\n class=\"d-flex\" customClass=\"colored-icon\" size=\"20\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"selectedStep?.advancedFeatureExpandedIcon || 'downChevronOutlined'\"\n class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ selectedStep?.advancedFeatureTitle }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"expansion-container\">\n @if(selectedStep?.advancedFeatureDisclaimer){\n <div class=\"disclaimer-container\">\n <sa-message-banner [type]=\"'disclaimer'\">\n <div class=\"disclaimer-content\">\n @if(selectedStep?.advancedFeatureDisclaimerTooltip){\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\"\n [matTooltip]=\"selectedStep?.advancedFeatureDisclaimerTooltip\" customClass=\"info-icon\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\n </div>\n @if(selectedStep?.advancedFeatureDisclaimerButtons) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </sa-message-banner>\n </div>\n }\n <div class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </div>\n</div>\n\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\n class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n <div class=\"sa-menu-card-title-icon-container\">\n <div class=\"sa-menu-card-custom-title\">\n <ng-container *ngIf=\"source.logoUrl\">\n <sa-icon [img]=\"source.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n </ng-container>\n <span [matTooltip]=\"source?.tooltip\">\n {{source?.name}}\n <ng-container *ngIf=\"source?.count\">\n <span>({{source.count}})</span>\n </ng-container>\n </span>\n <ng-container *ngIf=\"source?.chipData\">\n <span>\n <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\n [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\n [iconPosition]='source?.chipData.iconPosition'\n [iconPath]=\"source?.chipData.iconPath\">\n </sa-chip>\n </span>\n </ng-container>\n </div>\n </div>\n <ng-container\n *ngIf=\"!source.disabled && (selectedStep?.actionButton && (selectedStep?.showActionActionButton ? actionButton : null)) as button\">\n <div class=\"sa-card-titleIcon no-margin\">\n <sa-card-title-actions>\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, button, $event)\">\n </sa-button>\n </sa-card-title-actions>\n </div>\n </ng-container>\n </div>\n </sa-card-title-header>\n </sa-card>\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow:scroll}.step-title{display:flex;justify-content:space-between}.mandatory{width:101px;height:20px;gap:var(--Small8px);opacity:0px;display:inline-block;position:relative;top:3px;padding:0rem .3rem}.step-title .title{padding:.35rem;border-radius:.25rem;display:inline-flex}.step-content .selected-step{background:var(--primary-500);color:#fff;border-radius:.3rem}.step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.step-content{width:-webkit-fill-available}.card-footer-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);padding-left:1.75rem;padding-right:1.75rem}.horizontal-line{border:.025rem solid var(--grey-100, #eaecf0);width:-webkit-fill-available}.card-footer-container .footer-text{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--small-20px, 20px);letter-spacing:.25px}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,31rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.menu-card-advanced-features-section{width:-webkit-fill-available}.menu-card-advanced-features-section .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.expansion-container{display:flex;flex-direction:column;gap:var(--small-16px)}.menuAdvancedAccordion .disclaimer-content{display:flex;gap:var(--small-8px);align-items:center}.menuAdvancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menuAdvancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .menuAdvancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.menuAdvancedAccordion .panel-container .material-icons{font-size:1.375rem}.menuAdvancedAccordion .chip-container{margin-left:auto}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.tooltip-icon{display:flex;align-items:center}.d-flex{display:flex}.sa-menu-card-custom-title,.sa-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.panel-container{display:flex;padding:6px var(--small-12px, 12px);justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}::ng-deep .menu-card-container .mat-expansion-panel-header{padding:0}::ng-deep .menu-card-container .mat-expansion-panel-body{padding:0 0 16px}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}::ng-deep .disabled-card .menuCardSourceContainer .sa-button{cursor:auto}::ng-deep .enabled-card{transition:border .3s ease,background .3s ease}.menuCardSourceContainer{align-items:center}::ng-deep .enabled-card .menuCardSourceContainer:hover{border:1px solid var(--grey-100);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .disabled-card .menuCardSourceContainer.sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .menuCardSourceContainer .no-margin .sa-card-title-actions{margin:0}.heading-style{color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep .menu-card-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .menu-card-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}.menu-card-container .card-footer-container .footer.other-step:hover{background:var(--primary-50);border-radius:.25rem}.card-footer-container .footer{width:-webkit-fill-available;padding-top:.5rem;padding-bottom:.5rem;padding-left:.5rem;cursor:pointer}.menu-card-container .footer.selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .footer.selected-step .footer-text{color:#fff}.menu-card-container .message-container{width:-webkit-fill-available}.menu-card-container .message-container .message-content{display:flex;justify-content:start;flex:1;color:var(--text-primary, #825CEE);gap:var(--small-12px)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GuideCardComponent, selector: "sa-guide-card", inputs: ["title", "steps", "selectable", "selectedStep"], outputs: ["onStepClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { 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: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }] }); }
|
|
917
937
|
}
|
|
918
938
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuCardComponent, decorators: [{
|
|
919
939
|
type: Component,
|
|
@@ -1167,6 +1187,126 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1167
1187
|
type: Input
|
|
1168
1188
|
}] } });
|
|
1169
1189
|
|
|
1190
|
+
class MessageBannerV2Component {
|
|
1191
|
+
constructor() {
|
|
1192
|
+
// State management using signals
|
|
1193
|
+
this.state = signal({
|
|
1194
|
+
type: 'default',
|
|
1195
|
+
title: '',
|
|
1196
|
+
description: '',
|
|
1197
|
+
messageIcon: '',
|
|
1198
|
+
messageIconSize: {
|
|
1199
|
+
height: '12.5rem'
|
|
1200
|
+
}
|
|
1201
|
+
});
|
|
1202
|
+
// Computed properties
|
|
1203
|
+
this.bannerContent = computed(() => {
|
|
1204
|
+
const currentState = this.state();
|
|
1205
|
+
return {
|
|
1206
|
+
...currentState,
|
|
1207
|
+
description: this.sanitizeDescription(currentState.description)
|
|
1208
|
+
};
|
|
1209
|
+
});
|
|
1210
|
+
this.buttons = [];
|
|
1211
|
+
this.buttonClick = new EventEmitter();
|
|
1212
|
+
}
|
|
1213
|
+
// Input properties
|
|
1214
|
+
set messageType(value) {
|
|
1215
|
+
this.state.update(s => ({ ...s, type: value }));
|
|
1216
|
+
this.updateContentBasedOnType(value);
|
|
1217
|
+
}
|
|
1218
|
+
set messageIcon(value) {
|
|
1219
|
+
this.state.update(s => ({ ...s, messageIcon: value }));
|
|
1220
|
+
}
|
|
1221
|
+
set messageIconSize(value) {
|
|
1222
|
+
this.state.update(s => ({ ...s, messageIconSize: value }));
|
|
1223
|
+
}
|
|
1224
|
+
set title(value) {
|
|
1225
|
+
this.state.update(s => ({ ...s, title: value }));
|
|
1226
|
+
}
|
|
1227
|
+
set description(value) {
|
|
1228
|
+
this.state.update(s => ({ ...s, description: value }));
|
|
1229
|
+
}
|
|
1230
|
+
updateContentBasedOnType(type) {
|
|
1231
|
+
const content = {
|
|
1232
|
+
default: {
|
|
1233
|
+
title: 'Oops! Something went wrong. Please try again or try after some time',
|
|
1234
|
+
description: 'If the issue persists, contact our support team at <span class="support-email">support@sarasanalytics.com</span>',
|
|
1235
|
+
messageIcon: '/assets/error.gif'
|
|
1236
|
+
},
|
|
1237
|
+
connection: {
|
|
1238
|
+
title: 'We\'re having trouble connecting. Please check your internet connection and try again',
|
|
1239
|
+
description: 'You can also reach out to our support team at <span class="support-email">support@sarasanalytics.com</span> for assistance',
|
|
1240
|
+
messageIcon: '/assets/lost-connection.gif'
|
|
1241
|
+
},
|
|
1242
|
+
access: {
|
|
1243
|
+
title: 'This is taking a bit longer than usual. Please hold on!',
|
|
1244
|
+
description: 'If the delay continues, check your connection and try refreshing the page.',
|
|
1245
|
+
messageIcon: '/assets/long-loading.gif'
|
|
1246
|
+
}
|
|
1247
|
+
};
|
|
1248
|
+
this.state.update(s => ({
|
|
1249
|
+
...s,
|
|
1250
|
+
...content[type]
|
|
1251
|
+
}));
|
|
1252
|
+
}
|
|
1253
|
+
sanitizeDescription(description) {
|
|
1254
|
+
return description.replace(/support@sarasanalytics\.com/g, '<span class="support-email">support@sarassanalytics.com</span>');
|
|
1255
|
+
}
|
|
1256
|
+
onButtonClick(button, event) {
|
|
1257
|
+
this.buttonClick.emit({
|
|
1258
|
+
type: button.type,
|
|
1259
|
+
button,
|
|
1260
|
+
originalEvent: event
|
|
1261
|
+
});
|
|
1262
|
+
}
|
|
1263
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1264
|
+
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", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], ngImport: i0, template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\">\n <div class=\"image-container\">\n <img [src]=\"content.messageIcon\" \n [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\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [innerHTML]=\"content.description\"></p>\n </div>\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 [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n}\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, fit-content)}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 }] }); }
|
|
1265
|
+
}
|
|
1266
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, decorators: [{
|
|
1267
|
+
type: Component,
|
|
1268
|
+
args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\">\n <div class=\"image-container\">\n <img [src]=\"content.messageIcon\" \n [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\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [innerHTML]=\"content.description\"></p>\n </div>\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 [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n}\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, fit-content)}.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}\n"] }]
|
|
1269
|
+
}], propDecorators: { messageType: [{
|
|
1270
|
+
type: Input
|
|
1271
|
+
}], messageIcon: [{
|
|
1272
|
+
type: Input
|
|
1273
|
+
}], messageIconSize: [{
|
|
1274
|
+
type: Input
|
|
1275
|
+
}], title: [{
|
|
1276
|
+
type: Input
|
|
1277
|
+
}], description: [{
|
|
1278
|
+
type: Input
|
|
1279
|
+
}], buttons: [{
|
|
1280
|
+
type: Input
|
|
1281
|
+
}], buttonClick: [{
|
|
1282
|
+
type: Output
|
|
1283
|
+
}] } });
|
|
1284
|
+
|
|
1285
|
+
class DialogComponent {
|
|
1286
|
+
constructor() {
|
|
1287
|
+
this.buttonClick = new EventEmitter();
|
|
1288
|
+
}
|
|
1289
|
+
onButtonClick(button, event) {
|
|
1290
|
+
this.buttonClick.emit(button);
|
|
1291
|
+
}
|
|
1292
|
+
handleButtonClick(event) {
|
|
1293
|
+
this.buttonClick.emit(event);
|
|
1294
|
+
}
|
|
1295
|
+
onCloseButtonClick() {
|
|
1296
|
+
this.buttonClick.emit({ action: 'close', dialogData: this.data });
|
|
1297
|
+
}
|
|
1298
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1299
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: DialogComponent, isStandalone: true, selector: "sa-dialog", inputs: { data: "data" }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<div class=\"dialog-container\">\n <!-- top banner region -->\n <div class=\"top-container\">\n @if (!!data?.topMessageBanners) {\n <div class=\"top-message-container\">\n @for (\n messageBanner of data?.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 (!!data?.closeButton || data?.showCloseButton) {\n <div class=\"cross-btn\" (click)=\"onCloseButtonClick()\">\n <sa-icon\n [icon]=\"data?.closeButton || 'closeOutlined'\"\n class=\"d-flex\"\n size=\"20\"\n ></sa-icon>\n </div>\n }\n </div>\n <!-- middle region -->\n @if (!!data?.middleRegion) {\n <ng-container *ngIf=\"data?.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 (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\n >\n </sa-message-banner-v2>\n </div>\n </ng-container>\n }\n <!-- lower message banner region -->\n @if (!!data?.lowerMessageBanners) {\n <div class=\"lower-message-container\">\n @for (\n messageBanner of data?.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 (!!data?.buttons) {\n <div class=\"button-group-container\">\n @for (button of data?.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 [attr.aria-label]=\"button.text\"\n >\n </sa-button>\n }\n </div>\n }\n @if (!!data?.buttonsWithType) {\n <div class=\"buttonWithType-group-container\">\n @for (button of data?.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}.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)}\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", "messageIcon", "messageIconSize", "title", "description", "buttons"], outputs: ["buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.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"] }] }); }
|
|
1300
|
+
}
|
|
1301
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponent, decorators: [{
|
|
1302
|
+
type: Component,
|
|
1303
|
+
args: [{ selector: 'sa-dialog', standalone: true, imports: [MessageBannerComponent, MessageBannerV2Component, CommonModule, ButtonComponent, MatCheckboxModule, IconComponent], template: "<div class=\"dialog-container\">\n <!-- top banner region -->\n <div class=\"top-container\">\n @if (!!data?.topMessageBanners) {\n <div class=\"top-message-container\">\n @for (\n messageBanner of data?.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 (!!data?.closeButton || data?.showCloseButton) {\n <div class=\"cross-btn\" (click)=\"onCloseButtonClick()\">\n <sa-icon\n [icon]=\"data?.closeButton || 'closeOutlined'\"\n class=\"d-flex\"\n size=\"20\"\n ></sa-icon>\n </div>\n }\n </div>\n <!-- middle region -->\n @if (!!data?.middleRegion) {\n <ng-container *ngIf=\"data?.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 (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\n >\n </sa-message-banner-v2>\n </div>\n </ng-container>\n }\n <!-- lower message banner region -->\n @if (!!data?.lowerMessageBanners) {\n <div class=\"lower-message-container\">\n @for (\n messageBanner of data?.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 (!!data?.buttons) {\n <div class=\"button-group-container\">\n @for (button of data?.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 [attr.aria-label]=\"button.text\"\n >\n </sa-button>\n }\n </div>\n }\n @if (!!data?.buttonsWithType) {\n <div class=\"buttonWithType-group-container\">\n @for (button of data?.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}.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)}\n"] }]
|
|
1304
|
+
}], propDecorators: { data: [{
|
|
1305
|
+
type: Input
|
|
1306
|
+
}], buttonClick: [{
|
|
1307
|
+
type: Output
|
|
1308
|
+
}] } });
|
|
1309
|
+
|
|
1170
1310
|
function phoneNumberValidator(dependent) {
|
|
1171
1311
|
return (control) => {
|
|
1172
1312
|
const dependentFormControl = dependent ? control.parent?.get(dependent) : null;
|
|
@@ -1597,7 +1737,7 @@ class FormSelectComponent extends FieldType {
|
|
|
1597
1737
|
}
|
|
1598
1738
|
}
|
|
1599
1739
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1600
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", outputs: { hoverEvent: "hoverEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\n (blur)=\"openClose(false)\"></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: CommonModule }] }); }
|
|
1740
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", outputs: { hoverEvent: "hoverEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\n (blur)=\"openClose(false)\"></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$3.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i3$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "ngmodule", type: CommonModule }] }); }
|
|
1601
1741
|
}
|
|
1602
1742
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
|
|
1603
1743
|
type: Component,
|
|
@@ -1613,7 +1753,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1613
1753
|
IconComponent,
|
|
1614
1754
|
CommonModule,
|
|
1615
1755
|
MatTooltipModule
|
|
1616
|
-
], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" bindLabel=\"name\" [items]=\"selectables\" [multiple]=\"params
|
|
1756
|
+
], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"checkForZero($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (focus)=\"openClose(true)\" (blur)=\" openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\">\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" [id]=\"item.id\"\n [iconPath]=\"params.iconPath\" [text]=\"item.name\" [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd == items.length-labelLimit\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" type=\"regular\" state=\"default\" filling=\"filled\">\n </sa-chip>\n </div>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(true)\"\n (blur)=\"openClose(false)\"></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none!important}.ng-select ::ng-deep .ng-select-container{box-shadow:none!important;position:relative!important;z-index:1!important}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:99;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}\n"] }]
|
|
1617
1757
|
}], propDecorators: { hoverEvent: [{
|
|
1618
1758
|
type: Output,
|
|
1619
1759
|
args: ['hoverEvent']
|
|
@@ -1893,101 +2033,6 @@ const data = {
|
|
|
1893
2033
|
}]
|
|
1894
2034
|
};
|
|
1895
2035
|
|
|
1896
|
-
class MessageBannerV2Component {
|
|
1897
|
-
constructor() {
|
|
1898
|
-
// State management using signals
|
|
1899
|
-
this.state = signal({
|
|
1900
|
-
type: 'default',
|
|
1901
|
-
title: '',
|
|
1902
|
-
description: '',
|
|
1903
|
-
messageIcon: '',
|
|
1904
|
-
messageIconSize: {
|
|
1905
|
-
height: '12.5rem'
|
|
1906
|
-
}
|
|
1907
|
-
});
|
|
1908
|
-
// Computed properties
|
|
1909
|
-
this.bannerContent = computed(() => {
|
|
1910
|
-
const currentState = this.state();
|
|
1911
|
-
return {
|
|
1912
|
-
...currentState,
|
|
1913
|
-
description: this.sanitizeDescription(currentState.description)
|
|
1914
|
-
};
|
|
1915
|
-
});
|
|
1916
|
-
this.buttons = [];
|
|
1917
|
-
this.buttonClick = new EventEmitter();
|
|
1918
|
-
}
|
|
1919
|
-
// Input properties
|
|
1920
|
-
set messageType(value) {
|
|
1921
|
-
this.state.update(s => ({ ...s, type: value }));
|
|
1922
|
-
this.updateContentBasedOnType(value);
|
|
1923
|
-
}
|
|
1924
|
-
set messageIcon(value) {
|
|
1925
|
-
this.state.update(s => ({ ...s, messageIcon: value }));
|
|
1926
|
-
}
|
|
1927
|
-
set messageIconSize(value) {
|
|
1928
|
-
this.state.update(s => ({ ...s, messageIconSize: value }));
|
|
1929
|
-
}
|
|
1930
|
-
set title(value) {
|
|
1931
|
-
this.state.update(s => ({ ...s, title: value }));
|
|
1932
|
-
}
|
|
1933
|
-
set description(value) {
|
|
1934
|
-
this.state.update(s => ({ ...s, description: value }));
|
|
1935
|
-
}
|
|
1936
|
-
updateContentBasedOnType(type) {
|
|
1937
|
-
const content = {
|
|
1938
|
-
default: {
|
|
1939
|
-
title: 'Oops! Something went wrong. Please try again or try after some time',
|
|
1940
|
-
description: 'If the issue persists, contact our support team at <span class="support-email">support@sarasanalytics.com</span>',
|
|
1941
|
-
messageIcon: '/assets/error.gif'
|
|
1942
|
-
},
|
|
1943
|
-
connection: {
|
|
1944
|
-
title: 'We\'re having trouble connecting. Please check your internet connection and try again',
|
|
1945
|
-
description: 'You can also reach out to our support team at <span class="support-email">support@sarasanalytics.com</span> for assistance',
|
|
1946
|
-
messageIcon: '/assets/lost-connection.gif'
|
|
1947
|
-
},
|
|
1948
|
-
access: {
|
|
1949
|
-
title: 'This is taking a bit longer than usual. Please hold on!',
|
|
1950
|
-
description: 'If the delay continues, check your connection and try refreshing the page.',
|
|
1951
|
-
messageIcon: '/assets/long-loading.gif'
|
|
1952
|
-
}
|
|
1953
|
-
};
|
|
1954
|
-
this.state.update(s => ({
|
|
1955
|
-
...s,
|
|
1956
|
-
...content[type]
|
|
1957
|
-
}));
|
|
1958
|
-
}
|
|
1959
|
-
sanitizeDescription(description) {
|
|
1960
|
-
return description.replace(/support@sarasanalytics\.com/g, '<span class="support-email">support@sarassanalytics.com</span>');
|
|
1961
|
-
}
|
|
1962
|
-
onButtonClick(button, event) {
|
|
1963
|
-
this.buttonClick.emit({
|
|
1964
|
-
type: button.type,
|
|
1965
|
-
button,
|
|
1966
|
-
originalEvent: event
|
|
1967
|
-
});
|
|
1968
|
-
}
|
|
1969
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1970
|
-
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", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], ngImport: i0, template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\">\n <div class=\"image-container\">\n <img [src]=\"content.messageIcon\" \n [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\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [innerHTML]=\"content.description\"></p>\n </div>\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 [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n </div>\n </div>\n </div>\n}\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, fit-content)}.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}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 }] }); }
|
|
1971
|
-
}
|
|
1972
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, decorators: [{
|
|
1973
|
-
type: Component,
|
|
1974
|
-
args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule], providers: [IconService], template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\">\n <div class=\"image-container\">\n <img [src]=\"content.messageIcon\" \n [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\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [innerHTML]=\"content.description\"></p>\n </div>\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 [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n </div>\n </div>\n </div>\n}\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, fit-content)}.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}\n"] }]
|
|
1975
|
-
}], propDecorators: { messageType: [{
|
|
1976
|
-
type: Input
|
|
1977
|
-
}], messageIcon: [{
|
|
1978
|
-
type: Input
|
|
1979
|
-
}], messageIconSize: [{
|
|
1980
|
-
type: Input
|
|
1981
|
-
}], title: [{
|
|
1982
|
-
type: Input
|
|
1983
|
-
}], description: [{
|
|
1984
|
-
type: Input
|
|
1985
|
-
}], buttons: [{
|
|
1986
|
-
type: Input
|
|
1987
|
-
}], buttonClick: [{
|
|
1988
|
-
type: Output
|
|
1989
|
-
}] } });
|
|
1990
|
-
|
|
1991
2036
|
class PageLayoutComponent {
|
|
1992
2037
|
constructor() {
|
|
1993
2038
|
this.showRightContent = false;
|
|
@@ -2821,5 +2866,5 @@ const iconNames = [
|
|
|
2821
2866
|
* Generated bundle index. Do not edit.
|
|
2822
2867
|
*/
|
|
2823
2868
|
|
|
2824
|
-
export { AccordionComponent, AvatarComponent, ButtonComponent, CalendarHeaderComponent, CardBodyComponent, CardCarouselComponent, CardComponent, CardCustomHeaderComponent, CardFooterActionsComponent, CardIconComponent, CardTitleActionsComponent, CheckboxCardComponent, CheckboxComponent, ChipsComponent, DatepickerComponent, FormInputComponent, FormSelectComponent, GridCellComponent, GuideCardComponent, HeaderComponent, IInputEventType, ILeftNavTypes, IconComponent, IconService, LayoutSectionComponent, LeftNavComponent, ListComponent, MenuCardComponent, MessageBannerComponent, MessageBannerV2Component, PageLayoutComponent, ProgressBarComponent, RadioButtonComponent, ScrollingCardsComponent, SkeletonBaseComponent, SkeletonCircleComponent, SkeletonContainerComponent, SkeletonEllipticalComponent, SkeletonLoaderComponent, SkeletonRectangleComponent, SkeletonTextComponent, SpinnerComponent, StepperComponent, TabsComponent, TestLibraryComponent, TestLibraryService, ThumbnailCardComponent, ToastComponent, ToolTipComponent, buttonPosition, buttonSizes, buttonType, iconNames };
|
|
2869
|
+
export { AccordionComponent, AvatarComponent, ButtonComponent, CalendarHeaderComponent, CardBodyComponent, CardCarouselComponent, CardComponent, CardCustomHeaderComponent, CardFooterActionsComponent, CardIconComponent, CardTitleActionsComponent, CheckboxCardComponent, CheckboxComponent, ChipsComponent, DatepickerComponent, DialogComponent, FormInputComponent, FormSelectComponent, GridCellComponent, GuideCardComponent, HeaderComponent, IInputEventType, ILeftNavTypes, IconComponent, IconService, LayoutSectionComponent, LeftNavComponent, ListComponent, MenuCardComponent, MessageBannerComponent, MessageBannerV2Component, PageLayoutComponent, ProgressBarComponent, RadioButtonComponent, ScrollingCardsComponent, SkeletonBaseComponent, SkeletonCircleComponent, SkeletonContainerComponent, SkeletonEllipticalComponent, SkeletonLoaderComponent, SkeletonRectangleComponent, SkeletonTextComponent, SpinnerComponent, StepperComponent, TabsComponent, TestLibraryComponent, TestLibraryService, ThumbnailCardComponent, ToastComponent, ToolTipComponent, buttonPosition, buttonSizes, buttonType, iconNames };
|
|
2825
2870
|
//# sourceMappingURL=sarasanalytics-com-design-system.mjs.map
|