@sarasanalytics-com/design-system 0.0.37 → 0.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/card/checkbox-card/checkbox-card.component.mjs +3 -3
- package/esm2022/lib/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/page-layout/page-layout.component.mjs +2 -2
- package/esm2022/lib/radio-button/radio-button.component.mjs +3 -3
- package/fesm2022/sarasanalytics-com-design-system.mjs +8 -8
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/styles.css +20 -0
|
@@ -32,10 +32,10 @@ export class CheckboxCardComponent extends FieldType {
|
|
|
32
32
|
this.field.props['onButtonClick'](this.field);
|
|
33
33
|
}
|
|
34
34
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
35
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxCardComponent, isStandalone: true, selector: "sa-checkbox-card", usesInheritance: true, ngImport: i0, template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n [style.width]=\"props['width']\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <div class=\"sa-card-title-logo-container\">\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n </div>\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-card-title-actions>\n <div class=\"sa-document-action\">\n @if(props['disabled']){\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n }\n </div>\n </sa-card-title-actions>\n </div>\n </div>\n </sa-card-title-header>\n <sa-card-custom-body>\n @if(props['listItems']){\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n }@else if(props['showButtons']){\n <div class=\"buttons-container\">\n <ng-container *ngFor=\"let button of props['showButtons']\">\n <ng-container *ngIf=\"button.type === 'submit'\">\n <div class=\"button-content\">\n @if(props['description']){\n @if(props['descriptionIcon']){\n <div class=\"description-container\">\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n class=\"description-icon\"></sa-icon>\n <span class=\"description-style\">{{props['description']}}</span>\n </div>\n }\n }\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n [buttonIconSize]=\"button.iconSize\"></sa-button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n }\n </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::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)}.checkbox-card{display:block}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: ListComponent, selector: "lib-list", inputs: ["listData", "featuresIcon"] }, { kind: "component", type: CardBodyComponent, selector: "sa-card-custom-body" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] }); }
|
|
35
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxCardComponent, isStandalone: true, selector: "sa-checkbox-card", usesInheritance: true, ngImport: i0, template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n [style.width]=\"props['width']\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <div class=\"sa-card-title-logo-container\">\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n </div>\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-card-title-actions>\n <div class=\"sa-document-action\">\n @if(props['disabled']){\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n }\n </div>\n </sa-card-title-actions>\n </div>\n </div>\n </sa-card-title-header>\n <sa-card-custom-body>\n @if(props['listItems']){\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n }@else if(props['showButtons']){\n <div class=\"buttons-container\">\n <ng-container *ngFor=\"let button of props['showButtons']\">\n <ng-container *ngIf=\"button.type === 'submit'\">\n <div class=\"button-content\">\n @if(props['description']){\n @if(props['descriptionIcon']){\n <div class=\"description-container\">\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n class=\"description-icon\"></sa-icon>\n <span class=\"description-style\">{{props['description']}}</span>\n </div>\n }\n }\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n [buttonIconSize]=\"button.iconSize\"></sa-button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n }\n </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::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)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: ListComponent, selector: "lib-list", inputs: ["listData", "featuresIcon"] }, { kind: "component", type: CardBodyComponent, selector: "sa-card-custom-body" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1.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: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] }); }
|
|
36
36
|
}
|
|
37
37
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, decorators: [{
|
|
38
38
|
type: Component,
|
|
39
|
-
args: [{ selector: 'sa-checkbox-card', standalone: true, imports: [CardComponent, IconComponent, ListComponent, CardBodyComponent, MatCheckboxModule, CommonModule, CardTitleActionsComponent, CardCustomHeaderComponent, FormsModule, ReactiveFormsModule, ButtonComponent], template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n [style.width]=\"props['width']\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <div class=\"sa-card-title-logo-container\">\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n </div>\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-card-title-actions>\n <div class=\"sa-document-action\">\n @if(props['disabled']){\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n }\n </div>\n </sa-card-title-actions>\n </div>\n </div>\n </sa-card-title-header>\n <sa-card-custom-body>\n @if(props['listItems']){\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n }@else if(props['showButtons']){\n <div class=\"buttons-container\">\n <ng-container *ngFor=\"let button of props['showButtons']\">\n <ng-container *ngIf=\"button.type === 'submit'\">\n <div class=\"button-content\">\n @if(props['description']){\n @if(props['descriptionIcon']){\n <div class=\"description-container\">\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n class=\"description-icon\"></sa-icon>\n <span class=\"description-style\">{{props['description']}}</span>\n </div>\n }\n }\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n [buttonIconSize]=\"button.iconSize\"></sa-button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n }\n </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::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)}.checkbox-card{display:block}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}\n"] }]
|
|
39
|
+
args: [{ selector: 'sa-checkbox-card', standalone: true, imports: [CardComponent, IconComponent, ListComponent, CardBodyComponent, MatCheckboxModule, CommonModule, CardTitleActionsComponent, CardCustomHeaderComponent, FormsModule, ReactiveFormsModule, ButtonComponent], template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n [style.width]=\"props['width']\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <div class=\"sa-card-title-logo-container\">\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n </div>\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-card-title-actions>\n <div class=\"sa-document-action\">\n @if(props['disabled']){\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n }\n </div>\n </sa-card-title-actions>\n </div>\n </div>\n </sa-card-title-header>\n <sa-card-custom-body>\n @if(props['listItems']){\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n }@else if(props['showButtons']){\n <div class=\"buttons-container\">\n <ng-container *ngFor=\"let button of props['showButtons']\">\n <ng-container *ngIf=\"button.type === 'submit'\">\n <div class=\"button-content\">\n @if(props['description']){\n @if(props['descriptionIcon']){\n <div class=\"description-container\">\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n class=\"description-icon\"></sa-icon>\n <span class=\"description-style\">{{props['description']}}</span>\n </div>\n }\n }\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n [buttonIconSize]=\"button.iconSize\"></sa-button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n }\n </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::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)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"] }]
|
|
40
40
|
}] });
|
|
41
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
41
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3gtY2FyZC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NhcmQvY2hlY2tib3gtY2FyZC9jaGVja2JveC1jYXJkLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvY2FyZC9jaGVja2JveC1jYXJkL2NoZWNrYm94LWNhcmQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBK0IsTUFBTSxlQUFlLENBQUM7QUFDdkUsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQ2xELE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUMxRCxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sMkJBQTJCLENBQUM7QUFDMUQsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDckUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sNEJBQTRCLENBQUM7QUFDL0QsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQy9DLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLG9EQUFvRCxDQUFDO0FBQy9GLE9BQU8sRUFBRSx5QkFBeUIsRUFBRSxNQUFNLG9EQUFvRCxDQUFDO0FBQy9GLE9BQU8sRUFBZSxXQUFXLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUMvRSxPQUFPLEVBQUUsU0FBUyxFQUFFLE1BQU0sa0JBQWtCLENBQUM7QUFDN0MsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLCtCQUErQixDQUFDOzs7OztBQVNoRSxNQUFNLE9BQU8scUJBQXNCLFNBQVEsU0FBUztJQUVsRCxRQUFRO1FBQ04sb0JBQW9CO0lBQ3RCLENBQUM7SUFFRCxXQUFXLENBQUMsS0FBaUI7UUFDM0IsSUFBSSxDQUFDLEtBQUssQ0FBQyxnQkFBZ0IsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQzdELElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUMsSUFBSSxDQUFDLFdBQVcsQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNyRCxDQUFDO0lBRUQsZUFBZSxDQUFDLEtBQVk7UUFDMUIsS0FBSyxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQzFCLENBQUM7SUFHRCxJQUFhLFdBQVc7UUFDdEIsT0FBTyxLQUFLLENBQUMsV0FBMEIsQ0FBQztJQUMxQyxDQUFDO0lBRUQsYUFBYSxDQUFDLE1BQVc7UUFDdkIsSUFBSSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsZUFBZSxDQUFDLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ2hELENBQUM7OEdBdEJVLHFCQUFxQjtrR0FBckIscUJBQXFCLG1HQ3BCbEMsOGpHQXNEVSw2akZEdENFLGFBQWEsc1RBQUUsYUFBYSxvSUFBRSxhQUFhLDJGQUFFLGlCQUFpQiwrREFBRSxpQkFBaUIsNldBQUUsWUFBWSxnUUFBRSx5QkFBeUIsa0VBQUUseUJBQXlCLGdFQUFFLFdBQVcsc0lBQUUsbUJBQW1CLGtOQUFFLGVBQWU7OzJGQUl2TSxxQkFBcUI7a0JBUGpDLFNBQVM7K0JBQ0Usa0JBQWtCLGNBQ2hCLElBQUksV0FDUCxDQUFDLGFBQWEsRUFBRSxhQUFhLEVBQUUsYUFBYSxFQUFFLGlCQUFpQixFQUFFLGlCQUFpQixFQUFFLFlBQVksRUFBRSx5QkFBeUIsRUFBRSx5QkFBeUIsRUFBRSxXQUFXLEVBQUUsbUJBQW1CLEVBQUUsZUFBZSxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENhcmRDb21wb25lbnQgfSBmcm9tICcuLi9jYXJkLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBJY29uQ29tcG9uZW50IH0gZnJvbSAnLi4vLi4vaWNvbi9pY29uLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBMaXN0Q29tcG9uZW50IH0gZnJvbSAnLi4vLi4vbGlzdC9saXN0LmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDYXJkQm9keUNvbXBvbmVudCB9IGZyb20gJy4uL2NhcmQtYm9keS9jYXJkLWJvZHkuY29tcG9uZW50JztcbmltcG9ydCB7IE1hdENoZWNrYm94TW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvbWF0ZXJpYWwvY2hlY2tib3gnO1xuaW1wb3J0IHsgQ29tbW9uTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcbmltcG9ydCB7IENhcmRUaXRsZUFjdGlvbnNDb21wb25lbnQgfSBmcm9tICcuLi9jYXJkLXRpdGxlLWFjdGlvbnMvY2FyZC10aXRsZS1hY3Rpb25zLmNvbXBvbmVudCc7XG5pbXBvcnQgeyBDYXJkQ3VzdG9tSGVhZGVyQ29tcG9uZW50IH0gZnJvbSAnLi4vY2FyZC1jdXN0b20taGVhZGVyL2NhcmQtY3VzdG9tLWhlYWRlci5jb21wb25lbnQnO1xuaW1wb3J0IHsgRm9ybUNvbnRyb2wsIEZvcm1zTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRmllbGRUeXBlIH0gZnJvbSAnQG5neC1mb3JtbHkvY29yZSc7XG5pbXBvcnQgeyBCdXR0b25Db21wb25lbnQgfSBmcm9tICcuLi8uLi9idXR0b24vYnV0dG9uLmNvbXBvbmVudCc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NhLWNoZWNrYm94LWNhcmQnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbQ2FyZENvbXBvbmVudCwgSWNvbkNvbXBvbmVudCwgTGlzdENvbXBvbmVudCwgQ2FyZEJvZHlDb21wb25lbnQsIE1hdENoZWNrYm94TW9kdWxlLCBDb21tb25Nb2R1bGUsIENhcmRUaXRsZUFjdGlvbnNDb21wb25lbnQsIENhcmRDdXN0b21IZWFkZXJDb21wb25lbnQsIEZvcm1zTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlLCBCdXR0b25Db21wb25lbnRdLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hlY2tib3gtY2FyZC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsOiAnLi9jaGVja2JveC1jYXJkLmNvbXBvbmVudC5jc3MnXG59KVxuZXhwb3J0IGNsYXNzIENoZWNrYm94Q2FyZENvbXBvbmVudCBleHRlbmRzIEZpZWxkVHlwZSB7XG5cbiAgbmdPbkluaXQoKSB7XG4gICAgLy8gY29uc29sZS5sb2codGhpcylcbiAgfVxuXG4gIG9uQ2FyZENsaWNrKGV2ZW50OiBNb3VzZUV2ZW50KTogdm9pZCB7XG4gICAgdGhpcy5wcm9wc1snaXNDYXJkU2VsZWN0ZWQnXSA9ICF0aGlzLnByb3BzWydpc0NhcmRTZWxlY3RlZCddO1xuICAgIHRoaXMuZm9ybUNvbnRyb2wuc2V0VmFsdWUoIXRoaXMuZm9ybUNvbnRyb2wudmFsdWUpO1xuICB9XG5cbiAgb25DaGVja2JveENsaWNrKGV2ZW50OiBFdmVudCk6IHZvaWQge1xuICAgIGV2ZW50LnN0b3BQcm9wYWdhdGlvbigpO1xuICB9XG5cblxuICBvdmVycmlkZSBnZXQgZm9ybUNvbnRyb2woKTogRm9ybUNvbnRyb2wge1xuICAgIHJldHVybiBzdXBlci5mb3JtQ29udHJvbCBhcyBGb3JtQ29udHJvbDtcbiAgfVxuXG4gIGFjdGlvbkhhbmRsZXIoYnV0dG9uOiBhbnkpIHtcbiAgICB0aGlzLmZpZWxkLnByb3BzWydvbkJ1dHRvbkNsaWNrJ10odGhpcy5maWVsZCk7XG4gIH1cbn1cbiIsIjxzYS1jYXJkIFt3aWR0aF09XCJwcm9wc1snd2lkdGgnXVwiIFtjdXN0b21XcmFwcGVyQ2xhc3NdPVwicHJvcHNbJ2N1c3RvbVdyYXBwZXJDbGFzcyddXCJcbiAgICAoY2xpY2spPVwiIXByb3BzWydkaXNhYmxlZCddICYmIG9uQ2FyZENsaWNrKCRldmVudClcIiBbc2hvd0NhcmRCb2R5XT1cImZhbHNlXCIgW3Nob3dDYXJkSGVhZGVyXT1cInRydWVcIlxuICAgIFtzaG93Q3VzdG9tQ2FyZEJvZHldPVwidHJ1ZVwiIGNsYXNzPVwiY2hlY2tib3gtY2FyZCB7e3Byb3BzWydpc0NhcmRTZWxlY3RlZCddID8gJ2NhcmQtc2VsZWN0ZWQnOiAnJ319XCJcbiAgICBbc3R5bGUud2lkdGhdPVwicHJvcHNbJ3dpZHRoJ11cIj5cbiAgICA8c2EtY2FyZC10aXRsZS1oZWFkZXI+XG4gICAgICAgIDxkaXYgY2xhc3M9XCJzYS1jYXJkLWN1c3RvbS1oZWFkZXItY29udGFpbmVyXCI+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2EtY2FyZC10aXRsZS1sb2dvLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJzYS1jYXJkLXRpdGxlLWxvZ28ge3twcm9wc1snZGlzYWJsZWQnXSA/ICdkaXNhYmxlZC1jYXJkJzogJyd9fVwiPjxzYS1pY29uXG4gICAgICAgICAgICAgICAgICAgICAgICBbaWNvbl09XCJwcm9wc1snZmVhdHVyZUljb24nXVwiIGN1c3RvbUNsYXNzPVwiYXV0by1kaW1lbnNpb25zIGNvbG9yZWQtaWNvblwiPjwvc2EtaWNvbj5cbiAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwic2EtY2FyZC1jdXN0b20tdGl0bGVcIj57e3Byb3BzWyd0aXRsZSddfX08L2Rpdj5cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNhLWNhcmQtdGl0bGVJY29uXCI+XG4gICAgICAgICAgICAgICAgPHNhLWNhcmQtdGl0bGUtYWN0aW9ucz5cbiAgICAgICAgICAgICAgICAgICAgPGRpdiBjbGFzcz1cInNhLWRvY3VtZW50LWFjdGlvblwiPlxuICAgICAgICAgICAgICAgICAgICAgICAgQGlmKHByb3BzWydkaXNhYmxlZCddKXtcbiAgICAgICAgICAgICAgICAgICAgICAgIDxzYS1pY29uIGljb249XCJkaXNhYmxlZENoZWNrYm94RmlsbGVkXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBjdXN0b21DbGFzcz1cImF1dG8tZGltZW5zaW9ucyBkaXNhYmxlZC1jaGVja2JveC1pY29uXCI+PC9zYS1pY29uPlxuICAgICAgICAgICAgICAgICAgICAgICAgfUBlbHNle1xuICAgICAgICAgICAgICAgICAgICAgICAgPG1hdC1jaGVja2JveCBjbGFzcz1cImNoZWNrYm94LXN0eWxlXCIgW2Zvcm1Db250cm9sXT1cImZvcm1Db250cm9sXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAoY2xpY2spPVwib25DaGVja2JveENsaWNrKCRldmVudClcIiBbZGlzYWJsZWRdPVwicHJvcHNbJ2Rpc2FibGVkJ11cIj48L21hdC1jaGVja2JveD5cbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgICAgPC9zYS1jYXJkLXRpdGxlLWFjdGlvbnM+XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9kaXY+XG4gICAgPC9zYS1jYXJkLXRpdGxlLWhlYWRlcj5cbiAgICA8c2EtY2FyZC1jdXN0b20tYm9keT5cbiAgICAgICAgQGlmKHByb3BzWydsaXN0SXRlbXMnXSl7XG4gICAgICAgIDxsaWItbGlzdCBbbGlzdERhdGFdPVwicHJvcHNbJ2xpc3RJdGVtcyddXCIgW2ZlYXR1cmVzSWNvbl09XCJwcm9wc1snbGlzdEljb24nXVwiPjwvbGliLWxpc3Q+XG4gICAgICAgIH1AZWxzZSBpZihwcm9wc1snc2hvd0J1dHRvbnMnXSl7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJidXR0b25zLWNvbnRhaW5lclwiPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgYnV0dG9uIG9mIHByb3BzWydzaG93QnV0dG9ucyddXCI+XG4gICAgICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImJ1dHRvbi50eXBlID09PSAnc3VibWl0J1wiPlxuICAgICAgICAgICAgICAgICAgICA8ZGl2IGNsYXNzPVwiYnV0dG9uLWNvbnRlbnRcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgIEBpZihwcm9wc1snZGVzY3JpcHRpb24nXSl7XG4gICAgICAgICAgICAgICAgICAgICAgICBAaWYocHJvcHNbJ2Rlc2NyaXB0aW9uSWNvbiddKXtcbiAgICAgICAgICAgICAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJkZXNjcmlwdGlvbi1jb250YWluZXJcIj5cbiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8c2EtaWNvbiBbaWNvbl09XCJwcm9wc1snZGVzY3JpcHRpb25JY29uJ11cIiBjdXN0b21DbGFzcz1cImF1dG8tZGltZW5zaW9ucyBkaXNhYmxlZC1pY29uXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgY2xhc3M9XCJkZXNjcmlwdGlvbi1pY29uXCI+PC9zYS1pY29uPlxuICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzPVwiZGVzY3JpcHRpb24tc3R5bGVcIj57e3Byb3BzWydkZXNjcmlwdGlvbiddfX08L3NwYW4+XG4gICAgICAgICAgICAgICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgICAgICAgICAgICAgIDxzYS1idXR0b24gKGNsaWNrKT1cImFjdGlvbkhhbmRsZXIoYnV0dG9uKVwiIFt0ZXh0XT1cImJ1dHRvbi5sYWJlbFwiIFt0eXBlXT1cImJ1dHRvbi5idXR0b25UeXBlXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBbc2l6ZV09XCJidXR0b24uc2l6ZVwiIFtzdGF0ZV09XCJidXR0b24uc3RhdGVcIiBbaWNvbl09XCJidXR0b24uaWNvblwiXG4gICAgICAgICAgICAgICAgICAgICAgICAgICAgW2ljb25Qb3NpdGlvbl09J2J1dHRvbi5pY29uUG9zaXRpb24nIGNsYXNzPVwiY2hlY2tib3gtY2FyZC1hY3Rpb24tYnV0dG9uXCJcbiAgICAgICAgICAgICAgICAgICAgICAgICAgICBbYnV0dG9uSWNvblNpemVdPVwiYnV0dG9uLmljb25TaXplXCI+PC9zYS1idXR0b24+XG4gICAgICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDwvbmctY29udGFpbmVyPlxuICAgICAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgPC9zYS1jYXJkLWN1c3RvbS1ib2R5PlxuPC9zYS1jYXJkPiJdfQ==
|
|
@@ -29,10 +29,10 @@ export class CheckboxComponent extends FieldType {
|
|
|
29
29
|
return isObservable(options) ? options : of(options || []);
|
|
30
30
|
}
|
|
31
31
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
32
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
32
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxComponent, isStandalone: true, selector: "sa-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"checkbox-container\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\n (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\n {{ option.label }}\n </mat-chip-option>\n </mat-chip-listbox>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n </div>", styles: [".checkbox-container{display:flex;flex-direction:column;gap:var(--medium-20px)}.mat-mdc-radio-button~.mat-mdc-radio-button{margin-left:var(--small-16px)}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__graphic{display:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child){padding-left:var(--small-12px)}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--primary-500);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--grey-100, #EAECF0);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__action--primary:before{border:none}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.2px}::ng-deep .checkbox-container mat-chip-option.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:before,::ng-deep .checkbox-container.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:before{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:0;background:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.mat-mdc-chip-option:hover{background-color:var(--structural-neutral1)}.title-container,.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
33
33
|
}
|
|
34
34
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
35
35
|
type: Component,
|
|
36
|
-
args: [{ selector: 'sa-checkbox', standalone: true, imports: [MatChipsModule, CommonModule, FormsModule], template: "<div class=\"checkbox-container\">\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n
|
|
36
|
+
args: [{ selector: 'sa-checkbox', standalone: true, imports: [MatChipsModule, CommonModule, FormsModule], template: "<div class=\"checkbox-container\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\n (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\n {{ option.label }}\n </mat-chip-option>\n </mat-chip-listbox>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n </div>", styles: [".checkbox-container{display:flex;flex-direction:column;gap:var(--medium-20px)}.mat-mdc-radio-button~.mat-mdc-radio-button{margin-left:var(--small-16px)}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__graphic{display:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child){padding-left:var(--small-12px)}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--primary-500);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--grey-100, #EAECF0);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__action--primary:before{border:none}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.2px}::ng-deep .checkbox-container mat-chip-option.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:before,::ng-deep .checkbox-container.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:before{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:0;background:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.mat-mdc-chip-option:hover{background-color:var(--structural-neutral1)}.title-container,.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"] }]
|
|
37
37
|
}] });
|
|
38
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
38
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hlY2tib3guY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29tcG9uZW50LWxpYnJhcnkvc3JjL2xpYi9jaGVja2JveC9jaGVja2JveC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL2NoZWNrYm94L2NoZWNrYm94LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLHlCQUF5QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUMvQyxPQUFPLEVBQWUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDMUQsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQzdDLE9BQU8sRUFBRSxZQUFZLEVBQUUsRUFBRSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQ3hDLE9BQU8sRUFBRSxRQUFRLElBQUksU0FBUyxFQUFFLE1BQU0sUUFBUSxDQUFBOzs7O0FBUzlDLE1BQU0sT0FBTyxpQkFBa0IsU0FBUSxTQUFTO0lBQzlDLGVBQWUsQ0FBQyxNQUFXO1FBQ3pCLE1BQU0sUUFBUSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsS0FBSyxJQUFJLEVBQUUsQ0FBQztRQUM5QyxNQUFNLEtBQUssR0FBRyxRQUFRLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUM3QyxJQUFJLEtBQUssS0FBSyxDQUFDLENBQUMsRUFBRSxDQUFDO1lBQ2pCLFFBQVEsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzlCLENBQUM7YUFBTSxDQUFDO1lBQ04sUUFBUSxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDNUIsQ0FBQztRQUNELElBQUksQ0FBQyxXQUFXLENBQUMsUUFBUSxDQUFDLENBQUMsR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDO0lBQzNDLENBQUM7SUFFRCxrQ0FBa0M7SUFDbEMsVUFBVSxDQUFDLE1BQVc7UUFDcEIsT0FBTyxTQUFTLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEtBQUssSUFBSSxFQUFFLENBQUMsRUFBRSxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDakUsQ0FBQztJQUVELElBQUksUUFBUTtRQUNWLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxLQUFLLEVBQUUsT0FBTyxDQUFDO1FBQ3BDLE9BQU8sWUFBWSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxPQUFPLElBQUksRUFBRSxDQUFDLENBQUM7SUFDN0QsQ0FBQzs4R0FwQlUsaUJBQWlCO2tHQUFqQixpQkFBaUIsOEZDZjlCLDgrQkF5QlUscTRFRGRFLGNBQWMsOGNBQUUsWUFBWSxnTkFBRSxXQUFXOzsyRkFJeEMsaUJBQWlCO2tCQVA3QixTQUFTOytCQUNFLGFBQWEsY0FDWCxJQUFJLFdBQ1AsQ0FBQyxjQUFjLEVBQUUsWUFBWSxFQUFFLFdBQVcsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTWF0Q2hpcHNNb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9jaGlwcyc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgRm9ybUNvbnRyb2wsIEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRmllbGRUeXBlIH0gZnJvbSAnQG5neC1mb3JtbHkvY29yZSc7XG5pbXBvcnQgeyBpc09ic2VydmFibGUsIG9mIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBpbmNsdWRlcyBhcyBfaW5jbHVkZXMgfSBmcm9tICdsb2Rhc2gnXG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NhLWNoZWNrYm94JyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW01hdENoaXBzTW9kdWxlLCBDb21tb25Nb2R1bGUsIEZvcm1zTW9kdWxlXSxcbiAgdGVtcGxhdGVVcmw6ICcuL2NoZWNrYm94LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL2NoZWNrYm94LmNvbXBvbmVudC5jc3MnXG59KVxuZXhwb3J0IGNsYXNzIENoZWNrYm94Q29tcG9uZW50IGV4dGVuZHMgRmllbGRUeXBlIHtcbiAgdG9nZ2xlU2VsZWN0aW9uKG9wdGlvbjogYW55KTogdm9pZCB7XG4gICAgY29uc3Qgc2VsZWN0ZWQgPSB0aGlzLmZvcm1Db250cm9sLnZhbHVlIHx8IFtdO1xuICAgIGNvbnN0IGluZGV4ID0gc2VsZWN0ZWQuaW5kZXhPZihvcHRpb24udmFsdWUpO1xuICAgIGlmIChpbmRleCA9PT0gLTEpIHtcbiAgICAgIHNlbGVjdGVkLnB1c2gob3B0aW9uLnZhbHVlKTtcbiAgICB9IGVsc2Uge1xuICAgICAgc2VsZWN0ZWQuc3BsaWNlKGluZGV4LCAxKTtcbiAgICB9XG4gICAgdGhpcy5mb3JtQ29udHJvbC5zZXRWYWx1ZShbLi4uc2VsZWN0ZWRdKTtcbiAgfVxuXG4gIC8vIENoZWNrcyBpZiBhbiBvcHRpb24gaXMgc2VsZWN0ZWRcbiAgaXNTZWxlY3RlZChvcHRpb246IGFueSk6IGJvb2xlYW4ge1xuICAgIHJldHVybiBfaW5jbHVkZXMoKHRoaXMuZm9ybUNvbnRyb2wudmFsdWUgfHwgW10pLCBvcHRpb24udmFsdWUpO1xuICB9XG5cbiAgZ2V0IG9wdGlvbnMkKCkge1xuICAgIGNvbnN0IG9wdGlvbnMgPSB0aGlzLnByb3BzPy5vcHRpb25zO1xuICAgIHJldHVybiBpc09ic2VydmFibGUob3B0aW9ucykgPyBvcHRpb25zIDogb2Yob3B0aW9ucyB8fCBbXSk7XG4gIH1cblxufVxuIiwiPGRpdiBjbGFzcz1cImNoZWNrYm94LWNvbnRhaW5lclwiPlxuICAgIDxkaXYgY2xhc3M9XCJ0aXRsZS1jb250YWluZXJcIj5cbiAgICAgICAgQGlmKHByb3BzWydsYWJlbCddKXtcbiAgICAgICAgPGRpdiBjbGFzcz1cImZvcm0tZmllbGQtdGl0bGVcIj5cbiAgICAgICAgICAgIDxzcGFuPnt7IHByb3BzWydsYWJlbCddIH19PC9zcGFuPlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgfVxuICAgICAgICBAaWYocHJvcHNbJ2Rlc2NyaXB0aW9uJ10pe1xuICAgICAgICA8ZGl2IGNsYXNzPVwiZm9ybS1maWVsZC1kZXNjcmlwdGlvblwiPlxuICAgICAgICAgICAgPHNwYW4+e3sgcHJvcHNbJ2Rlc2NyaXB0aW9uJ10gfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgPC9kaXY+XG4gICAgPGRpdiBjbGFzcz1cImZvcm0tZmllbGRcIj5cbiAgICAgICAgPG1hdC1jaGlwLWxpc3Rib3ggc2VsZWN0YWJsZSBtdWx0aXBsZSBbZGlzYWJsZWRdPVwicHJvcHMuZGlzYWJsZWRcIiBhcmlhLWxhYmVsPVwiU2VsZWN0IG9wdGlvbnNcIj5cbiAgICAgICAgICAgIDxtYXQtY2hpcC1vcHRpb24gKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zJCB8IGFzeW5jXCIgY2xhc3M9XCJjdXN0b20tY2hpcFwiIFt2YWx1ZV09XCJvcHRpb24udmFsdWVcIlxuICAgICAgICAgICAgICAgIChjbGljayk9XCJ0b2dnbGVTZWxlY3Rpb24ob3B0aW9uKVwiIFtzZWxlY3RlZF09XCJpc1NlbGVjdGVkKG9wdGlvbilcIj5cbiAgICAgICAgICAgICAgICB7eyBvcHRpb24ubGFiZWwgfX1cbiAgICAgICAgICAgIDwvbWF0LWNoaXAtb3B0aW9uPlxuICAgICAgICA8L21hdC1jaGlwLWxpc3Rib3g+XG4gICAgICAgIEBpZihwcm9wc1snaGVscFRleHQnXSl7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmb3JtLWZpZWxkLWhlbHBUZXh0XCI+XG4gICAgICAgICAgICA8c3Bhbj57eyBwcm9wc1snaGVscFRleHQnXSB9fTwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICA8L2Rpdj4iXX0=
|
|
@@ -6,11 +6,11 @@ export class PageLayoutComponent {
|
|
|
6
6
|
this.showFooterContent = false;
|
|
7
7
|
}
|
|
8
8
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: PageLayoutComponent, isStandalone: true, selector: "sa-page-layout", inputs: { showRightContent: "showRightContent", showFooterContent: "showFooterContent", showProgressBarContent: "showProgressBarContent" }, ngImport: i0, template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n <div class=\"layout-inner-container\"\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n @if (showProgressBarContent) {\n <div class=\"progress-bar-container\">\n <ng-content select=\"[progress-bar-content]\"></ng-content>\n </div>\n }\n <div class=\"content-container\">\n <div class=\"left-section\">\n <div class=\"top-section\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"left-wrapper\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n @if (showFooterContent) {\n <div class=\"footer-section\">\n <ng-content select=\"[footer-content]\"></ng-content>\n </div>\n }\n </div>\n @if (showRightContent) {\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n }\n </div>\n </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% -
|
|
9
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: PageLayoutComponent, isStandalone: true, selector: "sa-page-layout", inputs: { showRightContent: "showRightContent", showFooterContent: "showFooterContent", showProgressBarContent: "showProgressBarContent" }, ngImport: i0, template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n <div class=\"layout-inner-container\"\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n @if (showProgressBarContent) {\n <div class=\"progress-bar-container\">\n <ng-content select=\"[progress-bar-content]\"></ng-content>\n </div>\n }\n <div class=\"content-container\">\n <div class=\"left-section\">\n <div class=\"top-section\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"left-wrapper\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n @if (showFooterContent) {\n <div class=\"footer-section\">\n <ng-content select=\"[footer-content]\"></ng-content>\n </div>\n }\n </div>\n @if (showRightContent) {\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n }\n </div>\n </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% - 11.5rem);overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;padding:1rem 0}.footer-section{display:flex;margin-top:auto;margin-bottom:var(--large-40px)}\n"] }); }
|
|
10
10
|
}
|
|
11
11
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, decorators: [{
|
|
12
12
|
type: Component,
|
|
13
|
-
args: [{ selector: 'sa-page-layout', standalone: true, imports: [], template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n <div class=\"layout-inner-container\"\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n @if (showProgressBarContent) {\n <div class=\"progress-bar-container\">\n <ng-content select=\"[progress-bar-content]\"></ng-content>\n </div>\n }\n <div class=\"content-container\">\n <div class=\"left-section\">\n <div class=\"top-section\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"left-wrapper\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n @if (showFooterContent) {\n <div class=\"footer-section\">\n <ng-content select=\"[footer-content]\"></ng-content>\n </div>\n }\n </div>\n @if (showRightContent) {\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n }\n </div>\n </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% -
|
|
13
|
+
args: [{ selector: 'sa-page-layout', standalone: true, imports: [], template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n <div class=\"layout-inner-container\"\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n @if (showProgressBarContent) {\n <div class=\"progress-bar-container\">\n <ng-content select=\"[progress-bar-content]\"></ng-content>\n </div>\n }\n <div class=\"content-container\">\n <div class=\"left-section\">\n <div class=\"top-section\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"left-wrapper\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n @if (showFooterContent) {\n <div class=\"footer-section\">\n <ng-content select=\"[footer-content]\"></ng-content>\n </div>\n }\n </div>\n @if (showRightContent) {\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n }\n </div>\n </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% - 11.5rem);overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;padding:1rem 0}.footer-section{display:flex;margin-top:auto;margin-bottom:var(--large-40px)}\n"] }]
|
|
14
14
|
}], propDecorators: { showRightContent: [{
|
|
15
15
|
type: Input
|
|
16
16
|
}], showFooterContent: [{
|
|
@@ -20,10 +20,10 @@ export class RadioButtonComponent extends FieldType {
|
|
|
20
20
|
return super.formControl;
|
|
21
21
|
}
|
|
22
22
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
23
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
23
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: RadioButtonComponent, isStandalone: true, selector: "sa-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\">\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n {{ option.label }}\n </mat-radio-button>\n </div>\n </mat-radio-group>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n </div>\n</div>", styles: [".radio-group-container{display:flex;flex-direction:column;gap:20px}.radio-group-container .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group-container.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group-container .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group-container .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group-container .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group-container .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group-container .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group-container .radio-box{cursor:pointer}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio{padding:.5rem .625rem}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group-container .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}.title-container,.radio-group-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
24
24
|
}
|
|
25
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
26
26
|
type: Component,
|
|
27
|
-
args: [{ selector: 'sa-radio-button', standalone: true, imports: [MatRadioButton, MatRadioModule, CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"radio-group\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n
|
|
27
|
+
args: [{ selector: 'sa-radio-button', standalone: true, imports: [MatRadioButton, MatRadioModule, CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\">\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n {{ option.label }}\n </mat-radio-button>\n </div>\n </mat-radio-group>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n </div>\n</div>", styles: [".radio-group-container{display:flex;flex-direction:column;gap:20px}.radio-group-container .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group-container.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group-container .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group-container .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group-container .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group-container .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group-container .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group-container .radio-box{cursor:pointer}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio{padding:.5rem .625rem}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group-container .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}.title-container,.radio-group-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"] }]
|
|
28
28
|
}] });
|
|
29
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
29
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicmFkaW8tYnV0dG9uLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudC1saWJyYXJ5L3NyYy9saWIvcmFkaW8tYnV0dG9uL3JhZGlvLWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb21wb25lbnQtbGlicmFyeS9zcmMvbGliL3JhZGlvLWJ1dHRvbi9yYWRpby1idXR0b24uY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBK0IsTUFBTSxlQUFlLENBQUM7QUFDdkUsT0FBTyxFQUFFLGNBQWMsRUFBRSxjQUFjLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQUN6RSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFlLFdBQVcsRUFBRSxtQkFBbUIsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBQy9FLE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQztBQUM3QyxPQUFPLEVBQUUsWUFBWSxFQUFFLEVBQUUsRUFBRSxNQUFNLE1BQU0sQ0FBQzs7Ozs7QUFVeEMsTUFBTSxPQUFPLG9CQUFxQixTQUFRLFNBQVM7SUFFakQsUUFBUTtRQUNOLG9CQUFvQjtJQUN0QixDQUFDO0lBRUQsSUFBSSxRQUFRO1FBQ1YsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLEtBQUssRUFBRSxPQUFPLENBQUM7UUFDcEMsT0FBTyxZQUFZLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLE9BQU8sSUFBSSxFQUFFLENBQUMsQ0FBQztJQUM3RCxDQUFDO0lBRUQsSUFBYSxXQUFXO1FBQ3RCLE9BQU8sS0FBSyxDQUFDLFdBQTBCLENBQUM7SUFDMUMsQ0FBQzs4R0FiVSxvQkFBb0I7a0dBQXBCLG9CQUFvQixrR0NmakMsdWdDQTJCTSxxeEhEakJNLGNBQWMsK1JBQUUsY0FBYyxxUEFBRSxZQUFZLDhTQUFFLFdBQVcsc0lBQUUsbUJBQW1COzsyRkFLN0Usb0JBQW9CO2tCQVJoQyxTQUFTOytCQUNFLGlCQUFpQixjQUNmLElBQUksV0FDUCxDQUFDLGNBQWMsRUFBRSxjQUFjLEVBQUUsWUFBWSxFQUFFLFdBQVcsRUFBRSxtQkFBbUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgRXZlbnRFbWl0dGVyLCBJbnB1dCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBNYXRSYWRpb0J1dHRvbiwgTWF0UmFkaW9Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9tYXRlcmlhbC9yYWRpbyc7XG5pbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgRm9ybUNvbnRyb2wsIEZvcm1zTW9kdWxlLCBSZWFjdGl2ZUZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHsgRmllbGRUeXBlIH0gZnJvbSAnQG5neC1mb3JtbHkvY29yZSc7XG5pbXBvcnQgeyBpc09ic2VydmFibGUsIG9mIH0gZnJvbSAncnhqcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3NhLXJhZGlvLWJ1dHRvbicsXG4gIHN0YW5kYWxvbmU6IHRydWUsXG4gIGltcG9ydHM6IFtNYXRSYWRpb0J1dHRvbiwgTWF0UmFkaW9Nb2R1bGUsIENvbW1vbk1vZHVsZSwgRm9ybXNNb2R1bGUsIFJlYWN0aXZlRm9ybXNNb2R1bGVdLFxuICB0ZW1wbGF0ZVVybDogJy4vcmFkaW8tYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmw6ICcuL3JhZGlvLWJ1dHRvbi5jb21wb25lbnQuY3NzJ1xufSlcblxuZXhwb3J0IGNsYXNzIFJhZGlvQnV0dG9uQ29tcG9uZW50IGV4dGVuZHMgRmllbGRUeXBlIHtcblxuICBuZ09uSW5pdCgpIHtcbiAgICAvLyBjb25zb2xlLmxvZyh0aGlzKVxuICB9XG5cbiAgZ2V0IG9wdGlvbnMkKCkge1xuICAgIGNvbnN0IG9wdGlvbnMgPSB0aGlzLnByb3BzPy5vcHRpb25zO1xuICAgIHJldHVybiBpc09ic2VydmFibGUob3B0aW9ucykgPyBvcHRpb25zIDogb2Yob3B0aW9ucyB8fCBbXSk7XG4gIH1cblxuICBvdmVycmlkZSBnZXQgZm9ybUNvbnRyb2woKTogRm9ybUNvbnRyb2wge1xuICAgIHJldHVybiBzdXBlci5mb3JtQ29udHJvbCBhcyBGb3JtQ29udHJvbDtcbiAgfVxuXG59XG4iLCI8ZGl2IGNsYXNzPVwicmFkaW8tZ3JvdXAtY29udGFpbmVyXCIgW25nQ2xhc3NdPVwiW3Byb3BzWydjb2x1bW4nXSA/ICdjb2x1bW4nIDogJyddXCI+XG4gICAgPGRpdiBjbGFzcz1cInRpdGxlLWNvbnRhaW5lclwiPlxuICAgICAgICBAaWYocHJvcHNbJ2xhYmVsJ10pe1xuICAgICAgICA8ZGl2IGNsYXNzPVwiZm9ybS1maWVsZC10aXRsZVwiPlxuICAgICAgICAgICAgPHNwYW4+e3sgcHJvcHNbJ2xhYmVsJ10gfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgICAgIEBpZihwcm9wc1snZGVzY3JpcHRpb24nXSl7XG4gICAgICAgIDxkaXYgY2xhc3M9XCJmb3JtLWZpZWxkLWRlc2NyaXB0aW9uXCI+XG4gICAgICAgICAgICA8c3Bhbj57eyBwcm9wc1snZGVzY3JpcHRpb24nXSB9fTwvc3Bhbj5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIH1cbiAgICA8L2Rpdj5cbiAgICA8ZGl2IGNsYXNzPVwiZm9ybS1maWVsZFwiPlxuICAgICAgICA8bWF0LXJhZGlvLWdyb3VwIFtmb3JtQ29udHJvbF09XCJmb3JtQ29udHJvbFwiIG5hbWU9XCJyYWRpb0J1dHRvbnNcIj5cbiAgICAgICAgICAgIDxkaXYgKm5nRm9yPVwibGV0IG9wdGlvbiBvZiBvcHRpb25zJCB8IGFzeW5jXCIgY2xhc3M9XCJyYWRpby1ib3hcIj5cbiAgICAgICAgICAgICAgICA8bWF0LXJhZGlvLWJ1dHRvbiBbZGlzYWJsZVJpcHBsZV09XCJ0cnVlXCIgI3JhZGlvIFt2YWx1ZV09XCJvcHRpb24udmFsdWVcIj5cbiAgICAgICAgICAgICAgICAgICAge3sgb3B0aW9uLmxhYmVsIH19XG4gICAgICAgICAgICAgICAgPC9tYXQtcmFkaW8tYnV0dG9uPlxuICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvbWF0LXJhZGlvLWdyb3VwPlxuICAgICAgICBAaWYocHJvcHNbJ2hlbHBUZXh0J10pe1xuICAgICAgICA8ZGl2IGNsYXNzPVwiZm9ybS1maWVsZC1oZWxwVGV4dFwiPlxuICAgICAgICAgICAgPHNwYW4+e3sgcHJvcHNbJ2hlbHBUZXh0J10gfX08L3NwYW4+XG4gICAgICAgIDwvZGl2PlxuICAgICAgICB9XG4gICAgPC9kaXY+XG48L2Rpdj4iXX0=
|
|
@@ -671,11 +671,11 @@ class CheckboxCardComponent extends FieldType {
|
|
|
671
671
|
this.field.props['onButtonClick'](this.field);
|
|
672
672
|
}
|
|
673
673
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
674
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxCardComponent, isStandalone: true, selector: "sa-checkbox-card", usesInheritance: true, ngImport: i0, template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n [style.width]=\"props['width']\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <div class=\"sa-card-title-logo-container\">\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n </div>\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-card-title-actions>\n <div class=\"sa-document-action\">\n @if(props['disabled']){\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n }\n </div>\n </sa-card-title-actions>\n </div>\n </div>\n </sa-card-title-header>\n <sa-card-custom-body>\n @if(props['listItems']){\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n }@else if(props['showButtons']){\n <div class=\"buttons-container\">\n <ng-container *ngFor=\"let button of props['showButtons']\">\n <ng-container *ngIf=\"button.type === 'submit'\">\n <div class=\"button-content\">\n @if(props['description']){\n @if(props['descriptionIcon']){\n <div class=\"description-container\">\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n class=\"description-icon\"></sa-icon>\n <span class=\"description-style\">{{props['description']}}</span>\n </div>\n }\n }\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n [buttonIconSize]=\"button.iconSize\"></sa-button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n }\n </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::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)}.checkbox-card{display:block}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: ListComponent, selector: "lib-list", inputs: ["listData", "featuresIcon"] }, { kind: "component", type: CardBodyComponent, selector: "sa-card-custom-body" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.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: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] }); }
|
|
674
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxCardComponent, isStandalone: true, selector: "sa-checkbox-card", usesInheritance: true, ngImport: i0, template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n [style.width]=\"props['width']\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <div class=\"sa-card-title-logo-container\">\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n </div>\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-card-title-actions>\n <div class=\"sa-document-action\">\n @if(props['disabled']){\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n }\n </div>\n </sa-card-title-actions>\n </div>\n </div>\n </sa-card-title-header>\n <sa-card-custom-body>\n @if(props['listItems']){\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n }@else if(props['showButtons']){\n <div class=\"buttons-container\">\n <ng-container *ngFor=\"let button of props['showButtons']\">\n <ng-container *ngIf=\"button.type === 'submit'\">\n <div class=\"button-content\">\n @if(props['description']){\n @if(props['descriptionIcon']){\n <div class=\"description-container\">\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n class=\"description-icon\"></sa-icon>\n <span class=\"description-style\">{{props['description']}}</span>\n </div>\n }\n }\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n [buttonIconSize]=\"button.iconSize\"></sa-button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n }\n </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::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)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass"] }, { kind: "component", type: ListComponent, selector: "lib-list", inputs: ["listData", "featuresIcon"] }, { kind: "component", type: CardBodyComponent, selector: "sa-card-custom-body" }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i1$1.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: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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"] }] }); }
|
|
675
675
|
}
|
|
676
676
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, decorators: [{
|
|
677
677
|
type: Component,
|
|
678
|
-
args: [{ selector: 'sa-checkbox-card', standalone: true, imports: [CardComponent, IconComponent, ListComponent, CardBodyComponent, MatCheckboxModule, CommonModule, CardTitleActionsComponent, CardCustomHeaderComponent, FormsModule, ReactiveFormsModule, ButtonComponent], template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n [style.width]=\"props['width']\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <div class=\"sa-card-title-logo-container\">\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n </div>\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-card-title-actions>\n <div class=\"sa-document-action\">\n @if(props['disabled']){\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n }\n </div>\n </sa-card-title-actions>\n </div>\n </div>\n </sa-card-title-header>\n <sa-card-custom-body>\n @if(props['listItems']){\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n }@else if(props['showButtons']){\n <div class=\"buttons-container\">\n <ng-container *ngFor=\"let button of props['showButtons']\">\n <ng-container *ngIf=\"button.type === 'submit'\">\n <div class=\"button-content\">\n @if(props['description']){\n @if(props['descriptionIcon']){\n <div class=\"description-container\">\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n class=\"description-icon\"></sa-icon>\n <span class=\"description-style\">{{props['description']}}</span>\n </div>\n }\n }\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n [buttonIconSize]=\"button.iconSize\"></sa-button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n }\n </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::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)}.checkbox-card{display:block}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}\n"] }]
|
|
678
|
+
args: [{ selector: 'sa-checkbox-card', standalone: true, imports: [CardComponent, IconComponent, ListComponent, CardBodyComponent, MatCheckboxModule, CommonModule, CardTitleActionsComponent, CardCustomHeaderComponent, FormsModule, ReactiveFormsModule, ButtonComponent], template: "<sa-card [width]=\"props['width']\" [customWrapperClass]=\"props['customWrapperClass']\"\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\n [style.width]=\"props['width']\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <div class=\"sa-card-title-logo-container\">\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\n </div>\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-card-title-actions>\n <div class=\"sa-document-action\">\n @if(props['disabled']){\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\n }\n </div>\n </sa-card-title-actions>\n </div>\n </div>\n </sa-card-title-header>\n <sa-card-custom-body>\n @if(props['listItems']){\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\n }@else if(props['showButtons']){\n <div class=\"buttons-container\">\n <ng-container *ngFor=\"let button of props['showButtons']\">\n <ng-container *ngIf=\"button.type === 'submit'\">\n <div class=\"button-content\">\n @if(props['description']){\n @if(props['descriptionIcon']){\n <div class=\"description-container\">\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\n class=\"description-icon\"></sa-icon>\n <span class=\"description-style\">{{props['description']}}</span>\n </div>\n }\n }\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\n [buttonIconSize]=\"button.iconSize\"></sa-button>\n </div>\n </ng-container>\n </ng-container>\n </div>\n }\n </sa-card-custom-body>\n</sa-card>", styles: [".sa-card-title-logo-container{display:flex;gap:var(--small-8px);align-items:center}.sa-card-title-logo sa-icon{display:flex}::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)}.checkbox-card{display:block;height:100%}.buttons-container{display:flex;justify-content:center;align-items:center;height:100%}.button-wrapper{display:flex;flex-direction:column;align-items:center}.button-content{display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px)}.description-container{display:flex;align-items:center;gap:var(--small-12px)}.description-style{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.description-icon{display:flex}::ng-deep .sa-card{height:100%}\n"] }]
|
|
679
679
|
}] });
|
|
680
680
|
|
|
681
681
|
class GuideCardComponent {
|
|
@@ -798,11 +798,11 @@ class CheckboxComponent extends FieldType {
|
|
|
798
798
|
return isObservable(options) ? options : of(options || []);
|
|
799
799
|
}
|
|
800
800
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
801
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
801
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CheckboxComponent, isStandalone: true, selector: "sa-checkbox", usesInheritance: true, ngImport: i0, template: "<div class=\"checkbox-container\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\n (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\n {{ option.label }}\n </mat-chip-option>\n </mat-chip-listbox>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n </div>", styles: [".checkbox-container{display:flex;flex-direction:column;gap:var(--medium-20px)}.mat-mdc-radio-button~.mat-mdc-radio-button{margin-left:var(--small-16px)}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__graphic{display:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child){padding-left:var(--small-12px)}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--primary-500);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--grey-100, #EAECF0);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__action--primary:before{border:none}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.2px}::ng-deep .checkbox-container mat-chip-option.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:before,::ng-deep .checkbox-container.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:before{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:0;background:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.mat-mdc-chip-option:hover{background-color:var(--structural-neutral1)}.title-container,.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$2.MatChipOption, selector: "mat-basic-chip-option, [mat-basic-chip-option], mat-chip-option, [mat-chip-option]", inputs: ["selectable", "selected"], outputs: ["selectionChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
802
802
|
}
|
|
803
803
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
804
804
|
type: Component,
|
|
805
|
-
args: [{ selector: 'sa-checkbox', standalone: true, imports: [MatChipsModule, CommonModule, FormsModule], template: "<div class=\"checkbox-container\">\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n
|
|
805
|
+
args: [{ selector: 'sa-checkbox', standalone: true, imports: [MatChipsModule, CommonModule, FormsModule], template: "<div class=\"checkbox-container\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\n <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\n (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\n {{ option.label }}\n </mat-chip-option>\n </mat-chip-listbox>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n </div>", styles: [".checkbox-container{display:flex;flex-direction:column;gap:var(--medium-20px)}.mat-mdc-radio-button~.mat-mdc-radio-button{margin-left:var(--small-16px)}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__graphic{display:none}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__text-label:not(:only-child){padding-left:var(--small-12px)}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--primary-500);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled){border-radius:var(--large-64px, 64px);border:1.3px solid var(--grey-100, #EAECF0);background-color:var(--structural-white, #FFF);padding:.125rem .625rem}::ng-deep .checkbox-container .mat-mdc-standard-chip:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__action--primary:before{border:none}::ng-deep .checkbox-container mat-chip-option.mat-mdc-standard-chip.mdc-evolution-chip--selected:not(.mdc-evolution-chip--disabled) .mdc-evolution-chip__text-label{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.2px}::ng-deep .checkbox-container mat-chip-option.mat-mdc-chip:hover .mat-mdc-chip-focus-overlay{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational).mdc-ripple-upgraded--background-focused:before,::ng-deep .checkbox-container.mat-mdc-standard-chip .mdc-evolution-chip__action--primary:not(.mdc-evolution-chip__action--presentational):not(.mdc-ripple-upgraded):focus:before{background-color:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.cdk-focused .mat-mdc-chip-focus-overlay{opacity:0;background:var(--structural-white, #FFF)}::ng-deep .checkbox-container .mat-mdc-chip.mat-mdc-chip-option:hover{background-color:var(--structural-neutral1)}.title-container,.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"] }]
|
|
806
806
|
}] });
|
|
807
807
|
|
|
808
808
|
class TestLibraryComponent {
|
|
@@ -1484,11 +1484,11 @@ class PageLayoutComponent {
|
|
|
1484
1484
|
this.showFooterContent = false;
|
|
1485
1485
|
}
|
|
1486
1486
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1487
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: PageLayoutComponent, isStandalone: true, selector: "sa-page-layout", inputs: { showRightContent: "showRightContent", showFooterContent: "showFooterContent", showProgressBarContent: "showProgressBarContent" }, ngImport: i0, template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n <div class=\"layout-inner-container\"\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n @if (showProgressBarContent) {\n <div class=\"progress-bar-container\">\n <ng-content select=\"[progress-bar-content]\"></ng-content>\n </div>\n }\n <div class=\"content-container\">\n <div class=\"left-section\">\n <div class=\"top-section\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"left-wrapper\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n @if (showFooterContent) {\n <div class=\"footer-section\">\n <ng-content select=\"[footer-content]\"></ng-content>\n </div>\n }\n </div>\n @if (showRightContent) {\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n }\n </div>\n </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% -
|
|
1487
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: PageLayoutComponent, isStandalone: true, selector: "sa-page-layout", inputs: { showRightContent: "showRightContent", showFooterContent: "showFooterContent", showProgressBarContent: "showProgressBarContent" }, ngImport: i0, template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n <div class=\"layout-inner-container\"\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n @if (showProgressBarContent) {\n <div class=\"progress-bar-container\">\n <ng-content select=\"[progress-bar-content]\"></ng-content>\n </div>\n }\n <div class=\"content-container\">\n <div class=\"left-section\">\n <div class=\"top-section\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"left-wrapper\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n @if (showFooterContent) {\n <div class=\"footer-section\">\n <ng-content select=\"[footer-content]\"></ng-content>\n </div>\n }\n </div>\n @if (showRightContent) {\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n }\n </div>\n </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% - 11.5rem);overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;padding:1rem 0}.footer-section{display:flex;margin-top:auto;margin-bottom:var(--large-40px)}\n"] }); }
|
|
1488
1488
|
}
|
|
1489
1489
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, decorators: [{
|
|
1490
1490
|
type: Component,
|
|
1491
|
-
args: [{ selector: 'sa-page-layout', standalone: true, imports: [], template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n <div class=\"layout-inner-container\"\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n @if (showProgressBarContent) {\n <div class=\"progress-bar-container\">\n <ng-content select=\"[progress-bar-content]\"></ng-content>\n </div>\n }\n <div class=\"content-container\">\n <div class=\"left-section\">\n <div class=\"top-section\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"left-wrapper\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n @if (showFooterContent) {\n <div class=\"footer-section\">\n <ng-content select=\"[footer-content]\"></ng-content>\n </div>\n }\n </div>\n @if (showRightContent) {\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n }\n </div>\n </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% -
|
|
1491
|
+
args: [{ selector: 'sa-page-layout', standalone: true, imports: [], template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\n <div class=\"layout-inner-container\"\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\n @if (showProgressBarContent) {\n <div class=\"progress-bar-container\">\n <ng-content select=\"[progress-bar-content]\"></ng-content>\n </div>\n }\n <div class=\"content-container\">\n <div class=\"left-section\">\n <div class=\"top-section\">\n <ng-content select=\"[top-content]\"></ng-content>\n </div>\n <div class=\"left-wrapper\">\n <ng-content select=\"[left-content]\"></ng-content>\n </div>\n @if (showFooterContent) {\n <div class=\"footer-section\">\n <ng-content select=\"[footer-content]\"></ng-content>\n </div>\n }\n </div>\n @if (showRightContent) {\n <div class=\"right-section\">\n <ng-content select=\"[right-content]\"></ng-content>\n </div>\n }\n </div>\n </div>\n</div>", styles: [".layout-container{height:100%}.layout-container.padding{padding:var(--medium-20px)}.layout-inner-container{display:flex;flex-direction:column;position:relative;overflow:hidden;height:100%}.layout-inner-container.border-radius{border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white);box-shadow:3px 4px 16px 4px #00000014;border-radius:var(--small-16px, 16px)}.progress-bar-container{border-radius:var(--small-16px, 16px);position:absolute;top:0;width:100%}.content-container{display:flex;flex:1;height:100%;-ms-overflow-style:none;scrollbar-width:none}.content-container::-webkit-scrollbar,.left-section::-webkit-scrollbar{display:none}.left-section{flex:1;padding:var(--medium-20px) var(--medium-20px) 0 var(--large-44px);display:flex;flex-direction:column}.right-section{background:var(--structural-primarytint, #FBFAFF);display:flex;align-items:center;width:28.9375rem;max-width:28.9375rem}.left-wrapper{height:calc(100% - 11.5rem);overflow-y:auto;-ms-overflow-style:none;scrollbar-width:none;padding:1rem 0}.footer-section{display:flex;margin-top:auto;margin-bottom:var(--large-40px)}\n"] }]
|
|
1492
1492
|
}], propDecorators: { showRightContent: [{
|
|
1493
1493
|
type: Input
|
|
1494
1494
|
}], showFooterContent: [{
|
|
@@ -1533,11 +1533,11 @@ class RadioButtonComponent extends FieldType {
|
|
|
1533
1533
|
return super.formControl;
|
|
1534
1534
|
}
|
|
1535
1535
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1536
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
1536
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: RadioButtonComponent, isStandalone: true, selector: "sa-radio-button", usesInheritance: true, ngImport: i0, template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\">\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n {{ option.label }}\n </mat-radio-button>\n </div>\n </mat-radio-group>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n </div>\n</div>", styles: [".radio-group-container{display:flex;flex-direction:column;gap:20px}.radio-group-container .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group-container.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group-container .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group-container .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group-container .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group-container .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group-container .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group-container .radio-box{cursor:pointer}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio{padding:.5rem .625rem}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group-container .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}.title-container,.radio-group-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "ngmodule", type: MatRadioModule }, { kind: "directive", type: i1$6.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { 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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
1537
1537
|
}
|
|
1538
1538
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
1539
1539
|
type: Component,
|
|
1540
|
-
args: [{ selector: 'sa-radio-button', standalone: true, imports: [MatRadioButton, MatRadioModule, CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"radio-group\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n
|
|
1540
|
+
args: [{ selector: 'sa-radio-button', standalone: true, imports: [MatRadioButton, MatRadioModule, CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\n <div class=\"title-container\">\n @if(props['label']){\n <div class=\"form-field-title\">\n <span>{{ props['label'] }}</span>\n </div>\n }\n @if(props['description']){\n <div class=\"form-field-description\">\n <span>{{ props['description'] }}</span>\n </div>\n }\n </div>\n <div class=\"form-field\">\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\">\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n {{ option.label }}\n </mat-radio-button>\n </div>\n </mat-radio-group>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\n </div>\n</div>", styles: [".radio-group-container{display:flex;flex-direction:column;gap:20px}.radio-group-container .mat-mdc-radio-group{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.radio-group-container.column .mat-mdc-radio-group{flex-direction:column;align-items:flex-start}::ng-deep .radio-group-container .mdc-form-field.mat-internal-form-field{border-radius:var(--large-64px, 64px);border:1px solid var(--grey-100, #EAECF0);padding:0 1.75rem 0 .75rem;justify-content:center;display:flex}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(.mdc-ripple-upgraded):focus .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:not(:disabled):active .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle,::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-form-field.mat-internal-form-field{border-color:var(--primary-500)}::ng-deep .radio-group-container .mdc-radio__background{height:1rem;width:1rem;top:.125rem}::ng-deep .radio-group-container .mat-radio-outer-circle{height:.625rem;width:.625rem}::ng-deep .radio-group-container .mdc-radio__native-control:checked+.mdc-radio__background .mdc-radio__inner-circle{transform:scale(.4);top:-2px;left:-2px}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__background:before{background-color:#fff}::ng-deep .radio-group-container .radio-box:hover{border-radius:var(--large-64px);background:var(--structural-neutral1)}::ng-deep .radio-group-container .mdc-label{padding-left:0;cursor:pointer;color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:400;line-height:1.25rem;letter-spacing:.25px}::ng-deep .radio-group-container .radio-box{cursor:pointer}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio:hover .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-color:var(--icon-grey1, #757575)}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio{padding:.5rem .625rem}::ng-deep .radio-group-container .mat-mdc-radio-button .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle{border-width:1.5px}::ng-deep .radio-group-container .mat-mdc-radio-checked .mdc-label{color:var(--primary-500);font-family:var(--font);font-size:.875rem;font-style:normal;font-weight:600;letter-spacing:.15px}::ng-deep .radio-group-container .mdc-label{color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font);font-weight:400;line-height:1.25rem;letter-spacing:.25px}.title-container,.radio-group-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"] }]
|
|
1541
1541
|
}] });
|
|
1542
1542
|
|
|
1543
1543
|
class ScrollingCardsComponent {
|