@sarasanalytics-com/design-system 0.0.158 → 0.0.159
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/README.md +24 -24
- package/esm2022/interfaces/avatar-interface.mjs +1 -1
- package/esm2022/interfaces/button-interface.mjs +1 -1
- package/esm2022/interfaces/card-carousel-interface.mjs +1 -1
- package/esm2022/interfaces/chip-interface.mjs +1 -1
- package/esm2022/interfaces/form-layout.interface.mjs +1 -1
- package/esm2022/interfaces/grid-interface.mjs +1 -1
- package/esm2022/interfaces/guide-card-interface.mjs +1 -1
- package/esm2022/interfaces/header-interface.mjs +1 -1
- package/esm2022/interfaces/icon-interface.mjs +1 -1
- package/esm2022/interfaces/layout-section-interface.mjs +1 -1
- package/esm2022/interfaces/left-nav-interface.mjs +1 -1
- package/esm2022/interfaces/menu.interface.mjs +1 -1
- package/esm2022/interfaces/message-banner.mjs +1 -1
- package/esm2022/interfaces/option-interface.mjs +1 -1
- package/esm2022/interfaces/scrolling-card-interface.mjs +1 -1
- package/esm2022/interfaces/select-interface.mjs +1 -1
- package/esm2022/interfaces/status-dot.interface.mjs +1 -1
- package/esm2022/interfaces/tab-interface.mjs +1 -1
- package/esm2022/interfaces/toast-interface.mjs +1 -1
- package/esm2022/interfaces/typography-animation-interface.mjs +1 -1
- package/esm2022/lib/accordion/accordion.component.mjs +3 -3
- package/esm2022/lib/avatar/avatar.component.mjs +3 -3
- package/esm2022/lib/button/button.component.mjs +3 -3
- package/esm2022/lib/calendar-header/calendar-header.component.mjs +3 -3
- package/esm2022/lib/card/card-body/card-body.component.mjs +1 -1
- package/esm2022/lib/card/card-custom-header/card-custom-header.component.mjs +1 -1
- package/esm2022/lib/card/card-footer-actions/card-footer-actions.component.mjs +3 -3
- package/esm2022/lib/card/card-icon/card-icon.component.mjs +1 -1
- package/esm2022/lib/card/card-title-actions/card-title-actions.component.mjs +1 -1
- package/esm2022/lib/card/card.component.mjs +3 -3
- package/esm2022/lib/card/checkbox-card/checkbox-card.component.mjs +3 -3
- package/esm2022/lib/card/guide-card/guide-card.component.mjs +3 -3
- package/esm2022/lib/card/menu-card/menu-card.component.mjs +3 -3
- package/esm2022/lib/card/thumbnail-card/thumbnail-card.component.mjs +3 -3
- package/esm2022/lib/card-carousel/card-carousel.component.mjs +3 -3
- package/esm2022/lib/categories-nav/categories-nav.component.mjs +3 -3
- package/esm2022/lib/checkbox/checkbox.component.mjs +3 -3
- package/esm2022/lib/chips/chips.component.mjs +3 -3
- package/esm2022/lib/component-library.component.mjs +9 -9
- package/esm2022/lib/component-library.service.mjs +1 -1
- package/esm2022/lib/dashboard-loader/dashboard-loader.component.mjs +1 -1
- package/esm2022/lib/data-grid/data-grid.component.mjs +6 -8
- package/esm2022/lib/datepicker/datepicker.component.mjs +3 -3
- package/esm2022/lib/dialog/dialog.component.mjs +3 -3
- package/esm2022/lib/dropdown/category-dropdown/category-dropdown.component.mjs +3 -3
- package/esm2022/lib/dropdown/ng-select/ng-select.component.mjs +3 -3
- package/esm2022/lib/filter/filter.component.mjs +3 -3
- package/esm2022/lib/form-input/form-input.component.mjs +3 -3
- package/esm2022/lib/form-select/form-select.component.mjs +14 -3
- package/esm2022/lib/grid-cell/grid-cell.component.mjs +10 -10
- package/esm2022/lib/header/header.component.mjs +3 -3
- package/esm2022/lib/icon/icon.component.mjs +3 -3
- package/esm2022/lib/icon/icon.service.mjs +1 -1
- package/esm2022/lib/layout-section/layout-section.component.mjs +3 -3
- package/esm2022/lib/left-nav/left-nav.component.mjs +3 -3
- package/esm2022/lib/list/list.component.mjs +3 -3
- package/esm2022/lib/menu/menu-list/menu-item.component.mjs +3 -3
- package/esm2022/lib/menu/menu.component.mjs +3 -3
- package/esm2022/lib/menu/menu.directive.mjs +1 -1
- package/esm2022/lib/message-banner/message-banner.component.mjs +3 -3
- package/esm2022/lib/message-banner-v2/message-banner-v2.component.mjs +73 -33
- package/esm2022/lib/mini-card/mini-card.component.mjs +3 -3
- package/esm2022/lib/page-layout/page-layout.component.mjs +3 -3
- package/esm2022/lib/progress-bar/progress-bar.component.mjs +3 -3
- package/esm2022/lib/query-builder/query-builder-demo.component.mjs +45 -45
- package/esm2022/lib/query-builder/query-builder.component.mjs +3 -3
- package/esm2022/lib/query-builder/query-builder.service.mjs +1 -1
- package/esm2022/lib/query-builder-formly/query-builder-formly.component.mjs +3 -3
- package/esm2022/lib/query-builder-textarea/query-builder-textarea-demo.component.mjs +39 -39
- package/esm2022/lib/query-builder-textarea/query-builder-textarea.component.mjs +3 -3
- package/esm2022/lib/radio-button/radio-button.component.mjs +3 -3
- package/esm2022/lib/scrolling-cards/scrolling-cards.component.mjs +3 -3
- package/esm2022/lib/skeleton/skeleton-base.component.mjs +1 -1
- package/esm2022/lib/skeleton/skeleton-container.component.mjs +9 -9
- package/esm2022/lib/skeleton/skeleton-loader.component.mjs +193 -193
- package/esm2022/lib/skeleton/skeleton-presets.mjs +1 -1
- package/esm2022/lib/skeleton/skeleton-shapes.component.mjs +1 -1
- package/esm2022/lib/spinner/spinner.component.mjs +1 -1
- package/esm2022/lib/status-dot/status-dot.component.mjs +17 -17
- package/esm2022/lib/stepper/stepper.component.mjs +3 -3
- package/esm2022/lib/tabs/tabs.component.mjs +3 -3
- package/esm2022/lib/toast/toast.component.mjs +3 -3
- package/esm2022/lib/tool-tip/tool-tip.component.mjs +3 -3
- package/esm2022/lib/typography-animation/typography-animation.component.mjs +3 -3
- package/esm2022/utils/validators.mjs +1 -1
- package/fesm2022/sarasanalytics-com-design-system.mjs +487 -438
- package/fesm2022/sarasanalytics-com-design-system.mjs.map +1 -1
- package/lib/data-grid/data-grid.component.d.ts +2 -2
- package/lib/form-select/form-select.component.d.ts +1 -0
- package/lib/message-banner-v2/message-banner-v2.component.d.ts +3 -0
- package/package.json +1 -1
- package/styles/styles.css +432 -432
|
@@ -92,11 +92,11 @@ class ChipsComponent {
|
|
|
92
92
|
});
|
|
93
93
|
}
|
|
94
94
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
95
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChipsComponent, isStandalone: true, selector: "sa-chip", inputs: { id: "id", iconPath: "iconPath", text: "text", type: "type", state: "state", filling: "filling", iconPosition: "iconPosition", largeStateIcon: "largeStateIcon", largeStateText: "largeStateText", tooltip: "tooltip", className: "className" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip {{type}} {{state}} {{filling}} {{className}}\" [matTooltip]=\"tooltip\">\n <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\n <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n </label>\n\n {{text}}\n\n <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\n\n {{type == 'large' ? largeStateText : \"\"}}\n\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n </label>\n</div>\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.grid{--chip-height: 24px;--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: 4px;--font-family: var(--font-family, Roboto);--font-size: 11px;--font-weight: 500;--line-height: 16px;--letter-spacing: .5px}.grid-status{--chip-height: 24px;--chip-padding: var(--small-4px, 4px) var(--small-8px, 8px);--chip-gap: var(--small-4px, 4px);--border-radius: 16px;--font-family: var(--font-family, Roboto);--font-size: 12px;--font-weight: 500;--line-height: 16px;--letter-spacing: .5px}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;cursor:pointer}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}.grid-state{--light-color: var(--grey-100, #EAECF0);--dark-color: var(--Text-Medium-Emphasis, #6D6979)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
95
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ChipsComponent, isStandalone: true, selector: "sa-chip", inputs: { id: "id", iconPath: "iconPath", text: "text", type: "type", state: "state", filling: "filling", iconPosition: "iconPosition", largeStateIcon: "largeStateIcon", largeStateText: "largeStateText", tooltip: "tooltip", className: "className" }, outputs: { onClickEvent: "onClickEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"chip {{type}} {{state}} {{filling}} {{className}}\" [matTooltip]=\"tooltip\">\r\n <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\r\n <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\r\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\r\n </label>\r\n\r\n {{text}}\r\n\r\n <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\r\n\r\n {{type == 'large' ? largeStateText : \"\"}}\r\n\r\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\r\n </label>\r\n</div>\r\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.grid{--chip-height: 24px;--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: 4px;--font-family: var(--font-family, Roboto);--font-size: 11px;--font-weight: 500;--line-height: 16px;--letter-spacing: .5px}.grid-status{--chip-height: 24px;--chip-padding: var(--small-4px, 4px) var(--small-8px, 8px);--chip-gap: var(--small-4px, 4px);--border-radius: 16px;--font-family: var(--font-family, Roboto);--font-size: 12px;--font-weight: 500;--line-height: 16px;--letter-spacing: .5px}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;cursor:pointer}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}.grid-state{--light-color: var(--grey-100, #EAECF0);--dark-color: var(--Text-Medium-Emphasis, #6D6979)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
96
96
|
}
|
|
97
97
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ChipsComponent, decorators: [{
|
|
98
98
|
type: Component,
|
|
99
|
-
args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule, MatTooltipModule], template: "<div class=\"chip {{type}} {{state}} {{filling}} {{className}}\" [matTooltip]=\"tooltip\">\n <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\n <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n </label>\n\n {{text}}\n\n <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\n\n {{type == 'large' ? largeStateText : \"\"}}\n\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\n </label>\n</div>\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.grid{--chip-height: 24px;--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: 4px;--font-family: var(--font-family, Roboto);--font-size: 11px;--font-weight: 500;--line-height: 16px;--letter-spacing: .5px}.grid-status{--chip-height: 24px;--chip-padding: var(--small-4px, 4px) var(--small-8px, 8px);--chip-gap: var(--small-4px, 4px);--border-radius: 16px;--font-family: var(--font-family, Roboto);--font-size: 12px;--font-weight: 500;--line-height: 16px;--letter-spacing: .5px}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;cursor:pointer}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}.grid-state{--light-color: var(--grey-100, #EAECF0);--dark-color: var(--Text-Medium-Emphasis, #6D6979)}\n"] }]
|
|
99
|
+
args: [{ selector: 'sa-chip', standalone: true, imports: [CommonModule, MatTooltipModule], template: "<div class=\"chip {{type}} {{state}} {{filling}} {{className}}\" [matTooltip]=\"tooltip\">\r\n <button type=\"button\" (click)=\"buttonClicked($event)\" id=\"icon-button_{{uuid}}\" class=\"btn_hide\"></button>\r\n <!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\r\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"((iconPosition == 'left' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\r\n </label>\r\n\r\n {{text}}\r\n\r\n <div class=\"second-svg-icon\" [style]=\"secondSvgStyle\" [style.display]=\"(type == 'large') ? 'block' : 'none'\"></div>\r\n\r\n {{type == 'large' ? largeStateText : \"\"}}\r\n\r\n <label for=\"icon-button_{{uuid}}\" class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"((iconPosition == 'right' || iconPosition == 'both') && type != 'large') ? 'block' : 'none'\">\r\n </label>\r\n</div>\r\n", styles: [".regular{--chip-height: var(--medium-24px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-16px);--font-weight: 500;--line-height: 16px;--font-size: 12px }.small{--chip-height: var(--small-18px);--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: var(--small-4px);--font-weight: 500;--line-height: 16px;--font-size: 11px }.large{--chip-height: 40px;--chip-padding: var(--small-12px) var(--medium-24px) var(--small-12px) var(--small-16px);--chip-gap: var(--small-8px);--border-radius: var(--small-16px) 0px;--font-weight: 600;--line-height: 20px;--font-size: 14px;background-color:var(--light-color)!important;color:var(--dark-color)!important;border:1px solid transparent!important}.grid{--chip-height: 24px;--chip-padding: var(--small-4px) var(--small-8px);--chip-gap: var(--small-4px);--border-radius: 4px;--font-family: var(--font-family, Roboto);--font-size: 11px;--font-weight: 500;--line-height: 16px;--letter-spacing: .5px}.grid-status{--chip-height: 24px;--chip-padding: var(--small-4px, 4px) var(--small-8px, 8px);--chip-gap: var(--small-4px, 4px);--border-radius: 16px;--font-family: var(--font-family, Roboto);--font-size: 12px;--font-weight: 500;--line-height: 16px;--letter-spacing: .5px}.primary{--light-color: var(--primary-50);--dark-color: var(--primary-500)}.secondary{--light-color: var(--secondary-50);--dark-color: var(--secondary-500)}.neutral{--light-color: var(--grey-50);--dark-color: var(--text-mediumemphasis)}.success{--light-color: var(--semantic-success-50);--dark-color: var(--semantic-success-500)}.error{--light-color: var(--semantic-error-50);--dark-color: var(--semantic-error-500)}.warning{--light-color: var(--semantic-yellow-50);--dark-color: var(--semantic-yellow-500)}.filled{--background-color: var(--light-color);--color: var(--dark-color);--border: 1px solid transparent}.outline{--background-color: none;--color: var(--dark-color);--border: 1px solid var(--dark-color)}.chip{display:flex;width:max-content;height:var(--chip-height);padding:var(--chip-padding);justify-content:center;align-items:center;gap:var(--chip-gap);flex-shrink:0;letter-spacing:.5px;box-sizing:border-box;font-family:var(--font);font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);background-color:var(--background-color);color:var(--color);border-radius:var(--border-radius);border:var(--border);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;cursor:pointer}.svg-icon{width:16px;height:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.svg-icon:hover{cursor:pointer}.second-svg-icon{width:18px;height:18px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--dark-color);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.btn_hide{display:none}.grid-state{--light-color: var(--grey-100, #EAECF0);--dark-color: var(--Text-Medium-Emphasis, #6D6979)}\n"] }]
|
|
100
100
|
}], propDecorators: { id: [{
|
|
101
101
|
type: Input
|
|
102
102
|
}], iconPath: [{
|
|
@@ -211,11 +211,11 @@ class IconComponent {
|
|
|
211
211
|
}
|
|
212
212
|
}
|
|
213
213
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
214
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl", customClass: "customClass", href: "href", hrefTarget: "hrefTarget", iconPosition: "iconPosition" }, outputs: { onClickEvent: "onClickEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n 'url-icon': iconUrl\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
214
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: IconComponent, isStandalone: true, selector: "sa-icon", inputs: { img: "img", icon: "icon", size: "size", color: "color", iconPath: "iconPath", iconUrl: "iconUrl", customClass: "customClass", href: "href", hrefTarget: "hrefTarget", iconPosition: "iconPosition" }, outputs: { onClickEvent: "onClickEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if(img){\r\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\r\n}@else{\r\n<span class=\"sa-icon\" [ngClass]=\"{\r\n 'url-icon': iconUrl\r\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\r\n\r\n</span>\r\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
215
215
|
}
|
|
216
216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: IconComponent, decorators: [{
|
|
217
217
|
type: Component,
|
|
218
|
-
args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "@if(img){\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\n}@else{\n<span class=\"sa-icon\" [ngClass]=\"{\n 'url-icon': iconUrl\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\n\n</span>\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"] }]
|
|
218
|
+
args: [{ selector: 'sa-icon', standalone: true, imports: [CommonModule], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "@if(img){\r\n<img [src]=\"img\" [height]=\"size\" [width]=\"size\" (click)=\"iconClicked($event)\">\r\n}@else{\r\n<span class=\"sa-icon\" [ngClass]=\"{\r\n 'url-icon': iconUrl\r\n }\" [ngClass]=\"customClass ? [customClass] : []\" [innerHTML]=\"svgIcon\" [ngStyle]=\"iconStyles\" (click)=\"iconClicked($event)\">\r\n\r\n</span>\r\n}", styles: [".sa-icon{display:inline-flex;align-items:center;justify-content:center;color:inherit;font-size:inherit}.sa-icon>svg{width:1em;height:1em;vertical-align:middle}.sa-icon.auto-dimensions>svg{width:fit-content;height:fit-content}.colored-icon{color:var(--primary-500)}.disabled-icon{color:var(--icon-grey1)}.disabled-checkbox-icon{color:var(--grey-200)}.info-icon{color:var(--icon-grey1);cursor:pointer}.sa-card-checkbox-wrapper .sa-card-title-logo .sa-icon{display:flex;width:var(--medium-28px, 28px);padding:var(--small-4px, 4px);align-items:center;border-radius:var(--small-4px, 4px);background:var(--primary-50, #F4EBFF)}.sa-card-checkbox-wrapper .sa-card-title-logo.disabled-card .sa-icon{background:var(--grey-50, #F2F4F7)}.checkbox-card-action-button .sa-icon>svg{height:1.3rem;width:1.05rem}.sa-icon.info-icon>svg{width:var(--medium-20px, 20px);height:var(--medium-20px, 20px)}\n"] }]
|
|
219
219
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { img: [{
|
|
220
220
|
type: Input,
|
|
221
221
|
args: ['img']
|
|
@@ -276,11 +276,11 @@ class AvatarComponent {
|
|
|
276
276
|
});
|
|
277
277
|
}
|
|
278
278
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
279
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n (mouseleave)=\"mouseLeave($event)\">\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n <span *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</span>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none;margin-bottom:0}.avatar:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
279
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: AvatarComponent, isStandalone: true, selector: "sa-avatar", inputs: { id: "id", imagePath: "imagePath", altText: "altText", size: "size" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\r\n (mouseleave)=\"mouseLeave($event)\">\r\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\r\n <span *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</span>\r\n</div>\r\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none;margin-bottom:0}.avatar:hover{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
280
280
|
}
|
|
281
281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AvatarComponent, decorators: [{
|
|
282
282
|
type: Component,
|
|
283
|
-
args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\n (mouseleave)=\"mouseLeave($event)\">\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\n <span *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</span>\n</div>\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none;margin-bottom:0}.avatar:hover{cursor:pointer}\n"] }]
|
|
283
|
+
args: [{ selector: 'sa-avatar', standalone: true, imports: [NgIf], template: "<div class=\"avatar {{size}}\" (click)=\"avatarClicked($event)\" (mouseenter)=\"mouseEnter($event)\"\r\n (mouseleave)=\"mouseLeave($event)\">\r\n <img *ngIf=\"imagePath\" class=\"avatar-img\" alt=\"{{altText}}\" src=\"{{imagePath}}\">\r\n <span *ngIf=\"!imagePath\" class=\"avatar-img\">{{altText}}</span>\r\n</div>\r\n", styles: [".extra-small{--width: var(--medium-24px);--height: var(--medium-24px)}.small{--width: 28px;--height: 28px}.medium{--width: 32px;--height: 32px}.large{--width: 36px;--height: 36px}.extra-large{--width: 52px;--height: 52px}.avatar{display:flex}.avatar-img{background-color:var(--primary-50);height:var(--height);width:var(--width);border-radius:var(--height);object-fit:cover;font-family:var(--font);font-size:11px;font-weight:500;line-height:var(--height);letter-spacing:.5px;text-align:center;overflow:none;margin-bottom:0}.avatar:hover{cursor:pointer}\n"] }]
|
|
284
284
|
}], propDecorators: { id: [{
|
|
285
285
|
type: Input
|
|
286
286
|
}], imagePath: [{
|
|
@@ -331,11 +331,11 @@ class CardComponent {
|
|
|
331
331
|
}
|
|
332
332
|
}
|
|
333
333
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", showCardHeader: "showCardHeader", showCardBody: "showCardBody", showHeaderBodyDivider: "showHeaderBodyDivider", showCustomCardBody: "showCustomCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", image: "image", imageWidth: "imageWidth", avatarSize: "avatarSize", href: "href", hrefTarget: "hrefTarget", icon: "icon", iconSize: "iconSize", subtitle: "subtitle", logoIcon: "logoIcon", width: "width", height: "height", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\n @if(avatar){\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\n <!-- <img [src]=\"avatar\" /> -->\n }@else if(image){\n <img [src]=\"image\" [width]=\"imageWidth\" />\n }@else if(icon){\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\n }@else{\n <ng-content select=\"sa-card-icon\"></ng-content>\n }\n @if(column){\n <ng-content select=\"sa-card-title-actions\"></ng-content>\n }\n </div>\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\n @if(showCardHeader){\n <ng-content select=\"sa-card-title-header\"></ng-content>\n @if (showHeaderBodyDivider && body) {\n <div class=\"custom-divider\"></div>\n }\n }\n @else if(title){\n <div class=\"sa-card-title-container\">\n <div class=\"sa-card-title\">{{title}}</div>\n @if(chip){\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\n }\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\n </div>\n }\n @if (showCustomCardBody) {\n <ng-content select=\"sa-card-custom-body\"></ng-content>\n }\n @if(showCardBody && body){\n <div class=\"sa-card-body\">\n {{body}}\n </div>\n }\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\n </div>\n </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:100%;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px);position:relative}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--small-12px, 12px)}.sa-card-custom-wrapper .sa-card-custom-container,.sa-card-accordion-wrapper .sa-card-custom-container,.sa-card-checkbox-wrapper .sa-card-custom-container,.menuCardSourceContainer .sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);flex-direction:column;align-items:flex-start;gap:0}.sa-card-accordion-wrapper{display:flex;padding:var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);height:3.25rem;align-items:center;gap:var(--small-12px);cursor:pointer}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}::ng-deep .sa-document-action{color:var(--text-lowemphasis, #989DA3)}::ng-deep .right_icon{background:url(/assets/rightarrow.svg) no-repeat;background-size:24px;height:24px;width:24px;display:block;position:absolute;top:12px;right:12px}::ng-deep .sa-card-header-container .primary.iqchip{color:#00a97f}::ng-deep .sa-card-header-container .outline.iqchip{border:1px solid #00A97F}::ng-deep .sa-card-title{font-size:16px;font-weight:600;line-height:24px;position:relative}::ng-deep .sa-card-header-container{display:flex;gap:var(--small-12px, 12px);align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
334
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardComponent, isStandalone: true, selector: "sa-card", inputs: { title: "title", showCardHeader: "showCardHeader", showCardBody: "showCardBody", showHeaderBodyDivider: "showHeaderBodyDivider", showCustomCardBody: "showCustomCardBody", customWrapperClass: "customWrapperClass", chip: "chip", body: "body", avatar: "avatar", image: "image", imageWidth: "imageWidth", avatarSize: "avatarSize", href: "href", hrefTarget: "hrefTarget", icon: "icon", iconSize: "iconSize", subtitle: "subtitle", logoIcon: "logoIcon", width: "width", height: "height", column: "column" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n @if(avatar){\r\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n <!-- <img [src]=\"avatar\" /> -->\r\n }@else if(image){\r\n <img [src]=\"image\" [width]=\"imageWidth\" />\r\n }@else if(icon){\r\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n }@else{\r\n <ng-content select=\"sa-card-icon\"></ng-content>\r\n }\r\n @if(column){\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n }\r\n </div>\r\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n @if(showCardHeader){\r\n <ng-content select=\"sa-card-title-header\"></ng-content>\r\n @if (showHeaderBodyDivider && body) {\r\n <div class=\"custom-divider\"></div>\r\n }\r\n }\r\n @else if(title){\r\n <div class=\"sa-card-title-container\">\r\n <div class=\"sa-card-title\">{{title}}</div>\r\n @if(chip){\r\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n }\r\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n </div>\r\n }\r\n @if (showCustomCardBody) {\r\n <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n }\r\n @if(showCardBody && body){\r\n <div class=\"sa-card-body\">\r\n {{body}}\r\n </div>\r\n }\r\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:100%;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px);position:relative}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--small-12px, 12px)}.sa-card-custom-wrapper .sa-card-custom-container,.sa-card-accordion-wrapper .sa-card-custom-container,.sa-card-checkbox-wrapper .sa-card-custom-container,.menuCardSourceContainer .sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);flex-direction:column;align-items:flex-start;gap:0}.sa-card-accordion-wrapper{display:flex;padding:var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);height:3.25rem;align-items:center;gap:var(--small-12px);cursor:pointer}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}::ng-deep .sa-document-action{color:var(--text-lowemphasis, #989DA3)}::ng-deep .right_icon{background:url(/assets/rightarrow.svg) no-repeat;background-size:24px;height:24px;width:24px;display:block;position:absolute;top:12px;right:12px}::ng-deep .sa-card-header-container .primary.iqchip{color:#00a97f}::ng-deep .sa-card-header-container .outline.iqchip{border:1px solid #00A97F}::ng-deep .sa-card-title{font-size:16px;font-weight:600;line-height:24px;position:relative}::ng-deep .sa-card-header-container{display:flex;gap:var(--small-12px, 12px);align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
335
335
|
}
|
|
336
336
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardComponent, decorators: [{
|
|
337
337
|
type: Component,
|
|
338
|
-
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\n @if(avatar){\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\n <!-- <img [src]=\"avatar\" /> -->\n }@else if(image){\n <img [src]=\"image\" [width]=\"imageWidth\" />\n }@else if(icon){\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\n }@else{\n <ng-content select=\"sa-card-icon\"></ng-content>\n }\n @if(column){\n <ng-content select=\"sa-card-title-actions\"></ng-content>\n }\n </div>\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\n @if(showCardHeader){\n <ng-content select=\"sa-card-title-header\"></ng-content>\n @if (showHeaderBodyDivider && body) {\n <div class=\"custom-divider\"></div>\n }\n }\n @else if(title){\n <div class=\"sa-card-title-container\">\n <div class=\"sa-card-title\">{{title}}</div>\n @if(chip){\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\n }\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\n </div>\n }\n @if (showCustomCardBody) {\n <ng-content select=\"sa-card-custom-body\"></ng-content>\n }\n @if(showCardBody && body){\n <div class=\"sa-card-body\">\n {{body}}\n </div>\n }\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\n </div>\n </div>\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:100%;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px);position:relative}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--small-12px, 12px)}.sa-card-custom-wrapper .sa-card-custom-container,.sa-card-accordion-wrapper .sa-card-custom-container,.sa-card-checkbox-wrapper .sa-card-custom-container,.menuCardSourceContainer .sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);flex-direction:column;align-items:flex-start;gap:0}.sa-card-accordion-wrapper{display:flex;padding:var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);height:3.25rem;align-items:center;gap:var(--small-12px);cursor:pointer}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}::ng-deep .sa-document-action{color:var(--text-lowemphasis, #989DA3)}::ng-deep .right_icon{background:url(/assets/rightarrow.svg) no-repeat;background-size:24px;height:24px;width:24px;display:block;position:absolute;top:12px;right:12px}::ng-deep .sa-card-header-container .primary.iqchip{color:#00a97f}::ng-deep .sa-card-header-container .outline.iqchip{border:1px solid #00A97F}::ng-deep .sa-card-title{font-size:16px;font-weight:600;line-height:24px;position:relative}::ng-deep .sa-card-header-container{display:flex;gap:var(--small-12px, 12px);align-items:center}\n"] }]
|
|
338
|
+
args: [{ selector: 'sa-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent, AvatarComponent], template: "<div class=\"sa-card\" [ngStyle]=\"cardStyles\" (click)=\"cardClicked($event)\">\r\n <div class=\"sa-card-wrapper\" [ngClass]=\"[column ? 'column' : '', customWrapperClass]\">\r\n <div class=\"\" [ngClass]=\"avatar || image ? 'sa-card-img' : 'sa-card-icon'\">\r\n @if(avatar){\r\n <sa-avatar [imagePath]=\"avatar\" [size]=\"avatarSize\"></sa-avatar>\r\n <!-- <img [src]=\"avatar\" /> -->\r\n }@else if(image){\r\n <img [src]=\"image\" [width]=\"imageWidth\" />\r\n }@else if(icon){\r\n <sa-icon [icon]=\"icon\" [size]=\"iconSize\"></sa-icon>\r\n }@else{\r\n <ng-content select=\"sa-card-icon\"></ng-content>\r\n }\r\n @if(column){\r\n <ng-content select=\"sa-card-title-actions\"></ng-content>\r\n }\r\n </div>\r\n <div class=\"sa-card-container\" [ngClass]=\"showCardHeader ? 'sa-card-custom-container' : ''\">\r\n @if(showCardHeader){\r\n <ng-content select=\"sa-card-title-header\"></ng-content>\r\n @if (showHeaderBodyDivider && body) {\r\n <div class=\"custom-divider\"></div>\r\n }\r\n }\r\n @else if(title){\r\n <div class=\"sa-card-title-container\">\r\n <div class=\"sa-card-title\">{{title}}</div>\r\n @if(chip){\r\n <sa-chip [text]=\"chip.text\" [type]=\"chip.type\" [state]=\"chip.state\" [filling]=\"chip.filling\"></sa-chip>\r\n }\r\n <ng-content select=\"[sa-card-title-actions]\"></ng-content>\r\n </div>\r\n }\r\n @if (showCustomCardBody) {\r\n <ng-content select=\"sa-card-custom-body\"></ng-content>\r\n }\r\n @if(showCardBody && body){\r\n <div class=\"sa-card-body\">\r\n {{body}}\r\n </div>\r\n }\r\n <ng-content select=\"sa-card-footer-actions\"></ng-content>\r\n </div>\r\n </div>\r\n</div>", styles: ["*{font-family:var(--font)}.sa-card-wrapper{display:flex;border:1px solid var(--grey-50);border-radius:6px;height:100%;min-height:max-content;padding:12px;background:var(--structural-white);gap:var(--small-12px);position:relative}.sa-card-wrapper.column{flex-direction:column}.sa-card-wrapper.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px)}.sa-card-wrapper.sa-card-custom-wrapper{gap:0}.column .sa-card-img,.column .sa-card-icon{display:flex;justify-content:space-between}.sa-card-img img{height:auto}.sa-card-icon span{background-repeat:no-repeat;background-size:cover;background-position:center;display:block;height:24px;width:24px}.sa-card-container{display:flex;flex-direction:column;justify-content:space-between;width:-webkit-fill-available;gap:.188rem}.sa-card-title-container{display:flex;justify-content:space-between}.column .sa-card-title-container{flex-direction:column;margin-bottom:8px}.sa-card-title{font-size:16px;font-weight:600;line-height:24px;margin-bottom:4px}.sa-card-body{font-size:14px;font-weight:400;line-height:20px;letter-spacing:.25px;text-align:left;color:var(--grey-300);flex:1}.sa-card-container .custom-divider{width:100%;height:.063rem;background-color:#ccc}.sa-card-custom-container{gap:var(--small-12px, 12px)}.sa-card-custom-wrapper .sa-card-custom-container,.sa-card-accordion-wrapper .sa-card-custom-container,.sa-card-checkbox-wrapper .sa-card-custom-container,.menuCardSourceContainer .sa-card-custom-container{gap:var(--medium-20px, 20px)}.sa-card-custom-wrapper{padding:1.25rem;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-secondary-wrapper .sa-card-icon{margin:0}.sa-card-secondary-wrapper{gap:var(--medium-20px, 20px);padding:var(--medium-20px, 20px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:#fff}.sa-card-checkbox-wrapper{cursor:pointer;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);display:flex;padding:var(--medium-20px);flex-direction:column;align-items:flex-start;gap:0}.sa-card-accordion-wrapper{display:flex;padding:var(--small-6px) var(--small-16px) var(--small-6px) var(--small-6px);height:3.25rem;align-items:center;gap:var(--small-12px);cursor:pointer}::ng-deep .card-selected .sa-card-checkbox-wrapper{border:1px solid var(--primary-500)}::ng-deep .sa-document-action{color:var(--text-lowemphasis, #989DA3)}::ng-deep .right_icon{background:url(/assets/rightarrow.svg) no-repeat;background-size:24px;height:24px;width:24px;display:block;position:absolute;top:12px;right:12px}::ng-deep .sa-card-header-container .primary.iqchip{color:#00a97f}::ng-deep .sa-card-header-container .outline.iqchip{border:1px solid #00A97F}::ng-deep .sa-card-title{font-size:16px;font-weight:600;line-height:24px;position:relative}::ng-deep .sa-card-header-container{display:flex;gap:var(--small-12px, 12px);align-items:center}\n"] }]
|
|
339
339
|
}], propDecorators: { title: [{
|
|
340
340
|
type: Input,
|
|
341
341
|
args: ['title']
|
|
@@ -468,11 +468,11 @@ class ButtonComponent {
|
|
|
468
468
|
this.onMouseOutEvent.emit();
|
|
469
469
|
}
|
|
470
470
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
471
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n class=\"sa-button {{state}} {{type}} {{size}}\">\n @if(showSpinner){\n <sa-spinner [default]=\"true\"></sa-spinner>\n }\n @if(ImagePath) {\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n {{text}}\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n } @else if (icon) {\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n {{text}}\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n } @else {\n {{text}}\n }\n</label>\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "sa-spinner", inputs: ["default", "size"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }] }); }
|
|
471
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ButtonComponent, isStandalone: true, selector: "sa-button", inputs: { id: "id", type: "type", state: "state", size: "size", text: "text", ImagePath: "ImagePath", icon: "icon", iconPosition: "iconPosition", href: "href", hrefTarget: "hrefTarget", width: "width", isSubmit: "isSubmit", buttonIconSize: "buttonIconSize", showSpinner: "showSpinner" }, outputs: { onClickEvent: "onClickEvent", onMouseInEvent: "onMouseInEvent", onMouseOutEvent: "onMouseOutEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\r\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\r\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\r\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\r\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\r\n class=\"sa-button {{state}} {{type}} {{size}}\">\r\n @if(showSpinner){\r\n <sa-spinner [default]=\"true\"></sa-spinner>\r\n }\r\n @if(ImagePath) {\r\n <div class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\r\n {{text}}\r\n <div class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\r\n } @else if (icon) {\r\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\r\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\r\n {{text}}\r\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\r\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\r\n } @else {\r\n {{text}}\r\n }\r\n</label>\r\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SpinnerComponent, selector: "sa-spinner", inputs: ["default", "size"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }] }); }
|
|
472
472
|
}
|
|
473
473
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
474
474
|
type: Component,
|
|
475
|
-
args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle, SpinnerComponent, HttpClientModule, IconComponent], providers: [IconService], template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\n class=\"sa-button {{state}} {{type}} {{size}}\">\n @if(showSpinner){\n <sa-spinner [default]=\"true\"></sa-spinner>\n }\n @if(ImagePath) {\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n {{text}}\n <div class=\"svg-icon\" [style]=\"svgStyle\"\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\n } @else if (icon) {\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n {{text}}\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\n } @else {\n {{text}}\n }\n</label>\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"] }]
|
|
475
|
+
args: [{ selector: 'sa-button', standalone: true, imports: [NgIf, NgStyle, SpinnerComponent, HttpClientModule, IconComponent], providers: [IconService], template: "<button (click)=\"buttonClicked($event)\" id=\"sa-button-{{uuid}}\" class=\"btn-hide\"\r\n [type]=\"isSubmit ? 'submit' : 'button'\"></button>\r\n<!-- (click)=\"buttonClicked()\" on button instead of label breaks whole thing -->\r\n<label for=\"sa-button-{{uuid}}\" [ngStyle]=\"{'width':width}\" role=\"button\" tabindex=\"0\" (mouseenter)=\"mouseIn()\"\r\n (mouseleave)=\"mouseOut()\" (keydown.enter)=\"buttonClicked($event)\" for=\"sa-button\"\r\n class=\"sa-button {{state}} {{type}} {{size}}\">\r\n @if(showSpinner){\r\n <sa-spinner [default]=\"true\"></sa-spinner>\r\n }\r\n @if(ImagePath) {\r\n <div class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'block' : 'none'\"></div>\r\n {{text}}\r\n <div class=\"svg-icon\" [style]=\"svgStyle\"\r\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'block' : 'none'\"></div>\r\n } @else if (icon) {\r\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\r\n [style.display]=\"(iconPosition == 'left' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\r\n {{text}}\r\n <sa-icon [icon]=\"icon\" [size]=\"buttonIconSize\"\r\n [style.display]=\"(iconPosition == 'right' || iconPosition == 'both') ? 'flex' : 'none'\"></sa-icon>\r\n } @else {\r\n {{text}}\r\n }\r\n</label>\r\n", styles: [".primary{--default-bg: var(--primary-500);--default-color: var(--text-white);--default-border: transparent;--hover-bg: var(--primary-700);--hover-color: var(--text-white);--hover-border: transparent;--disabled-bg: var(--grey-100);--disabled-color: var(--text-white);--disabled-border: transparent;--error-default-bg: var(--semantic-error-500);--error-hover-bg: var(--semantic-error-600);--error-default-color: var(--text-white);--error-hover-color: var(--text-white);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-500);--svg-icon-color: var(--default-color)}.outline{--default-bg: none;--default-color: var(--primary-500);--default-border: var(--primary-500);--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: var(--primary-700);--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: var(--grey-100);--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: var(--semantic-error-500);--error-hover-border: var(--semantic-error-600);--svg-icon-color: var(--default-color)}.transparent{--default-bg: none;--default-color: var(--primary-500);--default-border: transparent;--hover-bg: var(--primary-50);--hover-color: var(--primary-700);--hover-border: transparent;--disabled-bg: none;--disabled-color: var(--grey-100);--disabled-border: transparent;--error-default-bg: none;--error-hover-bg: var(--semantic-error-50);--error-default-color: var(--semantic-error-500);--error-hover-color: var(--semantic-error-600);--error-default-border: transparent;--error-hover-border: transparent;--svg-icon-color: var(--default-color)}.large{--sizing-1: var(--small-8px);--sizing-2: var(--small-16px);--sizing-3: var(--small-8px);--height: var(--medium-36px);--font-size: var(--small-14px)}.medium{--sizing-1: var(--small-6px);--sizing-2: var(--small-12px);--sizing-3: var(--small-8px);--height: var(--medium-32px);--font-size: var(--small-14px)}.small{--sizing-1: var(--small-4px);--sizing-2: var(--small-8px);--sizing-3: var(--small-8px);--height: var(--medium-24px);--font-size: var(--small-12px)}.disabled{background-color:var(--disabled-bg)!important;color:var(--disabled-color)!important;border:1px solid var(--disabled-border)!important;cursor:default!important;--svg-icon-color: var(--disabled-color) !important}.error{background-color:var(--error-default-bg)!important;color:var(--error-default-color)!important;border:1px solid var(--error-default-border)!important;--svg-icon-color: var(--error-default-color) !important}.error:hover{background-color:var(--error-hover-bg)!important;color:var(--error-hover-color)!important;--svg-icon-color: var(--error-hover-color) !important}.sa-button{display:flex;width:max-content;padding:var(--sizing-1) var(--sizing-2);justify-content:center;align-items:center;gap:var(--sizing-3);box-sizing:border-box;height:var(--height);border-radius:4px;font-family:var(--font);font-size:var(--font-size);cursor:pointer;background-color:var(--default-bg);border:1px solid var(--default-border);color:var(--default-color);-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.sa-button:hover{background-color:var(--hover-bg);border:1px solid var(--hover-border);color:var(--hover-color);--svg-icon-color: var(--hover-color)}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:16px;height:16px;background-color:var(--svg-icon-color)}.btn-hide{display:none}\n"] }]
|
|
476
476
|
}], propDecorators: { id: [{
|
|
477
477
|
type: Input
|
|
478
478
|
}], type: [{
|
|
@@ -642,11 +642,11 @@ class AccordionComponent extends FieldType {
|
|
|
642
642
|
this.buttonClick.complete();
|
|
643
643
|
}
|
|
644
644
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AccordionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
645
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AccordionComponent, isStandalone: true, selector: "sa-accordion", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"accordion-container\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n (closed)=\"onAccordionClosed()\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(props?.['accordionExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n <div>\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n [text]=\"getChipText()\"></sa-chip>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"custom-divider\"></div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\n <div class=\"chips-container\">\n @for(chip of subFeature.featureChip; track chip) {\n <sa-chip [type]=\"chip?.['type']\"\n [state]=\"chip?.['state']\"\n [filling]=\"chip?.['filling']\"\n [tooltip]=\"chip?.['tooltip']\"\n [text]=\"chip?.['label']\"></sa-chip>\n }\n </div>\n }\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n <!-- Advanced Features accordion -->\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n class=\"advanced-features-section\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!props?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n props?.['advancedFeatureToggleTitle'] :\n props?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"accordion-advanced-container\">\n <div class=\"disclaimer-container\">\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n </span>\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n @if(props?.['advancedFeatureDisclaimerButtons']) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"\n class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\n <div class=\"chip-container\">\n @for(chip of subFeature.featureChip; track chip) {\n <sa-chip [type]=\"chip?.['type']\"\n [state]=\"chip?.['state']\"\n [filling]=\"chip?.['filling']\"\n [tooltip]=\"chip?.['tooltip']\"\n [text]=\"chip?.['label']\"></sa-chip>\n }\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container,.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.chips-container{display:flex;align-items:center;gap:var(--small-4px)}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}\n"], dependencies: [{ kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
645
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: AccordionComponent, isStandalone: true, selector: "sa-accordion", usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<mat-accordion class=\"accordion-container\">\r\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\r\n (closed)=\"onAccordionClosed()\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"panel-container\">\r\n @if(props?.['accordionExpanded']){\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\r\n size=\"20\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\r\n size=\"20\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\r\n <div>\r\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\r\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\r\n [text]=\"getChipText()\"></sa-chip>\r\n </div>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"custom-divider\"></div>\r\n <div class=\"accordion-cards-container\">\r\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\r\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\r\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n @if(subFeature?.['disabled']){\r\n <span class=\"disabled-icon\">\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\r\n </span>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\r\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\r\n }\r\n <div class=\"sa-card-title-icon-container\">\r\n <div class=\"sa-card-custom-title\">\r\n {{subFeature?.title}}\r\n </div>\r\n @if(subFeature?.tooltip){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\r\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\r\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\r\n <div class=\"chips-container\">\r\n @for(chip of subFeature.featureChip; track chip) {\r\n <sa-chip [type]=\"chip?.['type']\"\r\n [state]=\"chip?.['state']\"\r\n [filling]=\"chip?.['filling']\"\r\n [tooltip]=\"chip?.['tooltip']\"\r\n [text]=\"chip?.['label']\"></sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n </div>\r\n </div>\r\n <!-- Advanced Features accordion -->\r\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\r\n class=\"advanced-features-section\">\r\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\r\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"panel-container\">\r\n @if(!props?.['advancedFeaturesExpanded']){\r\n <span class=\"d-flex align-center source-icon\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\r\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\r\n class=\"d-flex\" size=\"20\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\r\n props?.['advancedFeatureToggleTitle'] :\r\n props?.['advancedFeatureTitle'] }}</span>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"accordion-advanced-container\">\r\n <div class=\"disclaimer-container\">\r\n <span class=\"tooltip-container\">\r\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\r\n @if(props?.['advancedFeatureDisclaimerButtons']) {\r\n <div class=\"disclaimer-buttons-container\">\r\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\r\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\r\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (click)=\"actionHandler(button, $event)\"></sa-button>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"accordion-cards-container\">\r\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\r\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\r\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n @if(subFeature?.['disabled']){\r\n <span class=\"disabled-icon\">\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\"\r\n class=\"d-flex\"></sa-icon>\r\n </span>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\r\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\r\n }\r\n <div class=\"sa-card-title-icon-container\">\r\n <div class=\"sa-card-custom-title\">\r\n {{subFeature?.title}}\r\n </div>\r\n @if(subFeature?.tooltip){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\r\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\r\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n </div>\r\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\r\n <div class=\"chip-container\">\r\n @for(chip of subFeature.featureChip; track chip) {\r\n <sa-chip [type]=\"chip?.['type']\"\r\n [state]=\"chip?.['state']\"\r\n [filling]=\"chip?.['filling']\"\r\n [tooltip]=\"chip?.['tooltip']\"\r\n [text]=\"chip?.['label']\"></sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n </div>\r\n </mat-expansion-panel>\r\n</mat-accordion>", styles: [".accordion-cards-container,.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.chips-container{display:flex;align-items:center;gap:var(--small-4px)}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}\n"], dependencies: [{ kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "directive", type: i5.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
646
646
|
}
|
|
647
647
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: AccordionComponent, decorators: [{
|
|
648
648
|
type: Component,
|
|
649
|
-
args: [{ selector: 'sa-accordion', standalone: true, imports: [CardCustomHeaderComponent, CardComponent, FormsModule, MatCheckboxModule, CommonModule, IconComponent, MatTooltipModule, MatExpansionModule, ChipsComponent, ButtonComponent], template: "<mat-accordion class=\"accordion-container\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\n (closed)=\"onAccordionClosed()\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(props?.['accordionExpanded']){\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\n <div>\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\n [text]=\"getChipText()\"></sa-chip>\n </div>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"custom-divider\"></div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\n <div class=\"chips-container\">\n @for(chip of subFeature.featureChip; track chip) {\n <sa-chip [type]=\"chip?.['type']\"\n [state]=\"chip?.['state']\"\n [filling]=\"chip?.['filling']\"\n [tooltip]=\"chip?.['tooltip']\"\n [text]=\"chip?.['label']\"></sa-chip>\n }\n </div>\n }\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n <!-- Advanced Features accordion -->\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\n class=\"advanced-features-section\">\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!props?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\n class=\"d-flex\" size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\n props?.['advancedFeatureToggleTitle'] :\n props?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"accordion-advanced-container\">\n <div class=\"disclaimer-container\">\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\n </span>\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\n @if(props?.['advancedFeatureDisclaimerButtons']) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"accordion-cards-container\">\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n @if(subFeature?.['disabled']){\n <span class=\"disabled-icon\">\n <sa-icon icon=\"disabledCheckboxFilled\"\n customClass=\"auto-dimensions disabled-checkbox-icon\"\n class=\"d-flex\"></sa-icon>\n </span>\n }@else{\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\n }\n <div class=\"sa-card-title-icon-container\">\n <div class=\"sa-card-custom-title\">\n {{subFeature?.title}}\n </div>\n @if(subFeature?.tooltip){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </div>\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\n <div class=\"chip-container\">\n @for(chip of subFeature.featureChip; track chip) {\n <sa-chip [type]=\"chip?.['type']\"\n [state]=\"chip?.['state']\"\n [filling]=\"chip?.['filling']\"\n [tooltip]=\"chip?.['tooltip']\"\n [text]=\"chip?.['label']\"></sa-chip>\n }\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>\n </div>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n </mat-expansion-panel>\n</mat-accordion>", styles: [".accordion-cards-container,.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.chips-container{display:flex;align-items:center;gap:var(--small-4px)}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}\n"] }]
|
|
649
|
+
args: [{ selector: 'sa-accordion', standalone: true, imports: [CardCustomHeaderComponent, CardComponent, FormsModule, MatCheckboxModule, CommonModule, IconComponent, MatTooltipModule, MatExpansionModule, ChipsComponent, ButtonComponent], template: "<mat-accordion class=\"accordion-container\">\r\n <mat-expansion-panel hideToggle [expanded]=\"props?.['accordionExpanded'] || false\" (opened)=\"onAccordionOpened()\"\r\n (closed)=\"onAccordionClosed()\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"panel-container\">\r\n @if(props?.['accordionExpanded']){\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['expandedIcon'] || 'downChevronOutlined'\" class=\"d-flex info-icon\"\r\n size=\"20\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['collapsedIcon'] || 'rightChevronOutlined'\" class=\"d-flex info-icon\"\r\n size=\"20\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"panel-title\">{{props?.['panelTitle']}}</span>\r\n <div>\r\n <sa-chip *ngIf=\"props?.['titleChip']\" [type]=\"props['titleChip']?.['type']\"\r\n [state]=\"props['titleChip']?.['state']\" [filling]=\"props['titleChip']?.['filling']\"\r\n [text]=\"getChipText()\"></sa-chip>\r\n </div>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"custom-divider\"></div>\r\n <div class=\"accordion-cards-container\">\r\n <div *ngFor=\"let subFeature of props?.['featuresList']\">\r\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"props?.['featureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\r\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n @if(subFeature?.['disabled']){\r\n <span class=\"disabled-icon\">\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\" class=\"d-flex\"></sa-icon>\r\n </span>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\r\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\r\n }\r\n <div class=\"sa-card-title-icon-container\">\r\n <div class=\"sa-card-custom-title\">\r\n {{subFeature?.title}}\r\n </div>\r\n @if(subFeature?.tooltip){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\"\r\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\r\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\r\n <div class=\"chips-container\">\r\n @for(chip of subFeature.featureChip; track chip) {\r\n <sa-chip [type]=\"chip?.['type']\"\r\n [state]=\"chip?.['state']\"\r\n [filling]=\"chip?.['filling']\"\r\n [tooltip]=\"chip?.['tooltip']\"\r\n [text]=\"chip?.['label']\"></sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n </div>\r\n </div>\r\n <!-- Advanced Features accordion -->\r\n <div *ngIf=\"props?.['advancedFeatures'] && props['advancedFeatures'].length > 0\"\r\n class=\"advanced-features-section\">\r\n <mat-expansion-panel hideToggle [expanded]=\"props?.['advancedFeaturesExpanded'] || false\"\r\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\" class=\"advancedAccordion\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"panel-container\">\r\n @if(!props?.['advancedFeaturesExpanded']){\r\n <span class=\"d-flex align-center source-icon\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\"\r\n class=\"d-flex\" customClass=\"colored-icon\" size=\"16\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\"\r\n class=\"d-flex\" size=\"20\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"advanced-title\">{{ props?.['advancedFeaturesExpanded'] ?\r\n props?.['advancedFeatureToggleTitle'] :\r\n props?.['advancedFeatureTitle'] }}</span>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"accordion-advanced-container\">\r\n <div class=\"disclaimer-container\">\r\n <span class=\"tooltip-container\">\r\n <sa-icon icon=\"infoCircleOutlined\" customClass=\"info-icon\" class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n <span class=\"disclaimer-style\">{{props?.['advancedFeatureDisclaimer']}}</span>\r\n @if(props?.['advancedFeatureDisclaimerButtons']) {\r\n <div class=\"disclaimer-buttons-container\">\r\n <ng-container *ngFor=\"let button of props['advancedFeatureDisclaimerButtons']\">\r\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\r\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (click)=\"actionHandler(button, $event)\"></sa-button>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"accordion-cards-container\">\r\n <div *ngFor=\"let subFeature of props?.['advancedFeatures']\">\r\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"props?.['advancedFeatureCardWidth'] || '632px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"props?.['customWrapperClass']\" (click)=\"onCardClick(subFeature)\"\r\n class=\"{{subFeature?.['disabled'] && subFeature?.['isSelected'] ? 'card-selected' : ''}} {{subFeature?.['disabled'] ? 'disabled-card': ''}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n @if(subFeature?.['disabled']){\r\n <span class=\"disabled-icon\">\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\"\r\n class=\"d-flex\"></sa-icon>\r\n </span>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [(ngModel)]=\"subFeature.isSelected\"\r\n (click)=\"onCheckboxClick($event, subFeature)\"></mat-checkbox>\r\n }\r\n <div class=\"sa-card-title-icon-container\">\r\n <div class=\"sa-card-custom-title\">\r\n {{subFeature?.title}}\r\n </div>\r\n @if(subFeature?.tooltip){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['advancedTooltipIcon'] || 'infoCircleOutlined'\"\r\n customClass=\"info-icon\" [matTooltip]=\"subFeature?.tooltip\"\r\n matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n </div>\r\n @if(subFeature?.featureChip && subFeature?.featureChip?.length > 0){\r\n <div class=\"chip-container\">\r\n @for(chip of subFeature.featureChip; track chip) {\r\n <sa-chip [type]=\"chip?.['type']\"\r\n [state]=\"chip?.['state']\"\r\n [filling]=\"chip?.['filling']\"\r\n [tooltip]=\"chip?.['tooltip']\"\r\n [text]=\"chip?.['label']\"></sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n </div>\r\n </mat-expansion-panel>\r\n</mat-accordion>", styles: [".accordion-cards-container,.advancedAccordion .accordion-cards-container{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem 1rem;max-width:-webkit-fill-available}.accordion-container .panel-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:var(--medium-24px);letter-spacing:.5px}.panel-container{display:flex;gap:var(--small-8px, 8px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .accordion-container.mat-accordion>.mat-expansion-panel-spacing:last-child,.mat-accordion>*:last-child:not(.mat-expansion-panel) .mat-expansion-panel-spacing{width:-webkit-fill-available;display:flex;flex-direction:column}::ng-deep .accordion-container .mat-expansion-panel-body{display:flex;flex-direction:column;gap:var(--medium-20px)}::ng-deep .accordion-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .accordion-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}::ng-deep .card-selected .sa-card-accordion-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--primary-500);background:var(--structural-white)}.accordion-container .custom-divider{width:100%;height:.063rem;background-color:var(--grey-100)}.accordion-container .chip{background-color:red}::ng-deep .accordion-container .panel-container .small{--chip-height: var(--medium-24px)}.advancedAccordion.mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none;border:none}::ng-deep .accordion-container .advancedAccordion .mat-expansion-panel-header{padding:var(--small-16px) var(--small-16px) var(--small-16px) var(--small-16px)}.advancedAccordion .disclaimer-container{display:flex;gap:var(--small-8px);height:2.875rem;padding:var(--small-12px) var(--small-16px);align-items:center;border-radius:var(--small-8px);border:1px solid var(--grey-100);background:var(--structural-neutral3)}.advancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.accordion-advanced-container{display:flex;flex-direction:column;gap:var(--small-16px)}.d-flex{display:flex}::ng-deep .disabled-card .sa-card-accordion-wrapper{cursor:auto}.advancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .advancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.advancedAccordion .panel-container .material-icons{font-size:1.375rem}.disabled-icon{padding:.563rem var(--small-8px) var(--small-8px) var(--small-8px)}.chips-container{display:flex;align-items:center;gap:var(--small-4px)}.accordions-container{display:flex;flex-direction:column;gap:var(--medium-24px)}::ng-deep .accordion-container .mat-expansion-panel:not([class*=mat-elevation-z]){border:1px solid var(--grey-100);background:var(--structural-white);box-shadow:none}::ng-deep .accordion-container.mat-accordion .mat-expansion-panel:first-of-type{border-radius:var(--small-8px)}::ng-deep .accordion-container .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}::ng-deep .advancedAccordion .mat-expansion-panel-body{padding-left:0;padding-right:0}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.source-icon{padding:0 1.4px 0 1px}::ng-deep .checkbox-container .custom-chip.mat-chip.mat-chip-selected:after{content:none}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}\n"] }]
|
|
650
650
|
}] });
|
|
651
651
|
|
|
652
652
|
let nextId$2 = 0; // used to give unique ids to inputs used in html
|
|
@@ -792,7 +792,7 @@ class CalendarHeaderComponent {
|
|
|
792
792
|
this.destroy$.next(); // will trigger unsubscription in takeUntil
|
|
793
793
|
}
|
|
794
794
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, deps: [{ token: i2$1.MatCalendar }, { token: i2$2.DateAdapter }, { token: i2$1.MatDateRangePicker }, { token: MAT_DATE_FORMATS }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
795
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\n <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n for=\"preset-radio-{{i}}\">{{preset}}</label>\n <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n </div>\n</div>\n\n<div class=\"header\">\n <button mat-icon-button (click)=\"previousClicked('month')\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </button>\n\n <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n <button mat-icon-button (click)=\"nextClicked('month')\">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
795
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CalendarHeaderComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: "<div class=\"range-preset\">\r\n <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\r\n <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\r\n for=\"preset-radio-{{i}}\">{{preset}}</label>\r\n <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\r\n id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\r\n </div>\r\n</div>\r\n\r\n<div class=\"header\">\r\n <button mat-icon-button (click)=\"previousClicked('month')\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </button>\r\n\r\n <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\r\n\r\n <button mat-icon-button (click)=\"nextClicked('month')\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n</div>\r\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }] }); }
|
|
796
796
|
}
|
|
797
797
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CalendarHeaderComponent, decorators: [{
|
|
798
798
|
type: Component,
|
|
@@ -800,7 +800,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
800
800
|
NgFor,
|
|
801
801
|
MatIconModule,
|
|
802
802
|
MatButton
|
|
803
|
-
], template: "<div class=\"range-preset\">\n <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\n <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\n for=\"preset-radio-{{i}}\">{{preset}}</label>\n <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\n id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\n </div>\n</div>\n\n<div class=\"header\">\n <button mat-icon-button (click)=\"previousClicked('month')\">\n <mat-icon>keyboard_arrow_left</mat-icon>\n </button>\n\n <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\n\n <button mat-icon-button (click)=\"nextClicked('month')\">\n <mat-icon>keyboard_arrow_right</mat-icon>\n </button>\n</div>\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"] }]
|
|
803
|
+
], template: "<div class=\"range-preset\">\r\n <div class=\"preset\" *ngFor=\"let preset of presets, let i = index\">\r\n <label class=\"preset-label {{preset == selectedPreset ? 'preset-selected' : ''}}\"\r\n for=\"preset-radio-{{i}}\">{{preset}}</label>\r\n <input class=\"preset-radio\" (change)=\"presetChanged($event)\" [checked]=\"preset == selectedPreset\"\r\n id=\"preset-radio-{{i}}\" type=\"radio\" name=\"preset-radios-{{uuid}}\" value=\"{{preset}}\">\r\n </div>\r\n</div>\r\n\r\n<div class=\"header\">\r\n <button mat-icon-button (click)=\"previousClicked('month')\">\r\n <mat-icon>keyboard_arrow_left</mat-icon>\r\n </button>\r\n\r\n <button mat-button class=\"header-label\" (click)=\"changeView()\">{{ periodLabel }}</button>\r\n\r\n <button mat-icon-button (click)=\"nextClicked('month')\">\r\n <mat-icon>keyboard_arrow_right</mat-icon>\r\n </button>\r\n</div>\r\n", styles: [".header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--grey-50);margin-top:-4px;margin-bottom:var(--small-8px, 8px)}.header-label{font-family:Roboto;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.range-preset{width:180px;position:absolute;padding:var(--small-12px, 12px) 0 0 var(--medium-24px, 24px);box-sizing:border-box;margin-top:-9px;margin-left:-180px;height:356px;background-color:#fff;border-top:1px solid var(--grey-50);border-left:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-bottom-left-radius:var(--small-8px, 8px);border-top-left-radius:var(--small-8px, 8px);gap:var(--small-8px, 8px);display:flex;flex-direction:column}.preset{padding:var(--small-8px, 8px);display:flex;gap:var(--small-4px, 4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;color:var(--text-mediumemphasis);margin-bottom:-5px}.preset-radio,.preset-label{cursor:pointer}.preset-selected{color:var(--primary-500)}\n"] }]
|
|
804
804
|
}], ctorParameters: () => [{ type: i2$1.MatCalendar }, { type: i2$2.DateAdapter }, { type: i2$1.MatDateRangePicker }, { type: undefined, decorators: [{
|
|
805
805
|
type: Inject,
|
|
806
806
|
args: [MAT_DATE_FORMATS]
|
|
@@ -817,11 +817,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
817
817
|
|
|
818
818
|
class CardFooterActionsComponent {
|
|
819
819
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
820
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardFooterActionsComponent, isStandalone: true, selector: "sa-card-footer-actions", ngImport: i0, template: "<div class=\"sa-card-footer-actions\">\n <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }); }
|
|
820
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CardFooterActionsComponent, isStandalone: true, selector: "sa-card-footer-actions", ngImport: i0, template: "<div class=\"sa-card-footer-actions\">\r\n <ng-content></ng-content>\r\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }); }
|
|
821
821
|
}
|
|
822
822
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardFooterActionsComponent, decorators: [{
|
|
823
823
|
type: Component,
|
|
824
|
-
args: [{ selector: 'sa-card-footer-actions', standalone: true, imports: [], template: "<div class=\"sa-card-footer-actions\">\n <ng-content></ng-content>\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }]
|
|
824
|
+
args: [{ selector: 'sa-card-footer-actions', standalone: true, imports: [], template: "<div class=\"sa-card-footer-actions\">\r\n <ng-content></ng-content>\r\n</div>", styles: [".sa-card-footer-actions{display:flex;justify-content:end}\n"] }]
|
|
825
825
|
}] });
|
|
826
826
|
|
|
827
827
|
class CardIconComponent {
|
|
@@ -848,11 +848,11 @@ class ListComponent {
|
|
|
848
848
|
this.featuresIcon = '';
|
|
849
849
|
}
|
|
850
850
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
851
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ListComponent, isStandalone: true, selector: "lib-list", inputs: { listData: "listData", featuresIcon: "featuresIcon" }, ngImport: i0, template: "<div class=\"feature-list-container\">\n <div class=\"feature-item\" *ngFor=\"let item of listData\">\n <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\n <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\n </div>\n <div>\n <span class=\"feature-text\">{{ item?.text }}</span>\n </div>\n </div>\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
851
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ListComponent, isStandalone: true, selector: "lib-list", inputs: { listData: "listData", featuresIcon: "featuresIcon" }, ngImport: i0, template: "<div class=\"feature-list-container\">\r\n <div class=\"feature-item\" *ngFor=\"let item of listData\">\r\n <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\r\n <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\r\n </div>\r\n <div>\r\n <span class=\"feature-text\">{{ item?.text }}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
852
852
|
}
|
|
853
853
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ListComponent, decorators: [{
|
|
854
854
|
type: Component,
|
|
855
|
-
args: [{ selector: 'lib-list', standalone: true, imports: [IconComponent, CommonModule], template: "<div class=\"feature-list-container\">\n <div class=\"feature-item\" *ngFor=\"let item of listData\">\n <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\n <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\n </div>\n <div>\n <span class=\"feature-text\">{{ item?.text }}</span>\n </div>\n </div>\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"] }]
|
|
855
|
+
args: [{ selector: 'lib-list', standalone: true, imports: [IconComponent, CommonModule], template: "<div class=\"feature-list-container\">\r\n <div class=\"feature-item\" *ngFor=\"let item of listData\">\r\n <div *ngIf=\"featuresIcon\" class=\"feature-icon\">\r\n <sa-icon [icon]=\"featuresIcon\" customClass=\"colored-icon\"></sa-icon>\r\n </div>\r\n <div>\r\n <span class=\"feature-text\">{{ item?.text }}</span>\r\n </div>\r\n </div>\r\n</div>", styles: [".feature-list-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);align-self:stretch}.feature-item{display:flex;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.feature-list-container .feature-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.feature-icon sa-icon{display:flex}\n"] }]
|
|
856
856
|
}], propDecorators: { listData: [{
|
|
857
857
|
type: Input
|
|
858
858
|
}], featuresIcon: [{
|
|
@@ -878,11 +878,11 @@ class CheckboxCardComponent extends FieldType {
|
|
|
878
878
|
this.field.props['onButtonClick'](this.field);
|
|
879
879
|
}
|
|
880
880
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
881
|
-
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", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { 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: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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"] }] }); }
|
|
881
|
+
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']\"\r\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\r\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\r\n [style.width]=\"props['width']\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-custom-header-container\">\r\n <div class=\"sa-card-title-logo-container\">\r\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\r\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\r\n </div>\r\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\r\n </div>\r\n <div class=\"sa-card-titleIcon\">\r\n <sa-card-title-actions>\r\n <div class=\"sa-document-action\">\r\n @if(props['disabled']){\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\r\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\r\n }\r\n </div>\r\n </sa-card-title-actions>\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n <sa-card-custom-body>\r\n @if(props['listItems']){\r\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\r\n }@else if(props['showButtons']){\r\n <div class=\"buttons-container\">\r\n <ng-container *ngFor=\"let button of props['showButtons']\">\r\n <ng-container *ngIf=\"button.type === 'submit'\">\r\n <div class=\"button-content\">\r\n @if(props['description']){\r\n @if(props['descriptionIcon']){\r\n <div class=\"description-container\">\r\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\r\n class=\"description-icon\"></sa-icon>\r\n <span class=\"description-style\">{{props['description']}}</span>\r\n </div>\r\n }\r\n }\r\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\r\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\r\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\r\n [buttonIconSize]=\"button.iconSize\"></sa-button>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n }\r\n </sa-card-custom-body>\r\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", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { 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: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.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: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.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"] }] }); }
|
|
882
882
|
}
|
|
883
883
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxCardComponent, decorators: [{
|
|
884
884
|
type: Component,
|
|
885
|
-
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"] }]
|
|
885
|
+
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']\"\r\n (click)=\"!props['disabled'] && onCardClick($event)\" [showCardBody]=\"false\" [showCardHeader]=\"true\"\r\n [showCustomCardBody]=\"true\" class=\"checkbox-card {{props['isCardSelected'] ? 'card-selected': ''}}\"\r\n [style.width]=\"props['width']\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-custom-header-container\">\r\n <div class=\"sa-card-title-logo-container\">\r\n <div class=\"sa-card-title-logo {{props['disabled'] ? 'disabled-card': ''}}\"><sa-icon\r\n [icon]=\"props['featureIcon']\" customClass=\"auto-dimensions colored-icon\"></sa-icon>\r\n </div>\r\n <div class=\"sa-card-custom-title\">{{props['title']}}</div>\r\n </div>\r\n <div class=\"sa-card-titleIcon\">\r\n <sa-card-title-actions>\r\n <div class=\"sa-document-action\">\r\n @if(props['disabled']){\r\n <sa-icon icon=\"disabledCheckboxFilled\"\r\n customClass=\"auto-dimensions disabled-checkbox-icon\"></sa-icon>\r\n }@else{\r\n <mat-checkbox class=\"checkbox-style\" [formControl]=\"formControl\"\r\n (click)=\"onCheckboxClick($event)\" [disabled]=\"props['disabled']\"></mat-checkbox>\r\n }\r\n </div>\r\n </sa-card-title-actions>\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n <sa-card-custom-body>\r\n @if(props['listItems']){\r\n <lib-list [listData]=\"props['listItems']\" [featuresIcon]=\"props['listIcon']\"></lib-list>\r\n }@else if(props['showButtons']){\r\n <div class=\"buttons-container\">\r\n <ng-container *ngFor=\"let button of props['showButtons']\">\r\n <ng-container *ngIf=\"button.type === 'submit'\">\r\n <div class=\"button-content\">\r\n @if(props['description']){\r\n @if(props['descriptionIcon']){\r\n <div class=\"description-container\">\r\n <sa-icon [icon]=\"props['descriptionIcon']\" customClass=\"auto-dimensions disabled-icon\"\r\n class=\"description-icon\"></sa-icon>\r\n <span class=\"description-style\">{{props['description']}}</span>\r\n </div>\r\n }\r\n }\r\n <sa-button (click)=\"actionHandler(button)\" [text]=\"button.label\" [type]=\"button.buttonType\"\r\n [size]=\"button.size\" [state]=\"button.state\" [icon]=\"button.icon\"\r\n [iconPosition]='button.iconPosition' class=\"checkbox-card-action-button\"\r\n [buttonIconSize]=\"button.iconSize\"></sa-button>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n }\r\n </sa-card-custom-body>\r\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"] }]
|
|
886
886
|
}] });
|
|
887
887
|
|
|
888
888
|
class GuideCardComponent {
|
|
@@ -910,11 +910,11 @@ class GuideCardComponent {
|
|
|
910
910
|
this.onStepClicked.emit(step);
|
|
911
911
|
}
|
|
912
912
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
913
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: GuideCardComponent, isStandalone: true, selector: "sa-guide-card", inputs: { title: "title", steps: "steps", selectable: "selectable", selectedStep: "selectedStep" }, outputs: { onStepClicked: "onStepClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"guide-container\">\n <div class=\"guide-header\">\n <p class=\"guide-header-title\">{{ title }}</p>\n </div>\n <div class=\"guide-content\">\n @for (step of steps; track step; let last = $last) {\n <div class=\"step\" [ngClass]=\"step?.isCompleted ? 'connectedSource-step': '' \">\n <div class=\"step-indicator\">\n @if(selectable) {\n @if(step?.isCompleted){\n <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\n size=\"20\"></sa-icon>\n }\n @else{\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n </div>\n }\n }@else{\n <div class=\"step-circle\"></div>\n }\n @if (!last) {\n <div class=\"step-line\"></div>\n }\n </div>\n <div class=\"step-content\">\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n {{ step.title }}\n @if(step?.chipData) {\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n }\n </div>\n @if (step?.description) {\n <p class=\"step-description\">{{ step.description }}</p>\n }\n </div>\n </div>\n }\n </div>\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem;overflow:hidden}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow-y:auto;overflow-x:hidden;gap:1.5rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:auto;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px;margin:0}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:var(--medium-20px, 20px) var(--medium-20px, 20px) 0}.menu-card-container .connectedSource-step .step-line{margin-left:.45rem;height:calc(100% + 1.3rem)}.menu-card-container .connectedSource-step .source-circle{margin-left:-.1rem}.menu-card-container .connectedSource-step .chip{text-decoration:line-through}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
913
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: GuideCardComponent, isStandalone: true, selector: "sa-guide-card", inputs: { title: "title", steps: "steps", selectable: "selectable", selectedStep: "selectedStep" }, outputs: { onStepClicked: "onStepClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"guide-container\">\r\n <div class=\"guide-header\">\r\n <p class=\"guide-header-title\">{{ title }}</p>\r\n </div>\r\n <div class=\"guide-content\">\r\n @for (step of steps; track step; let last = $last) {\r\n <div class=\"step\" [ngClass]=\"step?.isCompleted ? 'connectedSource-step': '' \">\r\n <div class=\"step-indicator\">\r\n @if(selectable) {\r\n @if(step?.isCompleted){\r\n <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\r\n size=\"20\"></sa-icon>\r\n }\r\n @else{\r\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\r\n </div>\r\n }\r\n }@else{\r\n <div class=\"step-circle\"></div>\r\n }\r\n @if (!last) {\r\n <div class=\"step-line\"></div>\r\n }\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\r\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\r\n {{ step.title }}\r\n @if(step?.chipData) {\r\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\r\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\r\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\r\n }\r\n </div>\r\n @if (step?.description) {\r\n <p class=\"step-description\">{{ step.description }}</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem;overflow:hidden}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow-y:auto;overflow-x:hidden;gap:1.5rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:auto;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px;margin:0}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:var(--medium-20px, 20px) var(--medium-20px, 20px) 0}.menu-card-container .connectedSource-step .step-line{margin-left:.45rem;height:calc(100% + 1.3rem)}.menu-card-container .connectedSource-step .source-circle{margin-left:-.1rem}.menu-card-container .connectedSource-step .chip{text-decoration:line-through}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
914
914
|
}
|
|
915
915
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GuideCardComponent, decorators: [{
|
|
916
916
|
type: Component,
|
|
917
|
-
args: [{ selector: 'sa-guide-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"guide-container\">\n <div class=\"guide-header\">\n <p class=\"guide-header-title\">{{ title }}</p>\n </div>\n <div class=\"guide-content\">\n @for (step of steps; track step; let last = $last) {\n <div class=\"step\" [ngClass]=\"step?.isCompleted ? 'connectedSource-step': '' \">\n <div class=\"step-indicator\">\n @if(selectable) {\n @if(step?.isCompleted){\n <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\n size=\"20\"></sa-icon>\n }\n @else{\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\n </div>\n }\n }@else{\n <div class=\"step-circle\"></div>\n }\n @if (!last) {\n <div class=\"step-line\"></div>\n }\n </div>\n <div class=\"step-content\">\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\n {{ step.title }}\n @if(step?.chipData) {\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\n }\n </div>\n @if (step?.description) {\n <p class=\"step-description\">{{ step.description }}</p>\n }\n </div>\n </div>\n }\n </div>\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem;overflow:hidden}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow-y:auto;overflow-x:hidden;gap:1.5rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:auto;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px;margin:0}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:var(--medium-20px, 20px) var(--medium-20px, 20px) 0}.menu-card-container .connectedSource-step .step-line{margin-left:.45rem;height:calc(100% + 1.3rem)}.menu-card-container .connectedSource-step .source-circle{margin-left:-.1rem}.menu-card-container .connectedSource-step .chip{text-decoration:line-through}\n"] }]
|
|
917
|
+
args: [{ selector: 'sa-guide-card', standalone: true, imports: [CommonModule, ChipsComponent, IconComponent], encapsulation: ViewEncapsulation.None, template: "<div class=\"guide-container\">\r\n <div class=\"guide-header\">\r\n <p class=\"guide-header-title\">{{ title }}</p>\r\n </div>\r\n <div class=\"guide-content\">\r\n @for (step of steps; track step; let last = $last) {\r\n <div class=\"step\" [ngClass]=\"step?.isCompleted ? 'connectedSource-step': '' \">\r\n <div class=\"step-indicator\">\r\n @if(selectable) {\r\n @if(step?.isCompleted){\r\n <sa-icon [icon]=\"'checkCircleFilled'\" class=\"source-circle\" customClass=\"colored-icon\"\r\n size=\"20\"></sa-icon>\r\n }\r\n @else{\r\n <div [ngClass]=\"step === selectedStep ? 'step-circle-selected': 'step-circle-normal'\">\r\n </div>\r\n }\r\n }@else{\r\n <div class=\"step-circle\"></div>\r\n }\r\n @if (!last) {\r\n <div class=\"step-line\"></div>\r\n }\r\n </div>\r\n <div class=\"step-content\">\r\n <div class=\"step-title\" (click)=\"selectable ? onStepClick(step) : null\"\r\n [ngClass]=\"selectable ? (step === selectedStep ? 'selected-step' : 'other-step') : ''\">\r\n {{ step.title }}\r\n @if(step?.chipData) {\r\n <sa-chip [type]=\"step?.chipData.type\" [state]=\"step?.chipData.state\"\r\n [filling]=\"step?.chipData.filling\" [text]=\"step?.chipData.text\"\r\n [iconPosition]='step?.chipData.iconPosition' [iconPath]=\"step?.chipData.iconPath\"></sa-chip>\r\n }\r\n </div>\r\n @if (step?.description) {\r\n <p class=\"step-description\">{{ step.description }}</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: [".guide-container{background-color:var(--structural-white);border:.0625rem solid var(--grey-100, #eaecf0);border-radius:.5rem;padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:2.25rem;overflow:hidden}.guide-header{border-bottom:.0625rem solid var(--grey-100, #eaecf0);position:relative}.guide-header h1{font-size:1.5rem;color:var(--text-highemphasis, #1C1B20);margin:0}.guide-content{display:flex;flex-direction:column;gap:var(--large-42px)}.step{display:flex}.guide-header .guide-header-title,.step-content .step-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, \"Roboto\");font-size:var(--small-16px);font-style:normal;font-weight:400;line-height:1.5rem;letter-spacing:.03125rem}.step-content .step-description{color:var(--text-lowemphasis, #98A2A3)}.step-indicator{margin-right:1.1575rem;margin-top:.125rem}.step-circle{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:.125rem auto 0}.step-line{width:.125rem;height:calc(100% + 1.75rem);background-color:var(--primary-500);margin:0 auto}.step-content h2{font-size:1.125rem;color:var(--text-highemphasis, #1C1B20);margin:0 0 .625rem}.step-content p{font-size:.875rem;color:var(--text-highemphasis, #1C1B20);margin:0;line-height:1.5}.menu-card-container .step{cursor:pointer}.menu-card-container .step-indicator .step-circle-normal{width:1rem;height:1rem;border-radius:50%;border:.25rem solid #fff;margin:.015rem auto 0;background-color:var(--primary-500)}.menu-card-container .guide-container{border:0;height:calc(100vh - 32.1rem);overflow-y:auto;overflow-x:hidden;gap:1.5rem;padding:0}.menu-card-container .step-content .selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);color:#fff;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.menu-card-container .guide-content{gap:var(--medium-32px);overflow-y:auto;overflow-x:hidden;padding:0rem 1.25rem 1.75rem}.menu-card-container .step-indicator .step-circle-selected{width:1rem;height:1rem;border-radius:50%;border:.25rem solid var(--primary-500);margin:0rem auto 0}.menu-card-container .step-indicator{margin-top:.58rem}.menu-card-container .step-content{width:-webkit-fill-available}.menu-card-container .guide-header-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px;margin:0}.menu-card-container .step-title{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menu-card-container .guide-header{border-bottom:none;padding:var(--medium-20px, 20px) var(--medium-20px, 20px) 0}.menu-card-container .connectedSource-step .step-line{margin-left:.45rem;height:calc(100% + 1.3rem)}.menu-card-container .connectedSource-step .source-circle{margin-left:-.1rem}.menu-card-container .connectedSource-step .chip{text-decoration:line-through}\n"] }]
|
|
918
918
|
}], propDecorators: { title: [{
|
|
919
919
|
type: Input
|
|
920
920
|
}], steps: [{
|
|
@@ -951,11 +951,11 @@ class MessageBannerComponent {
|
|
|
951
951
|
this.actionClick.emit(button);
|
|
952
952
|
}
|
|
953
953
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
954
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerComponent, isStandalone: true, selector: "sa-message-banner", inputs: { type: "type", actionText: "actionText", content: "content", bannerIcon: "bannerIcon", bannerIconSize: "bannerIconSize", buttonIcon: "buttonIcon", buttonType: "buttonType", buttonIconPosition: "buttonIconPosition", buttonSize: "buttonSize", buttonIconSize: "buttonIconSize", button: "button", onAction: "onAction" }, outputs: { actionClick: "actionClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"message-banner\" [class]=\"type\">\n <div class=\"content\">\n @if (bannerIcon) {\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\n }\n <ng-content></ng-content>\n </div>\n @if (actionText) {\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n (click)=\"onAction()\" (onClickEvent)=\"handleButtonClick($event)\">{{\n actionText\n }}</sa-button>\n }\n @else if(button) {\n <sa-button\n [text]=\"button?.text\"\n [icon]=\"button?.icon\"\n [size]=\"button?.size\"\n [type]=\"button?.type\"\n [iconPosition]=\"button?.iconPosition\"\n [buttonIconSize]=\"button?.buttonIconSize\"\n (onClickEvent)=\"handleButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button?.text\"\n >\n \n </sa-button>\n }\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px);align-items:center}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.disclaimer{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-neutral3);color:var(--text-mediumemphasis, #6D6979)}.standby{border:1px solid var(--grey-100, #EAECF0);background-color:var(--Structural-Primary-tint, #F9F7FC);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
954
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerComponent, isStandalone: true, selector: "sa-message-banner", inputs: { type: "type", actionText: "actionText", content: "content", bannerIcon: "bannerIcon", bannerIconSize: "bannerIconSize", buttonIcon: "buttonIcon", buttonType: "buttonType", buttonIconPosition: "buttonIconPosition", buttonSize: "buttonSize", buttonIconSize: "buttonIconSize", button: "button", onAction: "onAction" }, outputs: { actionClick: "actionClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"message-banner\" [class]=\"type\">\r\n <div class=\"content\">\r\n @if (bannerIcon) {\r\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\r\n }\r\n <ng-content></ng-content>\r\n </div>\r\n @if (actionText) {\r\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\r\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\r\n (click)=\"onAction()\" (onClickEvent)=\"handleButtonClick($event)\">{{\r\n actionText\r\n }}</sa-button>\r\n }\r\n @else if(button) {\r\n <sa-button\r\n [text]=\"button?.text\"\r\n [icon]=\"button?.icon\"\r\n [size]=\"button?.size\"\r\n [type]=\"button?.type\"\r\n [iconPosition]=\"button?.iconPosition\"\r\n [buttonIconSize]=\"button?.buttonIconSize\"\r\n (onClickEvent)=\"handleButtonClick(button, $event)\"\r\n role=\"button\"\r\n [attr.aria-label]=\"button?.text\"\r\n >\r\n \r\n </sa-button>\r\n }\r\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px);align-items:center}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.disclaimer{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-neutral3);color:var(--text-mediumemphasis, #6D6979)}.standby{border:1px solid var(--grey-100, #EAECF0);background-color:var(--Structural-Primary-tint, #F9F7FC);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
955
955
|
}
|
|
956
956
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerComponent, decorators: [{
|
|
957
957
|
type: Component,
|
|
958
|
-
args: [{ selector: 'sa-message-banner', standalone: true, imports: [HttpClientModule, IconComponent, ButtonComponent], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "<div class=\"message-banner\" [class]=\"type\">\n <div class=\"content\">\n @if (bannerIcon) {\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\n }\n <ng-content></ng-content>\n </div>\n @if (actionText) {\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\n (click)=\"onAction()\" (onClickEvent)=\"handleButtonClick($event)\">{{\n actionText\n }}</sa-button>\n }\n @else if(button) {\n <sa-button\n [text]=\"button?.text\"\n [icon]=\"button?.icon\"\n [size]=\"button?.size\"\n [type]=\"button?.type\"\n [iconPosition]=\"button?.iconPosition\"\n [buttonIconSize]=\"button?.buttonIconSize\"\n (onClickEvent)=\"handleButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button?.text\"\n >\n \n </sa-button>\n }\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px);align-items:center}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.disclaimer{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-neutral3);color:var(--text-mediumemphasis, #6D6979)}.standby{border:1px solid var(--grey-100, #EAECF0);background-color:var(--Structural-Primary-tint, #F9F7FC);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"] }]
|
|
958
|
+
args: [{ selector: 'sa-message-banner', standalone: true, imports: [HttpClientModule, IconComponent, ButtonComponent], providers: [IconService], encapsulation: ViewEncapsulation.None, template: "<div class=\"message-banner\" [class]=\"type\">\r\n <div class=\"content\">\r\n @if (bannerIcon) {\r\n <sa-icon class=\"icon\" [icon]=\"bannerIcon\" [size]=\"bannerIconSize\" [style.height.px]=\"bannerIconSize\"></sa-icon>\r\n }\r\n <ng-content></ng-content>\r\n </div>\r\n @if (actionText) {\r\n <sa-button class=\"action-button\" [text]=\"actionText\" [icon]=\"buttonIcon\" [size]=\"buttonSize\" [type]=\"buttonType\"\r\n [iconPosition]=\"buttonIconPosition\" [size]=\"buttonSize\" [buttonIconSize]=\"buttonIconSize\"\r\n (click)=\"onAction()\" (onClickEvent)=\"handleButtonClick($event)\">{{\r\n actionText\r\n }}</sa-button>\r\n }\r\n @else if(button) {\r\n <sa-button\r\n [text]=\"button?.text\"\r\n [icon]=\"button?.icon\"\r\n [size]=\"button?.size\"\r\n [type]=\"button?.type\"\r\n [iconPosition]=\"button?.iconPosition\"\r\n [buttonIconSize]=\"button?.buttonIconSize\"\r\n (onClickEvent)=\"handleButtonClick(button, $event)\"\r\n role=\"button\"\r\n [attr.aria-label]=\"button?.text\"\r\n >\r\n \r\n </sa-button>\r\n }\r\n</div>", styles: [".message-banner{display:flex;align-items:center;padding:var(--small-12px, 12px) var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100);font-family:Arial,sans-serif;gap:var(--small-8px, 8px)}.content{flex:1 0 0;font-family:var(--font-roboto, Roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px;display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px);align-items:center}.action-button{background:none;border:none;cursor:pointer;padding:4px 8px}.success{background-color:#e6f4ea;border:1px solid var(--grey-100, #EAECF0);color:#1e8e3e}.warning{color:var(--text-highemphasis, #4D4D4D);border:1px solid var(--grey-50, #E9EBEB);background:var(--secondary-50, #FFF3EB)}.info{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-primarytint, #FBFAFF);color:var(--text-mediumemphasis, #6D6979)}.disclaimer{border:1px solid var(--grey-100, #EAECF0);background-color:var(--structural-neutral3);color:var(--text-mediumemphasis, #6D6979)}.standby{border:1px solid var(--grey-100, #EAECF0);background-color:var(--Structural-Primary-tint, #F9F7FC);color:var(--text-mediumemphasis, #6D6979)}.error{color:var(--semantic-error-500, #BD271E);border:1px solid var(--grey-100, #EAECF0);background:var(--semantic-error-50, #F8E9E9)}\n"] }]
|
|
959
959
|
}], propDecorators: { type: [{
|
|
960
960
|
type: Input
|
|
961
961
|
}], actionText: [{
|
|
@@ -1026,11 +1026,11 @@ class MenuCardComponent extends FieldType {
|
|
|
1026
1026
|
this.onStepChanged(sourceType);
|
|
1027
1027
|
}
|
|
1028
1028
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuCardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1029
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MenuCardComponent, isStandalone: true, selector: "sa-menu-card", inputs: { title: "title", steps: "steps", footerDetails: "footerDetails" }, outputs: { onButtonClickEvent: "onButtonClickEvent", onCardClickEvent: "onCardClickEvent", onFooterClickEvent: "onFooterClickEvent", onStepChangeEvent: "onStepChangeEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"menu-card-container\">\n <div class=\"left-card-container\">\n <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\n (onStepClicked)=\"onStepChanged($event)\" [selectedStep]=\"selectedStep\"></sa-guide-card>\n <div class=\"card-footer-container\">\n <span class=\"horizontal-line\"></span>\n <ng-container *ngFor=\"let footerDetail of footerDetails\">\n <div (click)=\"showSources(footerDetail)\" class=\"footer\"\n [ngClass]=\"footerDetail === selectedStep ? 'selected-step' : 'other-step'\">\n <span class=\"footer-text\">\n {{footerDetail?.title}}\n <ng-container *ngIf=\"footerDetail?.count\">\n <span>({{footerDetail?.count}})</span>\n </ng-container>\n </span>\n <ng-container *ngIf=\"footerDetail?.chipData\">\n <span>\n <sa-chip [type]=\"footerDetail?.chipData.type\" [state]=\"footerDetail?.chipData.state\"\n [filling]=\"footerDetail?.chipData.filling\" [text]=\"footerDetail?.chipData.text\"\n [iconPosition]='footerDetail?.chipData.iconPosition'\n [iconPath]=\"footerDetail?.chipData.iconPath\">\n </sa-chip>\n </span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"right-card-container\">\n @if(selectedStep?.messageContent || selectedStep?.messageBanner?.content){\n <div class=\"message-container\">\n <sa-message-banner [bannerIcon]=\"selectedStep?.messageBanner?.bannerIcon\"\n [bannerIconSize]=\"selectedStep?.messageBanner?.bannerIconSize\" \n [buttonIcon]=\"selectedStep?.messageBanner?.buttonIcon\"\n [buttonType]=\"selectedStep?.messageBanner?.buttonType\"\n [buttonSize]=\"selectedStep?.messageBanner?.buttonSize\"\n [buttonIconPosition]=\"selectedStep?.messageBanner?.buttonIconPosition\"\n [actionText]=\"selectedStep?.messageBanner?.buttonText\"\n [buttonIconSize]=\"selectedStep?.messageBanner?.buttonIconSize\"\n [type]=\"selectedStep?.messageBanner?.type || 'info'\">\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent || selectedStep?.messageBanner?.content\">\n </div>\n </sa-message-banner>\n </div>\n }\n <div class=\"heading-container\">\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\n </div>\n <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n <!-- for advanced options -->\n <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\n class=\"menu-card-advanced-features-section\">\n\n <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\n class=\"menuAdvancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!selectedStep?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\" class=\"d-flex\"\n customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\" class=\"d-flex\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ selectedStep?.['advancedFeaturesExpanded'] ?\n selectedStep?.['advancedFeatureToggleTitle'] :\n selectedStep?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"expansion-container\">\n @if(selectedStep?.advancedFeatureDisclaimer){\n <div class=\"disclaimer-container\">\n <sa-message-banner [type]=\"'disclaimer'\">\n <div class=\"disclaimer-content\">\n @if(selectedStep?.advancedFeatureDisclaimerTooltip){\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\"\n [matTooltip]=\"selectedStep?.advancedFeatureDisclaimerTooltip\" customClass=\"info-icon\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\n </div>\n @if(selectedStep?.advancedFeatureDisclaimerButtons) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </sa-message-banner>\n </div>\n }\n <div class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n @if(selectedStep?.connectedSourcesList && selectedStep.connectedSourcesList.length > 0) {\n <div class=\"heading-container\">\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Connected Sources'}}:</span>\n </div>\n <div class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep.connectedSourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\n class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n <div class=\"sa-menu-card-title-icon-container\">\n <div class=\"sa-menu-card-custom-title\">\n <ng-container *ngIf=\"source.logoUrl\">\n <sa-icon [img]=\"source.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n </ng-container>\n <span [matTooltip]=\"source?.tooltip\">\n {{source?.name}}\n <ng-container *ngIf=\"source?.count\">\n <span>({{source.count}})</span>\n </ng-container>\n </span>\n <ng-container *ngIf=\"source?.chipData\">\n <span>\n <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\n [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\n [iconPosition]='source?.chipData.iconPosition'\n [iconPath]=\"source?.chipData.iconPath\">\n </sa-chip>\n </span>\n </ng-container>\n </div>\n </div>\n <ng-container\n *ngIf=\"!source.disabled && (selectedStep?.actionButton && (selectedStep?.showActionActionButton ? actionButton : null)) as button\">\n <div class=\"sa-card-titleIcon no-margin\">\n <sa-card-title-actions>\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, button, $event)\">\n </sa-button>\n </sa-card-title-actions>\n </div>\n </ng-container>\n </div>\n </sa-card-title-header>\n </sa-card>\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.right-card-container::-webkit-scrollbar,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar{width:8px;background:transparent}.right-card-container:hover::-webkit-scrollbar,::ng-deep .menu-card-container .guide-container:hover::-webkit-scrollbar{width:8px}.right-card-container::-webkit-scrollbar-thumb,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar-thumb{background-color:#0003;border-radius:4px}.right-card-container::-webkit-scrollbar-thumb:hover,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.right-card-container:hover,::ng-deep .menu-card-container .guide-container:hover{scrollbar-width:thin}.step-title{display:flex;justify-content:space-between}.mandatory{width:101px;height:20px;gap:var(--Small8px);opacity:0px;display:inline-block;position:relative;top:3px;padding:0rem .3rem}.step-title .title{padding:.35rem;border-radius:.25rem;display:inline-flex}.step-content .selected-step{background:var(--primary-500);color:#fff;border-radius:.3rem}.step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.step-content{width:-webkit-fill-available}.card-footer-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);padding-left:1.75rem;padding-right:1.75rem}.horizontal-line{border:.025rem solid var(--grey-100, #eaecf0);width:-webkit-fill-available}.card-footer-container .footer-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--small-20px, 20px);letter-spacing:.25px}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,31rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.menu-card-advanced-features-section{width:-webkit-fill-available}.menu-card-advanced-features-section .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.expansion-container{display:flex;flex-direction:column;gap:var(--small-16px)}.menuAdvancedAccordion .disclaimer-content{display:flex;gap:var(--small-8px);align-items:center}.menuAdvancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menuAdvancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .menuAdvancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.menuAdvancedAccordion .panel-container .material-icons{font-size:1.375rem}.menuAdvancedAccordion .chip-container{margin-left:auto}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.tooltip-icon{display:flex;align-items:center}.d-flex{display:flex}.sa-menu-card-custom-title,.sa-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.panel-container{display:flex;padding:6px var(--small-12px, 12px);justify-content:center;align-items:center;gap:.656rem;align-self:stretch}::ng-deep .menu-card-container .mat-expansion-panel-header{padding:0}::ng-deep .menu-card-container .mat-expansion-panel-body{padding:0 0 16px}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}::ng-deep .disabled-card .menuCardSourceContainer .sa-button{cursor:auto}::ng-deep .enabled-card{transition:border .3s ease,background .3s ease}.menuCardSourceContainer{align-items:center}::ng-deep .enabled-card .menuCardSourceContainer:hover{border:1px solid var(--grey-100);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .disabled-card .menuCardSourceContainer.sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .menuCardSourceContainer .no-margin .sa-card-title-actions{margin:0}.heading-style{color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep .menu-card-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .menu-card-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}.menu-card-container .card-footer-container .footer.other-step:hover{background:var(--primary-50);border-radius:.25rem}.card-footer-container .footer{width:-webkit-fill-available;padding:var(--small-8px, 8px);cursor:pointer;display:flex;align-items:center}.menu-card-container .footer.selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .footer.selected-step .footer-text{color:#fff}.menu-card-container .message-container{width:-webkit-fill-available}.menu-card-container .message-container .message-content{display:flex;justify-content:start;flex:1;align-items:center;color:var(--text-highemphasis, #1C1B20);gap:var(--small-12px);font-size:var(--small-14px);font-style:normal;font-weight:400}::ng-deep .menu-card-advanced-features-section .mat-expanded .panel-container{gap:var(--small-8px)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GuideCardComponent, selector: "sa-guide-card", inputs: ["title", "steps", "selectable", "selectedStep"], outputs: ["onStepClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }] }); }
|
|
1029
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MenuCardComponent, isStandalone: true, selector: "sa-menu-card", inputs: { title: "title", steps: "steps", footerDetails: "footerDetails" }, outputs: { onButtonClickEvent: "onButtonClickEvent", onCardClickEvent: "onCardClickEvent", onFooterClickEvent: "onFooterClickEvent", onStepChangeEvent: "onStepChangeEvent" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"menu-card-container\">\r\n <div class=\"left-card-container\">\r\n <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\r\n (onStepClicked)=\"onStepChanged($event)\" [selectedStep]=\"selectedStep\"></sa-guide-card>\r\n <div class=\"card-footer-container\">\r\n <span class=\"horizontal-line\"></span>\r\n <ng-container *ngFor=\"let footerDetail of footerDetails\">\r\n <div (click)=\"showSources(footerDetail)\" class=\"footer\"\r\n [ngClass]=\"footerDetail === selectedStep ? 'selected-step' : 'other-step'\">\r\n <span class=\"footer-text\">\r\n {{footerDetail?.title}}\r\n <ng-container *ngIf=\"footerDetail?.count\">\r\n <span>({{footerDetail?.count}})</span>\r\n </ng-container>\r\n </span>\r\n <ng-container *ngIf=\"footerDetail?.chipData\">\r\n <span>\r\n <sa-chip [type]=\"footerDetail?.chipData.type\" [state]=\"footerDetail?.chipData.state\"\r\n [filling]=\"footerDetail?.chipData.filling\" [text]=\"footerDetail?.chipData.text\"\r\n [iconPosition]='footerDetail?.chipData.iconPosition'\r\n [iconPath]=\"footerDetail?.chipData.iconPath\">\r\n </sa-chip>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"right-card-container\">\r\n @if(selectedStep?.messageContent || selectedStep?.messageBanner?.content){\r\n <div class=\"message-container\">\r\n <sa-message-banner [bannerIcon]=\"selectedStep?.messageBanner?.bannerIcon\"\r\n [bannerIconSize]=\"selectedStep?.messageBanner?.bannerIconSize\" \r\n [buttonIcon]=\"selectedStep?.messageBanner?.buttonIcon\"\r\n [buttonType]=\"selectedStep?.messageBanner?.buttonType\"\r\n [buttonSize]=\"selectedStep?.messageBanner?.buttonSize\"\r\n [buttonIconPosition]=\"selectedStep?.messageBanner?.buttonIconPosition\"\r\n [actionText]=\"selectedStep?.messageBanner?.buttonText\"\r\n [buttonIconSize]=\"selectedStep?.messageBanner?.buttonIconSize\"\r\n [type]=\"selectedStep?.messageBanner?.type || 'info'\">\r\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent || selectedStep?.messageBanner?.content\">\r\n </div>\r\n </sa-message-banner>\r\n </div>\r\n }\r\n <div class=\"heading-container\">\r\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\r\n </div>\r\n <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\r\n <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\r\n <ng-container\r\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <!-- for advanced options -->\r\n <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\r\n class=\"menu-card-advanced-features-section\">\r\n\r\n <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\r\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\r\n class=\"menuAdvancedAccordion\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"panel-container\">\r\n @if(!selectedStep?.['advancedFeaturesExpanded']){\r\n <span class=\"d-flex align-center source-icon\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\" class=\"d-flex\"\r\n customClass=\"colored-icon\" size=\"16\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\" class=\"d-flex\"\r\n size=\"20\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"advanced-title\">{{ selectedStep?.['advancedFeaturesExpanded'] ?\r\n selectedStep?.['advancedFeatureToggleTitle'] :\r\n selectedStep?.['advancedFeatureTitle'] }}</span>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"expansion-container\">\r\n @if(selectedStep?.advancedFeatureDisclaimer){\r\n <div class=\"disclaimer-container\">\r\n <sa-message-banner [type]=\"'disclaimer'\">\r\n <div class=\"disclaimer-content\">\r\n @if(selectedStep?.advancedFeatureDisclaimerTooltip){\r\n <span class=\"tooltip-container\">\r\n <sa-icon icon=\"infoCircleOutlined\"\r\n [matTooltip]=\"selectedStep?.advancedFeatureDisclaimerTooltip\" customClass=\"info-icon\"\r\n class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\r\n </div>\r\n @if(selectedStep?.advancedFeatureDisclaimerButtons) {\r\n <div class=\"disclaimer-buttons-container\">\r\n <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\r\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\r\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (click)=\"actionHandler(button, $event)\"></sa-button>\r\n </ng-container>\r\n </div>\r\n }\r\n </sa-message-banner>\r\n </div>\r\n }\r\n <div class=\"cards-container\">\r\n <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\r\n <ng-container\r\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n </div>\r\n @if(selectedStep?.connectedSourcesList && selectedStep.connectedSourcesList.length > 0) {\r\n <div class=\"heading-container\">\r\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Connected Sources'}}:</span>\r\n </div>\r\n <div class=\"cards-container\">\r\n <ng-container *ngFor=\"let source of selectedStep.connectedSourcesList\">\r\n <ng-container\r\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\r\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\r\n class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n <div class=\"sa-menu-card-title-icon-container\">\r\n <div class=\"sa-menu-card-custom-title\">\r\n <ng-container *ngIf=\"source.logoUrl\">\r\n <sa-icon [img]=\"source.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\r\n </ng-container>\r\n <span [matTooltip]=\"source?.tooltip\">\r\n {{source?.name}}\r\n <ng-container *ngIf=\"source?.count\">\r\n <span>({{source.count}})</span>\r\n </ng-container>\r\n </span>\r\n <ng-container *ngIf=\"source?.chipData\">\r\n <span>\r\n <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\r\n [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\r\n [iconPosition]='source?.chipData.iconPosition'\r\n [iconPath]=\"source?.chipData.iconPath\">\r\n </sa-chip>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container\r\n *ngIf=\"!source.disabled && (selectedStep?.actionButton && (selectedStep?.showActionActionButton ? actionButton : null)) as button\">\r\n <div class=\"sa-card-titleIcon no-margin\">\r\n <sa-card-title-actions>\r\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\r\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\r\n [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, button, $event)\">\r\n </sa-button>\r\n </sa-card-title-actions>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.right-card-container::-webkit-scrollbar,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar{width:8px;background:transparent}.right-card-container:hover::-webkit-scrollbar,::ng-deep .menu-card-container .guide-container:hover::-webkit-scrollbar{width:8px}.right-card-container::-webkit-scrollbar-thumb,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar-thumb{background-color:#0003;border-radius:4px}.right-card-container::-webkit-scrollbar-thumb:hover,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.right-card-container:hover,::ng-deep .menu-card-container .guide-container:hover{scrollbar-width:thin}.step-title{display:flex;justify-content:space-between}.mandatory{width:101px;height:20px;gap:var(--Small8px);opacity:0px;display:inline-block;position:relative;top:3px;padding:0rem .3rem}.step-title .title{padding:.35rem;border-radius:.25rem;display:inline-flex}.step-content .selected-step{background:var(--primary-500);color:#fff;border-radius:.3rem}.step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.step-content{width:-webkit-fill-available}.card-footer-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);padding-left:1.75rem;padding-right:1.75rem}.horizontal-line{border:.025rem solid var(--grey-100, #eaecf0);width:-webkit-fill-available}.card-footer-container .footer-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--small-20px, 20px);letter-spacing:.25px}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,31rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.menu-card-advanced-features-section{width:-webkit-fill-available}.menu-card-advanced-features-section .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.expansion-container{display:flex;flex-direction:column;gap:var(--small-16px)}.menuAdvancedAccordion .disclaimer-content{display:flex;gap:var(--small-8px);align-items:center}.menuAdvancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menuAdvancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .menuAdvancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.menuAdvancedAccordion .panel-container .material-icons{font-size:1.375rem}.menuAdvancedAccordion .chip-container{margin-left:auto}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.tooltip-icon{display:flex;align-items:center}.d-flex{display:flex}.sa-menu-card-custom-title,.sa-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.panel-container{display:flex;padding:6px var(--small-12px, 12px);justify-content:center;align-items:center;gap:.656rem;align-self:stretch}::ng-deep .menu-card-container .mat-expansion-panel-header{padding:0}::ng-deep .menu-card-container .mat-expansion-panel-body{padding:0 0 16px}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}::ng-deep .disabled-card .menuCardSourceContainer .sa-button{cursor:auto}::ng-deep .enabled-card{transition:border .3s ease,background .3s ease}.menuCardSourceContainer{align-items:center}::ng-deep .enabled-card .menuCardSourceContainer:hover{border:1px solid var(--grey-100);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .disabled-card .menuCardSourceContainer.sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .menuCardSourceContainer .no-margin .sa-card-title-actions{margin:0}.heading-style{color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep .menu-card-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .menu-card-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}.menu-card-container .card-footer-container .footer.other-step:hover{background:var(--primary-50);border-radius:.25rem}.card-footer-container .footer{width:-webkit-fill-available;padding:var(--small-8px, 8px);cursor:pointer;display:flex;align-items:center}.menu-card-container .footer.selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .footer.selected-step .footer-text{color:#fff}.menu-card-container .message-container{width:-webkit-fill-available}.menu-card-container .message-container .message-content{display:flex;justify-content:start;flex:1;align-items:center;color:var(--text-highemphasis, #1C1B20);gap:var(--small-12px);font-size:var(--small-14px);font-style:normal;font-weight:400}::ng-deep .menu-card-advanced-features-section .mat-expanded .panel-container{gap:var(--small-8px)}\n"], dependencies: [{ kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: GuideCardComponent, selector: "sa-guide-card", inputs: ["title", "steps", "selectable", "selectedStep"], outputs: ["onStepClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i5.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i5.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i5.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }] }); }
|
|
1030
1030
|
}
|
|
1031
1031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MenuCardComponent, decorators: [{
|
|
1032
1032
|
type: Component,
|
|
1033
|
-
args: [{ selector: 'sa-menu-card', standalone: true, imports: [ChipsComponent, CommonModule, GuideCardComponent, FormsModule, ReactiveFormsModule, FormlyModule, CardComponent, CardCustomHeaderComponent, IconComponent, MatExpansionModule, ButtonComponent, CardTitleActionsComponent, MatTooltipModule, MessageBannerComponent], template: "<div class=\"menu-card-container\">\n <div class=\"left-card-container\">\n <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\n (onStepClicked)=\"onStepChanged($event)\" [selectedStep]=\"selectedStep\"></sa-guide-card>\n <div class=\"card-footer-container\">\n <span class=\"horizontal-line\"></span>\n <ng-container *ngFor=\"let footerDetail of footerDetails\">\n <div (click)=\"showSources(footerDetail)\" class=\"footer\"\n [ngClass]=\"footerDetail === selectedStep ? 'selected-step' : 'other-step'\">\n <span class=\"footer-text\">\n {{footerDetail?.title}}\n <ng-container *ngIf=\"footerDetail?.count\">\n <span>({{footerDetail?.count}})</span>\n </ng-container>\n </span>\n <ng-container *ngIf=\"footerDetail?.chipData\">\n <span>\n <sa-chip [type]=\"footerDetail?.chipData.type\" [state]=\"footerDetail?.chipData.state\"\n [filling]=\"footerDetail?.chipData.filling\" [text]=\"footerDetail?.chipData.text\"\n [iconPosition]='footerDetail?.chipData.iconPosition'\n [iconPath]=\"footerDetail?.chipData.iconPath\">\n </sa-chip>\n </span>\n </ng-container>\n </div>\n </ng-container>\n </div>\n </div>\n\n <div class=\"right-card-container\">\n @if(selectedStep?.messageContent || selectedStep?.messageBanner?.content){\n <div class=\"message-container\">\n <sa-message-banner [bannerIcon]=\"selectedStep?.messageBanner?.bannerIcon\"\n [bannerIconSize]=\"selectedStep?.messageBanner?.bannerIconSize\" \n [buttonIcon]=\"selectedStep?.messageBanner?.buttonIcon\"\n [buttonType]=\"selectedStep?.messageBanner?.buttonType\"\n [buttonSize]=\"selectedStep?.messageBanner?.buttonSize\"\n [buttonIconPosition]=\"selectedStep?.messageBanner?.buttonIconPosition\"\n [actionText]=\"selectedStep?.messageBanner?.buttonText\"\n [buttonIconSize]=\"selectedStep?.messageBanner?.buttonIconSize\"\n [type]=\"selectedStep?.messageBanner?.type || 'info'\">\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent || selectedStep?.messageBanner?.content\">\n </div>\n </sa-message-banner>\n </div>\n }\n <div class=\"heading-container\">\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\n </div>\n <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n <!-- for advanced options -->\n <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\n class=\"menu-card-advanced-features-section\">\n\n <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\n class=\"menuAdvancedAccordion\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <div class=\"panel-container\">\n @if(!selectedStep?.['advancedFeaturesExpanded']){\n <span class=\"d-flex align-center source-icon\">\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\" class=\"d-flex\"\n customClass=\"colored-icon\" size=\"16\"></sa-icon>\n </span>\n }@else{\n <span class=\"d-flex align-center\">\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\" class=\"d-flex\"\n size=\"20\"></sa-icon>\n </span>\n }\n <span class=\"advanced-title\">{{ selectedStep?.['advancedFeaturesExpanded'] ?\n selectedStep?.['advancedFeatureToggleTitle'] :\n selectedStep?.['advancedFeatureTitle'] }}</span>\n </div>\n </mat-panel-title>\n </mat-expansion-panel-header>\n <div class=\"expansion-container\">\n @if(selectedStep?.advancedFeatureDisclaimer){\n <div class=\"disclaimer-container\">\n <sa-message-banner [type]=\"'disclaimer'\">\n <div class=\"disclaimer-content\">\n @if(selectedStep?.advancedFeatureDisclaimerTooltip){\n <span class=\"tooltip-container\">\n <sa-icon icon=\"infoCircleOutlined\"\n [matTooltip]=\"selectedStep?.advancedFeatureDisclaimerTooltip\" customClass=\"info-icon\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\n </div>\n @if(selectedStep?.advancedFeatureDisclaimerButtons) {\n <div class=\"disclaimer-buttons-container\">\n <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (click)=\"actionHandler(button, $event)\"></sa-button>\n </ng-container>\n </div>\n }\n </sa-message-banner>\n </div>\n }\n <div class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n </div>\n </mat-expansion-panel>\n </div>\n @if(selectedStep?.connectedSourcesList && selectedStep.connectedSourcesList.length > 0) {\n <div class=\"heading-container\">\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Connected Sources'}}:</span>\n </div>\n <div class=\"cards-container\">\n <ng-container *ngFor=\"let source of selectedStep.connectedSourcesList\">\n <ng-container\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\n </ng-container>\n </ng-container>\n </div>\n }\n </div>\n</div>\n\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\n class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n <div class=\"sa-menu-card-title-icon-container\">\n <div class=\"sa-menu-card-custom-title\">\n <ng-container *ngIf=\"source.logoUrl\">\n <sa-icon [img]=\"source.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n </ng-container>\n <span [matTooltip]=\"source?.tooltip\">\n {{source?.name}}\n <ng-container *ngIf=\"source?.count\">\n <span>({{source.count}})</span>\n </ng-container>\n </span>\n <ng-container *ngIf=\"source?.chipData\">\n <span>\n <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\n [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\n [iconPosition]='source?.chipData.iconPosition'\n [iconPath]=\"source?.chipData.iconPath\">\n </sa-chip>\n </span>\n </ng-container>\n </div>\n </div>\n <ng-container\n *ngIf=\"!source.disabled && (selectedStep?.actionButton && (selectedStep?.showActionActionButton ? actionButton : null)) as button\">\n <div class=\"sa-card-titleIcon no-margin\">\n <sa-card-title-actions>\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\n [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, button, $event)\">\n </sa-button>\n </sa-card-title-actions>\n </div>\n </ng-container>\n </div>\n </sa-card-title-header>\n </sa-card>\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.right-card-container::-webkit-scrollbar,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar{width:8px;background:transparent}.right-card-container:hover::-webkit-scrollbar,::ng-deep .menu-card-container .guide-container:hover::-webkit-scrollbar{width:8px}.right-card-container::-webkit-scrollbar-thumb,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar-thumb{background-color:#0003;border-radius:4px}.right-card-container::-webkit-scrollbar-thumb:hover,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.right-card-container:hover,::ng-deep .menu-card-container .guide-container:hover{scrollbar-width:thin}.step-title{display:flex;justify-content:space-between}.mandatory{width:101px;height:20px;gap:var(--Small8px);opacity:0px;display:inline-block;position:relative;top:3px;padding:0rem .3rem}.step-title .title{padding:.35rem;border-radius:.25rem;display:inline-flex}.step-content .selected-step{background:var(--primary-500);color:#fff;border-radius:.3rem}.step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.step-content{width:-webkit-fill-available}.card-footer-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);padding-left:1.75rem;padding-right:1.75rem}.horizontal-line{border:.025rem solid var(--grey-100, #eaecf0);width:-webkit-fill-available}.card-footer-container .footer-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--small-20px, 20px);letter-spacing:.25px}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,31rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.menu-card-advanced-features-section{width:-webkit-fill-available}.menu-card-advanced-features-section .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.expansion-container{display:flex;flex-direction:column;gap:var(--small-16px)}.menuAdvancedAccordion .disclaimer-content{display:flex;gap:var(--small-8px);align-items:center}.menuAdvancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menuAdvancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .menuAdvancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.menuAdvancedAccordion .panel-container .material-icons{font-size:1.375rem}.menuAdvancedAccordion .chip-container{margin-left:auto}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.tooltip-icon{display:flex;align-items:center}.d-flex{display:flex}.sa-menu-card-custom-title,.sa-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.panel-container{display:flex;padding:6px var(--small-12px, 12px);justify-content:center;align-items:center;gap:.656rem;align-self:stretch}::ng-deep .menu-card-container .mat-expansion-panel-header{padding:0}::ng-deep .menu-card-container .mat-expansion-panel-body{padding:0 0 16px}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}::ng-deep .disabled-card .menuCardSourceContainer .sa-button{cursor:auto}::ng-deep .enabled-card{transition:border .3s ease,background .3s ease}.menuCardSourceContainer{align-items:center}::ng-deep .enabled-card .menuCardSourceContainer:hover{border:1px solid var(--grey-100);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .disabled-card .menuCardSourceContainer.sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .menuCardSourceContainer .no-margin .sa-card-title-actions{margin:0}.heading-style{color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep .menu-card-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .menu-card-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}.menu-card-container .card-footer-container .footer.other-step:hover{background:var(--primary-50);border-radius:.25rem}.card-footer-container .footer{width:-webkit-fill-available;padding:var(--small-8px, 8px);cursor:pointer;display:flex;align-items:center}.menu-card-container .footer.selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .footer.selected-step .footer-text{color:#fff}.menu-card-container .message-container{width:-webkit-fill-available}.menu-card-container .message-container .message-content{display:flex;justify-content:start;flex:1;align-items:center;color:var(--text-highemphasis, #1C1B20);gap:var(--small-12px);font-size:var(--small-14px);font-style:normal;font-weight:400}::ng-deep .menu-card-advanced-features-section .mat-expanded .panel-container{gap:var(--small-8px)}\n"] }]
|
|
1033
|
+
args: [{ selector: 'sa-menu-card', standalone: true, imports: [ChipsComponent, CommonModule, GuideCardComponent, FormsModule, ReactiveFormsModule, FormlyModule, CardComponent, CardCustomHeaderComponent, IconComponent, MatExpansionModule, ButtonComponent, CardTitleActionsComponent, MatTooltipModule, MessageBannerComponent], template: "<div class=\"menu-card-container\">\r\n <div class=\"left-card-container\">\r\n <sa-guide-card [title]=\"'Categories:'\" [steps]=\"steps\" [selectable]=\"true\"\r\n (onStepClicked)=\"onStepChanged($event)\" [selectedStep]=\"selectedStep\"></sa-guide-card>\r\n <div class=\"card-footer-container\">\r\n <span class=\"horizontal-line\"></span>\r\n <ng-container *ngFor=\"let footerDetail of footerDetails\">\r\n <div (click)=\"showSources(footerDetail)\" class=\"footer\"\r\n [ngClass]=\"footerDetail === selectedStep ? 'selected-step' : 'other-step'\">\r\n <span class=\"footer-text\">\r\n {{footerDetail?.title}}\r\n <ng-container *ngIf=\"footerDetail?.count\">\r\n <span>({{footerDetail?.count}})</span>\r\n </ng-container>\r\n </span>\r\n <ng-container *ngIf=\"footerDetail?.chipData\">\r\n <span>\r\n <sa-chip [type]=\"footerDetail?.chipData.type\" [state]=\"footerDetail?.chipData.state\"\r\n [filling]=\"footerDetail?.chipData.filling\" [text]=\"footerDetail?.chipData.text\"\r\n [iconPosition]='footerDetail?.chipData.iconPosition'\r\n [iconPath]=\"footerDetail?.chipData.iconPath\">\r\n </sa-chip>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <div class=\"right-card-container\">\r\n @if(selectedStep?.messageContent || selectedStep?.messageBanner?.content){\r\n <div class=\"message-container\">\r\n <sa-message-banner [bannerIcon]=\"selectedStep?.messageBanner?.bannerIcon\"\r\n [bannerIconSize]=\"selectedStep?.messageBanner?.bannerIconSize\" \r\n [buttonIcon]=\"selectedStep?.messageBanner?.buttonIcon\"\r\n [buttonType]=\"selectedStep?.messageBanner?.buttonType\"\r\n [buttonSize]=\"selectedStep?.messageBanner?.buttonSize\"\r\n [buttonIconPosition]=\"selectedStep?.messageBanner?.buttonIconPosition\"\r\n [actionText]=\"selectedStep?.messageBanner?.buttonText\"\r\n [buttonIconSize]=\"selectedStep?.messageBanner?.buttonIconSize\"\r\n [type]=\"selectedStep?.messageBanner?.type || 'info'\">\r\n <div class=\"message-content\" [innerHtml]=\"selectedStep?.messageContent || selectedStep?.messageBanner?.content\">\r\n </div>\r\n </sa-message-banner>\r\n </div>\r\n }\r\n <div class=\"heading-container\">\r\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Available Sources'}}:</span>\r\n </div>\r\n <div *ngIf=\"selectedStep?.sourcesList\" class=\"cards-container\">\r\n <ng-container *ngFor=\"let source of selectedStep.sourcesList\">\r\n <ng-container\r\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n <!-- for advanced options -->\r\n <div *ngIf=\"selectedStep?.advancedSourcesList && selectedStep.advancedSourcesList.length > 0\"\r\n class=\"menu-card-advanced-features-section\">\r\n\r\n <mat-expansion-panel hideToggle [expanded]=\"selectedStep?.advancedFeaturesExpanded || false\"\r\n (opened)=\"onAdvancedFeaturesOpened()\" (closed)=\"onAdvancedFeaturesClosed()\"\r\n class=\"menuAdvancedAccordion\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n <div class=\"panel-container\">\r\n @if(!selectedStep?.['advancedFeaturesExpanded']){\r\n <span class=\"d-flex align-center source-icon\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureCollapsedIcon'] || 'sourcesOutlined'\" class=\"d-flex\"\r\n customClass=\"colored-icon\" size=\"16\"></sa-icon>\r\n </span>\r\n }@else{\r\n <span class=\"d-flex align-center\">\r\n <sa-icon [icon]=\"props?.['advancedFeatureExpandedIcon'] || 'downChevronOutlined'\" class=\"d-flex\"\r\n size=\"20\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"advanced-title\">{{ selectedStep?.['advancedFeaturesExpanded'] ?\r\n selectedStep?.['advancedFeatureToggleTitle'] :\r\n selectedStep?.['advancedFeatureTitle'] }}</span>\r\n </div>\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"expansion-container\">\r\n @if(selectedStep?.advancedFeatureDisclaimer){\r\n <div class=\"disclaimer-container\">\r\n <sa-message-banner [type]=\"'disclaimer'\">\r\n <div class=\"disclaimer-content\">\r\n @if(selectedStep?.advancedFeatureDisclaimerTooltip){\r\n <span class=\"tooltip-container\">\r\n <sa-icon icon=\"infoCircleOutlined\"\r\n [matTooltip]=\"selectedStep?.advancedFeatureDisclaimerTooltip\" customClass=\"info-icon\"\r\n class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n <span class=\"disclaimer-style\">{{selectedStep?.advancedFeatureDisclaimer}}</span>\r\n </div>\r\n @if(selectedStep?.advancedFeatureDisclaimerButtons) {\r\n <div class=\"disclaimer-buttons-container\">\r\n <ng-container *ngFor=\"let button of selectedStep.advancedFeatureDisclaimerButtons\">\r\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\r\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (click)=\"actionHandler(button, $event)\"></sa-button>\r\n </ng-container>\r\n </div>\r\n }\r\n </sa-message-banner>\r\n </div>\r\n }\r\n <div class=\"cards-container\">\r\n <ng-container *ngFor=\"let source of selectedStep?.advancedSourcesList\">\r\n <ng-container\r\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n </div>\r\n @if(selectedStep?.connectedSourcesList && selectedStep.connectedSourcesList.length > 0) {\r\n <div class=\"heading-container\">\r\n <span class=\"heading-style\">{{selectedStep?.sourcesHeading || 'Connected Sources'}}:</span>\r\n </div>\r\n <div class=\"cards-container\">\r\n <ng-container *ngFor=\"let source of selectedStep.connectedSourcesList\">\r\n <ng-container\r\n *ngTemplateOutlet=\"cardTemplate; context: { source: source, selectedStep: selectedStep, actionButton: selectedStep?.actionButton }\">\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n\r\n<ng-template #cardTemplate let-source=\"source\" let-selectedStep=\"selectedStep\" let-actionButton=\"actionButton\">\r\n <sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"selectedStep.sourcesCardWidth || '471px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"selectedStep.customWrapperClass || customClassWrapper\"\r\n class=\"{{source.disabled ? 'disabled-card': 'enabled-card'}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n <div class=\"sa-menu-card-title-icon-container\">\r\n <div class=\"sa-menu-card-custom-title\">\r\n <ng-container *ngIf=\"source.logoUrl\">\r\n <sa-icon [img]=\"source.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\r\n </ng-container>\r\n <span [matTooltip]=\"source?.tooltip\">\r\n {{source?.name}}\r\n <ng-container *ngIf=\"source?.count\">\r\n <span>({{source.count}})</span>\r\n </ng-container>\r\n </span>\r\n <ng-container *ngIf=\"source?.chipData\">\r\n <span>\r\n <sa-chip [type]=\"source?.chipData.type\" [state]=\"source?.chipData.state\"\r\n [filling]=\"source?.chipData.filling\" [text]=\"source?.chipData.text\"\r\n [iconPosition]='source?.chipData.iconPosition'\r\n [iconPath]=\"source?.chipData.iconPath\">\r\n </sa-chip>\r\n </span>\r\n </ng-container>\r\n </div>\r\n </div>\r\n <ng-container\r\n *ngIf=\"!source.disabled && (selectedStep?.actionButton && (selectedStep?.showActionActionButton ? actionButton : null)) as button\">\r\n <div class=\"sa-card-titleIcon no-margin\">\r\n <sa-card-title-actions>\r\n <sa-button [text]=\"button.text\" [type]=\"button.type\" [size]=\"button.size\"\r\n [state]=\"button.state\" [iconPosition]=\"button.iconPosition\" [icon]=\"button.icon\"\r\n [buttonIconSize]=\"button.buttonIconSize\" (click)=\"onCardClick(source, button, $event)\">\r\n </sa-button>\r\n </sa-card-title-actions>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n</ng-template>", styles: [".menu-card-container{display:flex;gap:var(--small-16px)}.left-card-container{display:flex;flex-direction:column;width:289px;gap:var(--small-16px);background-color:var(--structural-white);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);padding-bottom:1.875rem}.right-card-container{display:flex;padding:var(--medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--Small-16px, 16px);flex:1 0 0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);height:calc(100vh - 25rem);overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.right-card-container::-webkit-scrollbar,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar{width:8px;background:transparent}.right-card-container:hover::-webkit-scrollbar,::ng-deep .menu-card-container .guide-container:hover::-webkit-scrollbar{width:8px}.right-card-container::-webkit-scrollbar-thumb,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar-thumb{background-color:#0003;border-radius:4px}.right-card-container::-webkit-scrollbar-thumb:hover,::ng-deep .menu-card-container .guide-container::-webkit-scrollbar-thumb:hover{background-color:#0000004d}.right-card-container:hover,::ng-deep .menu-card-container .guide-container:hover{scrollbar-width:thin}.step-title{display:flex;justify-content:space-between}.mandatory{width:101px;height:20px;gap:var(--Small8px);opacity:0px;display:inline-block;position:relative;top:3px;padding:0rem .3rem}.step-title .title{padding:.35rem;border-radius:.25rem;display:inline-flex}.step-content .selected-step{background:var(--primary-500);color:#fff;border-radius:.3rem}.step-content .other-step:hover{background:var(--primary-50);border-radius:.25rem}.step-content{width:-webkit-fill-available}.card-footer-container{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-12px, 12px);padding-left:1.75rem;padding-right:1.75rem}.horizontal-line{border:.025rem solid var(--grey-100, #eaecf0);width:-webkit-fill-available}.card-footer-container .footer-text{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--small-20px, 20px);letter-spacing:.25px}.cards-container{display:grid;grid-template-columns:repeat(auto-fill,31rem);gap:1.75rem 2rem;max-width:-webkit-fill-available}.menu-card-advanced-features-section{width:-webkit-fill-available}.menu-card-advanced-features-section .mat-expansion-panel:not([class*=mat-elevation-z]){box-shadow:none}.expansion-container{display:flex;flex-direction:column;gap:var(--small-16px)}.menuAdvancedAccordion .disclaimer-content{display:flex;gap:var(--small-8px);align-items:center}.menuAdvancedAccordion .disclaimer-style{color:var(--text-mediumemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.menuAdvancedAccordion.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled=true]):hover{background:none}.advanced-title{color:var(--primary-500);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:1.375rem;letter-spacing:.25px}.align-center{align-items:center}::ng-deep .menuAdvancedAccordion .mat-expansion-panel-header-title{color:var(--primary-500)}.menuAdvancedAccordion .panel-container .material-icons{font-size:1.375rem}.menuAdvancedAccordion .chip-container{margin-left:auto}.disclaimer-buttons-container{display:flex;margin-left:auto;align-items:center;gap:var(--small-12px)}.tooltip-icon{display:flex;align-items:center}.d-flex{display:flex}.sa-menu-card-custom-title,.sa-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.panel-container{display:flex;padding:6px var(--small-12px, 12px);justify-content:center;align-items:center;gap:.656rem;align-self:stretch}::ng-deep .menu-card-container .mat-expansion-panel-header{padding:0}::ng-deep .menu-card-container .mat-expansion-panel-body{padding:0 0 16px}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}::ng-deep .disabled-card .menuCardSourceContainer .sa-button{cursor:auto}::ng-deep .enabled-card{transition:border .3s ease,background .3s ease}.menuCardSourceContainer{align-items:center}::ng-deep .enabled-card .menuCardSourceContainer:hover{border:1px solid var(--grey-100);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .disabled-card .menuCardSourceContainer.sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .menuCardSourceContainer .no-margin .sa-card-title-actions{margin:0}.heading-style{color:var(--text-highemphasis, #1C1B20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep .menu-card-container .mat-expansion-panel-header{display:flex;height:var(--large-56px, 56px);flex-direction:column;align-items:flex-start;gap:var(--small-16px);flex-shrink:0}::ng-deep .menu-card-container .mat-expansion-panel-header.mat-expanded{height:var(--large-56px, 56px)}.menu-card-container .card-footer-container .footer.other-step:hover{background:var(--primary-50);border-radius:.25rem}.card-footer-container .footer{width:-webkit-fill-available;padding:var(--small-8px, 8px);cursor:pointer;display:flex;align-items:center}.menu-card-container .footer.selected-step{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;background:var(--primary-500);border-radius:.3rem;border-radius:var(--small-4px, 4px)}.menu-card-container .footer.selected-step .footer-text{color:#fff}.menu-card-container .message-container{width:-webkit-fill-available}.menu-card-container .message-container .message-content{display:flex;justify-content:start;flex:1;align-items:center;color:var(--text-highemphasis, #1C1B20);gap:var(--small-12px);font-size:var(--small-14px);font-style:normal;font-weight:400}::ng-deep .menu-card-advanced-features-section .mat-expanded .panel-container{gap:var(--small-8px)}\n"] }]
|
|
1034
1034
|
}], propDecorators: { title: [{
|
|
1035
1035
|
type: Input
|
|
1036
1036
|
}], steps: [{
|
|
@@ -1121,7 +1121,7 @@ class ThumbnailCardComponent {
|
|
|
1121
1121
|
}
|
|
1122
1122
|
}
|
|
1123
1123
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ThumbnailCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1124
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ThumbnailCardComponent, isStandalone: true, selector: "sa-thumbnail-card", inputs: { data: "data", size: "size" }, outputs: { cardClick: "cardClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"thumbnail-card\" [class.small]=\"size === 'small'\" [class.medium]=\"size === 'medium'\"\n [class.large]=\"size === 'large'\" (click)=\"onCardClick()\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"onCardClick()\">\n <sa-card [showCustomCardBody]=\"true\" [customWrapperClass]=\"'sa-card-custom-wrapper'\">\n <sa-card-custom-body>\n <div class=\"thumbnail-content\">\n <div class=\"thumbnail-container\">\n <img [src]=\"data?.thumbnailUrl\" [alt]=\"data?.title\" class=\"thumbnail\">\n </div>\n <div class=\"thumbnail-info\">\n <div class=\"thumbnail-header\">\n <h3 class=\"thumbnail-title\">{{ data?.title }}</h3>\n <div class=\"status-chips\">\n @for (status of data?.statuses; track status.text) {\n <sa-chip [text]=\"status.text\" [type]=\"'small'\" [state]=\"status.state\" [filling]=\"status.filling\"\n [iconPath]=\"status.iconPath\" [iconPosition]=\"status.iconPosition\"\n [largeStateIcon]=\"status.largeStateIcon\" [largeStateText]=\"status.largeStateText\" [matTooltip]=\"status?.tooltip\" matTooltipClass=\"custom-status-tooltip\">\n </sa-chip>\n }\n </div>\n </div>\n <div class=\"thumbnail-metadata\">\n <span class=\"thumbnail-description\" [matTooltip]=\"data?.descriptionTooltip\" matTooltipClass=\"custom-description-tooltip\">{{ data?.description }}</span>\n <span class=\"separator\"></span>\n <span class=\"thumbnail-subtitle\">{{ data?.subtitle }}</span>\n </div>\n </div>\n </div>\n </sa-card-custom-body>\n </sa-card>\n</div>\n", styles: [".thumbnail-card{display:block;cursor:pointer;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.thumbnail-card:hover{transform:translateY(-.2px);background-color:var(--structural-neutral3, #fafafa)}.thumbnail-card:focus{outline-offset:2px}.thumbnail-content{display:flex;flex-direction:column}.thumbnail-container{width:100%;position:relative;overflow:hidden}.thumbnail{width:100%;display:block}.thumbnail-info{padding:var(--small-16px, 16px) var(--small-16px, 16px) var(--small-16px, 16px);display:flex;flex-direction:column;gap:var(--small-8px, 8px);border-top:1px solid var(--grey-100, #EAECF0)}.thumbnail-header{display:flex;justify-content:space-between;align-items:center}.thumbnail-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--small-20px, 20px);letter-spacing:.1px;margin:0}.status-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}.thumbnail-metadata{display:flex;align-items:center;gap:var(--small-8px, 8px)}.thumbnail-description,.thumbnail-subtitle{font-size:var(--small-12px, 12px);color:var(--text-mediumemphasis, #6D6979);line-height:var(--small-16px, 16px);font-style:normal;font-weight:400}.separator{border-radius:var(--small-3px, 3px);background:var(--grey-100, #EAECF0);width:1px;align-self:stretch}::ng-deep .thumbnail-card .sa-card-wrapper.sa-card-custom-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF);padding:0;overflow:hidden}::ng-deep .custom-description-tooltip .mdc-tooltip__surface.mdc-tooltip__surface-animation{white-space:pre-line;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardBodyComponent, selector: "sa-card-custom-body" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1124
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ThumbnailCardComponent, isStandalone: true, selector: "sa-thumbnail-card", inputs: { data: "data", size: "size" }, outputs: { cardClick: "cardClick" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"thumbnail-card\" [class.small]=\"size === 'small'\" [class.medium]=\"size === 'medium'\"\r\n [class.large]=\"size === 'large'\" (click)=\"onCardClick()\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"onCardClick()\">\r\n <sa-card [showCustomCardBody]=\"true\" [customWrapperClass]=\"'sa-card-custom-wrapper'\">\r\n <sa-card-custom-body>\r\n <div class=\"thumbnail-content\">\r\n <div class=\"thumbnail-container\">\r\n <img [src]=\"data?.thumbnailUrl\" [alt]=\"data?.title\" class=\"thumbnail\">\r\n </div>\r\n <div class=\"thumbnail-info\">\r\n <div class=\"thumbnail-header\">\r\n <h3 class=\"thumbnail-title\">{{ data?.title }}</h3>\r\n <div class=\"status-chips\">\r\n @for (status of data?.statuses; track status.text) {\r\n <sa-chip [text]=\"status.text\" [type]=\"'small'\" [state]=\"status.state\" [filling]=\"status.filling\"\r\n [iconPath]=\"status.iconPath\" [iconPosition]=\"status.iconPosition\"\r\n [largeStateIcon]=\"status.largeStateIcon\" [largeStateText]=\"status.largeStateText\" [matTooltip]=\"status?.tooltip\" matTooltipClass=\"custom-status-tooltip\">\r\n </sa-chip>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"thumbnail-metadata\">\r\n <span class=\"thumbnail-description\" [matTooltip]=\"data?.descriptionTooltip\" matTooltipClass=\"custom-description-tooltip\">{{ data?.description }}</span>\r\n <span class=\"separator\"></span>\r\n <span class=\"thumbnail-subtitle\">{{ data?.subtitle }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </sa-card-custom-body>\r\n </sa-card>\r\n</div>\r\n", styles: [".thumbnail-card{display:block;cursor:pointer;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.thumbnail-card:hover{transform:translateY(-.2px);background-color:var(--structural-neutral3, #fafafa)}.thumbnail-card:focus{outline-offset:2px}.thumbnail-content{display:flex;flex-direction:column}.thumbnail-container{width:100%;position:relative;overflow:hidden}.thumbnail{width:100%;display:block}.thumbnail-info{padding:var(--small-16px, 16px) var(--small-16px, 16px) var(--small-16px, 16px);display:flex;flex-direction:column;gap:var(--small-8px, 8px);border-top:1px solid var(--grey-100, #EAECF0)}.thumbnail-header{display:flex;justify-content:space-between;align-items:center}.thumbnail-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--small-20px, 20px);letter-spacing:.1px;margin:0}.status-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}.thumbnail-metadata{display:flex;align-items:center;gap:var(--small-8px, 8px)}.thumbnail-description,.thumbnail-subtitle{font-size:var(--small-12px, 12px);color:var(--text-mediumemphasis, #6D6979);line-height:var(--small-16px, 16px);font-style:normal;font-weight:400}.separator{border-radius:var(--small-3px, 3px);background:var(--grey-100, #EAECF0);width:1px;align-self:stretch}::ng-deep .thumbnail-card .sa-card-wrapper.sa-card-custom-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF);padding:0;overflow:hidden}::ng-deep .custom-description-tooltip .mdc-tooltip__surface.mdc-tooltip__surface-animation{white-space:pre-line;text-align:left}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardBodyComponent, selector: "sa-card-custom-body" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
1125
1125
|
}
|
|
1126
1126
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ThumbnailCardComponent, decorators: [{
|
|
1127
1127
|
type: Component,
|
|
@@ -1133,7 +1133,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1133
1133
|
CardBodyComponent,
|
|
1134
1134
|
CardCustomHeaderComponent,
|
|
1135
1135
|
MatTooltipModule,
|
|
1136
|
-
], template: "<div class=\"thumbnail-card\" [class.small]=\"size === 'small'\" [class.medium]=\"size === 'medium'\"\n [class.large]=\"size === 'large'\" (click)=\"onCardClick()\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"onCardClick()\">\n <sa-card [showCustomCardBody]=\"true\" [customWrapperClass]=\"'sa-card-custom-wrapper'\">\n <sa-card-custom-body>\n <div class=\"thumbnail-content\">\n <div class=\"thumbnail-container\">\n <img [src]=\"data?.thumbnailUrl\" [alt]=\"data?.title\" class=\"thumbnail\">\n </div>\n <div class=\"thumbnail-info\">\n <div class=\"thumbnail-header\">\n <h3 class=\"thumbnail-title\">{{ data?.title }}</h3>\n <div class=\"status-chips\">\n @for (status of data?.statuses; track status.text) {\n <sa-chip [text]=\"status.text\" [type]=\"'small'\" [state]=\"status.state\" [filling]=\"status.filling\"\n [iconPath]=\"status.iconPath\" [iconPosition]=\"status.iconPosition\"\n [largeStateIcon]=\"status.largeStateIcon\" [largeStateText]=\"status.largeStateText\" [matTooltip]=\"status?.tooltip\" matTooltipClass=\"custom-status-tooltip\">\n </sa-chip>\n }\n </div>\n </div>\n <div class=\"thumbnail-metadata\">\n <span class=\"thumbnail-description\" [matTooltip]=\"data?.descriptionTooltip\" matTooltipClass=\"custom-description-tooltip\">{{ data?.description }}</span>\n <span class=\"separator\"></span>\n <span class=\"thumbnail-subtitle\">{{ data?.subtitle }}</span>\n </div>\n </div>\n </div>\n </sa-card-custom-body>\n </sa-card>\n</div>\n", styles: [".thumbnail-card{display:block;cursor:pointer;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.thumbnail-card:hover{transform:translateY(-.2px);background-color:var(--structural-neutral3, #fafafa)}.thumbnail-card:focus{outline-offset:2px}.thumbnail-content{display:flex;flex-direction:column}.thumbnail-container{width:100%;position:relative;overflow:hidden}.thumbnail{width:100%;display:block}.thumbnail-info{padding:var(--small-16px, 16px) var(--small-16px, 16px) var(--small-16px, 16px);display:flex;flex-direction:column;gap:var(--small-8px, 8px);border-top:1px solid var(--grey-100, #EAECF0)}.thumbnail-header{display:flex;justify-content:space-between;align-items:center}.thumbnail-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--small-20px, 20px);letter-spacing:.1px;margin:0}.status-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}.thumbnail-metadata{display:flex;align-items:center;gap:var(--small-8px, 8px)}.thumbnail-description,.thumbnail-subtitle{font-size:var(--small-12px, 12px);color:var(--text-mediumemphasis, #6D6979);line-height:var(--small-16px, 16px);font-style:normal;font-weight:400}.separator{border-radius:var(--small-3px, 3px);background:var(--grey-100, #EAECF0);width:1px;align-self:stretch}::ng-deep .thumbnail-card .sa-card-wrapper.sa-card-custom-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF);padding:0;overflow:hidden}::ng-deep .custom-description-tooltip .mdc-tooltip__surface.mdc-tooltip__surface-animation{white-space:pre-line;text-align:left}\n"] }]
|
|
1136
|
+
], template: "<div class=\"thumbnail-card\" [class.small]=\"size === 'small'\" [class.medium]=\"size === 'medium'\"\r\n [class.large]=\"size === 'large'\" (click)=\"onCardClick()\" role=\"button\" tabindex=\"0\" (keydown.enter)=\"onCardClick()\">\r\n <sa-card [showCustomCardBody]=\"true\" [customWrapperClass]=\"'sa-card-custom-wrapper'\">\r\n <sa-card-custom-body>\r\n <div class=\"thumbnail-content\">\r\n <div class=\"thumbnail-container\">\r\n <img [src]=\"data?.thumbnailUrl\" [alt]=\"data?.title\" class=\"thumbnail\">\r\n </div>\r\n <div class=\"thumbnail-info\">\r\n <div class=\"thumbnail-header\">\r\n <h3 class=\"thumbnail-title\">{{ data?.title }}</h3>\r\n <div class=\"status-chips\">\r\n @for (status of data?.statuses; track status.text) {\r\n <sa-chip [text]=\"status.text\" [type]=\"'small'\" [state]=\"status.state\" [filling]=\"status.filling\"\r\n [iconPath]=\"status.iconPath\" [iconPosition]=\"status.iconPosition\"\r\n [largeStateIcon]=\"status.largeStateIcon\" [largeStateText]=\"status.largeStateText\" [matTooltip]=\"status?.tooltip\" matTooltipClass=\"custom-status-tooltip\">\r\n </sa-chip>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"thumbnail-metadata\">\r\n <span class=\"thumbnail-description\" [matTooltip]=\"data?.descriptionTooltip\" matTooltipClass=\"custom-description-tooltip\">{{ data?.description }}</span>\r\n <span class=\"separator\"></span>\r\n <span class=\"thumbnail-subtitle\">{{ data?.subtitle }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </sa-card-custom-body>\r\n </sa-card>\r\n</div>\r\n", styles: [".thumbnail-card{display:block;cursor:pointer;transition:transform .2s ease-in-out,box-shadow .2s ease-in-out}.thumbnail-card:hover{transform:translateY(-.2px);background-color:var(--structural-neutral3, #fafafa)}.thumbnail-card:focus{outline-offset:2px}.thumbnail-content{display:flex;flex-direction:column}.thumbnail-container{width:100%;position:relative;overflow:hidden}.thumbnail{width:100%;display:block}.thumbnail-info{padding:var(--small-16px, 16px) var(--small-16px, 16px) var(--small-16px, 16px);display:flex;flex-direction:column;gap:var(--small-8px, 8px);border-top:1px solid var(--grey-100, #EAECF0)}.thumbnail-header{display:flex;justify-content:space-between;align-items:center}.thumbnail-title{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:500;line-height:var(--small-20px, 20px);letter-spacing:.1px;margin:0}.status-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}.thumbnail-metadata{display:flex;align-items:center;gap:var(--small-8px, 8px)}.thumbnail-description,.thumbnail-subtitle{font-size:var(--small-12px, 12px);color:var(--text-mediumemphasis, #6D6979);line-height:var(--small-16px, 16px);font-style:normal;font-weight:400}.separator{border-radius:var(--small-3px, 3px);background:var(--grey-100, #EAECF0);width:1px;align-self:stretch}::ng-deep .thumbnail-card .sa-card-wrapper.sa-card-custom-wrapper{border-radius:var(--small-4px, 4px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF);padding:0;overflow:hidden}::ng-deep .custom-description-tooltip .mdc-tooltip__surface.mdc-tooltip__surface-animation{white-space:pre-line;text-align:left}\n"] }]
|
|
1137
1137
|
}], propDecorators: { data: [{
|
|
1138
1138
|
type: Input
|
|
1139
1139
|
}], size: [{
|
|
@@ -1251,11 +1251,11 @@ class CardCarouselComponent {
|
|
|
1251
1251
|
}
|
|
1252
1252
|
}
|
|
1253
1253
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1254
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardCarouselComponent, isStandalone: true, selector: "sa-card-carousel", inputs: { cards: "cards", interval: "interval", autoPlay: "autoPlay", showNavigationArrows: "showNavigationArrows", showIndicators: "showIndicators", showBrandFooter: "showBrandFooter" }, usesOnChanges: true, ngImport: i0, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n <div class=\"carousel-top-wrapper\">\n <div class=\"controls\">\n @if (showIndicators) {\n <div class=\"dots\">\n @for (card of cards; track card.id; let i = $index) {\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n }\n </div>\n }\n @if (showNavigationArrows) {\n <div class=\"arrow-controls\">\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n </div>\n }\n </div>\n\n <div class=\"card-container\">\n @if (cards[currentIndex]) {\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\n [showHeaderBodyDivider]=\"true\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\n <div class=\"sa-card-title-subtitle-container\">\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex]?.title }}</div>\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex]?.subtitle }}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-icon [icon]=\"cards[currentIndex]?.logoIcon\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n }\n </div>\n </div>\n\n @if (showBrandFooter) {\n <div class=\"brand-logos-container\">\n <div class=\"brand-logos\">\n @for (logo of visibleLogos; track logo.id) {\n <div> \n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n </div>\n }\n </div>\n </div>\n }\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;width:17rem;overflow:hidden}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1254
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CardCarouselComponent, isStandalone: true, selector: "sa-card-carousel", inputs: { cards: "cards", interval: "interval", autoPlay: "autoPlay", showNavigationArrows: "showNavigationArrows", showIndicators: "showIndicators", showBrandFooter: "showBrandFooter" }, usesOnChanges: true, ngImport: i0, template: "<!-- card-carousel.component.html -->\r\n<div class=\"carousel-container\">\r\n <div class=\"carousel-top-wrapper\">\r\n <div class=\"controls\">\r\n @if (showIndicators) {\r\n <div class=\"dots\">\r\n @for (card of cards; track card.id; let i = $index) {\r\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\r\n }\r\n </div>\r\n }\r\n @if (showNavigationArrows) {\r\n <div class=\"arrow-controls\">\r\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\r\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"card-container\">\r\n @if (cards[currentIndex]) {\r\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\r\n [showHeaderBodyDivider]=\"true\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-custom-header-container\">\r\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\r\n <div class=\"sa-card-title-subtitle-container\">\r\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex]?.title }}</div>\r\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex]?.subtitle }}</div>\r\n </div>\r\n <div class=\"sa-card-titleIcon\">\r\n <sa-icon [icon]=\"cards[currentIndex]?.logoIcon\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showBrandFooter) {\r\n <div class=\"brand-logos-container\">\r\n <div class=\"brand-logos\">\r\n @for (logo of visibleLogos; track logo.id) {\r\n <div> \r\n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\r\n [customClass]=\"'logo-style'\">\r\n </sa-icon>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;width:17rem;overflow:hidden}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1255
1255
|
}
|
|
1256
1256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CardCarouselComponent, decorators: [{
|
|
1257
1257
|
type: Component,
|
|
1258
|
-
args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent, AvatarComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- card-carousel.component.html -->\n<div class=\"carousel-container\">\n <div class=\"carousel-top-wrapper\">\n <div class=\"controls\">\n @if (showIndicators) {\n <div class=\"dots\">\n @for (card of cards; track card.id; let i = $index) {\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\n }\n </div>\n }\n @if (showNavigationArrows) {\n <div class=\"arrow-controls\">\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\n </div>\n }\n </div>\n\n <div class=\"card-container\">\n @if (cards[currentIndex]) {\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\n [showHeaderBodyDivider]=\"true\">\n <sa-card-title-header>\n <div class=\"sa-card-custom-header-container\">\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\n <div class=\"sa-card-title-subtitle-container\">\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex]?.title }}</div>\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex]?.subtitle }}</div>\n </div>\n <div class=\"sa-card-titleIcon\">\n <sa-icon [icon]=\"cards[currentIndex]?.logoIcon\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\n </div>\n </div>\n </sa-card-title-header>\n </sa-card>\n }\n </div>\n </div>\n\n @if (showBrandFooter) {\n <div class=\"brand-logos-container\">\n <div class=\"brand-logos\">\n @for (logo of visibleLogos; track logo.id) {\n <div> \n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\n [customClass]=\"'logo-style'\">\n </sa-icon>\n </div>\n }\n </div>\n </div>\n }\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;width:17rem;overflow:hidden}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"] }]
|
|
1258
|
+
args: [{ selector: 'sa-card-carousel', standalone: true, imports: [CardComponent, IconComponent, CardCustomHeaderComponent, AvatarComponent], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- card-carousel.component.html -->\r\n<div class=\"carousel-container\">\r\n <div class=\"carousel-top-wrapper\">\r\n <div class=\"controls\">\r\n @if (showIndicators) {\r\n <div class=\"dots\">\r\n @for (card of cards; track card.id; let i = $index) {\r\n <span class=\"dot\" [class.active]=\"i === currentIndex\" (click)=\"selectCard(i)\"></span>\r\n }\r\n </div>\r\n }\r\n @if (showNavigationArrows) {\r\n <div class=\"arrow-controls\">\r\n <sa-icon [icon]=\"'leftChevronCircle'\" size=\"24\" (click)=\"prev()\"></sa-icon>\r\n <sa-icon [icon]=\"'rightChevronCircle'\" size=\"24\" (click)=\"next()\"></sa-icon>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"card-container\">\r\n @if (cards[currentIndex]) {\r\n <sa-card [customWrapperClass]=\"'sa-card-custom-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n [showCardHeader]=\"true\" [showCardBody]=\"true\" [body]=\"cards[currentIndex]?.body\"\r\n [showHeaderBodyDivider]=\"true\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-custom-header-container\">\r\n <sa-avatar [altText]=\"cards[currentIndex]?.altText\" [imagePath]=\"cards[currentIndex]?.avatarIcon\" [size]=\"'extra-large'\"></sa-avatar>\r\n <div class=\"sa-card-title-subtitle-container\">\r\n <div class=\"sa-card-custom-title\">{{ cards[currentIndex]?.title }}</div>\r\n <div class=\"sa-card-subtitle\">{{ cards[currentIndex]?.subtitle }}</div>\r\n </div>\r\n <div class=\"sa-card-titleIcon\">\r\n <sa-icon [icon]=\"cards[currentIndex]?.logoIcon\" [iconUrl]=\"cards[currentIndex]?.logoUrl\" [size]=\"cards[currentIndex]?.logoSize || '50'\" customClass=\"logo-style\"></sa-icon>\r\n </div>\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if (showBrandFooter) {\r\n <div class=\"brand-logos-container\">\r\n <div class=\"brand-logos\">\r\n @for (logo of visibleLogos; track logo.id) {\r\n <div> \r\n <sa-icon [icon]=\"logo.logoIcon\" [iconUrl]=\"logo.logoUrl\" [size]=\"logo.logoSize || '50'\" [class.active]=\"logo.isActive\" (click)=\"selectCard(logo.index)\"\r\n [customClass]=\"'logo-style'\">\r\n </sa-icon>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n</div>", styles: [".carousel-container{display:flex;flex-direction:column;align-items:center;width:100%}.controls{display:flex;align-items:center;margin:0 0 var(--medium-20px) 0;width:100%;min-height:var(--medium-32px)}.dots{display:inline-flex;gap:var(--small-4px);align-items:center;width:17rem;overflow:hidden}.arrow-controls{display:flex;align-items:center;margin-top:var(--small-4px);gap:var(--small-12px);margin-left:auto}.arrow-controls sa-icon{cursor:pointer}.dot{width:var(--small-6px);height:var(--small-6px);min-width:var(--small-6px);min-height:var(--small-6px);border-radius:50%;background-color:var(--grey-200);margin:0 var(--small-6px);cursor:pointer;display:block}.dot.active{background-color:var(--primary-500);width:var(--small-8px);height:var(--small-8px);min-width:var(--small-8px);min-height:var(--small-8px)}.brand-logos-container{width:100%;margin-top:var(--medium-32px);overflow:hidden;max-width:28.9375rem}.brand-logos{display:flex;gap:var(--medium-24px);justify-content:center;align-items:center}.brand-logos sa-icon{flex:0 0 60px;opacity:.5;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;height:var(--medium-32px);max-height:var(--medium-32px);min-height:var(--medium-32px)}.brand-logos sa-icon.active{opacity:1}.brand-logos sa-icon:hover{opacity:1}.brand-logos sa-icon.active:hover{opacity:1}.card-container{position:relative;width:100%;display:grid}.card-container sa-card{width:100%;grid-area:1 / 1;opacity:1;transition:opacity .3s ease}.card-container sa-card ::ng-deep .sa-card-body{transition:opacity .3s ease;display:flex;align-items:flex-start}\n"] }]
|
|
1259
1259
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], propDecorators: { cards: [{
|
|
1260
1260
|
type: Input
|
|
1261
1261
|
}], interval: [{
|
|
@@ -1293,11 +1293,11 @@ class CategoriesNavComponent {
|
|
|
1293
1293
|
this.helpButtonClicked.emit();
|
|
1294
1294
|
}
|
|
1295
1295
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CategoriesNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1296
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CategoriesNavComponent, isStandalone: true, selector: "sa-categories-nav", inputs: { config: "config", selectedCategoryId: "selectedCategoryId" }, outputs: { categorySelected: "categorySelected", helpButtonClicked: "helpButtonClicked" }, ngImport: i0, template: "<div class=\"categories-nav\">\n <div class=\"categories-header\">\n <h3>{{ title }}</h3>\n </div>\n <div class=\"categories-list\">\n <div \n *ngFor=\"let category of categories\" \n class=\"category-item\"\n [class.selected]=\"category.id === selectedCategoryId\"\n (click)=\"onCategoryClick(category)\">\n <span class=\"category-label\">{{ category.label }}</span>\n </div>\n </div>\n\n <!-- Configurable Help Section -->\n <div *ngIf=\"helpSection?.enabled\" class=\"help-section\">\n <div class=\"help-content\">\n <div class=\"help-icon\" *ngIf=\"helpSection.icon\">\n <sa-icon [icon]=\"helpSection.icon\" [size]=\"'20'\"></sa-icon>\n </div>\n <div class=\"help-text\" *ngIf=\"helpSection.title\">\n {{ helpSection.title }}\n </div>\n </div>\n <sa-button\n *ngIf=\"helpSection.button?.text\"\n [size]=\"helpSection.button?.size\"\n [type]=\"helpSection.button?.type\"\n [id]=\"helpSection.button?.id\"\n [state]=\"helpSection.button?.state\"\n [text]=\"helpSection.button?.text\"\n [ImagePath]=\"helpSection.button?.ImagePath\"\n [icon]=\"helpSection.button?.icon\"\n [iconPosition]=\"helpSection.button?.iconPosition\"\n [href]=\"helpSection.button?.href\"\n [hrefTarget]=\"helpSection.button?.hrefTarget\"\n [width]=\"helpSection.button?.width\"\n [isSubmit]=\"helpSection.button?.isSubmit\"\n [buttonIconSize]=\"helpSection.button?.buttonIconSize\"\n [showSpinner]=\"helpSection.button?.showSpinner\"\n (onClickEvent)=\"onHelpButtonClick()\">\n </sa-button>\n </div>\n</div>\n", styles: [".categories-nav{display:flex;flex-direction:column;width:296px;height:100%;max-height:100%;min-height:0;padding:0;align-items:flex-start;gap:var(--small-16px, 16px);flex-shrink:0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);overflow:hidden;box-sizing:border-box}.categories-header{display:flex;padding:var(--Medium-20px, 20px) var(--Medium-20px, 20px) 0px var(--Medium-20px, 20px);align-items:flex-start;gap:10px;align-self:stretch}.categories-header h3{margin:0;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.categories-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-8px, 8px);align-self:stretch;padding:0px var(--small-20px, 20px);overflow-y:auto}.category-item{display:flex;gap:10px;align-items:center;padding:8px;gap:8px;align-self:stretch;border-radius:var(--small-8px, 4px);cursor:pointer}.category-item:hover:not(.selected){background:var(--primary-50, #F4EBFF)}.category-item.selected{background:var(--primary-500, #7F56D9)}.category-label{flex:1 0 0;color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.category-item.selected .category-label{font-family:var(--font-family, Roboto);font-size:14px;color:var(--Structural-White, #FFF);font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.help-section{display:flex;padding:var(--small-16px, 16px) var(--small-8px, 8px);flex-direction:column;align-items:flex-start;gap:var(--Small-12px, 12px);align-self:stretch;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-neutral3, #FAFAFA);margin:0px var(--Small-12px, 20px) 0px var(--Small-12px, 20px)}.help-content{display:flex;align-items:center;gap:var(--Small-4px, 8px)}.help-icon{width:20px;height:20px;flex-shrink:0}.help-icon img{width:24px;height:24px;flex-shrink:0}.help-text{color:var(--Text-High-Emphasis, #1C1B20);text-align:center;font-family:var(--font-family, Roboto);font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }] }); }
|
|
1296
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: CategoriesNavComponent, isStandalone: true, selector: "sa-categories-nav", inputs: { config: "config", selectedCategoryId: "selectedCategoryId" }, outputs: { categorySelected: "categorySelected", helpButtonClicked: "helpButtonClicked" }, ngImport: i0, template: "<div class=\"categories-nav\">\r\n <div class=\"categories-header\">\r\n <h3>{{ title }}</h3>\r\n </div>\r\n <div class=\"categories-list\">\r\n <div \r\n *ngFor=\"let category of categories\" \r\n class=\"category-item\"\r\n [class.selected]=\"category.id === selectedCategoryId\"\r\n (click)=\"onCategoryClick(category)\">\r\n <span class=\"category-label\">{{ category.label }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Configurable Help Section -->\r\n <div *ngIf=\"helpSection?.enabled\" class=\"help-section\">\r\n <div class=\"help-content\">\r\n <div class=\"help-icon\" *ngIf=\"helpSection.icon\">\r\n <sa-icon [icon]=\"helpSection.icon\" [size]=\"'20'\"></sa-icon>\r\n </div>\r\n <div class=\"help-text\" *ngIf=\"helpSection.title\">\r\n {{ helpSection.title }}\r\n </div>\r\n </div>\r\n <sa-button\r\n *ngIf=\"helpSection.button?.text\"\r\n [size]=\"helpSection.button?.size\"\r\n [type]=\"helpSection.button?.type\"\r\n [id]=\"helpSection.button?.id\"\r\n [state]=\"helpSection.button?.state\"\r\n [text]=\"helpSection.button?.text\"\r\n [ImagePath]=\"helpSection.button?.ImagePath\"\r\n [icon]=\"helpSection.button?.icon\"\r\n [iconPosition]=\"helpSection.button?.iconPosition\"\r\n [href]=\"helpSection.button?.href\"\r\n [hrefTarget]=\"helpSection.button?.hrefTarget\"\r\n [width]=\"helpSection.button?.width\"\r\n [isSubmit]=\"helpSection.button?.isSubmit\"\r\n [buttonIconSize]=\"helpSection.button?.buttonIconSize\"\r\n [showSpinner]=\"helpSection.button?.showSpinner\"\r\n (onClickEvent)=\"onHelpButtonClick()\">\r\n </sa-button>\r\n </div>\r\n</div>\r\n", styles: [".categories-nav{display:flex;flex-direction:column;width:296px;height:100%;max-height:100%;min-height:0;padding:0;align-items:flex-start;gap:var(--small-16px, 16px);flex-shrink:0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);overflow:hidden;box-sizing:border-box}.categories-header{display:flex;padding:var(--Medium-20px, 20px) var(--Medium-20px, 20px) 0px var(--Medium-20px, 20px);align-items:flex-start;gap:10px;align-self:stretch}.categories-header h3{margin:0;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.categories-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-8px, 8px);align-self:stretch;padding:0px var(--small-20px, 20px);overflow-y:auto}.category-item{display:flex;gap:10px;align-items:center;padding:8px;gap:8px;align-self:stretch;border-radius:var(--small-8px, 4px);cursor:pointer}.category-item:hover:not(.selected){background:var(--primary-50, #F4EBFF)}.category-item.selected{background:var(--primary-500, #7F56D9)}.category-label{flex:1 0 0;color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.category-item.selected .category-label{font-family:var(--font-family, Roboto);font-size:14px;color:var(--Structural-White, #FFF);font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.help-section{display:flex;padding:var(--small-16px, 16px) var(--small-8px, 8px);flex-direction:column;align-items:flex-start;gap:var(--Small-12px, 12px);align-self:stretch;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-neutral3, #FAFAFA);margin:0px var(--Small-12px, 20px) 0px var(--Small-12px, 20px)}.help-content{display:flex;align-items:center;gap:var(--Small-4px, 8px)}.help-icon{width:20px;height:20px;flex-shrink:0}.help-icon img{width:24px;height:24px;flex-shrink:0}.help-text{color:var(--Text-High-Emphasis, #1C1B20);text-align:center;font-family:var(--font-family, Roboto);font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }] }); }
|
|
1297
1297
|
}
|
|
1298
1298
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CategoriesNavComponent, decorators: [{
|
|
1299
1299
|
type: Component,
|
|
1300
|
-
args: [{ selector: 'sa-categories-nav', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent], template: "<div class=\"categories-nav\">\n <div class=\"categories-header\">\n <h3>{{ title }}</h3>\n </div>\n <div class=\"categories-list\">\n <div \n *ngFor=\"let category of categories\" \n class=\"category-item\"\n [class.selected]=\"category.id === selectedCategoryId\"\n (click)=\"onCategoryClick(category)\">\n <span class=\"category-label\">{{ category.label }}</span>\n </div>\n </div>\n\n <!-- Configurable Help Section -->\n <div *ngIf=\"helpSection?.enabled\" class=\"help-section\">\n <div class=\"help-content\">\n <div class=\"help-icon\" *ngIf=\"helpSection.icon\">\n <sa-icon [icon]=\"helpSection.icon\" [size]=\"'20'\"></sa-icon>\n </div>\n <div class=\"help-text\" *ngIf=\"helpSection.title\">\n {{ helpSection.title }}\n </div>\n </div>\n <sa-button\n *ngIf=\"helpSection.button?.text\"\n [size]=\"helpSection.button?.size\"\n [type]=\"helpSection.button?.type\"\n [id]=\"helpSection.button?.id\"\n [state]=\"helpSection.button?.state\"\n [text]=\"helpSection.button?.text\"\n [ImagePath]=\"helpSection.button?.ImagePath\"\n [icon]=\"helpSection.button?.icon\"\n [iconPosition]=\"helpSection.button?.iconPosition\"\n [href]=\"helpSection.button?.href\"\n [hrefTarget]=\"helpSection.button?.hrefTarget\"\n [width]=\"helpSection.button?.width\"\n [isSubmit]=\"helpSection.button?.isSubmit\"\n [buttonIconSize]=\"helpSection.button?.buttonIconSize\"\n [showSpinner]=\"helpSection.button?.showSpinner\"\n (onClickEvent)=\"onHelpButtonClick()\">\n </sa-button>\n </div>\n</div>\n", styles: [".categories-nav{display:flex;flex-direction:column;width:296px;height:100%;max-height:100%;min-height:0;padding:0;align-items:flex-start;gap:var(--small-16px, 16px);flex-shrink:0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);overflow:hidden;box-sizing:border-box}.categories-header{display:flex;padding:var(--Medium-20px, 20px) var(--Medium-20px, 20px) 0px var(--Medium-20px, 20px);align-items:flex-start;gap:10px;align-self:stretch}.categories-header h3{margin:0;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.categories-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-8px, 8px);align-self:stretch;padding:0px var(--small-20px, 20px);overflow-y:auto}.category-item{display:flex;gap:10px;align-items:center;padding:8px;gap:8px;align-self:stretch;border-radius:var(--small-8px, 4px);cursor:pointer}.category-item:hover:not(.selected){background:var(--primary-50, #F4EBFF)}.category-item.selected{background:var(--primary-500, #7F56D9)}.category-label{flex:1 0 0;color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.category-item.selected .category-label{font-family:var(--font-family, Roboto);font-size:14px;color:var(--Structural-White, #FFF);font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.help-section{display:flex;padding:var(--small-16px, 16px) var(--small-8px, 8px);flex-direction:column;align-items:flex-start;gap:var(--Small-12px, 12px);align-self:stretch;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-neutral3, #FAFAFA);margin:0px var(--Small-12px, 20px) 0px var(--Small-12px, 20px)}.help-content{display:flex;align-items:center;gap:var(--Small-4px, 8px)}.help-icon{width:20px;height:20px;flex-shrink:0}.help-icon img{width:24px;height:24px;flex-shrink:0}.help-text{color:var(--Text-High-Emphasis, #1C1B20);text-align:center;font-family:var(--font-family, Roboto);font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n"] }]
|
|
1300
|
+
args: [{ selector: 'sa-categories-nav', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent], template: "<div class=\"categories-nav\">\r\n <div class=\"categories-header\">\r\n <h3>{{ title }}</h3>\r\n </div>\r\n <div class=\"categories-list\">\r\n <div \r\n *ngFor=\"let category of categories\" \r\n class=\"category-item\"\r\n [class.selected]=\"category.id === selectedCategoryId\"\r\n (click)=\"onCategoryClick(category)\">\r\n <span class=\"category-label\">{{ category.label }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Configurable Help Section -->\r\n <div *ngIf=\"helpSection?.enabled\" class=\"help-section\">\r\n <div class=\"help-content\">\r\n <div class=\"help-icon\" *ngIf=\"helpSection.icon\">\r\n <sa-icon [icon]=\"helpSection.icon\" [size]=\"'20'\"></sa-icon>\r\n </div>\r\n <div class=\"help-text\" *ngIf=\"helpSection.title\">\r\n {{ helpSection.title }}\r\n </div>\r\n </div>\r\n <sa-button\r\n *ngIf=\"helpSection.button?.text\"\r\n [size]=\"helpSection.button?.size\"\r\n [type]=\"helpSection.button?.type\"\r\n [id]=\"helpSection.button?.id\"\r\n [state]=\"helpSection.button?.state\"\r\n [text]=\"helpSection.button?.text\"\r\n [ImagePath]=\"helpSection.button?.ImagePath\"\r\n [icon]=\"helpSection.button?.icon\"\r\n [iconPosition]=\"helpSection.button?.iconPosition\"\r\n [href]=\"helpSection.button?.href\"\r\n [hrefTarget]=\"helpSection.button?.hrefTarget\"\r\n [width]=\"helpSection.button?.width\"\r\n [isSubmit]=\"helpSection.button?.isSubmit\"\r\n [buttonIconSize]=\"helpSection.button?.buttonIconSize\"\r\n [showSpinner]=\"helpSection.button?.showSpinner\"\r\n (onClickEvent)=\"onHelpButtonClick()\">\r\n </sa-button>\r\n </div>\r\n</div>\r\n", styles: [".categories-nav{display:flex;flex-direction:column;width:296px;height:100%;max-height:100%;min-height:0;padding:0;align-items:flex-start;gap:var(--small-16px, 16px);flex-shrink:0;border-radius:var(--Small-8px, 8px);border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);overflow:hidden;box-sizing:border-box}.categories-header{display:flex;padding:var(--Medium-20px, 20px) var(--Medium-20px, 20px) 0px var(--Medium-20px, 20px);align-items:flex-start;gap:10px;align-self:stretch}.categories-header h3{margin:0;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.categories-list{display:flex;flex-direction:column;align-items:flex-start;gap:var(--small-8px, 8px);align-self:stretch;padding:0px var(--small-20px, 20px);overflow-y:auto}.category-item{display:flex;gap:10px;align-items:center;padding:8px;gap:8px;align-self:stretch;border-radius:var(--small-8px, 4px);cursor:pointer}.category-item:hover:not(.selected){background:var(--primary-50, #F4EBFF)}.category-item.selected{background:var(--primary-500, #7F56D9)}.category-label{flex:1 0 0;color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.category-item.selected .category-label{font-family:var(--font-family, Roboto);font-size:14px;color:var(--Structural-White, #FFF);font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px}.help-section{display:flex;padding:var(--small-16px, 16px) var(--small-8px, 8px);flex-direction:column;align-items:flex-start;gap:var(--Small-12px, 12px);align-self:stretch;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-100, #EAECF0);background:var(--structural-neutral3, #FAFAFA);margin:0px var(--Small-12px, 20px) 0px var(--Small-12px, 20px)}.help-content{display:flex;align-items:center;gap:var(--Small-4px, 8px)}.help-icon{width:20px;height:20px;flex-shrink:0}.help-icon img{width:24px;height:24px;flex-shrink:0}.help-text{color:var(--Text-High-Emphasis, #1C1B20);text-align:center;font-family:var(--font-family, Roboto);font-size:12px;font-style:normal;font-weight:400;line-height:16px}\n"] }]
|
|
1301
1301
|
}], propDecorators: { config: [{
|
|
1302
1302
|
type: Input
|
|
1303
1303
|
}], selectedCategoryId: [{
|
|
@@ -1329,27 +1329,27 @@ class CheckboxComponent extends FieldType {
|
|
|
1329
1329
|
return isObservable(options) ? options : of(options || []);
|
|
1330
1330
|
}
|
|
1331
1331
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1332
|
-
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 </div>\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)}.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$3.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
1332
|
+
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\">\r\n <div class=\"title-container\">\r\n @if(props['label']){\r\n <div class=\"form-field-title\">\r\n <span>{{ props['label'] }}</span>\r\n </div>\r\n }\r\n @if(props['description']){\r\n <div class=\"form-field-description\">\r\n <span>{{ props['description'] }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"form-field\">\r\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\r\n <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\r\n (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\r\n {{ option.label }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n @if(props['helpText']){\r\n <div class=\"form-field-helpText\">\r\n <span>{{ props['helpText'] }}</span>\r\n </div>\r\n }\r\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)}.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"], dependencies: [{ kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$3.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "component", type: i1$3.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$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }] }); }
|
|
1333
1333
|
}
|
|
1334
1334
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1335
1335
|
type: Component,
|
|
1336
|
-
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 </div>\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)}.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"] }]
|
|
1336
|
+
args: [{ selector: 'sa-checkbox', standalone: true, imports: [MatChipsModule, CommonModule, FormsModule], template: "<div class=\"checkbox-container\">\r\n <div class=\"title-container\">\r\n @if(props['label']){\r\n <div class=\"form-field-title\">\r\n <span>{{ props['label'] }}</span>\r\n </div>\r\n }\r\n @if(props['description']){\r\n <div class=\"form-field-description\">\r\n <span>{{ props['description'] }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"form-field\">\r\n <mat-chip-listbox selectable multiple [disabled]=\"props.disabled\" aria-label=\"Select options\">\r\n <mat-chip-option *ngFor=\"let option of options$ | async\" class=\"custom-chip\" [value]=\"option.value\"\r\n (click)=\"toggleSelection(option)\" [selected]=\"isSelected(option)\">\r\n {{ option.label }}\r\n </mat-chip-option>\r\n </mat-chip-listbox>\r\n </div>\r\n @if(props['helpText']){\r\n <div class=\"form-field-helpText\">\r\n <span>{{ props['helpText'] }}</span>\r\n </div>\r\n }\r\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)}.checkbox-container .form-field{display:flex;flex-direction:column;gap:var(--small-8px)}\n"] }]
|
|
1337
1337
|
}] });
|
|
1338
1338
|
|
|
1339
1339
|
class TestLibraryComponent {
|
|
1340
1340
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1341
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
|
|
1342
|
-
<p>
|
|
1343
|
-
component-library works!
|
|
1344
|
-
</p>
|
|
1341
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TestLibraryComponent, isStandalone: true, selector: "lib-component-library", ngImport: i0, template: `
|
|
1342
|
+
<p>
|
|
1343
|
+
component-library works!
|
|
1344
|
+
</p>
|
|
1345
1345
|
`, isInline: true, styles: [""] }); }
|
|
1346
1346
|
}
|
|
1347
1347
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TestLibraryComponent, decorators: [{
|
|
1348
1348
|
type: Component,
|
|
1349
|
-
args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
|
|
1350
|
-
<p>
|
|
1351
|
-
component-library works!
|
|
1352
|
-
</p>
|
|
1349
|
+
args: [{ selector: 'lib-component-library', standalone: true, imports: [], template: `
|
|
1350
|
+
<p>
|
|
1351
|
+
component-library works!
|
|
1352
|
+
</p>
|
|
1353
1353
|
` }]
|
|
1354
1354
|
}] });
|
|
1355
1355
|
|
|
@@ -1411,11 +1411,11 @@ class ToolTipComponent {
|
|
|
1411
1411
|
this.toolTipSkipped.emit();
|
|
1412
1412
|
}
|
|
1413
1413
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1414
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition", simpleMode: "simpleMode" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\n <div class=\"tool-tip-horizontal\">\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div> \n <div class=\"tool-tip simple-tooltip\" *ngIf=\"simpleMode\">\n <div class=\"simple-tooltip-content\" \n [class]=\"{ 'vertical-stack': messages.length <= 5, 'grid-stack': messages.length > 5, 'single-item': messages.length === 1 }\">\n <span class=\"simple-tooltip-message\" *ngFor=\"let message of messages\">\n {{message}}\n </span>\n </div>\n \n </div>\n <div class=\"tool-tip\" *ngIf=\"!simpleMode\">\n <div class=\"tool-tip-content\">\n <div class=\"tool-tip-heading\">Heading</div>\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\n {{msg}}\n </div>\n </div>\n <div class=\"tool-tip-break\">\n </div>\n <div class=\"tool-tip-controls\">\n <div class=\"tool-tip-navigate\">\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\n {{msgInd+1}} of {{messages.length}}\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\n </div>\n <div class=\"tool-tip-control-buttons\">\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\n state=\"default\"></sa-button>\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\n </sa-button>\n </div>\n </div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\n</div>\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}.simple-tooltip{display:inline-block;width:auto;height:auto;max-width:500px;max-height:300px;overflow:visible}.simple-tooltip .tool-tip-content{display:flex;width:100%;flex-direction:column;gap:0}.simple-tooltip .tool-tip-message{font-size:var(--small-12px, 12px);font-style:normal;color:var(--structural-white, #FFF);font-weight:400;white-space:nowrap;font-family:var(--font-family, Roboto);letter-spacing:.25px}.simple-tooltip-content{display:grid;gap:6px 12px;padding:var(--small-8px,8px) var(--small-12px,12px);justify-items:flex-start;width:100%;max-width:400px}.simple-tooltip-message{color:var(--structural-white, #FFF);font-size:var(--small-14px, 14px);font-weight:var(--font-weight-regular, 400);line-height:20px;white-space:nowrap;display:block}.simple-tooltip-content.vertical-stack{grid-template-columns:1fr;justify-items:flex-start}.simple-tooltip-content.grid-stack{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.simple-tooltip-content.single-item .simple-tooltip-message{white-space:normal}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ToolTipComponent, isStandalone: true, selector: "sa-tool-tip", inputs: { messages: "messages", pointerPosition: "pointerPosition", simpleMode: "simpleMode" }, outputs: { toolTipSkipped: "toolTipSkipped", toolTipSeen: "toolTipSeen" }, ngImport: i0, template: "<div class=\"tool-tip-vertical\">\r\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\r\n <div class=\"tool-tip-horizontal\">\r\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div> \r\n <div class=\"tool-tip simple-tooltip\" *ngIf=\"simpleMode\">\r\n <div class=\"simple-tooltip-content\" \r\n [class]=\"{ 'vertical-stack': messages.length <= 5, 'grid-stack': messages.length > 5, 'single-item': messages.length === 1 }\">\r\n <span class=\"simple-tooltip-message\" *ngFor=\"let message of messages\">\r\n {{message}}\r\n </span>\r\n </div>\r\n \r\n </div>\r\n <div class=\"tool-tip\" *ngIf=\"!simpleMode\">\r\n <div class=\"tool-tip-content\">\r\n <div class=\"tool-tip-heading\">Heading</div>\r\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\r\n {{msg}}\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-break\">\r\n </div>\r\n <div class=\"tool-tip-controls\">\r\n <div class=\"tool-tip-navigate\">\r\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\r\n {{msgInd+1}} of {{messages.length}}\r\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\r\n </div>\r\n <div class=\"tool-tip-control-buttons\">\r\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\r\n state=\"default\"></sa-button>\r\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\r\n</div>\r\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}.simple-tooltip{display:inline-block;width:auto;height:auto;max-width:500px;max-height:300px;overflow:visible}.simple-tooltip .tool-tip-content{display:flex;width:100%;flex-direction:column;gap:0}.simple-tooltip .tool-tip-message{font-size:var(--small-12px, 12px);font-style:normal;color:var(--structural-white, #FFF);font-weight:400;white-space:nowrap;font-family:var(--font-family, Roboto);letter-spacing:.25px}.simple-tooltip-content{display:grid;gap:6px 12px;padding:var(--small-8px,8px) var(--small-12px,12px);justify-items:flex-start;width:100%;max-width:400px}.simple-tooltip-message{color:var(--structural-white, #FFF);font-size:var(--small-14px, 14px);font-weight:var(--font-weight-regular, 400);line-height:20px;white-space:nowrap;display:block}.simple-tooltip-content.vertical-stack{grid-template-columns:1fr;justify-items:flex-start}.simple-tooltip-content.grid-stack{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.simple-tooltip-content.single-item .simple-tooltip-message{white-space:normal}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
1415
1415
|
}
|
|
1416
1416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToolTipComponent, decorators: [{
|
|
1417
1417
|
type: Component,
|
|
1418
|
-
args: [{ selector: 'sa-tool-tip', standalone: true, imports: [ButtonComponent, NgFor, NgIf], template: "<div class=\"tool-tip-vertical\">\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\n <div class=\"tool-tip-horizontal\">\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div> \n <div class=\"tool-tip simple-tooltip\" *ngIf=\"simpleMode\">\n <div class=\"simple-tooltip-content\" \n [class]=\"{ 'vertical-stack': messages.length <= 5, 'grid-stack': messages.length > 5, 'single-item': messages.length === 1 }\">\n <span class=\"simple-tooltip-message\" *ngFor=\"let message of messages\">\n {{message}}\n </span>\n </div>\n \n </div>\n <div class=\"tool-tip\" *ngIf=\"!simpleMode\">\n <div class=\"tool-tip-content\">\n <div class=\"tool-tip-heading\">Heading</div>\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\n {{msg}}\n </div>\n </div>\n <div class=\"tool-tip-break\">\n </div>\n <div class=\"tool-tip-controls\">\n <div class=\"tool-tip-navigate\">\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\n {{msgInd+1}} of {{messages.length}}\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\n </div>\n <div class=\"tool-tip-control-buttons\">\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\n state=\"default\"></sa-button>\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\n </sa-button>\n </div>\n </div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\n </div>\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\n</div>\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}.simple-tooltip{display:inline-block;width:auto;height:auto;max-width:500px;max-height:300px;overflow:visible}.simple-tooltip .tool-tip-content{display:flex;width:100%;flex-direction:column;gap:0}.simple-tooltip .tool-tip-message{font-size:var(--small-12px, 12px);font-style:normal;color:var(--structural-white, #FFF);font-weight:400;white-space:nowrap;font-family:var(--font-family, Roboto);letter-spacing:.25px}.simple-tooltip-content{display:grid;gap:6px 12px;padding:var(--small-8px,8px) var(--small-12px,12px);justify-items:flex-start;width:100%;max-width:400px}.simple-tooltip-message{color:var(--structural-white, #FFF);font-size:var(--small-14px, 14px);font-weight:var(--font-weight-regular, 400);line-height:20px;white-space:nowrap;display:block}.simple-tooltip-content.vertical-stack{grid-template-columns:1fr;justify-items:flex-start}.simple-tooltip-content.grid-stack{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.simple-tooltip-content.single-item .simple-tooltip-message{white-space:normal}\n"] }]
|
|
1418
|
+
args: [{ selector: 'sa-tool-tip', standalone: true, imports: [ButtonComponent, NgFor, NgIf], template: "<div class=\"tool-tip-vertical\">\r\n <div class=\"tool-tip-pointer-icon pointer-top\" *ngIf=\"pointerPosition == 'top'\"></div>\r\n <div class=\"tool-tip-horizontal\">\r\n <div class=\"tool-tip-pointer-icon pointer-left\" *ngIf=\"pointerPosition == 'left'\"></div> \r\n <div class=\"tool-tip simple-tooltip\" *ngIf=\"simpleMode\">\r\n <div class=\"simple-tooltip-content\" \r\n [class]=\"{ 'vertical-stack': messages.length <= 5, 'grid-stack': messages.length > 5, 'single-item': messages.length === 1 }\">\r\n <span class=\"simple-tooltip-message\" *ngFor=\"let message of messages\">\r\n {{message}}\r\n </span>\r\n </div>\r\n \r\n </div>\r\n <div class=\"tool-tip\" *ngIf=\"!simpleMode\">\r\n <div class=\"tool-tip-content\">\r\n <div class=\"tool-tip-heading\">Heading</div>\r\n <div *ngFor=\"let msg of messages, let i = index\" class=\"tool-tip-message {{msgInd != i ? 'hidden-msg': ''}}\">\r\n {{msg}}\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-break\">\r\n </div>\r\n <div class=\"tool-tip-controls\">\r\n <div class=\"tool-tip-navigate\">\r\n <img class=\"left-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(-1)\" [src]=\"arrowIcon\" alt=\"\">\r\n {{msgInd+1}} of {{messages.length}}\r\n <img class=\"right-icon tool-tip-navigate-icon\" (click)=\"updateMsgInd(1)\" [src]=\"arrowIcon\" alt=\"\">\r\n </div>\r\n <div class=\"tool-tip-control-buttons\">\r\n <sa-button (onClickEvent)=\"skipToolTip()\" class=\"skip-button\" text=\"Skip\" type=\"transparent\" size=\"medium\"\r\n state=\"default\"></sa-button>\r\n <sa-button (onClickEvent)=\"updateMsgInd(1)\" text=\"Next\" type=\"primary\" size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-right\" *ngIf=\"pointerPosition == 'right'\"></div>\r\n </div>\r\n <div class=\"tool-tip-pointer-icon pointer-bottom\" *ngIf=\"pointerPosition == 'bottom'\"></div>\r\n</div>\r\n", styles: [".tool-tip-horizontal{display:flex;width:max-content;justify-content:center;align-items:center}.tool-tip-vertical{display:flex;flex-direction:column;width:max-content;justify-content:center;align-items:center}.tool-tip{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-16px, 16px);width:375px;height:auto;box-sizing:border-box;padding:var(--medium-20px, 20px) var(--medium-24px, 24px);border-radius:var(--small-4px, 4px);background:var(--grey-700, #161E27);font-family:var(--font)}.tool-tip-content{display:flex;width:100%;flex-direction:column;gap:var(--small-8px, 8px)}.tool-tip-heading{font-size:16px;font-style:normal;color:var(--text-white, #FFF);font-weight:600;line-height:24px;letter-spacing:.15px}.tool-tip-message{font-size:14px;color:var(--grey-50, #E9EAEB);font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.tool-tip-controls{display:flex;width:100%;justify-content:space-between;font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px}.tool-tip-navigate{color:var(--text-lowemphasis, #989DA3);display:flex;justify-content:center;align-items:center}.skip-button ::ng-deep .sa-button{color:var(--grey-100, #BABDC1)!important}.skip-button ::ng-deep .sa-button:hover{background-color:transparent}.tool-tip-navigate-icon{cursor:pointer}.left-icon{transform:rotate(180deg)}.tool-tip-control-buttons{display:flex;gap:4px}.tool-tip-break{width:100%;height:.5px;background:var(--grey-50, #E9EAEB)}.hidden-msg{display:none}.tool-tip-pointer-icon{display:flex;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:11px solid var(--grey-700, #161E27)}.pointer-left{transform:rotate(-90deg);margin-right:-3px}.pointer-right{transform:rotate(90deg);margin-left:-3px}.pointer-top{margin-bottom:-3px}.pointer-bottom{transform:rotate(180deg);margin-top:-3px}.left-icon,.right-icon{filter:invert(.6)}.simple-tooltip{display:inline-block;width:auto;height:auto;max-width:500px;max-height:300px;overflow:visible}.simple-tooltip .tool-tip-content{display:flex;width:100%;flex-direction:column;gap:0}.simple-tooltip .tool-tip-message{font-size:var(--small-12px, 12px);font-style:normal;color:var(--structural-white, #FFF);font-weight:400;white-space:nowrap;font-family:var(--font-family, Roboto);letter-spacing:.25px}.simple-tooltip-content{display:grid;gap:6px 12px;padding:var(--small-8px,8px) var(--small-12px,12px);justify-items:flex-start;width:100%;max-width:400px}.simple-tooltip-message{color:var(--structural-white, #FFF);font-size:var(--small-14px, 14px);font-weight:var(--font-weight-regular, 400);line-height:20px;white-space:nowrap;display:block}.simple-tooltip-content.vertical-stack{grid-template-columns:1fr;justify-items:flex-start}.simple-tooltip-content.grid-stack{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.simple-tooltip-content.single-item .simple-tooltip-message{white-space:normal}\n"] }]
|
|
1419
1419
|
}], propDecorators: { messages: [{
|
|
1420
1420
|
type: Input
|
|
1421
1421
|
}], pointerPosition: [{
|
|
@@ -1591,13 +1591,13 @@ class GridCellComponent {
|
|
|
1591
1591
|
this.tooltipComponentRef.instance.simpleMode = true;
|
|
1592
1592
|
this.tooltipComponentRef.instance.pointerPosition = 'top';
|
|
1593
1593
|
const tooltipElement = this.tooltipComponentRef.location.nativeElement;
|
|
1594
|
-
tooltipElement.style.cssText = `
|
|
1595
|
-
position: fixed;
|
|
1596
|
-
top: ${top}px;
|
|
1597
|
-
left: ${left}px;
|
|
1598
|
-
z-index: 99999;
|
|
1599
|
-
transform: translateX(-50%);
|
|
1600
|
-
pointer-events: none;
|
|
1594
|
+
tooltipElement.style.cssText = `
|
|
1595
|
+
position: fixed;
|
|
1596
|
+
top: ${top}px;
|
|
1597
|
+
left: ${left}px;
|
|
1598
|
+
z-index: 99999;
|
|
1599
|
+
transform: translateX(-50%);
|
|
1600
|
+
pointer-events: none;
|
|
1601
1601
|
`;
|
|
1602
1602
|
document.body.appendChild(tooltipElement);
|
|
1603
1603
|
this.tooltipComponentRef.changeDetectorRef.detectChanges();
|
|
@@ -1624,7 +1624,7 @@ class GridCellComponent {
|
|
|
1624
1624
|
}
|
|
1625
1625
|
}
|
|
1626
1626
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$4.Overlay }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1627
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GridCellComponent, isStandalone: true, selector: "sa-grid-cell", outputs: { onClickButtonEvent: "onClickButtonEvent", onClickChipEvent: "onClickChipEvent", onClickLinkEvent: "onClickLinkEvent", onClickAvatarEvent: "onClickAvatarEvent" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "actionsContainer", first: true, predicate: ["actionsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"grid-cell {{params.cellType}}\">\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n </sa-avatar>\n\n <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n </div>\n\n <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n </div>\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n <div class=\"chips-container\" [style.display]=\"(params.viewChip) ? 'flex' : 'none'\">\n\n <div *ngFor=\"let config of displayedChips\">\n <sa-chip [id]=\"config.id\" [filling]=\"config.filling\" id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\"\n [iconPosition]=\"config.iconPosition\" [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\"\n [type]=\"config.type\" [text]=\"config.text\" [class.small]=\"config.type === 'small'\"\n [class.neutral]=\"config.state === 'neutral'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n </div>\n <div class=\"chip-tooltip-container\" *ngIf=\"remainingChipsCount > 0\" style=\"position: relative;\"\n (mouseenter)=\"showTooltip(remainingChipsCount, $event)\" (mouseleave)=\"hideTooltip()\">\n <sa-chip [id]=\"'chip_' + rowNum + '_more'\" [text]=\"'+' + remainingChipsCount\" [filling]=\"displayedChips[0]?.filling\"\n [type]=\"displayedChips[0]?.type\" [state]=\"displayedChips[0]?.state\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n</div>\n\n <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n\n <div *ngIf=\"params.cellType === 'actions'\" class=\"actions-container\">\n <img [src]=\"params.buttonConfig?.imagePath\" alt=\"actions\" class=\"actions-icon\" (click)=\"toggleDropdown(actionsButton)\"\n #actionsButton />\n \n <ng-template #dropdownTemplate>\n <div class=\"actions-dropdown\">\n <div *ngFor=\"let action of params.actions\" class=\"action-item\" (click)=\"handleActionClick(action, $event)\">\n <img *ngIf=\"action.icon\" [src]=\"action.icon\" class=\"action-icon\" />\n <span class=\"action-label\">{{action.label}}</span>\n </div>\n </div>\n </ng-template>\n </div>\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}.grid-chip{display:flex;height:24px;padding:var(--Small-4px, 4px) var(--Small-8px, 8px);justify-content:center;align-items:center;gap:var(--Small-4px, 4px);border-radius:4px;background:var(--Grey-100, #EAECF0);color:var(--Text-Medium-Emphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.grid-cell,.chips-container{overflow:visible!important;position:relative}.chip-tooltip-container{position:relative;display:inline-flex;overflow:visible!important}.chip-tooltip-container sa-tool-tip{display:none}.chips-container{display:flex;gap:var(--Small-4px, 4px);align-items:center}.actions-container{position:relative;display:flex;width:32px;height:32px;justify-content:center;align-items:center;cursor:pointer}.actions-icon{width:20px;height:20px;cursor:pointer!important}.actions-dropdown{position:absolute;right:0;min-width:150px;z-index:1000;border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);box-shadow:0 1px 2px #0000004d}.action-item{display:flex;height:40px;padding:12px;align-items:center;gap:8px;align-self:stretch;cursor:pointer;transition:background-color .2s}.action-item:hover{background-color:#f5f5f5}.action-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.actions-container.clicked{border-radius:64px;background:var(--Primary-50, #F4EBFF);padding:8px}.chips-container{overflow:visible!important;position:relative}.chip-tooltip-container{position:relative;display:inline-flex;overflow:visible}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }] }); }
|
|
1627
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: GridCellComponent, isStandalone: true, selector: "sa-grid-cell", outputs: { onClickButtonEvent: "onClickButtonEvent", onClickChipEvent: "onClickChipEvent", onClickLinkEvent: "onClickLinkEvent", onClickAvatarEvent: "onClickAvatarEvent" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "dropdownTemplate", first: true, predicate: ["dropdownTemplate"], descendants: true }, { propertyName: "actionsContainer", first: true, predicate: ["actionsContainer"], descendants: true }], ngImport: i0, template: "<div class=\"grid-cell {{params.cellType}}\">\r\n\r\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\r\n\r\n <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\r\n [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\r\n [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\r\n </sa-avatar>\r\n\r\n <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\r\n <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\r\n </div>\r\n\r\n <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\r\n </div>\r\n\r\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\r\n <div class=\"chips-container\" [style.display]=\"(params.viewChip) ? 'flex' : 'none'\">\r\n\r\n <div *ngFor=\"let config of displayedChips\">\r\n <sa-chip [id]=\"config.id\" [filling]=\"config.filling\" id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\"\r\n [iconPosition]=\"config.iconPosition\" [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\"\r\n [type]=\"config.type\" [text]=\"config.text\" [class.small]=\"config.type === 'small'\"\r\n [class.neutral]=\"config.state === 'neutral'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\r\n </div>\r\n <div class=\"chip-tooltip-container\" *ngIf=\"remainingChipsCount > 0\" style=\"position: relative;\"\r\n (mouseenter)=\"showTooltip(remainingChipsCount, $event)\" (mouseleave)=\"hideTooltip()\">\r\n <sa-chip [id]=\"'chip_' + rowNum + '_more'\" [text]=\"'+' + remainingChipsCount\" [filling]=\"displayedChips[0]?.filling\"\r\n [type]=\"displayedChips[0]?.type\" [state]=\"displayedChips[0]?.state\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\r\n</div>\r\n\r\n <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\r\n [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\r\n [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\r\n [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\r\n (onClickEvent)=\"buttonClicked($event)\"></sa-button>\r\n\r\n</div>\r\n\r\n <div *ngIf=\"params.cellType === 'actions'\" class=\"actions-container\">\r\n <img [src]=\"params.buttonConfig?.imagePath\" alt=\"actions\" class=\"actions-icon\" (click)=\"toggleDropdown(actionsButton)\"\r\n #actionsButton />\r\n \r\n <ng-template #dropdownTemplate>\r\n <div class=\"actions-dropdown\">\r\n <div *ngFor=\"let action of params.actions\" class=\"action-item\" (click)=\"handleActionClick(action, $event)\">\r\n <img *ngIf=\"action.icon\" [src]=\"action.icon\" class=\"action-icon\" />\r\n <span class=\"action-label\">{{action.label}}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}.grid-chip{display:flex;height:24px;padding:var(--Small-4px, 4px) var(--Small-8px, 8px);justify-content:center;align-items:center;gap:var(--Small-4px, 4px);border-radius:4px;background:var(--Grey-100, #EAECF0);color:var(--Text-Medium-Emphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.grid-cell,.chips-container{overflow:visible!important;position:relative}.chip-tooltip-container{position:relative;display:inline-flex;overflow:visible!important}.chip-tooltip-container sa-tool-tip{display:none}.chips-container{display:flex;gap:var(--Small-4px, 4px);align-items:center}.actions-container{position:relative;display:flex;width:32px;height:32px;justify-content:center;align-items:center;cursor:pointer}.actions-icon{width:20px;height:20px;cursor:pointer!important}.actions-dropdown{position:absolute;right:0;min-width:150px;z-index:1000;border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);box-shadow:0 1px 2px #0000004d}.action-item{display:flex;height:40px;padding:12px;align-items:center;gap:8px;align-self:stretch;cursor:pointer;transition:background-color .2s}.action-item:hover{background-color:#f5f5f5}.action-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.actions-container.clicked{border-radius:64px;background:var(--Primary-50, #F4EBFF);padding:8px}.chips-container{overflow:visible!important;position:relative}.chip-tooltip-container{position:relative;display:inline-flex;overflow:visible}\n"], dependencies: [{ kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: CommonModule }] }); }
|
|
1628
1628
|
}
|
|
1629
1629
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: GridCellComponent, decorators: [{
|
|
1630
1630
|
type: Component,
|
|
@@ -1636,7 +1636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1636
1636
|
NgIf,
|
|
1637
1637
|
ToolTipComponent,
|
|
1638
1638
|
CommonModule
|
|
1639
|
-
], template: "<div class=\"grid-cell {{params.cellType}}\">\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\n\n <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\n [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\n [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\n </sa-avatar>\n\n <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\n <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\n </div>\n\n <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\n </div>\n\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\n <div class=\"chips-container\" [style.display]=\"(params.viewChip) ? 'flex' : 'none'\">\n\n <div *ngFor=\"let config of displayedChips\">\n <sa-chip [id]=\"config.id\" [filling]=\"config.filling\" id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\"\n [iconPosition]=\"config.iconPosition\" [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\"\n [type]=\"config.type\" [text]=\"config.text\" [class.small]=\"config.type === 'small'\"\n [class.neutral]=\"config.state === 'neutral'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n </div>\n <div class=\"chip-tooltip-container\" *ngIf=\"remainingChipsCount > 0\" style=\"position: relative;\"\n (mouseenter)=\"showTooltip(remainingChipsCount, $event)\" (mouseleave)=\"hideTooltip()\">\n <sa-chip [id]=\"'chip_' + rowNum + '_more'\" [text]=\"'+' + remainingChipsCount\" [filling]=\"displayedChips[0]?.filling\"\n [type]=\"displayedChips[0]?.type\" [state]=\"displayedChips[0]?.state\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\n</div>\n\n <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\n [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\n [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\n [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\n (onClickEvent)=\"buttonClicked($event)\"></sa-button>\n\n</div>\n\n <div *ngIf=\"params.cellType === 'actions'\" class=\"actions-container\">\n <img [src]=\"params.buttonConfig?.imagePath\" alt=\"actions\" class=\"actions-icon\" (click)=\"toggleDropdown(actionsButton)\"\n #actionsButton />\n \n <ng-template #dropdownTemplate>\n <div class=\"actions-dropdown\">\n <div *ngFor=\"let action of params.actions\" class=\"action-item\" (click)=\"handleActionClick(action, $event)\">\n <img *ngIf=\"action.icon\" [src]=\"action.icon\" class=\"action-icon\" />\n <span class=\"action-label\">{{action.label}}</span>\n </div>\n </div>\n </ng-template>\n </div>\n</div>\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}.grid-chip{display:flex;height:24px;padding:var(--Small-4px, 4px) var(--Small-8px, 8px);justify-content:center;align-items:center;gap:var(--Small-4px, 4px);border-radius:4px;background:var(--Grey-100, #EAECF0);color:var(--Text-Medium-Emphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.grid-cell,.chips-container{overflow:visible!important;position:relative}.chip-tooltip-container{position:relative;display:inline-flex;overflow:visible!important}.chip-tooltip-container sa-tool-tip{display:none}.chips-container{display:flex;gap:var(--Small-4px, 4px);align-items:center}.actions-container{position:relative;display:flex;width:32px;height:32px;justify-content:center;align-items:center;cursor:pointer}.actions-icon{width:20px;height:20px;cursor:pointer!important}.actions-dropdown{position:absolute;right:0;min-width:150px;z-index:1000;border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);box-shadow:0 1px 2px #0000004d}.action-item{display:flex;height:40px;padding:12px;align-items:center;gap:8px;align-self:stretch;cursor:pointer;transition:background-color .2s}.action-item:hover{background-color:#f5f5f5}.action-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.actions-container.clicked{border-radius:64px;background:var(--Primary-50, #F4EBFF);padding:8px}.chips-container{overflow:visible!important;position:relative}.chip-tooltip-container{position:relative;display:inline-flex;overflow:visible}\n"] }]
|
|
1639
|
+
], template: "<div class=\"grid-cell {{params.cellType}}\">\r\n\r\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewLeadingIcon) ? 'block' : 'none'\" alt=\"\">\r\n\r\n <sa-avatar [id]=\"params.avatarConfig?.id\" [altText]=\"params.avatarConfig?.altText\"\r\n [imagePath]=\"params.avatarConfig?.imagePath\" [size]=\"params.avatarConfig?.size\"\r\n [style.display]=\"(params.viewAvatar) ? 'block' : 'none'\" (onClickEvent)=\"avatarClicked($event)\">\r\n </sa-avatar>\r\n\r\n <div class=\"grid-text\" [style.display]=\"(params.viewText) ? 'block' : 'none'\">\r\n <div [style.display]=\"(params.text) ? 'block' : 'none'\" (click)=\"linkClicked()\" class=\"main-text\">{{params.text}}\r\n </div>\r\n\r\n <div [style.display]=\"(params.subText) ? 'block' : 'none'\" class=\"sub-text\">{{params.subText}}</div>\r\n </div>\r\n\r\n <img class=\"icons\" src={{params.iconPath}} [style.display]=\"(params.viewTrailingIcon) ? 'block' : 'none'\" alt=\"\">\r\n <div class=\"chips-container\" [style.display]=\"(params.viewChip) ? 'flex' : 'none'\">\r\n\r\n <div *ngFor=\"let config of displayedChips\">\r\n <sa-chip [id]=\"config.id\" [filling]=\"config.filling\" id=\"chip_{{rowNum}}_{{config.id}}\" [iconPath]=\"config.iconPath\"\r\n [iconPosition]=\"config.iconPosition\" [largeStateIcon]=\"config.largeStateIcon\" [state]=\"config.state\"\r\n [type]=\"config.type\" [text]=\"config.text\" [class.small]=\"config.type === 'small'\"\r\n [class.neutral]=\"config.state === 'neutral'\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\r\n </div>\r\n <div class=\"chip-tooltip-container\" *ngIf=\"remainingChipsCount > 0\" style=\"position: relative;\"\r\n (mouseenter)=\"showTooltip(remainingChipsCount, $event)\" (mouseleave)=\"hideTooltip()\">\r\n <sa-chip [id]=\"'chip_' + rowNum + '_more'\" [text]=\"'+' + remainingChipsCount\" [filling]=\"displayedChips[0]?.filling\"\r\n [type]=\"displayedChips[0]?.type\" [state]=\"displayedChips[0]?.state\" (onClickEvent)=\"chipClicked($event)\"></sa-chip>\r\n</div>\r\n\r\n <sa-button [iconPosition]=\"params.buttonConfig?.iconPosition\" [ImagePath]=\"params.buttonConfig?.imagePath\"\r\n [id]=\"params.buttonConfig?.id\" [size]=\"params.buttonConfig?.size\" [state]=\"params.buttonConfig?.state\"\r\n [type]=\"params.buttonConfig?.type\" [text]=\"params.buttonConfig?.text\" [href]=\"params.buttonConfig?.href\"\r\n [hrefTarget]=\"params.buttonConfig?.hrefTarget\" [style.display]=\"(params.viewButton) ? 'block' : 'none'\"\r\n (onClickEvent)=\"buttonClicked($event)\"></sa-button>\r\n\r\n</div>\r\n\r\n <div *ngIf=\"params.cellType === 'actions'\" class=\"actions-container\">\r\n <img [src]=\"params.buttonConfig?.imagePath\" alt=\"actions\" class=\"actions-icon\" (click)=\"toggleDropdown(actionsButton)\"\r\n #actionsButton />\r\n \r\n <ng-template #dropdownTemplate>\r\n <div class=\"actions-dropdown\">\r\n <div *ngFor=\"let action of params.actions\" class=\"action-item\" (click)=\"handleActionClick(action, $event)\">\r\n <img *ngIf=\"action.icon\" [src]=\"action.icon\" class=\"action-icon\" />\r\n <span class=\"action-label\">{{action.label}}</span>\r\n </div>\r\n </div>\r\n </ng-template>\r\n </div>\r\n</div>\r\n", styles: [".header{--bg: var(--primary-50);--color: var(--text-highemphasis);--border: none;--flex-direction: left}.header:hover{cursor:pointer}.row{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: left}.numeric{--color: var(--text-highemphasis);--cursor: default;--border: var(--grey-50);--flex-direction: right}.interactive{--color: var(--primary-500);--cursor: pointer;--border: var(--grey-50);--flex-direction: left}.grid-cell{display:flex;height:48px;padding:var(--small-12px);justify-content:var(--flex-direction);align-items:center;gap:var(--small-8px);flex-shrink:0;font-family:var(--font);box-sizing:border-box;border-bottom:1px solid var(--border);width:calc(100% - 20px);background-color:var(--bg)}.grid-text{display:flex;flex-direction:column}.main-text{color:var(--color);font-size:14px;font-weight:400;height:20px;line-height:20px}.main-text:hover{cursor:var(--cursor)}.sub-text{font-size:11px;font-weight:400;height:16px;line-height:16px;color:var(--text-mediumemphasis)}.icons{width:var(--medium-20px);height:var(--medium-20px)}.grid-chip{display:flex;height:24px;padding:var(--Small-4px, 4px) var(--Small-8px, 8px);justify-content:center;align-items:center;gap:var(--Small-4px, 4px);border-radius:4px;background:var(--Grey-100, #EAECF0);color:var(--Text-Medium-Emphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.grid-cell,.chips-container{overflow:visible!important;position:relative}.chip-tooltip-container{position:relative;display:inline-flex;overflow:visible!important}.chip-tooltip-container sa-tool-tip{display:none}.chips-container{display:flex;gap:var(--Small-4px, 4px);align-items:center}.actions-container{position:relative;display:flex;width:32px;height:32px;justify-content:center;align-items:center;cursor:pointer}.actions-icon{width:20px;height:20px;cursor:pointer!important}.actions-dropdown{position:absolute;right:0;min-width:150px;z-index:1000;border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);box-shadow:0 1px 2px #0000004d}.action-item{display:flex;height:40px;padding:12px;align-items:center;gap:8px;align-self:stretch;cursor:pointer;transition:background-color .2s}.action-item:hover{background-color:#f5f5f5}.action-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.actions-container.clicked{border-radius:64px;background:var(--Primary-50, #F4EBFF);padding:8px}.chips-container{overflow:visible!important;position:relative}.chip-tooltip-container{position:relative;display:inline-flex;overflow:visible}\n"] }]
|
|
1640
1640
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$4.Overlay }, { type: i0.ViewContainerRef }], propDecorators: { dropdownTemplate: [{
|
|
1641
1641
|
type: ViewChild,
|
|
1642
1642
|
args: ['dropdownTemplate']
|
|
@@ -1670,12 +1670,8 @@ class DataGridComponent {
|
|
|
1670
1670
|
this.paginationPageSize = 10;
|
|
1671
1671
|
this.paginationPageSizeSelector = [10, 25, 50, 100];
|
|
1672
1672
|
this.gridHeight = 420;
|
|
1673
|
+
this.localeText = {};
|
|
1673
1674
|
this.gridReady = new EventEmitter();
|
|
1674
|
-
// Locale overrides for pagination labels
|
|
1675
|
-
this.localeText = {
|
|
1676
|
-
'Page Size': 'Show rows',
|
|
1677
|
-
to: ' - ',
|
|
1678
|
-
};
|
|
1679
1675
|
}
|
|
1680
1676
|
// Method to determine which row data to use
|
|
1681
1677
|
getEffectiveRowData() {
|
|
@@ -1795,11 +1791,11 @@ class DataGridComponent {
|
|
|
1795
1791
|
};
|
|
1796
1792
|
}
|
|
1797
1793
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1798
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataGridComponent, isStandalone: true, selector: "sa-data-grid", inputs: { columnDefs: "columnDefs", rowData: "rowData", defaultColDef: "defaultColDef", pagination: "pagination", paginationPageSize: "paginationPageSize", paginationPageSizeSelector: "paginationPageSizeSelector", gridHeight: "gridHeight", datasource: "datasource" }, outputs: { gridReady: "gridReady" }, ngImport: i0, template: "<ag-grid-angular\n class=\"ag-theme-alpine sa-grid-theme\"\n [columnDefs]=\"columnDefs\"\n [rowData]=\"getEffectiveRowData()\"\n [defaultColDef]=\"defaultColDef\"\n (gridReady)=\"onGridReady($event)\"\n [domLayout]=\"gridHeight ? 'normal' : 'autoHeight'\"\n [style.height.px]=\"gridHeight\"\n [pagination]=\"pagination\"\n [paginationPageSize]=\"paginationPageSize\"\n [paginationPageSizeSelector]=\"paginationPageSizeSelector\"\n [localeText]=\"localeText\"\n [rowModelType]=\"datasource ? 'infinite' : 'clientSide'\"\n></ag-grid-angular>\n", styles: ["::ng-deep .sa-grid-theme{--ag-header-background-color: var(--primary-50, #F4EBFF);--ag-header-foreground-color: var(--text-secondary);--ag-row-hover-color: var(--surface-hover);--ag-selected-row-background-color: var(--surface-selected);--ag-odd-row-background-color: transparent;--ag-row-border-color: var(--grey-100, #EAECF0);--ag-cell-horizontal-padding: 16px;--ag-header-column-separator-display: none;--ag-borders: solid 1px;--ag-border-color: var(--grey-100, #EAECF0);font-family:var(--font-family);overflow:visible!important}::ng-deep .sa-grid-theme .ag-header-cell{font-size:12px;font-weight:500;line-height:16px;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-theme-alpine .ag-row,.ag-theme-alpine .ag-cell{overflow:visible!important;z-index:auto}::ng-deep .sa-grid-theme .ag-cell{font-size:14px;line-height:20px}::ng-deep .sa-grid-theme .ag-row{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF)}::ng-deep .sa-grid-theme .ag-row:last-child{border-bottom:none}::ng-deep .sa-grid-theme .ag-header-viewport{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--primary-50, #F4EBFF)}::ng-deep .sa-grid-theme .main-text{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-header{border-bottom:none}::ng-deep .sa-grid-theme .avatar-img{background:none}::ng-deep .sa-grid-theme .grid-text{display:flex!important;flex-direction:row!important;gap:4px}::ng-deep .sa-grid-theme .grid-text .sub-text{font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;height:20px;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-ltr .ag-cell-focus{outline:none!important;border:none!important}::ng-deep .sa-grid-theme .ag-root-wrapper{overflow:visible!important}::ng-deep .sa-grid-theme .ag-root{overflow:visible!important}::ng-deep .sa-grid-theme .ag-body-viewport{overflow:visible!important}::ng-deep .sa-grid-theme .ag-center-cols-container{overflow:visible!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i1$5.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterMovesDown", "enterMovesDownAfterEdit", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "excludeHiddenColumnsFromQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "enableChartToolPanelsButton", "suppressChartToolPanelsButton", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressParentsInRowNodes", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "suppressAggAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideFilterAllLevels", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "functionsPassive", "enableGroupEdit", "initialState", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "rangeDeleteStart", "rangeDeleteEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "gridPreDestroyed", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest"] }] }); }
|
|
1794
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DataGridComponent, isStandalone: true, selector: "sa-data-grid", inputs: { columnDefs: "columnDefs", rowData: "rowData", defaultColDef: "defaultColDef", pagination: "pagination", paginationPageSize: "paginationPageSize", paginationPageSizeSelector: "paginationPageSizeSelector", gridHeight: "gridHeight", datasource: "datasource", localeText: "localeText" }, outputs: { gridReady: "gridReady" }, ngImport: i0, template: "<ag-grid-angular\r\n class=\"ag-theme-alpine sa-grid-theme\"\r\n [columnDefs]=\"columnDefs\"\r\n [rowData]=\"getEffectiveRowData()\"\r\n [defaultColDef]=\"defaultColDef\"\r\n (gridReady)=\"onGridReady($event)\"\r\n [domLayout]=\"gridHeight ? 'normal' : 'autoHeight'\"\r\n [style.height.px]=\"gridHeight\"\r\n [pagination]=\"pagination\"\r\n [paginationPageSize]=\"paginationPageSize\"\r\n [paginationPageSizeSelector]=\"paginationPageSizeSelector\"\r\n [localeText]=\"localeText\"\r\n [rowModelType]=\"datasource ? 'infinite' : 'clientSide'\"\r\n></ag-grid-angular>\r\n", styles: ["::ng-deep .sa-grid-theme{--ag-header-background-color: var(--primary-50, #F4EBFF);--ag-header-foreground-color: var(--text-secondary);--ag-row-hover-color: var(--surface-hover);--ag-selected-row-background-color: var(--surface-selected);--ag-odd-row-background-color: transparent;--ag-row-border-color: var(--grey-100, #EAECF0);--ag-cell-horizontal-padding: 16px;--ag-header-column-separator-display: none;--ag-borders: solid 1px;--ag-border-color: var(--grey-100, #EAECF0);font-family:var(--font-family);overflow:visible!important}::ng-deep .sa-grid-theme .ag-header-cell{font-size:12px;font-weight:500;line-height:16px;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-theme-alpine .ag-row,.ag-theme-alpine .ag-cell{overflow:visible!important;z-index:auto}::ng-deep .sa-grid-theme .ag-cell{font-size:14px;line-height:20px}::ng-deep .sa-grid-theme .ag-row{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF)}::ng-deep .sa-grid-theme .ag-row:last-child{border-bottom:none}::ng-deep .sa-grid-theme .ag-header-viewport{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--primary-50, #F4EBFF)}::ng-deep .sa-grid-theme .main-text{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-header{border-bottom:none}::ng-deep .sa-grid-theme .avatar-img{background:none}::ng-deep .sa-grid-theme .grid-text{display:flex!important;flex-direction:row!important;gap:4px}::ng-deep .sa-grid-theme .grid-text .sub-text{font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;height:20px;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-ltr .ag-cell-focus{outline:none!important;border:none!important}::ng-deep .sa-grid-theme .ag-root-wrapper{overflow:visible!important}::ng-deep .sa-grid-theme .ag-root{overflow:visible!important}::ng-deep .sa-grid-theme .ag-body-viewport{overflow:visible!important}::ng-deep .sa-grid-theme .ag-center-cols-container{overflow:visible!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AgGridModule }, { kind: "component", type: i1$5.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterMovesDown", "enterMovesDownAfterEdit", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "excludeHiddenColumnsFromQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "enableChartToolPanelsButton", "suppressChartToolPanelsButton", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressParentsInRowNodes", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "suppressAggAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideFilterAllLevels", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "functionsPassive", "enableGroupEdit", "initialState", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "rangeDeleteStart", "rangeDeleteEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "gridPreDestroyed", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged", "columnRowGroupChangeRequest", "columnPivotChangeRequest", "columnValueChangeRequest", "columnAggFuncChangeRequest"] }] }); }
|
|
1799
1795
|
}
|
|
1800
1796
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DataGridComponent, decorators: [{
|
|
1801
1797
|
type: Component,
|
|
1802
|
-
args: [{ selector: 'sa-data-grid', standalone: true, imports: [CommonModule, AgGridModule, GridCellComponent], template: "<ag-grid-angular\n class=\"ag-theme-alpine sa-grid-theme\"\n [columnDefs]=\"columnDefs\"\n [rowData]=\"getEffectiveRowData()\"\n [defaultColDef]=\"defaultColDef\"\n (gridReady)=\"onGridReady($event)\"\n [domLayout]=\"gridHeight ? 'normal' : 'autoHeight'\"\n [style.height.px]=\"gridHeight\"\n [pagination]=\"pagination\"\n [paginationPageSize]=\"paginationPageSize\"\n [paginationPageSizeSelector]=\"paginationPageSizeSelector\"\n [localeText]=\"localeText\"\n [rowModelType]=\"datasource ? 'infinite' : 'clientSide'\"\n></ag-grid-angular>\n", styles: ["::ng-deep .sa-grid-theme{--ag-header-background-color: var(--primary-50, #F4EBFF);--ag-header-foreground-color: var(--text-secondary);--ag-row-hover-color: var(--surface-hover);--ag-selected-row-background-color: var(--surface-selected);--ag-odd-row-background-color: transparent;--ag-row-border-color: var(--grey-100, #EAECF0);--ag-cell-horizontal-padding: 16px;--ag-header-column-separator-display: none;--ag-borders: solid 1px;--ag-border-color: var(--grey-100, #EAECF0);font-family:var(--font-family);overflow:visible!important}::ng-deep .sa-grid-theme .ag-header-cell{font-size:12px;font-weight:500;line-height:16px;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-theme-alpine .ag-row,.ag-theme-alpine .ag-cell{overflow:visible!important;z-index:auto}::ng-deep .sa-grid-theme .ag-cell{font-size:14px;line-height:20px}::ng-deep .sa-grid-theme .ag-row{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF)}::ng-deep .sa-grid-theme .ag-row:last-child{border-bottom:none}::ng-deep .sa-grid-theme .ag-header-viewport{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--primary-50, #F4EBFF)}::ng-deep .sa-grid-theme .main-text{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-header{border-bottom:none}::ng-deep .sa-grid-theme .avatar-img{background:none}::ng-deep .sa-grid-theme .grid-text{display:flex!important;flex-direction:row!important;gap:4px}::ng-deep .sa-grid-theme .grid-text .sub-text{font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;height:20px;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-ltr .ag-cell-focus{outline:none!important;border:none!important}::ng-deep .sa-grid-theme .ag-root-wrapper{overflow:visible!important}::ng-deep .sa-grid-theme .ag-root{overflow:visible!important}::ng-deep .sa-grid-theme .ag-body-viewport{overflow:visible!important}::ng-deep .sa-grid-theme .ag-center-cols-container{overflow:visible!important}\n"] }]
|
|
1798
|
+
args: [{ selector: 'sa-data-grid', standalone: true, imports: [CommonModule, AgGridModule, GridCellComponent], template: "<ag-grid-angular\r\n class=\"ag-theme-alpine sa-grid-theme\"\r\n [columnDefs]=\"columnDefs\"\r\n [rowData]=\"getEffectiveRowData()\"\r\n [defaultColDef]=\"defaultColDef\"\r\n (gridReady)=\"onGridReady($event)\"\r\n [domLayout]=\"gridHeight ? 'normal' : 'autoHeight'\"\r\n [style.height.px]=\"gridHeight\"\r\n [pagination]=\"pagination\"\r\n [paginationPageSize]=\"paginationPageSize\"\r\n [paginationPageSizeSelector]=\"paginationPageSizeSelector\"\r\n [localeText]=\"localeText\"\r\n [rowModelType]=\"datasource ? 'infinite' : 'clientSide'\"\r\n></ag-grid-angular>\r\n", styles: ["::ng-deep .sa-grid-theme{--ag-header-background-color: var(--primary-50, #F4EBFF);--ag-header-foreground-color: var(--text-secondary);--ag-row-hover-color: var(--surface-hover);--ag-selected-row-background-color: var(--surface-selected);--ag-odd-row-background-color: transparent;--ag-row-border-color: var(--grey-100, #EAECF0);--ag-cell-horizontal-padding: 16px;--ag-header-column-separator-display: none;--ag-borders: solid 1px;--ag-border-color: var(--grey-100, #EAECF0);font-family:var(--font-family);overflow:visible!important}::ng-deep .sa-grid-theme .ag-header-cell{font-size:12px;font-weight:500;line-height:16px;color:var(--Text-High-Emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-theme-alpine .ag-row,.ag-theme-alpine .ag-cell{overflow:visible!important;z-index:auto}::ng-deep .sa-grid-theme .ag-cell{font-size:14px;line-height:20px}::ng-deep .sa-grid-theme .ag-row{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--structural-white, #FFF)}::ng-deep .sa-grid-theme .ag-row:last-child{border-bottom:none}::ng-deep .sa-grid-theme .ag-header-viewport{border-bottom:1px solid var(--grey-100, #EAECF0);background:var(--primary-50, #F4EBFF)}::ng-deep .sa-grid-theme .main-text{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-header{border-bottom:none}::ng-deep .sa-grid-theme .avatar-img{background:none}::ng-deep .sa-grid-theme .grid-text{display:flex!important;flex-direction:row!important;gap:4px}::ng-deep .sa-grid-theme .grid-text .sub-text{font-family:var(--font-family-roboto, Roboto);font-size:14px;font-style:normal;font-weight:400;height:20px;line-height:20px;letter-spacing:.25px}::ng-deep .sa-grid-theme .ag-ltr .ag-cell-focus{outline:none!important;border:none!important}::ng-deep .sa-grid-theme .ag-root-wrapper{overflow:visible!important}::ng-deep .sa-grid-theme .ag-root{overflow:visible!important}::ng-deep .sa-grid-theme .ag-body-viewport{overflow:visible!important}::ng-deep .sa-grid-theme .ag-center-cols-container{overflow:visible!important}\n"] }]
|
|
1803
1799
|
}], propDecorators: { columnDefs: [{
|
|
1804
1800
|
type: Input
|
|
1805
1801
|
}], rowData: [{
|
|
@@ -1816,6 +1812,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1816
1812
|
type: Input
|
|
1817
1813
|
}], datasource: [{
|
|
1818
1814
|
type: Input
|
|
1815
|
+
}], localeText: [{
|
|
1816
|
+
type: Input
|
|
1819
1817
|
}], gridReady: [{
|
|
1820
1818
|
type: Output
|
|
1821
1819
|
}] } });
|
|
@@ -1826,7 +1824,7 @@ class DatepickerComponent extends FieldType {
|
|
|
1826
1824
|
this.CalendarHeaderComponent = CalendarHeaderComponent;
|
|
1827
1825
|
}
|
|
1828
1826
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1829
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\n <mat-label>Choose a date</mat-label>\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n </mat-date-range-input>\n <mat-hint>MM/DD/YYYY</mat-hint>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
|
|
1827
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: DatepickerComponent, isStandalone: true, selector: "sa-datepicker", inputs: { range: "range" }, providers: [], usesInheritance: true, ngImport: i0, template: "<mat-form-field class=\"date-picker\">\r\n <mat-label>Choose a date</mat-label>\r\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\r\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\r\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>MM/DD/YYYY</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\r\n </mat-date-range-picker>\r\n</mat-form-field>\r\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$6.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: i2$1.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i2$1.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i2$1.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i2$1.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
|
|
1830
1828
|
}
|
|
1831
1829
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DatepickerComponent, decorators: [{
|
|
1832
1830
|
type: Component,
|
|
@@ -1840,7 +1838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
1840
1838
|
CalendarHeaderComponent,
|
|
1841
1839
|
CommonModule,
|
|
1842
1840
|
MatNativeDateModule
|
|
1843
|
-
], template: "<mat-form-field class=\"date-picker\">\n <mat-label>Choose a date</mat-label>\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\n </mat-date-range-input>\n <mat-hint>MM/DD/YYYY</mat-hint>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\n </mat-date-range-picker>\n</mat-form-field>\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"] }]
|
|
1841
|
+
], template: "<mat-form-field class=\"date-picker\">\r\n <mat-label>Choose a date</mat-label>\r\n <mat-date-range-input [rangePicker]=\"picker\" [formGroup]=\"range\">\r\n <input formControlName=\"start\" matStartDate placeholder=\"Start date\">\r\n <input formControlName=\"end\" matEndDate placeholder=\"End date\">\r\n </mat-date-range-input>\r\n <mat-hint>MM/DD/YYYY</mat-hint>\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-date-range-picker [calendarHeaderComponent]=\"CalendarHeaderComponent\" #picker>\r\n </mat-date-range-picker>\r\n</mat-form-field>\r\n", styles: ["::ng-deep .cdk-overlay-container{--mat-datepicker-calendar-container-elevation-shadow: none;--mat-datepicker-calendar-container-shape: 0px;--mat-datepicker-calendar-date-selected-state-background-color: var(--primary-500);--mat-datepicker-calendar-date-hover-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-in-range-state-background-color: var(--grey-50);--mat-datepicker-calendar-date-focus-state-background-color: var(--grey-50)}::ng-deep .cdk-overlay-container .mat-datepicker-popup{border-top:1px solid var(--grey-50);border-right:1px solid var(--grey-50);border-bottom:1px solid var(--grey-50);border-radius:var(--small-8px, 8px);height:356px;padding:12px;margin-top:0;margin-left:180px;background-color:#fff}::ng-deep .cdk-overlay-container .mat-datepicker-content .mat-calendar{box-shadow:none;height:300px}::ng-deep .mat-calendar-content .mat-calendar-table-header-divider{display:none}.date-picker{margin:30px}\n"] }]
|
|
1844
1842
|
}], propDecorators: { range: [{
|
|
1845
1843
|
type: Input
|
|
1846
1844
|
}] } });
|
|
@@ -2302,7 +2300,7 @@ class FormInputComponent extends FieldType {
|
|
|
2302
2300
|
}
|
|
2303
2301
|
}
|
|
2304
2302
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2305
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon", params: "params" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <h2 class=\"sa-input-big-label\">\n {{props?.['bigLabel']}}\n </h2>\n <p class=\"sa-input-big-description\">\n {{props?.['bigDescription']}}\n </p>\n </div>\n }\n @if(!!props?.['label']){\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <div class=\"sa-input-label-tooltip-container\">\n <span class=\"sa-input-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-input-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\n !== false){\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\n }\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n (click)=\"onInputFieldClick($event)\">\n @if(pretext){\n <div class=\"sa-input-pretext\">\n {{pretext}}\n </div>\n }\n\n <!-- Multi-value chip display -->\n @if(isMultiValue) {\n <div class=\"chip-container\">\n <sa-chip \n *ngFor=\"let chip of (chipValues || [])?.slice(startInd,startInd+labelLimit) let i = index\"\n [text]=\"chip?.value || chip?.label || chip\"\n [type]=\"'regular'\"\n [state]=\"'primary'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"removeChip(i)\">\n </sa-chip>\n \n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"(chipValues || []).length > (startInd + labelLimit)\">\n <sa-chip [text]=\"'+' + ((chipValues || []).length - (startInd + labelLimit))\" \n type=\"regular\" \n state=\"primary\" \n filling=\"filled\">\n </sa-chip>\n </div>\n <input\n [ngClass]=\"'chip-input'\"\n matInput [type]=\"type\"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"chipValues.length === 0 ? (props?.placeholder || params?.placeholder || '') : ''\"\n (focus)=\"onFocus()\"\n (blur)=\"onChipBlur()\"\n (input)=\"onChipInputChange($event)\"\n (keydown)=\"onChipKeyDown($event)\"\n [(ngModel)]=\"currentInputValue\"\n #formInput />\n </div>\n } @else {\n <!-- Standard single-value input (backward compatibility) -->\n @if(!!props?.['prefix']){\n <span matPrefix>{{props?.['prefix']}} </span>\n }\n <input\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\n matInput [type]=\"props?.type || type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n }\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n }@else if(params?.type === 'email' && icon.show){\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n }\n @else if(icon?.name){\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\n }\n </div>\n @if((!formControl.valid) || (params?.supportText)){\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\n ]\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\n </div>\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:var(--semantic-error-500, #BD271E)}.sa-input-field.invalid{--border: 1px solid var(--semantic-error-500, #BD271E)}.sa-input-field.invalid sa-icon{--form-email-icon-color: var(--semantic-error-500, #BD271E)}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}.chip-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;min-height:20px}.chip-input{border:none;outline:none;background:transparent;flex:1;min-width:60px;font-size:14px;font-family:inherit;color:inherit}.chip-input::placeholder{color:var(--text-medium-emphasis, #6D6979)}.chip-container sa-chip{margin:2px 0}@media screen and (max-width: 1024px){.masked{font-weight:unset}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
|
|
2303
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormInputComponent, isStandalone: true, selector: "sa-input", inputs: { icon: "icon", params: "params" }, viewQueries: [{ propertyName: "formInput", first: true, predicate: ["formInput"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\r\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\r\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <h2 class=\"sa-input-big-label\">\r\n {{props?.['bigLabel']}}\r\n </h2>\r\n <p class=\"sa-input-big-description\">\r\n {{props?.['bigDescription']}}\r\n </p>\r\n </div>\r\n }\r\n @if(!!props?.['label']){\r\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <div class=\"sa-input-label-tooltip-container\">\r\n <span class=\"sa-input-label\">\r\n {{props?.['label']}}\r\n </span>\r\n @if(!!props?.['tooltip']){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\r\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\r\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\r\n </span>\r\n }\r\n </div>\r\n @if(!!props?.['description']) {\r\n <p class=\"sa-input-description\">\r\n {{props?.['description']}}\r\n </p>\r\n }\r\n </div>\r\n }\r\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\r\n !== false){\r\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\r\n }\r\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\r\n (click)=\"onInputFieldClick($event)\">\r\n @if(pretext){\r\n <div class=\"sa-input-pretext\">\r\n {{pretext}}\r\n </div>\r\n }\r\n\r\n <!-- Multi-value chip display -->\r\n @if(isMultiValue) {\r\n <div class=\"chip-container\">\r\n <sa-chip \r\n *ngFor=\"let chip of (chipValues || [])?.slice(startInd,startInd+labelLimit) let i = index\"\r\n [text]=\"chip?.value || chip?.label || chip\"\r\n [type]=\"'regular'\"\r\n [state]=\"'primary'\"\r\n [filling]=\"'filled'\"\r\n [iconPosition]=\"'right'\"\r\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\r\n (onClickEvent)=\"removeChip(i)\">\r\n </sa-chip>\r\n \r\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\r\n *ngIf=\"(chipValues || []).length > (startInd + labelLimit)\">\r\n <sa-chip [text]=\"'+' + ((chipValues || []).length - (startInd + labelLimit))\" \r\n type=\"regular\" \r\n state=\"primary\" \r\n filling=\"filled\">\r\n </sa-chip>\r\n </div>\r\n <input\r\n [ngClass]=\"'chip-input'\"\r\n matInput [type]=\"type\"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"chipValues.length === 0 ? (props?.placeholder || params?.placeholder || '') : ''\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onChipBlur()\"\r\n (input)=\"onChipInputChange($event)\"\r\n (keydown)=\"onChipKeyDown($event)\"\r\n [(ngModel)]=\"currentInputValue\"\r\n #formInput />\r\n </div>\r\n } @else {\r\n <!-- Standard single-value input (backward compatibility) -->\r\n @if(!!props?.['prefix']){\r\n <span matPrefix>{{props?.['prefix']}} </span>\r\n }\r\n <input\r\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\r\n matInput [type]=\"props?.type || type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\r\n }\r\n\r\n @if(params?.type === 'password'){\r\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\r\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\r\n }@else if(params?.type === 'email' && icon.show){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\r\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\r\n }\r\n @else if(icon?.name){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\r\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\r\n }\r\n </div>\r\n @if((!formControl.valid) || (params?.supportText)){\r\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\r\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\r\n ]\">\r\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\r\n {{getFormSupportText()}}\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:var(--semantic-error-500, #BD271E)}.sa-input-field.invalid{--border: 1px solid var(--semantic-error-500, #BD271E)}.sa-input-field.invalid sa-icon{--form-email-icon-color: var(--semantic-error-500, #BD271E)}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}.chip-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;min-height:20px}.chip-input{border:none;outline:none;background:transparent;flex:1;min-width:60px;font-size:14px;font-family:inherit;color:inherit}.chip-input::placeholder{color:var(--text-medium-emphasis, #6D6979)}.chip-container sa-chip{margin:2px 0}@media screen and (max-width: 1024px){.masked{font-weight:unset}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
|
|
2306
2304
|
}
|
|
2307
2305
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormInputComponent, decorators: [{
|
|
2308
2306
|
type: Component,
|
|
@@ -2314,7 +2312,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2314
2312
|
IconComponent,
|
|
2315
2313
|
MatTooltipModule,
|
|
2316
2314
|
ChipsComponent
|
|
2317
|
-
], template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <h2 class=\"sa-input-big-label\">\n {{props?.['bigLabel']}}\n </h2>\n <p class=\"sa-input-big-description\">\n {{props?.['bigDescription']}}\n </p>\n </div>\n }\n @if(!!props?.['label']){\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\n <div class=\"sa-input-label-tooltip-container\">\n <span class=\"sa-input-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-input-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\n !== false){\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\n }\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\n (click)=\"onInputFieldClick($event)\">\n @if(pretext){\n <div class=\"sa-input-pretext\">\n {{pretext}}\n </div>\n }\n\n <!-- Multi-value chip display -->\n @if(isMultiValue) {\n <div class=\"chip-container\">\n <sa-chip \n *ngFor=\"let chip of (chipValues || [])?.slice(startInd,startInd+labelLimit) let i = index\"\n [text]=\"chip?.value || chip?.label || chip\"\n [type]=\"'regular'\"\n [state]=\"'primary'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"removeChip(i)\">\n </sa-chip>\n \n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"(chipValues || []).length > (startInd + labelLimit)\">\n <sa-chip [text]=\"'+' + ((chipValues || []).length - (startInd + labelLimit))\" \n type=\"regular\" \n state=\"primary\" \n filling=\"filled\">\n </sa-chip>\n </div>\n <input\n [ngClass]=\"'chip-input'\"\n matInput [type]=\"type\"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"chipValues.length === 0 ? (props?.placeholder || params?.placeholder || '') : ''\"\n (focus)=\"onFocus()\"\n (blur)=\"onChipBlur()\"\n (input)=\"onChipInputChange($event)\"\n (keydown)=\"onChipKeyDown($event)\"\n [(ngModel)]=\"currentInputValue\"\n #formInput />\n </div>\n } @else {\n <!-- Standard single-value input (backward compatibility) -->\n @if(!!props?.['prefix']){\n <span matPrefix>{{props?.['prefix']}} </span>\n }\n <input\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\n matInput [type]=\"props?.type || type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\n [disabled]=\"field.props.disabled || false\"\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\n }\n\n @if(params?.type === 'password'){\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\n }@else if(params?.type === 'email' && icon.show){\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\n }\n @else if(icon?.name){\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\n }\n </div>\n @if((!formControl.valid) || (params?.supportText)){\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\n ]\">\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\n {{getFormSupportText()}}\n </div>\n }\n </div>\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:var(--semantic-error-500, #BD271E)}.sa-input-field.invalid{--border: 1px solid var(--semantic-error-500, #BD271E)}.sa-input-field.invalid sa-icon{--form-email-icon-color: var(--semantic-error-500, #BD271E)}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}.chip-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;min-height:20px}.chip-input{border:none;outline:none;background:transparent;flex:1;min-width:60px;font-size:14px;font-family:inherit;color:inherit}.chip-input::placeholder{color:var(--text-medium-emphasis, #6D6979)}.chip-container sa-chip{margin:2px 0}@media screen and (max-width: 1024px){.masked{font-weight:unset}}\n"] }]
|
|
2315
|
+
], template: "<div class=\"sa-input-container {{props?.['inputContainerClass']}}\" [ngStyle]=\"{'gap': getLabelFieldGap()}\">\r\n @if (!!props?.['bigLabel'] || !!props?.['bigDescription']) {\r\n <div class=\"sa-input-big-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <h2 class=\"sa-input-big-label\">\r\n {{props?.['bigLabel']}}\r\n </h2>\r\n <p class=\"sa-input-big-description\">\r\n {{props?.['bigDescription']}}\r\n </p>\r\n </div>\r\n }\r\n @if(!!props?.['label']){\r\n <div class=\"sa-input-label-container\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n <div class=\"sa-input-label-tooltip-container\">\r\n <span class=\"sa-input-label\">\r\n {{props?.['label']}}\r\n </span>\r\n @if(!!props?.['tooltip']){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\r\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\r\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\r\n </span>\r\n }\r\n </div>\r\n @if(!!props?.['description']) {\r\n <p class=\"sa-input-description\">\r\n {{props?.['description']}}\r\n </p>\r\n }\r\n </div>\r\n }\r\n <div class=\"sa-input\" [ngClass]=\"disabled ? 'disabled' : '' \">\r\n @if((pretext || (!!inputVal?.length && (!!params?.placeholder || !!props?.placeholder))) && props?.['showTag']\r\n !== false){\r\n <span class=\"sa-input-tag\">{{params?.placeholder || props?.placeholder}}</span>\r\n }\r\n <div class=\"sa-input-field\" [ngClass]=\"formControl.invalid && formControl.touched ? 'invalid' : 'idle' \"\r\n (click)=\"onInputFieldClick($event)\">\r\n @if(pretext){\r\n <div class=\"sa-input-pretext\">\r\n {{pretext}}\r\n </div>\r\n }\r\n\r\n <!-- Multi-value chip display -->\r\n @if(isMultiValue) {\r\n <div class=\"chip-container\">\r\n <sa-chip \r\n *ngFor=\"let chip of (chipValues || [])?.slice(startInd,startInd+labelLimit) let i = index\"\r\n [text]=\"chip?.value || chip?.label || chip\"\r\n [type]=\"'regular'\"\r\n [state]=\"'primary'\"\r\n [filling]=\"'filled'\"\r\n [iconPosition]=\"'right'\"\r\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\r\n (onClickEvent)=\"removeChip(i)\">\r\n </sa-chip>\r\n \r\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\r\n *ngIf=\"(chipValues || []).length > (startInd + labelLimit)\">\r\n <sa-chip [text]=\"'+' + ((chipValues || []).length - (startInd + labelLimit))\" \r\n type=\"regular\" \r\n state=\"primary\" \r\n filling=\"filled\">\r\n </sa-chip>\r\n </div>\r\n <input\r\n [ngClass]=\"'chip-input'\"\r\n matInput [type]=\"type\"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"chipValues.length === 0 ? (props?.placeholder || params?.placeholder || '') : ''\"\r\n (focus)=\"onFocus()\"\r\n (blur)=\"onChipBlur()\"\r\n (input)=\"onChipInputChange($event)\"\r\n (keydown)=\"onChipKeyDown($event)\"\r\n [(ngModel)]=\"currentInputValue\"\r\n #formInput />\r\n </div>\r\n } @else {\r\n <!-- Standard single-value input (backward compatibility) -->\r\n @if(!!props?.['prefix']){\r\n <span matPrefix>{{props?.['prefix']}} </span>\r\n }\r\n <input\r\n [ngClass]=\"(!!inputVal && (params?.type === 'password' || props?.type === 'password') && icon.name !== 'eyeOff') ? 'masked' : ''\"\r\n matInput [type]=\"props?.type || type\" value=\"\" [pattern]=\"type==='tel' ? '[0-9]' : '' \"\r\n [disabled]=\"field.props.disabled || false\"\r\n [placeholder]=\"!pretext && props?.placeholder || params?.placeholder || ''\" (focus)=\"onFocus()\"\r\n (blur)=\"onBlur()\" (input)=\"onInput($event)\" [(ngModel)]=\"inputVal\" #formInput />\r\n }\r\n\r\n @if(params?.type === 'password'){\r\n <sa-icon class=\"flex\" icon=\"eyeOutlined\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"!icon.name || icon.name === 'eyeOutlined' ? '' : 'hide'\"></sa-icon>\r\n <sa-icon class=\"flex\" icon=\"eyeOff\" [size]=\"icon.size || '24'\" (click)=\"inputIconClick()\"\r\n [ngClass]=\"icon.name === 'eyeOff' ? '' : 'hide'\"></sa-icon>\r\n }@else if(params?.type === 'email' && icon.show){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name || 'checkCircleOutlined'\" [size]=\"icon.size || '24'\"\r\n (click)=\"inputIconClick()\" [ngClass]=\"showEmailIcon ? '' : 'hide'\"></sa-icon>\r\n }\r\n @else if(icon?.name){\r\n <sa-icon class=\"flex\" [icon]=\"icon.name\" [size]=\"icon?.size || '24'\" [color]=\"icon?.color || ''\"\r\n [ngClass]=\"icon?.show ? '' : 'hide'\"></sa-icon>\r\n }\r\n </div>\r\n @if((!formControl.valid) || (params?.supportText)){\r\n <div class=\"support-label {{formControl.invalid && formControl.touched ? params?.className : ''}}\" [ngClass]=\"[\r\n formControl.invalid && formControl.touched ? 'invalid' : 'idle'\r\n ]\">\r\n <!-- {{!formControl.valid ? inputErrorText : params.supportText}} -->\r\n {{getFormSupportText()}}\r\n </div>\r\n }\r\n </div>\r\n</div>", styles: ["*{--error-red: #e25c61 }.idle{--border: 1px solid var(--grey-50)}.focus{--border: 1px solid var(--primary-300)}.masked{font-size:28px;font-weight:500;padding-top:4px}.disabled .sa-input-field,[disabled]{background-color:#fafafa;cursor:not-allowed}.disabled .sa-input-field input{color:#989da3}.sa-input-field>input,.sa-input-field>input:focus-visible{--border: 1px solid var(--primary-300);border:none;outline:none}.sa-input-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.sa-input-field sa-icon{color:var(--icon-grey1)}.sa-input-field>input:focus-visible~sa-icon,.sa-input-field:hover sa-icon{color:var(--primary-300)}.sa-input-field.invalid>input,.sa-input-field.invalid sa-icon,.sa-input-field.invalid .sa-input-pretext{color:var(--semantic-error-500, #BD271E)}.sa-input-field.invalid{--border: 1px solid var(--semantic-error-500, #BD271E)}.sa-input-field.invalid sa-icon{--form-email-icon-color: var(--semantic-error-500, #BD271E)}.sa-input-field.idle sa-icon{--form-email-icon-color: #33961F}.sa-input{position:relative;padding:8px 0}.sa-input-pretext{margin-right:2px}.sa-input-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.sa-input-field input{width:inherit}.sa-input-tag{position:absolute;background:#fff;padding:2px 6px;top:-1px;left:12px;z-index:2;font-size:11px;font-weight:500;line-height:16px;letter-spacing:.5px;text-align:left;color:var(--text-lowemphasis)}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.support-label.invalid{color:var(--error-red)}.hide{display:none}.sa-input-big-label-container,.sa-input-label-container{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.sa-input-big-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);margin:0}.sa-input-big-description,.sa-input-description{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-roboto, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.sa-input-container{display:flex;flex-direction:column;gap:var(--medium-20px, 20px)}.sa-input-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.sa-input-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.d-flex{display:flex}.chip-container{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:100%;min-height:20px}.chip-input{border:none;outline:none;background:transparent;flex:1;min-width:60px;font-size:14px;font-family:inherit;color:inherit}.chip-input::placeholder{color:var(--text-medium-emphasis, #6D6979)}.chip-container sa-chip{margin:2px 0}@media screen and (max-width: 1024px){.masked{font-weight:unset}}\n"] }]
|
|
2318
2316
|
}], ctorParameters: () => [], propDecorators: { formInput: [{
|
|
2319
2317
|
type: ViewChild,
|
|
2320
2318
|
args: ['formInput']
|
|
@@ -2498,6 +2496,17 @@ class FormSelectComponent extends FieldType {
|
|
|
2498
2496
|
this.field.formControl.updateValueAndValidity();
|
|
2499
2497
|
}
|
|
2500
2498
|
}
|
|
2499
|
+
// Toggle behavior for the single "Select all" label in header
|
|
2500
|
+
toggleSelectAll() {
|
|
2501
|
+
if (!this.params?.multiple)
|
|
2502
|
+
return;
|
|
2503
|
+
if (this.isAllSelected()) {
|
|
2504
|
+
this.unselectAll();
|
|
2505
|
+
}
|
|
2506
|
+
else {
|
|
2507
|
+
this.selectAll();
|
|
2508
|
+
}
|
|
2509
|
+
}
|
|
2501
2510
|
isAllSelected() {
|
|
2502
2511
|
const currentValue = this.formControl.value || [];
|
|
2503
2512
|
return Array.isArray(currentValue) &&
|
|
@@ -2611,7 +2620,7 @@ class FormSelectComponent extends FieldType {
|
|
|
2611
2620
|
}
|
|
2612
2621
|
}
|
|
2613
2622
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2614
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", outputs: { hoverEvent: "hoverEvent" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent$1, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"onNgSelectChange($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\" [clearable]=\"false\" [closeOnSelect]=\"!params?.showCheckboxes\" class=\"form-ng-select\"> \n <!-- Multi-label template for displaying selected items as chips -->\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" \n [id]=\"getFullObjectFromValue(item)[params?.bindValue || props?.['bindValue'] || 'id']\"\n [iconPath]=\"params.iconPath\" \n [text]=\"getFullObjectFromValue(item)[params?.bindLabel || props?.['bindLabel'] || 'name']\" \n [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" \n [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" \n [type]=\"params.type || 'regular'\" \n [state]=\"params.state || 'primary'\" \n [filling]=\"params.filling || 'filled'\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd > 0\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" \n [type]=\"params.type || 'regular'\" \n [state]=\"params.state || 'default'\" \n [filling]=\"params.filling || 'filled'\">\n </sa-chip>\n </div>\n </ng-template>\n \n <!-- Universal option template with tooltip support for any select type -->\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\n <div class=\"option-container\" [ngClass]=\"{'checkbox-option': params?.showCheckboxes, 'single-option-with-tooltip': !params?.showCheckboxes}\">\n <!-- Checkbox for multi-select -->\n <input *ngIf=\"params?.showCheckboxes\" \n type=\"checkbox\" \n [checked]=\"isOptionSelected(item)\" \n (mousedown)=\"toggleItemSelection(item, $event)\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n class=\"option-checkbox\">\n \n <!-- Option label -->\n <span class=\"option-label\">{{ item[props?.['bindLabel'] || 'name'] }}</span>\n \n <!-- Tooltip icon - shows when item has description/tooltip -->\n <sa-icon *ngIf=\"item.description || item.tooltip\" \n [icon]=\"'infoCircleOutlined'\" \n [size]=\"'16'\" \n class=\"option-tooltip-icon d-flex\"\n [matTooltip]=\"item.description || item.tooltip || ''\" \n matTooltipClass=\"custom-tooltip\"\n [matTooltipDisabled]=\"!(item.description || item.tooltip)\">\n </sa-icon>\n </div>\n </ng-template>\n \n <!-- Simple header template for Select All / Unselect All when in checkbox mode -->\n <ng-template ng-header-tmp *ngIf=\"params?.showCheckboxes && params?.multiple\">\n <div class=\"select-all-header\">\n <span class=\"select-all-label\" (click)=\"selectAll()\">Select all</span>\n <span class=\"unselect-all-label\" (click)=\"unselectAll()\">Unselect all</span>\n </div>\n </ng-template>\n\n <ng-template ng-arrow-tmp>\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex custom-dropdown-arrow\" [size]=\"'18'\"></sa-icon>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" tabindex=\"0\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(!this.openState)\"\n (blur)=\"openClose(false)\" ></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n <div class=\"fallback-arrow\" *ngIf=\"!openState\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\"></sa-icon>\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px) 0 var(--medium-30px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}::ng-deep .ng-arrow-wrapper{pointer-events:none}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none;z-index:1000}.ng-select ::ng-deep .ng-select-container{box-shadow:none;position:relative;z-index:1}::ng-deep .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{box-shadow:none}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--ng-select-chip-bg, var(--primary-50))}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:9999;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}.checkbox-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;gap:8px;transition:background-color .2s ease}.checkbox-option:hover{background-color:var(--grey-50, #F9FAFB)}.option-checkbox{width:16px;height:16px;margin-right:8px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.option-label{font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.single-option-with-tooltip{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px;transition:background-color .2s ease;width:100%}.single-option-with-tooltip .option-label{flex:1;font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.option-tooltip-icon{color:var(--grey-400, #98A2B3);cursor:pointer;flex-shrink:0}.option-tooltip-icon:hover{color:var(--primary-500, #6B46C1)}.select-all-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--grey-200, #E4E7EC);background-color:var(--grey-25, #FCFCFD);cursor:pointer;transition:background-color .2s ease}.select-all-header:hover{background-color:var(--grey-50, #F9FAFB)}.select-all-label,.unselect-all-label{font-size:14px;font-weight:500;color:var(--primary-500, #6B46C1);line-height:20px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s ease}.select-all-label:hover,.unselect-all-label:hover{background-color:var(--primary-50, #F3F4F6)}.unselect-all-label{color:var(--grey-600, #475467)}.unselect-all-label:hover{background-color:var(--grey-100, #F2F4F7)}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-medium-emphasis, #6D6979)}::ng-deep .form-ng-select.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:transparent!important}::ng-deep .form-ng-select.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-highlighted{background-color:var(--grey-50, #F9FAFB)!important}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0}.custom-dropdown-arrow{color:var(--Grey-600, #475467);cursor:pointer;transition:transform .2s ease}.ng-select.ng-select-opened .custom-dropdown-arrow{transform:rotate(180deg)}.form-ng-select.ng-select ::ng-deep .ng-arrow-wrapper{display:flex!important;align-items:center;justify-content:center;padding-right:12px;width:18px;height:18px}.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{display:none}.ng-select.ng-select-multiple ::ng-deep .ng-arrow-wrapper{display:flex!important}.fallback-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--Grey-600, #475467)}.ng-select ::ng-deep .ng-arrow-wrapper:not(:empty)+.fallback-arrow{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2623
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: FormSelectComponent, isStandalone: true, selector: "lib-form-select", outputs: { hoverEvent: "hoverEvent" }, viewQueries: [{ propertyName: "ngSelect", first: true, predicate: NgSelectComponent$1, descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\r\n @if(!!props?.['label']){\r\n <div class=\"sa-select-label-container\">\r\n <div class=\"sa-select-label-tooltip-container\">\r\n <span class=\"sa-select-label\">\r\n {{props?.['label']}}\r\n </span>\r\n @if(!!props?.['tooltip']){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\r\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\r\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\r\n </span>\r\n }\r\n </div>\r\n @if(!!props?.['description']) {\r\n <p class=\"sa-select-description\">\r\n {{props?.['description']}}\r\n </p>\r\n }\r\n </div>\r\n }\r\n <div class=\"sa-select-field-container\">\r\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\r\n class=\"clicked-label\">{{params.label}}\r\n </div>\r\n <div\r\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\r\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\r\n (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\"\r\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\r\n </div>\r\n <ng-select (change)=\"onNgSelectChange($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\r\n (search)=\"openClose(true)\" (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\" [isOpen]=\"openState\"\r\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\r\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\" [clearable]=\"false\" [closeOnSelect]=\"!params?.showCheckboxes\" class=\"form-ng-select\"> \r\n <!-- Multi-label template for displaying selected items as chips -->\r\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\r\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\r\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" \r\n [id]=\"getFullObjectFromValue(item)[params?.bindValue || props?.['bindValue'] || 'id']\"\r\n [iconPath]=\"params.iconPath\" \r\n [text]=\"getFullObjectFromValue(item)[params?.bindLabel || props?.['bindLabel'] || 'name']\" \r\n [type]=\"params.type\"\r\n [state]=\"field.props.disabled ? 'neutral' : params.state\" \r\n [filling]=\"params.filling\"\r\n [iconPosition]=\"params.iconPosition\">\r\n </sa-chip>\r\n </div>\r\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\r\n *ngIf=\"items.length > (startInd+labelLimit)\">\r\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" \r\n [type]=\"params.type || 'regular'\" \r\n [state]=\"params.state || 'primary'\" \r\n [filling]=\"params.filling || 'filled'\">\r\n </sa-chip>\r\n </div>\r\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd > 0\"\r\n class=\"ng-value overflow-label\">\r\n <sa-chip text=\"...\" \r\n [type]=\"params.type || 'regular'\" \r\n [state]=\"params.state || 'default'\" \r\n [filling]=\"params.filling || 'filled'\">\r\n </sa-chip>\r\n </div>\r\n </ng-template>\r\n \r\n <!-- Universal option template with tooltip support for any select type -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <div class=\"option-container\" [ngClass]=\"{'checkbox-option': params?.showCheckboxes, 'single-option-with-tooltip': !params?.showCheckboxes}\">\r\n <!-- Checkbox for multi-select -->\r\n <input *ngIf=\"params?.showCheckboxes\" \r\n type=\"checkbox\" \r\n [checked]=\"isOptionSelected(item)\" \r\n (mousedown)=\"toggleItemSelection(item, $event)\"\r\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n class=\"option-checkbox\">\r\n \r\n <!-- Option label -->\r\n <span class=\"option-label\">{{ item[props?.['bindLabel'] || 'name'] }}</span>\r\n \r\n <!-- Tooltip icon - shows when item has description/tooltip -->\r\n <sa-icon *ngIf=\"item.description || item.tooltip\" \r\n [icon]=\"'infoCircleOutlined'\" \r\n [size]=\"'16'\" \r\n class=\"option-tooltip-icon d-flex\"\r\n [matTooltip]=\"item.description || item.tooltip || ''\" \r\n matTooltipClass=\"custom-tooltip\"\r\n [matTooltipDisabled]=\"!(item.description || item.tooltip)\">\r\n </sa-icon>\r\n </div>\r\n </ng-template>\r\n \r\n <!-- Simple header template for Select All / Unselect All when in checkbox mode -->\r\n <ng-template ng-header-tmp *ngIf=\"params?.showCheckboxes && params?.multiple\">\r\n <div class=\"select-all-header\">\r\n <span class=\"select-all-label\" (click)=\"toggleSelectAll()\">Select all</span>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template ng-arrow-tmp>\r\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex custom-dropdown-arrow\" [size]=\"'18'\"></sa-icon>\r\n </ng-template>\r\n </ng-select>\r\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\r\n <sa-icon [icon]=\"'downChevronOutlined'\" tabindex=\"0\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(!this.openState)\"\r\n (blur)=\"openClose(false)\" ></sa-icon>\r\n </div>\r\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\r\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\r\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\r\n </div> -->\r\n\r\n <div class=\"fallback-arrow\" *ngIf=\"!openState\">\r\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\"></sa-icon>\r\n </div>\r\n </div>\r\n @if(!formControl.valid){\r\n <div class=\"error-message-container\">\r\n <span class=\"error-message\">\r\n <formly-validation-message [field]=\"field\"></formly-validation-message>\r\n </span>\r\n </div>\r\n }\r\n <div class=\"support-label\">{{params.supportText}}</div>\r\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px) 0 var(--medium-30px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}::ng-deep .ng-arrow-wrapper{pointer-events:none}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none;z-index:1000}.ng-select ::ng-deep .ng-select-container{box-shadow:none;position:relative;z-index:1}::ng-deep .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{box-shadow:none}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--ng-select-chip-bg, var(--primary-50))}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:9999;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}.checkbox-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;gap:8px;transition:background-color .2s ease}.checkbox-option:hover{background-color:var(--primary-50)}.option-checkbox{width:16px;height:16px;margin-right:8px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.option-label{font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.single-option-with-tooltip{display:flex;align-items:center;padding:8px 12px;gap:4px;transition:background-color .2s ease;width:100%}.single-option-with-tooltip:hover{background-color:var(--primary-50)}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:transparent!important}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0}.custom-dropdown-arrow{color:var(--Grey-600, #475467);cursor:pointer;transition:transform .2s ease}.ng-select.ng-select-opened .custom-dropdown-arrow{transform:rotate(180deg)}.form-ng-select.ng-select ::ng-deep .ng-arrow-wrapper{display:flex!important;align-items:center;justify-content:center;padding-right:12px;width:18px;height:18px}.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{display:none}.ng-select.ng-select-multiple ::ng-deep .ng-arrow-wrapper{display:flex!important}.fallback-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--Grey-600, #475467)}.ng-select ::ng-deep .ng-arrow-wrapper:not(:empty)+.fallback-arrow{display:none}.ng-select ::ng-deep .ng-dropdown-panel .ng-dropdown-header{cursor:pointer;border-bottom:none;padding:var(--small-12px, 12px) var(--small-12px, 12px) var(--small-2px, 2px) var(--small-12px, 12px)}.ng-select ::ng-deep .ng-dropdown-panel .ng-dropdown-header:hover{cursor:pointer}.select-all-header{display:flex;align-items:center;padding-bottom:2px;cursor:pointer;gap:8px}.select-all-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.select-all-label{color:var(--primary-500, #7F56D9);text-align:center;font-family:var(--font-family, Roboto);font-size:12px;font-style:normal;font-weight:400;line-height:16px}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:transparent}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-highlighted{background-color:var(--primary-50)}.sa-select-container .ng-select ::ng-deep .ng-arrow-wrapper:after{display:none}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "directive", type: i2$3.ɵFormlyAttributes, selector: "[formlyAttributes]", inputs: ["formlyAttributes", "id"] }, { kind: "component", type: i2$3.ɵFormlyValidationMessage, selector: "formly-validation-message", inputs: ["field"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
2615
2624
|
}
|
|
2616
2625
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FormSelectComponent, decorators: [{
|
|
2617
2626
|
type: Component,
|
|
@@ -2627,7 +2636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
2627
2636
|
IconComponent,
|
|
2628
2637
|
CommonModule,
|
|
2629
2638
|
MatTooltipModule
|
|
2630
|
-
], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\n @if(!!props?.['label']){\n <div class=\"sa-select-label-container\">\n <div class=\"sa-select-label-tooltip-container\">\n <span class=\"sa-select-label\">\n {{props?.['label']}}\n </span>\n @if(!!props?.['tooltip']){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\n </span>\n }\n </div>\n @if(!!props?.['description']) {\n <p class=\"sa-select-description\">\n {{props?.['description']}}\n </p>\n }\n </div>\n }\n <div class=\"sa-select-field-container\">\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\n class=\"clicked-label\">{{params.label}}\n </div>\n <div\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\n </div>\n <ng-select (change)=\"onNgSelectChange($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\n (search)=\"openClose(true)\" (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\" [isOpen]=\"openState\"\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\" [clearable]=\"false\" [closeOnSelect]=\"!params?.showCheckboxes\" class=\"form-ng-select\"> \n <!-- Multi-label template for displaying selected items as chips -->\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" \n [id]=\"getFullObjectFromValue(item)[params?.bindValue || props?.['bindValue'] || 'id']\"\n [iconPath]=\"params.iconPath\" \n [text]=\"getFullObjectFromValue(item)[params?.bindLabel || props?.['bindLabel'] || 'name']\" \n [type]=\"params.type\"\n [state]=\"field.props.disabled ? 'neutral' : params.state\" \n [filling]=\"params.filling\"\n [iconPosition]=\"params.iconPosition\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\n *ngIf=\"items.length > (startInd+labelLimit)\">\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" \n [type]=\"params.type || 'regular'\" \n [state]=\"params.state || 'primary'\" \n [filling]=\"params.filling || 'filled'\">\n </sa-chip>\n </div>\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd > 0\"\n class=\"ng-value overflow-label\">\n <sa-chip text=\"...\" \n [type]=\"params.type || 'regular'\" \n [state]=\"params.state || 'default'\" \n [filling]=\"params.filling || 'filled'\">\n </sa-chip>\n </div>\n </ng-template>\n \n <!-- Universal option template with tooltip support for any select type -->\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\n <div class=\"option-container\" [ngClass]=\"{'checkbox-option': params?.showCheckboxes, 'single-option-with-tooltip': !params?.showCheckboxes}\">\n <!-- Checkbox for multi-select -->\n <input *ngIf=\"params?.showCheckboxes\" \n type=\"checkbox\" \n [checked]=\"isOptionSelected(item)\" \n (mousedown)=\"toggleItemSelection(item, $event)\"\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\n class=\"option-checkbox\">\n \n <!-- Option label -->\n <span class=\"option-label\">{{ item[props?.['bindLabel'] || 'name'] }}</span>\n \n <!-- Tooltip icon - shows when item has description/tooltip -->\n <sa-icon *ngIf=\"item.description || item.tooltip\" \n [icon]=\"'infoCircleOutlined'\" \n [size]=\"'16'\" \n class=\"option-tooltip-icon d-flex\"\n [matTooltip]=\"item.description || item.tooltip || ''\" \n matTooltipClass=\"custom-tooltip\"\n [matTooltipDisabled]=\"!(item.description || item.tooltip)\">\n </sa-icon>\n </div>\n </ng-template>\n \n <!-- Simple header template for Select All / Unselect All when in checkbox mode -->\n <ng-template ng-header-tmp *ngIf=\"params?.showCheckboxes && params?.multiple\">\n <div class=\"select-all-header\">\n <span class=\"select-all-label\" (click)=\"selectAll()\">Select all</span>\n <span class=\"unselect-all-label\" (click)=\"unselectAll()\">Unselect all</span>\n </div>\n </ng-template>\n\n <ng-template ng-arrow-tmp>\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex custom-dropdown-arrow\" [size]=\"'18'\"></sa-icon>\n </ng-template>\n </ng-select>\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\n <sa-icon [icon]=\"'downChevronOutlined'\" tabindex=\"0\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(!this.openState)\"\n (blur)=\"openClose(false)\" ></sa-icon>\n </div>\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\n </div> -->\n\n <div class=\"fallback-arrow\" *ngIf=\"!openState\">\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\"></sa-icon>\n </div>\n </div>\n @if(!formControl.valid){\n <div class=\"error-message-container\">\n <span class=\"error-message\">\n <formly-validation-message [field]=\"field\"></formly-validation-message>\n </span>\n </div>\n }\n <div class=\"support-label\">{{params.supportText}}</div>\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px) 0 var(--medium-30px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}::ng-deep .ng-arrow-wrapper{pointer-events:none}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none;z-index:1000}.ng-select ::ng-deep .ng-select-container{box-shadow:none;position:relative;z-index:1}::ng-deep .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{box-shadow:none}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--ng-select-chip-bg, var(--primary-50))}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:9999;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}.checkbox-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;gap:8px;transition:background-color .2s ease}.checkbox-option:hover{background-color:var(--grey-50, #F9FAFB)}.option-checkbox{width:16px;height:16px;margin-right:8px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.option-label{font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.single-option-with-tooltip{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:8px;transition:background-color .2s ease;width:100%}.single-option-with-tooltip .option-label{flex:1;font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.option-tooltip-icon{color:var(--grey-400, #98A2B3);cursor:pointer;flex-shrink:0}.option-tooltip-icon:hover{color:var(--primary-500, #6B46C1)}.select-all-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--grey-200, #E4E7EC);background-color:var(--grey-25, #FCFCFD);cursor:pointer;transition:background-color .2s ease}.select-all-header:hover{background-color:var(--grey-50, #F9FAFB)}.select-all-label,.unselect-all-label{font-size:14px;font-weight:500;color:var(--primary-500, #6B46C1);line-height:20px;cursor:pointer;padding:4px 8px;border-radius:4px;transition:background-color .2s ease}.select-all-label:hover,.unselect-all-label:hover{background-color:var(--primary-50, #F3F4F6)}.unselect-all-label{color:var(--grey-600, #475467)}.unselect-all-label:hover{background-color:var(--grey-100, #F2F4F7)}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-medium-emphasis, #6D6979)}::ng-deep .form-ng-select.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:transparent!important}::ng-deep .form-ng-select.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-highlighted{background-color:var(--grey-50, #F9FAFB)!important}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0}.custom-dropdown-arrow{color:var(--Grey-600, #475467);cursor:pointer;transition:transform .2s ease}.ng-select.ng-select-opened .custom-dropdown-arrow{transform:rotate(180deg)}.form-ng-select.ng-select ::ng-deep .ng-arrow-wrapper{display:flex!important;align-items:center;justify-content:center;padding-right:12px;width:18px;height:18px}.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{display:none}.ng-select.ng-select-multiple ::ng-deep .ng-arrow-wrapper{display:flex!important}.fallback-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--Grey-600, #475467)}.ng-select ::ng-deep .ng-arrow-wrapper:not(:empty)+.fallback-arrow{display:none}\n"] }]
|
|
2639
|
+
], template: "<div class=\"sa-select-container {{props?.['inputContainerClass']}}\">\r\n @if(!!props?.['label']){\r\n <div class=\"sa-select-label-container\">\r\n <div class=\"sa-select-label-tooltip-container\">\r\n <span class=\"sa-select-label\">\r\n {{props?.['label']}}\r\n </span>\r\n @if(!!props?.['tooltip']){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\r\n [matTooltip]=\"props?.['tooltip']\" matTooltipClass=\"custom-tooltip\" class=\"tooltip-icon d-flex\"\r\n [size]=\"props?.['tooltipIconSize'] || '20'\"></sa-icon>\r\n </span>\r\n }\r\n </div>\r\n @if(!!props?.['description']) {\r\n <p class=\"sa-select-description\">\r\n {{props?.['description']}}\r\n </p>\r\n }\r\n </div>\r\n }\r\n <div class=\"sa-select-field-container\">\r\n <div [style.visibility]=\"(props?.['showTag'] !== false && (openState || topLabel)) ? 'visible' : 'hidden'\"\r\n class=\"clicked-label\">{{params.label}}\r\n </div>\r\n <div\r\n class=\"ng-select-field {{openState ? 'activated' : 'idle'}} {{field.props.disabled ? 'disabled' : ''}} {{formControl.valid ? '' : 'invalid'}}\">\r\n <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"left-icon svg-icon\" [style]=\"svgStyle\"\r\n (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\"\r\n *ngIf=\"(params.dropIconPosition == 'left' || params.dropIconPosition == 'both')\">\r\n </div>\r\n <ng-select (change)=\"onNgSelectChange($event)\" (remove)=\"shiftLabel('removed')\" (clear)=\"shiftLabel('cleared')\"\r\n (search)=\"openClose(true)\" (click)=\"openClose(!this.openState)\" (blur)=\"openClose(false)\" [isOpen]=\"openState\"\r\n [placeholder]=\"placeholderLabel\" [bindLabel]=\"props?.['bindLabel'] || 'name'\" [bindValue]=\"props?.['bindValue'] || null\" [items]=\"selectables\" [multiple]=\"params?.multiple\"\r\n [formControl]=\"formControl\" [style] [formlyAttributes]=\"field\" [searchable]=\"field.props['searchable']\" [clearable]=\"false\" [closeOnSelect]=\"!params?.showCheckboxes\" class=\"form-ng-select\"> \r\n <!-- Multi-label template for displaying selected items as chips -->\r\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\r\n <div *ngFor=\"let item of (items ? items.slice(startInd,startInd+labelLimit): [])\">\r\n <sa-chip (onClickEvent)=\" (!field.props.disabled) ? clear(item) : null\" \r\n [id]=\"getFullObjectFromValue(item)[params?.bindValue || props?.['bindValue'] || 'id']\"\r\n [iconPath]=\"params.iconPath\" \r\n [text]=\"getFullObjectFromValue(item)[params?.bindLabel || props?.['bindLabel'] || 'name']\" \r\n [type]=\"params.type\"\r\n [state]=\"field.props.disabled ? 'neutral' : params.state\" \r\n [filling]=\"params.filling\"\r\n [iconPosition]=\"params.iconPosition\">\r\n </sa-chip>\r\n </div>\r\n <div (click)=\"shiftLabel('clicked')\" class=\"ng-value overflow-label\"\r\n *ngIf=\"items.length > (startInd+labelLimit)\">\r\n <sa-chip text=\"+{{items.length-(startInd+labelLimit)}}\" \r\n [type]=\"params.type || 'regular'\" \r\n [state]=\"params.state || 'primary'\" \r\n [filling]=\"params.filling || 'filled'\">\r\n </sa-chip>\r\n </div>\r\n <div (click)=\"shiftLabel('cleared')\" *ngIf=\"startInd > 0\"\r\n class=\"ng-value overflow-label\">\r\n <sa-chip text=\"...\" \r\n [type]=\"params.type || 'regular'\" \r\n [state]=\"params.state || 'default'\" \r\n [filling]=\"params.filling || 'filled'\">\r\n </sa-chip>\r\n </div>\r\n </ng-template>\r\n \r\n <!-- Universal option template with tooltip support for any select type -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n <div class=\"option-container\" [ngClass]=\"{'checkbox-option': params?.showCheckboxes, 'single-option-with-tooltip': !params?.showCheckboxes}\">\r\n <!-- Checkbox for multi-select -->\r\n <input *ngIf=\"params?.showCheckboxes\" \r\n type=\"checkbox\" \r\n [checked]=\"isOptionSelected(item)\" \r\n (mousedown)=\"toggleItemSelection(item, $event)\"\r\n (click)=\"$event.stopPropagation(); $event.preventDefault()\"\r\n class=\"option-checkbox\">\r\n \r\n <!-- Option label -->\r\n <span class=\"option-label\">{{ item[props?.['bindLabel'] || 'name'] }}</span>\r\n \r\n <!-- Tooltip icon - shows when item has description/tooltip -->\r\n <sa-icon *ngIf=\"item.description || item.tooltip\" \r\n [icon]=\"'infoCircleOutlined'\" \r\n [size]=\"'16'\" \r\n class=\"option-tooltip-icon d-flex\"\r\n [matTooltip]=\"item.description || item.tooltip || ''\" \r\n matTooltipClass=\"custom-tooltip\"\r\n [matTooltipDisabled]=\"!(item.description || item.tooltip)\">\r\n </sa-icon>\r\n </div>\r\n </ng-template>\r\n \r\n <!-- Simple header template for Select All / Unselect All when in checkbox mode -->\r\n <ng-template ng-header-tmp *ngIf=\"params?.showCheckboxes && params?.multiple\">\r\n <div class=\"select-all-header\">\r\n <span class=\"select-all-label\" (click)=\"toggleSelectAll()\">Select all</span>\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template ng-arrow-tmp>\r\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex custom-dropdown-arrow\" [size]=\"'18'\"></sa-icon>\r\n </ng-template>\r\n </ng-select>\r\n <div *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\" class=\"right-icon\">\r\n <sa-icon [icon]=\"'downChevronOutlined'\" tabindex=\"0\" class=\"d-flex\" [size]=\"'18'\" (click)=\"openClose(!this.openState)\"\r\n (blur)=\"openClose(false)\" ></sa-icon>\r\n </div>\r\n <!-- <div role=\"button\" title=\"drop-button\" tabindex=\"0\" class=\"right-icon svg-icon\" [style]=\"svgStyle\"\r\n (click)=\"openClose(true)\" (blur)=\"openClose(false)\"\r\n *ngIf=\"(params.dropIconPosition == 'right' || params.dropIconPosition == 'both')\">\r\n </div> -->\r\n\r\n <div class=\"fallback-arrow\" *ngIf=\"!openState\">\r\n <sa-icon [icon]=\"'downChevronOutlined'\" class=\"d-flex\" [size]=\"'18'\"></sa-icon>\r\n </div>\r\n </div>\r\n @if(!formControl.valid){\r\n <div class=\"error-message-container\">\r\n <span class=\"error-message\">\r\n <formly-validation-message [field]=\"field\"></formly-validation-message>\r\n </span>\r\n </div>\r\n }\r\n <div class=\"support-label\">{{params.supportText}}</div>\r\n</div>", styles: [".idle{--border: 1px solid var(--grey-50)}.activated{--border: 1px solid var(--primary-300)}.disabled{border:1px solid var(--grey-50)!important}.ng-select-field:hover{--border: 1px solid var(--primary-300);--font-color: var(--text-highemphasis)}.ng-select-field{width:100%;box-sizing:border-box;position:relative;display:inline-flex;padding:0px var(--small-12px) 0 var(--medium-30px);height:40px;justify-content:center;align-items:center;border:var(--border);border-radius:var(--small-4px);font-family:var(--font);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;--font-color: var(--text-lowemphasis)}.invalid{border:1px solid var(--semantic-error-500, #BD271E)}.ng-select{width:inherit;display:inline-flex;justify-content:center;align-items:center;flex-shrink:0}::ng-deep .ng-arrow-wrapper{pointer-events:none}.custom-select-container .ng-select{padding-left:1.25rem}.ng-select ::ng-deep .ng-select-container{display:inline-flex;justify-content:center;align-items:center;flex-shrink:0;font-family:var(--font);box-sizing:border-box;border:none}.ng-select ::ng-deep .ng-dropdown-panel{margin-top:2px;border:1px solid var(--grey-50);box-shadow:none;z-index:1000}.ng-select ::ng-deep .ng-select-container{box-shadow:none;position:relative;z-index:1}::ng-deep .ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{box-shadow:none}.ng-select ::ng-deep .ng-value-container{padding:0!important;flex-wrap:nowrap!important;display:flex;justify-content:flex-start;gap:5px;overflow-x:hidden}.ng-select ::ng-deep .ng-value{flex:none;margin:0!important}.overflow-label{padding:0 5px;cursor:pointer}.ng-select ::ng-deep .ng-placeholder{padding:0!important;position:inherit!important;color:var(--text-lowemphasis)}.ng-select ::ng-deep .ng-input{padding:0!important;position:inherit!important}.ng-select ::ng-deep .ng-clear-wrapper{z-index:9;display:flex;margin-left:5px}.ng-select ::ng-deep .ng-arrow{border-color:none!important;border-style:none!important;border-width:0!important}.svg-icon{-webkit-mask-size:contain;mask-size:contain;width:20px;height:20px;background-color:gray}.svg-icon:hover{cursor:pointer}.ng-select ::ng-deep .ng-arrow-wrapper,::ng-deep .ng-select-filtered .ng-select-container .ng-value-container .ng-value{display:none}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{background-color:var(--ng-select-chip-bg, var(--primary-50))}.support-label{font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:var(--small-4px) var(--small-16px) 0px var(--small-16px)}.clicked-label{position:relative;width:max-content;font-family:var(--font);font-size:11px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px;color:var(--text-lowemphasis);padding:0 var(--small-8px);margin-left:12px;margin-bottom:-8px;z-index:9999;background-color:#fff}.ng-select ::ng-deep .ng-dropdown-panel{width:calc(100% + 24px);left:-12px;margin-top:6px}.custom-select-container .ng-select ::ng-deep .ng-dropdown-panel{left:.45rem}.d-flex{display:flex}.custom-select-container.sa-select-container{display:flex;flex-direction:column;gap:var(--small-12px, 12px)}.sa-select-label-tooltip-container{display:flex;gap:var(--small-4px);align-items:center}.sa-select-label{color:var(--text-highemphasis, #1B1D20);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}.right-icon{padding-right:1.2rem;color:#757575}.invalid .right-icon{color:var(--semantic-error-500, #BD271E)}.error-message{color:var(--semantic-error-500, #BD271E);font-family:var(--font);font-size:11px;font-style:normal;font-weight:400;line-height:var(--small-16px);letter-spacing:.5px}.checkbox-option{display:flex;align-items:center;padding:8px 12px;cursor:pointer;gap:8px;transition:background-color .2s ease}.checkbox-option:hover{background-color:var(--primary-50)}.option-checkbox{width:16px;height:16px;margin-right:8px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.option-label{font-size:14px;font-weight:400;color:var(--text-high-emphasis, #1D2939);line-height:20px;letter-spacing:.25px}.single-option-with-tooltip{display:flex;align-items:center;padding:8px 12px;gap:4px;transition:background-color .2s ease;width:100%}.single-option-with-tooltip:hover{background-color:var(--primary-50)}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:transparent!important}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:0}.custom-dropdown-arrow{color:var(--Grey-600, #475467);cursor:pointer;transition:transform .2s ease}.ng-select.ng-select-opened .custom-dropdown-arrow{transform:rotate(180deg)}.form-ng-select.ng-select ::ng-deep .ng-arrow-wrapper{display:flex!important;align-items:center;justify-content:center;padding-right:12px;width:18px;height:18px}.ng-select ::ng-deep .ng-arrow-wrapper .ng-arrow{display:none}.ng-select.ng-select-multiple ::ng-deep .ng-arrow-wrapper{display:flex!important}.fallback-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2;color:var(--Grey-600, #475467)}.ng-select ::ng-deep .ng-arrow-wrapper:not(:empty)+.fallback-arrow{display:none}.ng-select ::ng-deep .ng-dropdown-panel .ng-dropdown-header{cursor:pointer;border-bottom:none;padding:var(--small-12px, 12px) var(--small-12px, 12px) var(--small-2px, 2px) var(--small-12px, 12px)}.ng-select ::ng-deep .ng-dropdown-panel .ng-dropdown-header:hover{cursor:pointer}.select-all-header{display:flex;align-items:center;padding-bottom:2px;cursor:pointer;gap:8px}.select-all-checkbox{width:16px;height:16px;cursor:pointer;accent-color:var(--primary-500, #6B46C1)}.select-all-label{color:var(--primary-500, #7F56D9);text-align:center;font-family:var(--font-family, Roboto);font-size:12px;font-style:normal;font-weight:400;line-height:16px}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:transparent}::ng-deep .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-highlighted{background-color:var(--primary-50)}.sa-select-container .ng-select ::ng-deep .ng-arrow-wrapper:after{display:none}\n"] }]
|
|
2631
2640
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { hoverEvent: [{
|
|
2632
2641
|
type: Output,
|
|
2633
2642
|
args: ['hoverEvent']
|
|
@@ -2664,6 +2673,7 @@ class MessageBannerV2Component {
|
|
|
2664
2673
|
this.formlyFields = [];
|
|
2665
2674
|
this.allFieldsFilled = signal(false);
|
|
2666
2675
|
this.additionalFormlyFields = [];
|
|
2676
|
+
this.allFormlyFields = [];
|
|
2667
2677
|
this.usePrebuiltFields = signal(false);
|
|
2668
2678
|
this.onFormEvent = new EventEmitter();
|
|
2669
2679
|
this.buttons = [];
|
|
@@ -2740,12 +2750,26 @@ class MessageBannerV2Component {
|
|
|
2740
2750
|
if (changes['prebuiltFormFields']) {
|
|
2741
2751
|
this.usePrebuiltFields.set(!!this.prebuiltFormFields);
|
|
2742
2752
|
}
|
|
2743
|
-
if (changes['formConfig']
|
|
2753
|
+
if (changes['formConfig']) {
|
|
2744
2754
|
if (!this.usePrebuiltFields()) {
|
|
2745
2755
|
this.updateFormlyFields();
|
|
2756
|
+
this.initializeCleanFormState();
|
|
2746
2757
|
}
|
|
2747
2758
|
}
|
|
2748
2759
|
}
|
|
2760
|
+
initializeCleanFormState() {
|
|
2761
|
+
this.model = {};
|
|
2762
|
+
setTimeout(() => {
|
|
2763
|
+
Object.keys(this.form.controls).forEach(key => {
|
|
2764
|
+
const control = this.form.get(key);
|
|
2765
|
+
if (control) {
|
|
2766
|
+
control.markAsUntouched();
|
|
2767
|
+
control.markAsPristine();
|
|
2768
|
+
control.setErrors(null);
|
|
2769
|
+
}
|
|
2770
|
+
});
|
|
2771
|
+
}, 0);
|
|
2772
|
+
}
|
|
2749
2773
|
updateContentBasedOnType(type) {
|
|
2750
2774
|
// Only apply default content if custom content hasn't been provided
|
|
2751
2775
|
const currentState = this.state();
|
|
@@ -2834,10 +2858,12 @@ class MessageBannerV2Component {
|
|
|
2834
2858
|
// Skip Formly field generation if using prebuilt fields
|
|
2835
2859
|
if (this.usePrebuiltFields()) {
|
|
2836
2860
|
this.formlyFields = [];
|
|
2861
|
+
this.allFormlyFields = [];
|
|
2837
2862
|
return;
|
|
2838
2863
|
}
|
|
2839
2864
|
if (!this.formConfig || !this.formConfig.fields || this.formConfig.fields.length === 0) {
|
|
2840
2865
|
this.formlyFields = [];
|
|
2866
|
+
this.allFormlyFields = [];
|
|
2841
2867
|
return;
|
|
2842
2868
|
}
|
|
2843
2869
|
// Get layout configuration
|
|
@@ -2846,16 +2872,16 @@ class MessageBannerV2Component {
|
|
|
2846
2872
|
const initialVisibleFields = layout.initialVisibleFields || fieldsPerRow;
|
|
2847
2873
|
// Update CSS grid columns dynamically
|
|
2848
2874
|
this.updateGridColumns(fieldsPerRow);
|
|
2849
|
-
// Create
|
|
2850
|
-
|
|
2851
|
-
// Create Formly fields for initial visible fields - normalize the field structure
|
|
2852
|
-
this.formlyFields = initialFields.map((field, index) => {
|
|
2875
|
+
// Create all fields with proper hide expressions for conditional fields
|
|
2876
|
+
this.allFormlyFields = this.formConfig.fields.map((field, index) => {
|
|
2853
2877
|
// Normalize field structure to proper Formly format
|
|
2854
2878
|
const placeholderValue = field.placeholder || field.props?.placeholder || field.params?.placeholder || field.props?.params?.placeholder || '';
|
|
2879
|
+
const isConditionalField = index >= initialVisibleFields;
|
|
2855
2880
|
const formlyField = {
|
|
2856
2881
|
key: field.key,
|
|
2857
2882
|
type: field.type,
|
|
2858
|
-
className: this.getFieldClassName(index, fieldsPerRow),
|
|
2883
|
+
className: this.getFieldClassName(index % fieldsPerRow, fieldsPerRow),
|
|
2884
|
+
hideExpression: isConditionalField ? () => !this.shouldShowAdditionalFields() : false,
|
|
2859
2885
|
props: {
|
|
2860
2886
|
// Handle mixed structure - some fields have props at root, others nested
|
|
2861
2887
|
placeholder: placeholderValue,
|
|
@@ -2879,7 +2905,7 @@ class MessageBannerV2Component {
|
|
|
2879
2905
|
placeholder: placeholderValue
|
|
2880
2906
|
}
|
|
2881
2907
|
},
|
|
2882
|
-
validators:
|
|
2908
|
+
validators: this.getFormlyValidators(field),
|
|
2883
2909
|
};
|
|
2884
2910
|
// Set initial value if provided
|
|
2885
2911
|
if (field.value !== undefined) {
|
|
@@ -2888,11 +2914,19 @@ class MessageBannerV2Component {
|
|
|
2888
2914
|
// Add form control to form group if not already present
|
|
2889
2915
|
const key = field.key;
|
|
2890
2916
|
if (!this.form.get(key)) {
|
|
2891
|
-
|
|
2917
|
+
let formControl;
|
|
2918
|
+
if (field.formControl) {
|
|
2919
|
+
formControl = field.formControl;
|
|
2920
|
+
}
|
|
2921
|
+
else {
|
|
2922
|
+
const validators = field.params?.validators || [];
|
|
2923
|
+
formControl = new FormControl(field.value || '', validators);
|
|
2924
|
+
}
|
|
2925
|
+
this.form.addControl(key, formControl);
|
|
2892
2926
|
}
|
|
2893
2927
|
return formlyField;
|
|
2894
2928
|
});
|
|
2895
|
-
|
|
2929
|
+
this.formlyFields = this.allFormlyFields.slice(0, initialVisibleFields);
|
|
2896
2930
|
this.updateAdditionalFields();
|
|
2897
2931
|
}
|
|
2898
2932
|
getFieldClassName(index, fieldsPerRow) {
|
|
@@ -2903,6 +2937,24 @@ class MessageBannerV2Component {
|
|
|
2903
2937
|
// Use CSS custom property to dynamically update grid columns
|
|
2904
2938
|
document.documentElement.style.setProperty('--form-grid-columns', fieldsPerRow.toString());
|
|
2905
2939
|
}
|
|
2940
|
+
getFormlyValidators(field) {
|
|
2941
|
+
const validators = {};
|
|
2942
|
+
if (field.formControl && field.formControl.validator) {
|
|
2943
|
+
validators.validation = field.formControl.validator;
|
|
2944
|
+
}
|
|
2945
|
+
if (field.params?.validators && Array.isArray(field.params.validators)) {
|
|
2946
|
+
validators.validation = field.params.validators;
|
|
2947
|
+
}
|
|
2948
|
+
if (field.validators) {
|
|
2949
|
+
if (field.validators.validation) {
|
|
2950
|
+
validators.validation = field.validators.validation;
|
|
2951
|
+
}
|
|
2952
|
+
else if (Array.isArray(field.validators)) {
|
|
2953
|
+
validators.validation = field.validators;
|
|
2954
|
+
}
|
|
2955
|
+
}
|
|
2956
|
+
return validators;
|
|
2957
|
+
}
|
|
2906
2958
|
shouldShowAdditionalFields() {
|
|
2907
2959
|
if (!this.activeFormInputs || this.activeFormInputs.length === 0)
|
|
2908
2960
|
return false;
|
|
@@ -2915,7 +2967,6 @@ class MessageBannerV2Component {
|
|
|
2915
2967
|
// Use custom showWhen function if provided
|
|
2916
2968
|
const shouldShow = layout.conditionalFields.showWhen ?
|
|
2917
2969
|
layout.conditionalFields.showWhen(this.model) : this.areAllVisibleFieldsFilled();
|
|
2918
|
-
console.log('shouldShowAdditionalFields:', shouldShow, 'model:', this.model, 'conditionalFields:', layout.conditionalFields);
|
|
2919
2970
|
return shouldShow;
|
|
2920
2971
|
}
|
|
2921
2972
|
updateAdditionalFields() {
|
|
@@ -2998,19 +3049,9 @@ class MessageBannerV2Component {
|
|
|
2998
3049
|
// Handle form model changes from Formly
|
|
2999
3050
|
onFormModelChange(model) {
|
|
3000
3051
|
this.model = { ...this.model, ...model };
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
layout.conditionalFields.showWhen(this.model) : false;
|
|
3005
|
-
console.log('Should show conditional fields:', shouldShow);
|
|
3006
|
-
// Only update if condition changes
|
|
3007
|
-
if (shouldShow && this.additionalFormlyFields.length === 0) {
|
|
3008
|
-
console.log('Triggering conditional fields');
|
|
3009
|
-
this.updateAdditionalFields();
|
|
3010
|
-
}
|
|
3011
|
-
else if (!shouldShow && this.additionalFormlyFields.length > 0) {
|
|
3012
|
-
this.additionalFormlyFields = [];
|
|
3013
|
-
}
|
|
3052
|
+
// Trigger field visibility updates by updating the allFormlyFields array
|
|
3053
|
+
// This will cause Formly to re-evaluate hideExpression for all fields
|
|
3054
|
+
this.allFormlyFields = [...this.allFormlyFields];
|
|
3014
3055
|
// Emit the change event
|
|
3015
3056
|
this.onFormEvent.emit({
|
|
3016
3057
|
type: 'form-model-change',
|
|
@@ -3028,13 +3069,21 @@ class MessageBannerV2Component {
|
|
|
3028
3069
|
areAllVisibleFieldsFilled() {
|
|
3029
3070
|
if (!this.activeFormInputs || this.activeFormInputs.length === 0)
|
|
3030
3071
|
return true;
|
|
3031
|
-
// Get
|
|
3032
|
-
const
|
|
3033
|
-
const
|
|
3034
|
-
//
|
|
3035
|
-
const
|
|
3036
|
-
|
|
3037
|
-
const
|
|
3072
|
+
// Get layout configuration to determine which fields should be visible
|
|
3073
|
+
const layout = this.activeFormLayout;
|
|
3074
|
+
const initialVisibleFields = layout.initialVisibleFields || layout.fieldsPerRow || 2;
|
|
3075
|
+
// Get all currently visible fields (initial + conditional if shown)
|
|
3076
|
+
const visibleFields = this.activeFormInputs.slice(0, initialVisibleFields);
|
|
3077
|
+
if (this.shouldShowAdditionalFields()) {
|
|
3078
|
+
const conditionalFieldIndices = layout.conditionalFields?.fields ||
|
|
3079
|
+
Array.from({ length: this.activeFormInputs.length - initialVisibleFields }, (_, i) => i + initialVisibleFields);
|
|
3080
|
+
const conditionalFields = conditionalFieldIndices.map(index => this.activeFormInputs[index]).filter(Boolean);
|
|
3081
|
+
visibleFields.push(...conditionalFields);
|
|
3082
|
+
}
|
|
3083
|
+
// Check if all visible fields have values using their keys
|
|
3084
|
+
const allFieldsFilled = visibleFields.every(field => {
|
|
3085
|
+
const fieldKey = field.key;
|
|
3086
|
+
const fieldValue = this.model[fieldKey];
|
|
3038
3087
|
if (!fieldValue)
|
|
3039
3088
|
return false;
|
|
3040
3089
|
// For string values, check if not empty after trim
|
|
@@ -3051,11 +3100,11 @@ class MessageBannerV2Component {
|
|
|
3051
3100
|
return allFieldsFilled && formValid;
|
|
3052
3101
|
}
|
|
3053
3102
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3054
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", contactUrl: "contactUrl", spacingBetweenImageAndDescription: "spacingBetweenImageAndDescription", contentGap: "contentGap", titleClass: "titleClass", descriptionClass: "descriptionClass", banner: "banner", formConfig: "formConfig", prebuiltFormFields: "prebuiltFormFields", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { onFormEvent: "onFormEvent", buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\n <div class=\"image-container\"\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n </div>\n <div class=\"details\">\n <div class=\"title-description\">\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\n <div [innerHTML]=\"banner?.text\"></div>\n </sa-message-banner>\n </div>\n </div>\n \n <!-- Form inputs section -->\n <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\n <div class=\"form-fields-container\">\n <div class=\"form-fields-scroll-area\">\n <!-- Prebuilt form fields (direct component rendering) -->\n <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\n <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\n </ng-container>\n \n <!-- Use Formly for proper form rendering -->\n <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\n <formly-form \n [form]=\"form\" \n [fields]=\"formlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n \n <!-- Additional fields (conditional based on formLayout.conditionalFields) -->\n <div class=\"additional-fields\" *ngIf=\"shouldShowAdditionalFields()\">\n <formly-form \n [form]=\"form\" \n [fields]=\"additionalFormlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Custom form button(s) -->\n <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\n <!-- Support both single button and array of buttons -->\n <ng-container *ngIf=\"isButtonArray(); else singleButton\">\n <sa-button \n *ngFor=\"let button of activeCustomFormButton\"\n class=\"action-button\"\n [id]=\"button.id\"\n [text]=\"button.text\"\n [type]=\"button.type\"\n [size]=\"button.size\"\n [state]=\"button.state\"\n [ImagePath]=\"button.ImagePath\"\n [iconPosition]=\"button.iconPosition\"\n (click)=\"onButtonClick(button)\">\n </sa-button>\n </ng-container>\n \n <ng-template #singleButton>\n <sa-button class=\"action-button\"\n [id]=\"activeCustomFormButton.id\"\n [text]=\"activeCustomFormButton.text\"\n [type]=\"activeCustomFormButton.type\"\n [size]=\"activeCustomFormButton.size\"\n [state]=\"activeCustomFormButton.state\"\n [ImagePath]=\"activeCustomFormButton.ImagePath\"\n [iconPosition]=\"activeCustomFormButton.iconPosition\"\n (click)=\"onButtonClick(activeCustomFormButton)\">\n </sa-button>\n </ng-template>\n </div>\n \n <!-- Divider section -->\n <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\n <div class=\"divider\"></div>\n <div class=\"divider-header\">\n <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\n <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\n {{ activeDividerConfig.subtitle || 'No items added yet' }}\n </p>\n </div>\n \n <!-- Chips section -->\n <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\n <sa-chip \n *ngFor=\"let chip of activeChips\"\n [text]=\"chip.label || chip.text || chip\"\n [type]=\"'regular'\"\n [state]=\"'default'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\n </sa-chip>\n </div>\n </div>\n </ng-container>\n \n @if(buttons){\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <sa-button \n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\n [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, auto)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
|
|
3103
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MessageBannerV2Component, isStandalone: true, selector: "sa-message-banner-v2", inputs: { messageType: "messageType", contactUrl: "contactUrl", spacingBetweenImageAndDescription: "spacingBetweenImageAndDescription", contentGap: "contentGap", titleClass: "titleClass", descriptionClass: "descriptionClass", banner: "banner", formConfig: "formConfig", prebuiltFormFields: "prebuiltFormFields", messageIcon: "messageIcon", messageIconSize: "messageIconSize", title: "title", description: "description", buttons: "buttons" }, outputs: { onFormEvent: "onFormEvent", buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "@if (bannerContent(); as content) {\r\n <div class=\"error-page message-banner-v2\">\r\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\r\n <div class=\"image-container\"\r\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\r\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\r\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\r\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\r\n </div>\r\n <div class=\"details\">\r\n <div class=\"title-description\">\r\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\r\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \r\n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\r\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\r\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\r\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\r\n <div [innerHTML]=\"banner?.text\"></div>\r\n </sa-message-banner>\r\n </div>\r\n </div>\r\n \r\n <!-- Form inputs section -->\r\n <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\r\n <div class=\"form-fields-container\">\r\n <!-- Prebuilt form fields (direct component rendering) -->\r\n <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\r\n <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\r\n </ng-container>\r\n \r\n <!-- Use Formly for proper form rendering -->\r\n <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\r\n <formly-form \r\n [form]=\"form\" \r\n [fields]=\"allFormlyFields\" \r\n [model]=\"model\"\r\n (modelChange)=\"onFormModelChange($event)\">\r\n </formly-form>\r\n </form>\r\n </div>\r\n\r\n <!-- Custom form button(s) -->\r\n <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\r\n <!-- Support both single button and array of buttons -->\r\n <ng-container *ngIf=\"isButtonArray(); else singleButton\">\r\n <sa-button \r\n *ngFor=\"let button of activeCustomFormButton\"\r\n class=\"action-button\"\r\n [id]=\"button.id\"\r\n [text]=\"button.text\"\r\n [type]=\"button.type\"\r\n [size]=\"button.size\"\r\n [state]=\"button.state\"\r\n [ImagePath]=\"button.ImagePath\"\r\n [iconPosition]=\"button.iconPosition\"\r\n (click)=\"onButtonClick(button)\">\r\n </sa-button>\r\n </ng-container>\r\n \r\n <ng-template #singleButton>\r\n <sa-button class=\"action-button\"\r\n [id]=\"activeCustomFormButton.id\"\r\n [text]=\"activeCustomFormButton.text\"\r\n [type]=\"activeCustomFormButton.type\"\r\n [size]=\"activeCustomFormButton.size\"\r\n [state]=\"activeCustomFormButton.state\"\r\n [ImagePath]=\"activeCustomFormButton.ImagePath\"\r\n [iconPosition]=\"activeCustomFormButton.iconPosition\"\r\n (click)=\"onButtonClick(activeCustomFormButton)\">\r\n </sa-button>\r\n </ng-template>\r\n </div>\r\n \r\n <!-- Divider section -->\r\n <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\r\n <div class=\"divider\"></div>\r\n <div class=\"divider-header\">\r\n <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\r\n <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\r\n {{ activeDividerConfig.subtitle || 'No items added yet' }}\r\n </p>\r\n </div>\r\n \r\n <!-- Chips section -->\r\n <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\r\n <sa-chip \r\n *ngFor=\"let chip of activeChips\"\r\n [text]=\"chip.label || chip.text || chip\"\r\n [type]=\"'regular'\"\r\n [state]=\"'default'\"\r\n [filling]=\"'filled'\"\r\n [iconPosition]=\"'right'\"\r\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\r\n (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\r\n </sa-chip>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n @if(buttons){\r\n <div class=\"button-group\">\r\n @for (button of buttons; track button.text) {\r\n <sa-button \r\n [text]=\"button.text\"\r\n [icon]=\"button.icon\"\r\n [size]=\"button.size\"\r\n [type]=\"button.type\"\r\n [iconPosition]=\"button.iconPosition\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (onClickEvent)=\"onButtonClick(button, $event)\"\r\n role=\"button\"\r\n [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\r\n [attr.aria-label]=\"button.text\">\r\n </sa-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, auto)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyForm, selector: "formly-form", inputs: ["form", "model", "fields", "options"], outputs: ["modelChange"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }] }); }
|
|
3055
3104
|
}
|
|
3056
3105
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MessageBannerV2Component, decorators: [{
|
|
3057
3106
|
type: Component,
|
|
3058
|
-
args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule, MessageBannerComponent, FormInputComponent, FormSelectComponent, FormsModule, ReactiveFormsModule, FormlyModule, ChipsComponent], providers: [IconService], template: "@if (bannerContent(); as content) {\n <div class=\"error-page message-banner-v2\">\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\n <div class=\"image-container\"\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\n </div>\n <div class=\"details\">\n <div class=\"title-description\">\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\n <div [innerHTML]=\"banner?.text\"></div>\n </sa-message-banner>\n </div>\n </div>\n \n <!-- Form inputs section -->\n <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\n <div class=\"form-fields-container\">\n <div class=\"form-fields-scroll-area\">\n <!-- Prebuilt form fields (direct component rendering) -->\n <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\n <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\n </ng-container>\n \n <!-- Use Formly for proper form rendering -->\n <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\n <formly-form \n [form]=\"form\" \n [fields]=\"formlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n \n <!-- Additional fields (conditional based on formLayout.conditionalFields) -->\n <div class=\"additional-fields\" *ngIf=\"shouldShowAdditionalFields()\">\n <formly-form \n [form]=\"form\" \n [fields]=\"additionalFormlyFields\" \n [model]=\"model\"\n (modelChange)=\"onFormModelChange($event)\">\n </formly-form>\n </div>\n </form>\n </div>\n </div>\n\n <!-- Custom form button(s) -->\n <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\n <!-- Support both single button and array of buttons -->\n <ng-container *ngIf=\"isButtonArray(); else singleButton\">\n <sa-button \n *ngFor=\"let button of activeCustomFormButton\"\n class=\"action-button\"\n [id]=\"button.id\"\n [text]=\"button.text\"\n [type]=\"button.type\"\n [size]=\"button.size\"\n [state]=\"button.state\"\n [ImagePath]=\"button.ImagePath\"\n [iconPosition]=\"button.iconPosition\"\n (click)=\"onButtonClick(button)\">\n </sa-button>\n </ng-container>\n \n <ng-template #singleButton>\n <sa-button class=\"action-button\"\n [id]=\"activeCustomFormButton.id\"\n [text]=\"activeCustomFormButton.text\"\n [type]=\"activeCustomFormButton.type\"\n [size]=\"activeCustomFormButton.size\"\n [state]=\"activeCustomFormButton.state\"\n [ImagePath]=\"activeCustomFormButton.ImagePath\"\n [iconPosition]=\"activeCustomFormButton.iconPosition\"\n (click)=\"onButtonClick(activeCustomFormButton)\">\n </sa-button>\n </ng-template>\n </div>\n \n <!-- Divider section -->\n <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\n <div class=\"divider\"></div>\n <div class=\"divider-header\">\n <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\n <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\n {{ activeDividerConfig.subtitle || 'No items added yet' }}\n </p>\n </div>\n \n <!-- Chips section -->\n <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\n <sa-chip \n *ngFor=\"let chip of activeChips\"\n [text]=\"chip.label || chip.text || chip\"\n [type]=\"'regular'\"\n [state]=\"'default'\"\n [filling]=\"'filled'\"\n [iconPosition]=\"'right'\"\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\n (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\n </sa-chip>\n </div>\n </div>\n </ng-container>\n \n @if(buttons){\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <sa-button \n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\n [attr.aria-label]=\"button.text\">\n </sa-button>\n }\n </div>\n }\n </div>\n </div>\n </div>\n }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, auto)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"] }]
|
|
3107
|
+
args: [{ selector: 'sa-message-banner-v2', standalone: true, imports: [CommonModule, IconComponent, ButtonComponent, HttpClientModule, MessageBannerComponent, FormInputComponent, FormSelectComponent, FormsModule, ReactiveFormsModule, FormlyModule, ChipsComponent], providers: [IconService], template: "@if (bannerContent(); as content) {\r\n <div class=\"error-page message-banner-v2\">\r\n <div class=\"content-container\" [ngStyle]=\"{ gap: contentGap || 'var(--medium-32px, 32px)' }\">\r\n <div class=\"image-container\"\r\n [ngStyle]=\"{ 'margin-bottom': spacingBetweenImageAndDescription ?? 'var(--small-16px, 16px)' }\">\r\n <img [src]=\"content.messageIcon\" [alt]=\"content.type + ' image'\"\r\n [style.--message-icon-height]=\"content.messageIconSize?.height\"\r\n [style.--message-icon-width]=\"content.messageIconSize?.width\" />\r\n </div>\r\n <div class=\"details\">\r\n <div class=\"title-description\">\r\n <div class=\"title-class\" [ngClass]=\"titleClass || 'title-class'\" [innerHTML]=\"content.title\"></div>\r\n <p class=\"description\" [ngClass]=\"descriptionClass || 'description'\" [innerHTML]=\"content.description\"></p> \r\n <div [ngStyle]=\"{ margin: banner?.spacing + 'px 0px' }\">\r\n <sa-message-banner *ngIf=\"!isEmptyObject(banner)\" [type]=\"banner?.type\" [bannerIcon]=\"banner?.bannerIcon\" [buttonIcon]=\"banner?.buttonIcon\"\r\n [bannerIconSize]=\"banner?.bannerIconSize\" [buttonType]=\"banner?.buttonType\" [buttonSize]=\"banner?.buttonSize\" [buttonIconPosition]=\"banner?.buttonIconPosition\"\r\n [buttonIconSize]=\"banner?.buttonIconSize\" [actionText]=\"banner?.actionText\" >\r\n <div [innerHTML]=\"banner?.text\"></div>\r\n </sa-message-banner>\r\n </div>\r\n </div>\r\n \r\n <!-- Form inputs section -->\r\n <ng-container *ngIf=\"prebuiltFormFields || activeFormInputs?.length\">\r\n <div class=\"form-fields-container\">\r\n <!-- Prebuilt form fields (direct component rendering) -->\r\n <ng-container *ngIf=\"usePrebuiltFields() && prebuiltFormFields\">\r\n <ng-container *ngTemplateOutlet=\"prebuiltFormFields\"></ng-container>\r\n </ng-container>\r\n \r\n <!-- Use Formly for proper form rendering -->\r\n <form [formGroup]=\"form\" class=\"dialog-form\" *ngIf=\"!usePrebuiltFields() && activeFormInputs?.length\">\r\n <formly-form \r\n [form]=\"form\" \r\n [fields]=\"allFormlyFields\" \r\n [model]=\"model\"\r\n (modelChange)=\"onFormModelChange($event)\">\r\n </formly-form>\r\n </form>\r\n </div>\r\n\r\n <!-- Custom form button(s) -->\r\n <div class=\"form-button-container\" *ngIf=\"activeCustomFormButton && !usePrebuiltFields()\">\r\n <!-- Support both single button and array of buttons -->\r\n <ng-container *ngIf=\"isButtonArray(); else singleButton\">\r\n <sa-button \r\n *ngFor=\"let button of activeCustomFormButton\"\r\n class=\"action-button\"\r\n [id]=\"button.id\"\r\n [text]=\"button.text\"\r\n [type]=\"button.type\"\r\n [size]=\"button.size\"\r\n [state]=\"button.state\"\r\n [ImagePath]=\"button.ImagePath\"\r\n [iconPosition]=\"button.iconPosition\"\r\n (click)=\"onButtonClick(button)\">\r\n </sa-button>\r\n </ng-container>\r\n \r\n <ng-template #singleButton>\r\n <sa-button class=\"action-button\"\r\n [id]=\"activeCustomFormButton.id\"\r\n [text]=\"activeCustomFormButton.text\"\r\n [type]=\"activeCustomFormButton.type\"\r\n [size]=\"activeCustomFormButton.size\"\r\n [state]=\"activeCustomFormButton.state\"\r\n [ImagePath]=\"activeCustomFormButton.ImagePath\"\r\n [iconPosition]=\"activeCustomFormButton.iconPosition\"\r\n (click)=\"onButtonClick(activeCustomFormButton)\">\r\n </sa-button>\r\n </ng-template>\r\n </div>\r\n \r\n <!-- Divider section -->\r\n <div class=\"divider-section\" *ngIf=\"activeDivider && !usePrebuiltFields()\">\r\n <div class=\"divider\"></div>\r\n <div class=\"divider-header\">\r\n <h3 class=\"divider-title\" *ngIf=\"activeDividerConfig.title\">{{ activeDividerConfig.title }}</h3>\r\n <p class=\"divider-subtitle\" *ngIf=\"activeDividerConfig.subtitle || activeDividerConfig.showSubtitleWhenEmpty\">\r\n {{ activeDividerConfig.subtitle || 'No items added yet' }}\r\n </p>\r\n </div>\r\n \r\n <!-- Chips section -->\r\n <div class=\"chip-list\" *ngIf=\"activeChips?.length && !usePrebuiltFields()\">\r\n <sa-chip \r\n *ngFor=\"let chip of activeChips\"\r\n [text]=\"chip.label || chip.text || chip\"\r\n [type]=\"'regular'\"\r\n [state]=\"'default'\"\r\n [filling]=\"'filled'\"\r\n [iconPosition]=\"'right'\"\r\n [iconPath]=\"'../assets/closeBlueOutlined.svg'\"\r\n (onClickEvent)=\"chip.removable ? onChipRemove(chip) : null\">\r\n </sa-chip>\r\n </div>\r\n </div>\r\n </ng-container>\r\n \r\n @if(buttons){\r\n <div class=\"button-group\">\r\n @for (button of buttons; track button.text) {\r\n <sa-button \r\n [text]=\"button.text\"\r\n [icon]=\"button.icon\"\r\n [size]=\"button.size\"\r\n [type]=\"button.type\"\r\n [iconPosition]=\"button.iconPosition\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (onClickEvent)=\"onButtonClick(button, $event)\"\r\n role=\"button\"\r\n [state]=\"!areAllVisibleFieldsFilled() ? 'disabled' : ''\"\r\n [attr.aria-label]=\"button.text\">\r\n </sa-button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n }", styles: [".error-page{display:flex;justify-content:center;align-items:center;box-sizing:border-box}.title-class{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:1.5rem;letter-spacing:.15px}.content-container{display:flex;flex-direction:column;align-items:center;gap:var(--medium-32px, 32px);text-align:center}.image-container{display:flex;justify-content:center;align-items:center;margin-bottom:var(--small-16px, 16px)}.image-container img{height:var(--message-icon-height, 12.5rem);width:var(--message-icon-width, auto)}.details{display:flex;flex-direction:column;align-items:center;gap:var(--medium-20px, 20px);text-align:center;background-color:var(--structural-white, #FFF)}::ng-deep .description .support-email{color:var(--primary-500);font-family:var(--font-roboto, Roboto);font-size:14px;font-style:normal;font-weight:500;line-height:1.25rem;letter-spacing:.1px}.description{color:var(--Text-Medium-Emphasis, #6D6979);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px;margin:0}.message-banner-v2 .button-group{display:flex;gap:var(--small-8px);justify-content:center}::ng-deep .custom-contact-link{color:var(--primary-500, #7F56D9);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px);letter-spacing:.15px;text-decoration:none}.access-restricted-title{color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.access-restricted-description{text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);line-height:var(--medium-24px);max-width:44rem;white-space:normal;word-break:break-word}.access-error-title{color:var(--semantic-error-500, #BD271E);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--medium-22px);font-style:normal;font-weight:500;line-height:var(--medium-28px);margin-bottom:var(--small-10px)}.redirect-link{display:flex;align-items:center;gap:8px;cursor:pointer}.info-icon{width:16px;height:16px;color:var(--primary-500, #825CEE)}.learn-more-text{font-size:14px;color:var(--primary-500, #825CEE);text-decoration:none}.redirect-link:hover .learn-more-text{text-decoration:underline}.additional-fields{display:flex;gap:16px;width:100%}.form-button-container{display:flex;justify-content:flex-end;align-items:center;align-self:stretch}::ng-deep .form-button-container .action-button .sa-button{align-self:flex-start;display:flex;justify-content:center;align-items:center;gap:var(--small-3px, 3px);align-self:stretch}.divider-section{flex:0 0 auto;margin-top:32px;width:100%}.divider{width:100%;height:1px;background:var(--grey-200, #E4E7EC);margin-bottom:24px}.divider-header{margin-bottom:16px}.divider-title{font-size:16px;font-weight:600;color:var(--text-high-emphasis, #1C1B20);margin:0 0 8px;font-family:var(--font-family, Roboto)}.divider-subtitle{font-size:14px;font-weight:400;color:var(--text-medium-emphasis, #6D6979);margin:0;font-style:italic;font-family:var(--font-family, Roboto)}.chip-list{display:flex;flex-wrap:wrap;gap:8px}.dialog-form{width:100%;display:block}.form-fields-container{min-height:0;flex:0 0 auto;width:100%;position:relative;z-index:1;overflow:visible}.dialog-form .form-row{display:flex;gap:16px;margin-bottom:16px;width:100%}.dialog-form .form-field-wrapper{flex:1;display:flex;flex-direction:column;gap:4px}.dialog-form .form-field-wrapper.full-width{flex:1 1 100%}.dialog-form .additional-fields{display:flex;flex-direction:column;gap:16px;width:100%}::ng-deep .dialog-form formly-form{width:100%;display:block}::ng-deep .dialog-form formly-group{width:100%;display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;margin:0;padding:0;grid-auto-rows:min-content}::ng-deep .dialog-form formly-field>formly-group{display:grid;grid-template-columns:repeat(var(--form-grid-columns, 2),1fr);gap:16px;width:100%}::ng-deep .dialog-form formly-field{width:100%;display:block}::ng-deep .dialog-form .col-6{width:100%;display:block}::ng-deep .dialog-form .col-12{width:100%;display:block;grid-column:span 2}::ng-deep .additional-fields formly-form{width:100%;display:block}::ng-deep .dialog-form lib-form-select{width:100%}::ng-deep .dialog-form .sa-select-container{width:100%;display:flex;flex-direction:column}::ng-deep .dialog-form .sa-select-field-container{width:100%;position:relative}::ng-deep .dialog-form .ng-select{min-height:44px;border-radius:4px;padding:unset;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}::ng-deep .dialog-form .sa-select-container .sa-select-field-container .ng-select-field{padding:unset;border:none}::ng-deep .dialog-form .ng-select.ng-select-focused{border-color:var(--primary-500, #825CEE);box-shadow:0 0 0 3px #825cee1a}::ng-deep .dialog-form .ng-select .ng-select-container{min-height:44px;padding:12px 16px}.form-fields-scroll-wrapper{width:100%}\n"] }]
|
|
3059
3108
|
}], propDecorators: { messageType: [{
|
|
3060
3109
|
type: Input
|
|
3061
3110
|
}], contactUrl: [{
|
|
@@ -3168,11 +3217,11 @@ class DialogComponent {
|
|
|
3168
3217
|
this.dialogButtonClick.emit({ type: 'form-reset' });
|
|
3169
3218
|
}
|
|
3170
3219
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponent, deps: [{ token: i1$7.MatDialogRef, optional: true }, { token: MAT_DIALOG_DATA, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3171
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: DialogComponent, isStandalone: true, selector: "sa-dialog", inputs: { dialogData: "dialogData" }, outputs: { dialogButtonClick: "dialogButtonClick" }, ngImport: i0, template: "<div class=\"dialog-container\">\n <!-- top banner region -->\n <div class=\"top-container\">\n @if (!!dialogData?.topMessageBanners) {\n <div class=\"top-message-container\">\n @for (\n messageBanner of dialogData?.topMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n [style]=\"messageBanner?.style || 'width:39.438rem'\"\n >\n <div class=\"{{ messageBanner?.className }} message-content-style\">\n {{ messageBanner?.content }}\n </div>\n </sa-message-banner>\n }\n </div>\n }\n @if (!!dialogData?.closeButton || dialogData?.showCloseButton) {\n <div class=\"cross-btn\" (click)=\"onCloseButtonClick($event)\">\n <sa-icon\n [icon]=\"dialogData?.closeButton || 'closeOutlined'\"\n class=\"d-flex\"\n size=\"20\"\n ></sa-icon>\n </div>\n }\n </div>\n <!-- middle region -->\n @if (!!dialogData?.middleRegion) {\n <ng-container *ngIf=\"dialogData?.middleRegion as middleRegion\">\n <div class=\"image-description-container {{ middleRegion?.className }}\">\n <sa-message-banner-v2\n [messageType]=\"middleRegion?.messageType || 'default'\"\n [messageIcon]=\"middleRegion?.messageIcon\"\n [messageIconSize]=\"middleRegion?.messageIconSize\"\n [title]=\"middleRegion?.title\"\n [description]=\"middleRegion?.description\"\n [buttons]=\"middleRegion?.buttons\"\n [formConfig]=\"middleRegion?.content?.formConfig\"\n (onFormEvent)=\"onUnifiedFormEvent($event)\"\n (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\n >\n </sa-message-banner-v2>\n </div>\n </ng-container>\n }\n <!-- lower message banner region -->\n @if (!!dialogData?.lowerMessageBanners) {\n <div class=\"lower-message-container\">\n @for (\n messageBanner of dialogData?.lowerMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [buttonIcon]=\"messageBanner?.buttonIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n [style]=\"messageBanner?.style || 'width:-webkit-fill-available'\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n >\n <div\n class=\"{{ messageBanner?.className }} message-content-style\"\n ></div>\n {{ messageBanner?.content }}\n </sa-message-banner>\n }\n </div>\n }\n <!-- button region -->\n @if (!!dialogData?.buttons) {\n <div class=\"button-group-container\">\n @for (button of dialogData?.buttons; track button.text) {\n <sa-button\n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [state]=\"button.state\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button.text\"\n >\n </sa-button>\n }\n </div>\n }\n @if (!!dialogData?.buttonsWithType) {\n <div class=\"buttonWithType-group-container\">\n @for (button of dialogData?.buttonsWithType; track button.text) {\n @if (button?.type === \"checkbox\") {\n <div class=\"checkbox-container {{ button.className }}\">\n <mat-checkbox [id]=\"button.id\" (change)=\"onButtonClick(button)\" class=\"checkbox-style\">{{\n button.text\n }}</mat-checkbox>\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;gap:var(--medium-28px);align-items:center;position:relative;overflow-y:auto;overflow-x:hidden}.top-message-container,.lower-message-container{display:flex;align-items:center;flex-direction:column;gap:var(--medium-28px)}.lower-message-container{width:-webkit-fill-available}::ng-deep .lower-message-container .content{justify-content:center;align-items:center;gap:var(--small-4px)}::ng-deep .image-description-container .image-container{margin-bottom:0}::ng-deep .image-description-container .content-container{gap:var(--medium-28px)}::ng-deep .image-description-container .title-class{font-size:var(--medium-22px);font-weight:500;line-height:var(--medium-28px)}::ng-deep .image-description-container .description{color:var(--text-mediumemphasis, #6D6979);font-size:var(--small-16px);line-height:var(--medium-24px);letter-spacing:.5px}.top-message-container .message-content-style{display:flex;justify-content:center;flex:1;color:var(--text-primary, #825CEE)}.lower-message-container .message-content-style{display:flex;align-items:center}::ng-deep .image-description-container .title-description{display:flex;flex-direction:column;gap:var(--small-8px)}.dialog-container .button-group-container{display:flex;gap:var(--small-12px);justify-content:center}::ng-deep .checkboxButton .mdc-checkbox__background{width:var(--small-16px);height:var(--small-16px);border:1.5px solid currentColor}::ng-deep .checkboxButton .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#757575}::ng-deep .checkboxButton .mdc-checkbox{padding:calc((var(--mdc-checkbox-state-layer-size) - 21px) / 2)}::ng-deep .checkboxButton .mdc-form-field{display:flex;align-items:center}::ng-deep .checkboxButton .mdc-label{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.dialog-container .cross-btn{position:absolute;top:0;right:0;cursor:pointer}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.image-description-container{width:100%;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "component", type: MessageBannerV2Component, selector: "sa-message-banner-v2", inputs: ["messageType", "contactUrl", "spacingBetweenImageAndDescription", "contentGap", "titleClass", "descriptionClass", "banner", "formConfig", "prebuiltFormFields", "messageIcon", "messageIconSize", "title", "description", "buttons"], outputs: ["onFormEvent", "buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
|
|
3220
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: DialogComponent, isStandalone: true, selector: "sa-dialog", inputs: { dialogData: "dialogData" }, outputs: { dialogButtonClick: "dialogButtonClick" }, ngImport: i0, template: "<div class=\"dialog-container\">\r\n <!-- top banner region -->\r\n <div class=\"top-container\">\r\n @if (!!dialogData?.topMessageBanners) {\r\n <div class=\"top-message-container\">\r\n @for (\r\n messageBanner of dialogData?.topMessageBanners;\r\n track messageBanner.content\r\n ) {\r\n <sa-message-banner\r\n [type]=\"messageBanner?.type\"\r\n [bannerIcon]=\"messageBanner?.bannerIcon\"\r\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\r\n [button]=\"messageBanner?.button\"\r\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\r\n [style]=\"messageBanner?.style || 'width:39.438rem'\"\r\n >\r\n <div class=\"{{ messageBanner?.className }} message-content-style\">\r\n {{ messageBanner?.content }}\r\n </div>\r\n </sa-message-banner>\r\n }\r\n </div>\r\n }\r\n @if (!!dialogData?.closeButton || dialogData?.showCloseButton) {\r\n <div class=\"cross-btn\" (click)=\"onCloseButtonClick($event)\">\r\n <sa-icon\r\n [icon]=\"dialogData?.closeButton || 'closeOutlined'\"\r\n class=\"d-flex\"\r\n size=\"20\"\r\n ></sa-icon>\r\n </div>\r\n }\r\n </div>\r\n <!-- middle region -->\r\n @if (!!dialogData?.middleRegion) {\r\n <ng-container *ngIf=\"dialogData?.middleRegion as middleRegion\">\r\n <div class=\"image-description-container {{ middleRegion?.className }}\">\r\n <sa-message-banner-v2\r\n [messageType]=\"middleRegion?.messageType || 'default'\"\r\n [messageIcon]=\"middleRegion?.messageIcon\"\r\n [messageIconSize]=\"middleRegion?.messageIconSize\"\r\n [title]=\"middleRegion?.title\"\r\n [description]=\"middleRegion?.description\"\r\n [buttons]=\"middleRegion?.buttons\"\r\n [formConfig]=\"middleRegion?.content?.formConfig\"\r\n (onFormEvent)=\"onUnifiedFormEvent($event)\"\r\n (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\r\n >\r\n </sa-message-banner-v2>\r\n </div>\r\n </ng-container>\r\n }\r\n <!-- lower message banner region -->\r\n @if (!!dialogData?.lowerMessageBanners) {\r\n <div class=\"lower-message-container\">\r\n @for (\r\n messageBanner of dialogData?.lowerMessageBanners;\r\n track messageBanner.content\r\n ) {\r\n <sa-message-banner\r\n [type]=\"messageBanner?.type\"\r\n [bannerIcon]=\"messageBanner?.bannerIcon\"\r\n [buttonIcon]=\"messageBanner?.buttonIcon\"\r\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\r\n [button]=\"messageBanner?.button\"\r\n [style]=\"messageBanner?.style || 'width:-webkit-fill-available'\"\r\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\r\n >\r\n <div\r\n class=\"{{ messageBanner?.className }} message-content-style\"\r\n ></div>\r\n {{ messageBanner?.content }}\r\n </sa-message-banner>\r\n }\r\n </div>\r\n }\r\n <!-- button region -->\r\n @if (!!dialogData?.buttons) {\r\n <div class=\"button-group-container\">\r\n @for (button of dialogData?.buttons; track button.text) {\r\n <sa-button\r\n [text]=\"button.text\"\r\n [icon]=\"button.icon\"\r\n [size]=\"button.size\"\r\n [type]=\"button.type\"\r\n [state]=\"button.state\"\r\n [iconPosition]=\"button.iconPosition\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (onClickEvent)=\"onButtonClick(button, $event)\"\r\n role=\"button\"\r\n [attr.aria-label]=\"button.text\"\r\n >\r\n </sa-button>\r\n }\r\n </div>\r\n }\r\n @if (!!dialogData?.buttonsWithType) {\r\n <div class=\"buttonWithType-group-container\">\r\n @for (button of dialogData?.buttonsWithType; track button.text) {\r\n @if (button?.type === \"checkbox\") {\r\n <div class=\"checkbox-container {{ button.className }}\">\r\n <mat-checkbox [id]=\"button.id\" (change)=\"onButtonClick(button)\" class=\"checkbox-style\">{{\r\n button.text\r\n }}</mat-checkbox>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".dialog-container{display:flex;flex-direction:column;gap:var(--medium-28px);align-items:center;position:relative;overflow-y:auto;overflow-x:hidden}.top-message-container,.lower-message-container{display:flex;align-items:center;flex-direction:column;gap:var(--medium-28px)}.lower-message-container{width:-webkit-fill-available}::ng-deep .lower-message-container .content{justify-content:center;align-items:center;gap:var(--small-4px)}::ng-deep .image-description-container .image-container{margin-bottom:0}::ng-deep .image-description-container .content-container{gap:var(--medium-28px)}::ng-deep .image-description-container .title-class{font-size:var(--medium-22px);font-weight:500;line-height:var(--medium-28px)}::ng-deep .image-description-container .description{color:var(--text-mediumemphasis, #6D6979);font-size:var(--small-16px);line-height:var(--medium-24px);letter-spacing:.5px}.top-message-container .message-content-style{display:flex;justify-content:center;flex:1;color:var(--text-primary, #825CEE)}.lower-message-container .message-content-style{display:flex;align-items:center}::ng-deep .image-description-container .title-description{display:flex;flex-direction:column;gap:var(--small-8px)}.dialog-container .button-group-container{display:flex;gap:var(--small-12px);justify-content:center}::ng-deep .checkboxButton .mdc-checkbox__background{width:var(--small-16px);height:var(--small-16px);border:1.5px solid currentColor}::ng-deep .checkboxButton .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#757575}::ng-deep .checkboxButton .mdc-checkbox{padding:calc((var(--mdc-checkbox-state-layer-size) - 21px) / 2)}::ng-deep .checkboxButton .mdc-form-field{display:flex;align-items:center}::ng-deep .checkboxButton .mdc-label{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.dialog-container .cross-btn{position:absolute;top:0;right:0;cursor:pointer}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.image-description-container{width:100%;display:flex;flex-direction:column}\n"], dependencies: [{ kind: "component", type: MessageBannerComponent, selector: "sa-message-banner", inputs: ["type", "actionText", "content", "bannerIcon", "bannerIconSize", "buttonIcon", "buttonType", "buttonIconPosition", "buttonSize", "buttonIconSize", "button", "onAction"], outputs: ["actionClick"] }, { kind: "component", type: MessageBannerV2Component, selector: "sa-message-banner-v2", inputs: ["messageType", "contactUrl", "spacingBetweenImageAndDescription", "contentGap", "titleClass", "descriptionClass", "banner", "formConfig", "prebuiltFormFields", "messageIcon", "messageIconSize", "title", "description", "buttons"], outputs: ["onFormEvent", "buttonClick"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatDialogModule }] }); }
|
|
3172
3221
|
}
|
|
3173
3222
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: DialogComponent, decorators: [{
|
|
3174
3223
|
type: Component,
|
|
3175
|
-
args: [{ selector: 'sa-dialog', standalone: true, imports: [MessageBannerComponent, MessageBannerV2Component, CommonModule, ButtonComponent, MatCheckboxModule, IconComponent, MatDialogModule, FormInputComponent], template: "<div class=\"dialog-container\">\n <!-- top banner region -->\n <div class=\"top-container\">\n @if (!!dialogData?.topMessageBanners) {\n <div class=\"top-message-container\">\n @for (\n messageBanner of dialogData?.topMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n [style]=\"messageBanner?.style || 'width:39.438rem'\"\n >\n <div class=\"{{ messageBanner?.className }} message-content-style\">\n {{ messageBanner?.content }}\n </div>\n </sa-message-banner>\n }\n </div>\n }\n @if (!!dialogData?.closeButton || dialogData?.showCloseButton) {\n <div class=\"cross-btn\" (click)=\"onCloseButtonClick($event)\">\n <sa-icon\n [icon]=\"dialogData?.closeButton || 'closeOutlined'\"\n class=\"d-flex\"\n size=\"20\"\n ></sa-icon>\n </div>\n }\n </div>\n <!-- middle region -->\n @if (!!dialogData?.middleRegion) {\n <ng-container *ngIf=\"dialogData?.middleRegion as middleRegion\">\n <div class=\"image-description-container {{ middleRegion?.className }}\">\n <sa-message-banner-v2\n [messageType]=\"middleRegion?.messageType || 'default'\"\n [messageIcon]=\"middleRegion?.messageIcon\"\n [messageIconSize]=\"middleRegion?.messageIconSize\"\n [title]=\"middleRegion?.title\"\n [description]=\"middleRegion?.description\"\n [buttons]=\"middleRegion?.buttons\"\n [formConfig]=\"middleRegion?.content?.formConfig\"\n (onFormEvent)=\"onUnifiedFormEvent($event)\"\n (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\n >\n </sa-message-banner-v2>\n </div>\n </ng-container>\n }\n <!-- lower message banner region -->\n @if (!!dialogData?.lowerMessageBanners) {\n <div class=\"lower-message-container\">\n @for (\n messageBanner of dialogData?.lowerMessageBanners;\n track messageBanner.content\n ) {\n <sa-message-banner\n [type]=\"messageBanner?.type\"\n [bannerIcon]=\"messageBanner?.bannerIcon\"\n [buttonIcon]=\"messageBanner?.buttonIcon\"\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\n [button]=\"messageBanner?.button\"\n [style]=\"messageBanner?.style || 'width:-webkit-fill-available'\"\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\n >\n <div\n class=\"{{ messageBanner?.className }} message-content-style\"\n ></div>\n {{ messageBanner?.content }}\n </sa-message-banner>\n }\n </div>\n }\n <!-- button region -->\n @if (!!dialogData?.buttons) {\n <div class=\"button-group-container\">\n @for (button of dialogData?.buttons; track button.text) {\n <sa-button\n [text]=\"button.text\"\n [icon]=\"button.icon\"\n [size]=\"button.size\"\n [type]=\"button.type\"\n [state]=\"button.state\"\n [iconPosition]=\"button.iconPosition\"\n [buttonIconSize]=\"button.buttonIconSize\"\n (onClickEvent)=\"onButtonClick(button, $event)\"\n role=\"button\"\n [attr.aria-label]=\"button.text\"\n >\n </sa-button>\n }\n </div>\n }\n @if (!!dialogData?.buttonsWithType) {\n <div class=\"buttonWithType-group-container\">\n @for (button of dialogData?.buttonsWithType; track button.text) {\n @if (button?.type === \"checkbox\") {\n <div class=\"checkbox-container {{ button.className }}\">\n <mat-checkbox [id]=\"button.id\" (change)=\"onButtonClick(button)\" class=\"checkbox-style\">{{\n button.text\n }}</mat-checkbox>\n </div>\n }\n }\n </div>\n }\n</div>\n", styles: [".dialog-container{display:flex;flex-direction:column;gap:var(--medium-28px);align-items:center;position:relative;overflow-y:auto;overflow-x:hidden}.top-message-container,.lower-message-container{display:flex;align-items:center;flex-direction:column;gap:var(--medium-28px)}.lower-message-container{width:-webkit-fill-available}::ng-deep .lower-message-container .content{justify-content:center;align-items:center;gap:var(--small-4px)}::ng-deep .image-description-container .image-container{margin-bottom:0}::ng-deep .image-description-container .content-container{gap:var(--medium-28px)}::ng-deep .image-description-container .title-class{font-size:var(--medium-22px);font-weight:500;line-height:var(--medium-28px)}::ng-deep .image-description-container .description{color:var(--text-mediumemphasis, #6D6979);font-size:var(--small-16px);line-height:var(--medium-24px);letter-spacing:.5px}.top-message-container .message-content-style{display:flex;justify-content:center;flex:1;color:var(--text-primary, #825CEE)}.lower-message-container .message-content-style{display:flex;align-items:center}::ng-deep .image-description-container .title-description{display:flex;flex-direction:column;gap:var(--small-8px)}.dialog-container .button-group-container{display:flex;gap:var(--small-12px);justify-content:center}::ng-deep .checkboxButton .mdc-checkbox__background{width:var(--small-16px);height:var(--small-16px);border:1.5px solid currentColor}::ng-deep .checkboxButton .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#757575}::ng-deep .checkboxButton .mdc-checkbox{padding:calc((var(--mdc-checkbox-state-layer-size) - 21px) / 2)}::ng-deep .checkboxButton .mdc-form-field{display:flex;align-items:center}::ng-deep .checkboxButton .mdc-label{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.dialog-container .cross-btn{position:absolute;top:0;right:0;cursor:pointer}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.image-description-container{width:100%;display:flex;flex-direction:column}\n"] }]
|
|
3224
|
+
args: [{ selector: 'sa-dialog', standalone: true, imports: [MessageBannerComponent, MessageBannerV2Component, CommonModule, ButtonComponent, MatCheckboxModule, IconComponent, MatDialogModule, FormInputComponent], template: "<div class=\"dialog-container\">\r\n <!-- top banner region -->\r\n <div class=\"top-container\">\r\n @if (!!dialogData?.topMessageBanners) {\r\n <div class=\"top-message-container\">\r\n @for (\r\n messageBanner of dialogData?.topMessageBanners;\r\n track messageBanner.content\r\n ) {\r\n <sa-message-banner\r\n [type]=\"messageBanner?.type\"\r\n [bannerIcon]=\"messageBanner?.bannerIcon\"\r\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\r\n [button]=\"messageBanner?.button\"\r\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\r\n [style]=\"messageBanner?.style || 'width:39.438rem'\"\r\n >\r\n <div class=\"{{ messageBanner?.className }} message-content-style\">\r\n {{ messageBanner?.content }}\r\n </div>\r\n </sa-message-banner>\r\n }\r\n </div>\r\n }\r\n @if (!!dialogData?.closeButton || dialogData?.showCloseButton) {\r\n <div class=\"cross-btn\" (click)=\"onCloseButtonClick($event)\">\r\n <sa-icon\r\n [icon]=\"dialogData?.closeButton || 'closeOutlined'\"\r\n class=\"d-flex\"\r\n size=\"20\"\r\n ></sa-icon>\r\n </div>\r\n }\r\n </div>\r\n <!-- middle region -->\r\n @if (!!dialogData?.middleRegion) {\r\n <ng-container *ngIf=\"dialogData?.middleRegion as middleRegion\">\r\n <div class=\"image-description-container {{ middleRegion?.className }}\">\r\n <sa-message-banner-v2\r\n [messageType]=\"middleRegion?.messageType || 'default'\"\r\n [messageIcon]=\"middleRegion?.messageIcon\"\r\n [messageIconSize]=\"middleRegion?.messageIconSize\"\r\n [title]=\"middleRegion?.title\"\r\n [description]=\"middleRegion?.description\"\r\n [buttons]=\"middleRegion?.buttons\"\r\n [formConfig]=\"middleRegion?.content?.formConfig\"\r\n (onFormEvent)=\"onUnifiedFormEvent($event)\"\r\n (buttonClick)=\"middleRegion?.buttons ? onButtonClick($event) : ''\"\r\n >\r\n </sa-message-banner-v2>\r\n </div>\r\n </ng-container>\r\n }\r\n <!-- lower message banner region -->\r\n @if (!!dialogData?.lowerMessageBanners) {\r\n <div class=\"lower-message-container\">\r\n @for (\r\n messageBanner of dialogData?.lowerMessageBanners;\r\n track messageBanner.content\r\n ) {\r\n <sa-message-banner\r\n [type]=\"messageBanner?.type\"\r\n [bannerIcon]=\"messageBanner?.bannerIcon\"\r\n [buttonIcon]=\"messageBanner?.buttonIcon\"\r\n [bannerIconSize]=\"messageBanner?.bannerIconSize || '24'\"\r\n [button]=\"messageBanner?.button\"\r\n [style]=\"messageBanner?.style || 'width:-webkit-fill-available'\"\r\n (actionClick)=\"onButtonClick(messageBanner?.button, $event)\"\r\n >\r\n <div\r\n class=\"{{ messageBanner?.className }} message-content-style\"\r\n ></div>\r\n {{ messageBanner?.content }}\r\n </sa-message-banner>\r\n }\r\n </div>\r\n }\r\n <!-- button region -->\r\n @if (!!dialogData?.buttons) {\r\n <div class=\"button-group-container\">\r\n @for (button of dialogData?.buttons; track button.text) {\r\n <sa-button\r\n [text]=\"button.text\"\r\n [icon]=\"button.icon\"\r\n [size]=\"button.size\"\r\n [type]=\"button.type\"\r\n [state]=\"button.state\"\r\n [iconPosition]=\"button.iconPosition\"\r\n [buttonIconSize]=\"button.buttonIconSize\"\r\n (onClickEvent)=\"onButtonClick(button, $event)\"\r\n role=\"button\"\r\n [attr.aria-label]=\"button.text\"\r\n >\r\n </sa-button>\r\n }\r\n </div>\r\n }\r\n @if (!!dialogData?.buttonsWithType) {\r\n <div class=\"buttonWithType-group-container\">\r\n @for (button of dialogData?.buttonsWithType; track button.text) {\r\n @if (button?.type === \"checkbox\") {\r\n <div class=\"checkbox-container {{ button.className }}\">\r\n <mat-checkbox [id]=\"button.id\" (change)=\"onButtonClick(button)\" class=\"checkbox-style\">{{\r\n button.text\r\n }}</mat-checkbox>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".dialog-container{display:flex;flex-direction:column;gap:var(--medium-28px);align-items:center;position:relative;overflow-y:auto;overflow-x:hidden}.top-message-container,.lower-message-container{display:flex;align-items:center;flex-direction:column;gap:var(--medium-28px)}.lower-message-container{width:-webkit-fill-available}::ng-deep .lower-message-container .content{justify-content:center;align-items:center;gap:var(--small-4px)}::ng-deep .image-description-container .image-container{margin-bottom:0}::ng-deep .image-description-container .content-container{gap:var(--medium-28px)}::ng-deep .image-description-container .title-class{font-size:var(--medium-22px);font-weight:500;line-height:var(--medium-28px)}::ng-deep .image-description-container .description{color:var(--text-mediumemphasis, #6D6979);font-size:var(--small-16px);line-height:var(--medium-24px);letter-spacing:.5px}.top-message-container .message-content-style{display:flex;justify-content:center;flex:1;color:var(--text-primary, #825CEE)}.lower-message-container .message-content-style{display:flex;align-items:center}::ng-deep .image-description-container .title-description{display:flex;flex-direction:column;gap:var(--small-8px)}.dialog-container .button-group-container{display:flex;gap:var(--small-12px);justify-content:center}::ng-deep .checkboxButton .mdc-checkbox__background{width:var(--small-16px);height:var(--small-16px);border:1.5px solid currentColor}::ng-deep .checkboxButton .mdc-checkbox .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate):not([data-indeterminate=true])~.mdc-checkbox__background{border-color:#757575}::ng-deep .checkboxButton .mdc-checkbox{padding:calc((var(--mdc-checkbox-state-layer-size) - 21px) / 2)}::ng-deep .checkboxButton .mdc-form-field{display:flex;align-items:center}::ng-deep .checkboxButton .mdc-label{color:var(--text-mediumemphasis, #6D6979);text-align:center;font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.dialog-container .cross-btn{position:absolute;top:0;right:0;cursor:pointer}::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style.mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:enabled:focus:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox .mdc-checkbox__native-control:focus:checked~.mdc-checkbox__ripple,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control:enabled:indeterminate~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:not(:disabled):active .mdc-checkbox__native-control[data-indeterminate=true]:enabled~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:enabled:checked~.mdc-checkbox__background,::ng-deep .checkbox-style .mdc-checkbox:hover .mdc-checkbox__native-control:checked~.mdc-checkbox__ripple{border-color:var(--primary-500);background-color:var(--primary-500)}.image-description-container{width:100%;display:flex;flex-direction:column}\n"] }]
|
|
3176
3225
|
}], ctorParameters: () => [{ type: i1$7.MatDialogRef, decorators: [{
|
|
3177
3226
|
type: Optional
|
|
3178
3227
|
}] }, { type: undefined, decorators: [{
|
|
@@ -3371,7 +3420,7 @@ class CategoryDropdownComponent extends FieldType {
|
|
|
3371
3420
|
this.destroy$.complete();
|
|
3372
3421
|
}
|
|
3373
3422
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CategoryDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3374
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CategoryDropdownComponent, isStandalone: true, selector: "sa-category-dropdown", host: { listeners: { "document:click": "onClick($event)" } }, providers: [IconService], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "categoryContainer", first: true, predicate: ["categoryContainer"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"custom-category-dropdown relative\" (click)=\"toggleDropdown()\">\n <!-- Dropdown Trigger / Display -->\n <div #categoryContainer class=\"custom-category-container\" [class.open]=\"isOpen()\">\n <div class=\"custom-category-attribute-container\">\n @if(props?.['multiple']){\n @if (selectedAttributes().length > 0) {\n @for (item of selectedAttributes(); track item[bindValue]) {\n <div class=\"custom-category-attribute custom-category-custom-chip\" (click)=\"$event.stopPropagation()\">\n <span class=\"custom-category-attribute-label\">{{ item[bindLabel] }}</span>\n <span class=\"custom-category-attribute-icon right\">\n <sa-icon icon=\"closeOutlined\" (click)=\"removeValue(item)\" size=\"11\"></sa-icon>\n </span>\n </div>\n }\n } @else {\n <span class=\"placeholder\">Select items</span>\n }\n } @else {\n @if(formControl.value) {\n <span class=\"custom-category-attribute-label\">{{ formControl.value[bindLabel] }}</span>\n } @else {\n <span class=\"placeholder\">Select item</span>\n }\n }\n </div>\n <div class=\"custom-category-arrow-wrapper\">\n <sa-icon icon=\"upDownChevronOutlined\" size=\"11\" class=\"searchIcons\"></sa-icon>\n </div>\n </div>\n\n <!-- Dropdown Panel -->\n @if (isOpen()) {\n <div #dropdownPanel class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\">\n <div class=\"search-input-container mat-form-field-density-5\">\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\n <sa-icon icon=\"searchIcon\" size=\"20\" class=\"searchIcons\" matPrefix></sa-icon>\n <input #searchInput matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input\"\n (keyup)=\"onSearch($event)\" [placeholder]=\"props?.['searchPlaceholder'] || 'Search'\" />\n <sa-icon class=\"pointer\" icon=\"closeOutlined\" size=\"15\" class=\"searchIcons\" matSuffix\n (click)=\"clearSearch($event)\"></sa-icon>\n </mat-form-field>\n </div>\n\n @if (filteredCategories().length > 0) {\n <div class=\"two-panel-dropdown\">\n <!-- Left Panel: Categories -->\n <div class=\"category-panel\">\n @for (cat of filteredCategories(); track cat[bindValue]) {\n <div class=\"category-item\" [class.active]=\"cat[bindValue] === selectedCategory()?.[bindValue]\"\n (click)=\"selectCategory(cat); $event.stopPropagation()\">\n <span class=\"category-label\">{{ cat[bindLabel] }}\n @if(props?.['showAttributesCount']){\n <span class=\"attributes-count\">({{ cat?.[bindAttributes]?.length }})</span>\n }\n </span>\n </div>\n }\n </div>\n <div class=\"dropdown-divider\"></div>\n\n <!-- Right Panel: Attributes -->\n <div class=\"attributes-panel\">\n @if(filteredAttributes().length > 0) {\n @for (val of filteredAttributes(); track val[bindValue]) {\n <div class=\"attribute-item pointer\"\n [class.active]=\"props?.['multiple'] ? isItemSelected(val) : formControl.value?.[bindValue] === val[bindValue]\"\n (click)=\"props?.['multiple'] ? toggleValue(val) : selectSingleValue(val); $event.stopPropagation()\">\n @if(props?.['multiple']){\n <label class=\"custom-checkbox-container\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isItemSelected(val)\" (change)=\"toggleValue(val)\">\n <span class=\"checkmark\"></span>\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\n </label>\n }\n @else{\n <label class=\"custom-checkbox-container\">\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\n @if(val?.tooltip || val?.description){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"val?.tooltip || val?.description\" matTooltipClass=\"custom-tooltip\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </label>\n }\n </div>\n }\n }@else {\n <div class=\"p-4 text-center text-gray-500 w-full\">\n No items found.\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"p-4 text-center text-gray-500 w-full\">\n No items found.\n </div>\n }\n </div>\n }\n</div>", styles: [".custom-category-container{display:flex;align-items:center;justify-content:space-between;border-radius:var(--small-4px, 4px);padding:.5rem .75rem;min-height:2.438rem;cursor:pointer;border:1px solid var(--grey-100, #EAECF0)}.custom-category-container.open{border-color:var(--primary-500)}.custom-category-attribute-container{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-right:1.5rem}.custom-category-attribute{display:flex;align-items:center;background-color:var(--border-subtle, #e5e7eb);border-radius:9999px;padding:.25rem .75rem;color:var(--text-medium-emphasis, #374151);font-size:var(--small-14px, 14px);font-weight:500}.custom-category-attribute-icon.right{margin-left:.5rem;cursor:pointer}.placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-checkbox-container input{opacity:0;position:absolute;width:0;height:0}.checkmark{height:1.125rem;width:1.125rem;background-color:var(--primary-50);border:1px solid var(--grey-100);border-radius:var(--small-4px, 4px);position:relative;margin-right:var(--small-8px, 8px)}.custom-checkbox-container input:checked~.checkmark{background-color:var(--primary-500);border-color:var(--primary-500)}.checkmark:after{content:\"\";position:absolute;display:none}.custom-checkbox-container input:checked~.checkmark:after{display:block}.custom-checkbox-container .checkmark:after{left:.375rem;top:.125rem;width:.375rem;height:.625rem;border:solid var(--structural-white);border-width:0 .125rem .125rem 0;transform:rotate(45deg)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}.custom-category-dropdown .two-panel-dropdown{display:flex;min-height:15.625rem;max-height:25rem;background-color:var(--structural-white);overflow:hidden;top:calc(100% + var(--small-4px));gap:var(--medium-20px)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px) var(--small-12px)}.custom-category-dropdown .dropdown-divider{border-right:1px solid var(--grey-100, #EAECF0)}.custom-category-dropdown .category-label{color:var(--text-highemphasis, #1C1B20);text-align:left;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:400;line-height:var(--small-16px, 16px)}.custom-category-dropdown .attribute-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-category-dropdown .category-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .category-item.active .category-label{color:var(--text-white, #FFF);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}.custom-category-dropdown .category-item:not(.active):hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item:hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .attribute-item.active .attribute-label{color:var(--text-white, #FFF);font-weight:500}.custom-category-dropdown .category-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.custom-category-dropdown .category-item{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:var(--small-4px, 4px);background:var(--structural-white);cursor:pointer}.custom-category-dropdown .attributes-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px);align-self:stretch}.custom-category-dropdown .attribute-item{display:flex;padding:var(--small-8px, 8px) var(--small-8px, 8px);align-items:center;gap:var(--Small-4px, 4px)}.custom-checkbox-container{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:var(--small-4px, 4px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .custom-category-dropdown .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:var(--grey-100)}::ng-deep .custom-category-dropdown .active .tooltip-container .info-icon{color:var(--structural-white)}.custom-category-dropdown .dropdown-panel{display:flex;padding:var(--small-16px, 16px) var(--medium-20px, 20px) var(--small-16px, 16px) var(--small-12px, 12px);flex-direction:column;gap:var(--small-10px);border-radius:var(--small-8px);background:var(--structural-white);width:fit-content;max-height:25rem;box-shadow:0 1px 2px #0000004d,0 1px 2px #0000004d,0 2px 6px 2px #00000026;margin-top:0;box-sizing:border-box;position:absolute;z-index:1000;-webkit-overflow-scrolling:touch}.custom-category-container .custom-category-attribute-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.custom-category-dropdown .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSelectModule }] }); }
|
|
3423
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: CategoryDropdownComponent, isStandalone: true, selector: "sa-category-dropdown", host: { listeners: { "document:click": "onClick($event)" } }, providers: [IconService], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "categoryContainer", first: true, predicate: ["categoryContainer"], descendants: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"custom-category-dropdown relative\" (click)=\"toggleDropdown()\">\r\n <!-- Dropdown Trigger / Display -->\r\n <div #categoryContainer class=\"custom-category-container\" [class.open]=\"isOpen()\">\r\n <div class=\"custom-category-attribute-container\">\r\n @if(props?.['multiple']){\r\n @if (selectedAttributes().length > 0) {\r\n @for (item of selectedAttributes(); track item[bindValue]) {\r\n <div class=\"custom-category-attribute custom-category-custom-chip\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"custom-category-attribute-label\">{{ item[bindLabel] }}</span>\r\n <span class=\"custom-category-attribute-icon right\">\r\n <sa-icon icon=\"closeOutlined\" (click)=\"removeValue(item)\" size=\"11\"></sa-icon>\r\n </span>\r\n </div>\r\n }\r\n } @else {\r\n <span class=\"placeholder\">Select items</span>\r\n }\r\n } @else {\r\n @if(formControl.value) {\r\n <span class=\"custom-category-attribute-label\">{{ formControl.value[bindLabel] }}</span>\r\n } @else {\r\n <span class=\"placeholder\">Select item</span>\r\n }\r\n }\r\n </div>\r\n <div class=\"custom-category-arrow-wrapper\">\r\n <sa-icon icon=\"upDownChevronOutlined\" size=\"11\" class=\"searchIcons\"></sa-icon>\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown Panel -->\r\n @if (isOpen()) {\r\n <div #dropdownPanel class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"search-input-container mat-form-field-density-5\">\r\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\r\n <sa-icon icon=\"searchIcon\" size=\"20\" class=\"searchIcons\" matPrefix></sa-icon>\r\n <input #searchInput matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input\"\r\n (keyup)=\"onSearch($event)\" [placeholder]=\"props?.['searchPlaceholder'] || 'Search'\" />\r\n <sa-icon class=\"pointer\" icon=\"closeOutlined\" size=\"15\" class=\"searchIcons\" matSuffix\r\n (click)=\"clearSearch($event)\"></sa-icon>\r\n </mat-form-field>\r\n </div>\r\n\r\n @if (filteredCategories().length > 0) {\r\n <div class=\"two-panel-dropdown\">\r\n <!-- Left Panel: Categories -->\r\n <div class=\"category-panel\">\r\n @for (cat of filteredCategories(); track cat[bindValue]) {\r\n <div class=\"category-item\" [class.active]=\"cat[bindValue] === selectedCategory()?.[bindValue]\"\r\n (click)=\"selectCategory(cat); $event.stopPropagation()\">\r\n <span class=\"category-label\">{{ cat[bindLabel] }}\r\n @if(props?.['showAttributesCount']){\r\n <span class=\"attributes-count\">({{ cat?.[bindAttributes]?.length }})</span>\r\n }\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"dropdown-divider\"></div>\r\n\r\n <!-- Right Panel: Attributes -->\r\n <div class=\"attributes-panel\">\r\n @if(filteredAttributes().length > 0) {\r\n @for (val of filteredAttributes(); track val[bindValue]) {\r\n <div class=\"attribute-item pointer\"\r\n [class.active]=\"props?.['multiple'] ? isItemSelected(val) : formControl.value?.[bindValue] === val[bindValue]\"\r\n (click)=\"props?.['multiple'] ? toggleValue(val) : selectSingleValue(val); $event.stopPropagation()\">\r\n @if(props?.['multiple']){\r\n <label class=\"custom-checkbox-container\" (click)=\"$event.stopPropagation()\">\r\n <input type=\"checkbox\" [checked]=\"isItemSelected(val)\" (change)=\"toggleValue(val)\">\r\n <span class=\"checkmark\"></span>\r\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\r\n </label>\r\n }\r\n @else{\r\n <label class=\"custom-checkbox-container\">\r\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\r\n @if(val?.tooltip || val?.description){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\r\n [matTooltip]=\"val?.tooltip || val?.description\" matTooltipClass=\"custom-tooltip\"\r\n class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n </label>\r\n }\r\n </div>\r\n }\r\n }@else {\r\n <div class=\"p-4 text-center text-gray-500 w-full\">\r\n No items found.\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"p-4 text-center text-gray-500 w-full\">\r\n No items found.\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>", styles: [".custom-category-container{display:flex;align-items:center;justify-content:space-between;border-radius:var(--small-4px, 4px);padding:.5rem .75rem;min-height:2.438rem;cursor:pointer;border:1px solid var(--grey-100, #EAECF0)}.custom-category-container.open{border-color:var(--primary-500)}.custom-category-attribute-container{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-right:1.5rem}.custom-category-attribute{display:flex;align-items:center;background-color:var(--border-subtle, #e5e7eb);border-radius:9999px;padding:.25rem .75rem;color:var(--text-medium-emphasis, #374151);font-size:var(--small-14px, 14px);font-weight:500}.custom-category-attribute-icon.right{margin-left:.5rem;cursor:pointer}.placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-checkbox-container input{opacity:0;position:absolute;width:0;height:0}.checkmark{height:1.125rem;width:1.125rem;background-color:var(--primary-50);border:1px solid var(--grey-100);border-radius:var(--small-4px, 4px);position:relative;margin-right:var(--small-8px, 8px)}.custom-checkbox-container input:checked~.checkmark{background-color:var(--primary-500);border-color:var(--primary-500)}.checkmark:after{content:\"\";position:absolute;display:none}.custom-checkbox-container input:checked~.checkmark:after{display:block}.custom-checkbox-container .checkmark:after{left:.375rem;top:.125rem;width:.375rem;height:.625rem;border:solid var(--structural-white);border-width:0 .125rem .125rem 0;transform:rotate(45deg)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}.custom-category-dropdown .two-panel-dropdown{display:flex;min-height:15.625rem;max-height:25rem;background-color:var(--structural-white);overflow:hidden;top:calc(100% + var(--small-4px));gap:var(--medium-20px)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px) var(--small-12px)}.custom-category-dropdown .dropdown-divider{border-right:1px solid var(--grey-100, #EAECF0)}.custom-category-dropdown .category-label{color:var(--text-highemphasis, #1C1B20);text-align:left;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:400;line-height:var(--small-16px, 16px)}.custom-category-dropdown .attribute-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-category-dropdown .category-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .category-item.active .category-label{color:var(--text-white, #FFF);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}.custom-category-dropdown .category-item:not(.active):hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item:hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .attribute-item.active .attribute-label{color:var(--text-white, #FFF);font-weight:500}.custom-category-dropdown .category-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.custom-category-dropdown .category-item{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:var(--small-4px, 4px);background:var(--structural-white);cursor:pointer}.custom-category-dropdown .attributes-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px);align-self:stretch}.custom-category-dropdown .attribute-item{display:flex;padding:var(--small-8px, 8px) var(--small-8px, 8px);align-items:center;gap:var(--Small-4px, 4px)}.custom-checkbox-container{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:var(--small-4px, 4px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .custom-category-dropdown .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:var(--grey-100)}::ng-deep .custom-category-dropdown .active .tooltip-container .info-icon{color:var(--structural-white)}.custom-category-dropdown .dropdown-panel{display:flex;padding:var(--small-16px, 16px) var(--medium-20px, 20px) var(--small-16px, 16px) var(--small-12px, 12px);flex-direction:column;gap:var(--small-10px);border-radius:var(--small-8px);background:var(--structural-white);width:fit-content;max-height:25rem;box-shadow:0 1px 2px #0000004d,0 1px 2px #0000004d,0 2px 6px 2px #00000026;margin-top:0;box-sizing:border-box;position:absolute;z-index:1000;-webkit-overflow-scrolling:touch}.custom-category-container .custom-category-attribute-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.custom-category-dropdown .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "ngmodule", type: MatSelectModule }] }); }
|
|
3375
3424
|
}
|
|
3376
3425
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: CategoryDropdownComponent, decorators: [{
|
|
3377
3426
|
type: Component,
|
|
@@ -3389,7 +3438,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
3389
3438
|
MatDatepickerModule,
|
|
3390
3439
|
MatNativeDateModule,
|
|
3391
3440
|
MatCheckboxModule,
|
|
3392
|
-
MatSelectModule], providers: [IconService], template: "<div class=\"custom-category-dropdown relative\" (click)=\"toggleDropdown()\">\n <!-- Dropdown Trigger / Display -->\n <div #categoryContainer class=\"custom-category-container\" [class.open]=\"isOpen()\">\n <div class=\"custom-category-attribute-container\">\n @if(props?.['multiple']){\n @if (selectedAttributes().length > 0) {\n @for (item of selectedAttributes(); track item[bindValue]) {\n <div class=\"custom-category-attribute custom-category-custom-chip\" (click)=\"$event.stopPropagation()\">\n <span class=\"custom-category-attribute-label\">{{ item[bindLabel] }}</span>\n <span class=\"custom-category-attribute-icon right\">\n <sa-icon icon=\"closeOutlined\" (click)=\"removeValue(item)\" size=\"11\"></sa-icon>\n </span>\n </div>\n }\n } @else {\n <span class=\"placeholder\">Select items</span>\n }\n } @else {\n @if(formControl.value) {\n <span class=\"custom-category-attribute-label\">{{ formControl.value[bindLabel] }}</span>\n } @else {\n <span class=\"placeholder\">Select item</span>\n }\n }\n </div>\n <div class=\"custom-category-arrow-wrapper\">\n <sa-icon icon=\"upDownChevronOutlined\" size=\"11\" class=\"searchIcons\"></sa-icon>\n </div>\n </div>\n\n <!-- Dropdown Panel -->\n @if (isOpen()) {\n <div #dropdownPanel class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\">\n <div class=\"search-input-container mat-form-field-density-5\">\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\n <sa-icon icon=\"searchIcon\" size=\"20\" class=\"searchIcons\" matPrefix></sa-icon>\n <input #searchInput matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input\"\n (keyup)=\"onSearch($event)\" [placeholder]=\"props?.['searchPlaceholder'] || 'Search'\" />\n <sa-icon class=\"pointer\" icon=\"closeOutlined\" size=\"15\" class=\"searchIcons\" matSuffix\n (click)=\"clearSearch($event)\"></sa-icon>\n </mat-form-field>\n </div>\n\n @if (filteredCategories().length > 0) {\n <div class=\"two-panel-dropdown\">\n <!-- Left Panel: Categories -->\n <div class=\"category-panel\">\n @for (cat of filteredCategories(); track cat[bindValue]) {\n <div class=\"category-item\" [class.active]=\"cat[bindValue] === selectedCategory()?.[bindValue]\"\n (click)=\"selectCategory(cat); $event.stopPropagation()\">\n <span class=\"category-label\">{{ cat[bindLabel] }}\n @if(props?.['showAttributesCount']){\n <span class=\"attributes-count\">({{ cat?.[bindAttributes]?.length }})</span>\n }\n </span>\n </div>\n }\n </div>\n <div class=\"dropdown-divider\"></div>\n\n <!-- Right Panel: Attributes -->\n <div class=\"attributes-panel\">\n @if(filteredAttributes().length > 0) {\n @for (val of filteredAttributes(); track val[bindValue]) {\n <div class=\"attribute-item pointer\"\n [class.active]=\"props?.['multiple'] ? isItemSelected(val) : formControl.value?.[bindValue] === val[bindValue]\"\n (click)=\"props?.['multiple'] ? toggleValue(val) : selectSingleValue(val); $event.stopPropagation()\">\n @if(props?.['multiple']){\n <label class=\"custom-checkbox-container\" (click)=\"$event.stopPropagation()\">\n <input type=\"checkbox\" [checked]=\"isItemSelected(val)\" (change)=\"toggleValue(val)\">\n <span class=\"checkmark\"></span>\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\n </label>\n }\n @else{\n <label class=\"custom-checkbox-container\">\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\n @if(val?.tooltip || val?.description){\n <span class=\"tooltip-container\">\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\n [matTooltip]=\"val?.tooltip || val?.description\" matTooltipClass=\"custom-tooltip\"\n class=\"tooltip-icon\"></sa-icon>\n </span>\n }\n </label>\n }\n </div>\n }\n }@else {\n <div class=\"p-4 text-center text-gray-500 w-full\">\n No items found.\n </div>\n }\n </div>\n </div>\n } @else {\n <div class=\"p-4 text-center text-gray-500 w-full\">\n No items found.\n </div>\n }\n </div>\n }\n</div>", styles: [".custom-category-container{display:flex;align-items:center;justify-content:space-between;border-radius:var(--small-4px, 4px);padding:.5rem .75rem;min-height:2.438rem;cursor:pointer;border:1px solid var(--grey-100, #EAECF0)}.custom-category-container.open{border-color:var(--primary-500)}.custom-category-attribute-container{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-right:1.5rem}.custom-category-attribute{display:flex;align-items:center;background-color:var(--border-subtle, #e5e7eb);border-radius:9999px;padding:.25rem .75rem;color:var(--text-medium-emphasis, #374151);font-size:var(--small-14px, 14px);font-weight:500}.custom-category-attribute-icon.right{margin-left:.5rem;cursor:pointer}.placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-checkbox-container input{opacity:0;position:absolute;width:0;height:0}.checkmark{height:1.125rem;width:1.125rem;background-color:var(--primary-50);border:1px solid var(--grey-100);border-radius:var(--small-4px, 4px);position:relative;margin-right:var(--small-8px, 8px)}.custom-checkbox-container input:checked~.checkmark{background-color:var(--primary-500);border-color:var(--primary-500)}.checkmark:after{content:\"\";position:absolute;display:none}.custom-checkbox-container input:checked~.checkmark:after{display:block}.custom-checkbox-container .checkmark:after{left:.375rem;top:.125rem;width:.375rem;height:.625rem;border:solid var(--structural-white);border-width:0 .125rem .125rem 0;transform:rotate(45deg)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}.custom-category-dropdown .two-panel-dropdown{display:flex;min-height:15.625rem;max-height:25rem;background-color:var(--structural-white);overflow:hidden;top:calc(100% + var(--small-4px));gap:var(--medium-20px)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px) var(--small-12px)}.custom-category-dropdown .dropdown-divider{border-right:1px solid var(--grey-100, #EAECF0)}.custom-category-dropdown .category-label{color:var(--text-highemphasis, #1C1B20);text-align:left;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:400;line-height:var(--small-16px, 16px)}.custom-category-dropdown .attribute-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-category-dropdown .category-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .category-item.active .category-label{color:var(--text-white, #FFF);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}.custom-category-dropdown .category-item:not(.active):hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item:hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .attribute-item.active .attribute-label{color:var(--text-white, #FFF);font-weight:500}.custom-category-dropdown .category-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.custom-category-dropdown .category-item{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:var(--small-4px, 4px);background:var(--structural-white);cursor:pointer}.custom-category-dropdown .attributes-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px);align-self:stretch}.custom-category-dropdown .attribute-item{display:flex;padding:var(--small-8px, 8px) var(--small-8px, 8px);align-items:center;gap:var(--Small-4px, 4px)}.custom-checkbox-container{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:var(--small-4px, 4px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .custom-category-dropdown .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:var(--grey-100)}::ng-deep .custom-category-dropdown .active .tooltip-container .info-icon{color:var(--structural-white)}.custom-category-dropdown .dropdown-panel{display:flex;padding:var(--small-16px, 16px) var(--medium-20px, 20px) var(--small-16px, 16px) var(--small-12px, 12px);flex-direction:column;gap:var(--small-10px);border-radius:var(--small-8px);background:var(--structural-white);width:fit-content;max-height:25rem;box-shadow:0 1px 2px #0000004d,0 1px 2px #0000004d,0 2px 6px 2px #00000026;margin-top:0;box-sizing:border-box;position:absolute;z-index:1000;-webkit-overflow-scrolling:touch}.custom-category-container .custom-category-attribute-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.custom-category-dropdown .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"] }]
|
|
3441
|
+
MatSelectModule], providers: [IconService], template: "<div class=\"custom-category-dropdown relative\" (click)=\"toggleDropdown()\">\r\n <!-- Dropdown Trigger / Display -->\r\n <div #categoryContainer class=\"custom-category-container\" [class.open]=\"isOpen()\">\r\n <div class=\"custom-category-attribute-container\">\r\n @if(props?.['multiple']){\r\n @if (selectedAttributes().length > 0) {\r\n @for (item of selectedAttributes(); track item[bindValue]) {\r\n <div class=\"custom-category-attribute custom-category-custom-chip\" (click)=\"$event.stopPropagation()\">\r\n <span class=\"custom-category-attribute-label\">{{ item[bindLabel] }}</span>\r\n <span class=\"custom-category-attribute-icon right\">\r\n <sa-icon icon=\"closeOutlined\" (click)=\"removeValue(item)\" size=\"11\"></sa-icon>\r\n </span>\r\n </div>\r\n }\r\n } @else {\r\n <span class=\"placeholder\">Select items</span>\r\n }\r\n } @else {\r\n @if(formControl.value) {\r\n <span class=\"custom-category-attribute-label\">{{ formControl.value[bindLabel] }}</span>\r\n } @else {\r\n <span class=\"placeholder\">Select item</span>\r\n }\r\n }\r\n </div>\r\n <div class=\"custom-category-arrow-wrapper\">\r\n <sa-icon icon=\"upDownChevronOutlined\" size=\"11\" class=\"searchIcons\"></sa-icon>\r\n </div>\r\n </div>\r\n\r\n <!-- Dropdown Panel -->\r\n @if (isOpen()) {\r\n <div #dropdownPanel class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\">\r\n <div class=\"search-input-container mat-form-field-density-5\">\r\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\r\n <sa-icon icon=\"searchIcon\" size=\"20\" class=\"searchIcons\" matPrefix></sa-icon>\r\n <input #searchInput matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input\"\r\n (keyup)=\"onSearch($event)\" [placeholder]=\"props?.['searchPlaceholder'] || 'Search'\" />\r\n <sa-icon class=\"pointer\" icon=\"closeOutlined\" size=\"15\" class=\"searchIcons\" matSuffix\r\n (click)=\"clearSearch($event)\"></sa-icon>\r\n </mat-form-field>\r\n </div>\r\n\r\n @if (filteredCategories().length > 0) {\r\n <div class=\"two-panel-dropdown\">\r\n <!-- Left Panel: Categories -->\r\n <div class=\"category-panel\">\r\n @for (cat of filteredCategories(); track cat[bindValue]) {\r\n <div class=\"category-item\" [class.active]=\"cat[bindValue] === selectedCategory()?.[bindValue]\"\r\n (click)=\"selectCategory(cat); $event.stopPropagation()\">\r\n <span class=\"category-label\">{{ cat[bindLabel] }}\r\n @if(props?.['showAttributesCount']){\r\n <span class=\"attributes-count\">({{ cat?.[bindAttributes]?.length }})</span>\r\n }\r\n </span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"dropdown-divider\"></div>\r\n\r\n <!-- Right Panel: Attributes -->\r\n <div class=\"attributes-panel\">\r\n @if(filteredAttributes().length > 0) {\r\n @for (val of filteredAttributes(); track val[bindValue]) {\r\n <div class=\"attribute-item pointer\"\r\n [class.active]=\"props?.['multiple'] ? isItemSelected(val) : formControl.value?.[bindValue] === val[bindValue]\"\r\n (click)=\"props?.['multiple'] ? toggleValue(val) : selectSingleValue(val); $event.stopPropagation()\">\r\n @if(props?.['multiple']){\r\n <label class=\"custom-checkbox-container\" (click)=\"$event.stopPropagation()\">\r\n <input type=\"checkbox\" [checked]=\"isItemSelected(val)\" (change)=\"toggleValue(val)\">\r\n <span class=\"checkmark\"></span>\r\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\r\n </label>\r\n }\r\n @else{\r\n <label class=\"custom-checkbox-container\">\r\n <span class=\"attribute-label\">{{ val[bindLabel] }}</span>\r\n @if(val?.tooltip || val?.description){\r\n <span class=\"tooltip-container\">\r\n <sa-icon [icon]=\"props?.['tooltipIcon'] || 'infoCircleOutlined'\" customClass=\"info-icon\"\r\n [matTooltip]=\"val?.tooltip || val?.description\" matTooltipClass=\"custom-tooltip\"\r\n class=\"tooltip-icon\"></sa-icon>\r\n </span>\r\n }\r\n </label>\r\n }\r\n </div>\r\n }\r\n }@else {\r\n <div class=\"p-4 text-center text-gray-500 w-full\">\r\n No items found.\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n } @else {\r\n <div class=\"p-4 text-center text-gray-500 w-full\">\r\n No items found.\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>", styles: [".custom-category-container{display:flex;align-items:center;justify-content:space-between;border-radius:var(--small-4px, 4px);padding:.5rem .75rem;min-height:2.438rem;cursor:pointer;border:1px solid var(--grey-100, #EAECF0)}.custom-category-container.open{border-color:var(--primary-500)}.custom-category-attribute-container{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding-right:1.5rem}.custom-category-attribute{display:flex;align-items:center;background-color:var(--border-subtle, #e5e7eb);border-radius:9999px;padding:.25rem .75rem;color:var(--text-medium-emphasis, #374151);font-size:var(--small-14px, 14px);font-weight:500}.custom-category-attribute-icon.right{margin-left:.5rem;cursor:pointer}.placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-checkbox-container input{opacity:0;position:absolute;width:0;height:0}.checkmark{height:1.125rem;width:1.125rem;background-color:var(--primary-50);border:1px solid var(--grey-100);border-radius:var(--small-4px, 4px);position:relative;margin-right:var(--small-8px, 8px)}.custom-checkbox-container input:checked~.checkmark{background-color:var(--primary-500);border-color:var(--primary-500)}.checkmark:after{content:\"\";position:absolute;display:none}.custom-checkbox-container input:checked~.checkmark:after{display:block}.custom-checkbox-container .checkmark:after{left:.375rem;top:.125rem;width:.375rem;height:.625rem;border:solid var(--structural-white);border-width:0 .125rem .125rem 0;transform:rotate(45deg)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}.custom-category-dropdown .two-panel-dropdown{display:flex;min-height:15.625rem;max-height:25rem;background-color:var(--structural-white);overflow:hidden;top:calc(100% + var(--small-4px));gap:var(--medium-20px)}::ng-deep .custom-category-dropdown .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px) var(--small-12px)}.custom-category-dropdown .dropdown-divider{border-right:1px solid var(--grey-100, #EAECF0)}.custom-category-dropdown .category-label{color:var(--text-highemphasis, #1C1B20);text-align:left;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:400;line-height:var(--small-16px, 16px)}.custom-category-dropdown .attribute-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}.custom-category-dropdown .category-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .category-item.active .category-label{color:var(--text-white, #FFF);text-align:center;font-family:var(--font-family, Roboto);font-size:var(--small-12px, 12px);font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}.custom-category-dropdown .category-item:not(.active):hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item:hover{border-radius:var(--small-4px, 4px);background-color:var(--primary-50)}.custom-category-dropdown .attribute-item.active{border-radius:var(--small-4px, 4px);background:var(--primary-500)}.custom-category-dropdown .attribute-item.active .attribute-label{color:var(--text-white, #FFF);font-weight:500}.custom-category-dropdown .category-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.custom-category-dropdown .category-item{display:flex;padding:var(--small-8px, 8px);align-items:center;gap:var(--small-8px, 8px);align-self:stretch;border-radius:var(--small-4px, 4px);background:var(--structural-white);cursor:pointer}.custom-category-dropdown .attributes-panel{flex:2;overflow-y:auto;display:flex;flex-direction:column;align-items:flex-start;gap:var(--medium-20px, 20px);align-self:stretch}.custom-category-dropdown .attribute-item{display:flex;padding:var(--small-8px, 8px) var(--small-8px, 8px);align-items:center;gap:var(--Small-4px, 4px)}.custom-checkbox-container{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:var(--small-4px, 4px)}.tooltip-icon{display:flex;align-items:center}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .custom-category-dropdown .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,::ng-deep .custom-category-dropdown .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing{border-color:var(--grey-100)}::ng-deep .custom-category-dropdown .active .tooltip-container .info-icon{color:var(--structural-white)}.custom-category-dropdown .dropdown-panel{display:flex;padding:var(--small-16px, 16px) var(--medium-20px, 20px) var(--small-16px, 16px) var(--small-12px, 12px);flex-direction:column;gap:var(--small-10px);border-radius:var(--small-8px);background:var(--structural-white);width:fit-content;max-height:25rem;box-shadow:0 1px 2px #0000004d,0 1px 2px #0000004d,0 2px 6px 2px #00000026;margin-top:0;box-sizing:border-box;position:absolute;z-index:1000;-webkit-overflow-scrolling:touch}.custom-category-container .custom-category-attribute-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.custom-category-dropdown .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"] }]
|
|
3393
3442
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }], propDecorators: { searchInput: [{
|
|
3394
3443
|
type: ViewChild,
|
|
3395
3444
|
args: ['searchInput']
|
|
@@ -3469,7 +3518,7 @@ class NgSelectComponent extends FieldType {
|
|
|
3469
3518
|
this.filteredOptions = [...this.field.props?.options];
|
|
3470
3519
|
}
|
|
3471
3520
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NgSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3472
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: NgSelectComponent, isStandalone: true, selector: "sa-ng-select", providers: [IconService], usesInheritance: true, ngImport: i0, template: "<ng-select [items]=\"filteredOptions\" [multiple]=\"props?.multiple || false\" [bindLabel]=\"props?.bindLabel || 'label'\"\n [closeOnSelect]=\"props?.closeOnselect || true\" [bindValue]=\"props?.bindValue || 'value'\"\n [placeholder]=\"props?.placeholder || 'Select'\" [searchable]=\"false\" [formControl]=\"formControl\"\n [clearable]=\"props?.isClearable\" [appearance]=\"props['appearance'] || 'outline'\" class=\"ng-select-custom\">\n\n @if(!!props?.showSearchBar){\n <ng-template ng-header-tmp>\n <div class=\"search-input-container mat-form-field-density-5\">\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\n <sa-icon icon=\"searchIcon\" class=\"searchIcons\" size=\"20\" matPrefix></sa-icon>\n <input matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input searchIcons\"\n (keyup)=\"onSearch($event)\" (keydown)=\"stopBackspacePropagation($event)\"\n [placeholder]=\"props?.searchPlaceholder || 'Search'\" [(ngModel)]=\"searchValue\" />\n <sa-icon icon=\"closeOutlined\" class=\"pointer searchIcons\" size=\"15\" matSuffix\n (click)=\"clearSearch($event)\"></sa-icon>\n </mat-form-field>\n </div>\n </ng-template>\n }\n <!-- Option template with a checkbox in front of each row -->\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\n <div class=\"option-row\">\n @if(props?.multiple){\n <input type=\"checkbox\" [checked]=\"item$.selected\" tabindex=\"-1\" />\n }\n <span class=\"option-label\">{{ item[props.bindLabel || 'label'] }}</span>\n\n </div>\n </ng-template>\n\n <!-- Selected items chip template (optional) -->\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div class=\"chips ng-values-list\">\n\n <!-- If collapsed: show only first 2 + summary -->\n <ng-container *ngIf=\"!expandedSummary\">\n @for (s of items.slice(0, 2); track s[props.bindValue || 'value']) {\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\n size=\"11\"></sa-icon></span>\n </div>\n }\n\n @if (items.length > 2) {\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\n <span class=\"ng-value-label\">+{{ items.length - 2 }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clearRemaining(items, clear)\"><sa-icon\n icon=\"closeOutlined\" size=\"11\"></sa-icon></span>\n </div>\n }\n </ng-container>\n\n <!-- If expanded: show all items -->\n <ng-container *ngIf=\"expandedSummary\">\n @for (s of items; track s[props.bindValue || 'value']) {\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\n size=\"11\"></sa-icon></span>\n </div>\n }\n <!-- Collapse button -->\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\n <sa-icon class=\"ng-value-label\" icon=\"leftChevronOutlined\"></sa-icon>\n </div>\n </ng-container>\n\n </div>\n </ng-template>\n\n @if(props?.footer){\n <ng-template ng-footer-tmp>\n <div class=\"dropdown-footer\">{{props?.footer?.description}}</div>\n </ng-template>\n }\n\n <ng-template ng-notfound-tmp>\n <div class=\"no-results\">\n @if (searchValue?.length > 0) {\n {{ \"\u274C No items match \\\"{{ searchValue }}\\\"\" || props?.searchNotFoundText}}\n } @else {\n {{ \"\u26A0\uFE0F No options available\" || props?.notFoundText}}\n }\n </div>\n </ng-template>\n\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading\">\u23F3 Loading options...</div>\n </ng-template>\n</ng-select>", styles: ["::ng-deep .ng-select-custom .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px, 2px) var(--small-12px, 12px)}.ng-select-custom .ng-values-list{display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:none;display:flex;align-items:center;font-size:var(--small-6px, 6px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{border-radius:var(--small-4px, 4px);background:var(--grey-50, #F2F4F7);display:flex;padding:var(--small-2px, 2px) var(--small-8px, 8px);justify-content:center;align-items:center;gap:var(--small-4px, 4px)}.ng-select-custom .option-row{display:flex;width:18.75rem;height:2.5rem;padding:var(--small-12px, 12px);align-items:center;gap:var(--small-8px, 8px);flex-shrink:0}::ng-deep .ng-select-custom .mdc-form-field.mat-internal-form-field{display:flex;gap:var(--small-8px, 8px);align-items:center}::ng-deep .ng-select-custom .mdc-checkbox__ripple{display:none}::ng-deep .ng-select-custom .checkbox-style{display:flex;align-items:center}.ng-select-custom .ng-option input[type=checkbox],.ng-select input[type=checkbox]{accent-color:var(--primary-500);vertical-align:middle;width:var(--small-14px, 14px);height:var(--small-14px, 14px)}::ng-deep .ng-select-custom.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:var(--primary-50)}.option-label{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}::ng-deep .ng-select-custom .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:var(--primary-50)}::ng-deep .ng-select-custom.ng-select .ng-arrow-wrapper .ng-arrow{display:none}::ng-deep .ng-select .ng-arrow-wrapper{width:var(--small-12px, 12px);height:var(--small-12px, 12px);display:flex;align-items:center;justify-content:center}::ng-deep .ng-select .ng-arrow-wrapper:after{content:\"\";display:inline-block;width:var(--small-8px, 8px);height:var(--small-12px, 12px);background:url(/assets/upDownChevronOutlined.svg) no-repeat center;background-size:contain}::ng-deep .ng-select-custom.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--primary-500);box-shadow:none}::ng-deep .ng-select-custom.ng-select .no-results{padding:.8rem}::ng-deep .ng-select-custom.ng-select .ng-select-container{padding:0rem var(--small-12px) 0rem var(--small-12px);height:1.875rem;min-height:2.438rem;border:1px solid var(--grey-100, #EAECF0)}::ng-deep .ng-select-custom.ng-select .option-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-value-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family-roboto);font-size:.688rem;font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .ng-select-custom.ng-select.ng-select-single .ng-value-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--grey-100)}.ng-select-custom .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3$1.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3$1.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i3$1.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatCheckboxModule }] }); }
|
|
3521
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: NgSelectComponent, isStandalone: true, selector: "sa-ng-select", providers: [IconService], usesInheritance: true, ngImport: i0, template: "<ng-select [items]=\"filteredOptions\" [multiple]=\"props?.multiple || false\" [bindLabel]=\"props?.bindLabel || 'label'\"\r\n [closeOnSelect]=\"props?.closeOnselect || true\" [bindValue]=\"props?.bindValue || 'value'\"\r\n [placeholder]=\"props?.placeholder || 'Select'\" [searchable]=\"false\" [formControl]=\"formControl\"\r\n [clearable]=\"props?.isClearable\" [appearance]=\"props['appearance'] || 'outline'\" class=\"ng-select-custom\">\r\n\r\n @if(!!props?.showSearchBar){\r\n <ng-template ng-header-tmp>\r\n <div class=\"search-input-container mat-form-field-density-5\">\r\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\r\n <sa-icon icon=\"searchIcon\" class=\"searchIcons\" size=\"20\" matPrefix></sa-icon>\r\n <input matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input searchIcons\"\r\n (keyup)=\"onSearch($event)\" (keydown)=\"stopBackspacePropagation($event)\"\r\n [placeholder]=\"props?.searchPlaceholder || 'Search'\" [(ngModel)]=\"searchValue\" />\r\n <sa-icon icon=\"closeOutlined\" class=\"pointer searchIcons\" size=\"15\" matSuffix\r\n (click)=\"clearSearch($event)\"></sa-icon>\r\n </mat-form-field>\r\n </div>\r\n </ng-template>\r\n }\r\n <!-- Option template with a checkbox in front of each row -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <div class=\"option-row\">\r\n @if(props?.multiple){\r\n <input type=\"checkbox\" [checked]=\"item$.selected\" tabindex=\"-1\" />\r\n }\r\n <span class=\"option-label\">{{ item[props.bindLabel || 'label'] }}</span>\r\n\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Selected items chip template (optional) -->\r\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\r\n <div class=\"chips ng-values-list\">\r\n\r\n <!-- If collapsed: show only first 2 + summary -->\r\n <ng-container *ngIf=\"!expandedSummary\">\r\n @for (s of items.slice(0, 2); track s[props.bindValue || 'value']) {\r\n <div class=\"ng-value\">\r\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\r\n size=\"11\"></sa-icon></span>\r\n </div>\r\n }\r\n\r\n @if (items.length > 2) {\r\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\r\n <span class=\"ng-value-label\">+{{ items.length - 2 }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clearRemaining(items, clear)\"><sa-icon\r\n icon=\"closeOutlined\" size=\"11\"></sa-icon></span>\r\n </div>\r\n }\r\n </ng-container>\r\n\r\n <!-- If expanded: show all items -->\r\n <ng-container *ngIf=\"expandedSummary\">\r\n @for (s of items; track s[props.bindValue || 'value']) {\r\n <div class=\"ng-value\">\r\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\r\n size=\"11\"></sa-icon></span>\r\n </div>\r\n }\r\n <!-- Collapse button -->\r\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\r\n <sa-icon class=\"ng-value-label\" icon=\"leftChevronOutlined\"></sa-icon>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-template>\r\n\r\n @if(props?.footer){\r\n <ng-template ng-footer-tmp>\r\n <div class=\"dropdown-footer\">{{props?.footer?.description}}</div>\r\n </ng-template>\r\n }\r\n\r\n <ng-template ng-notfound-tmp>\r\n <div class=\"no-results\">\r\n @if (searchValue?.length > 0) {\r\n {{ \"\u274C No items match \\\"{{ searchValue }}\\\"\" || props?.searchNotFoundText}}\r\n } @else {\r\n {{ \"\u26A0\uFE0F No options available\" || props?.notFoundText}}\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template ng-loadingtext-tmp>\r\n <div class=\"loading\">\u23F3 Loading options...</div>\r\n </ng-template>\r\n</ng-select>", styles: ["::ng-deep .ng-select-custom .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px, 2px) var(--small-12px, 12px)}.ng-select-custom .ng-values-list{display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:none;display:flex;align-items:center;font-size:var(--small-6px, 6px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{border-radius:var(--small-4px, 4px);background:var(--grey-50, #F2F4F7);display:flex;padding:var(--small-2px, 2px) var(--small-8px, 8px);justify-content:center;align-items:center;gap:var(--small-4px, 4px)}.ng-select-custom .option-row{display:flex;width:18.75rem;height:2.5rem;padding:var(--small-12px, 12px);align-items:center;gap:var(--small-8px, 8px);flex-shrink:0}::ng-deep .ng-select-custom .mdc-form-field.mat-internal-form-field{display:flex;gap:var(--small-8px, 8px);align-items:center}::ng-deep .ng-select-custom .mdc-checkbox__ripple{display:none}::ng-deep .ng-select-custom .checkbox-style{display:flex;align-items:center}.ng-select-custom .ng-option input[type=checkbox],.ng-select input[type=checkbox]{accent-color:var(--primary-500);vertical-align:middle;width:var(--small-14px, 14px);height:var(--small-14px, 14px)}::ng-deep .ng-select-custom.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:var(--primary-50)}.option-label{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}::ng-deep .ng-select-custom .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:var(--primary-50)}::ng-deep .ng-select-custom.ng-select .ng-arrow-wrapper .ng-arrow{display:none}::ng-deep .ng-select .ng-arrow-wrapper{width:var(--small-12px, 12px);height:var(--small-12px, 12px);display:flex;align-items:center;justify-content:center}::ng-deep .ng-select .ng-arrow-wrapper:after{content:\"\";display:inline-block;width:var(--small-8px, 8px);height:var(--small-12px, 12px);background:url(/assets/upDownChevronOutlined.svg) no-repeat center;background-size:contain}::ng-deep .ng-select-custom.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--primary-500);box-shadow:none}::ng-deep .ng-select-custom.ng-select .no-results{padding:.8rem}::ng-deep .ng-select-custom.ng-select .ng-select-container{padding:0rem var(--small-12px) 0rem var(--small-12px);height:1.875rem;min-height:2.438rem;border:1px solid var(--grey-100, #EAECF0)}::ng-deep .ng-select-custom.ng-select .option-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-value-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family-roboto);font-size:.688rem;font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .ng-select-custom.ng-select.ng-select-single .ng-value-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--grey-100)}.ng-select-custom .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3$1.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3$1.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3$1.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i3$1.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i3$1.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i3$1.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i3$1.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatCheckboxModule }] }); }
|
|
3473
3522
|
}
|
|
3474
3523
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: NgSelectComponent, decorators: [{
|
|
3475
3524
|
type: Component,
|
|
@@ -3489,7 +3538,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
3489
3538
|
MatDatepickerModule,
|
|
3490
3539
|
MatNativeDateModule,
|
|
3491
3540
|
MatCheckboxModule,
|
|
3492
|
-
], providers: [IconService], template: "<ng-select [items]=\"filteredOptions\" [multiple]=\"props?.multiple || false\" [bindLabel]=\"props?.bindLabel || 'label'\"\n [closeOnSelect]=\"props?.closeOnselect || true\" [bindValue]=\"props?.bindValue || 'value'\"\n [placeholder]=\"props?.placeholder || 'Select'\" [searchable]=\"false\" [formControl]=\"formControl\"\n [clearable]=\"props?.isClearable\" [appearance]=\"props['appearance'] || 'outline'\" class=\"ng-select-custom\">\n\n @if(!!props?.showSearchBar){\n <ng-template ng-header-tmp>\n <div class=\"search-input-container mat-form-field-density-5\">\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\n <sa-icon icon=\"searchIcon\" class=\"searchIcons\" size=\"20\" matPrefix></sa-icon>\n <input matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input searchIcons\"\n (keyup)=\"onSearch($event)\" (keydown)=\"stopBackspacePropagation($event)\"\n [placeholder]=\"props?.searchPlaceholder || 'Search'\" [(ngModel)]=\"searchValue\" />\n <sa-icon icon=\"closeOutlined\" class=\"pointer searchIcons\" size=\"15\" matSuffix\n (click)=\"clearSearch($event)\"></sa-icon>\n </mat-form-field>\n </div>\n </ng-template>\n }\n <!-- Option template with a checkbox in front of each row -->\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\n <div class=\"option-row\">\n @if(props?.multiple){\n <input type=\"checkbox\" [checked]=\"item$.selected\" tabindex=\"-1\" />\n }\n <span class=\"option-label\">{{ item[props.bindLabel || 'label'] }}</span>\n\n </div>\n </ng-template>\n\n <!-- Selected items chip template (optional) -->\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\n <div class=\"chips ng-values-list\">\n\n <!-- If collapsed: show only first 2 + summary -->\n <ng-container *ngIf=\"!expandedSummary\">\n @for (s of items.slice(0, 2); track s[props.bindValue || 'value']) {\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\n size=\"11\"></sa-icon></span>\n </div>\n }\n\n @if (items.length > 2) {\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\n <span class=\"ng-value-label\">+{{ items.length - 2 }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clearRemaining(items, clear)\"><sa-icon\n icon=\"closeOutlined\" size=\"11\"></sa-icon></span>\n </div>\n }\n </ng-container>\n\n <!-- If expanded: show all items -->\n <ng-container *ngIf=\"expandedSummary\">\n @for (s of items; track s[props.bindValue || 'value']) {\n <div class=\"ng-value\">\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\n size=\"11\"></sa-icon></span>\n </div>\n }\n <!-- Collapse button -->\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\n <sa-icon class=\"ng-value-label\" icon=\"leftChevronOutlined\"></sa-icon>\n </div>\n </ng-container>\n\n </div>\n </ng-template>\n\n @if(props?.footer){\n <ng-template ng-footer-tmp>\n <div class=\"dropdown-footer\">{{props?.footer?.description}}</div>\n </ng-template>\n }\n\n <ng-template ng-notfound-tmp>\n <div class=\"no-results\">\n @if (searchValue?.length > 0) {\n {{ \"\u274C No items match \\\"{{ searchValue }}\\\"\" || props?.searchNotFoundText}}\n } @else {\n {{ \"\u26A0\uFE0F No options available\" || props?.notFoundText}}\n }\n </div>\n </ng-template>\n\n <ng-template ng-loadingtext-tmp>\n <div class=\"loading\">\u23F3 Loading options...</div>\n </ng-template>\n</ng-select>", styles: ["::ng-deep .ng-select-custom .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px, 2px) var(--small-12px, 12px)}.ng-select-custom .ng-values-list{display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:none;display:flex;align-items:center;font-size:var(--small-6px, 6px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{border-radius:var(--small-4px, 4px);background:var(--grey-50, #F2F4F7);display:flex;padding:var(--small-2px, 2px) var(--small-8px, 8px);justify-content:center;align-items:center;gap:var(--small-4px, 4px)}.ng-select-custom .option-row{display:flex;width:18.75rem;height:2.5rem;padding:var(--small-12px, 12px);align-items:center;gap:var(--small-8px, 8px);flex-shrink:0}::ng-deep .ng-select-custom .mdc-form-field.mat-internal-form-field{display:flex;gap:var(--small-8px, 8px);align-items:center}::ng-deep .ng-select-custom .mdc-checkbox__ripple{display:none}::ng-deep .ng-select-custom .checkbox-style{display:flex;align-items:center}.ng-select-custom .ng-option input[type=checkbox],.ng-select input[type=checkbox]{accent-color:var(--primary-500);vertical-align:middle;width:var(--small-14px, 14px);height:var(--small-14px, 14px)}::ng-deep .ng-select-custom.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:var(--primary-50)}.option-label{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}::ng-deep .ng-select-custom .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:var(--primary-50)}::ng-deep .ng-select-custom.ng-select .ng-arrow-wrapper .ng-arrow{display:none}::ng-deep .ng-select .ng-arrow-wrapper{width:var(--small-12px, 12px);height:var(--small-12px, 12px);display:flex;align-items:center;justify-content:center}::ng-deep .ng-select .ng-arrow-wrapper:after{content:\"\";display:inline-block;width:var(--small-8px, 8px);height:var(--small-12px, 12px);background:url(/assets/upDownChevronOutlined.svg) no-repeat center;background-size:contain}::ng-deep .ng-select-custom.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--primary-500);box-shadow:none}::ng-deep .ng-select-custom.ng-select .no-results{padding:.8rem}::ng-deep .ng-select-custom.ng-select .ng-select-container{padding:0rem var(--small-12px) 0rem var(--small-12px);height:1.875rem;min-height:2.438rem;border:1px solid var(--grey-100, #EAECF0)}::ng-deep .ng-select-custom.ng-select .option-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-value-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family-roboto);font-size:.688rem;font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .ng-select-custom.ng-select.ng-select-single .ng-value-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--grey-100)}.ng-select-custom .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"] }]
|
|
3541
|
+
], providers: [IconService], template: "<ng-select [items]=\"filteredOptions\" [multiple]=\"props?.multiple || false\" [bindLabel]=\"props?.bindLabel || 'label'\"\r\n [closeOnSelect]=\"props?.closeOnselect || true\" [bindValue]=\"props?.bindValue || 'value'\"\r\n [placeholder]=\"props?.placeholder || 'Select'\" [searchable]=\"false\" [formControl]=\"formControl\"\r\n [clearable]=\"props?.isClearable\" [appearance]=\"props['appearance'] || 'outline'\" class=\"ng-select-custom\">\r\n\r\n @if(!!props?.showSearchBar){\r\n <ng-template ng-header-tmp>\r\n <div class=\"search-input-container mat-form-field-density-5\">\r\n <mat-form-field [appearance]=\"props['appearance'] || 'outline'\" class=\"w-100\">\r\n <sa-icon icon=\"searchIcon\" class=\"searchIcons\" size=\"20\" matPrefix></sa-icon>\r\n <input matInput type=\"text\" name=\"menu-search-bar\" class=\"search-input searchIcons\"\r\n (keyup)=\"onSearch($event)\" (keydown)=\"stopBackspacePropagation($event)\"\r\n [placeholder]=\"props?.searchPlaceholder || 'Search'\" [(ngModel)]=\"searchValue\" />\r\n <sa-icon icon=\"closeOutlined\" class=\"pointer searchIcons\" size=\"15\" matSuffix\r\n (click)=\"clearSearch($event)\"></sa-icon>\r\n </mat-form-field>\r\n </div>\r\n </ng-template>\r\n }\r\n <!-- Option template with a checkbox in front of each row -->\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <div class=\"option-row\">\r\n @if(props?.multiple){\r\n <input type=\"checkbox\" [checked]=\"item$.selected\" tabindex=\"-1\" />\r\n }\r\n <span class=\"option-label\">{{ item[props.bindLabel || 'label'] }}</span>\r\n\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Selected items chip template (optional) -->\r\n <ng-template ng-multi-label-tmp let-items=\"items\" let-clear=\"clear\">\r\n <div class=\"chips ng-values-list\">\r\n\r\n <!-- If collapsed: show only first 2 + summary -->\r\n <ng-container *ngIf=\"!expandedSummary\">\r\n @for (s of items.slice(0, 2); track s[props.bindValue || 'value']) {\r\n <div class=\"ng-value\">\r\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\r\n size=\"11\"></sa-icon></span>\r\n </div>\r\n }\r\n\r\n @if (items.length > 2) {\r\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\r\n <span class=\"ng-value-label\">+{{ items.length - 2 }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clearRemaining(items, clear)\"><sa-icon\r\n icon=\"closeOutlined\" size=\"11\"></sa-icon></span>\r\n </div>\r\n }\r\n </ng-container>\r\n\r\n <!-- If expanded: show all items -->\r\n <ng-container *ngIf=\"expandedSummary\">\r\n @for (s of items; track s[props.bindValue || 'value']) {\r\n <div class=\"ng-value\">\r\n <span class=\"ng-value-label\">{{ s[props.bindLabel || 'label'] }}</span>\r\n <span class=\"ng-value-icon right\" (click)=\"clear(s)\"><sa-icon icon=\"closeOutlined\"\r\n size=\"11\"></sa-icon></span>\r\n </div>\r\n }\r\n <!-- Collapse button -->\r\n <div class=\"ng-value summary-chip pointer\" (click)=\"toggleSummary()\">\r\n <sa-icon class=\"ng-value-label\" icon=\"leftChevronOutlined\"></sa-icon>\r\n </div>\r\n </ng-container>\r\n\r\n </div>\r\n </ng-template>\r\n\r\n @if(props?.footer){\r\n <ng-template ng-footer-tmp>\r\n <div class=\"dropdown-footer\">{{props?.footer?.description}}</div>\r\n </ng-template>\r\n }\r\n\r\n <ng-template ng-notfound-tmp>\r\n <div class=\"no-results\">\r\n @if (searchValue?.length > 0) {\r\n {{ \"\u274C No items match \\\"{{ searchValue }}\\\"\" || props?.searchNotFoundText}}\r\n } @else {\r\n {{ \"\u26A0\uFE0F No options available\" || props?.notFoundText}}\r\n }\r\n </div>\r\n </ng-template>\r\n\r\n <ng-template ng-loadingtext-tmp>\r\n <div class=\"loading\">\u23F3 Loading options...</div>\r\n </ng-template>\r\n</ng-select>", styles: ["::ng-deep .ng-select-custom .search-input-container .mat-mdc-form-field-has-icon-prefix .mat-mdc-text-field-wrapper{padding:var(--small-2px, 2px) var(--small-12px, 12px)}.ng-select-custom .ng-values-list{display:flex;flex-wrap:wrap;gap:var(--small-8px, 8px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value .ng-value-icon.right{border-left:none;display:flex;align-items:center;font-size:var(--small-6px, 6px)}::ng-deep .ng-select-custom.ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value{border-radius:var(--small-4px, 4px);background:var(--grey-50, #F2F4F7);display:flex;padding:var(--small-2px, 2px) var(--small-8px, 8px);justify-content:center;align-items:center;gap:var(--small-4px, 4px)}.ng-select-custom .option-row{display:flex;width:18.75rem;height:2.5rem;padding:var(--small-12px, 12px);align-items:center;gap:var(--small-8px, 8px);flex-shrink:0}::ng-deep .ng-select-custom .mdc-form-field.mat-internal-form-field{display:flex;gap:var(--small-8px, 8px);align-items:center}::ng-deep .ng-select-custom .mdc-checkbox__ripple{display:none}::ng-deep .ng-select-custom .checkbox-style{display:flex;align-items:center}.ng-select-custom .ng-option input[type=checkbox],.ng-select input[type=checkbox]{accent-color:var(--primary-500);vertical-align:middle;width:var(--small-14px, 14px);height:var(--small-14px, 14px)}::ng-deep .ng-select-custom.ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected{background-color:var(--primary-50)}.option-label{color:var(--text-high-emphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .search-input-container .mat-mdc-form-field{width:-webkit-fill-available}::ng-deep .ng-select-custom .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked{background-color:var(--primary-50)}::ng-deep .ng-select-custom.ng-select .ng-arrow-wrapper .ng-arrow{display:none}::ng-deep .ng-select .ng-arrow-wrapper{width:var(--small-12px, 12px);height:var(--small-12px, 12px);display:flex;align-items:center;justify-content:center}::ng-deep .ng-select .ng-arrow-wrapper:after{content:\"\";display:inline-block;width:var(--small-8px, 8px);height:var(--small-12px, 12px);background:url(/assets/upDownChevronOutlined.svg) no-repeat center;background-size:contain}::ng-deep .ng-select-custom.ng-select.ng-select-focused:not(.ng-select-opened)>.ng-select-container{border-color:var(--primary-500);box-shadow:none}::ng-deep .ng-select-custom.ng-select .no-results{padding:.8rem}::ng-deep .ng-select-custom.ng-select .ng-select-container{padding:0rem var(--small-12px) 0rem var(--small-12px);height:1.875rem;min-height:2.438rem;border:1px solid var(--grey-100, #EAECF0)}::ng-deep .ng-select-custom.ng-select .option-label{color:var(--text-highemphasis, #1C1B20);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-value-label{color:var(--text-mediumemphasis, #6D6979);font-family:var(--font-family-roboto);font-size:.688rem;font-style:normal;font-weight:500;line-height:var(--small-16px, 16px);letter-spacing:.5px}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border-color:var(--primary-500)}::ng-deep .ng-select-custom.ng-select .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing{border-top-left-radius:0;border-top-right-radius:var(--small-4px, 4px);border-bottom-right-radius:var(--small-4px, 4px);border-bottom-left-radius:0}::ng-deep .ng-select-custom.ng-select.ng-select-single .ng-value-label{color:var(--text-highemphasis);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}::ng-deep .ng-select-custom.ng-select .ng-select-container .ng-value-container .ng-placeholder{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:var(--small-14px, 14px);font-style:normal;font-weight:400;line-height:var(--medium-20px, 20px);letter-spacing:.25px}::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__leading,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__notch,::ng-deep .ng-select-custom .search-input-container .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--grey-100)}.ng-select-custom .searchIcons{color:var(--color-text-neutral-300, #757575)}\n"] }]
|
|
3493
3542
|
}] });
|
|
3494
3543
|
|
|
3495
3544
|
class FilterComponent {
|
|
@@ -3695,11 +3744,11 @@ class FilterComponent {
|
|
|
3695
3744
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
3696
3745
|
}
|
|
3697
3746
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FilterComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3698
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FilterComponent, isStandalone: true, selector: "sa-filter", inputs: { config: "config", filterValues: "filterValues" }, outputs: { onClickEvent: "onClickEvent", filterSelected: "filterSelected", filterRemoved: "filterRemoved", dropdownToggled: "dropdownToggled" }, viewQueries: [{ propertyName: "filterByContent", first: true, predicate: ["filterByContent"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\n\n <div class=\"filter-container\">\n <!-- Main Filter By Dropdown -->\n <div class=\"dropdown filter-by-dropdown\">\n <button class=\"dropdown-btn filter-by-btn\" [ngClass]=\"{\n 'filled-btn': config?.filterButtonStyle === 'filled',\n 'outlined-btn': config?.filterButtonStyle === 'outlined'\n }\" (click)=\"toggleDropdown($event)\">\n <span>{{config?.filterLabel}}</span>\n <sa-icon class=\"flex\" [icon]=\"'downChevronOutlined'\" [size]=\"'20'\"></sa-icon>\n </button>\n\n <div class=\"dropdown-content filter-by-content\" #filterByContent (touchstart)=\"onTouchStart($event)\"\n (touchend)=\"onTouchEnd()\">\n <div class=\"filter-section\">\n <!-- Dynamic Filter Items -->\n <div *ngFor=\"let item of config?.filterItems\" class=\"filter-item\">\n <div class=\"filter-header\" [id]=\"item.text+'Header'\" (click)=\"toggleSubmenu(item.text,$event)\">\n <span class=\"filter-label\">{{item.text}}</span>\n <sa-icon *ngIf=\"item?.subMenu?.length\" [icon]=\"'rightChevronOutlined'\"\n [size]=\"'16'\" \n [matTooltip]=\"item?.tooltip || ''\" \n matTooltipClass=\"custom-tooltip\" \n class=\"tooltip-icon d-flex\"\n [matTooltipDisabled]=\"!item?.tooltip\"></sa-icon>\n </div>\n <ng-container *ngIf=\"item?.subMenu?.length\">\n <div class=\"filter-submenu\" [id]=\"item.text+'Submenu'\">\n <div *ngFor=\"let option of item.subMenu\" class=\"filter-option\"\n [attr.data-value]=\"option.value\"\n [ngClass]=\"{'selected': isFilterOptionSelected(item.id, option.value)}\"\n (click)=\"selectFilter($event)\">\n <span>{{option.label}}</span>\n <div class=\"info-icon\" *ngIf=\"option.icon\">\n <sa-icon class=\"flex\" [icon]=\"option.icon.icon\"\n [iconPath]=\"option.icon.iconPath\" [iconUrl]=\"option.icon.iconUrl\"\n [size]=\"option.icon.size\" [customClass]=\"option.icon.customClass\"\n [matTooltip]=\"option.description || option.tooltip || option.icon.tooltip || ''\" \n matTooltipClass=\"custom-tooltip\" \n class=\"tooltip-icon d-flex\"\n [matTooltipDisabled]=\"!(option.description || option.tooltip || option.icon.tooltip)\"></sa-icon>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [".filter-container{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}.dropdown{position:relative;display:flex}.dropdown-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;border-radius:6px;cursor:pointer;transition:all .2s ease-in-out}.filled-btn{background-color:#7f56d9;color:#fff;border:none;border-radius:4px}.outlined-btn{border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}.outlined-btn:hover{background-color:#f9fafb}.filter-by-btn{padding:0 12px;height:36px;cursor:pointer;display:flex;align-items:center;flex:1 0 0;font-size:.875rem;font-weight:500;transition:all .2s ease;min-width:120px;justify-content:space-between}.filter-by-btn span{font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.filter-by-btn:active{transform:translateY(0)}.filter-by-content{position:absolute;top:100%;left:0;min-width:-webkit-fill-available;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:1000;border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);box-shadow:0 1px 2px #0000004d}.dropdown.active .filter-by-content{opacity:1;visibility:visible;transform:translateY(0)}.filter-section{padding:0rem}.filter-item{border-bottom:1px solid #f3f4f6;position:relative}.filter-item:last-child{border-bottom:none}.filter-header{padding:.75rem .6rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.filter-header:hover{background:var(--Primary-50, #F4EBFF)}.filter-label{font-weight:500;color:#374151;font-size:.875rem}.filter-arrow{transition:transform .2s ease;color:#9ca3af}.filter-item.active{background:var(--Primary-50, #F4EBFF)}.filter-submenu{position:absolute;top:0;left:100%;background:#fff;border:1px solid #e5e7eb;min-width:169px;opacity:0;visibility:hidden;transform:translate(-10px);transition:all .2s ease;z-index:1001}.filter-submenu.show-left{left:auto;right:100%;transform:translate(10px);margin-left:0;margin-right:.5rem}.filter-item.active .filter-submenu{opacity:1;visibility:visible;transform:translate(0)}.filter-item.active .filter-submenu.show-left{transform:translate(0)}.filter-option{padding:.5rem;gap:4px;display:flex;align-items:center;cursor:pointer;transition:all .2s ease;align-self:stretch}.filter-option:hover,.filter-option.selected{background:var(--Primary-50, #F4EBFF)}.filter-option span{font-size:.875rem;color:#374151;margin-right:5px}.info-icon{opacity:.6;transition:opacity .2s ease;margin-top:5px}.info-icon:hover{opacity:1}.info-icon svg{width:14px;height:14px;color:#9ca3af}.add-user-btn{background:#7c3aed;color:#fff;border:none;padding:.75rem 1rem;border-radius:.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;transition:all .2s ease}.selected-filters{background:#fff;padding:1.5rem;border-radius:.75rem;border:1px solid #e5e7eb;box-shadow:0 2px 8px #0000000d}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.container{padding:1rem}.filter-container{flex-direction:column;align-items:stretch}.filter-by-content{position:fixed;top:auto;left:1rem;right:1rem;bottom:1rem;min-width:auto;max-height:70vh;overflow-y:auto}.filter-by-btn,.add-user-btn{width:100%;justify-content:center}.filter-submenu{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;max-width:90vw;max-height:60vh;overflow-y:auto}.filter-submenu.show-left{left:50%;right:auto;transform:translate(-50%,-50%);margin:0}.filter-item.active .filter-submenu,.filter-item.active .filter-submenu.show-left{transform:translate(-50%,-50%)}}.dropdown.filter-by-dropdown.active{border-radius:4px;border:1px solid var(--Primary-500, #7F56D9);background:var(--Structural-White, #FFF)}.filter-by-content{-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3747
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: FilterComponent, isStandalone: true, selector: "sa-filter", inputs: { config: "config", filterValues: "filterValues" }, outputs: { onClickEvent: "onClickEvent", filterSelected: "filterSelected", filterRemoved: "filterRemoved", dropdownToggled: "dropdownToggled" }, viewQueries: [{ propertyName: "filterByContent", first: true, predicate: ["filterByContent"], descendants: true }], ngImport: i0, template: "<div class=\"container\">\r\n\r\n <div class=\"filter-container\">\r\n <!-- Main Filter By Dropdown -->\r\n <div class=\"dropdown filter-by-dropdown\">\r\n <button class=\"dropdown-btn filter-by-btn\" [ngClass]=\"{\r\n 'filled-btn': config?.filterButtonStyle === 'filled',\r\n 'outlined-btn': config?.filterButtonStyle === 'outlined'\r\n }\" (click)=\"toggleDropdown($event)\">\r\n <span>{{config?.filterLabel}}</span>\r\n <sa-icon class=\"flex\" [icon]=\"'downChevronOutlined'\" [size]=\"'20'\"></sa-icon>\r\n </button>\r\n\r\n <div class=\"dropdown-content filter-by-content\" #filterByContent (touchstart)=\"onTouchStart($event)\"\r\n (touchend)=\"onTouchEnd()\">\r\n <div class=\"filter-section\">\r\n <!-- Dynamic Filter Items -->\r\n <div *ngFor=\"let item of config?.filterItems\" class=\"filter-item\">\r\n <div class=\"filter-header\" [id]=\"item.text+'Header'\" (click)=\"toggleSubmenu(item.text,$event)\">\r\n <span class=\"filter-label\">{{item.text}}</span>\r\n <sa-icon *ngIf=\"item?.subMenu?.length\" [icon]=\"'rightChevronOutlined'\"\r\n [size]=\"'16'\" \r\n [matTooltip]=\"item?.tooltip || ''\" \r\n matTooltipClass=\"custom-tooltip\" \r\n class=\"tooltip-icon d-flex\"\r\n [matTooltipDisabled]=\"!item?.tooltip\"></sa-icon>\r\n </div>\r\n <ng-container *ngIf=\"item?.subMenu?.length\">\r\n <div class=\"filter-submenu\" [id]=\"item.text+'Submenu'\">\r\n <div *ngFor=\"let option of item.subMenu\" class=\"filter-option\"\r\n [attr.data-value]=\"option.value\"\r\n [ngClass]=\"{'selected': isFilterOptionSelected(item.id, option.value)}\"\r\n (click)=\"selectFilter($event)\">\r\n <span>{{option.label}}</span>\r\n <div class=\"info-icon\" *ngIf=\"option.icon\">\r\n <sa-icon class=\"flex\" [icon]=\"option.icon.icon\"\r\n [iconPath]=\"option.icon.iconPath\" [iconUrl]=\"option.icon.iconUrl\"\r\n [size]=\"option.icon.size\" [customClass]=\"option.icon.customClass\"\r\n [matTooltip]=\"option.description || option.tooltip || option.icon.tooltip || ''\" \r\n matTooltipClass=\"custom-tooltip\" \r\n class=\"tooltip-icon d-flex\"\r\n [matTooltipDisabled]=\"!(option.description || option.tooltip || option.icon.tooltip)\"></sa-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".filter-container{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}.dropdown{position:relative;display:flex}.dropdown-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;border-radius:6px;cursor:pointer;transition:all .2s ease-in-out}.filled-btn{background-color:#7f56d9;color:#fff;border:none;border-radius:4px}.outlined-btn{border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}.outlined-btn:hover{background-color:#f9fafb}.filter-by-btn{padding:0 12px;height:36px;cursor:pointer;display:flex;align-items:center;flex:1 0 0;font-size:.875rem;font-weight:500;transition:all .2s ease;min-width:120px;justify-content:space-between}.filter-by-btn span{font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.filter-by-btn:active{transform:translateY(0)}.filter-by-content{position:absolute;top:100%;left:0;min-width:-webkit-fill-available;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:1000;border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);box-shadow:0 1px 2px #0000004d}.dropdown.active .filter-by-content{opacity:1;visibility:visible;transform:translateY(0)}.filter-section{padding:0rem}.filter-item{border-bottom:1px solid #f3f4f6;position:relative}.filter-item:last-child{border-bottom:none}.filter-header{padding:.75rem .6rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.filter-header:hover{background:var(--Primary-50, #F4EBFF)}.filter-label{font-weight:500;color:#374151;font-size:.875rem}.filter-arrow{transition:transform .2s ease;color:#9ca3af}.filter-item.active{background:var(--Primary-50, #F4EBFF)}.filter-submenu{position:absolute;top:0;left:100%;background:#fff;border:1px solid #e5e7eb;min-width:169px;opacity:0;visibility:hidden;transform:translate(-10px);transition:all .2s ease;z-index:1001}.filter-submenu.show-left{left:auto;right:100%;transform:translate(10px);margin-left:0;margin-right:.5rem}.filter-item.active .filter-submenu{opacity:1;visibility:visible;transform:translate(0)}.filter-item.active .filter-submenu.show-left{transform:translate(0)}.filter-option{padding:.5rem;gap:4px;display:flex;align-items:center;cursor:pointer;transition:all .2s ease;align-self:stretch}.filter-option:hover,.filter-option.selected{background:var(--Primary-50, #F4EBFF)}.filter-option span{font-size:.875rem;color:#374151;margin-right:5px}.info-icon{opacity:.6;transition:opacity .2s ease;margin-top:5px}.info-icon:hover{opacity:1}.info-icon svg{width:14px;height:14px;color:#9ca3af}.add-user-btn{background:#7c3aed;color:#fff;border:none;padding:.75rem 1rem;border-radius:.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;transition:all .2s ease}.selected-filters{background:#fff;padding:1.5rem;border-radius:.75rem;border:1px solid #e5e7eb;box-shadow:0 2px 8px #0000000d}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.container{padding:1rem}.filter-container{flex-direction:column;align-items:stretch}.filter-by-content{position:fixed;top:auto;left:1rem;right:1rem;bottom:1rem;min-width:auto;max-height:70vh;overflow-y:auto}.filter-by-btn,.add-user-btn{width:100%;justify-content:center}.filter-submenu{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;max-width:90vw;max-height:60vh;overflow-y:auto}.filter-submenu.show-left{left:50%;right:auto;transform:translate(-50%,-50%);margin:0}.filter-item.active .filter-submenu,.filter-item.active .filter-submenu.show-left{transform:translate(-50%,-50%)}}.dropdown.filter-by-dropdown.active{border-radius:4px;border:1px solid var(--Primary-500, #7F56D9);background:var(--Structural-White, #FFF)}.filter-by-content{-webkit-overflow-scrolling:touch}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3699
3748
|
}
|
|
3700
3749
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: FilterComponent, decorators: [{
|
|
3701
3750
|
type: Component,
|
|
3702
|
-
args: [{ selector: 'sa-filter', standalone: true, imports: [CommonModule, IconComponent, HttpClientModule, MatTooltipModule], template: "<div class=\"container\">\n\n <div class=\"filter-container\">\n <!-- Main Filter By Dropdown -->\n <div class=\"dropdown filter-by-dropdown\">\n <button class=\"dropdown-btn filter-by-btn\" [ngClass]=\"{\n 'filled-btn': config?.filterButtonStyle === 'filled',\n 'outlined-btn': config?.filterButtonStyle === 'outlined'\n }\" (click)=\"toggleDropdown($event)\">\n <span>{{config?.filterLabel}}</span>\n <sa-icon class=\"flex\" [icon]=\"'downChevronOutlined'\" [size]=\"'20'\"></sa-icon>\n </button>\n\n <div class=\"dropdown-content filter-by-content\" #filterByContent (touchstart)=\"onTouchStart($event)\"\n (touchend)=\"onTouchEnd()\">\n <div class=\"filter-section\">\n <!-- Dynamic Filter Items -->\n <div *ngFor=\"let item of config?.filterItems\" class=\"filter-item\">\n <div class=\"filter-header\" [id]=\"item.text+'Header'\" (click)=\"toggleSubmenu(item.text,$event)\">\n <span class=\"filter-label\">{{item.text}}</span>\n <sa-icon *ngIf=\"item?.subMenu?.length\" [icon]=\"'rightChevronOutlined'\"\n [size]=\"'16'\" \n [matTooltip]=\"item?.tooltip || ''\" \n matTooltipClass=\"custom-tooltip\" \n class=\"tooltip-icon d-flex\"\n [matTooltipDisabled]=\"!item?.tooltip\"></sa-icon>\n </div>\n <ng-container *ngIf=\"item?.subMenu?.length\">\n <div class=\"filter-submenu\" [id]=\"item.text+'Submenu'\">\n <div *ngFor=\"let option of item.subMenu\" class=\"filter-option\"\n [attr.data-value]=\"option.value\"\n [ngClass]=\"{'selected': isFilterOptionSelected(item.id, option.value)}\"\n (click)=\"selectFilter($event)\">\n <span>{{option.label}}</span>\n <div class=\"info-icon\" *ngIf=\"option.icon\">\n <sa-icon class=\"flex\" [icon]=\"option.icon.icon\"\n [iconPath]=\"option.icon.iconPath\" [iconUrl]=\"option.icon.iconUrl\"\n [size]=\"option.icon.size\" [customClass]=\"option.icon.customClass\"\n [matTooltip]=\"option.description || option.tooltip || option.icon.tooltip || ''\" \n matTooltipClass=\"custom-tooltip\" \n class=\"tooltip-icon d-flex\"\n [matTooltipDisabled]=\"!(option.description || option.tooltip || option.icon.tooltip)\"></sa-icon>\n </div>\n </div>\n </div>\n </ng-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [".filter-container{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}.dropdown{position:relative;display:flex}.dropdown-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;border-radius:6px;cursor:pointer;transition:all .2s ease-in-out}.filled-btn{background-color:#7f56d9;color:#fff;border:none;border-radius:4px}.outlined-btn{border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}.outlined-btn:hover{background-color:#f9fafb}.filter-by-btn{padding:0 12px;height:36px;cursor:pointer;display:flex;align-items:center;flex:1 0 0;font-size:.875rem;font-weight:500;transition:all .2s ease;min-width:120px;justify-content:space-between}.filter-by-btn span{font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.filter-by-btn:active{transform:translateY(0)}.filter-by-content{position:absolute;top:100%;left:0;min-width:-webkit-fill-available;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:1000;border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);box-shadow:0 1px 2px #0000004d}.dropdown.active .filter-by-content{opacity:1;visibility:visible;transform:translateY(0)}.filter-section{padding:0rem}.filter-item{border-bottom:1px solid #f3f4f6;position:relative}.filter-item:last-child{border-bottom:none}.filter-header{padding:.75rem .6rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.filter-header:hover{background:var(--Primary-50, #F4EBFF)}.filter-label{font-weight:500;color:#374151;font-size:.875rem}.filter-arrow{transition:transform .2s ease;color:#9ca3af}.filter-item.active{background:var(--Primary-50, #F4EBFF)}.filter-submenu{position:absolute;top:0;left:100%;background:#fff;border:1px solid #e5e7eb;min-width:169px;opacity:0;visibility:hidden;transform:translate(-10px);transition:all .2s ease;z-index:1001}.filter-submenu.show-left{left:auto;right:100%;transform:translate(10px);margin-left:0;margin-right:.5rem}.filter-item.active .filter-submenu{opacity:1;visibility:visible;transform:translate(0)}.filter-item.active .filter-submenu.show-left{transform:translate(0)}.filter-option{padding:.5rem;gap:4px;display:flex;align-items:center;cursor:pointer;transition:all .2s ease;align-self:stretch}.filter-option:hover,.filter-option.selected{background:var(--Primary-50, #F4EBFF)}.filter-option span{font-size:.875rem;color:#374151;margin-right:5px}.info-icon{opacity:.6;transition:opacity .2s ease;margin-top:5px}.info-icon:hover{opacity:1}.info-icon svg{width:14px;height:14px;color:#9ca3af}.add-user-btn{background:#7c3aed;color:#fff;border:none;padding:.75rem 1rem;border-radius:.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;transition:all .2s ease}.selected-filters{background:#fff;padding:1.5rem;border-radius:.75rem;border:1px solid #e5e7eb;box-shadow:0 2px 8px #0000000d}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.container{padding:1rem}.filter-container{flex-direction:column;align-items:stretch}.filter-by-content{position:fixed;top:auto;left:1rem;right:1rem;bottom:1rem;min-width:auto;max-height:70vh;overflow-y:auto}.filter-by-btn,.add-user-btn{width:100%;justify-content:center}.filter-submenu{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;max-width:90vw;max-height:60vh;overflow-y:auto}.filter-submenu.show-left{left:50%;right:auto;transform:translate(-50%,-50%);margin:0}.filter-item.active .filter-submenu,.filter-item.active .filter-submenu.show-left{transform:translate(-50%,-50%)}}.dropdown.filter-by-dropdown.active{border-radius:4px;border:1px solid var(--Primary-500, #7F56D9);background:var(--Structural-White, #FFF)}.filter-by-content{-webkit-overflow-scrolling:touch}\n"] }]
|
|
3751
|
+
args: [{ selector: 'sa-filter', standalone: true, imports: [CommonModule, IconComponent, HttpClientModule, MatTooltipModule], template: "<div class=\"container\">\r\n\r\n <div class=\"filter-container\">\r\n <!-- Main Filter By Dropdown -->\r\n <div class=\"dropdown filter-by-dropdown\">\r\n <button class=\"dropdown-btn filter-by-btn\" [ngClass]=\"{\r\n 'filled-btn': config?.filterButtonStyle === 'filled',\r\n 'outlined-btn': config?.filterButtonStyle === 'outlined'\r\n }\" (click)=\"toggleDropdown($event)\">\r\n <span>{{config?.filterLabel}}</span>\r\n <sa-icon class=\"flex\" [icon]=\"'downChevronOutlined'\" [size]=\"'20'\"></sa-icon>\r\n </button>\r\n\r\n <div class=\"dropdown-content filter-by-content\" #filterByContent (touchstart)=\"onTouchStart($event)\"\r\n (touchend)=\"onTouchEnd()\">\r\n <div class=\"filter-section\">\r\n <!-- Dynamic Filter Items -->\r\n <div *ngFor=\"let item of config?.filterItems\" class=\"filter-item\">\r\n <div class=\"filter-header\" [id]=\"item.text+'Header'\" (click)=\"toggleSubmenu(item.text,$event)\">\r\n <span class=\"filter-label\">{{item.text}}</span>\r\n <sa-icon *ngIf=\"item?.subMenu?.length\" [icon]=\"'rightChevronOutlined'\"\r\n [size]=\"'16'\" \r\n [matTooltip]=\"item?.tooltip || ''\" \r\n matTooltipClass=\"custom-tooltip\" \r\n class=\"tooltip-icon d-flex\"\r\n [matTooltipDisabled]=\"!item?.tooltip\"></sa-icon>\r\n </div>\r\n <ng-container *ngIf=\"item?.subMenu?.length\">\r\n <div class=\"filter-submenu\" [id]=\"item.text+'Submenu'\">\r\n <div *ngFor=\"let option of item.subMenu\" class=\"filter-option\"\r\n [attr.data-value]=\"option.value\"\r\n [ngClass]=\"{'selected': isFilterOptionSelected(item.id, option.value)}\"\r\n (click)=\"selectFilter($event)\">\r\n <span>{{option.label}}</span>\r\n <div class=\"info-icon\" *ngIf=\"option.icon\">\r\n <sa-icon class=\"flex\" [icon]=\"option.icon.icon\"\r\n [iconPath]=\"option.icon.iconPath\" [iconUrl]=\"option.icon.iconUrl\"\r\n [size]=\"option.icon.size\" [customClass]=\"option.icon.customClass\"\r\n [matTooltip]=\"option.description || option.tooltip || option.icon.tooltip || ''\" \r\n matTooltipClass=\"custom-tooltip\" \r\n class=\"tooltip-icon d-flex\"\r\n [matTooltipDisabled]=\"!(option.description || option.tooltip || option.icon.tooltip)\"></sa-icon>\r\n </div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>", styles: [".filter-container{display:flex;gap:1rem;align-items:flex-start;flex-wrap:wrap}.dropdown{position:relative;display:flex}.dropdown-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;font-size:14px;border-radius:6px;cursor:pointer;transition:all .2s ease-in-out}.filled-btn{background-color:#7f56d9;color:#fff;border:none;border-radius:4px}.outlined-btn{border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF)}.outlined-btn:hover{background-color:#f9fafb}.filter-by-btn{padding:0 12px;height:36px;cursor:pointer;display:flex;align-items:center;flex:1 0 0;font-size:.875rem;font-weight:500;transition:all .2s ease;min-width:120px;justify-content:space-between}.filter-by-btn span{font-family:var(--font-family, Roboto);font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px}.filter-by-btn:active{transform:translateY(0)}.filter-by-content{position:absolute;top:100%;left:0;min-width:-webkit-fill-available;opacity:0;visibility:hidden;transform:translateY(-10px);transition:all .2s ease;z-index:1000;border-radius:4px;border:1px solid var(--Grey-100, #EAECF0);background:var(--Structural-White, #FFF);box-shadow:0 1px 2px #0000004d}.dropdown.active .filter-by-content{opacity:1;visibility:visible;transform:translateY(0)}.filter-section{padding:0rem}.filter-item{border-bottom:1px solid #f3f4f6;position:relative}.filter-item:last-child{border-bottom:none}.filter-header{padding:.75rem .6rem;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .2s ease}.filter-header:hover{background:var(--Primary-50, #F4EBFF)}.filter-label{font-weight:500;color:#374151;font-size:.875rem}.filter-arrow{transition:transform .2s ease;color:#9ca3af}.filter-item.active{background:var(--Primary-50, #F4EBFF)}.filter-submenu{position:absolute;top:0;left:100%;background:#fff;border:1px solid #e5e7eb;min-width:169px;opacity:0;visibility:hidden;transform:translate(-10px);transition:all .2s ease;z-index:1001}.filter-submenu.show-left{left:auto;right:100%;transform:translate(10px);margin-left:0;margin-right:.5rem}.filter-item.active .filter-submenu{opacity:1;visibility:visible;transform:translate(0)}.filter-item.active .filter-submenu.show-left{transform:translate(0)}.filter-option{padding:.5rem;gap:4px;display:flex;align-items:center;cursor:pointer;transition:all .2s ease;align-self:stretch}.filter-option:hover,.filter-option.selected{background:var(--Primary-50, #F4EBFF)}.filter-option span{font-size:.875rem;color:#374151;margin-right:5px}.info-icon{opacity:.6;transition:opacity .2s ease;margin-top:5px}.info-icon:hover{opacity:1}.info-icon svg{width:14px;height:14px;color:#9ca3af}.add-user-btn{background:#7c3aed;color:#fff;border:none;padding:.75rem 1rem;border-radius:.5rem;cursor:pointer;display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;transition:all .2s ease}.selected-filters{background:#fff;padding:1.5rem;border-radius:.75rem;border:1px solid #e5e7eb;box-shadow:0 2px 8px #0000000d}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@media (max-width: 768px){.container{padding:1rem}.filter-container{flex-direction:column;align-items:stretch}.filter-by-content{position:fixed;top:auto;left:1rem;right:1rem;bottom:1rem;min-width:auto;max-height:70vh;overflow-y:auto}.filter-by-btn,.add-user-btn{width:100%;justify-content:center}.filter-submenu{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;max-width:90vw;max-height:60vh;overflow-y:auto}.filter-submenu.show-left{left:50%;right:auto;transform:translate(-50%,-50%);margin:0}.filter-item.active .filter-submenu,.filter-item.active .filter-submenu.show-left{transform:translate(-50%,-50%)}}.dropdown.filter-by-dropdown.active{border-radius:4px;border:1px solid var(--Primary-500, #7F56D9);background:var(--Structural-White, #FFF)}.filter-by-content{-webkit-overflow-scrolling:touch}\n"] }]
|
|
3703
3752
|
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }], propDecorators: { config: [{
|
|
3704
3753
|
type: Input
|
|
3705
3754
|
}], filterValues: [{
|
|
@@ -3749,11 +3798,11 @@ class HeaderComponent {
|
|
|
3749
3798
|
}
|
|
3750
3799
|
}
|
|
3751
3800
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3752
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { header: "header", chipConfig: "chipConfig", info: "info", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\n <div class=\"header-content\">\n @if (header?.text || header?.html || header.icon?.iconUrl) {\n <div class=\"heading\">\n <div class=\"header-name-container\" [class.icon-left]=\"!header?.icon?.iconPosition || header?.icon?.iconPosition === 'left'\" \n [class.icon-right]=\"header?.icon?.iconPosition === 'right'\">\n @if (header.icon?.iconUrl) {\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [iconPosition]=\"header?.icon?.iconPosition\" [size]=\"header?.icon?.size || '24px'\"\n [matTooltip]=\"header?.icon?.tooltip || ''\" \n [matTooltipDisabled]=\"!header?.icon?.tooltip\" />\n }\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\n </div>\n @for(chip of chipConfig; track chip.text) {\n <div>\n <sa-chip \n [id]=\"chip.id\"\n [type]=\"chip.type\"\n [state]=\"chip.state\"\n [filling]=\"chip.filling\"\n [text]=\"chip.text\"\n [iconPosition]=\"chip.iconPosition\"\n [iconPath]=\"chip.iconPath\"\n [largeStateIcon]=\"chip.largeStateIcon\"\n [largeStateText]=\"chip.largeStateText\"\n ></sa-chip>\n </div>\n }\n </div>\n }\n <div class=\"header-info\">\n @for(item of info; track item.text) {\n <div class=\"info-item\">\n @if(item.icon) {\n <img [src]=\"item.icon\" alt=\"\">\n }\n {{item.text}}\n </div>\n }\n </div>\n </div>\n <div class=\"actions\">\n @if(buttonHelper) {\n <sa-button \n (onClickEvent)=\"onButtonClick('secondary', $event)\"\n [id]=\"buttonHelper.id\"\n [text]=\"buttonHelper.text\"\n [type]=\"buttonHelper.type\"\n [size]=\"buttonHelper.size\"\n [state]=\"buttonHelper.state\"\n [ImagePath]=\"buttonHelper.imagePath\"\n [iconPosition]=\"buttonHelper.iconPosition\"\n [href]=\"buttonHelper.href\"\n [hrefTarget]=\"buttonHelper.hrefTarget\"\n [isSubmit]=\"buttonHelper.isSubmit\">\n </sa-button>\n }\n @if(buttonMain) {\n <sa-button\n (onClickEvent)=\"onButtonClick('primary', $event)\"\n [id]=\"buttonMain.id\"\n [text]=\"buttonMain.text\"\n [type]=\"buttonMain.type\"\n [size]=\"buttonMain.size\"\n [state]=\"buttonMain.state\"\n [ImagePath]=\"buttonMain.imagePath\"\n [iconPosition]=\"buttonMain.iconPosition\"\n [href]=\"buttonMain.href\"\n [hrefTarget]=\"buttonMain.hrefTarget\"\n [isSubmit]=\"buttonMain.isSubmit\">\n </sa-button>\n }\n </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-container{display:flex;flex-direction:row;gap:var(--small-8px, 8px);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);align-items:center}.header-name-container.icon-left{flex-direction:row}.header-name-container.icon-right{flex-direction:row-reverse}.header-name-container sa-icon{line-height:0}.header-name{font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px)}::ng-deep .header-name span{color:var(--primary-500)}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}::ng-deep .header-name .custom-header{margin:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3801
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: HeaderComponent, isStandalone: true, selector: "sa-header", inputs: { header: "header", chipConfig: "chipConfig", info: "info", buttonHelper: "buttonHelper", buttonMain: "buttonMain" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"header\">\r\n <div class=\"header-content\">\r\n @if (header?.text || header?.html || header.icon?.iconUrl) {\r\n <div class=\"heading\">\r\n <div class=\"header-name-container\" [class.icon-left]=\"!header?.icon?.iconPosition || header?.icon?.iconPosition === 'left'\" \r\n [class.icon-right]=\"header?.icon?.iconPosition === 'right'\">\r\n @if (header.icon?.iconUrl) {\r\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [iconPosition]=\"header?.icon?.iconPosition\" [size]=\"header?.icon?.size || '24px'\"\r\n [matTooltip]=\"header?.icon?.tooltip || ''\" \r\n [matTooltipDisabled]=\"!header?.icon?.tooltip\" />\r\n }\r\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\r\n </div>\r\n @for(chip of chipConfig; track chip.text) {\r\n <div>\r\n <sa-chip \r\n [id]=\"chip.id\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [text]=\"chip.text\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [iconPath]=\"chip.iconPath\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\"\r\n ></sa-chip>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"header-info\">\r\n @for(item of info; track item.text) {\r\n <div class=\"info-item\">\r\n @if(item.icon) {\r\n <img [src]=\"item.icon\" alt=\"\">\r\n }\r\n {{item.text}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n @if(buttonHelper) {\r\n <sa-button \r\n (onClickEvent)=\"onButtonClick('secondary', $event)\"\r\n [id]=\"buttonHelper.id\"\r\n [text]=\"buttonHelper.text\"\r\n [type]=\"buttonHelper.type\"\r\n [size]=\"buttonHelper.size\"\r\n [state]=\"buttonHelper.state\"\r\n [ImagePath]=\"buttonHelper.imagePath\"\r\n [iconPosition]=\"buttonHelper.iconPosition\"\r\n [href]=\"buttonHelper.href\"\r\n [hrefTarget]=\"buttonHelper.hrefTarget\"\r\n [isSubmit]=\"buttonHelper.isSubmit\">\r\n </sa-button>\r\n }\r\n @if(buttonMain) {\r\n <sa-button\r\n (onClickEvent)=\"onButtonClick('primary', $event)\"\r\n [id]=\"buttonMain.id\"\r\n [text]=\"buttonMain.text\"\r\n [type]=\"buttonMain.type\"\r\n [size]=\"buttonMain.size\"\r\n [state]=\"buttonMain.state\"\r\n [ImagePath]=\"buttonMain.imagePath\"\r\n [iconPosition]=\"buttonMain.iconPosition\"\r\n [href]=\"buttonMain.href\"\r\n [hrefTarget]=\"buttonMain.hrefTarget\"\r\n [isSubmit]=\"buttonMain.isSubmit\">\r\n </sa-button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-container{display:flex;flex-direction:row;gap:var(--small-8px, 8px);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);align-items:center}.header-name-container.icon-left{flex-direction:row}.header-name-container.icon-right{flex-direction:row-reverse}.header-name-container sa-icon{line-height:0}.header-name{font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px)}::ng-deep .header-name span{color:var(--primary-500)}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}::ng-deep .header-name .custom-header{margin:0}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
|
|
3753
3802
|
}
|
|
3754
3803
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
3755
3804
|
type: Component,
|
|
3756
|
-
args: [{ selector: 'sa-header', standalone: true, imports: [IconComponent, ChipsComponent, ButtonComponent, HttpClientModule, MatTooltipModule], providers: [IconService], template: "<div class=\"header\">\n <div class=\"header-content\">\n @if (header?.text || header?.html || header.icon?.iconUrl) {\n <div class=\"heading\">\n <div class=\"header-name-container\" [class.icon-left]=\"!header?.icon?.iconPosition || header?.icon?.iconPosition === 'left'\" \n [class.icon-right]=\"header?.icon?.iconPosition === 'right'\">\n @if (header.icon?.iconUrl) {\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [iconPosition]=\"header?.icon?.iconPosition\" [size]=\"header?.icon?.size || '24px'\"\n [matTooltip]=\"header?.icon?.tooltip || ''\" \n [matTooltipDisabled]=\"!header?.icon?.tooltip\" />\n }\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\n </div>\n @for(chip of chipConfig; track chip.text) {\n <div>\n <sa-chip \n [id]=\"chip.id\"\n [type]=\"chip.type\"\n [state]=\"chip.state\"\n [filling]=\"chip.filling\"\n [text]=\"chip.text\"\n [iconPosition]=\"chip.iconPosition\"\n [iconPath]=\"chip.iconPath\"\n [largeStateIcon]=\"chip.largeStateIcon\"\n [largeStateText]=\"chip.largeStateText\"\n ></sa-chip>\n </div>\n }\n </div>\n }\n <div class=\"header-info\">\n @for(item of info; track item.text) {\n <div class=\"info-item\">\n @if(item.icon) {\n <img [src]=\"item.icon\" alt=\"\">\n }\n {{item.text}}\n </div>\n }\n </div>\n </div>\n <div class=\"actions\">\n @if(buttonHelper) {\n <sa-button \n (onClickEvent)=\"onButtonClick('secondary', $event)\"\n [id]=\"buttonHelper.id\"\n [text]=\"buttonHelper.text\"\n [type]=\"buttonHelper.type\"\n [size]=\"buttonHelper.size\"\n [state]=\"buttonHelper.state\"\n [ImagePath]=\"buttonHelper.imagePath\"\n [iconPosition]=\"buttonHelper.iconPosition\"\n [href]=\"buttonHelper.href\"\n [hrefTarget]=\"buttonHelper.hrefTarget\"\n [isSubmit]=\"buttonHelper.isSubmit\">\n </sa-button>\n }\n @if(buttonMain) {\n <sa-button\n (onClickEvent)=\"onButtonClick('primary', $event)\"\n [id]=\"buttonMain.id\"\n [text]=\"buttonMain.text\"\n [type]=\"buttonMain.type\"\n [size]=\"buttonMain.size\"\n [state]=\"buttonMain.state\"\n [ImagePath]=\"buttonMain.imagePath\"\n [iconPosition]=\"buttonMain.iconPosition\"\n [href]=\"buttonMain.href\"\n [hrefTarget]=\"buttonMain.hrefTarget\"\n [isSubmit]=\"buttonMain.isSubmit\">\n </sa-button>\n }\n </div>\n</div>\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-container{display:flex;flex-direction:row;gap:var(--small-8px, 8px);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);align-items:center}.header-name-container.icon-left{flex-direction:row}.header-name-container.icon-right{flex-direction:row-reverse}.header-name-container sa-icon{line-height:0}.header-name{font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px)}::ng-deep .header-name span{color:var(--primary-500)}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}::ng-deep .header-name .custom-header{margin:0}\n"] }]
|
|
3805
|
+
args: [{ selector: 'sa-header', standalone: true, imports: [IconComponent, ChipsComponent, ButtonComponent, HttpClientModule, MatTooltipModule], providers: [IconService], template: "<div class=\"header\">\r\n <div class=\"header-content\">\r\n @if (header?.text || header?.html || header.icon?.iconUrl) {\r\n <div class=\"heading\">\r\n <div class=\"header-name-container\" [class.icon-left]=\"!header?.icon?.iconPosition || header?.icon?.iconPosition === 'left'\" \r\n [class.icon-right]=\"header?.icon?.iconPosition === 'right'\">\r\n @if (header.icon?.iconUrl) {\r\n <sa-icon [iconUrl]=\"header?.icon?.iconUrl\" [iconPosition]=\"header?.icon?.iconPosition\" [size]=\"header?.icon?.size || '24px'\"\r\n [matTooltip]=\"header?.icon?.tooltip || ''\" \r\n [matTooltipDisabled]=\"!header?.icon?.tooltip\" />\r\n }\r\n <div class=\"header-name\" [innerHTML]=\"header?.html || header?.text\"></div>\r\n </div>\r\n @for(chip of chipConfig; track chip.text) {\r\n <div>\r\n <sa-chip \r\n [id]=\"chip.id\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [text]=\"chip.text\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [iconPath]=\"chip.iconPath\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\"\r\n ></sa-chip>\r\n </div>\r\n }\r\n </div>\r\n }\r\n <div class=\"header-info\">\r\n @for(item of info; track item.text) {\r\n <div class=\"info-item\">\r\n @if(item.icon) {\r\n <img [src]=\"item.icon\" alt=\"\">\r\n }\r\n {{item.text}}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"actions\">\r\n @if(buttonHelper) {\r\n <sa-button \r\n (onClickEvent)=\"onButtonClick('secondary', $event)\"\r\n [id]=\"buttonHelper.id\"\r\n [text]=\"buttonHelper.text\"\r\n [type]=\"buttonHelper.type\"\r\n [size]=\"buttonHelper.size\"\r\n [state]=\"buttonHelper.state\"\r\n [ImagePath]=\"buttonHelper.imagePath\"\r\n [iconPosition]=\"buttonHelper.iconPosition\"\r\n [href]=\"buttonHelper.href\"\r\n [hrefTarget]=\"buttonHelper.hrefTarget\"\r\n [isSubmit]=\"buttonHelper.isSubmit\">\r\n </sa-button>\r\n }\r\n @if(buttonMain) {\r\n <sa-button\r\n (onClickEvent)=\"onButtonClick('primary', $event)\"\r\n [id]=\"buttonMain.id\"\r\n [text]=\"buttonMain.text\"\r\n [type]=\"buttonMain.type\"\r\n [size]=\"buttonMain.size\"\r\n [state]=\"buttonMain.state\"\r\n [ImagePath]=\"buttonMain.imagePath\"\r\n [iconPosition]=\"buttonMain.iconPosition\"\r\n [href]=\"buttonMain.href\"\r\n [hrefTarget]=\"buttonMain.hrefTarget\"\r\n [isSubmit]=\"buttonMain.isSubmit\">\r\n </sa-button>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".header{width:100%;height:96px;font-family:var(--font);padding:var(--medium-20px, 20px) var(--medium-32px, 32px);display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--Structural-White, #FFF)}.header-content{display:flex;flex-direction:column;gap:var(--small-8px, 8px)}.heading{display:flex;justify-content:flex-start;align-items:center;gap:var(--small-8px, 8px)}.header-name-container{display:flex;flex-direction:row;gap:var(--small-8px, 8px);font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px);align-items:center}.header-name-container.icon-left{flex-direction:row}.header-name-container.icon-right{flex-direction:row-reverse}.header-name-container sa-icon{line-height:0}.header-name{font-size:var(--medium-22px, 22px);font-style:normal;font-weight:500;line-height:var(--medium-28px, 28px)}::ng-deep .header-name span{color:var(--primary-500)}.header-info{display:flex;gap:var(--small-12px, 12px)}.info-item{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:var(--text-mediumemphasis)}.info-item img{width:20px;height:20px}.actions{display:flex;gap:var(--small-12px, 12px)}::ng-deep .header-name .custom-header{margin:0}\n"] }]
|
|
3757
3806
|
}], ctorParameters: () => [], propDecorators: { header: [{
|
|
3758
3807
|
type: Input
|
|
3759
3808
|
}], chipConfig: [{
|
|
@@ -3779,7 +3828,7 @@ class LayoutSectionComponent {
|
|
|
3779
3828
|
}
|
|
3780
3829
|
}
|
|
3781
3830
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3782
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LayoutSectionComponent, isStandalone: true, selector: "sa-layout-section", inputs: { config: "config" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"layout-section\">\n <div class=\"layout-section__header\">\n <div class=\"layout-section__title\">\n <div class=\"header-name-container\">\n @if (config?.headerIcon?.icon) {\n <sa-icon [style.height]=\"config?.headerIcon.size || '24'\"\n [icon]=\"config?.headerIcon.icon\"\n [size]=\"config?.headerIcon.size || '24'\" />\n }\n <h2>{{ config?.headerText }}</h2>\n </div>\n @if (config?.chips?.length) {\n <div class=\"layout-section__chips\">\n @for (chip of config?.chips; track chip.id) {\n <sa-chip\n [id]=\"chip.id\"\n [text]=\"chip.text\"\n [type]=\"chip.type\"\n [state]=\"chip.state\"\n [filling]=\"chip.filling\"\n [iconPath]=\"chip.iconPath\"\n [iconPosition]=\"chip.iconPosition\"\n [largeStateIcon]=\"chip.largeStateIcon\"\n [largeStateText]=\"chip.largeStateText\">\n </sa-chip>\n }\n </div>\n }\n </div>\n <div class=\"layout-section__actions\">\n @if (config?.secondaryButton) {\n <sa-button \n [id]=\"config.secondaryButton.id\"\n [text]=\"config.secondaryButton.text\"\n [type]=\"config.secondaryButton.type\"\n [state]=\"config.secondaryButton.state\"\n [size]=\"config.secondaryButton.size\"\n [ImagePath]=\"config.secondaryButton.imagePath\"\n [icon]=\"config.secondaryButton.icon\"\n [iconPosition]=\"config.secondaryButton.iconPosition\"\n [href]=\"config.secondaryButton.href\"\n [hrefTarget]=\"config.secondaryButton.hrefTarget\"\n [width]=\"config?.secondaryButton.width\"\n [isSubmit]=\"config.secondaryButton.isSubmit\"\n [buttonIconSize]=\"config.secondaryButton.buttonIconSize\"\n [showSpinner]=\"config.secondaryButton.showSpinner\"\n (onClickEvent)=\"onButtonClick('secondary', $event)\">\n </sa-button>\n }\n @if (config?.primaryButton) {\n <sa-button\n [id]=\"config.primaryButton.id\"\n [text]=\"config.primaryButton.text\"\n [type]=\"config.primaryButton.type\"\n [state]=\"config.primaryButton.state\"\n [size]=\"config.primaryButton.size\"\n [ImagePath]=\"config.primaryButton.imagePath\"\n [icon]=\"config.primaryButton.icon\"\n [iconPosition]=\"config.primaryButton.iconPosition\"\n [href]=\"config.primaryButton.href\"\n [hrefTarget]=\"config.primaryButton.hrefTarget\"\n [width]=\"config.primaryButton.width\"\n [isSubmit]=\"config.primaryButton.isSubmit\"\n [buttonIconSize]=\"config.primaryButton.buttonIconSize\"\n [showSpinner]=\"config.primaryButton.showSpinner\"\n (onClickEvent)=\"onButtonClick('primary', $event)\">\n </sa-button>\n }\n </div>\n </div>\n \n <div class=\"layout-section__content\">\n <ng-content></ng-content>\n </div>\n</div> ", styles: [".layout-section{display:flex;padding:var(--spacing-medium-28px, 28px) var(--spacing-medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-medium-20px, 20px);border-radius:var(--border-radius-small-8px, 8px);border:1px solid var(--color-grey-100, #EAECF0);background:var(--color-structural-white, #FFF)}.layout-section__header{display:flex;width:100%;justify-content:space-between;align-items:center}.layout-section__title{display:flex;flex-direction:row;align-items:center;gap:var(--small-8px, 8px)}.layout-section__title h2{margin:0;color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px, 24px);letter-spacing:.15px}.layout-section__chips{display:flex;gap:var(--small-8px, 8px);flex-wrap:wrap}.layout-section__actions{display:flex;align-items:center;margin-left:auto;gap:var(--small-8px, 8px)}.layout-section__content{width:100%}.header-name-container{display:flex;align-items:center;gap:var(--small-8px, 8px)}.header-name-container h2{margin:0}::ng-deep .header-name-container .sa-icon{color:var(--primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: HttpClientModule }] }); }
|
|
3831
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LayoutSectionComponent, isStandalone: true, selector: "sa-layout-section", inputs: { config: "config" }, outputs: { buttonClick: "buttonClick" }, providers: [IconService], ngImport: i0, template: "<div class=\"layout-section\">\r\n <div class=\"layout-section__header\">\r\n <div class=\"layout-section__title\">\r\n <div class=\"header-name-container\">\r\n @if (config?.headerIcon?.icon) {\r\n <sa-icon [style.height]=\"config?.headerIcon.size || '24'\"\r\n [icon]=\"config?.headerIcon.icon\"\r\n [size]=\"config?.headerIcon.size || '24'\" />\r\n }\r\n <h2>{{ config?.headerText }}</h2>\r\n </div>\r\n @if (config?.chips?.length) {\r\n <div class=\"layout-section__chips\">\r\n @for (chip of config?.chips; track chip.id) {\r\n <sa-chip\r\n [id]=\"chip.id\"\r\n [text]=\"chip.text\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [iconPath]=\"chip.iconPath\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\">\r\n </sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"layout-section__actions\">\r\n @if (config?.secondaryButton) {\r\n <sa-button \r\n [id]=\"config.secondaryButton.id\"\r\n [text]=\"config.secondaryButton.text\"\r\n [type]=\"config.secondaryButton.type\"\r\n [state]=\"config.secondaryButton.state\"\r\n [size]=\"config.secondaryButton.size\"\r\n [ImagePath]=\"config.secondaryButton.imagePath\"\r\n [icon]=\"config.secondaryButton.icon\"\r\n [iconPosition]=\"config.secondaryButton.iconPosition\"\r\n [href]=\"config.secondaryButton.href\"\r\n [hrefTarget]=\"config.secondaryButton.hrefTarget\"\r\n [width]=\"config?.secondaryButton.width\"\r\n [isSubmit]=\"config.secondaryButton.isSubmit\"\r\n [buttonIconSize]=\"config.secondaryButton.buttonIconSize\"\r\n [showSpinner]=\"config.secondaryButton.showSpinner\"\r\n (onClickEvent)=\"onButtonClick('secondary', $event)\">\r\n </sa-button>\r\n }\r\n @if (config?.primaryButton) {\r\n <sa-button\r\n [id]=\"config.primaryButton.id\"\r\n [text]=\"config.primaryButton.text\"\r\n [type]=\"config.primaryButton.type\"\r\n [state]=\"config.primaryButton.state\"\r\n [size]=\"config.primaryButton.size\"\r\n [ImagePath]=\"config.primaryButton.imagePath\"\r\n [icon]=\"config.primaryButton.icon\"\r\n [iconPosition]=\"config.primaryButton.iconPosition\"\r\n [href]=\"config.primaryButton.href\"\r\n [hrefTarget]=\"config.primaryButton.hrefTarget\"\r\n [width]=\"config.primaryButton.width\"\r\n [isSubmit]=\"config.primaryButton.isSubmit\"\r\n [buttonIconSize]=\"config.primaryButton.buttonIconSize\"\r\n [showSpinner]=\"config.primaryButton.showSpinner\"\r\n (onClickEvent)=\"onButtonClick('primary', $event)\">\r\n </sa-button>\r\n }\r\n </div>\r\n </div>\r\n \r\n <div class=\"layout-section__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div> ", styles: [".layout-section{display:flex;padding:var(--spacing-medium-28px, 28px) var(--spacing-medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-medium-20px, 20px);border-radius:var(--border-radius-small-8px, 8px);border:1px solid var(--color-grey-100, #EAECF0);background:var(--color-structural-white, #FFF)}.layout-section__header{display:flex;width:100%;justify-content:space-between;align-items:center}.layout-section__title{display:flex;flex-direction:row;align-items:center;gap:var(--small-8px, 8px)}.layout-section__title h2{margin:0;color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px, 24px);letter-spacing:.15px}.layout-section__chips{display:flex;gap:var(--small-8px, 8px);flex-wrap:wrap}.layout-section__actions{display:flex;align-items:center;margin-left:auto;gap:var(--small-8px, 8px)}.layout-section__content{width:100%}.header-name-container{display:flex;align-items:center;gap:var(--small-8px, 8px)}.header-name-container h2{margin:0}::ng-deep .header-name-container .sa-icon{color:var(--primary-500)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: HttpClientModule }] }); }
|
|
3783
3832
|
}
|
|
3784
3833
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LayoutSectionComponent, decorators: [{
|
|
3785
3834
|
type: Component,
|
|
@@ -3789,7 +3838,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
3789
3838
|
ChipsComponent,
|
|
3790
3839
|
IconComponent,
|
|
3791
3840
|
HttpClientModule
|
|
3792
|
-
], providers: [IconService], standalone: true, template: "<div class=\"layout-section\">\n <div class=\"layout-section__header\">\n <div class=\"layout-section__title\">\n <div class=\"header-name-container\">\n @if (config?.headerIcon?.icon) {\n <sa-icon [style.height]=\"config?.headerIcon.size || '24'\"\n [icon]=\"config?.headerIcon.icon\"\n [size]=\"config?.headerIcon.size || '24'\" />\n }\n <h2>{{ config?.headerText }}</h2>\n </div>\n @if (config?.chips?.length) {\n <div class=\"layout-section__chips\">\n @for (chip of config?.chips; track chip.id) {\n <sa-chip\n [id]=\"chip.id\"\n [text]=\"chip.text\"\n [type]=\"chip.type\"\n [state]=\"chip.state\"\n [filling]=\"chip.filling\"\n [iconPath]=\"chip.iconPath\"\n [iconPosition]=\"chip.iconPosition\"\n [largeStateIcon]=\"chip.largeStateIcon\"\n [largeStateText]=\"chip.largeStateText\">\n </sa-chip>\n }\n </div>\n }\n </div>\n <div class=\"layout-section__actions\">\n @if (config?.secondaryButton) {\n <sa-button \n [id]=\"config.secondaryButton.id\"\n [text]=\"config.secondaryButton.text\"\n [type]=\"config.secondaryButton.type\"\n [state]=\"config.secondaryButton.state\"\n [size]=\"config.secondaryButton.size\"\n [ImagePath]=\"config.secondaryButton.imagePath\"\n [icon]=\"config.secondaryButton.icon\"\n [iconPosition]=\"config.secondaryButton.iconPosition\"\n [href]=\"config.secondaryButton.href\"\n [hrefTarget]=\"config.secondaryButton.hrefTarget\"\n [width]=\"config?.secondaryButton.width\"\n [isSubmit]=\"config.secondaryButton.isSubmit\"\n [buttonIconSize]=\"config.secondaryButton.buttonIconSize\"\n [showSpinner]=\"config.secondaryButton.showSpinner\"\n (onClickEvent)=\"onButtonClick('secondary', $event)\">\n </sa-button>\n }\n @if (config?.primaryButton) {\n <sa-button\n [id]=\"config.primaryButton.id\"\n [text]=\"config.primaryButton.text\"\n [type]=\"config.primaryButton.type\"\n [state]=\"config.primaryButton.state\"\n [size]=\"config.primaryButton.size\"\n [ImagePath]=\"config.primaryButton.imagePath\"\n [icon]=\"config.primaryButton.icon\"\n [iconPosition]=\"config.primaryButton.iconPosition\"\n [href]=\"config.primaryButton.href\"\n [hrefTarget]=\"config.primaryButton.hrefTarget\"\n [width]=\"config.primaryButton.width\"\n [isSubmit]=\"config.primaryButton.isSubmit\"\n [buttonIconSize]=\"config.primaryButton.buttonIconSize\"\n [showSpinner]=\"config.primaryButton.showSpinner\"\n (onClickEvent)=\"onButtonClick('primary', $event)\">\n </sa-button>\n }\n </div>\n </div>\n \n <div class=\"layout-section__content\">\n <ng-content></ng-content>\n </div>\n</div> ", styles: [".layout-section{display:flex;padding:var(--spacing-medium-28px, 28px) var(--spacing-medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-medium-20px, 20px);border-radius:var(--border-radius-small-8px, 8px);border:1px solid var(--color-grey-100, #EAECF0);background:var(--color-structural-white, #FFF)}.layout-section__header{display:flex;width:100%;justify-content:space-between;align-items:center}.layout-section__title{display:flex;flex-direction:row;align-items:center;gap:var(--small-8px, 8px)}.layout-section__title h2{margin:0;color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px, 24px);letter-spacing:.15px}.layout-section__chips{display:flex;gap:var(--small-8px, 8px);flex-wrap:wrap}.layout-section__actions{display:flex;align-items:center;margin-left:auto;gap:var(--small-8px, 8px)}.layout-section__content{width:100%}.header-name-container{display:flex;align-items:center;gap:var(--small-8px, 8px)}.header-name-container h2{margin:0}::ng-deep .header-name-container .sa-icon{color:var(--primary-500)}\n"] }]
|
|
3841
|
+
], providers: [IconService], standalone: true, template: "<div class=\"layout-section\">\r\n <div class=\"layout-section__header\">\r\n <div class=\"layout-section__title\">\r\n <div class=\"header-name-container\">\r\n @if (config?.headerIcon?.icon) {\r\n <sa-icon [style.height]=\"config?.headerIcon.size || '24'\"\r\n [icon]=\"config?.headerIcon.icon\"\r\n [size]=\"config?.headerIcon.size || '24'\" />\r\n }\r\n <h2>{{ config?.headerText }}</h2>\r\n </div>\r\n @if (config?.chips?.length) {\r\n <div class=\"layout-section__chips\">\r\n @for (chip of config?.chips; track chip.id) {\r\n <sa-chip\r\n [id]=\"chip.id\"\r\n [text]=\"chip.text\"\r\n [type]=\"chip.type\"\r\n [state]=\"chip.state\"\r\n [filling]=\"chip.filling\"\r\n [iconPath]=\"chip.iconPath\"\r\n [iconPosition]=\"chip.iconPosition\"\r\n [largeStateIcon]=\"chip.largeStateIcon\"\r\n [largeStateText]=\"chip.largeStateText\">\r\n </sa-chip>\r\n }\r\n </div>\r\n }\r\n </div>\r\n <div class=\"layout-section__actions\">\r\n @if (config?.secondaryButton) {\r\n <sa-button \r\n [id]=\"config.secondaryButton.id\"\r\n [text]=\"config.secondaryButton.text\"\r\n [type]=\"config.secondaryButton.type\"\r\n [state]=\"config.secondaryButton.state\"\r\n [size]=\"config.secondaryButton.size\"\r\n [ImagePath]=\"config.secondaryButton.imagePath\"\r\n [icon]=\"config.secondaryButton.icon\"\r\n [iconPosition]=\"config.secondaryButton.iconPosition\"\r\n [href]=\"config.secondaryButton.href\"\r\n [hrefTarget]=\"config.secondaryButton.hrefTarget\"\r\n [width]=\"config?.secondaryButton.width\"\r\n [isSubmit]=\"config.secondaryButton.isSubmit\"\r\n [buttonIconSize]=\"config.secondaryButton.buttonIconSize\"\r\n [showSpinner]=\"config.secondaryButton.showSpinner\"\r\n (onClickEvent)=\"onButtonClick('secondary', $event)\">\r\n </sa-button>\r\n }\r\n @if (config?.primaryButton) {\r\n <sa-button\r\n [id]=\"config.primaryButton.id\"\r\n [text]=\"config.primaryButton.text\"\r\n [type]=\"config.primaryButton.type\"\r\n [state]=\"config.primaryButton.state\"\r\n [size]=\"config.primaryButton.size\"\r\n [ImagePath]=\"config.primaryButton.imagePath\"\r\n [icon]=\"config.primaryButton.icon\"\r\n [iconPosition]=\"config.primaryButton.iconPosition\"\r\n [href]=\"config.primaryButton.href\"\r\n [hrefTarget]=\"config.primaryButton.hrefTarget\"\r\n [width]=\"config.primaryButton.width\"\r\n [isSubmit]=\"config.primaryButton.isSubmit\"\r\n [buttonIconSize]=\"config.primaryButton.buttonIconSize\"\r\n [showSpinner]=\"config.primaryButton.showSpinner\"\r\n (onClickEvent)=\"onButtonClick('primary', $event)\">\r\n </sa-button>\r\n }\r\n </div>\r\n </div>\r\n \r\n <div class=\"layout-section__content\">\r\n <ng-content></ng-content>\r\n </div>\r\n</div> ", styles: [".layout-section{display:flex;padding:var(--spacing-medium-28px, 28px) var(--spacing-medium-20px, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-medium-20px, 20px);border-radius:var(--border-radius-small-8px, 8px);border:1px solid var(--color-grey-100, #EAECF0);background:var(--color-structural-white, #FFF)}.layout-section__header{display:flex;width:100%;justify-content:space-between;align-items:center}.layout-section__title{display:flex;flex-direction:row;align-items:center;gap:var(--small-8px, 8px)}.layout-section__title h2{margin:0;color:var(--text-highemphasis, #1C1B20);font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:600;line-height:var(--medium-24px, 24px);letter-spacing:.15px}.layout-section__chips{display:flex;gap:var(--small-8px, 8px);flex-wrap:wrap}.layout-section__actions{display:flex;align-items:center;margin-left:auto;gap:var(--small-8px, 8px)}.layout-section__content{width:100%}.header-name-container{display:flex;align-items:center;gap:var(--small-8px, 8px)}.header-name-container h2{margin:0}::ng-deep .header-name-container .sa-icon{color:var(--primary-500)}\n"] }]
|
|
3793
3842
|
}], propDecorators: { config: [{
|
|
3794
3843
|
type: Input
|
|
3795
3844
|
}], buttonClick: [{
|
|
@@ -3806,26 +3855,26 @@ class StatusDotComponent {
|
|
|
3806
3855
|
};
|
|
3807
3856
|
}
|
|
3808
3857
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StatusDotComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3809
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StatusDotComponent, isStandalone: true, selector: "sa-status-dot", inputs: { config: "config" }, ngImport: i0, template: `
|
|
3810
|
-
<div [matTooltip]="config.tooltip"
|
|
3811
|
-
class="status-dot"
|
|
3812
|
-
[class]="config.status"
|
|
3813
|
-
[class.outline]="config.theme === 'outline'"
|
|
3814
|
-
[style.width.px]="config.size"
|
|
3815
|
-
[style.height.px]="config.size">
|
|
3816
|
-
</div>
|
|
3858
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StatusDotComponent, isStandalone: true, selector: "sa-status-dot", inputs: { config: "config" }, ngImport: i0, template: `
|
|
3859
|
+
<div [matTooltip]="config.tooltip"
|
|
3860
|
+
class="status-dot"
|
|
3861
|
+
[class]="config.status"
|
|
3862
|
+
[class.outline]="config.theme === 'outline'"
|
|
3863
|
+
[style.width.px]="config.size"
|
|
3864
|
+
[style.height.px]="config.size">
|
|
3865
|
+
</div>
|
|
3817
3866
|
`, isInline: true, styles: [":host{display:inline-block}.status-dot{border-radius:50%;display:inline-block;cursor:pointer}.primary{background-color:var(--primary-500, #007bff);border:2px solid var(--primary-500, #007bff)}.secondary{background-color:var(--secondary-500, #6c757d);border:2px solid var(--secondary-500, #6c757d)}.success{background-color:var(--semantic-success-500, #33961F);border:2px solid var(--semantic-success-500, #33961F)}.error{background-color:var(--semantic-error-500, #dc3545);border:2px solid var(--semantic-error-500, #dc3545)}.warning{background-color:var(--semantic-yellow-600, #DC9408);border:2px solid var(--semantic-yellow-600, #DC9408)}.outline{background-color:transparent!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3818
3867
|
}
|
|
3819
3868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StatusDotComponent, decorators: [{
|
|
3820
3869
|
type: Component,
|
|
3821
|
-
args: [{ selector: 'sa-status-dot', standalone: true, imports: [CommonModule, MatTooltipModule], template: `
|
|
3822
|
-
<div [matTooltip]="config.tooltip"
|
|
3823
|
-
class="status-dot"
|
|
3824
|
-
[class]="config.status"
|
|
3825
|
-
[class.outline]="config.theme === 'outline'"
|
|
3826
|
-
[style.width.px]="config.size"
|
|
3827
|
-
[style.height.px]="config.size">
|
|
3828
|
-
</div>
|
|
3870
|
+
args: [{ selector: 'sa-status-dot', standalone: true, imports: [CommonModule, MatTooltipModule], template: `
|
|
3871
|
+
<div [matTooltip]="config.tooltip"
|
|
3872
|
+
class="status-dot"
|
|
3873
|
+
[class]="config.status"
|
|
3874
|
+
[class.outline]="config.theme === 'outline'"
|
|
3875
|
+
[style.width.px]="config.size"
|
|
3876
|
+
[style.height.px]="config.size">
|
|
3877
|
+
</div>
|
|
3829
3878
|
`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block}.status-dot{border-radius:50%;display:inline-block;cursor:pointer}.primary{background-color:var(--primary-500, #007bff);border:2px solid var(--primary-500, #007bff)}.secondary{background-color:var(--secondary-500, #6c757d);border:2px solid var(--secondary-500, #6c757d)}.success{background-color:var(--semantic-success-500, #33961F);border:2px solid var(--semantic-success-500, #33961F)}.error{background-color:var(--semantic-error-500, #dc3545);border:2px solid var(--semantic-error-500, #dc3545)}.warning{background-color:var(--semantic-yellow-600, #DC9408);border:2px solid var(--semantic-yellow-600, #DC9408)}.outline{background-color:transparent!important}\n"] }]
|
|
3830
3879
|
}], propDecorators: { config: [{
|
|
3831
3880
|
type: Input
|
|
@@ -3847,13 +3896,13 @@ class SAMenuItemComponent {
|
|
|
3847
3896
|
this.onEvent.emit({ type: 'click', item });
|
|
3848
3897
|
}
|
|
3849
3898
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3850
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuItemComponent, isStandalone: true, selector: "sa-menu-item", inputs: { item: "item", showRound: "showRound" }, outputs: { onEvent: "onEvent" }, providers: [IconService], viewQueries: [{ propertyName: "menuDirective", first: true, predicate: i0.forwardRef(() => MenuDirective), descendants: true }], ngImport: i0, template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\n <span>{{item.label}}</span>\n</div> -->\n\n<div class=\"section-item {{item?.sepratorPosition}}\" [ngStyle]=\"{ 'border-radius': showRound ? '5px' : '0' }\" [ngClass]=\"item.isSelected ? 'selected' : ''\" (click)=\"optionClicked(item)\">\n <div class=\"status {{item['className']}}\" [saMenu]=\"item?.subMenu\">\n <sa-status-dot *ngIf=\"item.statusDot\" [config]=\"item?.statusDot\"></sa-status-dot>\n <sa-icon class=\"flex\" *ngIf=\"item.icon\" [icon]=\"item?.icon?.icon\" [iconPath]=\"item['icon']?.iconPath\" [iconUrl]=\"item['icon']?.iconUrl\" [size]=\"item['icon']?.size\" [customClass]=\"item['icon']?.customClass\"></sa-icon>\n <span class=\"sa-groupItem-lable\" >{{item.label}}</span>\n <div *ngIf=\"item?.subMenu\" class=\"flex ml-auto\">\n <sa-icon [icon]=\"'rightChevronOutlined'\" class=\"flex\" [size]=\"'20'\"></sa-icon>\n </div>\n </div>\n <!-- Section for showing chips if chips are available in object -->\n <div *ngIf=\"item.chips\" class=\"tags\">\n @for (itm of item.chips; track $index) {\n <sa-chip *ngIf=\"itm.text\" [type]=\"itm.type\" [state]=\"itm.state\" [filling]=\"itm.filling\"\n [text]=\"itm.text\"></sa-chip>\n <!-- <span [ngClass]=\"itm.status == 'active' ? 'tag-active' : 'tag-inactive'\" class=\"\">{{itm.label}}</span> -->\n }\n </div>\n</div>\n", styles: [".sa-menu-item{padding:12px}.sa-menu-item:hover{background-color:var(--primary-500)}.sa-menu-item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.sa-menu-item:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.section-item{display:flex;justify-content:space-between;align-items:center}.section-item .status{padding:.75rem}.section-item:hover{background-color:var(--primary-500)}.section-item:hover span{font-weight:500}.selected{background-color:var(--primary-500)}.section-item .tags{display:flex;gap:.25rem}.tag{background-color:#6b46c1;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-active{background-color:#6b46c1!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-inactive{background-color:#d27f2b!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.status{display:flex;align-items:center;gap:.6rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%}.status-active{background-color:#48bb78}.status-inactive{background-color:#f19e4f}hr{border:0;border-top:1px solid #718096;margin-bottom:1rem}.sa-groupItem-lable{cursor:pointer;font-size:14px;font-weight:400}.flex{display:flex}.top{border-top:1px solid #475467}.bottom{border-bottom:1px solid #475467}.ml-auto{margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => ChipsComponent), selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: i0.forwardRef(() => HttpClientModule) }, { kind: "component", type: i0.forwardRef(() => IconComponent), selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: i0.forwardRef(() => StatusDotComponent), selector: "sa-status-dot", inputs: ["config"] }, { kind: "directive", type: i0.forwardRef(() => MenuDirective), selector: "[saMenu]", inputs: ["saMenuRef", "saMenu", "saManuPosition"], outputs: ["onMenuEvent", "onEvent", "onAttached", "onDetached"] }] }); }
|
|
3899
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuItemComponent, isStandalone: true, selector: "sa-menu-item", inputs: { item: "item", showRound: "showRound" }, outputs: { onEvent: "onEvent" }, providers: [IconService], viewQueries: [{ propertyName: "menuDirective", first: true, predicate: i0.forwardRef(() => MenuDirective), descendants: true }], ngImport: i0, template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\r\n <span>{{item.label}}</span>\r\n</div> -->\r\n\r\n<div class=\"section-item {{item?.sepratorPosition}}\" [ngStyle]=\"{ 'border-radius': showRound ? '5px' : '0' }\" [ngClass]=\"item.isSelected ? 'selected' : ''\" (click)=\"optionClicked(item)\">\r\n <div class=\"status {{item['className']}}\" [saMenu]=\"item?.subMenu\">\r\n <sa-status-dot *ngIf=\"item.statusDot\" [config]=\"item?.statusDot\"></sa-status-dot>\r\n <sa-icon class=\"flex\" *ngIf=\"item.icon\" [icon]=\"item?.icon?.icon\" [iconPath]=\"item['icon']?.iconPath\" [iconUrl]=\"item['icon']?.iconUrl\" [size]=\"item['icon']?.size\" [customClass]=\"item['icon']?.customClass\"></sa-icon>\r\n <span class=\"sa-groupItem-lable\" >{{item.label}}</span>\r\n <div *ngIf=\"item?.subMenu\" class=\"flex ml-auto\">\r\n <sa-icon [icon]=\"'rightChevronOutlined'\" class=\"flex\" [size]=\"'20'\"></sa-icon>\r\n </div>\r\n </div>\r\n <!-- Section for showing chips if chips are available in object -->\r\n <div *ngIf=\"item.chips\" class=\"tags\">\r\n @for (itm of item.chips; track $index) {\r\n <sa-chip *ngIf=\"itm.text\" [type]=\"itm.type\" [state]=\"itm.state\" [filling]=\"itm.filling\"\r\n [text]=\"itm.text\"></sa-chip>\r\n <!-- <span [ngClass]=\"itm.status == 'active' ? 'tag-active' : 'tag-inactive'\" class=\"\">{{itm.label}}</span> -->\r\n }\r\n </div>\r\n</div>\r\n", styles: [".sa-menu-item{padding:12px}.sa-menu-item:hover{background-color:var(--primary-500)}.sa-menu-item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.sa-menu-item:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.section-item{display:flex;justify-content:space-between;align-items:center}.section-item .status{padding:.75rem}.section-item:hover{background-color:var(--primary-500)}.section-item:hover span{font-weight:500}.selected{background-color:var(--primary-500)}.section-item .tags{display:flex;gap:.25rem}.tag{background-color:#6b46c1;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-active{background-color:#6b46c1!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-inactive{background-color:#d27f2b!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.status{display:flex;align-items:center;gap:.6rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%}.status-active{background-color:#48bb78}.status-inactive{background-color:#f19e4f}hr{border:0;border-top:1px solid #718096;margin-bottom:1rem}.sa-groupItem-lable{cursor:pointer;font-size:14px;font-weight:400}.flex{display:flex}.top{border-top:1px solid #475467}.bottom{border-bottom:1px solid #475467}.ml-auto{margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: i0.forwardRef(() => CommonModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgIf), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.NgStyle), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(() => ChipsComponent), selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: i0.forwardRef(() => HttpClientModule) }, { kind: "component", type: i0.forwardRef(() => IconComponent), selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: i0.forwardRef(() => StatusDotComponent), selector: "sa-status-dot", inputs: ["config"] }, { kind: "directive", type: i0.forwardRef(() => MenuDirective), selector: "[saMenu]", inputs: ["saMenuRef", "saMenu", "saManuPosition"], outputs: ["onMenuEvent", "onEvent", "onAttached", "onDetached"] }] }); }
|
|
3851
3900
|
}
|
|
3852
3901
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuItemComponent, decorators: [{
|
|
3853
3902
|
type: Component,
|
|
3854
3903
|
args: [{ selector: 'sa-menu-item', standalone: true, imports: [CommonModule, ChipsComponent, HttpClientModule, IconComponent, StatusDotComponent,
|
|
3855
3904
|
forwardRef(() => MenuDirective)
|
|
3856
|
-
], providers: [IconService], template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\n <span>{{item.label}}</span>\n</div> -->\n\n<div class=\"section-item {{item?.sepratorPosition}}\" [ngStyle]=\"{ 'border-radius': showRound ? '5px' : '0' }\" [ngClass]=\"item.isSelected ? 'selected' : ''\" (click)=\"optionClicked(item)\">\n <div class=\"status {{item['className']}}\" [saMenu]=\"item?.subMenu\">\n <sa-status-dot *ngIf=\"item.statusDot\" [config]=\"item?.statusDot\"></sa-status-dot>\n <sa-icon class=\"flex\" *ngIf=\"item.icon\" [icon]=\"item?.icon?.icon\" [iconPath]=\"item['icon']?.iconPath\" [iconUrl]=\"item['icon']?.iconUrl\" [size]=\"item['icon']?.size\" [customClass]=\"item['icon']?.customClass\"></sa-icon>\n <span class=\"sa-groupItem-lable\" >{{item.label}}</span>\n <div *ngIf=\"item?.subMenu\" class=\"flex ml-auto\">\n <sa-icon [icon]=\"'rightChevronOutlined'\" class=\"flex\" [size]=\"'20'\"></sa-icon>\n </div>\n </div>\n <!-- Section for showing chips if chips are available in object -->\n <div *ngIf=\"item.chips\" class=\"tags\">\n @for (itm of item.chips; track $index) {\n <sa-chip *ngIf=\"itm.text\" [type]=\"itm.type\" [state]=\"itm.state\" [filling]=\"itm.filling\"\n [text]=\"itm.text\"></sa-chip>\n <!-- <span [ngClass]=\"itm.status == 'active' ? 'tag-active' : 'tag-inactive'\" class=\"\">{{itm.label}}</span> -->\n }\n </div>\n</div>\n", styles: [".sa-menu-item{padding:12px}.sa-menu-item:hover{background-color:var(--primary-500)}.sa-menu-item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.sa-menu-item:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.section-item{display:flex;justify-content:space-between;align-items:center}.section-item .status{padding:.75rem}.section-item:hover{background-color:var(--primary-500)}.section-item:hover span{font-weight:500}.selected{background-color:var(--primary-500)}.section-item .tags{display:flex;gap:.25rem}.tag{background-color:#6b46c1;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-active{background-color:#6b46c1!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-inactive{background-color:#d27f2b!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.status{display:flex;align-items:center;gap:.6rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%}.status-active{background-color:#48bb78}.status-inactive{background-color:#f19e4f}hr{border:0;border-top:1px solid #718096;margin-bottom:1rem}.sa-groupItem-lable{cursor:pointer;font-size:14px;font-weight:400}.flex{display:flex}.top{border-top:1px solid #475467}.bottom{border-bottom:1px solid #475467}.ml-auto{margin-left:auto}\n"] }]
|
|
3905
|
+
], providers: [IconService], template: "<!-- <div mat-menu-item class=\"sa-menu-item\">\r\n <span>{{item.label}}</span>\r\n</div> -->\r\n\r\n<div class=\"section-item {{item?.sepratorPosition}}\" [ngStyle]=\"{ 'border-radius': showRound ? '5px' : '0' }\" [ngClass]=\"item.isSelected ? 'selected' : ''\" (click)=\"optionClicked(item)\">\r\n <div class=\"status {{item['className']}}\" [saMenu]=\"item?.subMenu\">\r\n <sa-status-dot *ngIf=\"item.statusDot\" [config]=\"item?.statusDot\"></sa-status-dot>\r\n <sa-icon class=\"flex\" *ngIf=\"item.icon\" [icon]=\"item?.icon?.icon\" [iconPath]=\"item['icon']?.iconPath\" [iconUrl]=\"item['icon']?.iconUrl\" [size]=\"item['icon']?.size\" [customClass]=\"item['icon']?.customClass\"></sa-icon>\r\n <span class=\"sa-groupItem-lable\" >{{item.label}}</span>\r\n <div *ngIf=\"item?.subMenu\" class=\"flex ml-auto\">\r\n <sa-icon [icon]=\"'rightChevronOutlined'\" class=\"flex\" [size]=\"'20'\"></sa-icon>\r\n </div>\r\n </div>\r\n <!-- Section for showing chips if chips are available in object -->\r\n <div *ngIf=\"item.chips\" class=\"tags\">\r\n @for (itm of item.chips; track $index) {\r\n <sa-chip *ngIf=\"itm.text\" [type]=\"itm.type\" [state]=\"itm.state\" [filling]=\"itm.filling\"\r\n [text]=\"itm.text\"></sa-chip>\r\n <!-- <span [ngClass]=\"itm.status == 'active' ? 'tag-active' : 'tag-inactive'\" class=\"\">{{itm.label}}</span> -->\r\n }\r\n </div>\r\n</div>\r\n", styles: [".sa-menu-item{padding:12px}.sa-menu-item:hover{background-color:var(--primary-500)}.sa-menu-item:first-child{border-top-left-radius:8px;border-top-right-radius:8px}.sa-menu-item:last-child{border-bottom-left-radius:8px;border-bottom-right-radius:8px}.section-item{display:flex;justify-content:space-between;align-items:center}.section-item .status{padding:.75rem}.section-item:hover{background-color:var(--primary-500)}.section-item:hover span{font-weight:500}.selected{background-color:var(--primary-500)}.section-item .tags{display:flex;gap:.25rem}.tag{background-color:#6b46c1;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-active{background-color:#6b46c1!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.tag-inactive{background-color:#d27f2b!important;font-size:.2rem;padding:.25rem .5rem;border-radius:.25rem}.status{display:flex;align-items:center;gap:.6rem}.status-dot{width:.5rem;height:.5rem;border-radius:50%}.status-active{background-color:#48bb78}.status-inactive{background-color:#f19e4f}hr{border:0;border-top:1px solid #718096;margin-bottom:1rem}.sa-groupItem-lable{cursor:pointer;font-size:14px;font-weight:400}.flex{display:flex}.top{border-top:1px solid #475467}.bottom{border-bottom:1px solid #475467}.ml-auto{margin-left:auto}\n"] }]
|
|
3857
3906
|
}], propDecorators: { item: [{
|
|
3858
3907
|
type: Input,
|
|
3859
3908
|
args: ['item']
|
|
@@ -3929,7 +3978,7 @@ class SAMenuComponent {
|
|
|
3929
3978
|
this.onEvent.emit({ type: 'TAB_CLICK', activeTab: tabname, menu: this.menu });
|
|
3930
3979
|
}
|
|
3931
3980
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, deps: [{ token: i1$4.Overlay }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3932
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuComponent, isStandalone: true, selector: "sa-menu", inputs: { position: "position", menu: "menu", hostEl: "hostEl" }, outputs: { onEvent: "onEvent", onKeyUpEvent: "onKeyUpEvent", closeEvent: "closeEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\n [ngStyle]=\"{width: menu.width || 'max-content'}\">\n @if(menu?.title){\n <div class=\"sa-menu-title\">\n <h1>{{menu?.title}}</h1>\n <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" color=\"var(--grey-200, #D0D5DD)\" class=\"sa-menu-close-icon\"\n (click)=\"closeEvent.emit($event)\"></sa-icon>\n </div>\n }\n\n <!-- @if(menu?.itemGroups && menu.itemGroups.length){\n @for (groupItem of menu.itemGroups; track groupItem) {\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n \n @for (item of groupItem.items; track $index) {\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n }\n } @else if(menu?.items && menu.items.length){\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n } -->\n\n\n <!-- Tab Content or Item Groups -->\n <div class=\"sa-menu-content\">\n <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\n @if(menu?.showSearch){\n <div class=\"search-container\">\n <sa-icon icon=\"search\"></sa-icon>\n <input name=\"menu-search-bar\" class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\" \n />\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\n </div>\n }\n \n <!-- Tabs -->\n @if(menu?.tabs){\n <div class=\"sa-menu-tabs\">\n <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\n (click)=\"setActiveTab(i,tab.label)\">\n {{ tab.label }}\n <!-- ({{ tab.itemGroups.length }}) -->\n </button>\n </div>\n }\n <!-- Tabs End -->\n\n @if(menu?.tabs?.length){\n @if(menu.tabs[activeTabIndex]?.itemGroups?.length){\n <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n <ng-container *ngFor=\"let item of groupItem.items\">\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n </ng-container>\n </div>\n </ng-container>\n }\n } @else if(menu?.itemGroups?.length){\n <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n <ng-container *ngFor=\"let item of groupItem.items\">\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n </ng-container>\n </div>\n </ng-container>\n }\n </div>\n </div>\n\n @if(menu?.items && menu?.items?.length){\n <div *ngIf=\"menu?.user\" class=\"profile-badge\">\n <div class=\"avatar\">\n <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\n </div>\n <div class=\"profile-info\">\n <p class=\"profile-name\">{{menu?.user?.name}}</p>\n <p class=\"profile-email\">{{menu?.user?.email}}</p>\n </div>\n </div>\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\n }\n </div>\n }\n\n</div>", styles: [".sa-menu{background-color:var(--primary-800);box-shadow:3px 4px 16px 4px #00000014;width:max-content;border-radius:5px;overflow-y:auto;max-height:100%}.sa-round-border{border-radius:8px}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--grey-700, #1D2939);padding:0 1rem 1rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sa-menu-tray::-webkit-scrollbar{width:6px}.sa-menu-tray::-webkit-scrollbar-track{background:transparent}.sa-menu-tray::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}sa-menu-item{cursor:pointer;display:block;color:var(--grey-100, #EAECF0)}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;position:fixed;padding:1rem 0 .5rem;height:64px;width:calc(100% - 2rem);border-bottom:1px solid var(--primary-50, #F4EBFF);background:var(--grey-700, #1D2939);z-index:1}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;margin-bottom:0;margin-top:0}.sa-menu-close-icon{cursor:pointer;margin-left:auto;height:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem;margin-top:4.75rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;border-radius:4px;color:var(--grey-200, #D0D5DD);border:1px solid var(--grey-900, #0C111D);background:var(--grey-900, #0C111D);box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--grey-400, #475467)}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--grey-300, #D0D5DD);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}.MenuBar{width:max-content;margin-top:8px;background-color:var(--grey-400);border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:0}.sa-menu-tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:1rem}.sa-menu-tabs button{flex:1;padding:.5rem 1rem;background:none;border:none;cursor:pointer;font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#888;border-bottom:2px solid transparent;transition:all .5s ease}.sa-menu-tabs button.active{color:#f7f3f3;border-bottom:2px solid #f7f7f7;font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.sa-menu-content{padding:0rem 0}.sa-menu-content-inner{padding-top:0}.sa-menu-content .sa-menu-content-with-search,.sa-menu-content-with-search.sa-menu-content-inner{padding:0}.features-tray-menu .sa-menu-content-inner{padding-top:5rem}.features-tray-menu .sa-menu-content-with-search.sa-menu-content-inner{padding-top:0}.sa-menu-group h2{margin-top:1rem}.sa-menu-group:first-child h2{margin-top:0}.sa-menu-group{margin-bottom:1rem}.profile-badge{display:flex;align-items:center;gap:8px;padding:12px;width:100%;border-bottom:1px solid var(--grey-400)}.avatar{display:flex;justify-content:center;align-items:center}.profile-info{display:flex;flex-direction:column;justify-content:center;font-weight:300}.profile-name{color:var(--structural-white);font-weight:500;font-size:12px;line-height:1.2;margin:0}.profile-email{color:var(--grey-200);font-size:11px;line-height:1.2;font-weight:400;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SAMenuItemComponent, selector: "sa-menu-item", inputs: ["item", "showRound"], outputs: ["onEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
3981
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SAMenuComponent, isStandalone: true, selector: "sa-menu", inputs: { position: "position", menu: "menu", hostEl: "hostEl" }, outputs: { onEvent: "onEvent", onKeyUpEvent: "onKeyUpEvent", closeEvent: "closeEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\r\n [ngStyle]=\"{width: menu.width || 'max-content'}\">\r\n @if(menu?.title){\r\n <div class=\"sa-menu-title\">\r\n <h1>{{menu?.title}}</h1>\r\n <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" color=\"var(--grey-200, #D0D5DD)\" class=\"sa-menu-close-icon\"\r\n (click)=\"closeEvent.emit($event)\"></sa-icon>\r\n </div>\r\n }\r\n\r\n <!-- @if(menu?.itemGroups && menu.itemGroups.length){\r\n @for (groupItem of menu.itemGroups; track groupItem) {\r\n <div class=\"sa-menu-group\">\r\n <h2>{{groupItem.groupTitle}}</h2>\r\n \r\n @for (item of groupItem.items; track $index) {\r\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n }\r\n </div>\r\n }\r\n } @else if(menu?.items && menu.items.length){\r\n <div class=\"sa-menu-items\">\r\n @for (item of menu.items; track item) {\r\n <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n }\r\n </div>\r\n } -->\r\n\r\n\r\n <!-- Tab Content or Item Groups -->\r\n <div class=\"sa-menu-content\">\r\n <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\r\n @if(menu?.showSearch){\r\n <div class=\"search-container\">\r\n <sa-icon icon=\"search\"></sa-icon>\r\n <input name=\"menu-search-bar\" class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\" \r\n />\r\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\r\n </div>\r\n }\r\n \r\n <!-- Tabs -->\r\n @if(menu?.tabs){\r\n <div class=\"sa-menu-tabs\">\r\n <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\r\n (click)=\"setActiveTab(i,tab.label)\">\r\n {{ tab.label }}\r\n <!-- ({{ tab.itemGroups.length }}) -->\r\n </button>\r\n </div>\r\n }\r\n <!-- Tabs End -->\r\n\r\n @if(menu?.tabs?.length){\r\n @if(menu.tabs[activeTabIndex]?.itemGroups?.length){\r\n <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\r\n <div class=\"sa-menu-group\">\r\n <h2>{{groupItem.groupTitle}}</h2>\r\n <ng-container *ngFor=\"let item of groupItem.items\">\r\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n }\r\n } @else if(menu?.itemGroups?.length){\r\n <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\r\n <div class=\"sa-menu-group\">\r\n <h2>{{groupItem.groupTitle}}</h2>\r\n <ng-container *ngFor=\"let item of groupItem.items\">\r\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if(menu?.items && menu?.items?.length){\r\n <div *ngIf=\"menu?.user\" class=\"profile-badge\">\r\n <div class=\"avatar\">\r\n <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\r\n </div>\r\n <div class=\"profile-info\">\r\n <p class=\"profile-name\">{{menu?.user?.name}}</p>\r\n <p class=\"profile-email\">{{menu?.user?.email}}</p>\r\n </div>\r\n </div>\r\n <div class=\"sa-menu-items\">\r\n @for (item of menu.items; track item) {\r\n <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\r\n }\r\n </div>\r\n }\r\n\r\n</div>", styles: [".sa-menu{background-color:var(--primary-800);box-shadow:3px 4px 16px 4px #00000014;width:max-content;border-radius:5px;overflow-y:auto;max-height:100%}.sa-round-border{border-radius:8px}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--grey-700, #1D2939);padding:0 1rem 1rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sa-menu-tray::-webkit-scrollbar{width:6px}.sa-menu-tray::-webkit-scrollbar-track{background:transparent}.sa-menu-tray::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}sa-menu-item{cursor:pointer;display:block;color:var(--grey-100, #EAECF0)}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;position:fixed;padding:1rem 0 .5rem;height:64px;width:calc(100% - 2rem);border-bottom:1px solid var(--primary-50, #F4EBFF);background:var(--grey-700, #1D2939);z-index:1}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;margin-bottom:0;margin-top:0}.sa-menu-close-icon{cursor:pointer;margin-left:auto;height:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem;margin-top:4.75rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;border-radius:4px;color:var(--grey-200, #D0D5DD);border:1px solid var(--grey-900, #0C111D);background:var(--grey-900, #0C111D);box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--grey-400, #475467)}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--grey-300, #D0D5DD);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}.MenuBar{width:max-content;margin-top:8px;background-color:var(--grey-400);border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:0}.sa-menu-tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:1rem}.sa-menu-tabs button{flex:1;padding:.5rem 1rem;background:none;border:none;cursor:pointer;font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#888;border-bottom:2px solid transparent;transition:all .5s ease}.sa-menu-tabs button.active{color:#f7f3f3;border-bottom:2px solid #f7f7f7;font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.sa-menu-content{padding:0rem 0}.sa-menu-content-inner{padding-top:0}.sa-menu-content .sa-menu-content-with-search,.sa-menu-content-with-search.sa-menu-content-inner{padding:0}.features-tray-menu .sa-menu-content-inner{padding-top:5rem}.features-tray-menu .sa-menu-content-with-search.sa-menu-content-inner{padding-top:0}.sa-menu-group h2{margin-top:1rem}.sa-menu-group:first-child h2{margin-top:0}.sa-menu-group{margin-bottom:1rem}.profile-badge{display:flex;align-items:center;gap:8px;padding:12px;width:100%;border-bottom:1px solid var(--grey-400)}.avatar{display:flex;justify-content:center;align-items:center}.profile-info{display:flex;flex-direction:column;justify-content:center;font-weight:300}.profile-name{color:var(--structural-white);font-weight:500;font-size:12px;line-height:1.2;margin:0}.profile-email{color:var(--grey-200);font-size:11px;line-height:1.2;font-weight:400;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SAMenuItemComponent, selector: "sa-menu-item", inputs: ["item", "showRound"], outputs: ["onEvent"] }, { kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }] }); }
|
|
3933
3982
|
}
|
|
3934
3983
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SAMenuComponent, decorators: [{
|
|
3935
3984
|
type: Component,
|
|
@@ -3942,7 +3991,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
3942
3991
|
HttpClientModule,
|
|
3943
3992
|
IconComponent,
|
|
3944
3993
|
AvatarComponent,
|
|
3945
|
-
], providers: [IconService], template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\n [ngStyle]=\"{width: menu.width || 'max-content'}\">\n @if(menu?.title){\n <div class=\"sa-menu-title\">\n <h1>{{menu?.title}}</h1>\n <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" color=\"var(--grey-200, #D0D5DD)\" class=\"sa-menu-close-icon\"\n (click)=\"closeEvent.emit($event)\"></sa-icon>\n </div>\n }\n\n <!-- @if(menu?.itemGroups && menu.itemGroups.length){\n @for (groupItem of menu.itemGroups; track groupItem) {\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n \n @for (item of groupItem.items; track $index) {\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n }\n } @else if(menu?.items && menu.items.length){\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n }\n </div>\n } -->\n\n\n <!-- Tab Content or Item Groups -->\n <div class=\"sa-menu-content\">\n <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\n @if(menu?.showSearch){\n <div class=\"search-container\">\n <sa-icon icon=\"search\"></sa-icon>\n <input name=\"menu-search-bar\" class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\" \n />\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\n </div>\n }\n \n <!-- Tabs -->\n @if(menu?.tabs){\n <div class=\"sa-menu-tabs\">\n <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\n (click)=\"setActiveTab(i,tab.label)\">\n {{ tab.label }}\n <!-- ({{ tab.itemGroups.length }}) -->\n </button>\n </div>\n }\n <!-- Tabs End -->\n\n @if(menu?.tabs?.length){\n @if(menu.tabs[activeTabIndex]?.itemGroups?.length){\n <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n <ng-container *ngFor=\"let item of groupItem.items\">\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n </ng-container>\n </div>\n </ng-container>\n }\n } @else if(menu?.itemGroups?.length){\n <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\n <div class=\"sa-menu-group\">\n <h2>{{groupItem.groupTitle}}</h2>\n <ng-container *ngFor=\"let item of groupItem.items\">\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\n </ng-container>\n </div>\n </ng-container>\n }\n </div>\n </div>\n\n @if(menu?.items && menu?.items?.length){\n <div *ngIf=\"menu?.user\" class=\"profile-badge\">\n <div class=\"avatar\">\n <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\n </div>\n <div class=\"profile-info\">\n <p class=\"profile-name\">{{menu?.user?.name}}</p>\n <p class=\"profile-email\">{{menu?.user?.email}}</p>\n </div>\n </div>\n <div class=\"sa-menu-items\">\n @for (item of menu.items; track item) {\n <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\n }\n </div>\n }\n\n</div>", styles: [".sa-menu{background-color:var(--primary-800);box-shadow:3px 4px 16px 4px #00000014;width:max-content;border-radius:5px;overflow-y:auto;max-height:100%}.sa-round-border{border-radius:8px}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--grey-700, #1D2939);padding:0 1rem 1rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sa-menu-tray::-webkit-scrollbar{width:6px}.sa-menu-tray::-webkit-scrollbar-track{background:transparent}.sa-menu-tray::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}sa-menu-item{cursor:pointer;display:block;color:var(--grey-100, #EAECF0)}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;position:fixed;padding:1rem 0 .5rem;height:64px;width:calc(100% - 2rem);border-bottom:1px solid var(--primary-50, #F4EBFF);background:var(--grey-700, #1D2939);z-index:1}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;margin-bottom:0;margin-top:0}.sa-menu-close-icon{cursor:pointer;margin-left:auto;height:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem;margin-top:4.75rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;border-radius:4px;color:var(--grey-200, #D0D5DD);border:1px solid var(--grey-900, #0C111D);background:var(--grey-900, #0C111D);box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--grey-400, #475467)}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--grey-300, #D0D5DD);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}.MenuBar{width:max-content;margin-top:8px;background-color:var(--grey-400);border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:0}.sa-menu-tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:1rem}.sa-menu-tabs button{flex:1;padding:.5rem 1rem;background:none;border:none;cursor:pointer;font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#888;border-bottom:2px solid transparent;transition:all .5s ease}.sa-menu-tabs button.active{color:#f7f3f3;border-bottom:2px solid #f7f7f7;font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.sa-menu-content{padding:0rem 0}.sa-menu-content-inner{padding-top:0}.sa-menu-content .sa-menu-content-with-search,.sa-menu-content-with-search.sa-menu-content-inner{padding:0}.features-tray-menu .sa-menu-content-inner{padding-top:5rem}.features-tray-menu .sa-menu-content-with-search.sa-menu-content-inner{padding-top:0}.sa-menu-group h2{margin-top:1rem}.sa-menu-group:first-child h2{margin-top:0}.sa-menu-group{margin-bottom:1rem}.profile-badge{display:flex;align-items:center;gap:8px;padding:12px;width:100%;border-bottom:1px solid var(--grey-400)}.avatar{display:flex;justify-content:center;align-items:center}.profile-info{display:flex;flex-direction:column;justify-content:center;font-weight:300}.profile-name{color:var(--structural-white);font-weight:500;font-size:12px;line-height:1.2;margin:0}.profile-email{color:var(--grey-200);font-size:11px;line-height:1.2;font-weight:400;margin:0}\n"] }]
|
|
3994
|
+
], providers: [IconService], template: "<div class=\"sa-menu\" [ngClass]=\"menu.showTray ? 'sa-menu-tray sa-round-border' : ''\"\r\n [ngStyle]=\"{width: menu.width || 'max-content'}\">\r\n @if(menu?.title){\r\n <div class=\"sa-menu-title\">\r\n <h1>{{menu?.title}}</h1>\r\n <sa-icon [icon]=\"'closeOutlined'\" [size]=\"'20'\" color=\"var(--grey-200, #D0D5DD)\" class=\"sa-menu-close-icon\"\r\n (click)=\"closeEvent.emit($event)\"></sa-icon>\r\n </div>\r\n }\r\n\r\n <!-- @if(menu?.itemGroups && menu.itemGroups.length){\r\n @for (groupItem of menu.itemGroups; track groupItem) {\r\n <div class=\"sa-menu-group\">\r\n <h2>{{groupItem.groupTitle}}</h2>\r\n \r\n @for (item of groupItem.items; track $index) {\r\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n }\r\n </div>\r\n }\r\n } @else if(menu?.items && menu.items.length){\r\n <div class=\"sa-menu-items\">\r\n @for (item of menu.items; track item) {\r\n <sa-menu-item [item]=\"item\" (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n }\r\n </div>\r\n } -->\r\n\r\n\r\n <!-- Tab Content or Item Groups -->\r\n <div class=\"sa-menu-content\">\r\n <div class=\"sa-menu-content-inner {{menu?.showSearch ? 'sa-menu-content-with-search' : ''}}\">\r\n @if(menu?.showSearch){\r\n <div class=\"search-container\">\r\n <sa-icon icon=\"search\"></sa-icon>\r\n <input name=\"menu-search-bar\" class=\"search-input\" (keyup)=\"onSearch($event)\" type=\"text\" [placeholder]=\"menu.searchPlaceholder\" \r\n />\r\n <button *ngIf=\"menu?.showAddIcon\"><i class=\"fas fa-plus\"></i></button>\r\n </div>\r\n }\r\n \r\n <!-- Tabs -->\r\n @if(menu?.tabs){\r\n <div class=\"sa-menu-tabs\">\r\n <button *ngFor=\"let tab of menu.tabs; let i = index\" [class.active]=\"i === activeTabIndex\"\r\n (click)=\"setActiveTab(i,tab.label)\">\r\n {{ tab.label }}\r\n <!-- ({{ tab.itemGroups.length }}) -->\r\n </button>\r\n </div>\r\n }\r\n <!-- Tabs End -->\r\n\r\n @if(menu?.tabs?.length){\r\n @if(menu.tabs[activeTabIndex]?.itemGroups?.length){\r\n <ng-container *ngFor=\"let groupItem of menu.tabs[activeTabIndex].itemGroups\">\r\n <div class=\"sa-menu-group\">\r\n <h2>{{groupItem.groupTitle}}</h2>\r\n <ng-container *ngFor=\"let item of groupItem.items\">\r\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n }\r\n } @else if(menu?.itemGroups?.length){\r\n <ng-container *ngFor=\"let groupItem of menu.itemGroups\">\r\n <div class=\"sa-menu-group\">\r\n <h2>{{groupItem.groupTitle}}</h2>\r\n <ng-container *ngFor=\"let item of groupItem.items\">\r\n <sa-menu-item [item]=\"item\" [showRound]=\"menu.showTray\"\r\n (click)=\"onMenuItemClick($event, item)\"></sa-menu-item>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n }\r\n </div>\r\n </div>\r\n\r\n @if(menu?.items && menu?.items?.length){\r\n <div *ngIf=\"menu?.user\" class=\"profile-badge\">\r\n <div class=\"avatar\">\r\n <sa-avatar [altText]=\"menu?.user?.altText\" [imagePath]=\"''\" [size]=\"'large'\"></sa-avatar>\r\n </div>\r\n <div class=\"profile-info\">\r\n <p class=\"profile-name\">{{menu?.user?.name}}</p>\r\n <p class=\"profile-email\">{{menu?.user?.email}}</p>\r\n </div>\r\n </div>\r\n <div class=\"sa-menu-items\">\r\n @for (item of menu.items; track item) {\r\n <sa-menu-item [item]=\"item\" (onEvent)=\"itemClicked($event)\"> </sa-menu-item>\r\n }\r\n </div>\r\n }\r\n\r\n</div>", styles: [".sa-menu{background-color:var(--primary-800);box-shadow:3px 4px 16px 4px #00000014;width:max-content;border-radius:5px;overflow-y:auto;max-height:100%}.sa-round-border{border-radius:8px}.sa-menu-tray{height:calc(100vh - 16px);margin-top:8px;border-top-left-radius:0;border-bottom-left-radius:0;background:var(--grey-700, #1D2939);padding:0 1rem 1rem;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.sa-menu-tray::-webkit-scrollbar{width:6px}.sa-menu-tray::-webkit-scrollbar-track{background:transparent}.sa-menu-tray::-webkit-scrollbar-thumb{background-color:#ffffff4d;border-radius:3px}sa-menu-item{cursor:pointer;display:block;color:var(--grey-100, #EAECF0)}.sa-menu-title{display:flex;justify-content:space-between;align-items:center;position:fixed;padding:1rem 0 .5rem;height:64px;width:calc(100% - 2rem);border-bottom:1px solid var(--primary-50, #F4EBFF);background:var(--grey-700, #1D2939);z-index:1}.sa-menu-title h1{color:var(--grey-100, #EAECF0);font-family:var(--font-family, Roboto);font-size:16px;font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;margin-bottom:0;margin-top:0}.sa-menu-close-icon{cursor:pointer;margin-left:auto;height:20px}.search-container{position:relative;display:flex;align-items:center;margin-bottom:1rem;margin-top:4.75rem}.search-container input{flex:1;padding:.5rem .5rem .5rem 2rem;background-color:#4a5568;border-radius:.25rem;font-size:.875rem;border:none;outline:none;border-radius:4px;color:var(--grey-200, #D0D5DD);border:1px solid var(--grey-900, #0C111D);background:var(--grey-900, #0C111D);box-sizing:border-box}.search-container .search-icon{position:absolute;left:.5rem;font-size:1rem;color:#888;pointer-events:none}.search-container button{margin-left:.5rem;background-color:#6b46c1;padding:.5rem;border-radius:.25rem;border:none;cursor:pointer}.sa-menu-group{margin-bottom:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--grey-400, #475467)}.sa-menu-group:last-child{border-bottom:none}.sa-menu-group h2{color:var(--grey-300, #D0D5DD);font-family:var(--font-family, Roboto);font-size:11px;font-style:normal;font-weight:400;line-height:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:.5rem}.MenuBar{width:max-content;margin-top:8px;background-color:var(--grey-400);border-top-left-radius:0;border-bottom-left-radius:0;background-color:#2d3748;padding:0}.sa-menu-tabs{display:flex;border-bottom:1px solid #ccc;margin-bottom:1rem}.sa-menu-tabs button{flex:1;padding:.5rem 1rem;background:none;border:none;cursor:pointer;font-size:12px;font-style:normal;font-weight:400;line-height:16px;color:#888;border-bottom:2px solid transparent;transition:all .5s ease}.sa-menu-tabs button.active{color:#f7f3f3;border-bottom:2px solid #f7f7f7;font-size:12px;font-style:normal;font-weight:600;line-height:16px;letter-spacing:.5px}.sa-menu-content{padding:0rem 0}.sa-menu-content-inner{padding-top:0}.sa-menu-content .sa-menu-content-with-search,.sa-menu-content-with-search.sa-menu-content-inner{padding:0}.features-tray-menu .sa-menu-content-inner{padding-top:5rem}.features-tray-menu .sa-menu-content-with-search.sa-menu-content-inner{padding-top:0}.sa-menu-group h2{margin-top:1rem}.sa-menu-group:first-child h2{margin-top:0}.sa-menu-group{margin-bottom:1rem}.profile-badge{display:flex;align-items:center;gap:8px;padding:12px;width:100%;border-bottom:1px solid var(--grey-400)}.avatar{display:flex;justify-content:center;align-items:center}.profile-info{display:flex;flex-direction:column;justify-content:center;font-weight:300}.profile-name{color:var(--structural-white);font-weight:500;font-size:12px;line-height:1.2;margin:0}.profile-email{color:var(--grey-200);font-size:11px;line-height:1.2;font-weight:400;margin:0}\n"] }]
|
|
3946
3995
|
}], ctorParameters: () => [{ type: i1$4.Overlay }], propDecorators: { position: [{
|
|
3947
3996
|
type: Input
|
|
3948
3997
|
}], menu: [{
|
|
@@ -4317,7 +4366,7 @@ class LeftNavComponent {
|
|
|
4317
4366
|
});
|
|
4318
4367
|
}
|
|
4319
4368
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, deps: [{ token: i1$8.ActivatedRoute }, { token: i1$8.Router }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4320
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent", hoverEvent: "hoverEvent", onEvent: "onEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-left-nav\" >\n\n <div class=\"sa-left-nav-container {{isMenuAttached() ? 'menu-attached' : ''}}\">\n <div class=\"sa-left-nav-logo\">\n <sa-icon (click)=\"onLogoClick($event, config?.logo)\" [matTooltip]=\"config?.logo?.tooltip\" [matTooltipPosition]=\"'right'\" matTooltipClass=\"sa-left-nav-tooltip\" [icon]=\"config?.logo?.icon\" [size]=\"config?.logo?.iconSize\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items-container\">\n @if(config && config?.items && !!config?.items?.length){\n <div class=\"sa-left-nav-items-group\">\n <ng-container *ngFor=\"let item of config?.items; let i = index\">\n <div class=\"sa-left-nav-items\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\"\n (onAttached)=\"onMenuAttached($event, 'nav', item, i)\" (onDetached)=\"onMenuDetached($event, 'nav', item, i)\"\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.active ? item.color : 'var(--grey-200)'\"></sa-icon>\n <!-- <span>{{item.tooltip}}</span> -->\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-template-item-container\">\n @if(config && config.templateItems && !!config.templateItems.length){\n <div (click)=\"onTemplateItemClick($event, i, item)\" class=\"sa-template-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.templateItems; let i = index\">\n <sa-icon [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip sa-left-nav-template-tooltip\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.color\"></sa-icon>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(config && config.footerItems && !!config.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.footerItems; let i = index\">\n <div class=\"footer-item-icon\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\" (onEvent)=\"onEvent.emit($event)\"\n [saMenu]=\"item.menu\" (onAttached)=\"onMenuAttached($event, 'footer', item, i)\" (onDetached)=\"onMenuDetached($event, 'footer', item, i)\"\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span clasi ss=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 16px);padding:8px;display:flex}.sa-left-nav-logo{display:flex;align-items:center;justify-content:center;width:40px;margin:auto;padding:5px 0;border-bottom:1px #fff solid;min-height:48px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg width=\"20\" height=\"38\" viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-800, #42307D);border-radius:var(--small-8px, 8px) var(--small-8px, 8px);padding:16px 6px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-container.menu-attached{border-radius:var(--small-8px, 8px) 0 0 var(--small-8px, 8px)}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:var(--medium-28px) 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-items-group{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.sa-left-nav-items{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;align-self:stretch}.sa-left-nav-item,.sa-left-nav-footer-item .footer-item-icon{height:40px;width:40px;margin:0 auto;cursor:pointer;border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .3s ease}.sa-icon-label{color:var(--grey-200, #D0D5DD);font-size:var(--small-10px, 10px);text-align:center;margin:0;width:62px;line-height:12px;word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;display:block;max-height:24px}.sa-icon-label.active{color:var(--structural-white, #FFF);font-weight:500}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{gap:0;display:flex;flex-direction:column;align-items:center}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item .footer-item-icon.active,.sa-left-nav-footer-item .footer-item-icon:hover{background-color:var(--primary-500)}::ng-deep .sa-left-nav-item.active .sa-left-nav-item-icon .sa-icon{color:var(--structural-white, #FFF)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 74px)}.sa-template-item-container{margin-bottom:.8rem;display:flex;justify-content:center}.sa-left-nav-footer-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-16px, 16px);align-self:stretch;margin-top:var(--small-16px, 16px)}.sa-template-item-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-8px, 8px)}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip{margin-left:8px!important}::ng-deep .sa-left-nav-template-tooltip.mat-mdc-tooltip{margin-left:16px!important}::ng-deep .sa-left-nav-tooltip.mat-mdc-tooltip{position:relative}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip.mat-mdc-tooltip:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--mdc-plain-tooltip-container-color, rgba(97, 97, 97, .9))}::ng-deep .sa-left-nav-footer-item .avatar .avatar-img{border:2px solid var(--primary-500);display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MenuDirective, selector: "[saMenu]", inputs: ["saMenuRef", "saMenu", "saManuPosition"], outputs: ["onMenuEvent", "onEvent", "onAttached", "onDetached"] }] }); }
|
|
4369
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: LeftNavComponent, isStandalone: true, selector: "sa-left-nav", inputs: { config: "config" }, outputs: { clickEvent: "clickEvent", hoverEvent: "hoverEvent", onEvent: "onEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<div class=\"sa-left-nav\" >\r\n\r\n <div class=\"sa-left-nav-container {{isMenuAttached() ? 'menu-attached' : ''}}\">\r\n <div class=\"sa-left-nav-logo\">\r\n <sa-icon (click)=\"onLogoClick($event, config?.logo)\" [matTooltip]=\"config?.logo?.tooltip\" [matTooltipPosition]=\"'right'\" matTooltipClass=\"sa-left-nav-tooltip\" [icon]=\"config?.logo?.icon\" [size]=\"config?.logo?.iconSize\"></sa-icon>\r\n </div>\r\n <div class=\"sa-left-nav-items-container\">\r\n @if(config && config?.items && !!config?.items?.length){\r\n <div class=\"sa-left-nav-items-group\">\r\n <ng-container *ngFor=\"let item of config?.items; let i = index\">\r\n <div class=\"sa-left-nav-items\">\r\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\r\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\"\r\n (onAttached)=\"onMenuAttached($event, 'nav', item, i)\" (onDetached)=\"onMenuDetached($event, 'nav', item, i)\"\r\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\r\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\r\n\r\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.active ? item.color : 'var(--grey-200)'\"></sa-icon>\r\n <!-- <span>{{item.tooltip}}</span> -->\r\n <!-- <span class=\"sa-left-nav-item-icon\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\r\n </div>\r\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\r\n </div>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"sa-template-item-container\">\r\n @if(config && config.templateItems && !!config.templateItems.length){\r\n <div (click)=\"onTemplateItemClick($event, i, item)\" class=\"sa-template-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.templateItems; let i = index\">\r\n <sa-icon [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip sa-left-nav-template-tooltip\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.color\"></sa-icon>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"sa-left-nav-footer\">\r\n @if(config && config.footerItems && !!config.footerItems.length){\r\n <div class=\"sa-left-nav-footer-container\">\r\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.footerItems; let i = index\">\r\n <div class=\"footer-item-icon\" [ngClass]=\"item.active ? 'active' : '' \"\r\n (click)=\"onFooterItemClick(item, i, $event)\" (onEvent)=\"onEvent.emit($event)\"\r\n [saMenu]=\"item.menu\" (onAttached)=\"onMenuAttached($event, 'footer', item, i)\" (onDetached)=\"onMenuDetached($event, 'footer', item, i)\"\r\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\r\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\r\n @if(item.type === 'AVATAR'){\r\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\r\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\r\n }@else{\r\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\r\n <!-- <span clasi ss=\"sa-left-nav-footer-icon\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\r\n }\r\n </div>\r\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sa-left-nav-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n</div>", styles: [".sa-left-nav{height:calc(100vh - 16px);padding:8px;display:flex}.sa-left-nav-logo{display:flex;align-items:center;justify-content:center;width:40px;margin:auto;padding:5px 0;border-bottom:1px #fff solid;min-height:48px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg width=\"20\" height=\"38\" viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-800, #42307D);border-radius:var(--small-8px, 8px) var(--small-8px, 8px);padding:16px 6px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-container.menu-attached{border-radius:var(--small-8px, 8px) 0 0 var(--small-8px, 8px)}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:var(--medium-28px) 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-items-group{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.sa-left-nav-items{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;align-self:stretch}.sa-left-nav-item,.sa-left-nav-footer-item .footer-item-icon{height:40px;width:40px;margin:0 auto;cursor:pointer;border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .3s ease}.sa-icon-label{color:var(--grey-200, #D0D5DD);font-size:var(--small-10px, 10px);text-align:center;margin:0;width:62px;line-height:12px;word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;display:block;max-height:24px}.sa-icon-label.active{color:var(--structural-white, #FFF);font-weight:500}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{gap:0;display:flex;flex-direction:column;align-items:center}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item .footer-item-icon.active,.sa-left-nav-footer-item .footer-item-icon:hover{background-color:var(--primary-500)}::ng-deep .sa-left-nav-item.active .sa-left-nav-item-icon .sa-icon{color:var(--structural-white, #FFF)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 74px)}.sa-template-item-container{margin-bottom:.8rem;display:flex;justify-content:center}.sa-left-nav-footer-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-16px, 16px);align-self:stretch;margin-top:var(--small-16px, 16px)}.sa-template-item-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-8px, 8px)}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip{margin-left:8px!important}::ng-deep .sa-left-nav-template-tooltip.mat-mdc-tooltip{margin-left:16px!important}::ng-deep .sa-left-nav-tooltip.mat-mdc-tooltip{position:relative}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip.mat-mdc-tooltip:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--mdc-plain-tooltip-container-color, rgba(97, 97, 97, .9))}::ng-deep .sa-left-nav-footer-item .avatar .avatar-img{border:2px solid var(--primary-500);display:flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "sa-avatar", inputs: ["id", "imagePath", "altText", "size"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: MenuDirective, selector: "[saMenu]", inputs: ["saMenuRef", "saMenu", "saManuPosition"], outputs: ["onMenuEvent", "onEvent", "onAttached", "onDetached"] }] }); }
|
|
4321
4370
|
}
|
|
4322
4371
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: LeftNavComponent, decorators: [{
|
|
4323
4372
|
type: Component,
|
|
@@ -4329,7 +4378,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
4329
4378
|
MenuDirective,
|
|
4330
4379
|
SAMenuComponent,
|
|
4331
4380
|
IconComponent
|
|
4332
|
-
], providers: [IconService], template: "<div class=\"sa-left-nav\" >\n\n <div class=\"sa-left-nav-container {{isMenuAttached() ? 'menu-attached' : ''}}\">\n <div class=\"sa-left-nav-logo\">\n <sa-icon (click)=\"onLogoClick($event, config?.logo)\" [matTooltip]=\"config?.logo?.tooltip\" [matTooltipPosition]=\"'right'\" matTooltipClass=\"sa-left-nav-tooltip\" [icon]=\"config?.logo?.icon\" [size]=\"config?.logo?.iconSize\"></sa-icon>\n </div>\n <div class=\"sa-left-nav-items-container\">\n @if(config && config?.items && !!config?.items?.length){\n <div class=\"sa-left-nav-items-group\">\n <ng-container *ngFor=\"let item of config?.items; let i = index\">\n <div class=\"sa-left-nav-items\">\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\"\n (onAttached)=\"onMenuAttached($event, 'nav', item, i)\" (onDetached)=\"onMenuDetached($event, 'nav', item, i)\"\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\n\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.active ? item.color : 'var(--grey-200)'\"></sa-icon>\n <!-- <span>{{item.tooltip}}</span> -->\n <!-- <span class=\"sa-left-nav-item-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\n </div>\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\n </div>\n </ng-container>\n </div>\n }\n </div>\n <div class=\"sa-template-item-container\">\n @if(config && config.templateItems && !!config.templateItems.length){\n <div (click)=\"onTemplateItemClick($event, i, item)\" class=\"sa-template-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.templateItems; let i = index\">\n <sa-icon [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip sa-left-nav-template-tooltip\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.color\"></sa-icon>\n </div>\n }\n </div>\n <div class=\"sa-left-nav-footer\">\n @if(config && config.footerItems && !!config.footerItems.length){\n <div class=\"sa-left-nav-footer-container\">\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.footerItems; let i = index\">\n <div class=\"footer-item-icon\" [ngClass]=\"item.active ? 'active' : '' \"\n (click)=\"onFooterItemClick(item, i, $event)\" (onEvent)=\"onEvent.emit($event)\"\n [saMenu]=\"item.menu\" (onAttached)=\"onMenuAttached($event, 'footer', item, i)\" (onDetached)=\"onMenuDetached($event, 'footer', item, i)\"\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\n @if(item.type === 'AVATAR'){\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\n }@else{\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\n <!-- <span clasi ss=\"sa-left-nav-footer-icon\"\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\n }\n </div>\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\n </div>\n </div>\n }\n </div>\n </div>\n\n <div class=\"sa-left-nav-content\">\n <ng-content></ng-content>\n </div>\n\n</div>", styles: [".sa-left-nav{height:calc(100vh - 16px);padding:8px;display:flex}.sa-left-nav-logo{display:flex;align-items:center;justify-content:center;width:40px;margin:auto;padding:5px 0;border-bottom:1px #fff solid;min-height:48px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg width=\"20\" height=\"38\" viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-800, #42307D);border-radius:var(--small-8px, 8px) var(--small-8px, 8px);padding:16px 6px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-container.menu-attached{border-radius:var(--small-8px, 8px) 0 0 var(--small-8px, 8px)}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:var(--medium-28px) 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-items-group{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.sa-left-nav-items{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;align-self:stretch}.sa-left-nav-item,.sa-left-nav-footer-item .footer-item-icon{height:40px;width:40px;margin:0 auto;cursor:pointer;border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .3s ease}.sa-icon-label{color:var(--grey-200, #D0D5DD);font-size:var(--small-10px, 10px);text-align:center;margin:0;width:62px;line-height:12px;word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;display:block;max-height:24px}.sa-icon-label.active{color:var(--structural-white, #FFF);font-weight:500}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{gap:0;display:flex;flex-direction:column;align-items:center}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item .footer-item-icon.active,.sa-left-nav-footer-item .footer-item-icon:hover{background-color:var(--primary-500)}::ng-deep .sa-left-nav-item.active .sa-left-nav-item-icon .sa-icon{color:var(--structural-white, #FFF)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 74px)}.sa-template-item-container{margin-bottom:.8rem;display:flex;justify-content:center}.sa-left-nav-footer-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-16px, 16px);align-self:stretch;margin-top:var(--small-16px, 16px)}.sa-template-item-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-8px, 8px)}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip{margin-left:8px!important}::ng-deep .sa-left-nav-template-tooltip.mat-mdc-tooltip{margin-left:16px!important}::ng-deep .sa-left-nav-tooltip.mat-mdc-tooltip{position:relative}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip.mat-mdc-tooltip:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--mdc-plain-tooltip-container-color, rgba(97, 97, 97, .9))}::ng-deep .sa-left-nav-footer-item .avatar .avatar-img{border:2px solid var(--primary-500);display:flex;align-items:center;justify-content:center}\n"] }]
|
|
4381
|
+
], providers: [IconService], template: "<div class=\"sa-left-nav\" >\r\n\r\n <div class=\"sa-left-nav-container {{isMenuAttached() ? 'menu-attached' : ''}}\">\r\n <div class=\"sa-left-nav-logo\">\r\n <sa-icon (click)=\"onLogoClick($event, config?.logo)\" [matTooltip]=\"config?.logo?.tooltip\" [matTooltipPosition]=\"'right'\" matTooltipClass=\"sa-left-nav-tooltip\" [icon]=\"config?.logo?.icon\" [size]=\"config?.logo?.iconSize\"></sa-icon>\r\n </div>\r\n <div class=\"sa-left-nav-items-container\">\r\n @if(config && config?.items && !!config?.items?.length){\r\n <div class=\"sa-left-nav-items-group\">\r\n <ng-container *ngFor=\"let item of config?.items; let i = index\">\r\n <div class=\"sa-left-nav-items\">\r\n <div class=\"sa-left-nav-item\" [ngClass]=\"item.active ? 'active' : '' \"\r\n [saMenu]=\"item.menu\" (onEvent)=\"onEvent.emit($event)\"\r\n (onAttached)=\"onMenuAttached($event, 'nav', item, i)\" (onDetached)=\"onMenuDetached($event, 'nav', item, i)\"\r\n (click)=\"onNavItemClick(item, i, $event)\" (mouseenter)=\"onNavItemBlur(item,i,$event,tooltip)\"\r\n #tooltip=\"matTooltip\" [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\r\n\r\n <sa-icon class=\"sa-left-nav-item-icon\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.active ? item.color : 'var(--grey-200)'\"></sa-icon>\r\n <!-- <span>{{item.tooltip}}</span> -->\r\n <!-- <span class=\"sa-left-nav-item-icon\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url + ')' }\"></span> -->\r\n </div>\r\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\r\n </div>\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"sa-template-item-container\">\r\n @if(config && config.templateItems && !!config.templateItems.length){\r\n <div (click)=\"onTemplateItemClick($event, i, item)\" class=\"sa-template-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.templateItems; let i = index\">\r\n <sa-icon [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip sa-left-nav-template-tooltip\" [icon]=\"item.icon\" [size]=\"item.iconSize || '24'\" [color]=\"item.color\"></sa-icon>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"sa-left-nav-footer\">\r\n @if(config && config.footerItems && !!config.footerItems.length){\r\n <div class=\"sa-left-nav-footer-container\">\r\n <div class=\"sa-left-nav-footer-item\" [ngClass]=\"item.className\" *ngFor=\"let item of config.footerItems; let i = index\">\r\n <div class=\"footer-item-icon\" [ngClass]=\"item.active ? 'active' : '' \"\r\n (click)=\"onFooterItemClick(item, i, $event)\" (onEvent)=\"onEvent.emit($event)\"\r\n [saMenu]=\"item.menu\" (onAttached)=\"onMenuAttached($event, 'footer', item, i)\" (onDetached)=\"onMenuDetached($event, 'footer', item, i)\"\r\n (mouseenter)=\"onFooterItemBlur(item,i,$event,tooltip)\" #tooltip=\"matTooltip\"\r\n [matTooltip]=\"item.tooltip\" matTooltipPosition=\"right\" matTooltipClass=\"sa-left-nav-tooltip\">\r\n @if(item.type === 'AVATAR'){\r\n <!-- <span class=\"sa-left-nav-footer-name\">ET</span> -->\r\n <sa-avatar [altText]=\"item.altText\" [imagePath]=\"''\" size=\"extra-small\"></sa-avatar>\r\n }@else{\r\n <sa-icon class=\"sa-left-nav-footer-icon\" [icon]=\"item.icon\" size=\"24\" color=\"white\"></sa-icon>\r\n <!-- <span clasi ss=\"sa-left-nav-footer-icon\"\r\n [ngStyle]=\"{ 'background-image': 'url(' + item.icon_url || '' + ')' }\"></span> -->\r\n }\r\n </div>\r\n <p class=\"sa-icon-label\" [ngClass]=\"item.active ? 'active' : '' \">{{item.iconLabel}}</p>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"sa-left-nav-content\">\r\n <ng-content></ng-content>\r\n </div>\r\n\r\n</div>", styles: [".sa-left-nav{height:calc(100vh - 16px);padding:8px;display:flex}.sa-left-nav-logo{display:flex;align-items:center;justify-content:center;width:40px;margin:auto;padding:5px 0;border-bottom:1px #fff solid;min-height:48px}.sa-logo{height:40px;width:20px;display:block;margin:auto;background-position:center;background:url('data:image/svg+xml,<svg width=\"20\" height=\"38\" viewBox=\"0 0 20 38\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.554 13.549c-.05 0-.101 0-.152-.003v.003s-.541-.013-2.395-.024c-3.047-.026-4.175 1.237-4.532 1.816H8.47c-.26.49-.332 1.061-.202 1.603l-.004.01c.02.13.303 1.624 2.762 1.573 1.971-.042 3.15-.165 3.626-.225a3.881 3.881 0 0 1 1.815.004c.596.145 1.152.43 1.623.831.472.402.846.91 1.093 1.484a4.156 4.156 0 0 1-.158 3.617 4.037 4.037 0 0 1-1.22 1.377 3.883 3.883 0 0 1-3.498.516c-.29-.068-.68-.169-1.207-.315-3.167-.789-4.906 4.081-4.906 4.081l-.006.005a4.069 4.069 0 0 1-1.244 1.785 3.926 3.926 0 0 1-1.968.866 3.888 3.888 0 0 1-2.12-.307c-.667-.3-1.24-.78-1.658-1.39a4.153 4.153 0 0 1-.273-4.216 4.033 4.033 0 0 1 1.463-1.6 3.904 3.904 0 0 1 2.408-.576c.44-.004 1.353 0 3.19.032 3.136.057 3.556-1.442 3.596-2.056 0-.058-.003-.116-.003-.173v-.083a2.288 2.288 0 0 0-.448-1.238 2.204 2.204 0 0 0-1.048-.768c-1.543-.684-5.413-.377-5.413-.377v-.005a3.893 3.893 0 0 1-1.805-.345 3.978 3.978 0 0 1-1.33-.985 4.093 4.093 0 0 1-.829-1.453 4.162 4.162 0 0 1 .308-3.277 4.04 4.04 0 0 1 1.084-1.264c.443-.34.95-.58 1.49-.707a3.882 3.882 0 0 1 1.643-.03c1.257.082 2.52.034 3.768-.144 2.02-.254 2.48-1.434 2.58-2.079V9.48c0-.805.233-1.592.67-2.261a3.996 3.996 0 0 1 1.782-1.5 3.886 3.886 0 0 1 2.296-.23c.77.156 1.478.544 2.034 1.113.556.57.934 1.294 1.087 2.084.154.789.075 1.607-.226 2.35a4.05 4.05 0 0 1-1.463 1.827 3.906 3.906 0 0 1-2.207.686h.003ZM4.476 9.043a3.906 3.906 0 0 1-2.207-.686A4.05 4.05 0 0 1 .806 6.531 4.161 4.161 0 0 1 .58 4.18a4.1 4.1 0 0 1 1.087-2.084A3.945 3.945 0 0 1 3.7.982a3.885 3.885 0 0 1 2.295.232c.726.308 1.347.83 1.783 1.499.437.67.67 1.456.67 2.26a4.12 4.12 0 0 1-1.164 2.878 3.926 3.926 0 0 1-2.809 1.192Z\" fill=\"%23fff\"/><path d=\"M15.531 37.095c2.194 0 3.973-1.822 3.973-4.07 0-2.246-1.779-4.068-3.973-4.068s-3.972 1.822-3.972 4.069 1.779 4.069 3.972 4.069Z\" fill=\"%23fff\"/></svg>') no-repeat}.sa-left-nav-container{height:inherit;width:64px;background-color:var(--primary-800, #42307D);border-radius:var(--small-8px, 8px) var(--small-8px, 8px);padding:16px 6px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-evenly}.sa-left-nav-container.menu-attached{border-radius:var(--small-8px, 8px) 0 0 var(--small-8px, 8px)}.sa-left-nav-items{flex:1;overflow-y:auto}.sa-left-nav-items-container{padding:var(--medium-28px) 0;height:100%;overflow:auto;box-sizing:border-box}.sa-left-nav-items-group{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--small-8px, 8px);align-self:stretch}.sa-left-nav-items{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0;align-self:stretch}.sa-left-nav-item,.sa-left-nav-footer-item .footer-item-icon{height:40px;width:40px;margin:0 auto;cursor:pointer;border-radius:4px;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:all .3s ease}.sa-icon-label{color:var(--grey-200, #D0D5DD);font-size:var(--small-10px, 10px);text-align:center;margin:0;width:62px;line-height:12px;word-break:break-word;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;display:block;max-height:24px}.sa-icon-label.active{color:var(--structural-white, #FFF);font-weight:500}::-webkit-scrollbar{display:none}.sa-left-nav-footer-item{gap:0;display:flex;flex-direction:column;align-items:center}.sa-left-nav-item:hover,.sa-left-nav-item.active,.sa-left-nav-footer-item .footer-item-icon.active,.sa-left-nav-footer-item .footer-item-icon:hover{background-color:var(--primary-500)}::ng-deep .sa-left-nav-item.active .sa-left-nav-item-icon .sa-icon{color:var(--structural-white, #FFF)}.sa-left-nav-item-name,.sa-left-nav-item-icon,.sa-left-nav-footer-icon,.sa-left-nav-footer-name{height:24px;width:24px;display:block}.sa-left-nav-item-name,mn.sa-left-nav-footer-name{display:flex;justify-content:center;align-items:center}.sa-left-nav-footer{min-height:fit-content;border-top:1px solid #fff}.sa-left-nav-content{width:calc(100% - 74px)}.sa-template-item-container{margin-bottom:.8rem;display:flex;justify-content:center}.sa-left-nav-footer-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-16px, 16px);align-self:stretch;margin-top:var(--small-16px, 16px)}.sa-template-item-container{display:flex;flex-direction:column;align-items:center;gap:var(--small-8px, 8px)}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip{margin-left:8px!important}::ng-deep .sa-left-nav-template-tooltip.mat-mdc-tooltip{margin-left:16px!important}::ng-deep .sa-left-nav-tooltip.mat-mdc-tooltip{position:relative}::ng-deep .mat-mdc-tooltip-panel-right .sa-left-nav-tooltip.mat-mdc-tooltip:before{content:\"\";position:absolute;left:-6px;top:50%;transform:translateY(-50%);border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:6px solid var(--mdc-plain-tooltip-container-color, rgba(97, 97, 97, .9))}::ng-deep .sa-left-nav-footer-item .avatar .avatar-img{border:2px solid var(--primary-500);display:flex;align-items:center;justify-content:center}\n"] }]
|
|
4333
4382
|
}], ctorParameters: () => [{ type: i1$8.ActivatedRoute }, { type: i1$8.Router }], propDecorators: { config: [{
|
|
4334
4383
|
type: Input,
|
|
4335
4384
|
args: ['config']
|
|
@@ -4439,13 +4488,13 @@ class MiniCardComponent {
|
|
|
4439
4488
|
this.onCardClickEvent.emit({ source, button, event });
|
|
4440
4489
|
}
|
|
4441
4490
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MiniCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4442
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MiniCardComponent, isStandalone: true, selector: "sa-mini-card", inputs: { cardData: "cardData" }, outputs: { onCardClickEvent: "onCardClickEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"card?.width || '471px'\" [height]=\"card?.height || '100px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"card?.customWrapperClass || customClassWrapper\"\n class=\"{{card?.disabled ? 'disabled-card': 'enabled-card'}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n <div class=\"sa-mini-card-title-icon-container\">\n <div class=\"sa-mini-card-custom-title\">\n @if(card?.source?.logoUrl){\n <sa-icon [img]=\"card?.source?.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n }\n <span [matTooltip]=\"card?.source?.tooltip\">\n {{card?.source?.name}}\n @if(card?.source?.count){\n <ng-container>\n <span>({{card?.source?.count}})</span>\n </ng-container>\n }\n </span>\n @if(card?.statusDot){\n <span>\n <sa-status-dot [config]=\"card.statusDot\">\n </sa-status-dot>\n </span>\n }\n @if(card?.chipData){\n <span>\n <sa-chip [type]=\"card?.chipData.type\" [state]=\"card?.chipData.state\"\n [filling]=\"card?.chipData.filling\" [text]=\"card?.chipData.text\"\n [iconPosition]='card?.chipData.iconPosition'\n [iconPath]=\"card?.chipData.iconPath\" [tooltip]=\"card?.chipData.tooltip\">\n </sa-chip>\n </span>\n }\n </div>\n </div>\n @if(!card?.disabled && (card?.actionButton && (card?.showActionActionButton ? card?.actionButton : null))){\n <div class=\"sa-card-titleIcon no-margin\">\n <sa-card-title-actions>\n <sa-button [text]=\"card?.actionButton?.text\" [type]=\"card?.actionButton?.type\" [size]=\"card?.actionButton?.size\"\n [state]=\"card?.actionButton?.state\" [iconPosition]=\"card?.actionButton?.iconPosition\" [icon]=\"card?.actionButton?.icon\"\n [buttonIconSize]=\"card?.actionButton?.buttonIconSize\" (onClickEvent)=\"onCardClick(card?.source, card?.actionButton, $event)\">\n </sa-button>\n </sa-card-title-actions>\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>", styles: [".sa-mini-card-title-icon-container .sa-mini-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.sa-mini-card-title-icon-container .sa-mini-card-custom-title sa-icon{display:flex}.sa-mini-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep sa-mini-card .sa-card-titleIcon sa-card-title-actions .sa-card-title-actions{margin-bottom:0}::ng-deep sa-mini-card .disabled-card .sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: StatusDotComponent, selector: "sa-status-dot", inputs: ["config"] }] }); }
|
|
4491
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: MiniCardComponent, isStandalone: true, selector: "sa-mini-card", inputs: { cardData: "cardData" }, outputs: { onCardClickEvent: "onCardClickEvent" }, providers: [IconService], usesOnChanges: true, ngImport: i0, template: "<sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"card?.width || '471px'\" [height]=\"card?.height || '100px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"card?.customWrapperClass || customClassWrapper\"\r\n class=\"{{card?.disabled ? 'disabled-card': 'enabled-card'}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n <div class=\"sa-mini-card-title-icon-container\">\r\n <div class=\"sa-mini-card-custom-title\">\r\n @if(card?.source?.logoUrl){\r\n <sa-icon [img]=\"card?.source?.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\r\n }\r\n <span [matTooltip]=\"card?.source?.tooltip\">\r\n {{card?.source?.name}}\r\n @if(card?.source?.count){\r\n <ng-container>\r\n <span>({{card?.source?.count}})</span>\r\n </ng-container>\r\n }\r\n </span>\r\n @if(card?.statusDot){\r\n <span>\r\n <sa-status-dot [config]=\"card.statusDot\">\r\n </sa-status-dot>\r\n </span>\r\n }\r\n @if(card?.chipData){\r\n <span>\r\n <sa-chip [type]=\"card?.chipData.type\" [state]=\"card?.chipData.state\"\r\n [filling]=\"card?.chipData.filling\" [text]=\"card?.chipData.text\"\r\n [iconPosition]='card?.chipData.iconPosition'\r\n [iconPath]=\"card?.chipData.iconPath\" [tooltip]=\"card?.chipData.tooltip\">\r\n </sa-chip>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n @if(!card?.disabled && (card?.actionButton && (card?.showActionActionButton ? card?.actionButton : null))){\r\n <div class=\"sa-card-titleIcon no-margin\">\r\n <sa-card-title-actions>\r\n <sa-button [text]=\"card?.actionButton?.text\" [type]=\"card?.actionButton?.type\" [size]=\"card?.actionButton?.size\"\r\n [state]=\"card?.actionButton?.state\" [iconPosition]=\"card?.actionButton?.iconPosition\" [icon]=\"card?.actionButton?.icon\"\r\n [buttonIconSize]=\"card?.actionButton?.buttonIconSize\" (onClickEvent)=\"onCardClick(card?.source, card?.actionButton, $event)\">\r\n </sa-button>\r\n </sa-card-title-actions>\r\n </div>\r\n }\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>", styles: [".sa-mini-card-title-icon-container .sa-mini-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.sa-mini-card-title-icon-container .sa-mini-card-custom-title sa-icon{display:flex}.sa-mini-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep sa-mini-card .sa-card-titleIcon sa-card-title-actions .sa-card-title-actions{margin-bottom:0}::ng-deep sa-mini-card .disabled-card .sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}\n"], dependencies: [{ kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }, { kind: "component", type: CardCustomHeaderComponent, selector: "sa-card-title-header" }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: ChipsComponent, selector: "sa-chip", inputs: ["id", "iconPath", "text", "type", "state", "filling", "iconPosition", "largeStateIcon", "largeStateText", "tooltip", "className"], outputs: ["onClickEvent"] }, { kind: "component", type: CardTitleActionsComponent, selector: "sa-card-title-actions" }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: StatusDotComponent, selector: "sa-status-dot", inputs: ["config"] }] }); }
|
|
4443
4492
|
}
|
|
4444
4493
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: MiniCardComponent, decorators: [{
|
|
4445
4494
|
type: Component,
|
|
4446
4495
|
args: [{ selector: 'sa-mini-card', standalone: true, imports: [CardComponent, CardCustomHeaderComponent, IconComponent, MatTooltip, ChipsComponent,
|
|
4447
4496
|
CardTitleActionsComponent, ButtonComponent, StatusDotComponent
|
|
4448
|
-
], providers: [IconService], template: "<sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\n [width]=\"card?.width || '471px'\" [height]=\"card?.height || '100px'\" [showHeaderBodyDivider]=\"false\"\n [customWrapperClass]=\"card?.customWrapperClass || customClassWrapper\"\n class=\"{{card?.disabled ? 'disabled-card': 'enabled-card'}}\">\n <sa-card-title-header>\n <div class=\"sa-card-accordion-title-container\">\n <div class=\"sa-mini-card-title-icon-container\">\n <div class=\"sa-mini-card-custom-title\">\n @if(card?.source?.logoUrl){\n <sa-icon [img]=\"card?.source?.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\n }\n <span [matTooltip]=\"card?.source?.tooltip\">\n {{card?.source?.name}}\n @if(card?.source?.count){\n <ng-container>\n <span>({{card?.source?.count}})</span>\n </ng-container>\n }\n </span>\n @if(card?.statusDot){\n <span>\n <sa-status-dot [config]=\"card.statusDot\">\n </sa-status-dot>\n </span>\n }\n @if(card?.chipData){\n <span>\n <sa-chip [type]=\"card?.chipData.type\" [state]=\"card?.chipData.state\"\n [filling]=\"card?.chipData.filling\" [text]=\"card?.chipData.text\"\n [iconPosition]='card?.chipData.iconPosition'\n [iconPath]=\"card?.chipData.iconPath\" [tooltip]=\"card?.chipData.tooltip\">\n </sa-chip>\n </span>\n }\n </div>\n </div>\n @if(!card?.disabled && (card?.actionButton && (card?.showActionActionButton ? card?.actionButton : null))){\n <div class=\"sa-card-titleIcon no-margin\">\n <sa-card-title-actions>\n <sa-button [text]=\"card?.actionButton?.text\" [type]=\"card?.actionButton?.type\" [size]=\"card?.actionButton?.size\"\n [state]=\"card?.actionButton?.state\" [iconPosition]=\"card?.actionButton?.iconPosition\" [icon]=\"card?.actionButton?.icon\"\n [buttonIconSize]=\"card?.actionButton?.buttonIconSize\" (onClickEvent)=\"onCardClick(card?.source, card?.actionButton, $event)\">\n </sa-button>\n </sa-card-title-actions>\n </div>\n }\n </div>\n </sa-card-title-header>\n </sa-card>", styles: [".sa-mini-card-title-icon-container .sa-mini-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.sa-mini-card-title-icon-container .sa-mini-card-custom-title sa-icon{display:flex}.sa-mini-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep sa-mini-card .sa-card-titleIcon sa-card-title-actions .sa-card-title-actions{margin-bottom:0}::ng-deep sa-mini-card .disabled-card .sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}\n"] }]
|
|
4497
|
+
], providers: [IconService], template: "<sa-card [column]=\"false\" [showCardHeader]=\"true\" [showCardBody]=\"false\"\r\n [width]=\"card?.width || '471px'\" [height]=\"card?.height || '100px'\" [showHeaderBodyDivider]=\"false\"\r\n [customWrapperClass]=\"card?.customWrapperClass || customClassWrapper\"\r\n class=\"{{card?.disabled ? 'disabled-card': 'enabled-card'}}\">\r\n <sa-card-title-header>\r\n <div class=\"sa-card-accordion-title-container\">\r\n <div class=\"sa-mini-card-title-icon-container\">\r\n <div class=\"sa-mini-card-custom-title\">\r\n @if(card?.source?.logoUrl){\r\n <sa-icon [img]=\"card?.source?.logoUrl\" [size]=\"'20'\" class=\"d-flex\" [customClass]=\"'auto-dimensions'\"></sa-icon>\r\n }\r\n <span [matTooltip]=\"card?.source?.tooltip\">\r\n {{card?.source?.name}}\r\n @if(card?.source?.count){\r\n <ng-container>\r\n <span>({{card?.source?.count}})</span>\r\n </ng-container>\r\n }\r\n </span>\r\n @if(card?.statusDot){\r\n <span>\r\n <sa-status-dot [config]=\"card.statusDot\">\r\n </sa-status-dot>\r\n </span>\r\n }\r\n @if(card?.chipData){\r\n <span>\r\n <sa-chip [type]=\"card?.chipData.type\" [state]=\"card?.chipData.state\"\r\n [filling]=\"card?.chipData.filling\" [text]=\"card?.chipData.text\"\r\n [iconPosition]='card?.chipData.iconPosition'\r\n [iconPath]=\"card?.chipData.iconPath\" [tooltip]=\"card?.chipData.tooltip\">\r\n </sa-chip>\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n @if(!card?.disabled && (card?.actionButton && (card?.showActionActionButton ? card?.actionButton : null))){\r\n <div class=\"sa-card-titleIcon no-margin\">\r\n <sa-card-title-actions>\r\n <sa-button [text]=\"card?.actionButton?.text\" [type]=\"card?.actionButton?.type\" [size]=\"card?.actionButton?.size\"\r\n [state]=\"card?.actionButton?.state\" [iconPosition]=\"card?.actionButton?.iconPosition\" [icon]=\"card?.actionButton?.icon\"\r\n [buttonIconSize]=\"card?.actionButton?.buttonIconSize\" (onClickEvent)=\"onCardClick(card?.source, card?.actionButton, $event)\">\r\n </sa-button>\r\n </sa-card-title-actions>\r\n </div>\r\n }\r\n </div>\r\n </sa-card-title-header>\r\n </sa-card>", styles: [".sa-mini-card-title-icon-container .sa-mini-card-custom-title{display:flex;align-items:center;gap:var(--small-8px, 8px)}.sa-mini-card-title-icon-container .sa-mini-card-custom-title sa-icon{display:flex}.sa-mini-card-custom-title{color:var(--text-highemphasis);font-family:var(--font);font-size:var(--small-14px);font-style:normal;font-weight:500;line-height:var(--medium-20px);letter-spacing:.1px}::ng-deep sa-mini-card .sa-card-titleIcon sa-card-title-actions .sa-card-title-actions{margin-bottom:0}::ng-deep sa-mini-card .disabled-card .sa-card-wrapper{border:1px solid var(--grey-50);background:var(--structural-neutral3, #FAFAFA)}::ng-deep .enabled-card .sa-card-titleIcon{opacity:0;transition:opacity .3s ease}::ng-deep .enabled-card:hover .sa-card-titleIcon{opacity:1}::ng-deep .disabled-card .sa-card-titleIcon{opacity:0}\n"] }]
|
|
4449
4498
|
}], propDecorators: { cardData: [{
|
|
4450
4499
|
type: Input
|
|
4451
4500
|
}], onCardClickEvent: [{
|
|
@@ -4458,11 +4507,11 @@ class PageLayoutComponent {
|
|
|
4458
4507
|
this.showFooterContent = false;
|
|
4459
4508
|
}
|
|
4460
4509
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4461
|
-
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"] }); }
|
|
4510
|
+
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'\">\r\n <div class=\"layout-inner-container\"\r\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\r\n @if (showProgressBarContent) {\r\n <div class=\"progress-bar-container\">\r\n <ng-content select=\"[progress-bar-content]\"></ng-content>\r\n </div>\r\n }\r\n <div class=\"content-container\">\r\n <div class=\"left-section\">\r\n <div class=\"top-section\">\r\n <ng-content select=\"[top-content]\"></ng-content>\r\n </div>\r\n <div class=\"left-wrapper\">\r\n <ng-content select=\"[left-content]\"></ng-content>\r\n </div>\r\n @if (showFooterContent) {\r\n <div class=\"footer-section\">\r\n <ng-content select=\"[footer-content]\"></ng-content>\r\n </div>\r\n }\r\n </div>\r\n @if (showRightContent) {\r\n <div class=\"right-section\">\r\n <ng-content select=\"[right-content]\"></ng-content>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\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"] }); }
|
|
4462
4511
|
}
|
|
4463
4512
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: PageLayoutComponent, decorators: [{
|
|
4464
4513
|
type: Component,
|
|
4465
|
-
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"] }]
|
|
4514
|
+
args: [{ selector: 'sa-page-layout', standalone: true, imports: [], template: "<div class=\"layout-container\" [class]=\"showProgressBarContent === false ? 'no-padding': 'padding'\">\r\n <div class=\"layout-inner-container\"\r\n [class]=\"showProgressBarContent === false ? 'no-border-radius': 'border-radius'\">\r\n @if (showProgressBarContent) {\r\n <div class=\"progress-bar-container\">\r\n <ng-content select=\"[progress-bar-content]\"></ng-content>\r\n </div>\r\n }\r\n <div class=\"content-container\">\r\n <div class=\"left-section\">\r\n <div class=\"top-section\">\r\n <ng-content select=\"[top-content]\"></ng-content>\r\n </div>\r\n <div class=\"left-wrapper\">\r\n <ng-content select=\"[left-content]\"></ng-content>\r\n </div>\r\n @if (showFooterContent) {\r\n <div class=\"footer-section\">\r\n <ng-content select=\"[footer-content]\"></ng-content>\r\n </div>\r\n }\r\n </div>\r\n @if (showRightContent) {\r\n <div class=\"right-section\">\r\n <ng-content select=\"[right-content]\"></ng-content>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\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"] }]
|
|
4466
4515
|
}], propDecorators: { showRightContent: [{
|
|
4467
4516
|
type: Input
|
|
4468
4517
|
}], showFooterContent: [{
|
|
@@ -4482,11 +4531,11 @@ class ProgressBarComponent {
|
|
|
4482
4531
|
ngOnInit() {
|
|
4483
4532
|
}
|
|
4484
4533
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4485
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProgressBarComponent, isStandalone: true, selector: "sa-progress-bar", inputs: { progressValue: "progressValue", borderRadius: "borderRadius", height: "height" }, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\n '--dynamic-height': height ,\n '--dynamic-border-radius': borderRadius \n }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}::ng-deep .progress-bar .mdc-linear-progress__buffer-bar{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
4534
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: ProgressBarComponent, isStandalone: true, selector: "sa-progress-bar", inputs: { progressValue: "progressValue", borderRadius: "borderRadius", height: "height" }, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\r\n '--dynamic-height': height ,\r\n '--dynamic-border-radius': borderRadius \r\n }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}::ng-deep .progress-bar .mdc-linear-progress__buffer-bar{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$9.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
4486
4535
|
}
|
|
4487
4536
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ProgressBarComponent, decorators: [{
|
|
4488
4537
|
type: Component,
|
|
4489
|
-
args: [{ selector: 'sa-progress-bar', standalone: true, imports: [MatProgressBarModule, NgStyle], template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\n '--dynamic-height': height ,\n '--dynamic-border-radius': borderRadius \n }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}::ng-deep .progress-bar .mdc-linear-progress__buffer-bar{background-color:transparent}\n"] }]
|
|
4538
|
+
args: [{ selector: 'sa-progress-bar', standalone: true, imports: [MatProgressBarModule, NgStyle], template: "<mat-progress-bar mode=\"determinate\" [value]=\"progressValue\" class=\"progress-bar\" [ngStyle]=\"{\r\n '--dynamic-height': height ,\r\n '--dynamic-border-radius': borderRadius \r\n }\"></mat-progress-bar>", styles: [".progress-bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px);overflow:hidden;background-color:transparent;--mdc-linear-progress-active-indicator-color: var(--primary-500, #7F56D9);--mdc-linear-progress-track-color: white}::ng-deep .progress-bar .mdc-linear-progress__primary-bar{background-color:var(--mdc-linear-progress-active-indicator-color)}::ng-deep .progress-bar .mdc-linear-progress__bar{height:var(--dynamic-height, 8px);border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__bar-inner{border-top-style:none;border-radius:var(--dynamic-border-radius, 20px)}::ng-deep .progress-bar .mdc-linear-progress__secondary-bar{background-color:var(--mdc-linear-progress-track-color)}::ng-deep .progress-bar .mdc-linear-progress__buffer-bar{background-color:transparent}\n"] }]
|
|
4490
4539
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { progressValue: [{
|
|
4491
4540
|
type: Input
|
|
4492
4541
|
}], borderRadius: [{
|
|
@@ -4724,7 +4773,7 @@ class QueryBuilderComponent {
|
|
|
4724
4773
|
this.queryChange.emit(this.model);
|
|
4725
4774
|
}
|
|
4726
4775
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4727
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: QueryBuilderComponent, isStandalone: true, selector: "sa-query-builder", inputs: { config: "config" }, outputs: { queryChange: "queryChange" }, providers: [MatNativeDateModule], ngImport: i0, template: "<div class=\"sa-query-builder\">\n <form [formGroup]=\"form\">\n <div class=\"query-builder-header\">\n <div class=\"where-label\">Where</div>\n </div>\n\n <div class=\"query-builder-body\">\n <div class=\"rules-container\" formArrayName=\"rules\">\n @for (rule of rulesArray.controls; track $index) {\n <div class=\"rule-row\" [formGroupName]=\"$index\">\n <!-- Condition selector (And/Or) -->\n @if ($index > 0) {\n <div class=\"condition-selector\">\n <mat-form-field appearance=\"fill\">\n <mat-select [value]=\"getRowCondition($index)\" (selectionChange)=\"setRowCondition($index, $event.value)\">\n <mat-option value=\"and\">And</mat-option>\n <mat-option value=\"or\">Or</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n } @else {\n <div class=\"condition-placeholder\"></div>\n }\n \n <!-- Field selection -->\n <mat-form-field class=\"field-select\">\n <mat-label>Select a filter</mat-label>\n <mat-select formControlName=\"field\" (selectionChange)=\"onFieldChange($index, $event.value)\">\n @for (field of config.fields; track field.key) {\n <mat-option [value]=\"field.key\">\n {{ field.label }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n\n <!-- Operator selection -->\n <mat-form-field class=\"operator-select\">\n <mat-select formControlName=\"operator\" (selectionChange)=\"onOperatorChange($index, $event.value, rule.value.field)\">\n @for (op of getOperatorsForField(rule.value.field); track op.value) {\n <mat-option [value]=\"op.value\">\n {{ op.label }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n\n <!-- Value input based on field type -->\n @switch (getFieldType(rule.value.field)) {\n @case ('string') {\n <mat-form-field class=\"value-input\">\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\n </mat-form-field>\n }\n @case ('number') {\n <mat-form-field class=\"value-input\">\n <input matInput type=\"number\" formControlName=\"value\" placeholder=\"Enter a value...\">\n </mat-form-field>\n }\n @case ('date') {\n @if (!isOperatorBetween($index)) {\n <mat-form-field class=\"value-input\">\n <input matInput type=\"date\" [matDatepicker]=\"picker\" formControlName=\"value\" (click)=\"picker.open()\">\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n } @else {\n <div class=\"date-range-container\">\n <mat-form-field class=\"value-input start-date\">\n <mat-label>Start date</mat-label>\n <input matInput [matDatepicker]=\"startPicker\" formControlName=\"valueStart\" (click)=\"startPicker.open()\" (dateChange)=\"onStartDateChange($index, $event)\">\n <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n <mat-datepicker #startPicker></mat-datepicker>\n </mat-form-field>\n <mat-form-field class=\"value-input end-date\">\n <mat-label>End date</mat-label>\n <input matInput [matDatepicker]=\"endPicker\" formControlName=\"valueEnd\" (click)=\"endPicker.open()\" [min]=\"getMinEndDate($index)\">\n <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n <mat-datepicker #endPicker [startAt]=\"getMinEndDate($index)\"></mat-datepicker>\n </mat-form-field>\n </div>\n }\n }\n @case ('boolean') {\n <mat-form-field class=\"value-input\">\n <mat-select formControlName=\"value\">\n <mat-option [value]=\"true\">True</mat-option>\n <mat-option [value]=\"false\">False</mat-option>\n </mat-select>\n </mat-form-field>\n }\n @case ('select') {\n <mat-form-field class=\"value-input\">\n <mat-select formControlName=\"value\">\n @for (option of getFieldOptions(rule.value.field); track option.value) {\n <mat-option [value]=\"option.value\">\n {{ option.label }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n @default {\n <mat-form-field class=\"value-input\">\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\n </mat-form-field>\n }\n }\n\n <!-- Remove rule button -->\n <button mat-icon-button class=\"remove-rule-btn\" \n (click)=\"removeRule($index)\" \n [disabled]=\"rulesArray.length === 1\"\n matTooltip=\"Remove filter\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n </div>\n\n <!-- Add rule button -->\n <div class=\"add-rule-container\">\n <button mat-button color=\"primary\" class=\"add-rule-btn\" (click)=\"addRule()\">\n <mat-icon>add</mat-icon> Add a filter\n </button>\n </div>\n </div>\n\n <div class=\"query-builder-footer\">\n <button mat-button class=\"reset-btn\" (click)=\"resetQuery()\">Reset</button>\n <button mat-raised-button color=\"primary\" class=\"apply-btn\" (click)=\"applyQuery()\">Apply filters</button>\n </div>\n </form>\n</div>\n", styles: [".sa-query-builder{display:flex;flex-direction:column;width:100%;background-color:#fff;border-radius:8px;padding:16px;box-sizing:border-box}.sa-query-builder .query-builder-header{display:flex;align-items:center;margin-bottom:16px;height:36px;padding-left:128px}.sa-query-builder .query-builder-header .where-label{font-size:16px;font-weight:500;color:#000000de;margin-right:16px;line-height:36px}.sa-query-builder .query-builder-body .rules-container{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.sa-query-builder .query-builder-body .rules-container .rule-row{display:flex;align-items:center;gap:12px;width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector .mat-form-field{width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0;margin:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-infix{padding:.5em 0;border-top:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-placeholder{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .field-select{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .operator-select{flex:1;min-width:100px}.sa-query-builder .query-builder-body .rules-container .rule-row .value-input{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container{display:flex;flex:2;gap:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .start-date,.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .end-date{flex:1;min-width:140px}.sa-query-builder .query-builder-body .rules-container .rule-row .remove-rule-btn{color:#0000008a}.sa-query-builder .query-builder-body .add-rule-container{margin-bottom:16px}.sa-query-builder .query-builder-body .add-rule-container .add-rule-btn{display:flex;align-items:center;gap:4px;color:#673ab7;font-weight:500}.sa-query-builder .query-builder-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.sa-query-builder .query-builder-footer .reset-btn{color:#0000008a}.sa-query-builder .query-builder-footer .apply-btn{background-color:#673ab7;color:#fff}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-form-field-infix{min-height:40px}::ng-deep .mat-mdc-select-panel{max-height:300px}::ng-deep .mat-mdc-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
|
|
4776
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: QueryBuilderComponent, isStandalone: true, selector: "sa-query-builder", inputs: { config: "config" }, outputs: { queryChange: "queryChange" }, providers: [MatNativeDateModule], ngImport: i0, template: "<div class=\"sa-query-builder\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"query-builder-header\">\r\n <div class=\"where-label\">Where</div>\r\n </div>\r\n\r\n <div class=\"query-builder-body\">\r\n <div class=\"rules-container\" formArrayName=\"rules\">\r\n @for (rule of rulesArray.controls; track $index) {\r\n <div class=\"rule-row\" [formGroupName]=\"$index\">\r\n <!-- Condition selector (And/Or) -->\r\n @if ($index > 0) {\r\n <div class=\"condition-selector\">\r\n <mat-form-field appearance=\"fill\">\r\n <mat-select [value]=\"getRowCondition($index)\" (selectionChange)=\"setRowCondition($index, $event.value)\">\r\n <mat-option value=\"and\">And</mat-option>\r\n <mat-option value=\"or\">Or</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n } @else {\r\n <div class=\"condition-placeholder\"></div>\r\n }\r\n \r\n <!-- Field selection -->\r\n <mat-form-field class=\"field-select\">\r\n <mat-label>Select a filter</mat-label>\r\n <mat-select formControlName=\"field\" (selectionChange)=\"onFieldChange($index, $event.value)\">\r\n @for (field of config.fields; track field.key) {\r\n <mat-option [value]=\"field.key\">\r\n {{ field.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <!-- Operator selection -->\r\n <mat-form-field class=\"operator-select\">\r\n <mat-select formControlName=\"operator\" (selectionChange)=\"onOperatorChange($index, $event.value, rule.value.field)\">\r\n @for (op of getOperatorsForField(rule.value.field); track op.value) {\r\n <mat-option [value]=\"op.value\">\r\n {{ op.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <!-- Value input based on field type -->\r\n @switch (getFieldType(rule.value.field)) {\r\n @case ('string') {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n @case ('number') {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput type=\"number\" formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n @case ('date') {\r\n @if (!isOperatorBetween($index)) {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput type=\"date\" [matDatepicker]=\"picker\" formControlName=\"value\" (click)=\"picker.open()\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n } @else {\r\n <div class=\"date-range-container\">\r\n <mat-form-field class=\"value-input start-date\">\r\n <mat-label>Start date</mat-label>\r\n <input matInput [matDatepicker]=\"startPicker\" formControlName=\"valueStart\" (click)=\"startPicker.open()\" (dateChange)=\"onStartDateChange($index, $event)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #startPicker></mat-datepicker>\r\n </mat-form-field>\r\n <mat-form-field class=\"value-input end-date\">\r\n <mat-label>End date</mat-label>\r\n <input matInput [matDatepicker]=\"endPicker\" formControlName=\"valueEnd\" (click)=\"endPicker.open()\" [min]=\"getMinEndDate($index)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #endPicker [startAt]=\"getMinEndDate($index)\"></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n }\r\n }\r\n @case ('boolean') {\r\n <mat-form-field class=\"value-input\">\r\n <mat-select formControlName=\"value\">\r\n <mat-option [value]=\"true\">True</mat-option>\r\n <mat-option [value]=\"false\">False</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n @case ('select') {\r\n <mat-form-field class=\"value-input\">\r\n <mat-select formControlName=\"value\">\r\n @for (option of getFieldOptions(rule.value.field); track option.value) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n @default {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n }\r\n\r\n <!-- Remove rule button -->\r\n <button mat-icon-button class=\"remove-rule-btn\" \r\n (click)=\"removeRule($index)\" \r\n [disabled]=\"rulesArray.length === 1\"\r\n matTooltip=\"Remove filter\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Add rule button -->\r\n <div class=\"add-rule-container\">\r\n <button mat-button color=\"primary\" class=\"add-rule-btn\" (click)=\"addRule()\">\r\n <mat-icon>add</mat-icon> Add a filter\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"query-builder-footer\">\r\n <button mat-button class=\"reset-btn\" (click)=\"resetQuery()\">Reset</button>\r\n <button mat-raised-button color=\"primary\" class=\"apply-btn\" (click)=\"applyQuery()\">Apply filters</button>\r\n </div>\r\n </form>\r\n</div>\r\n", styles: [".sa-query-builder{display:flex;flex-direction:column;width:100%;background-color:#fff;border-radius:8px;padding:16px;box-sizing:border-box}.sa-query-builder .query-builder-header{display:flex;align-items:center;margin-bottom:16px;height:36px;padding-left:128px}.sa-query-builder .query-builder-header .where-label{font-size:16px;font-weight:500;color:#000000de;margin-right:16px;line-height:36px}.sa-query-builder .query-builder-body .rules-container{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.sa-query-builder .query-builder-body .rules-container .rule-row{display:flex;align-items:center;gap:12px;width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector .mat-form-field{width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0;margin:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-infix{padding:.5em 0;border-top:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-placeholder{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .field-select{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .operator-select{flex:1;min-width:100px}.sa-query-builder .query-builder-body .rules-container .rule-row .value-input{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container{display:flex;flex:2;gap:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .start-date,.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .end-date{flex:1;min-width:140px}.sa-query-builder .query-builder-body .rules-container .rule-row .remove-rule-btn{color:#0000008a}.sa-query-builder .query-builder-body .add-rule-container{margin-bottom:16px}.sa-query-builder .query-builder-body .add-rule-container .add-rule-btn{display:flex;align-items:center;gap:4px;color:#673ab7;font-weight:500}.sa-query-builder .query-builder-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.sa-query-builder .query-builder-footer .reset-btn{color:#0000008a}.sa-query-builder .query-builder-footer .apply-btn{background-color:#673ab7;color:#fff}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-form-field-infix{min-height:40px}::ng-deep .mat-mdc-select-panel{max-height:300px}::ng-deep .mat-mdc-option{font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i2$5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i5$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i2$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: MatButtonToggleModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
|
|
4728
4777
|
}
|
|
4729
4778
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderComponent, decorators: [{
|
|
4730
4779
|
type: Component,
|
|
@@ -4741,7 +4790,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
4741
4790
|
MatButtonToggleModule,
|
|
4742
4791
|
MatDatepickerModule,
|
|
4743
4792
|
MatNativeDateModule
|
|
4744
|
-
], template: "<div class=\"sa-query-builder\">\n <form [formGroup]=\"form\">\n <div class=\"query-builder-header\">\n <div class=\"where-label\">Where</div>\n </div>\n\n <div class=\"query-builder-body\">\n <div class=\"rules-container\" formArrayName=\"rules\">\n @for (rule of rulesArray.controls; track $index) {\n <div class=\"rule-row\" [formGroupName]=\"$index\">\n <!-- Condition selector (And/Or) -->\n @if ($index > 0) {\n <div class=\"condition-selector\">\n <mat-form-field appearance=\"fill\">\n <mat-select [value]=\"getRowCondition($index)\" (selectionChange)=\"setRowCondition($index, $event.value)\">\n <mat-option value=\"and\">And</mat-option>\n <mat-option value=\"or\">Or</mat-option>\n </mat-select>\n </mat-form-field>\n </div>\n } @else {\n <div class=\"condition-placeholder\"></div>\n }\n \n <!-- Field selection -->\n <mat-form-field class=\"field-select\">\n <mat-label>Select a filter</mat-label>\n <mat-select formControlName=\"field\" (selectionChange)=\"onFieldChange($index, $event.value)\">\n @for (field of config.fields; track field.key) {\n <mat-option [value]=\"field.key\">\n {{ field.label }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n\n <!-- Operator selection -->\n <mat-form-field class=\"operator-select\">\n <mat-select formControlName=\"operator\" (selectionChange)=\"onOperatorChange($index, $event.value, rule.value.field)\">\n @for (op of getOperatorsForField(rule.value.field); track op.value) {\n <mat-option [value]=\"op.value\">\n {{ op.label }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n\n <!-- Value input based on field type -->\n @switch (getFieldType(rule.value.field)) {\n @case ('string') {\n <mat-form-field class=\"value-input\">\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\n </mat-form-field>\n }\n @case ('number') {\n <mat-form-field class=\"value-input\">\n <input matInput type=\"number\" formControlName=\"value\" placeholder=\"Enter a value...\">\n </mat-form-field>\n }\n @case ('date') {\n @if (!isOperatorBetween($index)) {\n <mat-form-field class=\"value-input\">\n <input matInput type=\"date\" [matDatepicker]=\"picker\" formControlName=\"value\" (click)=\"picker.open()\">\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker></mat-datepicker>\n </mat-form-field>\n } @else {\n <div class=\"date-range-container\">\n <mat-form-field class=\"value-input start-date\">\n <mat-label>Start date</mat-label>\n <input matInput [matDatepicker]=\"startPicker\" formControlName=\"valueStart\" (click)=\"startPicker.open()\" (dateChange)=\"onStartDateChange($index, $event)\">\n <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n <mat-datepicker #startPicker></mat-datepicker>\n </mat-form-field>\n <mat-form-field class=\"value-input end-date\">\n <mat-label>End date</mat-label>\n <input matInput [matDatepicker]=\"endPicker\" formControlName=\"valueEnd\" (click)=\"endPicker.open()\" [min]=\"getMinEndDate($index)\">\n <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n <mat-datepicker #endPicker [startAt]=\"getMinEndDate($index)\"></mat-datepicker>\n </mat-form-field>\n </div>\n }\n }\n @case ('boolean') {\n <mat-form-field class=\"value-input\">\n <mat-select formControlName=\"value\">\n <mat-option [value]=\"true\">True</mat-option>\n <mat-option [value]=\"false\">False</mat-option>\n </mat-select>\n </mat-form-field>\n }\n @case ('select') {\n <mat-form-field class=\"value-input\">\n <mat-select formControlName=\"value\">\n @for (option of getFieldOptions(rule.value.field); track option.value) {\n <mat-option [value]=\"option.value\">\n {{ option.label }}\n </mat-option>\n }\n </mat-select>\n </mat-form-field>\n }\n @default {\n <mat-form-field class=\"value-input\">\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\n </mat-form-field>\n }\n }\n\n <!-- Remove rule button -->\n <button mat-icon-button class=\"remove-rule-btn\" \n (click)=\"removeRule($index)\" \n [disabled]=\"rulesArray.length === 1\"\n matTooltip=\"Remove filter\">\n <mat-icon>close</mat-icon>\n </button>\n </div>\n }\n </div>\n\n <!-- Add rule button -->\n <div class=\"add-rule-container\">\n <button mat-button color=\"primary\" class=\"add-rule-btn\" (click)=\"addRule()\">\n <mat-icon>add</mat-icon> Add a filter\n </button>\n </div>\n </div>\n\n <div class=\"query-builder-footer\">\n <button mat-button class=\"reset-btn\" (click)=\"resetQuery()\">Reset</button>\n <button mat-raised-button color=\"primary\" class=\"apply-btn\" (click)=\"applyQuery()\">Apply filters</button>\n </div>\n </form>\n</div>\n", styles: [".sa-query-builder{display:flex;flex-direction:column;width:100%;background-color:#fff;border-radius:8px;padding:16px;box-sizing:border-box}.sa-query-builder .query-builder-header{display:flex;align-items:center;margin-bottom:16px;height:36px;padding-left:128px}.sa-query-builder .query-builder-header .where-label{font-size:16px;font-weight:500;color:#000000de;margin-right:16px;line-height:36px}.sa-query-builder .query-builder-body .rules-container{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.sa-query-builder .query-builder-body .rules-container .rule-row{display:flex;align-items:center;gap:12px;width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector .mat-form-field{width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0;margin:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-infix{padding:.5em 0;border-top:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-placeholder{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .field-select{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .operator-select{flex:1;min-width:100px}.sa-query-builder .query-builder-body .rules-container .rule-row .value-input{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container{display:flex;flex:2;gap:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .start-date,.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .end-date{flex:1;min-width:140px}.sa-query-builder .query-builder-body .rules-container .rule-row .remove-rule-btn{color:#0000008a}.sa-query-builder .query-builder-body .add-rule-container{margin-bottom:16px}.sa-query-builder .query-builder-body .add-rule-container .add-rule-btn{display:flex;align-items:center;gap:4px;color:#673ab7;font-weight:500}.sa-query-builder .query-builder-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.sa-query-builder .query-builder-footer .reset-btn{color:#0000008a}.sa-query-builder .query-builder-footer .apply-btn{background-color:#673ab7;color:#fff}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-form-field-infix{min-height:40px}::ng-deep .mat-mdc-select-panel{max-height:300px}::ng-deep .mat-mdc-option{font-size:14px}\n"] }]
|
|
4793
|
+
], template: "<div class=\"sa-query-builder\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"query-builder-header\">\r\n <div class=\"where-label\">Where</div>\r\n </div>\r\n\r\n <div class=\"query-builder-body\">\r\n <div class=\"rules-container\" formArrayName=\"rules\">\r\n @for (rule of rulesArray.controls; track $index) {\r\n <div class=\"rule-row\" [formGroupName]=\"$index\">\r\n <!-- Condition selector (And/Or) -->\r\n @if ($index > 0) {\r\n <div class=\"condition-selector\">\r\n <mat-form-field appearance=\"fill\">\r\n <mat-select [value]=\"getRowCondition($index)\" (selectionChange)=\"setRowCondition($index, $event.value)\">\r\n <mat-option value=\"and\">And</mat-option>\r\n <mat-option value=\"or\">Or</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n } @else {\r\n <div class=\"condition-placeholder\"></div>\r\n }\r\n \r\n <!-- Field selection -->\r\n <mat-form-field class=\"field-select\">\r\n <mat-label>Select a filter</mat-label>\r\n <mat-select formControlName=\"field\" (selectionChange)=\"onFieldChange($index, $event.value)\">\r\n @for (field of config.fields; track field.key) {\r\n <mat-option [value]=\"field.key\">\r\n {{ field.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <!-- Operator selection -->\r\n <mat-form-field class=\"operator-select\">\r\n <mat-select formControlName=\"operator\" (selectionChange)=\"onOperatorChange($index, $event.value, rule.value.field)\">\r\n @for (op of getOperatorsForField(rule.value.field); track op.value) {\r\n <mat-option [value]=\"op.value\">\r\n {{ op.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n\r\n <!-- Value input based on field type -->\r\n @switch (getFieldType(rule.value.field)) {\r\n @case ('string') {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n @case ('number') {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput type=\"number\" formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n @case ('date') {\r\n @if (!isOperatorBetween($index)) {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput type=\"date\" [matDatepicker]=\"picker\" formControlName=\"value\" (click)=\"picker.open()\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker></mat-datepicker>\r\n </mat-form-field>\r\n } @else {\r\n <div class=\"date-range-container\">\r\n <mat-form-field class=\"value-input start-date\">\r\n <mat-label>Start date</mat-label>\r\n <input matInput [matDatepicker]=\"startPicker\" formControlName=\"valueStart\" (click)=\"startPicker.open()\" (dateChange)=\"onStartDateChange($index, $event)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #startPicker></mat-datepicker>\r\n </mat-form-field>\r\n <mat-form-field class=\"value-input end-date\">\r\n <mat-label>End date</mat-label>\r\n <input matInput [matDatepicker]=\"endPicker\" formControlName=\"valueEnd\" (click)=\"endPicker.open()\" [min]=\"getMinEndDate($index)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #endPicker [startAt]=\"getMinEndDate($index)\"></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n }\r\n }\r\n @case ('boolean') {\r\n <mat-form-field class=\"value-input\">\r\n <mat-select formControlName=\"value\">\r\n <mat-option [value]=\"true\">True</mat-option>\r\n <mat-option [value]=\"false\">False</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n @case ('select') {\r\n <mat-form-field class=\"value-input\">\r\n <mat-select formControlName=\"value\">\r\n @for (option of getFieldOptions(rule.value.field); track option.value) {\r\n <mat-option [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n </mat-form-field>\r\n }\r\n @default {\r\n <mat-form-field class=\"value-input\">\r\n <input matInput formControlName=\"value\" placeholder=\"Enter a value...\">\r\n </mat-form-field>\r\n }\r\n }\r\n\r\n <!-- Remove rule button -->\r\n <button mat-icon-button class=\"remove-rule-btn\" \r\n (click)=\"removeRule($index)\" \r\n [disabled]=\"rulesArray.length === 1\"\r\n matTooltip=\"Remove filter\">\r\n <mat-icon>close</mat-icon>\r\n </button>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Add rule button -->\r\n <div class=\"add-rule-container\">\r\n <button mat-button color=\"primary\" class=\"add-rule-btn\" (click)=\"addRule()\">\r\n <mat-icon>add</mat-icon> Add a filter\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div class=\"query-builder-footer\">\r\n <button mat-button class=\"reset-btn\" (click)=\"resetQuery()\">Reset</button>\r\n <button mat-raised-button color=\"primary\" class=\"apply-btn\" (click)=\"applyQuery()\">Apply filters</button>\r\n </div>\r\n </form>\r\n</div>\r\n", styles: [".sa-query-builder{display:flex;flex-direction:column;width:100%;background-color:#fff;border-radius:8px;padding:16px;box-sizing:border-box}.sa-query-builder .query-builder-header{display:flex;align-items:center;margin-bottom:16px;height:36px;padding-left:128px}.sa-query-builder .query-builder-header .where-label{font-size:16px;font-weight:500;color:#000000de;margin-right:16px;line-height:36px}.sa-query-builder .query-builder-body .rules-container{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}.sa-query-builder .query-builder-body .rules-container .rule-row{display:flex;align-items:center;gap:12px;width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector .mat-form-field{width:100%}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-wrapper{padding-bottom:0;margin:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-selector ::ng-deep .mat-form-field-infix{padding:.5em 0;border-top:0}.sa-query-builder .query-builder-body .rules-container .rule-row .condition-placeholder{width:120px;min-width:120px;margin-right:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .field-select{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .operator-select{flex:1;min-width:100px}.sa-query-builder .query-builder-body .rules-container .rule-row .value-input{flex:2;min-width:180px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container{display:flex;flex:2;gap:8px}.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .start-date,.sa-query-builder .query-builder-body .rules-container .rule-row .date-range-container .end-date{flex:1;min-width:140px}.sa-query-builder .query-builder-body .rules-container .rule-row .remove-rule-btn{color:#0000008a}.sa-query-builder .query-builder-body .add-rule-container{margin-bottom:16px}.sa-query-builder .query-builder-body .add-rule-container .add-rule-btn{display:flex;align-items:center;gap:4px;color:#673ab7;font-weight:500}.sa-query-builder .query-builder-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.sa-query-builder .query-builder-footer .reset-btn{color:#0000008a}.sa-query-builder .query-builder-footer .apply-btn{background-color:#673ab7;color:#fff}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .mat-mdc-form-field-infix{min-height:40px}::ng-deep .mat-mdc-select-panel{max-height:300px}::ng-deep .mat-mdc-option{font-size:14px}\n"] }]
|
|
4745
4794
|
}], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { config: [{
|
|
4746
4795
|
type: Input
|
|
4747
4796
|
}], queryChange: [{
|
|
@@ -4928,54 +4977,54 @@ class QueryBuilderDemoComponent {
|
|
|
4928
4977
|
this.queryJson = JSON.stringify(this.queryBuilderService.queryToJson(query), null, 2);
|
|
4929
4978
|
}
|
|
4930
4979
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderDemoComponent, deps: [{ token: QueryBuilderService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4931
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: QueryBuilderDemoComponent, isStandalone: true, selector: "sa-query-builder-demo", ngImport: i0, template: `
|
|
4932
|
-
<mat-card>
|
|
4933
|
-
<mat-card-header>
|
|
4934
|
-
<mat-card-title>Query Builder Demo</mat-card-title>
|
|
4935
|
-
</mat-card-header>
|
|
4936
|
-
<mat-card-content>
|
|
4937
|
-
<sa-query-builder [config]="queryConfig" (queryChange)="onQueryChange($event)"></sa-query-builder>
|
|
4938
|
-
|
|
4939
|
-
<div class="query-result" *ngIf="queryString">
|
|
4940
|
-
<h3>Query Result:</h3>
|
|
4941
|
-
<pre>{{ queryString }}</pre>
|
|
4942
|
-
<h3>JSON:</h3>
|
|
4943
|
-
<pre>{{ queryJson }}</pre>
|
|
4944
|
-
<h3>Per-Row Conditions:</h3>
|
|
4945
|
-
<ul>
|
|
4946
|
-
<li *ngFor="let rule of currentQuery?.rules; let i = index">
|
|
4947
|
-
Row {{ i + 1 }}: {{ i === 0 ? 'First row' : rule.condition?.toUpperCase() }}
|
|
4948
|
-
</li>
|
|
4949
|
-
</ul>
|
|
4950
|
-
</div>
|
|
4951
|
-
</mat-card-content>
|
|
4952
|
-
</mat-card>
|
|
4980
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: QueryBuilderDemoComponent, isStandalone: true, selector: "sa-query-builder-demo", ngImport: i0, template: `
|
|
4981
|
+
<mat-card>
|
|
4982
|
+
<mat-card-header>
|
|
4983
|
+
<mat-card-title>Query Builder Demo</mat-card-title>
|
|
4984
|
+
</mat-card-header>
|
|
4985
|
+
<mat-card-content>
|
|
4986
|
+
<sa-query-builder [config]="queryConfig" (queryChange)="onQueryChange($event)"></sa-query-builder>
|
|
4987
|
+
|
|
4988
|
+
<div class="query-result" *ngIf="queryString">
|
|
4989
|
+
<h3>Query Result:</h3>
|
|
4990
|
+
<pre>{{ queryString }}</pre>
|
|
4991
|
+
<h3>JSON:</h3>
|
|
4992
|
+
<pre>{{ queryJson }}</pre>
|
|
4993
|
+
<h3>Per-Row Conditions:</h3>
|
|
4994
|
+
<ul>
|
|
4995
|
+
<li *ngFor="let rule of currentQuery?.rules; let i = index">
|
|
4996
|
+
Row {{ i + 1 }}: {{ i === 0 ? 'First row' : rule.condition?.toUpperCase() }}
|
|
4997
|
+
</li>
|
|
4998
|
+
</ul>
|
|
4999
|
+
</div>
|
|
5000
|
+
</mat-card-content>
|
|
5001
|
+
</mat-card>
|
|
4953
5002
|
`, isInline: true, styles: [".query-result{margin-top:20px;padding:16px;background-color:#f5f5f5;border-radius:4px}pre{white-space:pre-wrap;word-break:break-all;background-color:#e0e0e0;padding:8px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: QueryBuilderComponent, selector: "sa-query-builder", inputs: ["config"], outputs: ["queryChange"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }] }); }
|
|
4954
5003
|
}
|
|
4955
5004
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderDemoComponent, decorators: [{
|
|
4956
5005
|
type: Component,
|
|
4957
|
-
args: [{ selector: 'sa-query-builder-demo', standalone: true, imports: [CommonModule, QueryBuilderComponent, MatCardModule], template: `
|
|
4958
|
-
<mat-card>
|
|
4959
|
-
<mat-card-header>
|
|
4960
|
-
<mat-card-title>Query Builder Demo</mat-card-title>
|
|
4961
|
-
</mat-card-header>
|
|
4962
|
-
<mat-card-content>
|
|
4963
|
-
<sa-query-builder [config]="queryConfig" (queryChange)="onQueryChange($event)"></sa-query-builder>
|
|
4964
|
-
|
|
4965
|
-
<div class="query-result" *ngIf="queryString">
|
|
4966
|
-
<h3>Query Result:</h3>
|
|
4967
|
-
<pre>{{ queryString }}</pre>
|
|
4968
|
-
<h3>JSON:</h3>
|
|
4969
|
-
<pre>{{ queryJson }}</pre>
|
|
4970
|
-
<h3>Per-Row Conditions:</h3>
|
|
4971
|
-
<ul>
|
|
4972
|
-
<li *ngFor="let rule of currentQuery?.rules; let i = index">
|
|
4973
|
-
Row {{ i + 1 }}: {{ i === 0 ? 'First row' : rule.condition?.toUpperCase() }}
|
|
4974
|
-
</li>
|
|
4975
|
-
</ul>
|
|
4976
|
-
</div>
|
|
4977
|
-
</mat-card-content>
|
|
4978
|
-
</mat-card>
|
|
5006
|
+
args: [{ selector: 'sa-query-builder-demo', standalone: true, imports: [CommonModule, QueryBuilderComponent, MatCardModule], template: `
|
|
5007
|
+
<mat-card>
|
|
5008
|
+
<mat-card-header>
|
|
5009
|
+
<mat-card-title>Query Builder Demo</mat-card-title>
|
|
5010
|
+
</mat-card-header>
|
|
5011
|
+
<mat-card-content>
|
|
5012
|
+
<sa-query-builder [config]="queryConfig" (queryChange)="onQueryChange($event)"></sa-query-builder>
|
|
5013
|
+
|
|
5014
|
+
<div class="query-result" *ngIf="queryString">
|
|
5015
|
+
<h3>Query Result:</h3>
|
|
5016
|
+
<pre>{{ queryString }}</pre>
|
|
5017
|
+
<h3>JSON:</h3>
|
|
5018
|
+
<pre>{{ queryJson }}</pre>
|
|
5019
|
+
<h3>Per-Row Conditions:</h3>
|
|
5020
|
+
<ul>
|
|
5021
|
+
<li *ngFor="let rule of currentQuery?.rules; let i = index">
|
|
5022
|
+
Row {{ i + 1 }}: {{ i === 0 ? 'First row' : rule.condition?.toUpperCase() }}
|
|
5023
|
+
</li>
|
|
5024
|
+
</ul>
|
|
5025
|
+
</div>
|
|
5026
|
+
</mat-card-content>
|
|
5027
|
+
</mat-card>
|
|
4979
5028
|
`, styles: [".query-result{margin-top:20px;padding:16px;background-color:#f5f5f5;border-radius:4px}pre{white-space:pre-wrap;word-break:break-all;background-color:#e0e0e0;padding:8px;border-radius:4px}\n"] }]
|
|
4980
5029
|
}], ctorParameters: () => [{ type: QueryBuilderService }] });
|
|
4981
5030
|
|
|
@@ -5074,7 +5123,7 @@ class QueryBuilderFormlyComponent extends FieldArrayType {
|
|
|
5074
5123
|
this.add(); // start fresh with one row
|
|
5075
5124
|
}
|
|
5076
5125
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderFormlyComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5077
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: QueryBuilderFormlyComponent, isStandalone: true, selector: "sa-query-builder-formly", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-query-builder-container\">\n <div class=\"query-builder-body\">\n @for(subField of field.fieldGroup; track subField.id || $index) {\n <div class=\"row align-items-baseline query-row\" [@rowAnimation]>\n @if ($index === 0) {\n <span class=\"where-text flex-1\">Where</span>\n }\n @for (innerField of subField.fieldGroup; track innerField.key || $index) {\n @if(!!innerField.props['hasDynamicType']){\n @switch (getFilterType(innerField)) {\n @case ('STRING') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('NUMBER') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('BOOLEAN') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('CURRENCY') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('DATE') {\n\n }\n @case ('SELECT') {\n <formly-field [field]=\"createField(innerField)\"></formly-field>\n }\n @default {\n <formly-field [field]=\"createField(innerField)\"></formly-field>\n }\n }\n }@else{\n <formly-field\n class=\"col\"\n [field]=\"innerField\"\n >\n </formly-field>\n }\n }\n @if(props?.['showCopyButton']){\n <sa-icon icon=\"copyOutlined\" class=\"copy-icon pointer\" (click)=\"copy($index)\"></sa-icon>\n }\n <sa-icon icon=\"deleteIcon\" class=\"delete-icon pointer\" (click)=\"remove($index)\"></sa-icon>\n </div>\n }\n \n <!-- Buttons -->\n <div class=\"rule-button-container\">\n <sa-button icon=\"add\" iconPosition=\"left\" text=\"Add filter\"\n (onClickEvent)=\"add()\"\n [state]=\"field?.fieldGroup?.length === (props?.['maxRows'] || 5) ? 'disabled' : 'default'\"\n type=\"outline\" size=\"medium\">\n </sa-button>\n <span class=\"filters-count\">({{field?.fieldGroup?.length}}/{{props?.['maxRows'] || 5}} filters)</span>\n @if(props?.['showResetButton']){\n <sa-button iconPosition=\"left\" text=\"Reset\"\n (onClickEvent)=\"reset()\"\n type=\"primary\" size=\"medium\">\n </sa-button>\n }\n </div> \n </div>\n</div>", styles: [".sa-query-builder-container{display:flex}.sa-query-builder-container .query-builder-body{display:flex;flex-direction:column;gap:var(--small-12px);width:-webkit-fill-available}.query-builder-body .row{display:flex;height:2.25rem;justify-content:center;align-items:center;flex:1 0 0;gap:var(--small-8px);width:-webkit-fill-available}.query-row{transition:all .2s ease-in-out;border-radius:var(--small-4px);padding:var(--small-4px);margin:2px 0}.query-row ::ng-deep .query-builder-form-wrapper{transition:all .15s ease-in-out}.query-builder-form-wrapper{width:-webkit-fill-available}::ng-deep .query-builder-form-wrapper .sa-input-field.idle{border-radius:var(--small-4px);border:1px solid var(--grey-100, #EAECF0);background:var(--white, #FFF);height:2.438rem}::ng-deep .query-builder-form-wrapper .sa-input-container{height:3.438rem}::ng-deep .query-builder-form-wrapper .sa-input-container .disabled .sa-input-field input{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:13px;font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.where-text{color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:var(--font-weight-500);line-height:var(--medium-20px);letter-spacing:.1px;width:80px}.flex-1{flex:1 1 0;min-width:80px}.flex-2{flex:2 1 0;min-width:120px}.flex-4{flex:4 1 0;min-width:200px}.copy-icon,.delete-icon{transition:all .2s ease-in-out;padding:4px;border-radius:4px;opacity:.7}.copy-icon:hover,.delete-icon:hover{opacity:1;transform:scale(1.1);background-color:#0000000d}.copy-icon:active,.delete-icon:active{transform:scale(.95)}.copy-icon:hover{color:var(--primary-500, #7C3AED)}.delete-icon:hover{color:var(--error-500, #EF4444)}.rule-button-container{transition:all .2s ease-in-out}.rule-button-container sa-button{transition:all .2s ease-in-out}.rule-button-container sa-button:hover{transform:translateY(-1px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }], animations: [
|
|
5126
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: QueryBuilderFormlyComponent, isStandalone: true, selector: "sa-query-builder-formly", providers: [], usesInheritance: true, ngImport: i0, template: "<div class=\"sa-query-builder-container\">\r\n <div class=\"query-builder-body\">\r\n @for(subField of field.fieldGroup; track subField.id || $index) {\r\n <div class=\"row align-items-baseline query-row\" [@rowAnimation]>\r\n @if ($index === 0) {\r\n <span class=\"where-text flex-1\">Where</span>\r\n }\r\n @for (innerField of subField.fieldGroup; track innerField.key || $index) {\r\n @if(!!innerField.props['hasDynamicType']){\r\n @switch (getFilterType(innerField)) {\r\n @case ('STRING') {\r\n <formly-field [field]=\"innerField\"></formly-field>\r\n }\r\n @case ('NUMBER') {\r\n <formly-field [field]=\"innerField\"></formly-field>\r\n }\r\n @case ('BOOLEAN') {\r\n <formly-field [field]=\"innerField\"></formly-field>\r\n }\r\n @case ('CURRENCY') {\r\n <formly-field [field]=\"innerField\"></formly-field>\r\n }\r\n @case ('DATE') {\r\n\r\n }\r\n @case ('SELECT') {\r\n <formly-field [field]=\"createField(innerField)\"></formly-field>\r\n }\r\n @default {\r\n <formly-field [field]=\"createField(innerField)\"></formly-field>\r\n }\r\n }\r\n }@else{\r\n <formly-field\r\n class=\"col\"\r\n [field]=\"innerField\"\r\n >\r\n </formly-field>\r\n }\r\n }\r\n @if(props?.['showCopyButton']){\r\n <sa-icon icon=\"copyOutlined\" class=\"copy-icon pointer\" (click)=\"copy($index)\"></sa-icon>\r\n }\r\n <sa-icon icon=\"deleteIcon\" class=\"delete-icon pointer\" (click)=\"remove($index)\"></sa-icon>\r\n </div>\r\n }\r\n \r\n <!-- Buttons -->\r\n <div class=\"rule-button-container\">\r\n <sa-button icon=\"add\" iconPosition=\"left\" text=\"Add filter\"\r\n (onClickEvent)=\"add()\"\r\n [state]=\"field?.fieldGroup?.length === (props?.['maxRows'] || 5) ? 'disabled' : 'default'\"\r\n type=\"outline\" size=\"medium\">\r\n </sa-button>\r\n <span class=\"filters-count\">({{field?.fieldGroup?.length}}/{{props?.['maxRows'] || 5}} filters)</span>\r\n @if(props?.['showResetButton']){\r\n <sa-button iconPosition=\"left\" text=\"Reset\"\r\n (onClickEvent)=\"reset()\"\r\n type=\"primary\" size=\"medium\">\r\n </sa-button>\r\n }\r\n </div> \r\n </div>\r\n</div>", styles: [".sa-query-builder-container{display:flex}.sa-query-builder-container .query-builder-body{display:flex;flex-direction:column;gap:var(--small-12px);width:-webkit-fill-available}.query-builder-body .row{display:flex;height:2.25rem;justify-content:center;align-items:center;flex:1 0 0;gap:var(--small-8px);width:-webkit-fill-available}.query-row{transition:all .2s ease-in-out;border-radius:var(--small-4px);padding:var(--small-4px);margin:2px 0}.query-row ::ng-deep .query-builder-form-wrapper{transition:all .15s ease-in-out}.query-builder-form-wrapper{width:-webkit-fill-available}::ng-deep .query-builder-form-wrapper .sa-input-field.idle{border-radius:var(--small-4px);border:1px solid var(--grey-100, #EAECF0);background:var(--white, #FFF);height:2.438rem}::ng-deep .query-builder-form-wrapper .sa-input-container{height:3.438rem}::ng-deep .query-builder-form-wrapper .sa-input-container .disabled .sa-input-field input{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:13px;font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.where-text{color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:var(--font-weight-500);line-height:var(--medium-20px);letter-spacing:.1px;width:80px}.flex-1{flex:1 1 0;min-width:80px}.flex-2{flex:2 1 0;min-width:120px}.flex-4{flex:4 1 0;min-width:200px}.copy-icon,.delete-icon{transition:all .2s ease-in-out;padding:4px;border-radius:4px;opacity:.7}.copy-icon:hover,.delete-icon:hover{opacity:1;transform:scale(1.1);background-color:#0000000d}.copy-icon:active,.delete-icon:active{transform:scale(.95)}.copy-icon:hover{color:var(--primary-500, #7C3AED)}.delete-icon:hover{color:var(--error-500, #EF4444)}.rule-button-container{transition:all .2s ease-in-out}.rule-button-container sa-button{transition:all .2s ease-in-out}.rule-button-container sa-button:hover{transform:translateY(-1px)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: FormlyModule }, { kind: "component", type: i2$3.FormlyField, selector: "formly-field", inputs: ["field"] }, { kind: "component", type: ButtonComponent, selector: "sa-button", inputs: ["id", "type", "state", "size", "text", "ImagePath", "icon", "iconPosition", "href", "hrefTarget", "width", "isSubmit", "buttonIconSize", "showSpinner"], outputs: ["onClickEvent", "onMouseInEvent", "onMouseOutEvent"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "ngmodule", type: MatOptionModule }, { kind: "ngmodule", type: MatIconModule }], animations: [
|
|
5078
5127
|
trigger('rowAnimation', [
|
|
5079
5128
|
transition(':enter', [
|
|
5080
5129
|
style({
|
|
@@ -5146,7 +5195,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
5146
5195
|
MatSelectModule,
|
|
5147
5196
|
MatOptionModule,
|
|
5148
5197
|
MatIconModule
|
|
5149
|
-
], template: "<div class=\"sa-query-builder-container\">\n <div class=\"query-builder-body\">\n @for(subField of field.fieldGroup; track subField.id || $index) {\n <div class=\"row align-items-baseline query-row\" [@rowAnimation]>\n @if ($index === 0) {\n <span class=\"where-text flex-1\">Where</span>\n }\n @for (innerField of subField.fieldGroup; track innerField.key || $index) {\n @if(!!innerField.props['hasDynamicType']){\n @switch (getFilterType(innerField)) {\n @case ('STRING') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('NUMBER') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('BOOLEAN') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('CURRENCY') {\n <formly-field [field]=\"innerField\"></formly-field>\n }\n @case ('DATE') {\n\n }\n @case ('SELECT') {\n <formly-field [field]=\"createField(innerField)\"></formly-field>\n }\n @default {\n <formly-field [field]=\"createField(innerField)\"></formly-field>\n }\n }\n }@else{\n <formly-field\n class=\"col\"\n [field]=\"innerField\"\n >\n </formly-field>\n }\n }\n @if(props?.['showCopyButton']){\n <sa-icon icon=\"copyOutlined\" class=\"copy-icon pointer\" (click)=\"copy($index)\"></sa-icon>\n }\n <sa-icon icon=\"deleteIcon\" class=\"delete-icon pointer\" (click)=\"remove($index)\"></sa-icon>\n </div>\n }\n \n <!-- Buttons -->\n <div class=\"rule-button-container\">\n <sa-button icon=\"add\" iconPosition=\"left\" text=\"Add filter\"\n (onClickEvent)=\"add()\"\n [state]=\"field?.fieldGroup?.length === (props?.['maxRows'] || 5) ? 'disabled' : 'default'\"\n type=\"outline\" size=\"medium\">\n </sa-button>\n <span class=\"filters-count\">({{field?.fieldGroup?.length}}/{{props?.['maxRows'] || 5}} filters)</span>\n @if(props?.['showResetButton']){\n <sa-button iconPosition=\"left\" text=\"Reset\"\n (onClickEvent)=\"reset()\"\n type=\"primary\" size=\"medium\">\n </sa-button>\n }\n </div> \n </div>\n</div>", styles: [".sa-query-builder-container{display:flex}.sa-query-builder-container .query-builder-body{display:flex;flex-direction:column;gap:var(--small-12px);width:-webkit-fill-available}.query-builder-body .row{display:flex;height:2.25rem;justify-content:center;align-items:center;flex:1 0 0;gap:var(--small-8px);width:-webkit-fill-available}.query-row{transition:all .2s ease-in-out;border-radius:var(--small-4px);padding:var(--small-4px);margin:2px 0}.query-row ::ng-deep .query-builder-form-wrapper{transition:all .15s ease-in-out}.query-builder-form-wrapper{width:-webkit-fill-available}::ng-deep .query-builder-form-wrapper .sa-input-field.idle{border-radius:var(--small-4px);border:1px solid var(--grey-100, #EAECF0);background:var(--white, #FFF);height:2.438rem}::ng-deep .query-builder-form-wrapper .sa-input-container{height:3.438rem}::ng-deep .query-builder-form-wrapper .sa-input-container .disabled .sa-input-field input{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:13px;font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.where-text{color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:var(--font-weight-500);line-height:var(--medium-20px);letter-spacing:.1px;width:80px}.flex-1{flex:1 1 0;min-width:80px}.flex-2{flex:2 1 0;min-width:120px}.flex-4{flex:4 1 0;min-width:200px}.copy-icon,.delete-icon{transition:all .2s ease-in-out;padding:4px;border-radius:4px;opacity:.7}.copy-icon:hover,.delete-icon:hover{opacity:1;transform:scale(1.1);background-color:#0000000d}.copy-icon:active,.delete-icon:active{transform:scale(.95)}.copy-icon:hover{color:var(--primary-500, #7C3AED)}.delete-icon:hover{color:var(--error-500, #EF4444)}.rule-button-container{transition:all .2s ease-in-out}.rule-button-container sa-button{transition:all .2s ease-in-out}.rule-button-container sa-button:hover{transform:translateY(-1px)}\n"] }]
|
|
5198
|
+
], template: "<div class=\"sa-query-builder-container\">\r\n <div class=\"query-builder-body\">\r\n @for(subField of field.fieldGroup; track subField.id || $index) {\r\n <div class=\"row align-items-baseline query-row\" [@rowAnimation]>\r\n @if ($index === 0) {\r\n <span class=\"where-text flex-1\">Where</span>\r\n }\r\n @for (innerField of subField.fieldGroup; track innerField.key || $index) {\r\n @if(!!innerField.props['hasDynamicType']){\r\n @switch (getFilterType(innerField)) {\r\n @case ('STRING') {\r\n <formly-field [field]=\"innerField\"></formly-field>\r\n }\r\n @case ('NUMBER') {\r\n <formly-field [field]=\"innerField\"></formly-field>\r\n }\r\n @case ('BOOLEAN') {\r\n <formly-field [field]=\"innerField\"></formly-field>\r\n }\r\n @case ('CURRENCY') {\r\n <formly-field [field]=\"innerField\"></formly-field>\r\n }\r\n @case ('DATE') {\r\n\r\n }\r\n @case ('SELECT') {\r\n <formly-field [field]=\"createField(innerField)\"></formly-field>\r\n }\r\n @default {\r\n <formly-field [field]=\"createField(innerField)\"></formly-field>\r\n }\r\n }\r\n }@else{\r\n <formly-field\r\n class=\"col\"\r\n [field]=\"innerField\"\r\n >\r\n </formly-field>\r\n }\r\n }\r\n @if(props?.['showCopyButton']){\r\n <sa-icon icon=\"copyOutlined\" class=\"copy-icon pointer\" (click)=\"copy($index)\"></sa-icon>\r\n }\r\n <sa-icon icon=\"deleteIcon\" class=\"delete-icon pointer\" (click)=\"remove($index)\"></sa-icon>\r\n </div>\r\n }\r\n \r\n <!-- Buttons -->\r\n <div class=\"rule-button-container\">\r\n <sa-button icon=\"add\" iconPosition=\"left\" text=\"Add filter\"\r\n (onClickEvent)=\"add()\"\r\n [state]=\"field?.fieldGroup?.length === (props?.['maxRows'] || 5) ? 'disabled' : 'default'\"\r\n type=\"outline\" size=\"medium\">\r\n </sa-button>\r\n <span class=\"filters-count\">({{field?.fieldGroup?.length}}/{{props?.['maxRows'] || 5}} filters)</span>\r\n @if(props?.['showResetButton']){\r\n <sa-button iconPosition=\"left\" text=\"Reset\"\r\n (onClickEvent)=\"reset()\"\r\n type=\"primary\" size=\"medium\">\r\n </sa-button>\r\n }\r\n </div> \r\n </div>\r\n</div>", styles: [".sa-query-builder-container{display:flex}.sa-query-builder-container .query-builder-body{display:flex;flex-direction:column;gap:var(--small-12px);width:-webkit-fill-available}.query-builder-body .row{display:flex;height:2.25rem;justify-content:center;align-items:center;flex:1 0 0;gap:var(--small-8px);width:-webkit-fill-available}.query-row{transition:all .2s ease-in-out;border-radius:var(--small-4px);padding:var(--small-4px);margin:2px 0}.query-row ::ng-deep .query-builder-form-wrapper{transition:all .15s ease-in-out}.query-builder-form-wrapper{width:-webkit-fill-available}::ng-deep .query-builder-form-wrapper .sa-input-field.idle{border-radius:var(--small-4px);border:1px solid var(--grey-100, #EAECF0);background:var(--white, #FFF);height:2.438rem}::ng-deep .query-builder-form-wrapper .sa-input-container{height:3.438rem}::ng-deep .query-builder-form-wrapper .sa-input-container .disabled .sa-input-field input{color:var(--text-low-emphasis, #9B98A3);font-family:var(--font-family, Roboto);font-size:13px;font-style:normal;font-weight:400;line-height:var(--medium-20px);letter-spacing:.25px}.where-text{color:var(--text-medium-emphasis, #6D6979);font-family:var(--font-family-roboto);font-size:var(--small-14px);font-style:normal;font-weight:var(--font-weight-500);line-height:var(--medium-20px);letter-spacing:.1px;width:80px}.flex-1{flex:1 1 0;min-width:80px}.flex-2{flex:2 1 0;min-width:120px}.flex-4{flex:4 1 0;min-width:200px}.copy-icon,.delete-icon{transition:all .2s ease-in-out;padding:4px;border-radius:4px;opacity:.7}.copy-icon:hover,.delete-icon:hover{opacity:1;transform:scale(1.1);background-color:#0000000d}.copy-icon:active,.delete-icon:active{transform:scale(.95)}.copy-icon:hover{color:var(--primary-500, #7C3AED)}.delete-icon:hover{color:var(--error-500, #EF4444)}.rule-button-container{transition:all .2s ease-in-out}.rule-button-container sa-button{transition:all .2s ease-in-out}.rule-button-container sa-button:hover{transform:translateY(-1px)}\n"] }]
|
|
5150
5199
|
}] });
|
|
5151
5200
|
|
|
5152
5201
|
class QueryBuilderTextareaComponent {
|
|
@@ -5904,7 +5953,7 @@ class QueryBuilderTextareaComponent {
|
|
|
5904
5953
|
};
|
|
5905
5954
|
}
|
|
5906
5955
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderTextareaComponent, deps: [{ token: i1$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5907
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: QueryBuilderTextareaComponent, isStandalone: true, selector: "sa-query-builder-textarea", inputs: { config: "config" }, outputs: { queryChange: "queryChange", suggestionSelected: "suggestionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "queryTextarea", first: true, predicate: ["queryTextarea"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"sa-query-builder-textarea\">\n <form [formGroup]=\"form\">\n <div class=\"query-builder-header\">\n <div class=\"where-label\">Where</div>\n </div>\n\n <div class=\"query-builder-body\">\n <div class=\"textarea-container\">\n <mat-form-field class=\"query-textarea-field\" appearance=\"outline\">\n <textarea\n #queryTextarea\n matInput\n formControlName=\"queryText\"\n placeholder=\"Start typing your query...\"\n rows=\"5\"\n ></textarea>\n </mat-form-field>\n \n <!-- Custom Dropdown -->\n <div \n #dropdown\n class=\"suggestions-dropdown\" \n [class.visible]=\"isDropdownVisible\"\n [style.top.px]=\"dropdownPosition.top\"\n [style.left.px]=\"dropdownPosition.left\"\n >\n @for (suggestion of filteredSuggestions; track suggestion.id; let i = $index) {\n <div \n class=\"suggestion-item\"\n [class.selected]=\"i === selectedIndex\"\n [attr.data-index]=\"i\"\n (click)=\"onSuggestionClick(suggestion)\"\n (mouseenter)=\"selectedIndex = i\"\n >\n <div class=\"suggestion-main\">\n <span class=\"suggestion-name\">{{ suggestion.name }}</span>\n <span class=\"suggestion-type\">{{ suggestion.type }}</span>\n </div>\n @if (suggestion.description) {\n <div class=\"suggestion-description\">{{ suggestion.description }}</div>\n }\n @if (suggestion.unit) {\n <div class=\"suggestion-unit\">{{ suggestion.unit }}</div>\n }\n </div>\n }\n </div>\n\n <!-- Date Picker Popup -->\n <div \n class=\"date-picker-popup\" \n [class.visible]=\"isDatePickerVisible\"\n [style.top.px]=\"datePickerPosition.top\"\n [style.left.px]=\"datePickerPosition.left\"\n >\n <div class=\"date-picker-container\">\n @if (!showDualDatePicker) {\n <!-- Single Date Picker -->\n <div class=\"single-date-picker\">\n <h4>Select Date</h4>\n <mat-form-field appearance=\"outline\">\n <mat-label>Date</mat-label>\n <input matInput [matDatepicker]=\"singlePicker\" (dateChange)=\"onFirstDateSelected($event.value)\">\n <mat-datepicker-toggle matIconSuffix [for]=\"singlePicker\"></mat-datepicker-toggle>\n <mat-datepicker #singlePicker></mat-datepicker>\n </mat-form-field>\n </div>\n } @else {\n <!-- Dual Date Picker for 'between' operator -->\n <div class=\"dual-date-picker\">\n <h4>Select Date Range</h4>\n <div class=\"date-range-inputs\">\n <mat-form-field appearance=\"outline\">\n <mat-label>Start Date</mat-label>\n <input matInput [matDatepicker]=\"startPicker\" (dateChange)=\"onFirstDateSelected($event.value)\">\n <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n <mat-datepicker #startPicker></mat-datepicker>\n </mat-form-field>\n \n @if (firstDateSelected) {\n <mat-form-field appearance=\"outline\">\n <mat-label>End Date</mat-label>\n <input matInput [matDatepicker]=\"endPicker\" [min]=\"firstDateSelected\" (dateChange)=\"onSecondDateSelected($event.value)\">\n <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n <mat-datepicker #endPicker></mat-datepicker>\n </mat-form-field>\n }\n </div>\n </div>\n }\n \n <div class=\"date-picker-actions\">\n <button mat-button (click)=\"hideDatePicker()\">Cancel</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"query-builder-footer\">\n <button mat-button class=\"reset-btn\" (click)=\"onReset()\">Reset</button>\n <button mat-raised-button color=\"primary\" class=\"apply-btn\" (click)=\"onApply()\">Apply filters</button>\n </div>\n </form>\n</div>\n", styles: [".sa-query-builder-textarea{display:flex;flex-direction:column;width:100%;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff;padding:16px;box-sizing:border-box}.sa-query-builder-textarea .query-builder-header{display:flex;align-items:center;margin-bottom:8px}.sa-query-builder-textarea .query-builder-header .where-label{font-weight:500;font-size:14px;color:#333;margin-right:8px}.sa-query-builder-textarea .query-builder-body{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container{position:relative;width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .query-textarea-field{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .query-textarea-field textarea{resize:vertical;min-height:100px;font-family:monospace}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown{position:absolute;z-index:1000;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026;max-height:300px;overflow-y:auto;min-width:250px;display:none}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown.visible{display:block}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item{padding:12px 16px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .15s ease}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item:hover,.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item.selected{background-color:#f5f5f5}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item:last-child{border-bottom:none}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-main .suggestion-name{font-weight:500;color:#333;font-size:14px}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-main .suggestion-type{font-size:12px;color:#666;background:#e8f4f8;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:500}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-description{font-size:12px;color:#666;margin-top:4px;line-height:1.3}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-unit{font-size:11px;color:#888;margin-top:2px;font-style:italic}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup{position:absolute;z-index:1001;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:300px;display:none}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup.visible{display:block}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container{padding:16px}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container h4{margin:0 0 16px;font-size:16px;font-weight:500;color:#333}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .single-date-picker .mat-mdc-form-field{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .dual-date-picker .date-range-inputs{display:flex;flex-direction:column;gap:12px}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .dual-date-picker .date-range-inputs .mat-mdc-form-field{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .date-picker-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid #f0f0f0}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .date-picker-actions button{margin-left:8px}.sa-query-builder-textarea .query-builder-footer{display:flex;justify-content:flex-end;margin-top:16px;gap:8px}.sa-query-builder-textarea .query-builder-footer .reset-btn{margin-right:8px}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
|
|
5956
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: QueryBuilderTextareaComponent, isStandalone: true, selector: "sa-query-builder-textarea", inputs: { config: "config" }, outputs: { queryChange: "queryChange", suggestionSelected: "suggestionSelected" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "queryTextarea", first: true, predicate: ["queryTextarea"], descendants: true }, { propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true }], ngImport: i0, template: "<div class=\"sa-query-builder-textarea\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"query-builder-header\">\r\n <div class=\"where-label\">Where</div>\r\n </div>\r\n\r\n <div class=\"query-builder-body\">\r\n <div class=\"textarea-container\">\r\n <mat-form-field class=\"query-textarea-field\" appearance=\"outline\">\r\n <textarea\r\n #queryTextarea\r\n matInput\r\n formControlName=\"queryText\"\r\n placeholder=\"Start typing your query...\"\r\n rows=\"5\"\r\n ></textarea>\r\n </mat-form-field>\r\n \r\n <!-- Custom Dropdown -->\r\n <div \r\n #dropdown\r\n class=\"suggestions-dropdown\" \r\n [class.visible]=\"isDropdownVisible\"\r\n [style.top.px]=\"dropdownPosition.top\"\r\n [style.left.px]=\"dropdownPosition.left\"\r\n >\r\n @for (suggestion of filteredSuggestions; track suggestion.id; let i = $index) {\r\n <div \r\n class=\"suggestion-item\"\r\n [class.selected]=\"i === selectedIndex\"\r\n [attr.data-index]=\"i\"\r\n (click)=\"onSuggestionClick(suggestion)\"\r\n (mouseenter)=\"selectedIndex = i\"\r\n >\r\n <div class=\"suggestion-main\">\r\n <span class=\"suggestion-name\">{{ suggestion.name }}</span>\r\n <span class=\"suggestion-type\">{{ suggestion.type }}</span>\r\n </div>\r\n @if (suggestion.description) {\r\n <div class=\"suggestion-description\">{{ suggestion.description }}</div>\r\n }\r\n @if (suggestion.unit) {\r\n <div class=\"suggestion-unit\">{{ suggestion.unit }}</div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Date Picker Popup -->\r\n <div \r\n class=\"date-picker-popup\" \r\n [class.visible]=\"isDatePickerVisible\"\r\n [style.top.px]=\"datePickerPosition.top\"\r\n [style.left.px]=\"datePickerPosition.left\"\r\n >\r\n <div class=\"date-picker-container\">\r\n @if (!showDualDatePicker) {\r\n <!-- Single Date Picker -->\r\n <div class=\"single-date-picker\">\r\n <h4>Select Date</h4>\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>Date</mat-label>\r\n <input matInput [matDatepicker]=\"singlePicker\" (dateChange)=\"onFirstDateSelected($event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"singlePicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #singlePicker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n } @else {\r\n <!-- Dual Date Picker for 'between' operator -->\r\n <div class=\"dual-date-picker\">\r\n <h4>Select Date Range</h4>\r\n <div class=\"date-range-inputs\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>Start Date</mat-label>\r\n <input matInput [matDatepicker]=\"startPicker\" (dateChange)=\"onFirstDateSelected($event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #startPicker></mat-datepicker>\r\n </mat-form-field>\r\n \r\n @if (firstDateSelected) {\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>End Date</mat-label>\r\n <input matInput [matDatepicker]=\"endPicker\" [min]=\"firstDateSelected\" (dateChange)=\"onSecondDateSelected($event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #endPicker></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n </div>\r\n </div>\r\n }\r\n \r\n <div class=\"date-picker-actions\">\r\n <button mat-button (click)=\"hideDatePicker()\">Cancel</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"query-builder-footer\">\r\n <button mat-button class=\"reset-btn\" (click)=\"onReset()\">Reset</button>\r\n <button mat-raised-button color=\"primary\" class=\"apply-btn\" (click)=\"onApply()\">Apply filters</button>\r\n </div>\r\n </form>\r\n</div>\r\n", styles: [".sa-query-builder-textarea{display:flex;flex-direction:column;width:100%;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff;padding:16px;box-sizing:border-box}.sa-query-builder-textarea .query-builder-header{display:flex;align-items:center;margin-bottom:8px}.sa-query-builder-textarea .query-builder-header .where-label{font-weight:500;font-size:14px;color:#333;margin-right:8px}.sa-query-builder-textarea .query-builder-body{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container{position:relative;width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .query-textarea-field{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .query-textarea-field textarea{resize:vertical;min-height:100px;font-family:monospace}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown{position:absolute;z-index:1000;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026;max-height:300px;overflow-y:auto;min-width:250px;display:none}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown.visible{display:block}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item{padding:12px 16px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .15s ease}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item:hover,.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item.selected{background-color:#f5f5f5}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item:last-child{border-bottom:none}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-main .suggestion-name{font-weight:500;color:#333;font-size:14px}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-main .suggestion-type{font-size:12px;color:#666;background:#e8f4f8;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:500}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-description{font-size:12px;color:#666;margin-top:4px;line-height:1.3}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-unit{font-size:11px;color:#888;margin-top:2px;font-style:italic}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup{position:absolute;z-index:1001;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:300px;display:none}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup.visible{display:block}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container{padding:16px}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container h4{margin:0 0 16px;font-size:16px;font-weight:500;color:#333}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .single-date-picker .mat-mdc-form-field{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .dual-date-picker .date-range-inputs{display:flex;flex-direction:column;gap:12px}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .dual-date-picker .date-range-inputs .mat-mdc-form-field{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .date-picker-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid #f0f0f0}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .date-picker-actions button{margin-left:8px}.sa-query-builder-textarea .query-builder-footer{display:flex;justify-content:flex-end;margin-top:16px;gap:8px}.sa-query-builder-textarea .query-builder-footer .reset-btn{margin-right:8px}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i1$6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1$6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1$6.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2$5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatDividerModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$1.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$1.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$1.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatNativeDateModule }] }); }
|
|
5908
5957
|
}
|
|
5909
5958
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderTextareaComponent, decorators: [{
|
|
5910
5959
|
type: Component,
|
|
@@ -5918,7 +5967,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
5918
5967
|
MatDividerModule,
|
|
5919
5968
|
MatDatepickerModule,
|
|
5920
5969
|
MatNativeDateModule
|
|
5921
|
-
], template: "<div class=\"sa-query-builder-textarea\">\n <form [formGroup]=\"form\">\n <div class=\"query-builder-header\">\n <div class=\"where-label\">Where</div>\n </div>\n\n <div class=\"query-builder-body\">\n <div class=\"textarea-container\">\n <mat-form-field class=\"query-textarea-field\" appearance=\"outline\">\n <textarea\n #queryTextarea\n matInput\n formControlName=\"queryText\"\n placeholder=\"Start typing your query...\"\n rows=\"5\"\n ></textarea>\n </mat-form-field>\n \n <!-- Custom Dropdown -->\n <div \n #dropdown\n class=\"suggestions-dropdown\" \n [class.visible]=\"isDropdownVisible\"\n [style.top.px]=\"dropdownPosition.top\"\n [style.left.px]=\"dropdownPosition.left\"\n >\n @for (suggestion of filteredSuggestions; track suggestion.id; let i = $index) {\n <div \n class=\"suggestion-item\"\n [class.selected]=\"i === selectedIndex\"\n [attr.data-index]=\"i\"\n (click)=\"onSuggestionClick(suggestion)\"\n (mouseenter)=\"selectedIndex = i\"\n >\n <div class=\"suggestion-main\">\n <span class=\"suggestion-name\">{{ suggestion.name }}</span>\n <span class=\"suggestion-type\">{{ suggestion.type }}</span>\n </div>\n @if (suggestion.description) {\n <div class=\"suggestion-description\">{{ suggestion.description }}</div>\n }\n @if (suggestion.unit) {\n <div class=\"suggestion-unit\">{{ suggestion.unit }}</div>\n }\n </div>\n }\n </div>\n\n <!-- Date Picker Popup -->\n <div \n class=\"date-picker-popup\" \n [class.visible]=\"isDatePickerVisible\"\n [style.top.px]=\"datePickerPosition.top\"\n [style.left.px]=\"datePickerPosition.left\"\n >\n <div class=\"date-picker-container\">\n @if (!showDualDatePicker) {\n <!-- Single Date Picker -->\n <div class=\"single-date-picker\">\n <h4>Select Date</h4>\n <mat-form-field appearance=\"outline\">\n <mat-label>Date</mat-label>\n <input matInput [matDatepicker]=\"singlePicker\" (dateChange)=\"onFirstDateSelected($event.value)\">\n <mat-datepicker-toggle matIconSuffix [for]=\"singlePicker\"></mat-datepicker-toggle>\n <mat-datepicker #singlePicker></mat-datepicker>\n </mat-form-field>\n </div>\n } @else {\n <!-- Dual Date Picker for 'between' operator -->\n <div class=\"dual-date-picker\">\n <h4>Select Date Range</h4>\n <div class=\"date-range-inputs\">\n <mat-form-field appearance=\"outline\">\n <mat-label>Start Date</mat-label>\n <input matInput [matDatepicker]=\"startPicker\" (dateChange)=\"onFirstDateSelected($event.value)\">\n <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\n <mat-datepicker #startPicker></mat-datepicker>\n </mat-form-field>\n \n @if (firstDateSelected) {\n <mat-form-field appearance=\"outline\">\n <mat-label>End Date</mat-label>\n <input matInput [matDatepicker]=\"endPicker\" [min]=\"firstDateSelected\" (dateChange)=\"onSecondDateSelected($event.value)\">\n <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\n <mat-datepicker #endPicker></mat-datepicker>\n </mat-form-field>\n }\n </div>\n </div>\n }\n \n <div class=\"date-picker-actions\">\n <button mat-button (click)=\"hideDatePicker()\">Cancel</button>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"query-builder-footer\">\n <button mat-button class=\"reset-btn\" (click)=\"onReset()\">Reset</button>\n <button mat-raised-button color=\"primary\" class=\"apply-btn\" (click)=\"onApply()\">Apply filters</button>\n </div>\n </form>\n</div>\n", styles: [".sa-query-builder-textarea{display:flex;flex-direction:column;width:100%;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff;padding:16px;box-sizing:border-box}.sa-query-builder-textarea .query-builder-header{display:flex;align-items:center;margin-bottom:8px}.sa-query-builder-textarea .query-builder-header .where-label{font-weight:500;font-size:14px;color:#333;margin-right:8px}.sa-query-builder-textarea .query-builder-body{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container{position:relative;width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .query-textarea-field{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .query-textarea-field textarea{resize:vertical;min-height:100px;font-family:monospace}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown{position:absolute;z-index:1000;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026;max-height:300px;overflow-y:auto;min-width:250px;display:none}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown.visible{display:block}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item{padding:12px 16px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .15s ease}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item:hover,.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item.selected{background-color:#f5f5f5}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item:last-child{border-bottom:none}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-main .suggestion-name{font-weight:500;color:#333;font-size:14px}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-main .suggestion-type{font-size:12px;color:#666;background:#e8f4f8;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:500}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-description{font-size:12px;color:#666;margin-top:4px;line-height:1.3}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-unit{font-size:11px;color:#888;margin-top:2px;font-style:italic}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup{position:absolute;z-index:1001;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:300px;display:none}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup.visible{display:block}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container{padding:16px}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container h4{margin:0 0 16px;font-size:16px;font-weight:500;color:#333}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .single-date-picker .mat-mdc-form-field{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .dual-date-picker .date-range-inputs{display:flex;flex-direction:column;gap:12px}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .dual-date-picker .date-range-inputs .mat-mdc-form-field{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .date-picker-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid #f0f0f0}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .date-picker-actions button{margin-left:8px}.sa-query-builder-textarea .query-builder-footer{display:flex;justify-content:flex-end;margin-top:16px;gap:8px}.sa-query-builder-textarea .query-builder-footer .reset-btn{margin-right:8px}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
|
|
5970
|
+
], template: "<div class=\"sa-query-builder-textarea\">\r\n <form [formGroup]=\"form\">\r\n <div class=\"query-builder-header\">\r\n <div class=\"where-label\">Where</div>\r\n </div>\r\n\r\n <div class=\"query-builder-body\">\r\n <div class=\"textarea-container\">\r\n <mat-form-field class=\"query-textarea-field\" appearance=\"outline\">\r\n <textarea\r\n #queryTextarea\r\n matInput\r\n formControlName=\"queryText\"\r\n placeholder=\"Start typing your query...\"\r\n rows=\"5\"\r\n ></textarea>\r\n </mat-form-field>\r\n \r\n <!-- Custom Dropdown -->\r\n <div \r\n #dropdown\r\n class=\"suggestions-dropdown\" \r\n [class.visible]=\"isDropdownVisible\"\r\n [style.top.px]=\"dropdownPosition.top\"\r\n [style.left.px]=\"dropdownPosition.left\"\r\n >\r\n @for (suggestion of filteredSuggestions; track suggestion.id; let i = $index) {\r\n <div \r\n class=\"suggestion-item\"\r\n [class.selected]=\"i === selectedIndex\"\r\n [attr.data-index]=\"i\"\r\n (click)=\"onSuggestionClick(suggestion)\"\r\n (mouseenter)=\"selectedIndex = i\"\r\n >\r\n <div class=\"suggestion-main\">\r\n <span class=\"suggestion-name\">{{ suggestion.name }}</span>\r\n <span class=\"suggestion-type\">{{ suggestion.type }}</span>\r\n </div>\r\n @if (suggestion.description) {\r\n <div class=\"suggestion-description\">{{ suggestion.description }}</div>\r\n }\r\n @if (suggestion.unit) {\r\n <div class=\"suggestion-unit\">{{ suggestion.unit }}</div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Date Picker Popup -->\r\n <div \r\n class=\"date-picker-popup\" \r\n [class.visible]=\"isDatePickerVisible\"\r\n [style.top.px]=\"datePickerPosition.top\"\r\n [style.left.px]=\"datePickerPosition.left\"\r\n >\r\n <div class=\"date-picker-container\">\r\n @if (!showDualDatePicker) {\r\n <!-- Single Date Picker -->\r\n <div class=\"single-date-picker\">\r\n <h4>Select Date</h4>\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>Date</mat-label>\r\n <input matInput [matDatepicker]=\"singlePicker\" (dateChange)=\"onFirstDateSelected($event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"singlePicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #singlePicker></mat-datepicker>\r\n </mat-form-field>\r\n </div>\r\n } @else {\r\n <!-- Dual Date Picker for 'between' operator -->\r\n <div class=\"dual-date-picker\">\r\n <h4>Select Date Range</h4>\r\n <div class=\"date-range-inputs\">\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>Start Date</mat-label>\r\n <input matInput [matDatepicker]=\"startPicker\" (dateChange)=\"onFirstDateSelected($event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"startPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #startPicker></mat-datepicker>\r\n </mat-form-field>\r\n \r\n @if (firstDateSelected) {\r\n <mat-form-field appearance=\"outline\">\r\n <mat-label>End Date</mat-label>\r\n <input matInput [matDatepicker]=\"endPicker\" [min]=\"firstDateSelected\" (dateChange)=\"onSecondDateSelected($event.value)\">\r\n <mat-datepicker-toggle matIconSuffix [for]=\"endPicker\"></mat-datepicker-toggle>\r\n <mat-datepicker #endPicker></mat-datepicker>\r\n </mat-form-field>\r\n }\r\n </div>\r\n </div>\r\n }\r\n \r\n <div class=\"date-picker-actions\">\r\n <button mat-button (click)=\"hideDatePicker()\">Cancel</button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"query-builder-footer\">\r\n <button mat-button class=\"reset-btn\" (click)=\"onReset()\">Reset</button>\r\n <button mat-raised-button color=\"primary\" class=\"apply-btn\" (click)=\"onApply()\">Apply filters</button>\r\n </div>\r\n </form>\r\n</div>\r\n", styles: [".sa-query-builder-textarea{display:flex;flex-direction:column;width:100%;border:1px solid #e0e0e0;border-radius:4px;background-color:#fff;padding:16px;box-sizing:border-box}.sa-query-builder-textarea .query-builder-header{display:flex;align-items:center;margin-bottom:8px}.sa-query-builder-textarea .query-builder-header .where-label{font-weight:500;font-size:14px;color:#333;margin-right:8px}.sa-query-builder-textarea .query-builder-body{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container{position:relative;width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .query-textarea-field{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .query-textarea-field textarea{resize:vertical;min-height:100px;font-family:monospace}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown{position:absolute;z-index:1000;background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px #00000026;max-height:300px;overflow-y:auto;min-width:250px;display:none}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown.visible{display:block}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item{padding:12px 16px;cursor:pointer;border-bottom:1px solid #f0f0f0;transition:background-color .15s ease}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item:hover,.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item.selected{background-color:#f5f5f5}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item:last-child{border-bottom:none}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-main{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-main .suggestion-name{font-weight:500;color:#333;font-size:14px}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-main .suggestion-type{font-size:12px;color:#666;background:#e8f4f8;padding:2px 6px;border-radius:3px;text-transform:uppercase;font-weight:500}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-description{font-size:12px;color:#666;margin-top:4px;line-height:1.3}.sa-query-builder-textarea .query-builder-body .textarea-container .suggestions-dropdown .suggestion-item .suggestion-unit{font-size:11px;color:#888;margin-top:2px;font-style:italic}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup{position:absolute;z-index:1001;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:300px;display:none}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup.visible{display:block}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container{padding:16px}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container h4{margin:0 0 16px;font-size:16px;font-weight:500;color:#333}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .single-date-picker .mat-mdc-form-field{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .dual-date-picker .date-range-inputs{display:flex;flex-direction:column;gap:12px}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .dual-date-picker .date-range-inputs .mat-mdc-form-field{width:100%}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .date-picker-actions{display:flex;justify-content:flex-end;margin-top:16px;padding-top:12px;border-top:1px solid #f0f0f0}.sa-query-builder-textarea .query-builder-body .textarea-container .date-picker-popup .date-picker-container .date-picker-actions button{margin-left:8px}.sa-query-builder-textarea .query-builder-footer{display:flex;justify-content:flex-end;margin-top:16px;gap:8px}.sa-query-builder-textarea .query-builder-footer .reset-btn{margin-right:8px}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}\n"] }]
|
|
5922
5971
|
}], ctorParameters: () => [{ type: i1$2.FormBuilder }], propDecorators: { config: [{
|
|
5923
5972
|
type: Input
|
|
5924
5973
|
}], queryChange: [{
|
|
@@ -6007,25 +6056,25 @@ class QueryBuilderTextareaDemoComponent {
|
|
|
6007
6056
|
console.log('Query changed:', query);
|
|
6008
6057
|
}
|
|
6009
6058
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderTextareaDemoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6010
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: QueryBuilderTextareaDemoComponent, isStandalone: true, selector: "sa-query-builder-textarea-demo", ngImport: i0, template: `
|
|
6011
|
-
<mat-card>
|
|
6012
|
-
<mat-card-header>
|
|
6013
|
-
<mat-card-title>Query Builder Textarea Demo</mat-card-title>
|
|
6014
|
-
</mat-card-header>
|
|
6015
|
-
<mat-card-content>
|
|
6016
|
-
<sa-query-builder-textarea
|
|
6017
|
-
[config]="queryConfig"
|
|
6018
|
-
(queryChange)="onQueryChange($event)">
|
|
6019
|
-
</sa-query-builder-textarea>
|
|
6020
|
-
|
|
6021
|
-
<mat-divider class="my-4"></mat-divider>
|
|
6022
|
-
|
|
6023
|
-
<div class="output-section">
|
|
6024
|
-
<h3>Query Output</h3>
|
|
6025
|
-
<pre>{{ currentQuery | json }}</pre>
|
|
6026
|
-
</div>
|
|
6027
|
-
</mat-card-content>
|
|
6028
|
-
</mat-card>
|
|
6059
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: QueryBuilderTextareaDemoComponent, isStandalone: true, selector: "sa-query-builder-textarea-demo", ngImport: i0, template: `
|
|
6060
|
+
<mat-card>
|
|
6061
|
+
<mat-card-header>
|
|
6062
|
+
<mat-card-title>Query Builder Textarea Demo</mat-card-title>
|
|
6063
|
+
</mat-card-header>
|
|
6064
|
+
<mat-card-content>
|
|
6065
|
+
<sa-query-builder-textarea
|
|
6066
|
+
[config]="queryConfig"
|
|
6067
|
+
(queryChange)="onQueryChange($event)">
|
|
6068
|
+
</sa-query-builder-textarea>
|
|
6069
|
+
|
|
6070
|
+
<mat-divider class="my-4"></mat-divider>
|
|
6071
|
+
|
|
6072
|
+
<div class="output-section">
|
|
6073
|
+
<h3>Query Output</h3>
|
|
6074
|
+
<pre>{{ currentQuery | json }}</pre>
|
|
6075
|
+
</div>
|
|
6076
|
+
</mat-card-content>
|
|
6077
|
+
</mat-card>
|
|
6029
6078
|
`, isInline: true, styles: [".my-4{margin-top:1rem;margin-bottom:1rem}.output-section{margin-top:1rem}pre{background-color:#f5f5f5;padding:1rem;border-radius:4px;overflow:auto;max-height:300px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.JsonPipe, name: "json" }, { kind: "component", type: QueryBuilderTextareaComponent, selector: "sa-query-builder-textarea", inputs: ["config"], outputs: ["queryChange", "suggestionSelected"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i3$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i3$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i3$2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i3$2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "ngmodule", type: MatDividerModule }, { kind: "component", type: i3$3.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }] }); }
|
|
6030
6079
|
}
|
|
6031
6080
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: QueryBuilderTextareaDemoComponent, decorators: [{
|
|
@@ -6035,25 +6084,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
6035
6084
|
QueryBuilderTextareaComponent,
|
|
6036
6085
|
MatCardModule,
|
|
6037
6086
|
MatDividerModule
|
|
6038
|
-
], template: `
|
|
6039
|
-
<mat-card>
|
|
6040
|
-
<mat-card-header>
|
|
6041
|
-
<mat-card-title>Query Builder Textarea Demo</mat-card-title>
|
|
6042
|
-
</mat-card-header>
|
|
6043
|
-
<mat-card-content>
|
|
6044
|
-
<sa-query-builder-textarea
|
|
6045
|
-
[config]="queryConfig"
|
|
6046
|
-
(queryChange)="onQueryChange($event)">
|
|
6047
|
-
</sa-query-builder-textarea>
|
|
6048
|
-
|
|
6049
|
-
<mat-divider class="my-4"></mat-divider>
|
|
6050
|
-
|
|
6051
|
-
<div class="output-section">
|
|
6052
|
-
<h3>Query Output</h3>
|
|
6053
|
-
<pre>{{ currentQuery | json }}</pre>
|
|
6054
|
-
</div>
|
|
6055
|
-
</mat-card-content>
|
|
6056
|
-
</mat-card>
|
|
6087
|
+
], template: `
|
|
6088
|
+
<mat-card>
|
|
6089
|
+
<mat-card-header>
|
|
6090
|
+
<mat-card-title>Query Builder Textarea Demo</mat-card-title>
|
|
6091
|
+
</mat-card-header>
|
|
6092
|
+
<mat-card-content>
|
|
6093
|
+
<sa-query-builder-textarea
|
|
6094
|
+
[config]="queryConfig"
|
|
6095
|
+
(queryChange)="onQueryChange($event)">
|
|
6096
|
+
</sa-query-builder-textarea>
|
|
6097
|
+
|
|
6098
|
+
<mat-divider class="my-4"></mat-divider>
|
|
6099
|
+
|
|
6100
|
+
<div class="output-section">
|
|
6101
|
+
<h3>Query Output</h3>
|
|
6102
|
+
<pre>{{ currentQuery | json }}</pre>
|
|
6103
|
+
</div>
|
|
6104
|
+
</mat-card-content>
|
|
6105
|
+
</mat-card>
|
|
6057
6106
|
`, styles: [".my-4{margin-top:1rem;margin-bottom:1rem}.output-section{margin-top:1rem}pre{background-color:#f5f5f5;padding:1rem;border-radius:4px;overflow:auto;max-height:300px}\n"] }]
|
|
6058
6107
|
}] });
|
|
6059
6108
|
|
|
@@ -6073,11 +6122,11 @@ class RadioButtonComponent extends FieldType {
|
|
|
6073
6122
|
radio.checked = true;
|
|
6074
6123
|
}
|
|
6075
6124
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6076
|
-
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\" (click)=\"selectRadio(option.value, radio)\">\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n {{ option.label }}\n </mat-radio-button>\n </div>\n </mat-radio-group>\n </div>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\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,::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,::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:var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px)}::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$a.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
6125
|
+
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' : '']\">\r\n <div class=\"title-container\">\r\n @if(props['label']){\r\n <div class=\"form-field-title\">\r\n <span>{{ props['label'] }}</span>\r\n </div>\r\n }\r\n @if(props['description']){\r\n <div class=\"form-field-description\">\r\n <span>{{ props['description'] }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"form-field\">\r\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\r\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\" (click)=\"selectRadio(option.value, radio)\">\r\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-radio-button>\r\n </div>\r\n </mat-radio-group>\r\n </div>\r\n @if(props['helpText']){\r\n <div class=\"form-field-helpText\">\r\n <span>{{ props['helpText'] }}</span>\r\n </div>\r\n }\r\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,::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,::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:var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px)}::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$a.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] }); }
|
|
6077
6126
|
}
|
|
6078
6127
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
6079
6128
|
type: Component,
|
|
6080
|
-
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\" (click)=\"selectRadio(option.value, radio)\">\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\n {{ option.label }}\n </mat-radio-button>\n </div>\n </mat-radio-group>\n </div>\n @if(props['helpText']){\n <div class=\"form-field-helpText\">\n <span>{{ props['helpText'] }}</span>\n </div>\n }\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,::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,::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:var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px)}::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"] }]
|
|
6129
|
+
args: [{ selector: 'sa-radio-button', standalone: true, imports: [MatRadioButton, MatRadioModule, CommonModule, FormsModule, ReactiveFormsModule], template: "<div class=\"radio-group-container\" [ngClass]=\"[props['column'] ? 'column' : '']\">\r\n <div class=\"title-container\">\r\n @if(props['label']){\r\n <div class=\"form-field-title\">\r\n <span>{{ props['label'] }}</span>\r\n </div>\r\n }\r\n @if(props['description']){\r\n <div class=\"form-field-description\">\r\n <span>{{ props['description'] }}</span>\r\n </div>\r\n }\r\n </div>\r\n <div class=\"form-field\">\r\n <mat-radio-group [formControl]=\"formControl\" name=\"radioButtons\">\r\n <div *ngFor=\"let option of options$ | async\" class=\"radio-box\" (click)=\"selectRadio(option.value, radio)\">\r\n <mat-radio-button [disableRipple]=\"true\" #radio [value]=\"option.value\">\r\n {{ option.label }}\r\n </mat-radio-button>\r\n </div>\r\n </mat-radio-group>\r\n </div>\r\n @if(props['helpText']){\r\n <div class=\"form-field-helpText\">\r\n <span>{{ props['helpText'] }}</span>\r\n </div>\r\n }\r\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,::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,::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:var(--small-8px) var(--small-8px) var(--small-8px) var(--small-12px)}::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"] }]
|
|
6081
6130
|
}] });
|
|
6082
6131
|
|
|
6083
6132
|
class ScrollingCardsComponent {
|
|
@@ -6150,11 +6199,11 @@ class ScrollingCardsComponent {
|
|
|
6150
6199
|
}
|
|
6151
6200
|
}
|
|
6152
6201
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6153
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [avatar]=\"card?.avatar\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6202
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ScrollingCardsComponent, isStandalone: true, selector: "sa-scrolling-cards", inputs: { cards: "cards", duration: "duration", direction: "direction" }, providers: [IconService], viewQueries: [{ propertyName: "cardContainer", first: true, predicate: ["cardContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\r\n (mouseleave)=\"resumeScroll()\">\r\n <div #cardContainer class=\"card-container\">\r\n @for (card of displayCards; track card.title) {\r\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [avatar]=\"card?.avatar\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\r\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n [showCardBody]=\"true\">\r\n </sa-card>\r\n }\r\n </div>\r\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"], dependencies: [{ kind: "ngmodule", type: HttpClientModule }, { kind: "component", type: CardComponent, selector: "sa-card", inputs: ["title", "showCardHeader", "showCardBody", "showHeaderBodyDivider", "showCustomCardBody", "customWrapperClass", "chip", "body", "avatar", "image", "imageWidth", "avatarSize", "href", "hrefTarget", "icon", "iconSize", "subtitle", "logoIcon", "width", "height", "column"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6154
6203
|
}
|
|
6155
6204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ScrollingCardsComponent, decorators: [{
|
|
6156
6205
|
type: Component,
|
|
6157
|
-
args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\n (mouseleave)=\"resumeScroll()\">\n <div #cardContainer class=\"card-container\">\n @for (card of displayCards; track card.title) {\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [avatar]=\"card?.avatar\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\n [showCardBody]=\"true\">\n </sa-card>\n }\n </div>\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"] }]
|
|
6206
|
+
args: [{ selector: 'sa-scrolling-cards', standalone: true, imports: [HttpClientModule, CardComponent], providers: [IconService], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"scrolling-cards-container {{this.isVertical ? 'vertical': 'horizontal'}}\" (mouseenter)=\"pauseScroll()\"\r\n (mouseleave)=\"resumeScroll()\">\r\n <div #cardContainer class=\"card-container\">\r\n @for (card of displayCards; track card.title) {\r\n <sa-card [title]=\"card.title\" [body]=\"card.body\" [avatar]=\"card?.avatar\" [icon]=\"card.icon\" [iconSize]=\"'54'\"\r\n [customWrapperClass]=\"'sa-card-secondary-wrapper'\" [width]=\"'24.063rem'\" [column]=\"false\"\r\n [showCardBody]=\"true\">\r\n </sa-card>\r\n }\r\n </div>\r\n</div>", styles: [".scrolling-cards-container{overflow:hidden;width:fit-content}.scrolling-cards-container.vertical{height:100%;position:relative}.scrolling-cards-container.vertical:before,.scrolling-cards-container.vertical:after{content:\"\";position:absolute;width:100%;height:var(--medium-36px);z-index:1}.scrolling-cards-container.vertical:before{background:#fbfaff;background:-moz-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(180deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.scrolling-cards-container.vertical:after{bottom:0;background:#fbfaff;background:-moz-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:-webkit-linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);background:linear-gradient(360deg,var(--structural-primarytint) 10%,rgba(255,255,255,.12) 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=\"var(--structural-primarytint)\",endColorstr=\"#ffffff\",GradientType=1)}.card-container{display:flex;gap:var(--small-16px);animation-duration:var(--scroll-duration, 30s);animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:var(--scroll-direction, normal);width:fit-content}.card-container.horizontal{flex-direction:row;animation-name:scroll-horizontal}@keyframes scroll-vertical{0%{transform:translateY(0)}to{transform:translateY(calc(-50% - var(--small-16px)))}}@keyframes scroll-horizontal{0%{transform:translate(0)}to{transform:translate(calc(-50% - var(--small-16px)))}}sa-card{flex-shrink:0}.card-container.vertical{flex-direction:column;animation-name:scroll-vertical}@keyframes scroll-continuous{0%{transform:translate(100%)}to{transform:translate(-100%)}}\n"] }]
|
|
6158
6207
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { cards: [{
|
|
6159
6208
|
type: Input,
|
|
6160
6209
|
args: [{ required: true }]
|
|
@@ -6208,18 +6257,18 @@ class SkeletonContainerComponent {
|
|
|
6208
6257
|
};
|
|
6209
6258
|
}
|
|
6210
6259
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6211
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonContainerComponent, isStandalone: true, selector: "sa-skeleton-container", inputs: { gap: "gap", padding: "padding", direction: "direction" }, ngImport: i0, template: `
|
|
6212
|
-
<div class="skeleton-container" [ngStyle]="containerStyles">
|
|
6213
|
-
<ng-content></ng-content>
|
|
6214
|
-
</div>
|
|
6260
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: SkeletonContainerComponent, isStandalone: true, selector: "sa-skeleton-container", inputs: { gap: "gap", padding: "padding", direction: "direction" }, ngImport: i0, template: `
|
|
6261
|
+
<div class="skeleton-container" [ngStyle]="containerStyles">
|
|
6262
|
+
<ng-content></ng-content>
|
|
6263
|
+
</div>
|
|
6215
6264
|
`, isInline: true, styles: [".skeleton-container{display:flex;flex-direction:column;gap:var(--sa-skeleton-gap, 1rem);padding:var(--sa-skeleton-padding, 1rem)}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
6216
6265
|
}
|
|
6217
6266
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonContainerComponent, decorators: [{
|
|
6218
6267
|
type: Component,
|
|
6219
|
-
args: [{ selector: 'sa-skeleton-container', standalone: true, imports: [NgStyle], template: `
|
|
6220
|
-
<div class="skeleton-container" [ngStyle]="containerStyles">
|
|
6221
|
-
<ng-content></ng-content>
|
|
6222
|
-
</div>
|
|
6268
|
+
args: [{ selector: 'sa-skeleton-container', standalone: true, imports: [NgStyle], template: `
|
|
6269
|
+
<div class="skeleton-container" [ngStyle]="containerStyles">
|
|
6270
|
+
<ng-content></ng-content>
|
|
6271
|
+
</div>
|
|
6223
6272
|
`, styles: [".skeleton-container{display:flex;flex-direction:column;gap:var(--sa-skeleton-gap, 1rem);padding:var(--sa-skeleton-padding, 1rem)}\n"] }]
|
|
6224
6273
|
}], propDecorators: { gap: [{
|
|
6225
6274
|
type: Input
|
|
@@ -6361,102 +6410,102 @@ class SkeletonLoaderComponent {
|
|
|
6361
6410
|
}
|
|
6362
6411
|
}
|
|
6363
6412
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonLoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6364
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SkeletonLoaderComponent, isStandalone: true, selector: "sa-skeleton-loader", inputs: { preset: "preset", config: "config" }, usesOnChanges: true, ngImport: i0, template: `
|
|
6365
|
-
<sa-skeleton-container
|
|
6366
|
-
[gap]="config?.containerConfig?.gap"
|
|
6367
|
-
[padding]="config?.containerConfig?.padding"
|
|
6368
|
-
[direction]="config?.containerConfig?.direction || 'column'"
|
|
6369
|
-
>
|
|
6370
|
-
@for (item of config?.items; track $index) {
|
|
6371
|
-
@switch (item.type) {
|
|
6372
|
-
@case ('text') {
|
|
6373
|
-
<sa-skeleton-text
|
|
6374
|
-
[width]="item.width"
|
|
6375
|
-
[height]="item.height"
|
|
6376
|
-
></sa-skeleton-text>
|
|
6377
|
-
}
|
|
6378
|
-
@case ('circle') {
|
|
6379
|
-
<sa-skeleton-circle
|
|
6380
|
-
[size]="item.size"
|
|
6381
|
-
></sa-skeleton-circle>
|
|
6382
|
-
}
|
|
6383
|
-
@case ('rectangle') {
|
|
6384
|
-
<sa-skeleton-rectangle
|
|
6385
|
-
[width]="item.width"
|
|
6386
|
-
[height]="item.height"
|
|
6387
|
-
></sa-skeleton-rectangle>
|
|
6388
|
-
}
|
|
6389
|
-
@case ('elliptical') {
|
|
6390
|
-
<sa-skeleton-elliptical
|
|
6391
|
-
[width]="item.width"
|
|
6392
|
-
[height]="item.height"
|
|
6393
|
-
></sa-skeleton-elliptical>
|
|
6394
|
-
}
|
|
6395
|
-
@case ('container') {
|
|
6396
|
-
<sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
|
|
6397
|
-
@for (subItem of item.items; track $index) {
|
|
6398
|
-
@switch (subItem.type) {
|
|
6399
|
-
@case ('text') {
|
|
6400
|
-
<sa-skeleton-text
|
|
6401
|
-
[width]="subItem.width"
|
|
6402
|
-
[height]="subItem.height"
|
|
6403
|
-
></sa-skeleton-text>
|
|
6404
|
-
}
|
|
6405
|
-
@case ('circle') {
|
|
6406
|
-
<sa-skeleton-circle
|
|
6407
|
-
[size]="subItem.size"
|
|
6408
|
-
></sa-skeleton-circle>
|
|
6409
|
-
}
|
|
6410
|
-
@case ('rectangle') {
|
|
6411
|
-
<sa-skeleton-rectangle
|
|
6412
|
-
[width]="subItem.width"
|
|
6413
|
-
[height]="subItem.height"
|
|
6414
|
-
></sa-skeleton-rectangle>
|
|
6415
|
-
}
|
|
6416
|
-
@case ('elliptical') {
|
|
6417
|
-
<sa-skeleton-elliptical
|
|
6418
|
-
[width]="subItem.width"
|
|
6419
|
-
[height]="subItem.height"
|
|
6420
|
-
></sa-skeleton-elliptical>
|
|
6421
|
-
}
|
|
6422
|
-
@case ('container') {
|
|
6423
|
-
<sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
|
|
6424
|
-
@for (subSubItem of subItem.items; track $index) {
|
|
6425
|
-
@switch (subSubItem.type) {
|
|
6426
|
-
@case ('text') {
|
|
6427
|
-
<sa-skeleton-text
|
|
6428
|
-
[width]="subSubItem.width"
|
|
6429
|
-
[height]="subSubItem.height"
|
|
6430
|
-
></sa-skeleton-text>
|
|
6431
|
-
}
|
|
6432
|
-
@case ('circle') {
|
|
6433
|
-
<sa-skeleton-circle
|
|
6434
|
-
[size]="subSubItem.size"
|
|
6435
|
-
></sa-skeleton-circle>
|
|
6436
|
-
}
|
|
6437
|
-
@case ('rectangle') {
|
|
6438
|
-
<sa-skeleton-rectangle
|
|
6439
|
-
[width]="subSubItem.width"
|
|
6440
|
-
[height]="subSubItem.height"
|
|
6441
|
-
></sa-skeleton-rectangle>
|
|
6442
|
-
}
|
|
6443
|
-
@case ('elliptical') {
|
|
6444
|
-
<sa-skeleton-elliptical
|
|
6445
|
-
[width]="subSubItem.width"
|
|
6446
|
-
[height]="subSubItem.height"
|
|
6447
|
-
></sa-skeleton-elliptical>
|
|
6448
|
-
}
|
|
6449
|
-
}
|
|
6450
|
-
}
|
|
6451
|
-
</sa-skeleton-container>
|
|
6452
|
-
}
|
|
6453
|
-
}
|
|
6454
|
-
}
|
|
6455
|
-
</sa-skeleton-container>
|
|
6456
|
-
}
|
|
6457
|
-
}
|
|
6458
|
-
}
|
|
6459
|
-
</sa-skeleton-container>
|
|
6413
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: SkeletonLoaderComponent, isStandalone: true, selector: "sa-skeleton-loader", inputs: { preset: "preset", config: "config" }, usesOnChanges: true, ngImport: i0, template: `
|
|
6414
|
+
<sa-skeleton-container
|
|
6415
|
+
[gap]="config?.containerConfig?.gap"
|
|
6416
|
+
[padding]="config?.containerConfig?.padding"
|
|
6417
|
+
[direction]="config?.containerConfig?.direction || 'column'"
|
|
6418
|
+
>
|
|
6419
|
+
@for (item of config?.items; track $index) {
|
|
6420
|
+
@switch (item.type) {
|
|
6421
|
+
@case ('text') {
|
|
6422
|
+
<sa-skeleton-text
|
|
6423
|
+
[width]="item.width"
|
|
6424
|
+
[height]="item.height"
|
|
6425
|
+
></sa-skeleton-text>
|
|
6426
|
+
}
|
|
6427
|
+
@case ('circle') {
|
|
6428
|
+
<sa-skeleton-circle
|
|
6429
|
+
[size]="item.size"
|
|
6430
|
+
></sa-skeleton-circle>
|
|
6431
|
+
}
|
|
6432
|
+
@case ('rectangle') {
|
|
6433
|
+
<sa-skeleton-rectangle
|
|
6434
|
+
[width]="item.width"
|
|
6435
|
+
[height]="item.height"
|
|
6436
|
+
></sa-skeleton-rectangle>
|
|
6437
|
+
}
|
|
6438
|
+
@case ('elliptical') {
|
|
6439
|
+
<sa-skeleton-elliptical
|
|
6440
|
+
[width]="item.width"
|
|
6441
|
+
[height]="item.height"
|
|
6442
|
+
></sa-skeleton-elliptical>
|
|
6443
|
+
}
|
|
6444
|
+
@case ('container') {
|
|
6445
|
+
<sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
|
|
6446
|
+
@for (subItem of item.items; track $index) {
|
|
6447
|
+
@switch (subItem.type) {
|
|
6448
|
+
@case ('text') {
|
|
6449
|
+
<sa-skeleton-text
|
|
6450
|
+
[width]="subItem.width"
|
|
6451
|
+
[height]="subItem.height"
|
|
6452
|
+
></sa-skeleton-text>
|
|
6453
|
+
}
|
|
6454
|
+
@case ('circle') {
|
|
6455
|
+
<sa-skeleton-circle
|
|
6456
|
+
[size]="subItem.size"
|
|
6457
|
+
></sa-skeleton-circle>
|
|
6458
|
+
}
|
|
6459
|
+
@case ('rectangle') {
|
|
6460
|
+
<sa-skeleton-rectangle
|
|
6461
|
+
[width]="subItem.width"
|
|
6462
|
+
[height]="subItem.height"
|
|
6463
|
+
></sa-skeleton-rectangle>
|
|
6464
|
+
}
|
|
6465
|
+
@case ('elliptical') {
|
|
6466
|
+
<sa-skeleton-elliptical
|
|
6467
|
+
[width]="subItem.width"
|
|
6468
|
+
[height]="subItem.height"
|
|
6469
|
+
></sa-skeleton-elliptical>
|
|
6470
|
+
}
|
|
6471
|
+
@case ('container') {
|
|
6472
|
+
<sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
|
|
6473
|
+
@for (subSubItem of subItem.items; track $index) {
|
|
6474
|
+
@switch (subSubItem.type) {
|
|
6475
|
+
@case ('text') {
|
|
6476
|
+
<sa-skeleton-text
|
|
6477
|
+
[width]="subSubItem.width"
|
|
6478
|
+
[height]="subSubItem.height"
|
|
6479
|
+
></sa-skeleton-text>
|
|
6480
|
+
}
|
|
6481
|
+
@case ('circle') {
|
|
6482
|
+
<sa-skeleton-circle
|
|
6483
|
+
[size]="subSubItem.size"
|
|
6484
|
+
></sa-skeleton-circle>
|
|
6485
|
+
}
|
|
6486
|
+
@case ('rectangle') {
|
|
6487
|
+
<sa-skeleton-rectangle
|
|
6488
|
+
[width]="subSubItem.width"
|
|
6489
|
+
[height]="subSubItem.height"
|
|
6490
|
+
></sa-skeleton-rectangle>
|
|
6491
|
+
}
|
|
6492
|
+
@case ('elliptical') {
|
|
6493
|
+
<sa-skeleton-elliptical
|
|
6494
|
+
[width]="subSubItem.width"
|
|
6495
|
+
[height]="subSubItem.height"
|
|
6496
|
+
></sa-skeleton-elliptical>
|
|
6497
|
+
}
|
|
6498
|
+
}
|
|
6499
|
+
}
|
|
6500
|
+
</sa-skeleton-container>
|
|
6501
|
+
}
|
|
6502
|
+
}
|
|
6503
|
+
}
|
|
6504
|
+
</sa-skeleton-container>
|
|
6505
|
+
}
|
|
6506
|
+
}
|
|
6507
|
+
}
|
|
6508
|
+
</sa-skeleton-container>
|
|
6460
6509
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: SkeletonTextComponent, selector: "sa-skeleton-text", inputs: ["width", "height"] }, { kind: "component", type: SkeletonCircleComponent, selector: "sa-skeleton-circle", inputs: ["size"] }, { kind: "component", type: SkeletonRectangleComponent, selector: "sa-skeleton-rectangle", inputs: ["width", "height"] }, { kind: "component", type: SkeletonEllipticalComponent, selector: "sa-skeleton-elliptical", inputs: ["width", "height"] }, { kind: "component", type: SkeletonContainerComponent, selector: "sa-skeleton-container", inputs: ["gap", "padding", "direction"] }] }); }
|
|
6461
6510
|
}
|
|
6462
6511
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: SkeletonLoaderComponent, decorators: [{
|
|
@@ -6473,102 +6522,102 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
6473
6522
|
SkeletonEllipticalComponent,
|
|
6474
6523
|
SkeletonContainerComponent
|
|
6475
6524
|
],
|
|
6476
|
-
template: `
|
|
6477
|
-
<sa-skeleton-container
|
|
6478
|
-
[gap]="config?.containerConfig?.gap"
|
|
6479
|
-
[padding]="config?.containerConfig?.padding"
|
|
6480
|
-
[direction]="config?.containerConfig?.direction || 'column'"
|
|
6481
|
-
>
|
|
6482
|
-
@for (item of config?.items; track $index) {
|
|
6483
|
-
@switch (item.type) {
|
|
6484
|
-
@case ('text') {
|
|
6485
|
-
<sa-skeleton-text
|
|
6486
|
-
[width]="item.width"
|
|
6487
|
-
[height]="item.height"
|
|
6488
|
-
></sa-skeleton-text>
|
|
6489
|
-
}
|
|
6490
|
-
@case ('circle') {
|
|
6491
|
-
<sa-skeleton-circle
|
|
6492
|
-
[size]="item.size"
|
|
6493
|
-
></sa-skeleton-circle>
|
|
6494
|
-
}
|
|
6495
|
-
@case ('rectangle') {
|
|
6496
|
-
<sa-skeleton-rectangle
|
|
6497
|
-
[width]="item.width"
|
|
6498
|
-
[height]="item.height"
|
|
6499
|
-
></sa-skeleton-rectangle>
|
|
6500
|
-
}
|
|
6501
|
-
@case ('elliptical') {
|
|
6502
|
-
<sa-skeleton-elliptical
|
|
6503
|
-
[width]="item.width"
|
|
6504
|
-
[height]="item.height"
|
|
6505
|
-
></sa-skeleton-elliptical>
|
|
6506
|
-
}
|
|
6507
|
-
@case ('container') {
|
|
6508
|
-
<sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
|
|
6509
|
-
@for (subItem of item.items; track $index) {
|
|
6510
|
-
@switch (subItem.type) {
|
|
6511
|
-
@case ('text') {
|
|
6512
|
-
<sa-skeleton-text
|
|
6513
|
-
[width]="subItem.width"
|
|
6514
|
-
[height]="subItem.height"
|
|
6515
|
-
></sa-skeleton-text>
|
|
6516
|
-
}
|
|
6517
|
-
@case ('circle') {
|
|
6518
|
-
<sa-skeleton-circle
|
|
6519
|
-
[size]="subItem.size"
|
|
6520
|
-
></sa-skeleton-circle>
|
|
6521
|
-
}
|
|
6522
|
-
@case ('rectangle') {
|
|
6523
|
-
<sa-skeleton-rectangle
|
|
6524
|
-
[width]="subItem.width"
|
|
6525
|
-
[height]="subItem.height"
|
|
6526
|
-
></sa-skeleton-rectangle>
|
|
6527
|
-
}
|
|
6528
|
-
@case ('elliptical') {
|
|
6529
|
-
<sa-skeleton-elliptical
|
|
6530
|
-
[width]="subItem.width"
|
|
6531
|
-
[height]="subItem.height"
|
|
6532
|
-
></sa-skeleton-elliptical>
|
|
6533
|
-
}
|
|
6534
|
-
@case ('container') {
|
|
6535
|
-
<sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
|
|
6536
|
-
@for (subSubItem of subItem.items; track $index) {
|
|
6537
|
-
@switch (subSubItem.type) {
|
|
6538
|
-
@case ('text') {
|
|
6539
|
-
<sa-skeleton-text
|
|
6540
|
-
[width]="subSubItem.width"
|
|
6541
|
-
[height]="subSubItem.height"
|
|
6542
|
-
></sa-skeleton-text>
|
|
6543
|
-
}
|
|
6544
|
-
@case ('circle') {
|
|
6545
|
-
<sa-skeleton-circle
|
|
6546
|
-
[size]="subSubItem.size"
|
|
6547
|
-
></sa-skeleton-circle>
|
|
6548
|
-
}
|
|
6549
|
-
@case ('rectangle') {
|
|
6550
|
-
<sa-skeleton-rectangle
|
|
6551
|
-
[width]="subSubItem.width"
|
|
6552
|
-
[height]="subSubItem.height"
|
|
6553
|
-
></sa-skeleton-rectangle>
|
|
6554
|
-
}
|
|
6555
|
-
@case ('elliptical') {
|
|
6556
|
-
<sa-skeleton-elliptical
|
|
6557
|
-
[width]="subSubItem.width"
|
|
6558
|
-
[height]="subSubItem.height"
|
|
6559
|
-
></sa-skeleton-elliptical>
|
|
6560
|
-
}
|
|
6561
|
-
}
|
|
6562
|
-
}
|
|
6563
|
-
</sa-skeleton-container>
|
|
6564
|
-
}
|
|
6565
|
-
}
|
|
6566
|
-
}
|
|
6567
|
-
</sa-skeleton-container>
|
|
6568
|
-
}
|
|
6569
|
-
}
|
|
6570
|
-
}
|
|
6571
|
-
</sa-skeleton-container>
|
|
6525
|
+
template: `
|
|
6526
|
+
<sa-skeleton-container
|
|
6527
|
+
[gap]="config?.containerConfig?.gap"
|
|
6528
|
+
[padding]="config?.containerConfig?.padding"
|
|
6529
|
+
[direction]="config?.containerConfig?.direction || 'column'"
|
|
6530
|
+
>
|
|
6531
|
+
@for (item of config?.items; track $index) {
|
|
6532
|
+
@switch (item.type) {
|
|
6533
|
+
@case ('text') {
|
|
6534
|
+
<sa-skeleton-text
|
|
6535
|
+
[width]="item.width"
|
|
6536
|
+
[height]="item.height"
|
|
6537
|
+
></sa-skeleton-text>
|
|
6538
|
+
}
|
|
6539
|
+
@case ('circle') {
|
|
6540
|
+
<sa-skeleton-circle
|
|
6541
|
+
[size]="item.size"
|
|
6542
|
+
></sa-skeleton-circle>
|
|
6543
|
+
}
|
|
6544
|
+
@case ('rectangle') {
|
|
6545
|
+
<sa-skeleton-rectangle
|
|
6546
|
+
[width]="item.width"
|
|
6547
|
+
[height]="item.height"
|
|
6548
|
+
></sa-skeleton-rectangle>
|
|
6549
|
+
}
|
|
6550
|
+
@case ('elliptical') {
|
|
6551
|
+
<sa-skeleton-elliptical
|
|
6552
|
+
[width]="item.width"
|
|
6553
|
+
[height]="item.height"
|
|
6554
|
+
></sa-skeleton-elliptical>
|
|
6555
|
+
}
|
|
6556
|
+
@case ('container') {
|
|
6557
|
+
<sa-skeleton-container [direction]="item.direction" [gap]="item.gap">
|
|
6558
|
+
@for (subItem of item.items; track $index) {
|
|
6559
|
+
@switch (subItem.type) {
|
|
6560
|
+
@case ('text') {
|
|
6561
|
+
<sa-skeleton-text
|
|
6562
|
+
[width]="subItem.width"
|
|
6563
|
+
[height]="subItem.height"
|
|
6564
|
+
></sa-skeleton-text>
|
|
6565
|
+
}
|
|
6566
|
+
@case ('circle') {
|
|
6567
|
+
<sa-skeleton-circle
|
|
6568
|
+
[size]="subItem.size"
|
|
6569
|
+
></sa-skeleton-circle>
|
|
6570
|
+
}
|
|
6571
|
+
@case ('rectangle') {
|
|
6572
|
+
<sa-skeleton-rectangle
|
|
6573
|
+
[width]="subItem.width"
|
|
6574
|
+
[height]="subItem.height"
|
|
6575
|
+
></sa-skeleton-rectangle>
|
|
6576
|
+
}
|
|
6577
|
+
@case ('elliptical') {
|
|
6578
|
+
<sa-skeleton-elliptical
|
|
6579
|
+
[width]="subItem.width"
|
|
6580
|
+
[height]="subItem.height"
|
|
6581
|
+
></sa-skeleton-elliptical>
|
|
6582
|
+
}
|
|
6583
|
+
@case ('container') {
|
|
6584
|
+
<sa-skeleton-container [direction]="subItem.direction" [gap]="subItem.gap">
|
|
6585
|
+
@for (subSubItem of subItem.items; track $index) {
|
|
6586
|
+
@switch (subSubItem.type) {
|
|
6587
|
+
@case ('text') {
|
|
6588
|
+
<sa-skeleton-text
|
|
6589
|
+
[width]="subSubItem.width"
|
|
6590
|
+
[height]="subSubItem.height"
|
|
6591
|
+
></sa-skeleton-text>
|
|
6592
|
+
}
|
|
6593
|
+
@case ('circle') {
|
|
6594
|
+
<sa-skeleton-circle
|
|
6595
|
+
[size]="subSubItem.size"
|
|
6596
|
+
></sa-skeleton-circle>
|
|
6597
|
+
}
|
|
6598
|
+
@case ('rectangle') {
|
|
6599
|
+
<sa-skeleton-rectangle
|
|
6600
|
+
[width]="subSubItem.width"
|
|
6601
|
+
[height]="subSubItem.height"
|
|
6602
|
+
></sa-skeleton-rectangle>
|
|
6603
|
+
}
|
|
6604
|
+
@case ('elliptical') {
|
|
6605
|
+
<sa-skeleton-elliptical
|
|
6606
|
+
[width]="subSubItem.width"
|
|
6607
|
+
[height]="subSubItem.height"
|
|
6608
|
+
></sa-skeleton-elliptical>
|
|
6609
|
+
}
|
|
6610
|
+
}
|
|
6611
|
+
}
|
|
6612
|
+
</sa-skeleton-container>
|
|
6613
|
+
}
|
|
6614
|
+
}
|
|
6615
|
+
}
|
|
6616
|
+
</sa-skeleton-container>
|
|
6617
|
+
}
|
|
6618
|
+
}
|
|
6619
|
+
}
|
|
6620
|
+
</sa-skeleton-container>
|
|
6572
6621
|
`
|
|
6573
6622
|
}]
|
|
6574
6623
|
}], propDecorators: { preset: [{
|
|
@@ -6619,11 +6668,11 @@ class StepperComponent extends FieldType {
|
|
|
6619
6668
|
});
|
|
6620
6669
|
}
|
|
6621
6670
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6622
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StepperComponent, isStandalone: true, selector: "sa-stepper", inputs: { latestStep: "latestStep", editable: "editable", stepLabels: "stepLabels", doneIcon: "doneIcon" }, outputs: { stepped: "stepped" }, usesInheritance: true, ngImport: i0, template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n <div\n class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n </label>\n <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n </div>\n <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
6671
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: StepperComponent, isStandalone: true, selector: "sa-stepper", inputs: { latestStep: "latestStep", editable: "editable", stepLabels: "stepLabels", doneIcon: "doneIcon" }, outputs: { stepped: "stepped" }, usesInheritance: true, ngImport: i0, template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\r\n <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\r\n <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\r\n [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\r\n <div\r\n class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\r\n <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\r\n class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\r\n </label>\r\n <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\r\n </div>\r\n <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\r\n </div>\r\n</div>\r\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
6623
6672
|
}
|
|
6624
6673
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: StepperComponent, decorators: [{
|
|
6625
6674
|
type: Component,
|
|
6626
|
-
args: [{ selector: 'sa-stepper', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\n <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\n <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\n [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\n <div\n class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\n <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\n class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\n </label>\n <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\n </div>\n <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\n </div>\n</div>\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"] }]
|
|
6675
|
+
args: [{ selector: 'sa-stepper', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"stepper {{isDisabled ? 'disabled' : 'active'}}\">\r\n <div class=\"steps\" *ngFor=\"let label of stepLabels; let i = index\">\r\n <input id=\"stepper-{{uuid}}-{{i}}\" (change)=\"update(i)\" name=\"stepper-radio-{{uuid}}\"\r\n [checked]=\"i == latestStep ? true: false\" class=\"step-hide\" type=\"radio\">\r\n <div\r\n class=\"label-wrapper {{i < latestStep ? 'done' : ''}} {{i > latestStep ? 'default' : ''}} {{i == latestStep ? 'latest' : ''}}\">\r\n <label [style]=\"i < latestStep ? tickIcon : ''\" for=\"stepper-{{uuid}}-{{i}}\"\r\n class=\"step-label-icon {{i > latestStep ? 'undone' : ''}}\">\r\n </label>\r\n <label for=\"stepper-{{uuid}}-{{i}}\" class=\"step-label-text\">{{label.name}}</label>\r\n </div>\r\n <div *ngIf=\" i !=stepLabels.length-1\" class=\"line {{i < latestStep ? 'done' : 'default'}}\"></div>\r\n </div>\r\n</div>\r\n", styles: [".stepper{display:flex;width:max-content;justify-content:center;align-items:center;font-family:var(--font)}.active{--main-bg: var(--primary-500);--main-line: var(--primary-500)}.disabled{--main-bg: var(--grey-100);--main-line: var(--grey-50)}.done{--bg-line: var(--main-line);--bg: var(--main-bg);--border: none}.default{--bg-line: var(--grey-50);--bg: var(--grey-100);--border: 4px solid white}.latest{--bg: white;--border: 4px solid var(--main-bg)}.steps{display:flex;justify-content:center;align-items:center;position:relative}.line{width:140px;height:2px;background-color:var(--bg-line);transition:.25s}.label-wrapper{width:16px;height:16px;height:fit-content;border-radius:16px;background-color:var(--bg);display:flex;justify-content:center}.step-label-icon{display:flex;justify-content:center;width:16px;height:16px;border-radius:16px;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-position:center;mask-position:center;background-position:center;background-color:#fff;border:var(--border);box-sizing:border-box;font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.25px;cursor:pointer}.undone{background-color:var(--grey-100)}.step-label-text{color:var(--text-mediumemphasis, #697079);position:absolute;top:20px;cursor:pointer}.step-hide{display:none}\n"] }]
|
|
6627
6676
|
}], propDecorators: { latestStep: [{
|
|
6628
6677
|
type: Input
|
|
6629
6678
|
}], editable: [{
|
|
@@ -6655,11 +6704,11 @@ class TabsComponent {
|
|
|
6655
6704
|
this.tabChanged.emit(evt.target.value);
|
|
6656
6705
|
}
|
|
6657
6706
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6658
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TabsComponent, isStandalone: true, selector: "sa-tabs", inputs: { tabs: "tabs", type: "type", defaultTab: "defaultTab" }, outputs: { tabChanged: "tabChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-wrapper {{type}}\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n {{item.tabName}}\n <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n </label>\n </div>\n </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
6707
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TabsComponent, isStandalone: true, selector: "sa-tabs", inputs: { tabs: "tabs", type: "type", defaultTab: "defaultTab" }, outputs: { tabChanged: "tabChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"tab-wrapper {{type}}\">\r\n <div class=\"tabs\">\r\n <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\r\n <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\r\n id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\r\n <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\r\n <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\r\n </div>\r\n {{item.tabName}}\r\n <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\r\n </div>\r\n <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
6659
6708
|
}
|
|
6660
6709
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TabsComponent, decorators: [{
|
|
6661
6710
|
type: Component,
|
|
6662
|
-
args: [{ selector: 'sa-tabs', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"tab-wrapper {{type}}\">\n <div class=\"tabs\">\n <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\n <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\n id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\n <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\n <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n {{item.tabName}}\n <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\n </div>\n <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\n </label>\n </div>\n </div>\n</div>\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"] }]
|
|
6711
|
+
args: [{ selector: 'sa-tabs', standalone: true, imports: [NgFor, NgIf], template: "<div class=\"tab-wrapper {{type}}\">\r\n <div class=\"tabs\">\r\n <div *ngFor=\"let item of tabs, let i = index\" class=\"tab-item\">\r\n <input [checked]=\"(defaultTab == i) ? true : false\" [value]=\"i\" (change)=\"tabChange($event)\"\r\n id=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-checks\" type=\"radio\" name=\"tab-checkbox-{{uuid}}\">\r\n <label for=\"tab-check-{{i}}-{{uuid}}\" class=\"tab-label\">\r\n <div *ngIf=\"item.iconPosition == 'left' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\r\n </div>\r\n {{item.tabName}}\r\n <div *ngIf=\"item.iconPosition == 'right' || item.iconPosition == 'both'\" class=\"svg-icon\" [style]=\"svgStyle[i]\">\r\n </div>\r\n <div class=\"badge\" *ngIf=\"item.badgeContent\">{{item.badgeContent}}</div>\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n", styles: [".box{--bg: var(--grey-50);--tab-bg: white;--border: none;--tab-border: none;--tab-border-radius: 2px;--icon-color: var(--text-mediumemphasis)}.inline{--bg: white;--tab-bg: white;--border: 1px solid var(--grey-50, #E9EAEB);--tab-border: var(--primary-500, #1B77E4);--tab-border-radius: none;--icon-color: var(--text-mediumemphasis)}.tab-wrapper{width:max-content;padding:var(--small-8px, 8px);background-color:var(--bg);border-radius:var(--Small-4px, 4px)}.tabs{display:flex;height:42px;gap:var(--small-8px, 8px);font-family:var(--font);border-bottom:var(--border)}.tab-item{display:flex;justify-content:center;align-items:center;gap:var(--small-8px, 8px)}.tab-label{display:flex;justify-content:center;align-items:center;gap:var(--small-4px, 4px);padding:var(--small-8px, 8px) var(--small-12px, 12px);border-bottom:none;transition:.1s;font-size:14px;font-style:normal;font-weight:500;line-height:20px;letter-spacing:.1px;color:var(--text-mediumemphasis);cursor:pointer}.tab-checks{display:none}.tab-checks:checked+label{background-color:var(--tab-bg);border-bottom:2px solid var(--tab-border);border-radius:var(--tab-border-radius);color:var(--primary-500);--icon-color: var(--primary-500) }.tab-checks:checked+label .badge{width:auto;height:auto;padding:var(--Small-4px, 4px) var(--Small-12px, 12px);border-radius:16px;font-size:12px;font-style:normal;font-weight:500;line-height:16px;letter-spacing:.5px}.badge{width:var(--small-8px);height:var(--small-8px);border-radius:var(--small-8px);background-color:var(--secondary-500, #FE8235);color:#fff;margin-left:var(--small-4px);overflow:hidden;transition:.25s;font-size:0}.svg-icon{height:16px;width:16px;-webkit-mask-size:contain;mask-size:contain;background-color:var(--icon-color)}\n"] }]
|
|
6663
6712
|
}], propDecorators: { tabs: [{
|
|
6664
6713
|
type: Input
|
|
6665
6714
|
}], type: [{
|
|
@@ -6712,11 +6761,11 @@ class ToastComponent {
|
|
|
6712
6761
|
});
|
|
6713
6762
|
}
|
|
6714
6763
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6715
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", toastCloseIcon: "toastCloseIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width", toastIconSize: "toastIconSize", toastCloseIconSize: "toastCloseIconSize" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\n <div class=\"content\">\n <div class=\"toast-icon {{status}}\">\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n </div>\n <div class=\"head-subhead\">\n <p class=\"heading\">{{heading}}</p>\n <p class=\"subheading\">{{subHeading}}</p>\n </div>\n @if(closable){\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\n }\n </div>\n <!-- <div class=\"controls\">\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n size=\"medium\" state=\"default\">\n </sa-button>\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n size=\"medium\" state=\"default\">\n </sa-button>\n </div> -->\n\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n </div>\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }] }); }
|
|
6764
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.4", type: ToastComponent, isStandalone: true, selector: "sa-toast", inputs: { finishPercentage: "finishPercentage", heading: "heading", subHeading: "subHeading", statusIcon: "statusIcon", toastCloseIcon: "toastCloseIcon", status: "status", firstButtonName: "firstButtonName", secondButtonName: "secondButtonName", closable: "closable", filled: "filled", width: "width", toastIconSize: "toastIconSize", toastCloseIconSize: "toastCloseIconSize" }, outputs: { toastEvent: "toastEvent", firstButton: "firstButton", secondButton: "secondButton", closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\r\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\r\n </div>\r\n <div class=\"head-subhead\">\r\n <p class=\"heading\">{{heading}}</p>\r\n <p class=\"subheading\">{{subHeading}}</p>\r\n </div>\r\n @if(closable){\r\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\r\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\r\n }\r\n </div>\r\n <!-- <div class=\"controls\">\r\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div> -->\r\n\r\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\r\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\r\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\r\n </div>\r\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: IconComponent, selector: "sa-icon", inputs: ["img", "icon", "size", "color", "iconPath", "iconUrl", "customClass", "href", "hrefTarget", "iconPosition"], outputs: ["onClickEvent"] }] }); }
|
|
6716
6765
|
}
|
|
6717
6766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: ToastComponent, decorators: [{
|
|
6718
6767
|
type: Component,
|
|
6719
|
-
args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\n <div class=\"content\">\n <div class=\"toast-icon {{status}}\">\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\n </div>\n <div class=\"head-subhead\">\n <p class=\"heading\">{{heading}}</p>\n <p class=\"subheading\">{{subHeading}}</p>\n </div>\n @if(closable){\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\n }\n </div>\n <!-- <div class=\"controls\">\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\n size=\"medium\" state=\"default\">\n </sa-button>\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\n size=\"medium\" state=\"default\">\n </sa-button>\n </div> -->\n\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\n </div>\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"] }]
|
|
6768
|
+
args: [{ selector: 'sa-toast', standalone: true, imports: [CommonModule, ButtonComponent, IconComponent, ButtonComponent, MatIcon, NgIf], template: "<div class=\"toast\" [ngStyle]=\"toastStyles\">\r\n <div class=\"content\">\r\n <div class=\"toast-icon {{status}}\">\r\n <sa-icon [icon]=\"statusIcon\" [size]=\"toastIconSize\"></sa-icon>\r\n <!-- <img [src]=\"statusIcon\" alt=\"\"> -->\r\n </div>\r\n <div class=\"head-subhead\">\r\n <p class=\"heading\">{{heading}}</p>\r\n <p class=\"subheading\">{{subHeading}}</p>\r\n </div>\r\n @if(closable){\r\n <!-- <img class=\"cross\" (click)=\"closeToast()\" [src]=\"crossmark\" alt=\"\"> -->\r\n <sa-icon class=\"cross\" [icon]=\"toastCloseIcon\" [size]=\"toastCloseIconSize\" (click)=\"closeToast()\"></sa-icon>\r\n }\r\n </div>\r\n <!-- <div class=\"controls\">\r\n <sa-button *ngIf=\"firstButtonName\" (onClickEvent)=\"clicked(0)\" [text]=\"firstButtonName\" type=\"transparent\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n <sa-button *ngIf=\"secondButtonName\" (onClickEvent)=\"clicked(1)\" [text]=\"secondButtonName\" type=\"outline\"\r\n size=\"medium\" state=\"default\">\r\n </sa-button>\r\n </div> -->\r\n\r\n <div *ngIf=\"finishPercentage >= 0\" class=\"progress-bar\">\r\n <div class=\"progress-done\" [style.width]=\"finishPercentage+'%'\"></div>\r\n <div class=\"progress-left\" [style.width]=\"100-finishPercentage+'%'\"></div>\r\n </div>\r\n</div>", styles: [".toast{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:var(--small-12px, 12px);gap:var(--small-16px, 16px);border-radius:var(--small-8px, 8px);border:1px solid var(--grey-50, #E9EAEB);background:var(--structural-white, #FFF);box-shadow:0 0 12px #0000000d;font-family:var(--font);box-sizing:border-box}.cross{cursor:pointer}.heading{font-size:16px;font-style:normal;font-weight:600;line-height:24px;letter-spacing:.15px}.toast-icon{display:flex;justify-content:center;border-radius:50%;flex:.5}.positive{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-success-50);background-color:var(--semantic-success-50)}.negative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-error-50);background-color:var(--semantic-error-50)}.tentative{box-shadow:0 0 0 var(--small-4px, 4px) var(--semantic-yellow-50);background-color:var(--semantic-yellow-50)}.toast-icon img{width:24px;height:24px}.subheading{font-size:14px;font-style:normal;font-weight:400;line-height:20px;letter-spacing:.5px}.heading,.subheading{margin:0}.content{display:flex;justify-content:center;align-items:center;width:100%;gap:var(--small-12px, 12px)}.head-subhead{justify-content:space-between;display:flex;flex:5;flex-direction:column;gap:var(--small-4px, 4px)}.controls{width:100%;display:flex;justify-content:flex-end;align-items:center;gap:var(--small-12px, 12px)}.progress-bar{display:flex;width:100%}.progress-done{height:3px;background-color:var(--primary-500);border-radius:2px}.progress-left{height:3px;background-color:#c5c5c5;border-top-right-radius:2px;border-bottom-right-radius:2px}sa-icon{display:flex}\n"] }]
|
|
6720
6769
|
}], propDecorators: { finishPercentage: [{
|
|
6721
6770
|
type: Input
|
|
6722
6771
|
}], heading: [{
|
|
@@ -6819,7 +6868,7 @@ class TypographyAnimationComponent {
|
|
|
6819
6868
|
}, 100);
|
|
6820
6869
|
}
|
|
6821
6870
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.4", ngImport: i0, type: TypographyAnimationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6822
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TypographyAnimationComponent, isStandalone: true, selector: "sa-typography-animation", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"text-animation\">\n <span class=\"prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\n <span class=\"words-wrapper\">\n <ng-container *ngFor=\"let word of config.words; let i = index\">\n <span\n class=\"word\"\n [@slideAnimation]=\"currentWordIndex() === i ? 'visible' : 'hidden'\"\n [style.transition-delay]=\"config.animationDelay + 'ms'\"\n >\n {{ word }}\n </span>\n </ng-container>\n </span>\n </div>", styles: [".text-animation{display:flex;align-items:center;gap:.5rem;color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;line-height:1.2;min-height:2.4em}.prefix{white-space:nowrap}.words-wrapper{position:relative;display:inline-block;min-width:6.25rem;height:2.4em;vertical-align:top}.word{position:absolute;left:0;top:50%;width:100%;transform-origin:0 0;white-space:nowrap;opacity:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}.word.visible{position:absolute;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
6871
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.4", type: TypographyAnimationComponent, isStandalone: true, selector: "sa-typography-animation", inputs: { config: "config" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"text-animation\">\r\n <span class=\"prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n <span class=\"words-wrapper\">\r\n <ng-container *ngFor=\"let word of config.words; let i = index\">\r\n <span\r\n class=\"word\"\r\n [@slideAnimation]=\"currentWordIndex() === i ? 'visible' : 'hidden'\"\r\n [style.transition-delay]=\"config.animationDelay + 'ms'\"\r\n >\r\n {{ word }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n </div>", styles: [".text-animation{display:flex;align-items:center;gap:.5rem;color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;line-height:1.2;min-height:2.4em}.prefix{white-space:nowrap}.words-wrapper{position:relative;display:inline-block;min-width:6.25rem;height:2.4em;vertical-align:top}.word{position:absolute;left:0;top:50%;width:100%;transform-origin:0 0;white-space:nowrap;opacity:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}.word.visible{position:absolute;opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], animations: [
|
|
6823
6872
|
trigger('slideAnimation', [
|
|
6824
6873
|
state('hidden', style({
|
|
6825
6874
|
opacity: 0,
|
|
@@ -6857,7 +6906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.4", ngImpor
|
|
|
6857
6906
|
animate('{{duration}}ms ease-in')
|
|
6858
6907
|
], { params: { duration: 300 } })
|
|
6859
6908
|
])
|
|
6860
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"text-animation\">\n <span class=\"prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\n <span class=\"words-wrapper\">\n <ng-container *ngFor=\"let word of config.words; let i = index\">\n <span\n class=\"word\"\n [@slideAnimation]=\"currentWordIndex() === i ? 'visible' : 'hidden'\"\n [style.transition-delay]=\"config.animationDelay + 'ms'\"\n >\n {{ word }}\n </span>\n </ng-container>\n </span>\n </div>", styles: [".text-animation{display:flex;align-items:center;gap:.5rem;color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;line-height:1.2;min-height:2.4em}.prefix{white-space:nowrap}.words-wrapper{position:relative;display:inline-block;min-width:6.25rem;height:2.4em;vertical-align:top}.word{position:absolute;left:0;top:50%;width:100%;transform-origin:0 0;white-space:nowrap;opacity:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}.word.visible{position:absolute;opacity:1}\n"] }]
|
|
6909
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"text-animation\">\r\n <span class=\"prefix\" *ngIf=\"config.prefix\">{{ config.prefix }}</span>\r\n <span class=\"words-wrapper\">\r\n <ng-container *ngFor=\"let word of config.words; let i = index\">\r\n <span\r\n class=\"word\"\r\n [@slideAnimation]=\"currentWordIndex() === i ? 'visible' : 'hidden'\"\r\n [style.transition-delay]=\"config.animationDelay + 'ms'\"\r\n >\r\n {{ word }}\r\n </span>\r\n </ng-container>\r\n </span>\r\n </div>", styles: [".text-animation{display:flex;align-items:center;gap:.5rem;color:var(--text-highemphasis, #1C1B20);text-align:center;font-family:var(--font-roboto, Roboto);font-size:var(--small-16px, 16px);font-style:normal;font-weight:400;line-height:24px;letter-spacing:.5px;line-height:1.2;min-height:2.4em}.prefix{white-space:nowrap}.words-wrapper{position:relative;display:inline-block;min-width:6.25rem;height:2.4em;vertical-align:top}.word{position:absolute;left:0;top:50%;width:100%;transform-origin:0 0;white-space:nowrap;opacity:0;display:flex;align-items:center;justify-content:center;will-change:transform,opacity}.word.visible{position:absolute;opacity:1}\n"] }]
|
|
6861
6910
|
}], propDecorators: { config: [{
|
|
6862
6911
|
type: Input
|
|
6863
6912
|
}] } });
|